@faststore/core 0.3.16 → 2.0.65-alpha.0

package/src/components/common/Footer/footer.module.scss

@@ -22,11 +22,6 @@
   --fs-footer-title-weight                        : var(--fs-text-weight-bold);
   --fs-footer-title-margin-bottom                 : var(--fs-spacing-1);
 
-  // Payment Methods
-  --fs-footer-payment-methods-flags-border-width  : var(--fs-border-width);
-  --fs-footer-payment-methods-flags-border-color  : var(--fs-color-neutral-3);
-  --fs-footer-payment-methods-flags-border-radius : var(--fs-border-radius-small);
-
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
@@ -108,7 +103,7 @@
   }
 
   [data-fs-footer-social],
-  [data-fs-footer-payment-methods] {
+  [data-fs-payment-methods] {
     @include media(">=notebook") {
       grid-column: 11 / span 2;
       margin-left: calc(-1 * var(--fs-spacing-3));
@@ -142,7 +137,7 @@
     }
   }
 
-  [data-fs-footer-payment-methods] {
+  [data-fs-payment-methods] {
     @include media("<notebook") {
       margin: var(--fs-footer-spacing-vertical-mobile) auto;
     }
@@ -158,27 +153,6 @@
     }
   }
 
-  [data-payment-methods-flags] {
-    svg {
-      border: var(--fs-footer-payment-methods-flags-border-width) solid var(--fs-footer-payment-methods-flags-border-color);
-      border-radius: var(--fs-footer-payment-methods-flags-border-radius);
-    }
-
-    [data-fs-list] {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(0, max-content));
-      row-gap: var(--fs-spacing-1);
-      justify-content: space-between;
-      margin-top: var(--fs-spacing-3);
-
-      li { display: flex; }
-
-      @include media("<notebook") {
-        column-gap: var(--fs-grid-gap-2);
-      }
-    }
-  }
-
   [data-fs-footer-copyright] {
     p + p {
       margin: var(--fs-spacing-2) auto;

package/src/components/common/Footer/index.ts

@@ -1,2 +1,3 @@
 export { default } from './Footer'
 export { default as FooterLinks } from './FooterLinks'
+export { default as FooterFlags } from './FooterFlags'

package/src/components/common/Navbar/NavLinks.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
-import UIProvider from 'src/sdk/ui/Provider'
+import { UIProvider } from '@faststore/ui'
 
 import { NavLinks } from '.'
 

package/src/components/common/Navbar/Navbar.stories.mdx

@@ -1,4 +1,4 @@
-import UIProvider from 'src/sdk/ui/Provider'
+import { UIProvider } from '@faststore/ui'
 
 import Navbar, { NavLinks } from '.'
 

package/src/components/common/Navbar/Navbar.tsx

@@ -9,7 +9,7 @@ import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 import useScrollDirection from 'src/sdk/ui/useScrollDirection'
 
 import styles from './navbar.module.scss'

package/src/components/common/Navbar/NavbarSlider.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 
 import { Button } from '@faststore/ui'
 import Icon from 'src/components/ui/Icon'

package/src/components/common/Navbar/NavbarSlider.tsx

@@ -7,8 +7,8 @@ import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
 import SlideOver from 'src/components/ui/SlideOver'
 import { mark } from 'src/sdk/tests/mark'
-import { useUI } from 'src/sdk/ui/Provider'
-import { useFadeEffect } from 'src/sdk/ui/useFadeEffect'
+import { useUI } from '@faststore/ui'
+import { useFadeEffect } from '@faststore/ui'
 
 import styles from './navbar-slider.module.scss'
 import NavLinks from './NavLinks'

package/src/components/common/Toast/Toast.tsx

@@ -1,7 +1,7 @@
 import { lazy, Suspense, useEffect } from 'react'
 
 import { useCart } from 'src/sdk/cart'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 const UIToast = lazy(() => import('src/components/ui/Toast'))
 

package/src/components/product/ProductCard/ProductCard.tsx

@@ -1,22 +1,16 @@
 import {
   ProductCard as UIProductCard,
-  ProductCardActions as UIProductCardActions,
   ProductCardContent as UIProductCardContent,
   ProductCardImage as UIProductCardImage,
-  Badge as UIBadge,
-  DiscountBadge as UIDiscountBadge,
 } from '@faststore/ui'
 import { gql } from '@faststore/graphql-utils'
 import { memo } from 'react'
-import type { ReactNode } from 'react'
 
-import Link from 'src/components/ui/Link'
 import { Image } from 'src/components/ui/Image'
-import Price from 'src/components/ui/Price'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import styles from 'src/components/product/ProductCard/product-card.module.scss'
+import NextLink from 'next/link'
 
 type Variant = 'wide' | 'default'
 
@@ -36,18 +30,33 @@ export interface ProductCardProps {
    */
   aspectRatio?: number
   /**
-   * Enables a BuyButton to the component.
+   * Specifies Rating Value of the product.
    */
-  BuyButton?: ReactNode
+  ratingValue?: number
+  /**
+   * Callback function when button is clicked.
+   */
+  onButtonClick?: () => void
+  /**
+   * Specifies the button's label.
+   */
+  buttonLabel?: string
+  /**
+   * Enables a DiscountBadge to the component.
+   */
+  showDiscountBadge?: boolean
 }
 
 function ProductCard({
   product,
   index,
-  variant = 'default',
   bordered = false,
+  variant = 'default',
   aspectRatio = 1,
-  BuyButton,
+  ratingValue,
+  buttonLabel = 'Add',
+  onButtonClick,
+  showDiscountBadge = true,
   ...otherProps
 }: ProductCardProps) {
   const {
@@ -60,20 +69,24 @@ function ProductCard({
     },
   } = product
 
-  const linkProps = useProductLink({ product, selectedOffer: 0, index })
+  const linkProps = {
+    ...useProductLink({ product, selectedOffer: 0, index }),
+    as: NextLink,
+    passHref: true,
+    legacyBehavior: false,
+  }
+
   const outOfStock = availability !== 'https://schema.org/InStock'
 
   return (
     <UIProductCard
-      data-fs-product-card
-      data-fs-product-card-variant={variant}
-      data-fs-product-card-bordered={bordered}
-      data-fs-product-card-actionable={!!BuyButton}
+      outOfStock={outOfStock}
+      bordered={bordered}
+      variant={variant}
       data-fs-product-card-sku={sku}
-      className={styles.fsProductCard}
       {...otherProps}
     >
-      <UIProductCardImage data-fs-product-card-image>
+      <UIProductCardImage aspectRatio={aspectRatio}>
         <Image
           src={img.url}
           alt={img.alternateName}
@@ -83,47 +96,19 @@ function ProductCard({
           loading="lazy"
         />
       </UIProductCardImage>
-
-      <UIProductCardContent data-fs-product-card-content>
-        <div data-fs-product-card-heading>
-          <h3 data-fs-product-card-title>
-            <Link {...linkProps} title={name}>
-              {name}
-            </Link>
-          </h3>
-          <div data-fs-product-card-prices>
-            <Price
-              value={listPrice}
-              formatter={useFormattedPrice}
-              testId="list-price"
-              data-value={listPrice}
-              variant="listing"
-              classes="text__legend"
-              SRText="Original price:"
-            />
-            <Price
-              value={spotPrice}
-              formatter={useFormattedPrice}
-              testId="price"
-              data-value={spotPrice}
-              variant="spot"
-              classes="text__body"
-              SRText="Sale Price:"
-            />
-          </div>
-        </div>
-
-        {outOfStock ? (
-          <UIBadge>Out of stock</UIBadge>
-        ) : (
-          <UIDiscountBadge listPrice={listPrice} spotPrice={spotPrice} />
-        )}
-        {!!BuyButton && (
-          <UIProductCardActions data-fs-product-card-actions>
-            {BuyButton}
-          </UIProductCardActions>
-        )}
-      </UIProductCardContent>
+      <UIProductCardContent
+        title={name}
+        price={{
+          value: spotPrice,
+          listPrice: listPrice,
+          formatter: useFormattedPrice,
+        }}
+        ratingValue={ratingValue}
+        outOfStock={outOfStock}
+        onButtonClick={onButtonClick}
+        linkProps={linkProps}
+        showDiscountBadge={showDiscountBadge}
+      />
     </UIProductCard>
   )
 }

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -17,8 +17,13 @@ interface Props {
 }
 
 function ProductGrid({ products, page, pageSize }: Props) {
+  const aspectRatio = 1
+
   return (
-    <ProductGridSkeleton loading={products.length === 0}>
+    <ProductGridSkeleton
+      aspectRatio={aspectRatio}
+      loading={products.length === 0}
+    >
       <ul data-fs-product-grid className={styles.fsProductGrid}>
         {products.map(({ node: product }, idx) => (
           <li key={`${product.id}`}>
@@ -26,6 +31,7 @@ function ProductGrid({ products, page, pageSize }: Props) {
               product={product}
               index={pageSize * page + idx + 1}
               bordered
+              aspectRatio={aspectRatio}
             />
           </li>
         ))}

package/src/components/regionalization/Regionalization.stories.mdx

@@ -1,4 +1,4 @@
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI, Button } from '@faststore/ui'
 
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
@@ -15,7 +15,7 @@ import Icon from '../ui/Icon'
 <Meta title="Features/Regionalization/Overview" />
 
 export const TemplateRegionalizationModal = () => {
-  const { modal, openModal } = useUI()
+  const { modal } = useUI()
   return <>{modal && <RegionalizationModal />}</>
 }
 
@@ -31,6 +31,26 @@ export const TemplateButtonWithProvider = () => {
   )
 }
 
+export const RegionalizationModalContentTemplate = () => {
+  const { modal, openModal } = useUI()
+  return (
+    <div>
+      <Button variant="primary" onClick={() => openModal()}>
+        Open Regionalization Modal
+      </Button>
+      {modal && <RegionalizationModal />}
+    </div>
+  )
+}
+
+export const TemplateOverview = (args) => {
+  return (
+    <UIProvider>
+      <RegionalizationModalContentTemplate onClose={() => {}} />
+    </UIProvider>
+  )
+}
+
 <header>
 
 # Regionalization
@@ -120,9 +140,7 @@ With the Regionalization feature enabled, if a customer enters their Postal Code
     </li>
     <li>
       <div>
-        <UIProvider>
-          <RegionalizationModalContent onClose={() => {}} />
-        </UIProvider>
+        <TemplateOverview />
       </div>
       <article className="sbdocs-list-text">
         <h3>RegionalizationModal</h3>
@@ -153,7 +171,7 @@ On your `Layout.tsx` file:
 
 ```jsx
 import RegionalizationModal from '../components/regionalization/RegionalizationModal'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 ```
 
 and inside your `Layout` component:

package/src/components/regionalization/RegionalizationBar/RegionalizationBar.stories.mdx

@@ -1,4 +1,4 @@
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 

package/src/components/regionalization/RegionalizationBar/RegionalizationBar.tsx

@@ -3,7 +3,7 @@ import { Button as UIButton } from '@faststore/ui'
 
 import Icon from 'src/components/ui/Icon'
 import { useSession } from 'src/sdk/session'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 import styles from './regionalization-bar.module.scss'
 

package/src/components/regionalization/RegionalizationButton/RegionalizationButton.tsx

@@ -2,7 +2,7 @@ import { Button as UIButton } from '@faststore/ui'
 
 import Icon from 'src/components/ui/Icon'
 import { useSession } from 'src/sdk/session'
-import { useUI } from 'src/sdk/ui/Provider'
+import { useUI } from '@faststore/ui'
 
 function RegionButton() {
   const { openModal } = useUI()

package/src/components/regionalization/RegionalizationModal/RegionalizationModal.stories.mdx

@@ -1,5 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+
+import { UIProvider, useUI, Modal, Button } from '@faststore/ui'
 
 import RegionalizationModal, { RegionalizationModalContent } from '.'
 import RegionalizationButton from 'src/components/regionalization/RegionalizationButton'
@@ -35,10 +36,22 @@ export const Template = (args) => {
   )
 }
 
-export const RegionalizationModalContentTemplate = (args) => {
+export const RegionalizationModalContentTemplate = () => {
+  const { modal, openModal } = useUI()
+  return (
+    <div>
+      <Button variant="primary" onClick={() => openModal()}>
+        Open Regionalization Modal
+      </Button>
+      {modal && <RegionalizationModal />}
+    </div>
+  )
+}
+
+export const TemplateOverview = (args) => {
   return (
     <UIProvider>
-      <RegionalizationModalContent onClose={() => {}} />
+      <RegionalizationModalContentTemplate onClose={() => {}} />
     </UIProvider>
   )
 }
@@ -56,7 +69,7 @@ This component calls a modal with some regionalization configurations.
 The `RegionalizationModal` is part of [Regionalization](?path=/docs/features-regionalization-overview--default-button) feature and uses [Modal](/docs/molecules-modal--overview) as a base.
 
 <Canvas style={{ backgroundColor: 'var(--fs-color-neutral-1)' }}>
-  <Story name="Overview">{RegionalizationModalContentTemplate.bind({})}</Story>
+  <Story name="Overview">{TemplateOverview.bind({})}</Story>
 </Canvas>
 
 ---

package/src/components/regionalization/RegionalizationModal/RegionalizationModal.tsx

@@ -1,12 +1,11 @@
-import Modal from 'src/components/ui/Modal'
-
-import { RegionalizationModalContent } from '.'
+import { Modal as UIModal } from '@faststore/ui'
+import RegionalizationModalContent from './RegionalizationModalContent'
 
 function RegionalizationModal() {
   return (
-    <Modal>
+    <UIModal>
       {({ fadeOut }) => <RegionalizationModalContent onClose={fadeOut} />}
-    </Modal>
+    </UIModal>
   )
 }
 

package/src/components/regionalization/RegionalizationModal/RegionalizationModalContent.tsx

@@ -1,12 +1,15 @@
-import { IconButton as UIIconButton } from '@faststore/ui'
+import {
+  ModalBody as UIModalBody,
+  ModalHeader as UIModalHeader,
+} from '@faststore/ui'
 
 import RegionalizationInput from 'src/components/regionalization/RegionalizationInput'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 
-import styles from './regionalization-modal-content.module.scss'
+import styles from './regionalization-modal-body.module.scss'
 
-export type RegionalizationModalContentProps = {
+export interface RegionalizationModalContentProps {
   onClose?: () => void
 }
 
@@ -14,35 +17,25 @@ function RegionalizationModalContent({
   onClose,
 }: RegionalizationModalContentProps) {
   return (
-    <div
-      data-fs-regionalization-modal-content
-      className={styles.fsRegionalizationModalContent}
-    >
-      <header data-fs-regionalization-modal-header>
-        {onClose && (
-          <UIIconButton
-            onClick={() => onClose?.()}
-            data-fs-regionalization-modal-button
-            aria-label="Close Regionalization Modal"
-            data-testid="regionalization-modal-button-close"
-            icon={<Icon name="X" width={30} height={30} />}
-          />
-        )}
-        <p data-fs-regionalization-modal-title>Set your location</p>
-        <p data-fs-regionalization-modal-description>
-          Prices, offers and availability may vary according to your location.
-        </p>
-      </header>
-      <div data-fs-regionalization-modal-body>
+    <>
+      <UIModalHeader
+        onClose={() => onClose()}
+        title="Set your location"
+        description="Prices, offers and availability may vary according to your location."
+        closeButtonProps={{
+          'aria-label': 'Close Regionalization Modal',
+        }}
+      />
+      <UIModalBody className={styles.fsRegionalizationModalBody}>
         <div data-fs-regionalization-modal-input>
-          <RegionalizationInput closeModal={() => onClose?.()} />
+          <RegionalizationInput closeModal={() => onClose()} />
         </div>
         <Link href="/" data-fs-regionalization-modal-link>
           {"I don't know my Postal Code"}
           <Icon name="ArrowSquareOut" width={18} height={18} />
         </Link>
-      </div>
-    </div>
+      </UIModalBody>
+    </>
   )
 }
 

package/src/components/regionalization/RegionalizationModal/regionalization-modal-body.module.scss

@@ -0,0 +1,25 @@
+.fs-regionalization-modal-body {
+  // --------------------------------------------------------
+  // Design Tokens for Regionalization Modal
+  // --------------------------------------------------------
+
+  // Link
+  --fs-regionalization-modal-link-padding: 0;
+  --fs-regionalization-modal-link-color: var(--fs-color-link);
+  --fs-regionalization-modal-link-margin-right: var(--fs-spacing-0);
+
+  [data-fs-regionalization-modal-input] {
+    margin-bottom: var(--fs-spacing-6);
+  }
+
+  [data-fs-regionalization-modal-link] {
+    display: flex;
+    flex-direction: row;
+    align-content: flex-start;
+    align-items: center;
+    justify-content: flex-start;
+    padding: var(--fs-regionalization-modal-link-padding);
+    margin-right: var(--fs-regionalization-modal-link-margin-right);
+    color: var(--fs-regionalization-modal-link-color);
+  }
+}

package/src/components/search/Filter/Facets.stories.mdx

@@ -1,7 +1,7 @@
 import { SearchProvider } from '@faststore/sdk'
 import { useSearch } from '@faststore/sdk'
 
-import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+import { UIProvider, useUI } from '@faststore/ui'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from './useFilter'
 
@@ -134,7 +134,7 @@ Facets represent the <code>Filter</code> details and allow users to refine their
 
 ## Overview
 
-The `Facets` component uses the [Accordion](?path=/docs/molecules-accordion-overview--default-story), [Checkbox](?path=/docs/atoms-checkbox--overview-default), [PriceRange](?path=/docs/molecules-pricerange--overview-default), and [Badge](?path=/docs/molecules-badge--default) components.
+The `Facets` component uses the Accordion, [Checkbox](?path=/docs/atoms-checkbox--overview-default), PriceRange, and [Badge](?path=/docs/molecules-badge--default) components.
 
 ---
 
@@ -194,30 +194,30 @@ The `Facets` component uses the [Accordion](?path=/docs/molecules-accordion-over
 
 <TokenTable>
   <TokenRow
-    token="--fs-facets-accordion-item-button-text-size"
+    token="--fs-facets-accordion-button-text-size"
     value="var(--fs-text-size-lead)"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-text-weight"
+    token="--fs-facets-accordion-button-text-weight"
     value="var(--fs-text-weight-regular)"
   />
-  <TokenRow token="--fs-facets-accordion-item-button-line-height" value="1.5" />
+  <TokenRow token="--fs-facets-accordion-button-line-height" value="1.5" />
   <TokenDivider />
   <TokenRow
-    token="--fs-facets-accordion-item-button-text-weight-notebook"
+    token="--fs-facets-accordion-button-text-weight-notebook"
     value="var(--fs-text-size-2)"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-line-height-notebook"
+    token="--fs-facets-accordion-button-line-height-notebook"
     value="1.25"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-padding-right-notebook"
+    token="--fs-facets-accordion-button-padding-right-notebook"
     value="var(--fs-spacing-4)"
   />
   <TokenRow
-    token="--fs-facets-accordion-item-button-padding-left-notebook"
-    value="var(--fs-facets-accordion-item-button-padding-right-notebook)"
+    token="--fs-facets-accordion-button-padding-left-notebook"
+    value="var(--fs-facets-accordion-button-padding-right-notebook)"
   />
 </TokenTable>