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

package/dist/index.d.ts

@@ -3,13 +3,7 @@ export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
-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, BannerImage, BannerLink, } from './components/molecules/Banner';
 export type { BannerProps, BannerContentProps, BannerImageProps, BannerLinkProps, } from './components/molecules/Banner';
 export { Tile, Tiles } from './components/organisms/Tiles';
 export type { TilesProps, TileProps } from './components/organisms/Tiles';
-export { default as useSlider } from './hooks/useSlider';
-export type { UseSliderArgs, SliderState, SliderDispatch, SlideDirection, } from './hooks/useSlider';

package/dist/index.js

@@ -3,11 +3,7 @@ export * from '@faststore/components';
 export { default as TextArea } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
-export { default as Bullets } from './components/molecules/Bullets';
-export { default as Carousel } from './components/molecules/Carousel';
 export { default as Banner, BannerContent, BannerImage, BannerLink, } from './components/molecules/Banner';
 // Organisms
 export { Tile, Tiles } from './components/organisms/Tiles';
-// Hooks
-export { default as useSlider } from './hooks/useSlider';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AAEZ,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,YAAY;AACZ,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.117-alpha.0",
+  "version": "2.0.128-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -58,5 +58,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "0d97039ebb2acb1c000ca9a4c914c2388a4cd49e"
+  "gitHead": "45fb6de9e708a927326715d9de3b46a8030dc3bd"
 }

package/src/components/atoms/Logo/styles.scss

@@ -0,0 +1,12 @@
+[data-fs-logo] {
+  --fs-logo-width      : 7rem;
+  --fs-logo-img        : url("~/public/brandless-neutral.png");
+
+  display: block;
+  width: var(--fs-logo-width);
+  height: 100%;
+  min-height: var(--fs-spacing-6);
+  background: var(--fs-logo-img) no-repeat;
+  background-position: center;
+  background-size: 100% auto;
+}

package/src/components/molecules/Banner/styles.scss

