Merge pull request #45 from input-output-hk/fix/improve-summary-expander-component

feat: add plain prop to summary expander

Author: greatertomi

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

@@ -19,6 +19,7 @@ export type Props = OmitClassName<'button'> &
     title: string;
     disabled?: boolean;
     testId?: string;
+    plain?: boolean;
   }>;
 
 export const SummaryExpander = ({
@@ -28,6 +29,7 @@ export const SummaryExpander = ({
   disabled,
   testId,
   children,
+  plain = false,
   ...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]: plain,
         })}
       >
         <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',
+});

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

@@ -32,6 +32,9 @@ const MainComponents = (): JSX.Element => (
     <Variants.Cell>
       <SummaryExpander title="Title" open />
     </Variants.Cell>
+    <Variants.Cell>
+      <SummaryExpander title="Title" plain />
+    </Variants.Cell>
   </Variants.Row>
 );
 
@@ -93,7 +96,9 @@ export const Overview = (): JSX.Element => (
         <Divider my="$64" />
 
         <Section title="Main components">
-          <Variants.Table headers={['Collapsed (default)', 'Expanded']}>
+          <Variants.Table
+            headers={['Collapsed (default)', 'Expanded', 'Plain']}
+          >
             <MainComponents />
           </Variants.Table>