Add default style. Colors TBD. Update theme object

exoup · Mar 17, 2024 · 0e0d6f7 · 0e0d6f7
1 parent 8e8e78c
commit 0e0d6f7
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 61 deletions.
diff --git a/src/components/Accordion/Accordion.jsx b/src/components/Accordion/Accordion.jsx
@@ -70,7 +70,7 @@ export default function Accordion({ onChange = null, initialExpanded = [], accor
     )
 }
 
-export const Drawer = ({ ariaId, ariaControls, title, onClick = () => { }, onChange, expanded = false, icon = true, color, variant, className, children }) => {
+export const Drawer = ({ ariaId, ariaControls, title, onClick = () => { }, onChange, expanded = false, icon = true, buttonProps, color, variant, className, children }) => {
 
     const handleClick = () => {
         if (onChange) {
@@ -86,26 +86,48 @@ export const Drawer = ({ ariaId, ariaControls, title, onClick = () => { }, onCha
     const resolvedColor = color || themeColor || defaultOptions.color;
     const resolvedVariant = variant || defaultOptions.variant;
 
+    const initialContentClasses = mapObjectToString(
+        lookupOptions(initial, 'content', 'content'),
+    );
+    const initialButtonClasses = mapObjectToString(
+        lookupOptions(initial, 'button', 'button'),
+    )
+
     const initialClasses = mapObjectToString(initial);
-    const variantClasses = mapObjectToString(
-        lookupOptions(variants, resolvedVariant, defaultOptions.variant)[resolvedColor]
+
+    const containerVariant = mapObjectToString(
+        lookupOptions(variants, resolvedVariant, defaultOptions.variant)['content']['base'],
+        lookupOptions(variants, resolvedVariant, defaultOptions.variant)['content']['style'][resolvedColor],
     );
 
-    const classes = twMerge(
+    const buttonVariant = mapObjectToString(
+        lookupOptions(variants, resolvedVariant, defaultOptions.variant)['button']['base'],
+        lookupOptions(variants, resolvedVariant, defaultOptions.variant)['button']['style'][resolvedColor],
+    );
+
+    const contentClasses = twMerge(
         ...initialClasses,
-        variantClasses,
-        className,
+        ...initialContentClasses,
+        ...containerVariant,
+        className
+    );
+
+    const buttonClasses = twMerge(
+        ...initialButtonClasses,
+        ...buttonVariant,
+        buttonProps?.className,
     );
 
     return (
         <div>
             <button
+                {...buttonProps}
                 aria-expanded={expanded}
                 aria-controls={ariaControls}
                 id={ariaId}
                 role="button"
                 onClick={handleClick}
-                className="flex w-full items-center justify-between p-4 group/expandable">
+                className={buttonClasses}>
                 <h3 role="heading">
                     {title}
                 </h3>
@@ -119,7 +141,7 @@ export const Drawer = ({ ariaId, ariaControls, title, onClick = () => { }, onCha
                 className={twJoin('grid motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out',
                     expanded ? 'grid-rows-[1fr]' : 'grid-rows-[0fr] invisible')}>
                 <div className="overflow-hidden">
-                    <div data-open={expanded} className={classes}>
+                    <div data-open={expanded} className={contentClasses}>
                         {children}
                     </div>
                 </div>

diff --git a/src/components/Accordion/Accordion.stories.jsx b/src/components/Accordion/Accordion.stories.jsx
@@ -1,4 +1,3 @@
-import { Fragment } from "react";
 import Accordion, { Drawer } from "./Accordion";
 
 export default {
@@ -7,8 +6,8 @@ export default {
     },
     argTypes: {
         color: {
-            defaultValue: 'primary',
-            options: ['primary', 'secondary', 'tertiary', 'neutral'],
+            defaultValue: 'default',
+            options: ['default'],
             control: { type: 'radio' }
         },
         radius: {

diff --git a/src/theme/components/Accordion/Accordion.theme.js b/src/theme/components/Accordion/Accordion.theme.js
@@ -5,7 +5,7 @@ import drawer from "./Drawer/AccordionDrawer.theme";
 
 export const accordion = {
     defaultOptions: {
-        color: 'primary',
+        color: 'default',
         radius: 'round',
         variant: 'solid',
     },

diff --git a/src/theme/components/Accordion/AccordionFilled.theme.js b/src/theme/components/Accordion/AccordionFilled.theme.js
@@ -1,32 +1,11 @@
 const FilledOptions = {
-    primary: {
+    default: {
         base: {
-            initial: 'border',
-            light: 'bg-white border-gray-300',
-            dark: 'dark:bg-gray-800 dark:border-gray-700'
+            initial: 'border bg-transparent',
+            light: 'border-gray-4',
+            dark: 'dark:border-gray-10',
         }
     },
-    secondary: {
-        base: {
-            initial: 'border',
-            light: 'bg-secondary-50 border-light',
-            dark: 'dark:bg-zinc-900 dark:border-zinc-800'
-        }
-    },
-    tertiary: {
-        base: {
-            initial: 'border',
-            light: 'bg-white border-tertiary-200',
-            dark: 'dark:bg-tertiary-text dark:border-tertiary'
-        }
-    },
-    neutral: {
-        base: {
-            initial: 'border',
-            light: 'bg-neutral-50 border-neutral-700',
-            dark: 'dark:bg-neutral-900 dark:border-neutral-800'
-        }
-    }
 };
 
 export default FilledOptions;
diff --git a/src/theme/components/Accordion/Drawer/AccordionDrawer.theme.js b/src/theme/components/Accordion/Drawer/AccordionDrawer.theme.js
@@ -2,13 +2,13 @@ import FilledOptions from "./DrawerFilled.theme";
 
 export const drawer = {
     defaultOptions: {
-        color: 'primary',
+        color: 'default',
         variant: 'solid',
     },
     styles: {
         initial: {
-            base: 'p-4 pt-4 border-t-0',
-            expanded: 'data-[open=true]:border-t shadow-inner',
+            base: 'p-4 pt-4',
+            // expanded: 'data-[open=true]',
             transition: 'motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out'
         },
         variants: {

diff --git a/src/theme/components/Accordion/Drawer/DrawerFilled.theme.js b/src/theme/components/Accordion/Drawer/DrawerFilled.theme.js
@@ -1,31 +1,27 @@
 const FilledOptions = {
-    primary: {
+    button: {
         base: {
-            light: 'bg-gray-50 border-t-gray-200',
-            dark: 'dark:bg-gray-700/30 dark:border-t-gray-900/55',
-            shadow: 'dark:shadow-gray-800'
+            initial: 'flex w-full items-center justify-between p-4 group/expandable'
+        },
+        style: {
+            default: {
+                light: 'aria-expanded:bg-gray-1',
+                dark: 'aria-expanded:dark:bg-gray-11/90',
+                hover: 'hover:bg-gray-1 hover:dark:bg-gray-11/90',
+            }
         }
     },
-    secondary: {
+    content: {
         base: {
-            light: 'bg-white border-t-light/35',
-            dark: 'dark:bg-zinc-800 dark:border-t-zinc-900',
+            initial: ''
+        },
+        style: {
+            default: {
+                light: 'bg-gray-1',
+                dark: 'dark:bg-gray-11/90'
+            }
         }
     },
-    tertiary: {
-        base: {
-            light: 'bg-gray-50 border-t-gray-200',
-            dark: 'dark:bg-neutral-900 dark:border-t-neutral-950/75',
-            shadow: 'dark:shadow-neutral-800/10'
-        }
-    },
-    neutral: {
-        base: {
-            light: 'bg-white border-t-neutral-200',
-            dark: 'dark:bg-neutral-800 dark:border-t-neutral-950/75',
-            shadow: 'dark:shadow-neutral-900/10'
-        }
-    }
 };
 
 export default FilledOptions;