@faststore/core 2.1.16 → 2.1.18

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

@@ -0,0 +1,35 @@
+import {
+  Button as UIButton,
+  InputField as UIInputField,
+  Icon as UIIcon,
+} from '@faststore/ui'
+
+import NewsletterCustomizations from 'src/customizations/components/overrides/Newsletter'
+
+const newsletterComponentsCustomization = {}
+
+const newsletterPropsCustomization = {} as any
+
+Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
+  if (value.Component) {
+    newsletterComponentsCustomization[key] = value.Component
+  }
+})
+
+Object.entries(NewsletterCustomizations.components).forEach(([key, value]) => {
+  if (value.props) {
+    newsletterPropsCustomization[key] = value.props
+  }
+})
+
+const Components = {
+  ToastIconSuccess: UIIcon,
+  ToastIconError: UIIcon,
+  HeaderIcon: UIIcon,
+  InputFieldName: UIInputField,
+  InputFieldEmail: UIInputField,
+  Button: UIButton,
+  ...newsletterComponentsCustomization,
+}
+
+export { Components, newsletterPropsCustomization as Props }

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

@@ -1,4 +1,6 @@
 .section {
+  margin-bottom: 0;
+
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
   @import "@faststore/ui/src/components/atoms/Input/styles.scss";

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

@@ -161,11 +161,9 @@ function ProductDetails({
   ])
 
   return (
-    <Section
-      className={`${styles.section} section-product-details layout__content layout__section`}
-    >
+    <Section className={`${styles.section} section-product-details`}>
       <section data-fs-product-details>
-        <section data-fs-product-details-body>
+        <section data-fs-product-details-body data-fs-content="product-details">
           <header data-fs-product-details-title data-fs-product-details-section>
             <ProductTitle
               // TODO: We should review this prop. There's now way to override the title and use the dynamic name value.

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

@@ -47,9 +47,7 @@ function ProductGallerySection({
 
   if (productGalleryData && totalCount === 0) {
     return (
-      <Section
-        className={`${styles.section} section-product-gallery layout__content`}
-      >
+      <Section className={`${styles.section} section-product-gallery`}>
         <section data-testid="product-gallery" data-fs-product-listing>
           <EmptyGallery />
         </section>
@@ -59,7 +57,7 @@ function ProductGallerySection({
 
   return (
     <Section
-      className={`${styles.section} section-product-gallery layout__content-full`}
+      className={`${styles.section} section-product-gallery layout__section`}
     >
       <ProductGallery
         title={title}

package/src/components/sections/ProductGallery/section.module.scss

@@ -1,4 +1,17 @@
 .section {
+  @include media("<notebook") {
+    margin-top: 0;
+    &:last-child { margin-bottom: 0; }
+
+    @include section-divisor(bottom, 0);
+  }
+
+  @include media(">=notebook") {
+    &:not(:last-child) {
+      @include section-divisor(bottom);
+    }
+  }
+
   @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";

package/src/components/sections/ProductShelf/section.module.scss

@@ -1,10 +1,15 @@
 .section {
+
+  [data-fs-content="product-shelf"] { @include layout-content-full; }
+
   [data-fs-product-shelf-skeleton] {
     --fs-carousel-item-width-tablet    : 14.2rem;
     --fs-carousel-item-margin-right    : var(--fs-spacing-3);
 
     padding-bottom: var(--fs-spacing-5);
 
+    [data-fs-product-shelf-items] { @include layout-content; }
+
     @include media("<tablet") {
       [data-fs-product-shelf-item] {
         &:not(:last-of-type) {

package/src/components/sections/ProductTiles/ProductTiles.tsx

@@ -80,28 +80,26 @@ const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
 
   return (
     <Section
-      className={`${styles.section} section-product-tiles layout__section layout__content`}
+      className={`${styles.section} section-product-tiles layout__section`}
       ref={ref}
     >
-      <h2 className="text__title-section">{title}</h2>
-      <div>
-        <ProductTilesSkeleton loading={!products}>
-          <Tiles>
-            {productEdges.map((product, idx) => (
-              <Tile key={product.node.id}>
-                <ProductCard
-                  data-testid="tile-card"
-                  product={product.node}
-                  index={idx + 1}
-                  variant="wide"
-                  aspectRatio={getRatio(productEdges.length, idx)}
-                  imgProps={getSizes(productEdges.length, idx)}
-                />
-              </Tile>
-            ))}
-          </Tiles>
-        </ProductTilesSkeleton>
-      </div>
+      <h2 className="text__title-section layout__content">{title}</h2>
+      <ProductTilesSkeleton loading={!products}>
+        <Tiles>
+          {productEdges.map((product, idx) => (
+            <Tile key={product.node.id}>
+              <ProductCard
+                data-testid="tile-card"
+                product={product.node}
+                index={idx + 1}
+                variant="wide"
+                aspectRatio={getRatio(productEdges.length, idx)}
+                imgProps={getSizes(productEdges.length, idx)}
+              />
+            </Tile>
+          ))}
+        </Tiles>
+      </ProductTilesSkeleton>
     </Section>
   )
 }

package/src/components/sections/RegionBar/Overrides.tsx

@@ -0,0 +1,28 @@
+import { RegionBar as UIRegionBar, Icon as UIIcon } from '@faststore/ui'
+
+import RegionBarCustomizations from 'src/customizations/components/overrides/RegionBar'
+
+const regionBarComponentsCustomization = {}
+
+const regionBarPropsCustomization = {} as any
+
+Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
+  if (value.Component) {
+    regionBarComponentsCustomization[key] = value.Component
+  }
+})
+
+Object.entries(RegionBarCustomizations.components).forEach(([key, value]) => {
+  if (value.props) {
+    regionBarPropsCustomization[key] = value.props
+  }
+})
+
+const Components = {
+  RegionBar: UIRegionBar,
+  LocationIcon: UIIcon,
+  ButtonIcon: UIIcon,
+  ...regionBarComponentsCustomization,
+}
+
+export { Components, regionBarPropsCustomization as Props }

package/src/components/sections/Section/section.scss

@@ -5,3 +5,11 @@
     margin-bottom: var(--fs-spacing-3);
   }
 }
+
+//  TODO: Consider removing this and use the divisor mixins
+.section__divisor {
+  padding-top: var(--fs-spacing-5);
+  border-top: var(--fs-border-width) solid var(--fs-border-color-light);
+
+  @include media(">=notebook") { padding-top: var(--fs-spacing-8); }
+}

package/src/components/skeletons/ProductShelfSkeleton/ProductShelfSkeleton.tsx

@@ -22,7 +22,7 @@ function ProductShelfSkeleton({
 }: PropsWithChildren<Props>) {
   return loading ? (
     <UIProductShelf data-fs-product-shelf-skeleton>
-      <ProductShelfItems className="layout__content">
+      <ProductShelfItems>
         {Array.from({ length: ITEMS_PER_SECTION }, (_, index) => (
           <ProductShelfItem key={String(index)}>
             <ProductCardSkeleton aspectRatio={aspectRatio} sectioned bordered />

package/src/components/ui/Incentives/Incentives.tsx

@@ -35,7 +35,7 @@ function Incentives({
       data-fs-incentives-colored={colored}
       data-fs-incentives-variant={variant}
     >
-      <UIList className="layout__content">
+      <UIList data-fs-content="incentives">
         {incentives.map((incentive, index) => (
           <li role="listitem" key={String(index)}>
             <UIIncentive tabIndex={0}>

package/src/components/ui/Newsletter/Newsletter.tsx

@@ -1,11 +1,21 @@
-import { Button as UIButton, InputField as UIInputField } from '@faststore/ui'
 import { ComponentPropsWithRef, FormEvent, useMemo } from 'react'
 import { forwardRef, useRef } from 'react'
 import { convertFromRaw } from 'draft-js'
 import { stateToHTML } from 'draft-js-export-html'
-import { Icon, useUI } from '@faststore/ui'
+import { useUI } from '@faststore/ui'
 import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
 
+import { Components, Props } from 'src/components/sections/Newsletter/Overrides'
+
+const {
+  ToastIconSuccess,
+  ToastIconError,
+  HeaderIcon,
+  InputFieldEmail,
+  InputFieldName,
+  Button,
+} = Components
+
 const cmsToHtml = (content) => {
   if (!content) {
     return ''
@@ -135,14 +145,26 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
         pushToast({
           ...toastSubscribe,
           status: 'INFO',
-          icon: <Icon name={toastSubscribe?.icon} width={30} height={30} />,
+          icon: (
+            <ToastIconSuccess
+              width={30}
+              height={30}
+              {...Props['ToastIconSuccess']}
+              name={toastSubscribe.icon ?? Props['ToastIconSuccess'].name}
+            />
+          ),
         })
       } else {
         pushToast({
           ...toastSubscribeError,
           status: 'ERROR',
           icon: (
-            <Icon name={toastSubscribeError?.icon} width={30} height={30} />
+            <ToastIconError
+              width={30}
+              height={30}
+              {...Props['ToastIconError']}
+              name={toastSubscribe.icon ?? Props['ToastIconError'].name}
+            />
           ),
         })
       }
@@ -157,70 +179,60 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
         <form
           ref={ref}
           data-fs-newsletter-form
+          data-fs-content="newsletter"
           onSubmit={handleSubmit}
-          className="layout__content"
         >
           <header data-fs-newsletter-header>
             <h3>
-              <Icon name={icon?.icon} width={32} height={32} />
+              <HeaderIcon
+                width={32}
+                height={32}
+                {...Props['HeaderIcon']}
+                name={icon?.icon ?? Props['HeaderIcon'].name}
+              />
               {title}
             </h3>
             {description && <span> {description}</span>}
           </header>
 
           <div data-fs-newsletter-controls>
-            {displayNameInput ? (
-              <>
-                <UIInputField
-                  required
+            <>
+              {displayNameInput ? (
+                <InputFieldName
                   id="newsletter-name"
-                  label={nameInputLabel}
-                  inputRef={nameInputRef}
-                />
-                <UIInputField
-                  required
-                  type="email"
-                  id="newsletter-email"
-                  label={emailInputLabel}
-                  inputRef={emailInputRef}
-                />
-                <span
-                  data-fs-newsletter-addendum
-                  dangerouslySetInnerHTML={{
-                    __html: cmsToHtml(privacyPolicy),
-                  }}
-                />
-                <UIButton
-                  variant="secondary"
-                  inverse
-                  type="submit"
-                  aria-label={subscriptionButtonLabel}
-                >
-                  {subscriptionButtonLabel}
-                </UIButton>
-              </>
-            ) : (
-              <>
-                <UIInputField
                   required
-                  actionable
-                  type="email"
-                  id="newsletter-email"
-                  label={emailInputLabel}
-                  inputRef={emailInputRef}
-                  onClear={() => null}
-                  onSubmit={() => null}
-                  displayClearButton={false}
-                  buttonActionText={subscriptionButtonLabel}
-                />
-                <span
-                  data-fs-newsletter-addendum
-                  dangerouslySetInnerHTML={{
-                    __html: cmsToHtml(privacyPolicy),
-                  }}
+                  {...Props['InputFieldName']}
+                  label={nameInputLabel ?? Props['InputFieldName'].label}
+                  // Dynamic props shouldn't be overridable
+                  // This decision can be reviewed later if needed
+                  inputRef={nameInputRef}
                 />
-              </>
-            )}
+              ) : null}
+              <InputFieldEmail
+                id="newsletter-email"
+                type="email"
+                required
+                {...Props['InputFieldEmail']}
+                label={emailInputLabel ?? Props['InputFieldEmail'].label}
+                // Dynamic props shouldn't be overridable
+                // This decision can be reviewed later if needed
+                inputRef={emailInputRef}
+              />
+              <span
+                data-fs-newsletter-addendum
+                dangerouslySetInnerHTML={{
+                  __html: cmsToHtml(privacyPolicy),
+                }}
+              ></span>
+              <Button
+                variant="secondary"
+                inverse
+                type="submit"
+                {...Props['Button']}
+              >
+                {loading ? subscribeButtonLoadingLabel : subscribeButtonLabel}
+              </Button>
+            </>
           </div>
         </form>
       </div>

package/src/components/ui/ProductGallery/ProductGallery.tsx

@@ -95,13 +95,16 @@ function ProductGallery({
   return (
     <section data-testid="product-gallery" data-fs-product-listing>
       {searchTerm && (
-        <header data-fs-product-listing-search-term className="layout__content">
+        <header data-fs-product-listing-search-term>
           <h1>
             {searchTermLabel} <span>{searchTerm}</span>
           </h1>
         </header>
       )}
-      <div data-fs-product-listing-content-grid className="layout__content">
+      <div
+        data-fs-product-listing-content-grid
+        data-fs-content="product-gallery"
+      >
         <div data-fs-product-listing-filters>
           <FilterSkeleton loading={facets?.length === 0}>
             <Filter facets={facets} filter={filter} />

package/src/customizations/components/overrides/Alert.tsx

@@ -0,0 +1,15 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'Alert' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    Alert: { props: {} },
+    Icon: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/EmptyState.tsx

@@ -0,0 +1,13 @@
+// This is an example of how it can be used on the starter.
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'EmptyState' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    EmptyState: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/Newsletter.tsx

@@ -0,0 +1,19 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'Newsletter' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    ToastIconSuccess: { props: {} },
+    ToastIconError: { props: {} },
+    HeaderIcon: { props: {} },
+    InputFieldName: { props: {} },
+    InputFieldEmail: { props: {} },
+    Button: { props: {} },
+  },
+}
+
+export default overrides

package/src/customizations/components/overrides/RegionBar.tsx

@@ -0,0 +1,16 @@
+// This is an example of how it can be used on the starter.
+
+import { SectionOverride } from 'src/typings/overrides'
+
+const SECTION = 'RegionBar' as const
+
+const overrides: SectionOverride[typeof SECTION] = {
+  name: SECTION,
+  components: {
+    RegionBar: { props: {} },
+    LocationIcon: { props: {} },
+    ButtonIcon: { props: {} },
+  },
+}
+
+export default overrides

package/src/styles/global/components.scss

@@ -2,9 +2,3 @@
 @import "@faststore/ui/src/components/atoms/Overlay/styles.scss";
 @import "@faststore/ui/src/components/atoms/SROnly/styles.scss";
 @import "src/components/sections/Section/section.scss";
-
-.section-navbar {
-  position: sticky;
-  top: 0;
-  z-index: var(--fs-z-index-high);
-}

package/src/typings/overrides.d.ts

@@ -62,6 +62,25 @@ export const SECTIONS = {
       '__experimentalProductCard',
     ],
   },
+  Alert: {
+    components: ['Alert', 'Icon'],
+  },
+  EmptyState: {
+    components: ['EmptyState'],
+  },
+  RegionBar: {
+    components: ['RegionBar', 'LocationIcon', 'ButtonIcon'],
+  },
+  Newsletter: {
+    components: [
+      'ToastIconSuccess',
+      'ToastIconError',
+      'HeaderIcon',
+      'InputFieldName',
+      'InputFieldEmail',
+      'Button',
+    ],
+  },
 } as const
 
 // export type ComponentOrProps =