@faststore/ui 2.0.117-alpha.0 → 2.0.128-alpha.0

package/src/components/organisms/ProductGallery/styles.scss

@@ -0,0 +1,180 @@
+[data-fs-product-listing] {
+  --product-listing-row-height: var(--fs-spacing-6);
+
+  height: 100%;
+  padding-top: 0;
+
+  [data-fs-empty-state] {
+    margin: var(--fs-spacing-3) 0;
+  }
+
+  @include media(">=notebook") {
+    [data-fs-empty-state] {
+      margin: 0 0 var(--fs-spacing-5);
+    }
+  }
+
+  [data-fs-product-listing-search-term] {
+    @include media(">=notebook") {
+      padding-bottom: var(--fs-spacing-6);
+    }
+
+    h1 {
+      font-size: var(--fs-text-size-4);
+
+      @include media(">=tablet") { font-size: var(--fs-text-size-5); }
+
+      span {
+        font-weight: var(--fs-text-weight-bold);
+      }
+    }
+  }
+
+  [data-fs-product-listing-content-grid] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding-right: 0;
+    padding-left: 0;
+
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-rows: var(--product-listing-row-height) auto;
+      grid-template-columns: repeat(12, 1fr);
+      row-gap: var(--fs-spacing-0);
+      column-gap: var(--fs-spacing-4);
+      padding-right: var(--fs-grid-padding);
+      padding-left: var(--fs-grid-padding);
+    }
+  }
+
+  [data-fs-product-listing-filters] {
+    @include media(">=notebook") {
+      position: sticky;
+      top: var(--fs-grid-gap-2);
+      grid-row: span 2;
+      grid-column: 1 / span 3;
+      align-self: start;
+    }
+  }
+
+  [data-fs-product-listing-sort] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    order: 1;
+    width: 100%;
+    min-height: rem(68px);
+    padding: var(--fs-spacing-1) var(--fs-spacing-3) var(--fs-spacing-2);
+    background-color: var(--fs-color-body-bkg);
+
+    [data-fs-product-listing-sort-skeleton] {
+      min-width: rem(225px);
+      min-height: var(--fs-spacing-5);
+    }
+
+    @include media(">=notebook") {
+      grid-column: 6 / span 7;
+      justify-content: flex-end;
+      order: unset;
+      min-height: initial;
+      padding: 0;
+
+      [data-fs-button] {
+        display: none;
+      }
+
+      [data-fs-product-listing-filter-button-skeleton] {
+        display: none;
+      }
+    }
+  }
+
+  [data-fs-product-listing-results-count] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    order: 2;
+    min-height: rem(45px);
+    padding: var(--fs-spacing-2) var(--fs-spacing-3);
+    background-color: var(--fs-color-neutral-bkg);
+
+    @include media(">=notebook") {
+      grid-column: 4 /span 2;
+      justify-content: left;
+      order: unset;
+      min-height: initial;
+      padding: 0;
+      background-color: unset;
+    }
+
+    [data-fs-product-listing-results-count-skeleton] {
+      min-width: rem(130px);
+    }
+  }
+
+  [data-fs-product-listing-results] {
+    --padding: var(--fs-spacing-1);
+
+    order: 3;
+    padding: var(--padding) var(--padding) 0;
+    background-color: var(--fs-color-neutral-bkg);
+
+    @include media(">=notebook") {
+      grid-column: 4 / span 9;
+      order: unset;
+      padding: 0;
+      background-color: unset;
+    }
+
+    [data-fs-product-card] { min-width: 100%; }
+  }
+
+  [data-fs-product-listing-sponsored] {
+    padding: var(--fs-spacing-4) var(--fs-spacing-3);
+    margin: var(--fs-spacing-1) calc(-1 * var(--padding));
+    background-color: var(--fs-color-body-bkg);
+
+    @include media(">=notebook") {
+      padding: 0;
+      margin: var(--fs-spacing-6) 0;
+
+      [data-fs-tiles] {
+        row-gap: 0;
+        column-gap: var(--fs-grid-gap-2);
+      }
+    }
+
+    h3 { margin-bottom: var(--fs-spacing-1); }
+  }
+
+  [data-fs-product-listing-pagination] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--fs-spacing-13);
+    padding: var(--fs-spacing-4);
+    margin-right: calc(-1 * var(--padding));
+    margin-left: calc(-1 * var(--padding));
+
+    @include media(">=notebook") {
+      padding: var(--fs-spacing-1) var(--fs-spacing-2);
+    }
+
+    [data-fs-button] {
+      width: 100%;
+
+      @include media(">=notebook") {
+        width: fit-content;
+      }
+    }
+  }
+
+  [data-fs-product-listing-pagination="top"] {
+    margin-bottom: var(--padding);
+  }
+
+  [data-fs-product-listing-pagination="bottom"] {
+    margin-top: var(--padding);
+  }
+}