@@ -0,0 +1,125 @@
+[data-fs-banner-text] {
+  // --------------------------------------------------------
+  // Design Tokens for Banner Text
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-banner-padding-mobile                : var(--fs-spacing-6) 5%;
+  --fs-banner-padding-desktop               : var(--fs-spacing-9) 15%;
+
+  // 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);
+  --fs-banner-title-weight                  : var(--fs-text-weight-bold);
+  --fs-banner-title-line-height             : 1.2;
+
+  // Primary
+  --fs-banner-primary-title-size            : var(--fs-text-size-title-page);
+
+  // Secondary
+  --fs-banner-secondary-title-size          : var(--fs-text-size-4);
+  --fs-banner-secondary-caption-size        : var(--fs-text-size-base);
+  --fs-banner-secondary-caption-weight      : var(--fs-text-weight-regular);
+  --fs-banner-secondary-caption-line-height : 1.5;
+
+  // Main
+  --fs-banner-main-bkg-color                : var(--fs-color-primary-bkg);
+  --fs-banner-main-text-color               : var(--fs-color-primary-text);
+
+  // Light
+  --fs-banner-light-bkg-color               : var(--fs-color-secondary-bkg-light);
+  --fs-banner-light-text-color              : var(--fs-color-text-display);
+
+  // Accent
+  --fs-banner-accent-bkg-color              : var(--fs-color-highlighted-bkg);
+  --fs-banner-accent-text-color             : var(--fs-banner-light-text-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  height: 100%;
+  padding: var(--fs-banner-padding-mobile);
+  text-align: center;
+
+  @include media(">=notebook") {
+    padding: var(--fs-banner-padding-desktop);
+  }
+
+  [data-fs-banner-text-content] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  [data-fs-banner-text-link] [data-fs-link-button] {
+    min-width: var(--fs-banner-button-link-min-width);
+    margin-top: var(--fs-banner-button-link-margin-top);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-banner-text-variant="primary"] {
+    h2 {
+      font-size: var(--fs-banner-title-size);
+      font-weight: var(--fs-banner-title-weight);
+      line-height: var(--fs-banner-title-line-height);
+
+      @include media(">=notebook") {
+        display: block;
+        font-size: var(--fs-banner-primary-title-size);
+      }
+    }
+  }
+
+  &[data-fs-banner-text-variant="secondary"] {
+    h2 {
+      margin-bottom: var(--fs-spacing-2);
+      font-size: var(--fs-banner-title-size);
+      font-weight: var(--fs-banner-title-weight);
+      line-height: var(--fs-banner-title-line-height);
+
+      @include media(">=notebook") {
+        display: block;
+        font-size: var(--fs-banner-secondary-title-size);
+      }
+    }
+
+    p {
+      font-size: var(--fs-banner-secondary-caption-size);
+      font-weight: var(--fs-banner-secondary-caption-weight);
+      line-height: var(--fs-banner-secondary-caption-line-height);
+    }
+  }
+
+  &[data-fs-banner-text-color-variant="main"] {
+    background-color: var(--fs-banner-main-bkg-color);
+
+    [data-fs-banner-text-heading] {
+      color: var(--fs-banner-main-text-color);
+    }
+  }
+
+  &[data-fs-banner-text-color-variant="light"] {
+    background-color: var(--fs-banner-light-bkg-color);
+
+    [data-fs-banner-text-heading] {
+      color: var(--fs-banner-light-text-color);
+    }
+  }
+
+  &[data-fs-banner-text-color-variant="accent"] {
+    background-color: var(--fs-banner-accent-bkg-color);
+
+    [data-fs-banner-text-heading] {
+      color: var(--fs-banner-accent-text-color);
+    }
+  }
+}

package/src/components/molecules/Carousel/styles.scss

@@ -0,0 +1,171 @@
+[data-fs-carousel] {
+  // --------------------------------------------------------
+  // Design Tokens for Carousel
+  // --------------------------------------------------------
+
+  // Track
+  --fs-carousel-padding-mobile             : 0 var(--fs-grid-padding);
+  --fs-carousel-padding-desktop            : 0 calc((100vw - 1230px)/2);
+
+  // Item
+  --fs-carousel-item-width-mobile          : 60%;
+  --fs-carousel-item-width-tablet          : 14.2rem;
+  --fs-carousel-item-width-desktop         : 14.4rem;
+  --fs-carousel-item-margin-right          : var(--fs-spacing-3);
+
+  // Controls
+  --fs-carousel-controls-width             : 3.125rem;
+  --fs-carousel-controls-height            : var(--fs-carousel-controls-width);
+  --fs-carousel-controls-bkg-color         : var(--fs-color-neutral-0);
+  --fs-carousel-controls-border-radius     : var(--fs-border-radius-circle);
+  --fs-carousel-controls-box-shadow        : var(--fs-shadow-darker);
+  --fs-carousel-controls-icon-color        : var(--fs-color-neutral-7);
+
+  --fs-carousel-controls-control-left      : var(--fs-spacing-4);
+  --fs-carousel-controls-control-right     : var(--fs-carousel-controls-control-left);
+  --fs-carousel-controls-control-max-left  : calc(-1 * var(--fs-spacing-11));
+  --fs-carousel-controls-control-max-right : var(--fs-carousel-controls-control-max-left);
+
+  // Bullets
+  --fs-carousel-bullets-padding-top        : var(--fs-carousel-controls-control-left);
+  --fs-carousel-bullets-padding-left       : var(--fs-grid-padding);
+  --fs-carousel-bullets-padding-right      : var(--fs-carousel-bullets-padding-left);
+  --fs-carousel-bullets-column-gap-mobile  : var(--fs-spacing-0);
+  --fs-carousel-bullets-column-gap-tablet  : var(--fs-spacing-3);
+
+  --fs-carousel-bullet-width-mobile        : 100%;
+  --fs-carousel-bullet-width-desktop       : var(--fs-spacing-1);
+  --fs-carousel-bullet-height-mobile       : var(--fs-spacing-0);
+  --fs-carousel-bullet-height-desktop      : var(--fs-carousel-bullet-width-desktop);
+  --fs-carousel-bullet-bkg-color           : var(--fs-color-neutral-3);
+  --fs-carousel-bullet-bkg-color-selected  : var(--fs-color-main-4);
+  --fs-carousel-bullet-border-radius       : var(--fs-carousel-controls-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: inherit;
+
+  &:hover {
+    [data-fs-carousel-controls] {
+      position: relative;
+
+      @include media(">=tablet") {
+        display: flex;
+        margin: var(--fs-carousel-padding-desktop);
+
+        [data-fs-carousel-control] {
+          bottom: calc(var(--fs-carousel-controls-height) + var(--fs-control-tap-size));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--fs-carousel-controls-width);
+          height: var(--fs-carousel-controls-height);
+          cursor: pointer;
+          background-color: var(--fs-carousel-controls-bkg-color);
+          border-color: transparent;
+          border-radius: var(--fs-carousel-controls-border-radius);
+          box-shadow: var(--fs-carousel-controls-box-shadow);
+          transform: translateY(-50%);
+        }
+
+        [data-fs-carousel-control="left"] {
+          position: absolute;
+          left: var(--fs-carousel-controls-control-right);
+          @include media(">notebook") {
+            left: var(--fs-carousel-controls-control-max-left);
+          }
+        }
+
+        [data-fs-carousel-control="right"] {
+          position: absolute;
+          right: var(--fs-carousel-controls-control-right);
+          @include media(">notebook") {
+            right: var(--fs-carousel-controls-control-max-right);
+          }
+        }
+
+        [data-fs-icon] {
+          display: flex;
+          color: var(--fs-carousel-controls-icon-color);
+        }
+      }
+    }
+  }
+
+  [data-fs-carousel-controls] {
+    position: relative;
+    display: none;
+  }
+
+  [data-fs-carousel-track] {
+    padding: var(--fs-carousel-padding-mobile);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @include media(">notebook") {
+      padding: var(--fs-carousel-padding-desktop);
+    }
+  }
+
+  [data-fs-carousel-item] {
+    width: var(--fs-carousel-item-width-mobile);
+
+    &:not(:last-of-type) {
+      margin-right: var(--fs-carousel-item-margin-right);
+    }
+
+    @include media(">=tablet") {
+      width: var(--fs-carousel-item-width-tablet);
+      height: 100%;
+    }
+
+    @include media(">=desktop") {
+      width: var(--fs-carousel-item-width-desktop);
+    }
+  }
+
+  [data-fs-carousel-bullets] {
+    position: relative;
+    width: 100%;
+    padding-top: var(--fs-carousel-bullets-padding-top);
+    display: flex;
+    flex-flow: row nowrap;
+    column-gap: var(--fs-carousel-bullets-column-gap-mobile);
+    padding-left: var(--fs-carousel-bullets-padding-left);
+    padding-right: var(--fs-carousel-bullets-padding-right);
+
+    @include media(">=tablet") {
+      width: fit-content;
+      align-items: center;
+      justify-content: center;
+      margin: auto;
+      column-gap: var(--fs-carousel-bullets-column-gap-tablet);
+    }
+
+    [data-fs-carousel-bullet] {
+      padding: 0;
+      border-color: transparent;
+      width: var(--fs-carousel-bullet-width-mobile);
+      &::after {
+        width: 100%;
+        height: var(--fs-carousel-bullet-height-mobile);
+        background-color: var(--fs-carousel-bullet-bkg-color);
+        content: "";
+        @include media(">=tablet") {
+          width: var(--fs-carousel-bullet-width-desktop);
+          height: var(--fs-carousel-bullet-height-desktop);
+          margin: 0;
+          border-radius: var(--fs-carousel-bullet-border-radius);
+          content: "";
+        }
+      }
+      &[aria-selected="true"]::after {
+        background-color: var(--fs-carousel-bullet-bkg-color-selected);
+      }
+    }
+  }
+}

package/src/components/molecules/NavbarLinks/styles.scss

@@ -38,8 +38,6 @@
   @include media("<notebook") { padding: 0; }
 
   @include media(">=notebook") {
-    z-index: var(--fs-z-index-below);
-
     > div {
       display: flex;
       align-items: center;
@@ -80,7 +78,7 @@
       border-left: var(--fs-navbar-links-list-border-left-width-notebook) solid var(--fs-navbar-links-list-border-left-color-notebook);
     }
 
-    [data-fs-navbar-links-list-item] {
+    [data-fs-navbar-links-list-item] > [data-fs-link] {
       width: var(--fs-navbar-links-link-width-notebook);
       padding: var(--fs-navbar-links-link-padding-notebook);
     }

package/src/components/molecules/ProductCardSkeleton/styles.scss

@@ -0,0 +1,56 @@
+[data-fs-product-card-skeleton] {
+  // --------------------------------------------------------
+  // Design Tokens for Product Card Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-product-card-skeleton-padding                   : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
+  --fs-product-card-skeleton-border-radius             : var(--fs-border-radius);
+  --fs-product-card-skeleton-gap                       : var(--fs-spacing-1);
+
+  // Sectioned
+  --fs-product-card-skeleton-sectioned-min-width       : 10rem;
+
+  // Bordered
+  --fs-product-card-skeleton-bordered                  : var(--fs-border-width) solid var(--fs-border-color-light);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-product-card-skeleton-gap);
+  padding: var(--fs-product-card-skeleton-padding);
+  overflow: hidden;
+  border-radius: var(--fs-product-card-skeleton-border-radius);
+
+  [data-fs-product-card-skeleton-content] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-card-skeleton-gap);
+  }
+
+  [data-fs-product-card-skeleton-image] {
+    aspect-ratio: var(--fs-product-card-skeleton-image-aspect-ratio);
+
+    [data-fs-skeleton-wrapper],
+    [data-fs-skeleton] {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-product-card-skeleton-sectioned="true"] {
+    min-width: var(--fs-product-card-skeleton-sectioned-min-width);
+  }
+
+  &[data-fs-product-card-skeleton-bordered="true"] {
+    border: var(--fs-product-card-skeleton-bordered);
+  }
+}

package/src/components/molecules/ProductTile/styles.scss

@@ -0,0 +1,79 @@
+[data-fs-product-tile-skeleton] {
+  // --------------------------------------------------------
+  // Design Tokens for Product Tile Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-product-tile-skeleton-gap                                : var(--fs-spacing-1);
+
+  // Content
+  --fs-product-tile-skeleton-content-padding                    : var(--fs-spacing-3);
+
+  // Wide
+  --fs-product-tile-skeleton-wide-padding                       : var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-3);
+  --fs-product-tile-skeleton-wide-bkg-color                     : var(--fs-color-neutral-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  @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; }
+
+  [data-fs-product-tile-skeleton-content] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-tile-skeleton-gap);
+    padding: var(--fs-product-tile-skeleton-content-padding);
+    background-color: var(--fs-product-tile-skeleton-wide-bkg-color);
+
+    @include media(">=notebook") {
+      flex-direction: row;
+      justify-content: space-between;
+      height: 100%;
+    }
+  }
+
+  [data-fs-product-tile-skeleton-heading] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-tile-skeleton-gap);
+    width: 100%;
+  }
+
+  [data-fs-product-tile-skeleton-badge] {
+    max-width: 100%;
+  }
+
+  [data-fs-product-tile-skeleton-image] {
+    width: 100%;
+    aspect-ratio: var(--fs-product-tile-skeleton-image-aspect-ratio);
+    overflow: hidden;
+
+    [data-fs-skeleton-variant="image"] { border-radius: 0; }
+
+    @include media(">=tablet") { height: 100%; }
+  }
+
+  [data-fs-product-tile-skeleton-image],
+  [data-fs-product-tile-skeleton-badge] {
+    [data-fs-skeleton-wrapper],
+    [data-fs-skeleton] {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+[data-fs-banner-newsletter] {
+  margin-bottom: var(--fs-grid-padding);
+
+  [data-fs-banner-text] {
+    border-radius: var(--fs-border-radius);
+  }
+
+  > section {
+    margin-top: 0;
+  }
+
+  @include media(">=notebook") {
+    display: flex;
+    column-gap: var(--fs-grid-gap-3);
+
+    > section {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+[data-fs-filter-skeleton] {
+  // --------------------------------------------------------
+  // Design Tokens for Filter Skeleton
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-filter-skeleton-margin-top            : var(--fs-spacing-1);
+
+  // Title
+  --fs-filter-skeleton-title-max-width       : 30%;
+  --fs-filter-skeleton-title-margin-bottom   : var(--fs-spacing-2);
+
+  // Content
+  --fs-filter-skeleton-content-min-height    : var(--fs-spacing-8);
+  --fs-filter-skeleton-content-margin-bottom : var(--fs-spacing-0);
+  --fs-filter-skeleton-content-padding       : var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-0);
+  --fs-filter-skeleton-content-border-color  : var(--fs-border-color-light);
+  --fs-filter-skeleton-content-border-width  : var(--fs-border-width);
+  --fs-filter-skeleton-content-border-radius : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  margin-top: var(--fs-filter-skeleton-margin-top);
+
+  @include media("<notebook") { display: none; }
+
+  [data-fs-filter-skeleton-text] {
+    max-width: var(--fs-filter-skeleton-title-max-width);
+    margin-bottom: var(--fs-filter-skeleton-title-margin-bottom);
+  }
+
+  [data-fs-filter-skeleton-content] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: var(--fs-filter-skeleton-content-padding);
+    overflow: hidden;
+    border: var(--fs-filter-skeleton-content-border-width) solid var(--fs-filter-skeleton-content-border-color);
+    border-radius: var(--fs-filter-skeleton-content-border-radius);
+
+    [data-fs-skeleton] {
+      min-width: 100%;
+      min-height: var(--fs-filter-skeleton-content-min-height);
+      margin-bottom: var(--fs-filter-skeleton-content-margin-bottom);
+    }
+  }
+}