feat: add hasBorder prop to summary expander

Author: greatertomi

src/design-system/summary-expander/summary-expander.component.tsx

@@ -1,4 +1,4 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactNode } from 'react';
 import React from 'react';
 
 import * as Collapsible from '@radix-ui/react-collapsible';
@@ -16,9 +16,10 @@ export type Props = OmitClassName<'button'> &
   PropsWithChildren<{
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    title: string;
+    title: string | ReactNode;
     disabled?: boolean;
     testId?: string;
+    hasBorder?: boolean;
   }>;
 
 export const SummaryExpander = ({
@@ -28,6 +29,7 @@ export const SummaryExpander = ({
   disabled,
   testId,
   children,
+  hasBorder = true,
   ...props
 }: Readonly<Props>): JSX.Element => {
   return (
@@ -43,6 +45,7 @@ export const SummaryExpander = ({
         justifyContent="space-between"
         className={classNames(cx.header, {
           [cx.expanded]: open,
+          [cx.noBorder]: !hasBorder,
         })}
       >
         <Text.Body.Normal weight="$semibold" data-testid="expander-title">

src/design-system/summary-expander/summary-expander.css.ts

@@ -20,3 +20,7 @@ export const header = style([
 export const expanded = style({
   borderBottom: 'none',
 });
+
+export const noBorder = style({
+  border: 'none',
+});