Merge pull request #2248 from adevinta/accordion-borderless

feat(accordion): outlined and filled designs
adevinta · Jun 18, 2024 · de6f599 · de6f599
2 parents 32621a6 + 0968a8d
commit de6f599
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 9 deletions.
diff --git a/packages/components/accordion/src/Accordion.doc.mdx b/packages/components/accordion/src/Accordion.doc.mdx
@@ -71,6 +71,12 @@ Use `value` to control which panels are opened.
 
 <Canvas of={stories.Controlled} />
 
+### Design
+
+Use `design` to pick the overall look of the component (`filled` or `outlined`).
+
+<Canvas of={stories.Design} />
+
 ### Disabled
 
 Use `disabled` to disabled the full `Accordion`.

diff --git a/packages/components/accordion/src/Accordion.stories.tsx b/packages/components/accordion/src/Accordion.stories.tsx
@@ -1,4 +1,5 @@
 import { Checkbox, CheckboxGroup } from '@spark-ui/checkbox'
+import { Tag } from '@spark-ui/tag'
 import { Meta, StoryFn } from '@storybook/react'
 import { useState } from 'react'
 
@@ -13,7 +14,7 @@ export default meta
 
 export const Default: StoryFn = () => {
   return (
-    <Accordion>
+    <Accordion defaultValue={['watercraft']}>
       <Accordion.Item value="watercraft">
         <Accordion.ItemHeader asChild>
           <h4>
@@ -95,9 +96,56 @@ export const Disabled: StoryFn = () => {
   )
 }
 
+export const Design: StoryFn = _args => {
+  const designs = ['outlined', 'filled'] as const
+
+  return (
+    <div className="grid grid-cols-2 gap-xl bg-main-container p-xl">
+      {designs.map(design => {
+        return (
+          <div>
+            <Tag className="mb-sm">{design}</Tag>
+            <Accordion design={design} defaultValue={['watercraft']}>
+              <Accordion.Item value="watercraft">
+                <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
+                <Accordion.ItemContent>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua.
+                  </p>
+                </Accordion.ItemContent>
+              </Accordion.Item>
+
+              <Accordion.Item value="automobiles">
+                <Accordion.ItemTrigger>Automobiles</Accordion.ItemTrigger>
+                <Accordion.ItemContent>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua.
+                  </p>
+                </Accordion.ItemContent>
+              </Accordion.Item>
+
+              <Accordion.Item value="aircrafts">
+                <Accordion.ItemTrigger>Aircrafts</Accordion.ItemTrigger>
+                <Accordion.ItemContent>
+                  <p>
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
+                    incididunt ut labore et dolore magna aliqua.
+                  </p>
+                </Accordion.ItemContent>
+              </Accordion.Item>
+            </Accordion>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 export const DisabledItem: StoryFn = () => {
   return (
-    <Accordion>
+    <Accordion defaultValue={['watercraft']}>
       <Accordion.Item value="watercraft">
         <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
         <Accordion.ItemContent>
@@ -133,7 +181,7 @@ export const DisabledItem: StoryFn = () => {
 
 export const Multiple: StoryFn = () => {
   return (
-    <Accordion multiple defaultValue={['automobiles', 'aircrafts']}>
+    <Accordion multiple defaultValue={['watercraft']}>
       <Accordion.Item value="watercraft">
         <Accordion.ItemTrigger>Watercraft</Accordion.ItemTrigger>
         <Accordion.ItemContent>
@@ -168,7 +216,7 @@ export const Multiple: StoryFn = () => {
 }
 
 export const Controlled: StoryFn = () => {
-  const [value, setValue] = useState(['automobiles', 'aircrafts'])
+  const [value, setValue] = useState(['watercraft'])
 
   return (
     <div>

diff --git a/packages/components/accordion/src/Accordion.tsx b/packages/components/accordion/src/Accordion.tsx
@@ -36,9 +36,15 @@ export interface AccordionProps extends ExtentedZagInterface {
    * The callback fired when the state of expanded/collapsed accordion items changes.
    */
   onValueChange?: (value: string[]) => void
+  design?: 'filled' | 'outlined'
 }
 
-const AccordionContext = createContext<accordion.Api<PropTypes> | null>(null)
+const AccordionContext = createContext<
+  | (accordion.Api<PropTypes> & {
+      design: 'filled' | 'outlined'
+    })
+  | null
+>(null)
 
 export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
   (
@@ -48,6 +54,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       collapsible = true,
       className,
       defaultValue,
+      design = 'outlined',
       disabled = false,
       multiple = false,
       value,
@@ -63,7 +70,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
       value,
       disabled,
       // onValueChange,
-      className: cx('bg-surface rounded-lg', className),
+      className: cx('bg-surface rounded-lg h-fit', className),
       ...props,
     })
 
@@ -86,7 +93,7 @@ export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
     const mergedProps = mergeProps(api.getRootProps(), localProps)
 
     return (
-      <AccordionContext.Provider value={api}>
+      <AccordionContext.Provider value={{ ...api, design }}>
         <Component data-spark-component="accordion" ref={ref} {...mergedProps}>
           {children}
         </Component>

diff --git a/packages/components/accordion/src/AccordionItem.tsx b/packages/components/accordion/src/AccordionItem.tsx
@@ -18,9 +18,9 @@ export const Item = forwardRef<HTMLDivElement, AccordionItemProps>(
 
     const localProps = {
       className: cx(
-        'relative border-sm border-outline',
-        'first:rounded-t-lg last:rounded-b-lg',
+        'relative first:rounded-t-lg last:rounded-b-lg',
         '[&:not(:last-child)]:border-b-none',
+        { 'border-sm border-outline': accordion.design === 'outlined' },
         className
       ),
       asChild,