@faststore/core 2.0.121-alpha.0 → 2.0.122-alpha.0

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

@@ -7,7 +7,7 @@ import Link from 'src/components/ui/Link'
 import { useNewsletter } from 'src/sdk/newsletter/useNewsletter'
 
 import Section from '../Section'
-import styles from './newsletter.module.scss'
+import styles from './section.module.scss'
 
 export interface NewsletterProps
   extends Omit<ComponentPropsWithRef<'form'>, 'title' | 'onSubmit'> {
@@ -71,75 +71,74 @@ const Newsletter = forwardRef<HTMLFormElement, NewsletterProps>(
     }
 
     return (
-      <Section
-        data-fs-newsletter={card ? 'card' : ''}
-        className={`layout__section ${styles.fsNewsletter}`}
-      >
-        <form
-          data-fs-newsletter-form
-          ref={ref}
-          onSubmit={handleSubmit}
-          {...otherProps}
-          className="layout__content"
-        >
-          <header data-fs-newsletter-header>
-            <h3>
-              <Icon name="Envelop" width={32} height={32} />
-              {title}
-            </h3>
-            {description && <span> {description}</span>}
-          </header>
+      <Section className={`${styles.section} section-newsletter`}>
+        <div data-fs-newsletter={card ? 'card' : ''}>
+          <form
+            data-fs-newsletter-form
+            ref={ref}
+            onSubmit={handleSubmit}
+            {...otherProps}
+            className="layout__content"
+          >
+            <header data-fs-newsletter-header>
+              <h3>
+                <Icon name="Envelop" width={32} height={32} />
+                {title}
+              </h3>
+              {description && <span> {description}</span>}
+            </header>
 
-          <div data-fs-newsletter-controls>
-            {lite ? (
-              <>
-                <UIInputField
-                  inputRef={emailInputRef}
-                  id="newsletter-email"
-                  label="Your Email"
-                  type="email"
-                  required
-                  actionable
-                  onSubmit={() => undefined}
-                  onClear={() => undefined}
-                  buttonActionText="Subscribe"
-                  displayClearButton={false}
-                />
-                <span data-fs-newsletter-addendum>
-                  By subscribing to our newsletter you agree to to our{' '}
-                  <Link href="/" inverse variant="inline">
-                    Privacy Policy.
-                  </Link>
-                </span>
-              </>
-            ) : (
-              <>
-                <UIInputField
-                  inputRef={nameInputRef}
-                  id="newsletter-name"
-                  label="Your Name"
-                  required
-                />
-                <UIInputField
-                  inputRef={emailInputRef}
-                  id="newsletter-email"
-                  label="Your Email"
-                  type="email"
-                  required
-                />
-                <span data-fs-newsletter-addendum>
-                  By subscribing to our newsletter you agree to to our{' '}
-                  <Link href="/" inverse variant="inline">
-                    Privacy Policy.
-                  </Link>
-                </span>
-                <UIButton variant="secondary" inverse type="submit">
-                  {loading ? 'Loading...' : 'Subscribe'}
-                </UIButton>
-              </>
-            )}
-          </div>
-        </form>
+            <div data-fs-newsletter-controls>
+              {lite ? (
+                <>
+                  <UIInputField
+                    inputRef={emailInputRef}
+                    id="newsletter-email"
+                    label="Your Email"
+                    type="email"
+                    required
+                    actionable
+                    onSubmit={() => undefined}
+                    onClear={() => undefined}
+                    buttonActionText="Subscribe"
+                    displayClearButton={false}
+                  />
+                  <span data-fs-newsletter-addendum>
+                    By subscribing to our newsletter you agree to to our{' '}
+                    <Link href="/" inverse variant="inline">
+                      Privacy Policy.
+                    </Link>
+                  </span>
+                </>
+              ) : (
+                <>
+                  <UIInputField
+                    inputRef={nameInputRef}
+                    id="newsletter-name"
+                    label="Your Name"
+                    required
+                  />
+                  <UIInputField
+                    inputRef={emailInputRef}
+                    id="newsletter-email"
+                    label="Your Email"
+                    type="email"
+                    required
+                  />
+                  <span data-fs-newsletter-addendum>
+                    By subscribing to our newsletter you agree to to our{' '}
+                    <Link href="/" inverse variant="inline">
+                      Privacy Policy.
+                    </Link>
+                  </span>
+                  <UIButton variant="secondary" inverse type="submit">
+                    {loading ? 'Loading...' : 'Subscribe'}
+                  </UIButton>
+                </>
+              )}
+            </div>
+          </form>
+        </div>
       </Section>
     )
   }

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

@@ -0,0 +1,11 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @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";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Newsletter/styles.scss";
+}

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

