@faststore/core 0.3.15 → 0.3.17

package/src/components/search/Search.stories.mdx

@@ -7,7 +7,6 @@ import {
   TokenDivider,
 } from 'src/../.storybook/components'
 import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
-import { rest } from 'msw'
 import SearchDropdown from './SearchDropdown'
 import SearchInput from './SearchInput'
 import SearchProductCard from './SearchProductCard'
@@ -98,35 +97,39 @@ import SearchInput from 'src/components/search/SearchInput'
       actionPath="../?path=/docs/features-search-searchsuggestions--default-story"
       description={
         <>
-          Displays a set of navigation links that self-adapts on mobile{' '}
-          or desktop screens.
+          Displays a set of navigation links that self-adapts on mobile or
+          desktop screens.
         </>
       }
-      containerStyle={{ overflowY: "scroll", alignItems: "flex-start" }}
+      containerStyle={{ overflowY: 'scroll', alignItems: 'flex-start' }}
     >
-      <SearchSuggestions term="Ste" products={products.slice(0, 3)} terms={searchTerms} style={{ width: "100%" }} />
+      <SearchSuggestions
+        term="Ste"
+        products={products.slice(0, 3)}
+        terms={searchTerms}
+        style={{ width: '100%' }}
+      />
     </SectionItem>
     <SectionItem
       title="SearchProductCard"
       actionPath="../?path=/docs/features-search-searchproductcard--search-product-card"
       description={
         <>
-          Card to show details of the product and suggestions in <code>SearchDropdown</code>.
+          Card to show details of the product and suggestions in{' '}
+          <code>SearchDropdown</code>.
         </>
       }
     >
-      <SearchProductCard product={product} style={{ width: "100%" }} />
+      <SearchProductCard product={product} style={{ width: '100%' }} />
     </SectionItem>
     <SectionItem
       title="SearchTop"
       actionPath="../?path=/docs/features-search-searchtop--default-story"
       description={
-        <>
-          This section displays the most searched terms by customers.
-        </>
+        <>This section displays the most searched terms by customers.</>
       }
     >
-      <SearchTop style={{ width: "100%" }} />
+      <SearchTop style={{ width: '100%' }} />
     </SectionItem>
   </SectionList>
   <SectionList grid="grid">
@@ -134,36 +137,37 @@ import SearchInput from 'src/components/search/SearchInput'
       title="SearchHistory"
       actionPath="../?path=/docs/features-search-searchhistory--default-story"
       description={
-        <>
-          Responsible for showing the latest terms searched by the user.
-        </>
+        <>Responsible for showing the latest terms searched by the user.</>
       }
     >
-      <SearchHistory style={{ width: "100%" }} />
+      <SearchHistory style={{ width: '100%' }} />
     </SectionItem>
     <SectionItem
       title="SearchDropdown"
       actionPath="../?path=/docs/features-search-searchdropdown--default-story"
       description={
         <>
-          Combine <code>SearchHistory</code>, <code>SearchTop</code>, and <code>SearchSuggestions</code> to show all options in <code>SearchInput</code>.
+          Combine <code>SearchHistory</code>, <code>SearchTop</code>, and{' '}
+          <code>SearchSuggestions</code> to show all options in{' '}
+          <code>SearchInput</code>.
         </>
       }
-      containerStyle={{ display: "flex", flexDirection: "column", overflowY: "scroll", justifyContent: "start" }}
+      containerStyle={{
+        display: 'flex',
+        flexDirection: 'column',
+        overflowY: 'scroll',
+        justifyContent: 'start',
+      }}
     >
       <SearchDropdown />
     </SectionItem>
     <SectionItem
       title="SearchInput"
       actionPath="../?path=/docs/features-search-searchinput--default-story"
-      description={
-        <>
-          Responsible to receive, search and display suggestions.
-        </>
-      }
-      containerStyle={{ overflowY: "scroll" }}
+      description={<>Responsible to receive, search and display suggestions.</>}
+      containerStyle={{ overflowY: 'scroll' }}
     >
-      <SearchInput containerStyle={{ width: "100%" }} />
+      <SearchInput containerStyle={{ width: '100%' }} />
     </SectionItem>
   </SectionList>
 </SearchInputProvider>

