@faststore/core 0.3.15 → 0.3.17

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -73,7 +73,7 @@ function ShippingSimulation({
         displayClearButton={displayClearButton}
       />
 
-      <Link href="/" data-fs-shipping-simulation-link>
+      <Link href="/" data-fs-shipping-simulation-link size="small">
         {"I don't know my Postal Code"}
         <Icon name="ArrowSquareOut" width={18} height={18} />
       </Link>
@@ -87,20 +87,13 @@ function ShippingSimulation({
             </p>
           </header>
 
-          <Table data-fs-shipping-simulation-table>
+          <Table>
             <TableBody>
               {shippingOptions.map((option) => (
-                <TableRow
-                  key={option.carrier}
-                  data-fs-shipping-simulation-table-row
-                >
-                  <TableCell data-fs-shipping-simulation-table-cell>
-                    {option.carrier}
-                  </TableCell>
-                  <TableCell data-fs-shipping-simulation-table-cell>
-                    {option.localizedEstimates}
-                  </TableCell>
-                  <TableCell data-fs-shipping-simulation-table-cell>
+                <TableRow key={option.carrier}>
+                  <TableCell align="left">{option.carrier}</TableCell>
+                  <TableCell>{option.localizedEstimates}</TableCell>
+                  <TableCell align="right">
                     {option.price && (
                       <Price
                         formatter={formatter}

package/src/components/ui/ShippingSimulation/shipping-simulation.module.scss

@@ -23,20 +23,10 @@
   // Location
   --fs-shipping-simulation-location-padding-bottom  : var(--fs-spacing-2);
 
-  // Table
-  --fs-shipping-simulation-table-row-bkg-color      : var(--fs-color-main-0);
-  --fs-shipping-simulation-table-row-even-bkg-color : transparent;
-
-  --fs-shipping-simulation-table-cell-padding       : var(--fs-spacing-2);
-  --fs-shipping-simulation-table-cell-text-size     : var(--fs-text-size-2);
-  --fs-shipping-simulation-table-cell-border-radius : var(--fs-border-radius);
-
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
 
-  font-size: var(--fs-shipping-simulation-text-size);
-
   [data-fs-shipping-simulation-title] {
     padding-bottom: var(--fs-shipping-simulation-title-padding-bottom);
   }
@@ -64,33 +54,4 @@
   [data-fs-shipping-simulation-location] {
     padding-bottom: var(--fs-shipping-simulation-location-padding-bottom);
   }
-
-  [data-fs-shipping-simulation-table] {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  [data-fs-shipping-simulation-table-row] {
-    background-color: var(--fs-shipping-simulation-table-row-bkg-color);
-
-    &:nth-child(even) {
-      background-color: var(--fs-shipping-simulation-table-row-even-bkg-color);
-    }
-  }
-
-  [data-fs-shipping-simulation-table-cell] {
-    padding: var(--fs-shipping-simulation-table-cell-padding);
-    font-size: var(--fs-shipping-simulation-table-cell-text-size);
-
-    &:first-child {
-      border-top-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-      border-bottom-left-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-    }
-
-    &:last-child {
-      text-align: right;
-      border-top-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-      border-bottom-right-radius: var(--fs-shipping-simulation-table-cell-border-radius);
-    }
-  }
 }

package/src/components/ui/SkuSelector/sku-selector.module.scss

@@ -80,7 +80,7 @@
     margin-bottom: var(--fs-sku-selector-title-margin-bottom);
   }
 
-  [data-fs-radio-option] {
+  [data-fs-radio-group-option] {
     position: relative;
     width: var(--fs-sku-selector-option-width);
     height: var(--fs-sku-selector-option-height);

package/tsconfig.json

@@ -24,5 +24,5 @@
     "esModuleInterop": true
   },
   "include": ["*.d.ts", "src/**/*.ts", "src/**/*.tsx", "@generated/**/*.ts"],
-  "exclude": ["node_modules", "public"]
+  "exclude": ["node_modules", "public", "src/components/search/searchMock.ts"]
 }

package/src/components/sections/ProducDetailsContent/product-details-content.module.scss

@@ -1,41 +0,0 @@
-.fs-product-details-content {
-  // -----------------------------
-  // Table
-  // -----------------------------
-
-  [data-fs-product-details-about] [data-fs-table] {
-    width: 100%;
-
-    [data-fs-accordion-item-button-icon] {
-      height: 18px;
-    }
-
-    [data-fs-icon] {
-      margin-right: var(--fs-spacing-2);
-    }
-
-    tr:nth-child(even) td {
-      background-color: var(--fs-color-neutral-1);
-      border-top-right-radius: var(--fs-border-radius);
-      border-bottom-right-radius: var(--fs-border-radius);
-    }
-
-    tr:nth-child(even) th {
-      background-color: var(--fs-color-neutral-1);
-      border-top-left-radius: var(--fs-border-radius);
-      border-bottom-left-radius: var(--fs-border-radius);
-    }
-
-    td {
-      padding: var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2) 0;
-      text-align: right;
-    }
-
-    th {
-      display: flex;
-      padding: var(--fs-spacing-2) 0 var(--fs-spacing-2) var(--fs-spacing-3);
-      font-weight: normal;
-      text-align: left;
-    }
-  }
-}

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'