@@ -12,8 +12,6 @@ import {
 } from '@faststore/ui'
 import { useState } from 'react'
 
-import Section from '../Section'
-
 interface ArticleLabels {
   /**
    * Label for the "description" article.
@@ -100,7 +98,7 @@ function ProductDetailsContent({
   const labels = { ...DEFAULT_LABELS, ...propLabels }
 
   return (
-    <Section data-fs-product-details-content>
+    <section data-fs-product-details-content>
       <UIAccordion
         indices={indices}
         onChange={onChange}
@@ -275,7 +273,7 @@ function ProductDetailsContent({
           </UIAccordionPanel>
         </UIAccordionItem>
       </UIAccordion>
-    </Section>
+    </section>
   )
 }
 

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

@@ -1,14 +1,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,
-  QuantitySelector as UIQuantitySelector,
-  ProductTitle as UIProductTitle,
   Price as UIPrice,
+  ProductTitle as UIProductTitle,
+  QuantitySelector as UIQuantitySelector,
 } from '@faststore/ui'
+import { useEffect, useState } from 'react'
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import OutOfStock from 'src/components/product/OutOfStock'
@@ -24,7 +24,7 @@ import { useSession } from 'src/sdk/session'
 
 import ProductDetailsContent from '../ProducDetailsContent'
 import Section from '../Section'
-import styles from './product-details.module.scss'
+import styles from './section.module.scss'
 
 interface Props {
   context: ProductDetailsFragment_ProductFragment
@@ -166,49 +166,50 @@ function ProductDetails({ context: staleProduct }: Props) {
 
   return (
     <Section
-      className={`${styles.fsProductDetails} layout__content layout__section`}
+      className={`${styles.section} section-product-details layout__content layout__section`}
     >
-      <Breadcrumb breadcrumbList={breadcrumbs.itemListElement} />
-
-      <section data-fs-product-details-body>
-        <header data-fs-product-details-title data-fs-product-details-section>
-          <UIProductTitle
-            title={<h1>{name}</h1>}
-            label={
-              <UIDiscountBadge
-                listPrice={listPrice}
-                spotPrice={lowPrice}
-                size="big"
-              />
-            }
-            refNumber={productId}
+      <section data-fs-product-details>
+        <Breadcrumb breadcrumbList={breadcrumbs.itemListElement} />
+        <section data-fs-product-details-body>
+          <header data-fs-product-details-title data-fs-product-details-section>
+            <UIProductTitle
+              title={<h1>{name}</h1>}
+              label={
+                <UIDiscountBadge
+                  listPrice={listPrice}
+                  spotPrice={lowPrice}
+                  size="big"
+                />
+              }
+              refNumber={productId}
+            />
+          </header>
+          <ImageGallery
+            data-fs-product-details-gallery
+            images={productImages}
           />
-        </header>
-
-        <ImageGallery data-fs-product-details-gallery images={productImages} />
-
-        <section data-fs-product-details-info>
-          <section
-            data-fs-product-details-settings
-            data-fs-product-details-section
-          >
-            {availability ? <ProductDetailsSection /> : <OutOfStock />}
-          </section>
-          {availability && (
-            <ShippingSimulation
+          <section data-fs-product-details-info>
+            <section
+              data-fs-product-details-settings
               data-fs-product-details-section
-              data-fs-product-details-shipping
-              productShippingInfo={{
-                id,
-                quantity: addQuantity,
-                seller: seller.identifier,
-              }}
-              formatter={useFormattedPrice}
-            />
-          )}
+            >
+              {availability ? <ProductDetailsSection /> : <OutOfStock />}
+            </section>
+            {availability && (
+              <ShippingSimulation
+                data-fs-product-details-section
+                data-fs-product-details-shipping
+                productShippingInfo={{
+                  id,
+                  quantity: addQuantity,
+                  seller: seller.identifier,
+                }}
+                formatter={useFormattedPrice}
+              />
+            )}
+          </section>
+          <ProductDetailsContent />
         </section>
-
-        <ProductDetailsContent />
       </section>
     </Section>
   )

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

@@ -0,0 +1,27 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  margin-top: 0;
+
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Breadcrumb/styles.scss";
+  @import "@faststore/ui/src/components/molecules/BuyButton/styles.scss";
+  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
+  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
+  @import "@faststore/ui/src/components/molecules/ProductTitle/styles.scss";
+  @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
+  @import "@faststore/ui/src/components/molecules/SkuSelector/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Table/styles.scss";
+  @import "@faststore/ui/src/components/organisms/ShippingSimulation/styles.scss";
+  @import "@faststore/ui/src/components/organisms/ImageGallery/styles.scss";
+  @import "@faststore/ui/src/components/organisms/ProductDetails/styles.scss";
+}

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

@@ -6,7 +6,7 @@ import {
 } from '@faststore/ui'
 import { NextSeo } from 'next-seo'
 import type { MouseEvent } from 'react'
-import { lazy, Suspense } from 'react'
+import { Suspense, lazy } from 'react'
 
 import { Icon, useUI } from '@faststore/ui'
 import Filter from 'src/components/search/Filter'
@@ -17,7 +17,7 @@ import { mark } from 'src/sdk/tests/mark'
 
 import Section from '../Section'
 import EmptyGallery from './EmptyGallery'
-import styles from './product-gallery.module.scss'
+import styles from './section.module.scss'
 import { useDelayedFacets } from './useDelayedFacets'
 import { useDelayedPagination } from './useDelayedPagination'
 import { useGalleryQuery } from './useGalleryQuery'
@@ -46,137 +46,139 @@ function ProductGallery({ title, searchTerm }: Props) {
   if (data && totalCount === 0) {
     return (
       <Section
-        data-testid="product-gallery"
-        className={`${styles.fsProductListing} layout__content`}
-        data-fs-product-listing
+        className={`${styles.section} section-product-gallery layout__content`}
       >
-        <EmptyGallery />
+        <section data-testid="product-gallery" data-fs-product-listing>
+          <EmptyGallery />
+        </section>
       </Section>
     )
   }
 
   return (
     <Section
-      data-testid="product-gallery"
-      className={`${styles.fsProductListing} layout__content-full`}
-      data-fs-product-listing
+      className={`${styles.section} section-product-gallery layout__content-full`}
     >
-      {searchTerm && (
-        <header data-fs-product-listing-search-term className="layout__content">
-          <h1>
-            Showing results for: <span>{searchTerm}</span>
-          </h1>
-        </header>
-      )}
-      <div data-fs-product-listing-content-grid className="layout__content">
-        <div data-fs-product-listing-filters>
-          <FilterSkeleton loading={facets?.length === 0}>
-            <Filter facets={facets} />
-          </FilterSkeleton>
-        </div>
-
-        <div data-fs-product-listing-results-count data-count={totalCount}>
-          <UISkeleton
-            data-fs-product-listing-results-count-skeleton
-            loading={!data}
-            size={{ width: '100%', height: '1.5rem' }}
-          >
-            <h2 data-testid="total-product-count">{totalCount} Results</h2>
-          </UISkeleton>
-        </div>
-
-        <div data-fs-product-listing-sort>
-          <UISkeleton
-            data-fs-product-listing-sort-skeleton
-            loading={facets?.length === 0}
-            size={{ width: 'auto', height: '1.5rem' }}
-          >
-            <Sort />
-          </UISkeleton>
-
-          <UISkeleton
-            data-fs-product-listing-filter-button-skeleton
-            loading={facets?.length === 0}
-            size={{ width: '6rem', height: '1.5rem' }}
+      <section data-testid="product-gallery" data-fs-product-listing>
+        {searchTerm && (
+          <header
+            data-fs-product-listing-search-term
+            className="layout__content"
           >
-            <UIButton
-              variant="tertiary"
-              data-testid="open-filter-button"
-              icon={<Icon name="FadersHorizontal" width={16} height={16} />}
-              iconPosition="left"
-              aria-label="Open Filters"
-              onClick={openFilter}
+            <h1>
+              Showing results for: <span>{searchTerm}</span>
+            </h1>
+          </header>
+        )}
+        <div data-fs-product-listing-content-grid className="layout__content">
+          <div data-fs-product-listing-filters>
+            <FilterSkeleton loading={facets?.length === 0}>
+              <Filter facets={facets} />
+            </FilterSkeleton>
+          </div>
+          <div data-fs-product-listing-results-count data-count={totalCount}>
+            <UISkeleton
+              data-fs-product-listing-results-count-skeleton
+              loading={!data}
+              size={{ width: '100%', height: '1.5rem' }}
             >
-              Filters
-            </UIButton>
-          </UISkeleton>
-        </div>
-
-        <div data-fs-product-listing-results>
-          {/* Add link to previous page. This helps on SEO */}
-          {prev !== false && (
-            <div data-fs-product-listing-pagination="top">
-              <NextSeo
-                additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
-              />
-              <UILinkButton
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  e.currentTarget.blur()
-                  e.preventDefault()
-                  addPrevPage()
-                }}
-                href={prev.link}
-                rel="prev"
-                variant="secondary"
+              <h2 data-testid="total-product-count">{totalCount} Results</h2>
+            </UISkeleton>
+          </div>
+          <div data-fs-product-listing-sort>
+            <UISkeleton
+              data-fs-product-listing-sort-skeleton
+              loading={facets?.length === 0}
+              size={{ width: 'auto', height: '1.5rem' }}
+            >
+              <Sort />
+            </UISkeleton>
+            <UISkeleton
+              data-fs-product-listing-filter-button-skeleton
+              loading={facets?.length === 0}
+              size={{ width: '6rem', height: '1.5rem' }}
+            >
+              <UIButton
+                variant="tertiary"
+                data-testid="open-filter-button"
+                icon={<Icon name="FadersHorizontal" width={16} height={16} />}
                 iconPosition="left"
