@faststore/core 0.3.6 → 0.3.7

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

@@ -3,13 +3,14 @@ import {
   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 { Badge, DiscountBadge } from 'src/components/ui/Badge'
 import { Image } from 'src/components/ui/Image'
 import Price from 'src/components/ui/Price'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
@@ -35,9 +36,9 @@ export interface ProductCardProps {
    */
   aspectRatio?: number
   /**
-   * Enables a ButtonBuy to the component.
+   * Enables a BuyButton to the component.
    */
-  ButtonBuy?: ReactNode
+  BuyButton?: ReactNode
 }
 
 function ProductCard({
@@ -46,7 +47,7 @@ function ProductCard({
   variant = 'default',
   bordered = false,
   aspectRatio = 1,
-  ButtonBuy,
+  BuyButton,
   ...otherProps
 }: ProductCardProps) {
   const {
@@ -67,7 +68,7 @@ function ProductCard({
       data-fs-product-card
       data-fs-product-card-variant={variant}
       data-fs-product-card-bordered={bordered}
-      data-fs-product-card-actionable={!!ButtonBuy}
+      data-fs-product-card-actionable={!!BuyButton}
       data-fs-product-card-sku={sku}
       className={styles.fsProductCard}
       {...otherProps}
@@ -113,13 +114,13 @@ function ProductCard({
         </div>
 
         {outOfStock ? (
-          <Badge>Out of stock</Badge>
+          <UIBadge>Out of stock</UIBadge>
         ) : (
-          <DiscountBadge listPrice={listPrice} spotPrice={spotPrice} />
+          <UIDiscountBadge listPrice={listPrice} spotPrice={spotPrice} />
         )}
-        {!!ButtonBuy && (
+        {!!BuyButton && (
           <UIProductCardActions data-fs-product-card-actions>
-            {ButtonBuy}
+            {BuyButton}
           </UIProductCardActions>
         )}
       </UIProductCardContent>

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

@@ -21,9 +21,7 @@ export const TemplateRegionalizationModal = () => {
 export const TemplateButtonWithProvider = () => {
   return (
     <UIProvider>
-      <div
-        style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}
-      >
+      <div style={{ display: 'flex', alignItems: 'center', columnGap: '20px' }}>
         <p style={{ whiteSpace: 'nowrap' }}>Try me:</p>
         <RegionalizationButton />
         <TemplateRegionalizationModal />
@@ -114,9 +112,7 @@ With the Regionalization feature enabled, if a customer enters their Postal Code
       <article className="sbdocs-list-text">
         <h3>RegionalizationInput</h3>
         <p>
-          An actionable{' '}
-          <a href="../?path=/docs/atoms-inputtext--actionable">InputText</a>{' '}
-          able to check the Postal Code authenticity.
+          An actionable InputText able to check the Postal Code authenticity.
         </p>
       </article>
     </li>

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

@@ -1,6 +1,6 @@
 import type { HTMLAttributes } from 'react'
+import { Button as UIButton } from '@faststore/ui'
 
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { useSession } from 'src/sdk/session'
 import { useUI } from 'src/sdk/ui/Provider'
@@ -21,7 +21,7 @@ function RegionBar({ classes, ...otherProps }: Props) {
       className={`${classes} ${styles.fsRegionalizationBar}`}
       {...otherProps}
     >
-      <Button onClick={openModal}>
+      <UIButton onClick={openModal}>
         <Icon name="MapPin" width={24} height={24} />
         {postalCode ? (
           <>
@@ -32,7 +32,7 @@ function RegionBar({ classes, ...otherProps }: Props) {
           <span data-fs-regionalization-bar-message>Set your location</span>
         )}
         <Icon name="CaretRight" width={24} height={24} />
-      </Button>
+      </UIButton>
     </div>
   )
 }

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

@@ -1,4 +1,5 @@
-import Button from 'src/components/ui/Button'
+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'
@@ -8,7 +9,7 @@ function RegionButton() {
   const { postalCode } = useSession()
 
   return (
-    <Button
+    <UIButton
       data-fs-regionalization-button
       variant="tertiary"
       size="small"
@@ -17,7 +18,7 @@ function RegionButton() {
       onClick={openModal}
     >
       <span>{postalCode ?? 'Set your location'}</span>
-    </Button>
+    </UIButton>
   )
 }
 

package/src/components/regionalization/RegionalizationInput/RegionalizationInput.tsx

@@ -1,6 +1,6 @@
 import { useRef, useState } from 'react'
+import { InputField as UIInputField } from '@faststore/ui'
 
-import InputText from 'src/components/ui/InputText'
 import { sessionStore, useSession, validateSession } from 'src/sdk/session'
 
 interface Props {
@@ -40,7 +40,7 @@ function RegionInput({ closeModal }: Props) {
 
   return (
     <div className="regionalization-input">
-      <InputText
+      <UIInputField
         inputRef={inputRef}
         id="postal-code-input"
         error={errorMessage}

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

@@ -1,5 +1,6 @@
+import { IconButton as UIIconButton } from '@faststore/ui'
+
 import RegionalizationInput from 'src/components/regionalization/RegionalizationInput'
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 
@@ -19,7 +20,7 @@ function RegionalizationModalContent({
     >
       <header data-fs-regionalization-modal-header>
         {onClose && (
-          <Button
+          <UIIconButton
             onClick={() => onClose?.()}
             data-fs-regionalization-modal-button
             aria-label="Close Regionalization Modal"

package/src/components/search/Filter/Facets.tsx

@@ -1,12 +1,15 @@
-import { Label as UILabel, List as UIList } from '@faststore/ui'
+import {
+  Checkbox as UICheckbox,
+  Label as UILabel,
+  List as UIList,
+  Badge as UIBadge,
+} from '@faststore/ui'
 
 import type {
   Filter_FacetsFragment,
   IStoreSelectedFacet,
 } from '@generated/graphql'
 import Accordion, { AccordionItem } from 'src/components/ui/Accordion'
-import { Badge } from 'src/components/ui/Badge'
-import Checkbox from 'src/components/ui/Checkbox'
 import PriceRange from 'src/components/ui/PriceRange'
 
 import styles from './facets.module.scss'
@@ -81,7 +84,7 @@ function Facets({
 
                     return (
                       <li key={id} data-fs-facets-list-item>
-                        <Checkbox
+                        <UICheckbox
                           id={id}
                           checked={item.selected}
                           onChange={() =>
@@ -101,9 +104,9 @@ function Facets({
                           data-fs-facets-list-item-label
                         >
                           {item.label}{' '}
-                          <Badge data-fs-facets-list-item-badge>
+                          <UIBadge data-fs-facets-list-item-badge>
                             {item.quantity}
-                          </Badge>
+                          </UIBadge>
                         </UILabel>
                       </li>
                     )

package/src/components/search/Filter/FilterSlider.tsx

@@ -1,7 +1,7 @@
 import { useSearch } from '@faststore/sdk'
+import { Button as UIButton, IconButton as UIIconButton } from '@faststore/ui'
 
 import type { Filter_FacetsFragment } from '@generated/graphql'
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import SlideOver from 'src/components/ui/SlideOver'
 import { useUI } from 'src/sdk/ui/Provider'
@@ -48,7 +48,7 @@ function FilterSlider({
       <div data-fs-filter-slider-content>
         <header data-fs-filter-slider-header>
           <h2 className="text__lead">Filters</h2>
-          <Button
+          <UIIconButton
             data-fs-filter-slider-header-icon
             aria-label="Close Filters"
             icon={<Icon name="X" width={32} height={32} />}
@@ -77,14 +77,14 @@ function FilterSlider({
         />
       </div>
       <footer data-fs-filter-slider-footer>
-        <Button
+        <UIButton
           data-fs-filter-slider-footer-button-clear
           variant="secondary"
           onClick={() => dispatch({ type: 'selectFacets', payload: [] })}
         >
           Clear All
-        </Button>
-        <Button
+        </UIButton>
+        <UIButton
           data-fs-filter-slider-footer-button-apply
           variant="primary"
           data-testid="filter-slider-button-apply"
@@ -100,7 +100,7 @@ function FilterSlider({
           }}
         >
           Apply
-        </Button>
+        </UIButton>
       </footer>
     </SlideOver>
   )

package/src/components/search/SearchHistory/SearchHistory.tsx

@@ -1,6 +1,5 @@
-import { List as UIList } from '@faststore/ui'
+import { List as UIList, Button as UIButton } from '@faststore/ui'
 
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 import useSearchHistory from 'src/sdk/search/useSearchHistory'
@@ -20,11 +19,11 @@ const SearchHistory = () => {
     <section data-fs-search-section className={styles.fsSearch}>
       <div data-fs-search-header>
         <p data-fs-search-title>History</p>
-        <Button variant="tertiary" onClick={clearSearchHistory}>
+        <UIButton variant="tertiary" onClick={clearSearchHistory}>
           Clear History
-        </Button>
+        </UIButton>
       </div>
-      <UIList variant="ordered">
+      <UIList as="ol">
         {searchHistory.map((item) => (
           <li key={item.term} data-fs-search-item>
             <Link

package/src/components/search/SearchInput/search-input.module.scss

@@ -8,16 +8,10 @@
   // Default properties
   --fs-search-input-padding                       : var(--fs-spacing-1) var(--fs-spacing-7) var(--fs-spacing-1) var(--fs-spacing-2);
   --fs-search-input-bkg-color                     : var(--fs-color-body-bkg);
-  --fs-search-input-box-shadow                    : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);
 
   --fs-search-input-height-mobile                 : var(--fs-control-tap-size);
   --fs-search-input-height-desktop                : var(--fs-spacing-6);
 
-  --fs-search-input-border-width                  : var(--fs-border-width);
-  --fs-search-input-border-radius                 : var(--fs-border-radius);
-  --fs-search-input-border-color                  : var(--fs-border-color);
-  --fs-search-input-border-color-hover            : var(--fs-border-color-active);
-
   --fs-search-input-transition-timing             : var(--fs-transition-timing);
   --fs-search-input-transition-function           : ease;
 
@@ -67,18 +61,11 @@
     @include media(">=notebook") { height: var(--fs-search-input-height-desktop); }
 
     [data-fs-search-input] {
-      width: 100%;
+      height: auto;
       padding: var(--fs-search-input-padding);
       background-color: var(--fs-search-input-bkg-color);
-      border: var(--fs-search-input-border-width) solid var(--fs-search-input-border-color);
-      border-radius: var(--fs-search-input-border-radius);
       transition: box-shadow var(--fs-search-input-transition-timing) var(--fs-search-input-transition-timing), border var(--fs-search-input-transition-timing) var(--fs-search-input-transition-function);
 
-      &:hover {
-        border-color: var(--fs-search-input-border-color-hover);
-        box-shadow: var(--fs-search-input-box-shadow);
-      }
-
       @include input-focus-ring;
 
       [data-fs-search-input-dropdown-visible="true"] & {

package/src/components/search/SearchTop/SearchTop.tsx

@@ -1,8 +1,7 @@
-import { List as UIList } from '@faststore/ui'
+import { List as UIList, Badge as UIBadge } from '@faststore/ui'
 import { forwardRef } from 'react'
 import type { HTMLAttributes } from 'react'
 
-import { Badge } from 'src/components/ui/Badge'
 import Link from 'src/components/ui/Link'
 import useSearchInput, { formatSearchPath } from 'src/sdk/search/useSearchInput'
 import useTopSearch from 'src/sdk/search/useTopSearch'
@@ -47,7 +46,7 @@ const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
           <div data-fs-search-header>
             <p data-fs-search-title>Top Search</p>
           </div>
-          <UIList variant="ordered">
+          <UIList as="ol">
             {terms.map((term, index) => (
               <li key={term.value} data-fs-search-item>
                 <Link
@@ -61,9 +60,9 @@ const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
                     )
                   }
                 >
-                  <Badge data-fs-search-badge variant="info">
+                  <UIBadge data-fs-search-badge variant="info">
                     {index + 1}
-                  </Badge>
+                  </UIBadge>
                   {term.value}
                 </Link>
               </li>

package/src/components/search/Sort/Sort.tsx

@@ -1,6 +1,5 @@
 import { useSearch } from '@faststore/sdk'
-
-import Select from 'src/components/ui/Select'
+import { SelectField } from '@faststore/ui'
 
 const OptionsMap = {
   price_desc: 'Price, descending',
@@ -19,7 +18,7 @@ function Sort() {
   const { state, setState } = useSearch()
 
   return (
-    <Select
+    <SelectField
       id="sort-select"
       className="sort / text__title-mini-alt"
       label="Sort by"

package/src/components/sections/BannerText/banner-text.module.scss

@@ -9,9 +9,9 @@
   --fs-banner-padding-mobile                : var(--fs-spacing-6) 5%;
   --fs-banner-padding-desktop               : var(--fs-spacing-9) 15%;
 
-  // Link
-  --fs-banner-link-min-width                : 11.25rem;
-  --fs-banner-link-margin-top               : var(--fs-spacing-6);
+  // Button Link
+  --fs-banner-button-link-min-width         : 11.25rem;
+  --fs-banner-button-link-margin-top        : var(--fs-spacing-6);
 
   // Title
   --fs-banner-title-size                    : var(--fs-text-size-lead);
@@ -59,9 +59,9 @@
     height: 100%;
   }
 
-  [data-fs-banner-text-link] [data-fs-link] {
-    min-width: var(--fs-banner-link-min-width);
-    margin-top: var(--fs-banner-link-margin-top);
+  [data-fs-banner-text-link] [data-fs-button-link] {
+    min-width: var(--fs-banner-button-link-min-width);
+    margin-top: var(--fs-banner-button-link-margin-top);
   }
 
   // --------------------------------------------------------

package/src/components/sections/Incentives/Incentives.tsx

@@ -35,7 +35,7 @@ function Incentives({
       data-fs-incentives-variant={variant}
       className={styles.fsIncentives}
     >
-      <UIList variant="unordered" className="layout__content">
+      <UIList className="layout__content">
         {incentives.map((incentive, index) => (
           <li key={String(index)}>
             <UIIncentive>

package/src/components/sections/Newsletter/Newsletter.tsx

@@ -1,12 +1,14 @@
 import type { ComponentPropsWithRef, FormEvent, ReactNode } from 'react'
 import { forwardRef, useRef } from 'react'
-import { Form } from '@faststore/ui'
+import {
+  Form,
+  Button as UIButton,
+  InputField as UIInputField,
+} from '@faststore/ui'
 
 import { useUI } from 'src/sdk/ui/Provider'
 import Icon from 'src/components/ui/Icon'
-import Button from 'src/components/ui/Button'
 import Link from 'src/components/ui/Link'
-import InputText from 'src/components/ui/InputText'
 import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
 
 import Section from '../Section'
@@ -96,7 +98,7 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
           <div data-fs-newsletter-controls>
             {lite ? (
               <>
-                <InputText
+                <UIInputField
                   inputRef={emailInputRef}
                   id="newsletter-email"
                   label="Your Email"
@@ -117,13 +119,13 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
               </>
             ) : (
               <>
-                <InputText
+                <UIInputField
                   inputRef={nameInputRef}
                   id="newsletter-name"
                   label="Your Name"
                   required
                 />
-                <InputText
+                <UIInputField
                   inputRef={emailInputRef}
                   id="newsletter-email"
                   label="Your Email"
@@ -136,9 +138,9 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
                     Privacy Policy.
                   </Link>
                 </span>
-                <Button variant="secondary" inverse type="submit">
+                <UIButton variant="secondary" inverse type="submit">
                   {loading ? 'Loading...' : 'Subscribe'}
-                </Button>
+                </UIButton>
               </>
             )}
           </div>

package/src/components/sections/Newsletter/newsletter.module.scss

@@ -47,7 +47,7 @@
         grid-template-columns: repeat(3, 1fr);
         margin-top: 0;
 
-        [data-fs-input-text] {
+        [data-fs-input-field] {
           grid-column: 1 / span 3;
         }
 

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

@@ -218,7 +218,7 @@ function ProductDetailsContent({
           data-fs-product-details-highlights
           prefixId="product-details-content"
         >
-          <UIList>
+          <UIList marker>
             <li>
               Industry-leading noise canceling with Dual Noise Sensor technology
             </li>

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

@@ -1,13 +1,4 @@
 .fs-product-details-content {
-  // -----------------------------
-  // List
-  // -----------------------------
-
-  [data-fs-product-details-highlights] [data-fs-list="unordered"] {
-    list-style: initial;
-    list-style-position: inside;
-  }
-
   // -----------------------------
   // Table
   // -----------------------------

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

@@ -2,12 +2,14 @@ import { gql } from '@faststore/graphql-utils'
 import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import { useEffect, useState } from 'react'
+import {
+  BuyButton as UIBuyButton,
+  DiscountBadge as UIDiscountBadge,
+} from '@faststore/ui'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import OutOfStock from 'src/components/product/OutOfStock'
-import { DiscountBadge } from 'src/components/ui/Badge'
 import Breadcrumb from 'src/components/ui/Breadcrumb'
-import { ButtonBuy } from 'src/components/ui/Button'
 import { ImageGallery } from 'src/components/ui/ImageGallery'
 import Price from 'src/components/ui/Price'
 import ProductTitle from 'src/components/ui/ProductTitle'
@@ -123,7 +125,11 @@ function ProductDetails({ context: staleProduct }: Props) {
           <ProductTitle
             title={<h1>{name}</h1>}
             label={
-              <DiscountBadge listPrice={listPrice} spotPrice={lowPrice} big />
+              <UIDiscountBadge
+                listPrice={listPrice}
+                spotPrice={lowPrice}
+                size="big"
+              />
             }
             refNumber={productId}
           />
@@ -178,9 +184,9 @@ function ProductDetails({ context: staleProduct }: Props) {
             {isValidating ? (
               <AddToCartLoadingSkeleton />
             ) : (
-              <ButtonBuy disabled={buyDisabled} {...buyProps}>
+              <UIBuyButton disabled={buyDisabled} {...buyProps}>
                 Add to Cart
-              </ButtonBuy>
+              </UIBuyButton>
             )}
             {!availability && (
               <OutOfStock

package/src/components/sections/ProductDetails/product-details.module.scss

@@ -43,7 +43,7 @@
       &:last-of-type { margin-bottom: var(--fs-spacing-7); }
     }
 
-    [data-fs-button-buy] {
+    [data-fs-buy-button] {
       width: 100%;
       margin-top: var(--fs-spacing-3);
     }

package/src/components/sections/ProductGallery/ProductGallery.tsx

@@ -2,13 +2,14 @@ import { useSearch } from '@faststore/sdk'
 import { NextSeo } from 'next-seo'
 import { lazy, Suspense } from 'react'
 import type { MouseEvent } from 'react'
+import { Button as UIButton } from '@faststore/ui'
 
 import Filter from 'src/components/search/Filter'
 import Sort from 'src/components/search/Sort'
 import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGridSkeleton from 'src/components/skeletons/ProductGridSkeleton'
 import Skeleton from 'src/components/skeletons/Skeleton'
-import Button, { ButtonLink } from 'src/components/ui/Button'
+import { ButtonLink } from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 import { mark } from 'src/sdk/tests/mark'
 import { useUI } from 'src/sdk/ui/Provider'
@@ -100,7 +101,7 @@ function ProductGallery({ title, searchTerm }: Props) {
             loading={facets?.length === 0}
             data-fs-product-listing-filter-button-skeleton
           >
-            <Button
+            <UIButton
               variant="tertiary"
               data-testid="open-filter-button"
               icon={<Icon name="FadersHorizontal" width={16} height={16} />}
@@ -109,7 +110,7 @@ function ProductGallery({ title, searchTerm }: Props) {
               onClick={openFilter}
             >
               Filters
-            </Button>
+            </UIButton>
           </Skeleton>
         </div>
 

package/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx

@@ -1,8 +1,9 @@
+import { Button as UIButton } from '@faststore/ui'
+import type { ButtonProps } from '@faststore/ui'
+
 import Icon from 'src/components/ui/Icon'
 
-import Button from '../../ui/Button'
 import Section from '../Section'
-import type { ButtonProps } from '../../ui/Button'
 import styles from './scroll-to-top-button.module.scss'
 
 interface ScrollToTopButtonProps {
@@ -30,14 +31,14 @@ function ScrollToTopButton({
 }: ScrollToTopButtonProps) {
   return (
     <Section className={styles.fsScrollToTopButton}>
-      <Button
+      <UIButton
         variant="secondary"
         icon={icon}
         iconPosition={iconPosition}
         onClick={() => window.scrollTo(0, 0)}
       >
         {text}
-      </Button>
+      </UIButton>
     </Section>
   )
 }

package/src/components/ui/Alert/Alert.tsx

@@ -1,10 +1,13 @@
-import { Alert as UIAlert, Icon as UIIcon } from '@faststore/ui'
+import {
+  Alert as UIAlert,
+  Icon as UIIcon,
+  Button as UIButton,
+} from '@faststore/ui'
 import { useCallback } from 'react'
 import type { ReactNode, MouseEvent } from 'react'
 import type { AlertProps } from '@faststore/ui'
 
 import Link from 'src/components/ui/Link'
-import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
 
 import styles from './alert.module.scss'
@@ -65,11 +68,11 @@ function Alert({
       )}
 
       {dismissible && (
-        <Button data-fs-alert-button aria-label="Close" onClick={handleClose}>
+        <UIButton data-fs-alert-button aria-label="Close" onClick={handleClose}>
           <span>
             <Icon name="X" width={18} height={18} weight="bold" />
           </span>
-        </Button>
+        </UIButton>
       )}
     </UIAlert>
   )