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

package/src/components/sections/ProductShelf/ProductShelf.tsx

@@ -2,19 +2,21 @@ import { useEffect, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
 import {
-  ProductShelf as UIProductShelf,
   ProductShelfItem,
   ProductShelfItems,
+  ProductShelf as UIProductShelf,
 } from '@faststore/ui'
 
-import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
+import type { ProductsQueryQueryVariables } from '@generated/graphql'
 import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
+import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
 import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
-import type { ProductsQueryQueryVariables } from '@generated/graphql'
 
 import ProductCard from '../../product/ProductCard'
 import Section from '../Section'
 
+import styles from './section.module.scss'
+
 interface ProductShelfProps extends Partial<ProductsQueryQueryVariables> {
   title: string
   withDivisor?: boolean
@@ -52,7 +54,9 @@ function ProductShelf({
 
   return (
     <Section
-      className={`layout__section ${withDivisor ? 'section__divisor' : ''}`}
+      className={`${styles.section} section-product-shelf layout__section ${
+        withDivisor ? 'section__divisor' : ''
+      }`}
       ref={ref}
     >
       <h2 className="text__title-section layout__content">{title}</h2>

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

@@ -0,0 +1,17 @@
+/* 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";
+  @import "@faststore/ui/src/components/atoms/Button/styles";
+  @import "@faststore/ui/src/components/atoms/Icon/styles";
+  @import "@faststore/ui/src/components/atoms/Link/styles";
+  @import "@faststore/ui/src/components/atoms/Price/styles";
+  @import "@faststore/ui/src/components/atoms/SROnly/styles";
+  @import "@faststore/ui/src/components/atoms/Skeleton/styles";
+  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
+  @import "@faststore/ui/src/components/molecules/Rating/styles";
+  @import "@faststore/ui/src/components/molecules/ProductCard/styles";
+  @import "@faststore/ui/src/components/molecules/ProductCardSkeleton/styles";
+  @import "@faststore/ui/src/components/organisms/ProductShelf/styles";
+}

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

@@ -1,15 +1,17 @@
 import { useEffect, useRef } from 'react'
 import { useInView } from 'react-intersection-observer'
 
-import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
-import Tiles, { Tile } from 'src/components/ui/Tiles'
+import type { ProductsQueryQueryVariables } from '@generated/graphql'
 import ProductCard from 'src/components/product/ProductCard'
 import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
+import Tiles, { Tile } from 'src/components/ui/Tiles'
+import { useViewItemListEvent } from 'src/sdk/analytics/hooks/useViewItemListEvent'
 import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
-import type { ProductsQueryQueryVariables } from '@generated/graphql'
 
 import Section from '../Section'
 
+import styles from './section.module.scss'
+
 interface ProductTilesProps extends Partial<ProductsQueryQueryVariables> {
   title: string
 }
@@ -57,7 +59,10 @@ const ProductTiles = ({ title, ...variables }: ProductTilesProps) => {
   }
 
   return (
-    <Section className="layout__section layout__content" ref={ref}>
+    <Section
+      className={`${styles.section} section-product-tiles layout__section layout__content`}
+      ref={ref}
+    >
       <h2 className="text__title-section">{title}</h2>
       <div>
         <ProductTilesSkeleton loading={!products}>

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

@@ -0,0 +1,17 @@
+/* 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";
+  @import "@faststore/ui/src/components/atoms/Button/styles";
+  @import "@faststore/ui/src/components/atoms/Icon/styles";
+  @import "@faststore/ui/src/components/atoms/Link/styles";
+  @import "@faststore/ui/src/components/atoms/Price/styles";
+  @import "@faststore/ui/src/components/atoms/Skeleton/styles";
+  @import "@faststore/ui/src/components/atoms/SROnly/styles";
+  @import "@faststore/ui/src/components/molecules/DiscountBadge/styles";
+  @import "@faststore/ui/src/components/molecules/Rating/styles";
+  @import "@faststore/ui/src/components/molecules/ProductTile/styles";
+  @import "@faststore/ui/src/components/molecules/ProductCard/styles";
+  @import "@faststore/ui/src/components/organisms/Tiles/styles";
+}

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

@@ -1,8 +1,8 @@
 import type { ButtonProps } from '@faststore/ui'
-import { Button as UIButton, Icon } from '@faststore/ui'
+import { Icon, Button as UIButton } from '@faststore/ui'
 
 import Section from '../Section'
-import styles from './scroll-to-top-button.module.scss'
+import styles from './section.module.scss'
 
 interface ScrollToTopButtonProps {
   /**
@@ -28,7 +28,7 @@ function ScrollToTopButton({
   iconPosition = 'left',
 }: ScrollToTopButtonProps) {
   return (
-    <Section className={styles.fsScrollToTopButton}>
+    <Section className={`${styles.section} section-scroll-to-top-button`}>
       <UIButton
         variant="secondary"
         icon={icon}

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

@@ -0,0 +1,11 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  display: flex;
+  justify-content: center;
+  padding-bottom: var(--fs-spacing-8);
+
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+}

package/src/components/skeletons/FilterSkeleton/FilterSkeleton.tsx

@@ -1,7 +1,6 @@
 import type { PropsWithChildren } from 'react'
 
 import { Skeleton as UISkeleton } from '@faststore/ui'
-import styles from './filter-skeleton.module.scss'
 interface FilterSkeletonProps {
   /**
    * Control whether skeleton should be visible or not.
@@ -14,7 +13,7 @@ function FilterSkeleton({
   loading = true,
 }: PropsWithChildren<FilterSkeletonProps>) {
   return loading ? (
-    <div className={styles.fsFilterSkeleton} data-fs-filter-skeleton>
+    <div data-fs-filter-skeleton>
       <UISkeleton
         data-fs-filter-skeleton-text
         size={{ width: '100%', height: '1.5rem' }}

package/src/components/skeletons/ProductCardSkeleton/ProductCardSkeleton.tsx

@@ -1,7 +1,5 @@
 import { Skeleton as UISkeleton } from '@faststore/ui'
 
-import styles from './product-card-skeleton.module.scss'
-
 interface ProductCardSkeletonProps {
   /**
    * Specifies if the component should have a preset border.
@@ -34,7 +32,6 @@ function ProductCardSkeleton({
 }: ProductCardSkeletonProps) {
   return (
     <div
-      className={styles.fsProductCardSkeleton}
       data-fs-product-card-skeleton
       data-fs-product-card-skeleton-variant={variant}
       data-fs-product-card-skeleton-bordered={bordered}

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

@@ -1,9 +1,9 @@
 import type { PropsWithChildren } from 'react'
 
 import {
-  ProductShelf as UIProductShelf,
-  ProductShelfItems,
   ProductShelfItem,
+  ProductShelfItems,
+  ProductShelf as UIProductShelf,
 } from '@faststore/ui'
 
 import { ITEMS_PER_SECTION } from 'src/constants'

package/src/components/skeletons/ProductTilesSkeleton/ProductTileSkeleton/ProductTileSkeleton.tsx

@@ -1,7 +1,5 @@
 import { Skeleton as UISkeleton } from '@faststore/ui'
 
-import styles from './product-tile-skeleton.module.scss'
-
 interface ProductTileSkeletonProps {
   index: number
   aspectRatio?: number
@@ -14,7 +12,6 @@ function ProductTileSkeleton({
   return (
     <div
       data-fs-product-tile-skeleton
-      className={styles.fsProductTileSkeleton}
       data-fs-product-tile-skeleton-index={index}
     >
       <div

package/src/components/ui/BannerText/BannerText.tsx

@@ -1,8 +1,6 @@
 import { Banner, BannerContent, BannerLink, LinkButton } from '@faststore/ui'
 import type { HTMLAttributes } from 'react'
 
-import styles from './banner-text.module.scss'
-
 export interface BannerTextProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * The href used at the link
@@ -42,7 +40,6 @@ function BannerText({
 }: BannerTextProps) {
   return (
     <Banner
-      className={styles.fsBannerText}
       data-fs-banner-text
       data-fs-banner-text-variant={variant}
       data-fs-banner-text-color-variant={colorVariant}

package/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx

@@ -1,6 +1,5 @@
 import { Icon, LinkButton } from '@faststore/ui'
 
-import styles from 'src/components/ui/Button/button.module.scss'
 import { useSession } from 'src/sdk/session'
 import { useCart } from '../../../../sdk/cart/index'
 
@@ -14,7 +13,7 @@ const ButtonSignIn = () => {
       href={
         person?.id ? `/account?orderFormId=${id}` : `/login?orderFormId=${id}`
       }
-      className={`${styles.fsButton} text__title-mini`}
+      className="text__title-mini"
       variant="tertiary"
       icon={<Icon name="User" width={18} height={18} weight="bold" />}
       iconPosition="left"

package/src/components/{sections → ui}/Incentives/Incentives.tsx

@@ -1,7 +1,5 @@
 import { Icon, Incentive as UIIncentive, List as UIList } from '@faststore/ui'
 
-import styles from './incentives.module.scss'
-
 interface Incentive {
   icon: string
   title?: string
@@ -31,7 +29,6 @@ function Incentives({
       data-fs-incentives
       data-fs-incentives-colored={colored}
       data-fs-incentives-variant={variant}
-      className={styles.fsIncentives}
     >
       <UIList className="layout__content">
         {incentives.map((incentive, index) => (

package/src/components/ui/Incentives/incentivesMock.ts

@@ -0,0 +1,27 @@
+export const incentivesMockFooter = [
+  {
+    icon: 'ShieldCheck',
+    firstLineText: 'Trusted',
+    secondLineText: 'by Safecon',
+  },
+  {
+    icon: 'Medal',
+    firstLineText: 'Quality',
+    secondLineText: 'Products',
+  },
+  {
+    icon: 'CircleWavyCheck',
+    firstLineText: '3-year',
+    secondLineText: 'Guarantee',
+  },
+  {
+    icon: 'Storefront',
+    firstLineText: 'Pickup',
+    secondLineText: 'Options',
+  },
+  {
+    icon: 'Truck',
+    firstLineText: 'Free',
+    secondLineText: 'Shippping',
+  },
+]

package/src/components/ui/Logo/Logo.tsx

@@ -1,14 +1,5 @@
-import styles from './logo.module.scss'
-
 function Logo() {
-  return (
-    <span
-      className={styles.fsLogo}
-      data-fs-logo
-      role="img"
-      aria-label="BaseStore logo"
-    />
-  )
+  return <span data-fs-logo role="img" aria-label="BaseStore logo" />
 }
 
 export default Logo

package/src/components/ui/Tiles/Tiles.tsx

@@ -1,14 +1,9 @@
 import { Tiles as UITiles } from '@faststore/ui'
 
 import type { TilesProps } from '.'
-import styles from './tiles.module.scss'
 
 const Tiles = ({ children, ...otherProps }: TilesProps) => {
-  return (
-    <UITiles className={styles.fsTiles} {...otherProps}>
-      {children}
-    </UITiles>
-  )
+  return <UITiles {...otherProps}>{children}</UITiles>
 }
 
 export default Tiles

package/src/pages/[slug]/p.tsx

@@ -32,8 +32,8 @@ import GlobalSections, {
  */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   ProductDetails,
-  BannerNewsletter,
   CrossSellingShelf,
+  BannerNewsletter,
   ...CUSTOM_COMPONENTS,
 }
 

package/src/pages/_app.tsx

@@ -5,13 +5,13 @@ import '../styles/global/components.scss'
 
 import '../customizations/themes/index.scss'
 
-import NextNProgress from 'nextjs-progressbar'
 import type { AppProps } from 'next/app'
+import NextNProgress from 'nextjs-progressbar'
 
+import { UIProvider } from '@faststore/ui'
 import Layout from 'src/Layout'
 import AnalyticsHandler from 'src/sdk/analytics'
 import ErrorBoundary from 'src/sdk/error/ErrorBoundary'
-import { UIProvider } from '@faststore/ui'
 
 function App({ Component, pageProps }: AppProps) {
   return (

package/src/pages/index.tsx

@@ -6,7 +6,7 @@ import type { ComponentType } from 'react'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerText from 'src/components/sections/BannerText'
 import Hero from 'src/components/sections/Hero'
-import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeader'
+import IncentivesHeader from 'src/components/sections/IncentivesHeader/IncentivesHeader'
 import Newsletter from 'src/components/sections/Newsletter'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
@@ -24,10 +24,10 @@ import GlobalSections, {
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Hero,
-  BannerText,
   IncentivesHeader,
   ProductShelf,
   ProductTiles,
+  BannerText,
   Newsletter,
   ...CUSTOM_COMPONENTS,
 }

package/src/styles/global/components.scss

@@ -1,2 +1,10 @@
 // Sections
+@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/styles/themes/midnight.scss

@@ -90,7 +90,7 @@
   --fs-body-bkg                                   : linear-gradient(0deg, var(--fs-color-main-0) 0%, var(--fs-color-main-2) 20%, var(--fs-color-main-0) 100%);
 
   [data-fs-hero] {
-    --fs-hero-img-border-radius                   : 130px 0 0 130px;
+    --fs-hero-image-border-radius                   : 130px 0 0 130px;
     --fs-hero-main-bkg-color                      : var(--fs-color-main-1);
   }
 

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

@@ -1,158 +0,0 @@
-import {
-  Icon as UIIcon,
-  List as UIList,
-  PaymentMethods as UIPaymentMethods,
-} from '@faststore/ui'
-
-import { Footer } from './Footer'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-  SectionList,
-  SectionItem,
-} from 'src/../.storybook/components'
-
-import IncentivesFooter from '../../sections/Incentives/IncentivesFooter'
-import FooterLinks from './FooterLinks'
-
-import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
-
-<Meta component={Footer} title="Organisms/Footer" />
-
-export const Template = (args) => {
-  return <Footer {...args} />
-}
-
-<header>
-
-# Footer
-
-The `Footer` is the final section of every page and has all the meaningful links of the store.
-
-</header>
-
-## Overview
-
-Footer section is made with `FooterLinks`, [Incentives](?path=/docs/organisms-incentives--incentives), [Links](?path=/docs/atoms-link--default), Accordion, and [PaymentMethods](https://www.faststore.dev/reference/ui/molecules/PaymentMethods) (from FastStore UI).
-
----
-
-## Usage
-
-`import Footer from 'src/components/common/Footer'`
-
-<Canvas>
-  <Story name="Footer">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Footer" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-footer-spacing-vertical-mobile"
-    value="var(--fs-spacing-4)"
-  />
-  <TokenRow
-    token="--fs-footer-spacing-vertical-notebook"
-    value="var(--fs-spacing-5)"
-  />
-  <TokenRow
-    token="--fs-footer-spacing-horizontal-notebook"
-    value="var(--fs-grid-gap-3)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-footer-bkg-color"
-    value="var(--fs-color-neutral-bkg)"
-    isColor
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Divisor
-
-<TokenTable>
-  <TokenRow
-    token="--fs-footer-divisor-border-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-footer-divisor-border-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-</TokenTable>
-
-### Title
-
-<TokenTable>
-  <TokenRow token="--fs-footer-title-size" value="var(--fs-text-size-body)" />
-  <TokenRow token="--fs-footer-title-line-height" value="1.25" />
-  <TokenRow
-    token="--fs-footer-title-weight"
-    value="var(--fs-text-weight-bold)"
-  />
-  <TokenRow
-    token="--fs-footer-title-margin-bottom"
-    value="var(--fs-spacing-1)"
-  />
-</TokenTable>
-
-### Payment Methods
-
-<TokenTable>
-  <TokenRow
-    token="--fs-footer-payment-methods-flags-border-width"
-    value="var(--fs-border-width)"
-  />
-  <TokenRow
-    token="--fs-footer-payment-methods-flags-border-color"
-    value="var(--fs-color-neutral-3)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-footer-payment-methods-flags-border-radius"
-    value="var(--fs-border-radius-small)"
-  />
-</TokenTable>
-
----
-
-## Compound Components
-
-<SectionList>
-  <SectionItem
-    title="Footer Links"
-    description={
-      <>
-        Sitemap listing all the meaningful links of the store. It's the most
-        essential part of the Footer.
-        <br />
-        Additionally, we use the{' '}
-        <a href="../?path=/docs/molecules-accordion-overview--default-story">
-          Accordion
-        </a>{' '}
-        for a better mobile experince.
-      </>
-    }
-  >
-    <FooterLinks />
-  </SectionItem>
-  <SectionItem
-    title="Incentives Footer"
-    description={
-      <>
-        A regular{' '}
-        <a href="../?path=/docs/organisms-incentives--incentives">Incentive</a>{' '}
-        with its own content.
-      </>
-    }
-  >
-    <IncentivesFooter />
-  </SectionItem>
-</SectionList>