package/src/components/search/SearchDropdown/SearchDropdown.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { rest } from 'msw'
 
 import {
   TokenTable,

package/src/components/search/SearchInput/SearchInput.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { rest } from 'msw'
 
 import {
   TokenTable,

package/src/components/search/SearchTop/SearchTop.stories.mdx

@@ -1,5 +1,4 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import { rest } from 'msw'
 
 import { SearchInputProvider } from 'src/sdk/search/useSearchInput'
 import { searchTerms } from 'src/../.storybook/mocks'

package/src/components/sections/ProducDetailsContent/ProductDetailsContent.tsx

@@ -6,12 +6,14 @@ import {
   TableCell as UITableCell,
   TableRow as UITableRow,
   Icon as UIIcon,
+  Accordion as UIAccordion,
+  AccordionItem as UIAccordionItem,
+  AccordionButton as UIAccordionButton,
+  AccordionPanel as UIAccordionPanel,
 } from '@faststore/ui'
 
-import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
 import Icon from 'src/components/ui/Icon'
 
-import styles from './product-details-content.module.scss'
 import Section from '../Section'
 
 interface ArticleLabels {
@@ -100,177 +102,173 @@ function ProductDetailsContent({
   const labels = { ...DEFAULT_LABELS, ...propLabels }
 
   return (
-    <Section
-      className={styles.fsProductDetailsContent}
-      data-fs-product-details-content
-    >
-      <Accordion
-        expandedIndices={indices}
+    <Section data-fs-product-details-content>
+      <UIAccordion
+        indices={indices}
         onChange={onChange}
         aria-label="Product Details Content"
       >
-        <AccordionItem
+        <UIAccordionItem
           as="article"
           index={0}
-          isExpanded={indices.has(0)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.description}</h2>
-          }
           data-fs-product-details-description
           prefixId="product-details-content"
         >
-          <p className="text__body">
-            Sony WH-1000XM4 Wireless Industry Leading Noise Canceling Overhead
-            Headphones with Mic for Phone-Call and Alexa Voice Control, Black.
-          </p>
-        </AccordionItem>
-        <AccordionItem
+          <UIAccordionButton>{labels.description}</UIAccordionButton>
+          <UIAccordionPanel>
+            <p className="text__body">
+              Sony WH-1000XM4 Wireless Industry Leading Noise Canceling Overhead
+              Headphones with Mic for Phone-Call and Alexa Voice Control, Black.
+            </p>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+        <UIAccordionItem
           as="article"
           index={1}
-          isExpanded={indices.has(1)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.about}</h2>
-          }
           data-fs-product-details-about
           prefixId="product-details-content"
         >
-          <UITable
-            cellPadding={0}
-            cellSpacing={0}
-            className="text__title-mini-alt"
-          >
-            <UITableBody>
-              <UITableRow>
-                <UITableCell variant="header">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Ruler" width={18} height={18} />}
-                  />
-                  <span>Width</span>
-                </UITableCell>
-                <UITableCell>1.50m</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Ruler" width={18} height={18} />}
-                  />
-                  Height
-                </UITableCell>
-                <UITableCell>1.50m</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Ruler" width={18} height={18} />}
-                  />
-                  Dimensions
-                </UITableCell>
-                <UITableCell>7.27 x 3.03 x 9.94 inches</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={<Icon name="Bag" width={18} height={18} />}
-                  />
-                  Weight
-                </UITableCell>
-                <UITableCell>12oz</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={
-                      <Icon name="RocketLaunch" width={18} height={18} />
-                    }
-                  />
-                  Days to ship
-                </UITableCell>
-                <UITableCell>11 Days</UITableCell>
-              </UITableRow>
-              <UITableRow>
-                <UITableCell variant="header">
-                  <UIIcon
-                    data-fs-accordion-item-button-icon
-                    component={
-                      <Icon name="CircleWavyCheck" width={18} height={18} />
-                    }
-                  />
-                  Estimated
-                </UITableCell>
-                <UITableCell>Nov 10th</UITableCell>
-              </UITableRow>
-            </UITableBody>
-          </UITable>
-        </AccordionItem>
-        <AccordionItem
+          <UIAccordionButton>{labels.about}</UIAccordionButton>
+          <UIAccordionPanel>
+            <UITable
+              cellPadding={0}
+              cellSpacing={0}
+              className="text__title-mini-alt"
+            >
+              <UITableBody>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Ruler" width={18} height={18} />}
+                    />
+                    <span>Width</span>
+                  </UITableCell>
+                  <UITableCell align="right">1.50m</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Ruler" width={18} height={18} />}
+                    />
+                    Height
+                  </UITableCell>
+                  <UITableCell align="right">1.50m</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Ruler" width={18} height={18} />}
+                    />
+                    Dimensions
+                  </UITableCell>
+                  <UITableCell align="right">
+                    7.27 x 3.03 x 9.94 inches
+                  </UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={<Icon name="Bag" width={18} height={18} />}
+                    />
+                    Weight
+                  </UITableCell>
+                  <UITableCell align="right">12oz</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={
+                        <Icon name="RocketLaunch" width={18} height={18} />
+                      }
+                    />
+                    Days to ship
+                  </UITableCell>
+                  <UITableCell align="right">11 Days</UITableCell>
+                </UITableRow>
+                <UITableRow>
+                  <UITableCell variant="header" align="left">
+                    <UIIcon
+                      data-fs-accordion-item-button-icon
+                      component={
+                        <Icon name="CircleWavyCheck" width={18} height={18} />
+                      }
+                    />
+                    Estimated
+                  </UITableCell>
+                  <UITableCell align="right">Nov 10th</UITableCell>
+                </UITableRow>
+              </UITableBody>
+            </UITable>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+        <UIAccordionItem
           as="article"
           className="text__body"
           index={2}
-          isExpanded={indices.has(2)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.highlights}</h2>
-          }
           data-fs-product-details-highlights
           prefixId="product-details-content"
         >
-          <UIList marker>
-            <li>
-              Industry-leading noise canceling with Dual Noise Sensor technology
-            </li>
-            <li>
-              Next-level music with Edge-AI, co-developed with Sony Music
-              Studios Tokyo
-            </li>
-            <li>
-              Up to 30-hour battery life with quick charging (10 min charge for
-              5 hours of playback)
-            </li>
-            <li>
-              Touch Sensor controls to pause play skip tracks, control volume,
-              activate your voice assistant, and answer phone calls
-            </li>
-            <li>
-              Speak-to-chat technology automatically reduces volume during
-              conversations
-            </li>
-            <li>Superior call quality with precise voice pickup</li>
-            <li>
-              Wearing detection pauses playback when headphones are removed
-            </li>
-            <li>Seamless multiple-device pairing</li>
-            <li>
-              Adaptive Sound Control provides a personalized listening
-              experience
-            </li>
-            <li>Updated design relieves pressure for long-lasting comfort</li>
-          </UIList>
-        </AccordionItem>
-        <AccordionItem
+          <UIAccordionButton>{labels.highlights}</UIAccordionButton>
+          <UIAccordionPanel>
+            <UIList marker>
+              <li>
+                Industry-leading noise canceling with Dual Noise Sensor
+                technology
+              </li>
+              <li>
+                Next-level music with Edge-AI, co-developed with Sony Music
+                Studios Tokyo
+              </li>
+              <li>
+                Up to 30-hour battery life with quick charging (10 min charge
+                for 5 hours of playback)
+              </li>
+              <li>
+                Touch Sensor controls to pause play skip tracks, control volume,
+                activate your voice assistant, and answer phone calls
+              </li>
+              <li>
+                Speak-to-chat technology automatically reduces volume during
+                conversations
+              </li>
+              <li>Superior call quality with precise voice pickup</li>
+              <li>
+                Wearing detection pauses playback when headphones are removed
+              </li>
+              <li>Seamless multiple-device pairing</li>
+              <li>
+                Adaptive Sound Control provides a personalized listening
+                experience
+              </li>
+              <li>Updated design relieves pressure for long-lasting comfort</li>
+            </UIList>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+        <UIAccordionItem
           as="article"
           index={3}
-          isExpanded={indices.has(3)}
-          buttonLabel={
-            <h2 className="text__title-subsection">{labels.learnMore}</h2>
-          }
           data-fs-product-details-learn-more
           prefixId="product-details-content"
         >
-          <p className="text__body">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laboru.
-          </p>
-        </AccordionItem>
-      </Accordion>
+          <UIAccordionButton>{labels.learnMore}</UIAccordionButton>
+          <UIAccordionPanel>
+            <p className="text__body">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+              enim ad minim veniam, quis nostrud exercitation ullamco laboris
+              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat
+              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
+              sunt in culpa qui officia deserunt mollit anim id est laboru.
+            </p>
+          </UIAccordionPanel>
+        </UIAccordionItem>
+      </UIAccordion>
     </Section>
   )
 }

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react'
 import {
   BuyButton as UIBuyButton,
   DiscountBadge as UIDiscountBadge,
+  QuantitySelector as UIQuantitySelector,
 } from '@faststore/ui'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
@@ -13,7 +14,6 @@ import Breadcrumb from 'src/components/ui/Breadcrumb'
 import { ImageGallery } from 'src/components/ui/ImageGallery'
 import Price from 'src/components/ui/Price'
 import ProductTitle from 'src/components/ui/ProductTitle'
-import QuantitySelector from 'src/components/ui/QuantitySelector'
 import ShippingSimulation from 'src/components/ui/ShippingSimulation'
 import Selectors from 'src/components/ui/SkuSelector'
 import type { AnalyticsItem } from 'src/sdk/analytics/types'
@@ -167,7 +167,7 @@ function ProductDetails({ context: staleProduct }: Props) {
                 <p className="price__old text__legend">{formattedListPrice}</p>
                 <p className="price__new">{isValidating ? '' : formattedPrice}</p>
               </div> */}
-              <QuantitySelector min={1} max={10} onChange={setAddQuantity} />
+              <UIQuantitySelector min={1} max={10} onChange={setAddQuantity} />
             </section>
             {skuVariants && (
               <Selectors

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -1,13 +1,14 @@
 import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
-import { Breadcrumb as UIBreadcrumb } from '@faststore/ui'
+import {
+  Breadcrumb as UIBreadcrumb,
+  Dropdown as UIDropdown,
+  DropdownButton as UIDropdownButton,
+  DropdownMenu as UIDropdownMenu,
+  DropdownItem as UIDropdownItem,
+} from '@faststore/ui'
 import { useRouter } from 'next/router'
 import { memo } from 'react'
 
-import Dropdown, {
-  DropdownButton,
-  DropdownItem,
-  DropdownMenu,
-} from 'src/components/ui/Dropdown'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 
@@ -77,25 +78,25 @@ function BaseBreadcrumb({
       )}
 
       {collapseBreadcrumb && (
-        <Dropdown>
-          <DropdownButton data-fs-breadcrumb-dropdown-button>
+        <UIDropdown>
+          <UIDropdownButton data-fs-breadcrumb-dropdown-button size="small">
             <Icon name="DotsThree" width={24} height={24} />
-          </DropdownButton>
-          <DropdownMenu data-fs-breadcrumb-dropdown-menu>
+          </UIDropdownButton>
+          <UIDropdownMenu data-fs-breadcrumb-dropdown-menu>
             {mediumItems.map(({ item, name }, index) => (
-              <DropdownItem
+              <UIDropdownItem
                 data-fs-breadcrumb-dropdown-item
+                onClick={() => router.push(item)}
+                key={String(index)}
                 icon={
                   <Icon name="ArrowElbowDownRight" width={24} height={24} />
                 }
-                onClick={() => router.push(item)}
-                key={String(index)}
               >
                 {name}
-              </DropdownItem>
+              </UIDropdownItem>
             ))}
-          </DropdownMenu>
-        </Dropdown>
+          </UIDropdownMenu>
+        </UIDropdown>
       )}
 
       {collapseBreadcrumb &&

package/src/components/ui/Gift/Gift.tsx

@@ -1,18 +1,16 @@
+import type { GiftProps } from '@faststore/ui'
 import {
+  Badge as UIBadge,
   Gift as UIGift,
-  GiftImage as UIGiftImage,
   GiftContent as UIGiftContent,
-  Badge as UIBadge,
+  GiftImage as UIGiftImage,
 } from '@faststore/ui'
-import type { GiftProps } from '@faststore/ui'
 
-import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import Icon from 'src/components/ui/Icon'
-import Price from 'src/components/ui/Price'
 import { Image } from 'src/components/ui/Image'
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
-
-import styles from './gift.module.scss'
+import Price from 'src/components/ui/Price'
+import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 
 export type Props = GiftProps & {
   /**
@@ -44,11 +42,7 @@ function Gift({
   } = product
 
   return (
-    <UIGift
-      className={styles.fsGift}
-      icon={<Icon name="Tag" width={18} height={18} />}
-      {...otherProps}
-    >
+    <UIGift icon={<Icon name="Tag" width={18} height={18} />} {...otherProps}>
       <UIGiftImage>
         <Image src={img.url} alt={img.alternateName} width={89} height={89} />
       </UIGiftImage>

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

@@ -111,30 +111,3 @@ The `ShippingSimulation` component uses [FastStore UI Table](https://www.faststo
     value="var(--fs-spacing-2)"
   />
 </TokenTable>
-
-### Table
-
-<TokenTable>
-  <TokenRow
-    token="--fs-shipping-simulation-table-row-bkg-color"
-    value="var(--fs-color-main-0)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-shipping-simulation-table-row-even-bkg-color"
-    value="transparent"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-shipping-simulation-table-cell-padding"
-    value="var(--fs-spacing-2)"
-  />
-  <TokenRow
-    token="--fs-shipping-simulation-table-cell-text-size"
-    value="var(--fs-text-size-2)"
-  />
-  <TokenRow
-    token="--fs-shipping-simulation-table-cell-border-radius"
-    value="var(--fs-border-radius)"
-  />
-</TokenTable>