package/src/components/organisms/ProductShelf/styles.scss

@@ -6,19 +6,18 @@
   --fs-product-shelf-items-gap              : var(--fs-grid-gap-1);
   --fs-product-shelf-items-padding-top      : var(--fs-spacing-0);
   --fs-product-shelf-items-padding-bottom   : var(--fs-spacing-3);
-  --fs-product-shelf-items-left             : calc(-1 * var(--fs-spacing-1));
 
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
 
+  width: 100%;
+
   [data-fs-product-shelf-items] {
     display: flex;
     align-items: stretch;
     overflow-x: auto;
     position: relative;
-    left: var(--fs-product-shelf-items-left);
-
 
     [data-fs-product-shelf-item] { width: 100%; }
 

package/src/components/organisms/Tiles/styles.scss

@@ -0,0 +1,56 @@
+[data-fs-tiles] {
+  // --------------------------------------------------------
+  // Design Tokens for Tiles
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-tiles-gap-mobile         : var(--fs-grid-gap-2);
+  --fs-tiles-gap-notebook       : var(--fs-grid-gap-3);
+
+  // Tile
+  --fs-tiles-tile-min-width     : 9rem;
+  --fs-tiles-tile-border-radius : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: var(--fs-tiles-gap-mobile);
+  column-gap: var(--fs-tiles-gap-mobile);
+
+  @include media(">=tablet") {
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  @include media(">=notebook") { column-gap: var(--fs-tiles-gap-notebook); }
+
+  [data-fs-tile] {
+    min-width: var(--fs-tiles-tile-min-width);
+
+    > * {
+      overflow: hidden;
+      border-radius: var(--fs-tiles-tile-border-radius);
+
+      @include media(">=tablet") {
+        display: grid;
+        grid-auto-rows: 62% auto;
+        [data-fs-product-card-image] { height: 100%; }
+      }
+
+      @include media(">=notebook") { grid-auto-rows: 80% auto; }
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-tiles-variant="expanded-first"] > [data-fs-tile]:first-child,
+  &[data-fs-tiles-variant="expanded-first-two"] > [data-fs-tile]:first-child,
+  &[data-fs-tiles-variant="expanded-first-two"] > [data-fs-tile]:nth-child(2) {
+    grid-column: span 2;
+    min-width: 12rem;
+  }
+}

package/src/index.ts

@@ -8,13 +8,6 @@ export { default as Incentive } from './components/atoms/Incentive'
 export type { IncentiveProps } from './components/atoms/Incentive'
 
 // Molecules
-
-export { default as Bullets } from './components/molecules/Bullets'
-export type { BulletsProps } from './components/molecules/Bullets'
-
-export { default as Carousel } from './components/molecules/Carousel'
-export type { CarouselProps } from './components/molecules/Carousel'
-
 export {
   default as Banner,
   BannerContent,
@@ -31,12 +24,3 @@ export type {
 // Organisms
 export { Tile, Tiles } from './components/organisms/Tiles'
 export type { TilesProps, TileProps } from './components/organisms/Tiles'
-
-// Hooks
-export { default as useSlider } from './hooks/useSlider'
-export type {
-  UseSliderArgs,
-  SliderState,
-  SliderDispatch,
-  SlideDirection,
-} from './hooks/useSlider'

package/src/styles/components.scss

@@ -7,6 +7,7 @@
 @import "../components/atoms/Link/styles";
 @import "../components/atoms/List/styles";
 @import "../components/atoms/Loader/styles";
+@import "../components/atoms/Logo/styles";
 @import "../components/atoms/Overlay/styles";
 @import "../components/atoms/Price/styles";
 @import "../components/atoms/Radio/styles";
@@ -18,8 +19,10 @@
 // Molecules
 @import "../components/molecules/Accordion/styles";
 @import "../components/molecules/Alert/styles";
+@import "../components/molecules/Banner/styles";
 @import "../components/molecules/Breadcrumb/styles";
 @import "../components/molecules/BuyButton/styles";
+@import "../components/molecules/Carousel/styles";
 @import "../components/molecules/CartItem/styles";
 @import "../components/molecules/CheckboxField/styles";
 @import "../components/molecules/DiscountBadge/styles";
@@ -29,9 +32,10 @@
 @import "../components/molecules/LinkButton/styles";
 @import "../components/molecules/Modal/styles";
 @import "../components/molecules/NavbarLinks/styles";
-@import "../components/molecules/NavbarSlider/styles";
 @import "../components/molecules/OrderSummary/styles";
 @import "../components/molecules/ProductCard/styles";
+@import "../components/molecules/ProductCardSkeleton/styles";
+@import "../components/molecules/ProductTile/styles";
 @import "../components/molecules/ProductTitle/styles";
 @import "../components/molecules/QuantitySelector/styles";
 @import "../components/molecules/RadioField/styles";
@@ -52,19 +56,28 @@
 @import "../components/molecules/ToggleField/styles";
 
 // Organisms
+@import "../components/organisms/BannerNewsletter/styles";
 @import "../components/organisms/CartSidebar/styles";
 @import "../components/organisms/EmptyState/styles";
 @import "../components/organisms/Filter/styles";
+@import "../components/organisms/FilterSkeleton/styles";
 @import "../components/organisms/FilterSlider/styles";
+@import "../components/organisms/Footer/styles";
 @import "../components/organisms/Hero/styles";
 @import "../components/organisms/ImageGallery/styles";
+@import "../components/organisms/Incentives/styles";
 @import "../components/organisms/Navbar/styles";
+@import "../components/organisms/NavbarSlider/styles";
+@import "../components/organisms/Newsletter/styles";
 @import "../components/organisms/OutOfStock/styles";
 @import "../components/organisms/PaymentMethods/styles";
 @import "../components/organisms/PriceRange/styles";
+@import "../components/organisms/ProductDetails/styles";
+@import "../components/organisms/ProductGallery/styles";
 @import "../components/organisms/ProductGrid/styles";
 @import "../components/organisms/ProductShelf/styles";
 @import "../components/organisms/RegionModal/styles";
 @import "../components/organisms/SearchInput/styles";
 @import "../components/organisms/ShippingSimulation/styles";
 @import "../components/organisms/SlideOver/styles";
+@import "../components/organisms/Tiles/styles";

package/src/styles/global.scss

@@ -1,2 +1 @@
 @import "./base";
-@import "./components";

package/dist/components/molecules/Bullets/Bullets.d.ts

@@ -1,35 +0,0 @@
-import type { HTMLAttributes, MouseEvent } from 'react';
-import React from 'react';
-export interface BulletsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role'> {
-    /**
-     * Number of bullets that should be rendered.
-     */
-    totalQuantity: number;
-    /**
-     * The currently active bullet (zero-indexed).
-     */
-    activeBullet: number;
-    /**
-     * Event handler for clicks on each bullet. The handler will be called with
-     * the index of the bullet that received the click.
-     */
-    onClick: (e: MouseEvent, bulletIdx: number) => void;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress,
-     * testing-library, and jest).
-     */
-    testId?: string;
-    /**
-     * Function that should be used to generate the aria-label attribute added
-     * to each bullet that is inactive. It receives the bullet index as an
-     * argument so that it can be interpolated in the generated string.
-     */
-    ariaLabelGenerator?: (index: number, isActive: boolean) => string;
-    /**
-     * Function that should be used to generate the aria-controls attribute added
-     * to each bullet. It receives the bullet index as argument and should return a string.
-     */
-    ariaControlsGenerator?: (index: number) => string;
-}
-declare const Bullets: React.ForwardRefExoticComponent<BulletsProps & React.RefAttributes<HTMLDivElement>>;
-export default Bullets;

package/dist/components/molecules/Bullets/Bullets.js

@@ -1,12 +0,0 @@
-import React, { forwardRef, useMemo } from 'react';
-import { Button } from '@faststore/components';
-const defaultAriaLabel = (idx, isActive) => isActive ? 'Current page' : `Go to page ${idx + 1}`;
-const Bullets = forwardRef(function Bullets({ totalQuantity, activeBullet, onClick, testId = 'store-bullets', ariaLabelGenerator = defaultAriaLabel, ariaControlsGenerator, ...otherProps }, ref) {
-    const bulletIndexes = useMemo(() => Array(totalQuantity).fill(0), [totalQuantity]);
-    return (React.createElement("div", { ref: ref, "data-fs-bullets": true, "data-testid": testId, role: "tablist", ...otherProps }, bulletIndexes.map((_, idx) => {
-        const isActive = activeBullet === idx;
-        return (React.createElement(Button, { key: idx, role: "tab", tabIndex: -1, "data-fs-bullet": true, testId: `${testId}-bullet`, onClick: (e) => onClick(e, idx), "aria-label": ariaLabelGenerator(idx, isActive), "aria-controls": ariaControlsGenerator?.(idx), "aria-selected": isActive }));
-    })));
-});
-export default Bullets;
-//# sourceMappingURL=Bullets.js.map

package/dist/components/molecules/Bullets/Bullets.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Bullets.js","sourceRoot":"","sources":["../../../../src/components/molecules/Bullets/Bullets.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAmC9C,MAAM,gBAAgB,GAAG,CAAC,GAAW,EAAE,QAAiB,EAAE,EAAE,CAC1D,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,GAAG,GAAG,CAAC,EAAE,CAAA;AAErD,MAAM,OAAO,GAAG,UAAU,CAA+B,SAAS,OAAO,CACvE,EACE,aAAa,EACb,YAAY,EACZ,OAAO,EACP,MAAM,GAAG,eAAe,EACxB,kBAAkB,GAAG,gBAAgB,EACrC,qBAAqB,EACrB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAClC,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,0CAEK,MAAM,EACnB,IAAI,EAAC,SAAS,KACV,UAAU,IAEb,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;QAC5B,MAAM,QAAQ,GAAG,YAAY,KAAK,GAAG,CAAA;QAErC,OAAO,CACL,oBAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,KAAK,EACV,QAAQ,EAAE,CAAC,CAAC,0BAEZ,MAAM,EAAE,GAAG,MAAM,SAAS,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,gBACnB,kBAAkB,CAAC,GAAG,EAAE,QAAQ,CAAC,mBAC9B,qBAAqB,EAAE,CAAC,GAAG,CAAC,mBAC5B,QAAQ,GACvB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,OAAO,CAAA"}

package/dist/components/molecules/Bullets/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './Bullets';
-export type { BulletsProps } from './Bullets';

package/dist/components/molecules/Bullets/index.js

@@ -1,2 +0,0 @@
-export { default } from './Bullets';
-//# sourceMappingURL=index.js.map

package/dist/components/molecules/Bullets/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/Bullets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA"}

package/dist/components/molecules/Carousel/Arrows.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-interface IconProps {
-    size?: {
-        width: number;
-        height: number;
-    };
-    viewBox?: string;
-    color?: string;
-}
-export declare const LeftArrowIcon: ({ size, viewBox, color, }: IconProps) => JSX.Element;
-export declare const RightArrowIcon: ({ size, viewBox, color, }: IconProps) => JSX.Element;
-export {};

package/dist/components/molecules/Carousel/Arrows.js

@@ -1,6 +0,0 @@
-import React from 'react';
-export const LeftArrowIcon = ({ size = { width: 25, height: 25 }, viewBox = '0 0 16 16', color = 'currentColor', }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: viewBox, width: size.width, height: size.height },
-    React.createElement("path", { d: "M11 1L4 8L11 15", strokeWidth: "2", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round", stroke: color, fill: "none" })));
-export const RightArrowIcon = ({ size = { width: 25, height: 25 }, viewBox = '0 0 16 16', color = 'currentColor', }) => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: viewBox, width: size.width, height: size.height },
-    React.createElement("path", { d: "M5 15L12 8L5 1", strokeWidth: "2", strokeMiterlimit: "10", strokeLinecap: "round", strokeLinejoin: "round", stroke: color, fill: "none" })));
-//# sourceMappingURL=Arrows.js.map

package/dist/components/molecules/Carousel/Arrows.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Arrows.js","sourceRoot":"","sources":["../../../../src/components/molecules/Carousel/Arrows.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,IAAI,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAChC,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,cAAc,GACZ,EAAE,EAAE,CAAC,CACf,6BACE,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B,EACzC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM;IAEnB,8BACE,CAAC,EAAC,iBAAiB,EACnB,WAAW,EAAC,GAAG,EACf,gBAAgB,EAAC,IAAI,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,MAAM,GACX,CACE,CACP,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,IAAI,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAChC,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,cAAc,GACZ,EAAE,EAAE,CAAC,CACf,6BACE,KAAK,EAAC,4BAA4B,EAClC,UAAU,EAAC,8BAA8B,EACzC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM;IAEnB,8BACE,CAAC,EAAC,gBAAgB,EAClB,WAAW,EAAC,GAAG,EACf,gBAAgB,EAAC,IAAI,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,MAAM,EAAE,KAAK,EACb,IAAI,EAAC,MAAM,GACX,CACE,CACP,CAAA"}

package/dist/components/molecules/Carousel/Carousel.d.ts

@@ -1,54 +0,0 @@
-import type { ReactNode, PropsWithChildren } from 'react';
-import type { SwipeableProps } from 'react-swipeable';
-export interface CarouselProps extends SwipeableProps {
-    /**
-     * ID of the current instance of the component.
-     */
-    id?: string;
-    /**
-     * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
-     */
-    testId?: string;
-    /**
-     * Returns the value of element's class content attribute.
-     */
-    className?: string;
-    /**
-     * Whether or not the Carousel is infinite slide/scroll. Only for the `slide` variant.
-     * @default true
-     */
-    infiniteMode?: boolean;
-    /**
-     * Specifies which navigation elements should be visible.
-     * @default complete
-     */
-    controls?: 'complete' | 'navigationArrows' | 'paginationBullets';
-    /**
-     * Specifies the slide transition. Only for the `slide` variant
-     */
-    transition?: {
-        duration: number;
-        property: string;
-        delay?: number;
-        timing?: string;
-    };
-    /**
-     * Specifies the number of items per page.
-     * @default 1
-     */
-    itemsPerPage?: number;
-    /**
-     * Specifies the Carousel track variant.
-     * @default slide
-     */
-    variant?: 'slide' | 'scroll';
-    /**
-     * Specifies the navigation icons.
-     */
-    navigationIcons?: {
-        left?: ReactNode;
-        right?: ReactNode;
-    };
-}
-declare function Carousel({ infiniteMode, controls, testId, transition, children, className, id, variant, itemsPerPage, navigationIcons, ...swipeableConfigOverrides }: PropsWithChildren<CarouselProps>): JSX.Element;
-export default Carousel;