@faststore/core 22.42.6

package/src/components/skeletons/Skeletons.stories.mdx

@@ -0,0 +1,178 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+import { SectionList, SectionItem } from 'src/../.storybook/components'
+
+import Skeleton from './Skeleton'
+import FilterSkeleton from './FilterSkeleton'
+import ProductCardSkeleton from './ProductCardSkeleton'
+
+import Icon from 'src/components/ui/Icon'
+import ButtonLink from 'src/components/ui/Icon'
+
+export const TemplateSkeleton = ({ ...args }) => <Skeleton {...args} />
+
+<Meta
+  component={Skeleton}
+  title="Features/Skeletons/Overview"
+  argTypes={{
+    loading: {
+      control: 'boolean',
+      table: { type: 'boolean', summary: true },
+    },
+    shimmer: {
+      control: 'boolean',
+      table: { type: 'boolean', summary: false },
+    },
+  }}
+/>
+
+<header>
+
+# Skeletons
+
+This feature improves the store's experience and perceived performance through loading placeholders.
+
+</header>
+
+## Overview
+
+`Skeletons` are like an element's or section's wireframe. It's a placeholder
+that simulates the layout of these elements/sections while data is being loaded.
+
+Instead of showing a blank page, displaying `Skeletons` while loading content makes the user feel like the store is more responsive and faster.
+
+Also by using `Skeletons` the store will be less likely to experience [Cumulative Layout Shilf (or CLS)](https://web.dev/i18n/en/cls/).
+
+---
+
+## Usage
+
+The `Skeleton` component is used as placeholder for the primitive elements (e.g. texts, buttons), being part of the related components.
+
+`import Skeleton from 'src/components/skeletons/Skeleton'`
+
+<Canvas className="canvas-skeletons">
+  <Story name="Usage" args={{ loading: true, shimmer: false, variant: 'text' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Usage" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-skeleton-bkg-color"
+    value="var(--fs-color-disabled-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-skeleton-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Text
+
+<Canvas className="canvas-skeletons">
+  <Story name="Text" args={{ loading: true, shimmer: true, variant: 'text' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-text-width" value="100%" />
+  <TokenRow token="--fs-skeleton-text-height" value="var(--fs-spacing-4)" />
+</TokenTable>
+
+### Button
+
+<Canvas className="canvas-skeletons">
+  <Story
+    name="Button"
+    args={{ loading: true, shimmer: true, variant: 'button' }}
+  >
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-button-width" value="var(--fs-spacing-13)" />
+  <TokenRow token="--fs-skeleton-button-height" value="var(--fs-spacing-5)" />
+  <TokenRow token="--fs-skeleton-button-gap" value="var(--fs-spacing-2)" />
+  <TokenRow
+    token="--fs-skeleton-button-border-radius"
+    value="var(--fs-skeleton-border-radius)"
+  />
+</TokenTable>
+
+### Image
+
+<Canvas className="canvas-skeletons">
+  <Story name="Image" args={{ loading: true, shimmer: true, variant: 'image' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-image-height-mobile" value="45vw" />
+  <TokenRow token="--fs-skeleton-image-height-desktop" value="12.188rem" />
+  <TokenRow
+    token="--fs-skeleton-image-border-radius"
+    value="var(--fs-skeleton-border-radius)"
+  />
+</TokenTable>
+
+### Badge
+
+<Canvas className="canvas-skeletons">
+  <Story name="Badge" args={{ loading: true, shimmer: true, variant: 'badge' }}>
+    {TemplateSkeleton.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-skeleton-badge-height-mobile" value="45%" />
+  <TokenRow
+    token="--fs-skeleton-badge-height-desktop"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-skeleton-badge-border-radius"
+    value="var(--fs-skeleton-border-radius)"
+  />
+</TokenTable>
+
+---
+
+## Components
+
+<SectionList grid="grid" classes="sbdocs-skeletons">
+  <SectionItem
+    title="Filter Skeleton"
+    actionPath="../?path=/docs/features-skeletons-filterskeleton--usage"
+    description={
+      <>
+        Loading placeholder for the <code>Filter</code> used in PLP.
+      </>
+    }
+  >
+    <FilterSkeleton loading />
+  </SectionItem>
+  <SectionItem
+    title="Product Card Skeleton"
+    actionPath="../?path=/docs/features-skeletons-productcardskeleton--usage"
+    description={
+      <>
+        Loading placeholder for the <code>ProductCard</code> used in several
+        sections of the store.
+      </>
+    }
+  >
+    <ProductCardSkeleton variant="wide" displayButton />
+  </SectionItem>
+</SectionList>

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

@@ -0,0 +1,219 @@
+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 className="sbdocs-ul-row">
+    <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>
+
+---
+
+## Use Cases
+
+<section className="sbdocs-list">
+  <ul className="sbdocs-ul-row">
+    <li>
+      <article className="sbdocs-list-text">
+        <h3>ProductDetailsContent</h3>
+        <p>
+          Used by the <code>ProductDetailsContent</code> component to organize product information in different sections.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/organisms-productdetailscontent--default-story"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+      <article className="sbdocs-list-text">
+        <h3>Footer</h3>
+        <p>
+          Used by the <code>Footer</code> component on mobile devices.
+        </p>
+        <ButtonLink
+          variant="tertiary"
+          href="../?path=/docs/organisms-footer--default-story"
+          data-fs-button-size="small"
+        >
+          See more
+          <Icon name="ArrowRight" width="18" height="18" weight="bold" />
+        </ButtonLink>
+      </article>
+    </li> 
+  </ul>
+</section>

package/src/components/ui/Accordion/Accordion.tsx

@@ -0,0 +1,39 @@
+import type { AccordionProps } from '@faststore/ui'
+import { Accordion as UIAccordion } from '@faststore/ui'
+import { forwardRef } from 'react'
+
+import styles from './accordion.module.scss'
+
+interface Props extends Omit<AccordionProps, 'indices'> {
+  /**
+   * Indices that indicate which accordion items are opened.
+   */
+  expandedIndices: Iterable<number>
+}
+
+const Accordion = forwardRef<HTMLDivElement, Props>(function Accordion(
+  {
+    expandedIndices,
+    onChange,
+    children,
+    testId = 'store-accordion',
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <UIAccordion
+      className={styles.fsAccordion}
+      data-fs-accordion
+      ref={ref}
+      onChange={onChange}
+      data-testid={testId}
+      indices={expandedIndices}
+      {...otherProps}
+    >
+      {children}
+    </UIAccordion>
+  )
+})
+
+export default Accordion

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

@@ -0,0 +1,116 @@
+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" />
+</TokenTable>
+
+### Panel
+
+<TokenTable>
+  <TokenRow
+    token="--fs-accordion-item-panel-padding-bottom"
+    value="var(--fs-spacing-4)"
+  />
+</TokenTable>

package/src/components/ui/Accordion/AccordionItem.tsx

@@ -0,0 +1,82 @@
+import type { AccordionItemProps } from '@faststore/ui'
+import {
+  AccordionButton as UIAccordionButton,
+  AccordionItem as UIAccordionItem,
+  AccordionPanel as UIAccordionPanel,
+  Icon as UIIcon,
+} from '@faststore/ui'
+import { forwardRef } from 'react'
+import type { ReactNode } from 'react'
+
+import Icon from 'src/components/ui/Icon'
+
+type Props = Omit<AccordionItemProps<'article' | 'div'>, 'ref'> & {
+  /**
+   * Attribute to check whether the item is expanded or not.
+   */
+  isExpanded: boolean
+  /**
+   * Label for Accordion button
+   */
+  buttonLabel?: ReactNode
+}
+
+const AccordionItem = forwardRef<HTMLDivElement, Props>(function AccordionItem(
+  {
+    children,
+    isExpanded,
+    index = 0,
+    buttonLabel = '',
+    testId = 'store-accordion-item',
+    as,
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <UIAccordionItem
+      ref={ref}
+      index={index}
+      data-testid={`${testId}-item`}
+      data-fs-accordion-item
+      as={as}
+      {...otherProps}
+    >
+      <UIAccordionButton
+        className="text__title-subsection"
+        data-fs-accordion-item-button
+        data-testid={`${testId}-button`}
+      >
+        {buttonLabel}
+        <UIIcon
+          data-testid={`${testId}-button-icon`}
+          data-fs-accordion-item-button-icon
+          component={
+            <>
+              <Icon
+                data-icon={isExpanded ? 'expanded' : true}
+                name="MinusCircle"
+                width={24}
+                height={24}
+              />
+              <Icon
+                data-icon={isExpanded ? true : 'collapsed'}
+                name="PlusCircle"
+                width={24}
+                height={24}
+              />
+            </>
+          }
+        />
+      </UIAccordionButton>
+      <UIAccordionPanel
+        data-testid={`${testId}-panel`}
+        data-fs-accordion-item-panel
+      >
+        {children}
+      </UIAccordionPanel>
+    </UIAccordionItem>
+  )
+})
+
+export default AccordionItem

package/src/components/ui/Accordion/accordion.module.scss

@@ -0,0 +1,65 @@
+@import "src/styles/scaffold";
+
+.fs-accordion {
+  // --------------------------------------------------------
+  // Design Tokens for Accordion
+  // --------------------------------------------------------
+
+  // Item
+  --fs-accordion-item-border-bottom-width           : var(--fs-border-width);
+  --fs-accordion-item-border-bottom-color           : var(--fs-border-color-light);
+
+  // Item Button
+  --fs-accordion-item-button-padding                : var(--fs-spacing-3) 0;
+  --fs-accordion-item-button-color                  : var(--fs-color-text);
+  --fs-accordion-item-button-bkg-color              : transparent;
+
+  // Item Panel
+  --fs-accordion-item-panel-padding-bottom          : var(--fs-spacing-4);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+
+  [data-fs-accordion-item] {
+    border-bottom: var(--fs-accordion-item-border-bottom-width) solid var(--fs-accordion-item-border-bottom-color);
+
+    @include media(">=notebook") {
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+
+  [data-fs-accordion-item-button] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--fs-accordion-item-button-padding);
+    color: var(--fs-accordion-item-button-color);
+    cursor: pointer;
+    background-color: var(--fs-accordion-item-button-bkg-color);
+    border: 0;
+  }
+
+  [data-fs-accordion-item-button-icon] {
+    display: flex;
+
+    [data-icon] {
+      display: none;
+    }
+
+    [data-icon="expanded"], [data-icon="collapsed"] {
+      display: initial;
+    }
+  }
+
+  [data-fs-accordion-item-panel] {
+    padding-bottom: var(--fs-accordion-item-panel-padding-bottom);
+  }
+}

package/src/components/ui/Accordion/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Accordion'
+export { default as AccordionItem } from './AccordionItem'