@faststore/core 0.3.16 → 0.3.17

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

@@ -1,222 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { List as UIList, LinkButton as UILinkButton } from '@faststore/ui'
-import { useState } from 'react'
-
-import Accordion, { AccordionItem } from '.'
-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>
-        <UILinkButton
-          size="small"
-          variant="tertiary"
-          href="../?path=/docs/molecules-accordion-accordionitem--default-story"
-          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-          iconPosition="right"
-        >
-          See more
-        </UILinkButton>
-      </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>
-        <UILinkButton
-          size="small"
-          variant="tertiary"
-          href="../?path=/docs/organisms-productdetailscontent--default-story"
-          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-          iconPosition="right"
-        >
-          See more
-        </UILinkButton>
-      </article>
-      <article className="sbdocs-list-text">
-        <h3>Footer</h3>
-        <p>
-          Used by the <code>Footer</code> component on mobile devices.
-        </p>
-        <UILinkButton
-          size="small"
-          variant="tertiary"
-          href="../?path=/docs/organisms-footer--default-story"
-          icon={<Icon name="ArrowRight" width="18" height="18" weight="bold" />}
-          iconPosition="right"
-        >
-          See more
-        </UILinkButton>
-      </article>
-    </li>
-  </ul>
-</section>

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

@@ -1,39 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,65 +0,0 @@
-@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

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

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

@@ -1,164 +0,0 @@
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-import Alert from '.'
-import Icon from '../Icon'
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  BestPractices,
-  BestPracticesRule,
-} from 'src/../.storybook/components'
-
-<Meta
-  title="Molecules/Alert"
-  argTypes={{
-    icon: { control: { disable: true } },
-  }}
-  component={Alert}
-/>
-
-export const Template = (args) => (
-  <Alert {...args}>Free shipping starts at $300</Alert>
-)
-
-<header>
-
-# Alert
-
-Alerts display short messages related to the behavior of a system, feature or page.
-
-</header>
-
-## Overview
-
-The `Alert` component uses [FastStore UI Alert](https://www.faststore.dev/reference/ui/molecules/Alert) as base.
-
-<Canvas isColumn>
-  <Story
-    name="overview-default"
-    args={{
-      icon: <Icon name="Truck" width={24} height={24} />,
-      link: { text: 'Buy now', to: '/' },
-      dismissible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-  <Story name="overview-clean">{Template.bind({})}</Story>
-</Canvas>
-
----
-
-## Usage
-
-`import Alert from '../components/ui/Alert'`
-
-<Canvas>
-  <Story
-    name="default"
-    args={{
-      icon: <Icon name="Truck" width={24} height={24} />,
-      link: { text: 'Buy now', to: '/' },
-      dismissible: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="default" />
-
-<TokenTable>
-  <TokenRow token="--fs-alert-height" value="var(--fs-spacing-7)" />
-  <TokenRow token="--fs-alert-padding-left" value="var(--fs-spacing-3)" />
-  <TokenRow
-    token="--fs-alert-padding-right"
-    value="var(--fs-alert-padding-left)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-alert-bkg-color"
-    value="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-alert-text-color"
-    value="var(--fs-color-highlighted-text)"
-    isColor
-  />
-  <TokenRow token="--fs-alert-text-size" value="var(--fs-text-size-1)" />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Link
-
-<TokenTable>
-  <TokenRow
-    token="--fs-alert-link-color"
-    value="var(--fs-alert-text-color)"
-    globalValue="var(--fs-color-highlighted-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-alert-link-color-visited"
-    value="var(--fs-alert-text-color)"
-    globalValue="var(--fs-color-highlighted-text)"
-    isColor
-  />
-</TokenTable>
-
-### Button
-
-<TokenTable>
-  <TokenRow
-    token="--fs-alert-button-text-color"
-    value="var(--fs-alert-text-color)"
-    globalValue="var(--fs-color-highlighted-text)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-alert-button-bkg-color"
-    value="var(--fs-alert-bkg-color)"
-    globalValue="var(--fs-color-highlighted-bkg)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-alert-button-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>
-
----
-
-<BestPractices>
-  <BestPracticesRule
-    recommendedUsage={
-      <Alert
-        icon={<Icon name="ShieldCheck" width={24} height={24} />}
-        link={{ text: 'Buy Now', to: '/' }}
-        dismissible
-      >
-        Free shipping starts at $300
-      </Alert>
-    }
-    recommendedDescription="Write short messages to inform about the behavior of a system, feature, or page. Consider using 30 to 40 characters max."
-    discouragedUsage={
-      <Alert
-        icon={<Icon name="ShieldCheck" width={24} height={24} />}
-        link={{ text: 'Really long link to add here', to: '/' }}
-        dismissible
-      >
-        Alert with a veeeery long description lorem ipsum dolor sit amet,
-        consectetur adipiscing elit. Donec sollicitudin erat non felis feugiat
-        porta. Nam vitae turpis metus. Maecenas feugiat justo tristique libero
-        ultricies.
-      </Alert>
-    }
-    discouragedDescription="Don't use long texts. Important information can be lost."
-  />
-</BestPractices>