-                icon={
-                  <Icon name="ArrowLeft" width={16} height={16} weight="bold" />
-                }
+                aria-label="Open Filters"
+                onClick={openFilter}
               >
-                Previous Page
-              </UILinkButton>
-            </div>
-          )}
-
-          {/* Render ALL products */}
-          {data ? (
-            <Suspense fallback={GalleryPageSkeleton}>
-              {pages.map((page) => (
-                <GalleryPage
-                  key={`gallery-page-${page}`}
-                  showSponsoredProducts={false}
-                  page={page}
-                  title={title}
+                Filters
+              </UIButton>
+            </UISkeleton>
+          </div>
+          <div data-fs-product-listing-results>
+            {/* Add link to previous page. This helps on SEO */}
+            {prev !== false && (
+              <div data-fs-product-listing-pagination="top">
+                <NextSeo
+                  additionalLinkTags={[{ rel: 'prev', href: prev.link }]}
                 />
-              ))}
-            </Suspense>
-          ) : (
-            GalleryPageSkeleton
-          )}
-
-          {/* Add link to next page. This helps on SEO */}
-          {next !== false && (
-            <div data-fs-product-listing-pagination="bottom">
-              <NextSeo
-                additionalLinkTags={[{ rel: 'next', href: next.link }]}
-              />
-              <UILinkButton
-                testId="show-more"
-                onClick={(e: MouseEvent<HTMLElement>) => {
-                  e.currentTarget.blur()
-                  e.preventDefault()
-                  addNextPage()
-                }}
-                href={next.link}
-                rel="next"
-                variant="secondary"
-              >
-                Load more products
-              </UILinkButton>
-            </div>
-          )}
+                <UILinkButton
+                  onClick={(e: MouseEvent<HTMLElement>) => {
+                    e.currentTarget.blur()
+                    e.preventDefault()
+                    addPrevPage()
+                  }}
+                  href={prev.link}
+                  rel="prev"
+                  variant="secondary"
+                  iconPosition="left"
+                  icon={
+                    <Icon
+                      name="ArrowLeft"
+                      width={16}
+                      height={16}
+                      weight="bold"
+                    />
+                  }
+                >
+                  Previous Page
+                </UILinkButton>
+              </div>
+            )}
+            {/* Render ALL products */}
+            {data ? (
+              <Suspense fallback={GalleryPageSkeleton}>
+                {pages.map((page) => (
+                  <GalleryPage
+                    key={`gallery-page-${page}`}
+                    showSponsoredProducts={false}
+                    page={page}
+                    title={title}
+                  />
+                ))}
+              </Suspense>
+            ) : (
+              GalleryPageSkeleton
+            )}
+            {/* Add link to next page. This helps on SEO */}
+            {next !== false && (
+              <div data-fs-product-listing-pagination="bottom">
+                <NextSeo
+                  additionalLinkTags={[{ rel: 'next', href: next.link }]}
+                />
+                <UILinkButton
+                  testId="show-more"
+                  onClick={(e: MouseEvent<HTMLElement>) => {
+                    e.currentTarget.blur()
+                    e.preventDefault()
+                    addNextPage()
+                  }}
+                  href={next.link}
+                  rel="next"
+                  variant="secondary"
+                >
+                  Load more products
+                </UILinkButton>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
+      </section>
     </Section>
   )
 }

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

@@ -0,0 +1,28 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @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";
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Input/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Select/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Skeleton/styles";
+  @import "@faststore/ui/src/components/atoms/Slider/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles.scss";
+  @import "@faststore/ui/src/components/molecules/InputField/styles.scss";
+  @import "@faststore/ui/src/components/molecules/ProductCard/styles.scss";
+  @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
+  @import "@faststore/ui/src/components/molecules/SelectField/styles.scss";
+  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Filter/styles.scss";
+  @import "@faststore/ui/src/components/organisms/FilterSkeleton/styles.scss";
+  @import "@faststore/ui/src/components/organisms/PriceRange/styles.scss";
+  @import "@faststore/ui/src/components/organisms/ProductGrid/styles.scss";
+  @import "@faststore/ui/src/components/organisms/ProductGallery/styles.scss";
+}