Merge remote-tracking branch 'origin/develop'

WestpacGEL · Oct 19, 2023 · 3fea7c7 · 3fea7c7
2 parents fc8360d + 6bc776a
commit 3fea7c7
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 102 deletions.
diff --git a/packages/ui/src/components/accordion/accordion.component.tsx b/packages/ui/src/components/accordion/accordion.component.tsx
@@ -9,7 +9,7 @@ import { type AccordionProps } from './accordion.types.js';
 import { AccordionItem } from './components/index.js';
 
 function Accordion<T extends object>(
-  { className, color, rounded = true, look = 'default', ...props }: AccordionProps<T>,
+  { className, rounded = true, look = 'soft', ...props }: AccordionProps<T>,
   ref: any,
 ) {
   // react-aria doesn't allow for now to use component children when there is multiple levels
@@ -33,15 +33,10 @@ function Accordion<T extends object>(
   const { accordionProps } = useAccordion(finalProps, state, domRef);
 
   return (
-    <div
-      {...filterDOMProps(finalProps)}
-      {...accordionProps}
-      ref={domRef}
-      className={styles({ className, rounded, look })}
-    >
+    <div {...filterDOMProps(finalProps)} {...accordionProps} ref={domRef} className={styles({ className, rounded })}>
       <div className="mt-[-1px]">
         {[...state.collection].map(item => (
-          <AccordionItem<T> key={item.key} item={item} state={state} color={color} look={look} />
+          <AccordionItem<T> key={item.key} item={item} state={state} look={look} />
         ))}
       </div>
     </div>

diff --git a/packages/ui/src/components/accordion/accordion.spec.tsx b/packages/ui/src/components/accordion/accordion.spec.tsx
@@ -9,7 +9,7 @@ describe('Accordion', () => {
 
   it('renders the component', () => {
     const { container } = render(
-      <Accordion color="primary">
+      <Accordion look="soft">
         <Accordion.Item key="FoR" title="Founding of Rome">
           Arma virumque cano, Troiae qui primus ab oris.
         </Accordion.Item>
@@ -52,6 +52,6 @@ describe('Accordion', () => {
   });
   it('renders the style correctly', () => {
     const style = styles({ rounded: true });
-    expect(style).toBe('flex flex-col overflow-hidden rounded');
+    expect(style).toBe('text-text border-border flex flex-col border overflow-hidden rounded');
   });
 });
diff --git a/packages/ui/src/components/accordion/accordion.stories.tsx b/packages/ui/src/components/accordion/accordion.stories.tsx
@@ -35,7 +35,6 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     rounded: true,
-    color: undefined,
     children: [
       { key: 'files', title: 'My files' },
       { key: 'shared', title: 'Shared with us' },
@@ -54,35 +53,11 @@ export const Default: Story = {
 };
 
 /**
- * > Primary color usage example
+ * > Lego look using Hero color
  */
-export const PrimaryColor: Story = {
+export const LegoLook: Story = {
   args: {
-    color: 'primary',
-    rounded: false,
-  },
-  render: ({ ...props }) => (
-    <Accordion {...props}>
-      {[
-        { key: 'colors', title: 'Your colors' },
-        { key: 'shared', title: 'Shared color' },
-        { key: 'last', title: 'Last item' },
-      ].map(({ key, title }) => (
-        <Accordion.Item key={key} title={title}>
-          <p>{title}</p>
-          <Button>Test</Button>
-        </Accordion.Item>
-      ))}
-    </Accordion>
-  ),
-};
-
-/**
- * > Hero color usage example
- */
-export const HeroColor: Story = {
-  args: {
-    color: 'hero',
+    look: 'lego',
     rounded: false,
   },
   render: ({ ...props }) => (
@@ -104,9 +79,9 @@ export const HeroColor: Story = {
 /**
  * > Controlled example
  */
-export const ControlledColor: Story = {
+export const ControlledLook: Story = {
   args: {
-    color: 'hero',
+    look: 'lego',
     rounded: false,
   },
   render: ({ ...props }) => {

diff --git a/packages/ui/src/components/accordion/accordion.styles.ts b/packages/ui/src/components/accordion/accordion.styles.ts
@@ -2,15 +2,11 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex flex-col',
+    base: 'text-text border-border flex flex-col border',
     variants: {
       rounded: {
         true: 'overflow-hidden rounded',
       },
-      look: {
-        material: '',
-        default: 'border border-border',
-      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

diff --git a/packages/ui/src/components/accordion/accordion.types.ts b/packages/ui/src/components/accordion/accordion.types.ts
@@ -7,18 +7,14 @@ import { AccordionItemProps } from './components/index.js';
 
 type Variants = VariantProps<typeof styles>;
 export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
-  /**
-   * Accordion colors
-   */
-  color?: AccordionItemProps['color'];
   /**
    * Stretch the tab to fill the whole content
    */
   justify?: boolean;
   /**
    * The look of the accordion
    */
-  look?: Variants['look'];
+  look?: AccordionItemProps['look'];
   /**
    * Whether the accordion is rounded
    */

diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx
@@ -13,8 +13,7 @@ const loadAnimations = () => import('./accordion-item.utils.js').then(res => res
 export function AccordionItem<T = any>({
   className,
   tag: Tag = 'div',
-  color,
-  look = 'default',
+  look = 'soft',
   ...props
 }: AccordionItemProps<T>) {
   const ref = useRef<HTMLButtonElement>(null);
@@ -25,7 +24,7 @@ export function AccordionItem<T = any>({
   const isDisabled = state.disabledKeys.has(item.key);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
-  const styles = accordionItemStyles({ isOpen, isDisabled, className, color, look, isFocusVisible });
+  const styles = accordionItemStyles({ isOpen, isDisabled, className, look, isFocusVisible });
 
   return (
     <Tag className={styles.base()}>
@@ -36,13 +35,11 @@ export function AccordionItem<T = any>({
       <h3>
         <button {...mergeProps(buttonProps, hoverProps, focusProps)} ref={ref} className={styles.itemHeader()}>
           <span>{item.props.title}</span>
-          {look === 'material' && <div aria-hidden="true" className={styles.indicator()} />}
-          {look === 'default' &&
-            (direction === 'ltr' ? (
-              <ArrowRightIcon aria-hidden="true" className={styles.indicator()} />
-            ) : (
-              <ArrowLeftIcon aria-hidden="true" className={styles.indicator()} />
-            ))}
+          {direction === 'ltr' ? (
+            <ArrowRightIcon aria-hidden="true" className={styles.indicator()} />
+          ) : (
+            <ArrowLeftIcon aria-hidden="true" className={styles.indicator()} />
+          )}
         </button>
       </h3>
       <div {...regionProps}>

diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.styles.ts b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.styles.ts
@@ -5,32 +5,21 @@ export const styles = tv(
     slots: {
       base: '',
       itemHeader: 'typography-body-9 flex w-full items-center justify-between px-3 py-2',
-      indicator: '',
+      indicator: 'h-3 w-3 rotate-90 transition-transform',
       content: 'hidden',
     },
     variants: {
       look: {
-        material: {
-          itemHeader: 'bg-white transition-colors hover:bg-light',
-          indicator:
-            'relative h-2 w-2 before:absolute before:left-1/2 before:top-1/2 before:block before:h-[2px] before:w-full before:-translate-x-1/2 before:-translate-y-1/2 before:bg-muted after:absolute after:left-1/2 after:top-1/2 after:block after:h-full after:w-[2px] after:-translate-x-1/2 after:-translate-y-1/2 after:bg-muted after:transition-transform',
+        soft: {
+          itemHeader: 'border-border bg-light border-t',
         },
-        default: {
-          itemHeader: 'border-t border-border bg-light',
-          indicator: 'h-3 w-3 rotate-90 transition-transform',
-        },
-      },
-      color: {
-        hero: {
-          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
-        },
-        primary: {
-          itemHeader: 'border-l-[0.375rem] border-l-border transition-colors',
+        lego: {
+          itemHeader: 'border-border bg-light border-l-border border-l-[0.375rem] border-t transition-colors',
         },
       },
       isOpen: {
         true: {
-          content: 'block border-t border-border p-3',
+          content: 'border-border block border-t p-3',
         },
         false: {
           base: '',
@@ -52,37 +41,19 @@ export const styles = tv(
     compoundSlots: [
       {
         slots: ['indicator'],
-        look: 'default',
         isOpen: true,
         className: '-rotate-90',
       },
-      {
-        slots: ['indicator'],
-        look: 'material',
-        isOpen: true,
-        className: 'after:rotate-90',
-      },
       {
         slots: ['itemHeader'],
-        color: 'primary',
-        isOpen: true,
-        className: 'border-l-primary',
-      },
-      {
-        slots: ['itemHeader'],
-        color: 'hero',
+        look: 'lego',
         isOpen: true,
         className: 'border-l-hero',
       },
       {
         slots: ['content'],
-        color: 'hero',
-        className: 'border-l-[0.375rem] border-l-border',
-      },
-      {
-        slots: ['content'],
-        color: 'primary',
-        className: 'border-l-[0.375rem] border-l-border',
+        look: 'lego',
+        className: 'border-l-border border-l-[0.375rem]',
       },
     ],
   },

diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.types.ts b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.types.ts
@@ -7,10 +7,6 @@ import { styles } from './accordion-item.styles.js';
 type Variants = VariantProps<typeof styles>;
 
 export type AccordionItemProps<T = any> = {
-  /**
-   * Color of the item
-   */
-  color?: Variants['color'];
   /**
    * Node from react-stately
    */