Feat: Adds tokens to Accordion (#126)

* Feat: Adds tokens to Accordion (#130)

* Updates changelog

* Removes unnecessary file

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `Accordion` ([#126](https://github.com/vtex-sites/gatsby.store/pull/126))
 - Applies new local tokens to `ImageGallery` ([#125](https://github.com/vtex-sites/gatsby.store/pull/125))
 - Creates Doc page for `Regionalization` Feature ([#124](https://github.com/vtex-sites/gatsby.store/pull/124))
 - Applies new local tokens to `RegionalizationBar` ([#124](https://github.com/vtex-sites/gatsby.store/pull/124))

src/components/common/Footer/footer.scss

@@ -175,18 +175,6 @@
   @include media(">=notebook") {
     grid-column: span 8;
   }
-
-  [data-store-icon] [data-icon] {
-    display: none;
-  }
-
-  [data-store-icon] [data-icon="expanded"] {
-    display: initial;
-  }
-
-  [data-store-icon] [data-icon="collapsed"] {
-    display: initial;
-  }
 }
 
 .footer__links-columns {

src/components/search/Filter/filter.scss

@@ -12,7 +12,7 @@
     }
   }
 
-  [data-store-accordion] {
+  [data-fs-accordion] {
     [data-store-list] {
       padding-bottom: var(--fs-spacing-3);
 
@@ -27,7 +27,7 @@
     }
   }
 
-  [data-accordion-item] [data-store-button] {
+  [data-fs-accordion-item-button] {
     font-size: var(--fs-text-size-3);
     font-weight: var(--fs-text-weight-regular);
     line-height: 1.5;
@@ -36,18 +36,6 @@
       font-size: var(--fs-text-size-2);
       line-height: 1.25;
     }
-
-    [data-store-icon] [data-icon] {
-      display: none;
-    }
-
-    [data-store-icon] [data-icon="expanded"] {
-      display: initial;
-    }
-
-    [data-store-icon] [data-icon="collapsed"] {
-      display: initial;
-    }
   }
 }
 

src/components/ui/Accordion/Accordion.stories.mdx

@@ -0,0 +1,180 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import { List as UIList } from '@faststore/ui'
+import { useState } from 'react'
+
+import Accordion, { AccordionItem } from '.'
+import ButtonLink from '../Button/ButtonLink'
+import Icon from '../Icon'
+
+<Meta
+  component={Accordion}
+  title="Molecules/Accordion/Overview"
+  argTypes={{
+    expandedIndices: { control: { disable: true } },
+  }}
+/>
+
+export const values = Array.from({ length: 3 }).map((_, i) => `Item ${i + 1}`)
+
+export const items = [
+  {
+    title: 'Title 1',
+    values: [...values],
+  },
+  {
+    title: 'Title 2',
+    values: [...values],
+  },
+  {
+    title: 'Title 3',
+    values: [...values],
+  },
+  {
+    title: 'Title 4',
+    values: [...values],
+  },
+]
+
+export const Template = () => {
+  const [indices, setIndices] = useState([])
+  const onChange = (index) => {
+    setIndices([index])
+  }
+  return (
+    <Accordion expandedIndices={indices} onChange={onChange}>
+      {items.map((item, index) => (
+        <AccordionItem
+          key={item.title}
+          isExpanded={indices.includes(index)}
+          buttonLabel={item.title}
+        >
+          <UIList>
+            {item.values.map((label) => {
+              return <li key={label}>{label}</li>
+            })}
+          </UIList>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
+
+export const TemplateMultiple = () => {
+  const [indexes, setIndexes] = useState(new Set([]))
+  const onChange = (index) => {
+    if (indexes.has(index)) {
+      indexes.delete(index)
+      setIndexes(new Set(indexes))
+    } else {
+      setIndexes(new Set(indexes.add(index)))
+    }
+  }
+  return (
+    <Accordion expandedIndices={indexes} onChange={onChange}>
+      {items.map((item, index) => (
+        <AccordionItem
+          key={item.title}
+          isExpanded={indexes.has(index)}
+          buttonLabel={item.title}
+        >
+          <UIList>
+            {item.values.map((name) => (
+              <li key={name}>{name}</li>
+            ))}
+          </UIList>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  )
+}
+
+export const TemplateOneItem = () => {
+  const [indexes, setIndexes] = useState(new Set([0]))
+  const onChange = (index) => {
+    if (indexes.has(index)) {
+      indexes.delete(index)
+      setIndexes(new Set(indexes))
+    } else {
+      setIndexes(new Set(indexes.add(index)))
+    }
+  }
+  return (
+    <Accordion expandedIndices={indexes} onChange={onChange}>
+      <AccordionItem isExpanded={indexes.has(0)} buttonLabel="Title 1">
+        <UIList>
+          {values.map((label) => {
+            return <li key={label}>{label}</li>
+          })}
+        </UIList>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+<header>
+
+# Accordion
+
+Accordion displays an expandable/collapsible list of items.
+
+</header>
+
+## Overview
+
+The `Accordion` component uses [FastStore UI Accordion](https://www.faststore.dev/reference/ui/molecules/Accordion) as base.
+
+---
+
+## Usage
+
+`import Accordion, { AccordionItem } from 'src/components/ui/Accordion'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+---
+
+## Variants
+
+### Accordion Single Open
+
+<Canvas>
+  <Story name="overview-default">{Template.bind({})}</Story>
+</Canvas>
+
+### Accordion Multiple Open
+
+<Canvas>
+  <Story name="overview-multiple-expanded">{TemplateMultiple.bind({})}</Story>
+</Canvas>
+
+## Compound Components
+
+<section className="sbdocs-list">
+  <ul>
+    <li>
+      <div>
+        <div style={{ width: '50%', height: '180px', paddingTop: '20px' }}>
+          <TemplateOneItem />
+        </div>
+      </div>
+      <article className="sbdocs-list-text">
+        <h3>Accordion Item</h3>
+        <p>
+          An item of the <code>Accordion</code> component.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/molecules-accordion-accordionitem--default-story"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+    </li>
+  </ul>
+</section>

src/components/ui/Accordion/Accordion.tsx

@@ -1,6 +1,8 @@
+import type { AccordionProps } from '@faststore/ui'
 import { Accordion as UIAccordion } from '@faststore/ui'
 import { forwardRef } from 'react'
-import type { AccordionProps } from '@faststore/ui'
+
+import styles from './accordion.module.scss'
 
 interface Props extends Omit<AccordionProps, 'indices'> {
   /**
@@ -21,8 +23,8 @@ const Accordion = forwardRef<HTMLDivElement, Props>(function Accordion(
 ) {
   return (
     <UIAccordion
-      className="accordion"
-      data-store-accordion
+      className={styles.fsAccordion}
+      data-fs-accordion
       ref={ref}
       onChange={onChange}
       data-testid={testId}

src/components/ui/Accordion/AccordionItem.stories.mdx

@@ -0,0 +1,133 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import { List as UIList } from '@faststore/ui'
+import { useState } from 'react'
+
+import Accordion, { AccordionItem } from '.'
+
+import {
+  AccordionButton as UIAccordionButton,
+  AccordionItem as UIAccordionItem,
+  AccordionPanel as UIAccordionPanel,
+  Icon as UIIcon,
+} from '@faststore/ui'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta
+  title="Molecules/Accordion/AccordionItem"
+  component={AccordionItem}
+  argTypes={{
+    isExpanded: { control: 'boolean' },
+    buttonLabel: { defaultValue: 'Title 1' },
+  }}
+/>
+
+export const values = Array.from({ length: 5 }).map((_, i) => `Item ${i + 1}`)
+
+export const Template = (args) => {
+  const [indexes, setIndexes] = useState(new Set([]))
+  const onChange = (index) => {
+    if (indexes.has(index)) {
+      indexes.delete(index)
+      setIndexes(new Set(indexes))
+    } else {
+      setIndexes(new Set(indexes.add(index)))
+    }
+  }
+  return (
+    <Accordion expandedIndices={indexes} onChange={onChange}>
+      <AccordionItem {...args}>
+        <UIList>
+          {values.map((label) => {
+            return <li key={label}>{label}</li>
+          })}
+        </UIList>
+      </AccordionItem>
+    </Accordion>
+  )
+}
+
+<header>
+
+# Accordion Item
+
+An item of a set of items on `Accordion`.
+
+</header>
+
+## Overview
+
+The `AccordionItem` is part of [Accordion](?path=/docs/molecules-accordion-overview--default-story) component.
+
+---
+
+## Usage
+
+`import Accordion, { AccordionItem } from 'src/components/ui/Accordion'`
+
+<Canvas>
+  <Story name="default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-accordion-item-border-bottom-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-accordion-item-border-bottom-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-accordion-item-button-padding"
+    value="var(--fs-spacing-3) 0"
+  />
+  <TokenRow
+    token="--fs-accordion-item-button-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+  <TokenRow token="--fs-accordion-item-button-bkg-color" value="transparent" />
+  <TokenRow
+    token="--fs-accordion-item-button-padding-right-notebook"
+    value="var(--fs-spacing-4)"
+  />
+  <TokenRow
+    token="--fs-accordion-item-button-padding-left-notebook"
+    value="var(--fs-accordion-item-button-padding-right-notebook)"
+  />
+</TokenTable>
+
+### Panel
+
+<TokenTable>
+  <TokenRow
+    token="--fs-accordion-item-panel-padding-bottom"
+    value="var(--fs-spacing-4)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-accordion-item-panel-padding-right-notebook"
+    value="var(--fs-accordion-item-panel-padding-bottom)"
+  />
+  <TokenRow
+    token="--fs-accordion-item-panel-padding-left-notebook"
+    value="var(--fs-accordion-item-panel-padding-bottom)"
+  />
+</TokenTable>