Refactor

seek-oss · Dec 10, 2024 · d6cadc2 · d6cadc2
1 parent dfa816f
commit d6cadc2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 33 deletions.
diff --git a/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx b/packages/braid-design-system/src/lib/components/Accordion/Accordion.tsx
@@ -29,6 +29,9 @@ export interface AccordionProps {
   data?: DataAttributeMap;
 }
 
+// Todo - rename
+export const defaultSize = 'large';
+
 const defaultSpaceForSize = {
   divided: {
     xsmall: 'medium',
@@ -46,7 +49,7 @@ const defaultSpaceForSize = {
 
 export const Accordion = ({
   children,
-  size = 'large',
+  size = defaultSize,
   tone,
   weight,
   space: spaceProp,

diff --git a/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx b/packages/braid-design-system/src/lib/components/Accordion/AccordionItem.tsx
@@ -7,8 +7,6 @@ import React, {
 import assert from 'assert';
 import { Box } from '../Box/Box';
 import { type TextProps, Text } from '../Text/Text';
-import { Columns } from '../Columns/Columns';
-import { Column } from '../Column/Column';
 import type { BadgeProps } from '../Badge/Badge';
 import { IconChevron } from '../icons';
 import {
@@ -101,7 +99,7 @@ export const AccordionItem = ({
     "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component",
   );
 
-  const size = accordionContext?.size ?? sizeProp ?? 'large';
+  const size = accordionContext?.size ?? sizeProp ?? defaultSize;
   const tone = accordionContext?.tone ?? toneProp ?? 'neutral';
   const weight = accordionContext?.weight ?? weightProp ?? 'medium';
   const itemSpace = itemSpaceForSize[size] ?? 'none';
@@ -124,7 +122,12 @@ export const AccordionItem = ({
   });
 
   return (
-    <Box {...buildDataAttributes({ data, validateRestProps: restProps })}>
+    <Box
+      {...buildDataAttributes({ data, validateRestProps: restProps })}
+      display="flex"
+      flexDirection="column"
+      gap={itemSpace}
+    >
       <Box position="relative" display="flex">
         <Box
           component="button"
@@ -142,29 +145,25 @@ export const AccordionItem = ({
             https://stackoverflow.com/questions/41100273/overflowing-button-text-is-being-clipped-in-safari
           */}
           <Box component="span" position="relative">
-            <Columns component="span" space={itemSpace}>
-              <Column>
-                <Text size={size} weight={weight} tone={tone} icon={icon}>
-                  {badge ? (
-                    <Box component="span" paddingRight={badgeSlotSpace}>
-                      {label}
-                    </Box>
-                  ) : (
-                    label
-                  )}
-                  {badge ? cloneElement(badge, {}) : null}
-                </Text>
-              </Column>
-              <Column width="content">
-                <Text
-                  size={size}
-                  weight={weight}
-                  tone={tone === 'neutral' ? 'secondary' : tone}
-                >
-                  <IconChevron direction={expanded ? 'up' : 'down'} />
-                </Text>
-              </Column>
-            </Columns>
+            <Spread component="span" space={itemSpace}>
+              <Text size={size} weight={weight} tone={tone} icon={icon}>
+                {badge ? (
+                  <Box component="span" paddingRight={badgeSlotSpace}>
+                    {label}
+                  </Box>
+                ) : (
+                  label
+                )}
+                {badge ? cloneElement(badge, {}) : null}
+              </Text>
+              <Text
+                size={size}
+                weight={weight}
+                tone={tone === 'neutral' ? 'secondary' : tone}
+              >
+                <IconChevron direction={expanded ? 'up' : 'down'} />
+              </Text>
+            </Spread>
           </Box>
         </Box>
         <Overlay
@@ -174,11 +173,7 @@ export const AccordionItem = ({
           className={[styles.focusRing, hideFocusRingsClassName]}
         />
       </Box>
-      <Box
-        paddingTop={itemSpace}
-        display={expanded ? 'block' : 'none'}
-        {...contentProps}
-      >
+      <Box display={expanded ? 'block' : 'none'} {...contentProps}>
         {children}
       </Box>
     </Box>