@faststore/ui 2.2.0-alpha.9 → 2.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.2.0-alpha.9",
+  "version": "2.2.10",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -48,7 +48,7 @@
     }
   ],
   "dependencies": {
-    "@faststore/components": "^2.2.0-alpha.9",
+    "@faststore/components": "^2.2.10",
     "include-media": "^1.4.10",
     "modern-normalize": "^1.1.0",
     "react-swipeable": "^7.0.0",
@@ -59,8 +59,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@faststore/eslint-config": "^2.2.0-alpha.1",
-    "@faststore/shared": "^2.2.0-alpha.1",
+    "@faststore/eslint-config": "^2.2.0",
+    "@faststore/shared": "^2.2.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@types/tabbable": "^3.1.1",
     "babel-loader": "^8.2.5",
@@ -72,5 +72,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "79b9eb42f6f8fb7fdead1141f384c7b826357fa3"
+  "gitHead": "a0774a2e911ebcdf167e0456b53ef0be84c58a99"
 }

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

@@ -8,9 +8,6 @@
   --fs-carousel-padding-desktop            : var(--fs-spacing-0) calc((100% - var(--fs-grid-max-width))/2) var(--fs-spacing-0);
 
   // 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
@@ -45,7 +42,11 @@
   // Structural Styles
   // --------------------------------------------------------
 
+  position: relative;
   width: inherit;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   &:hover {
     [data-fs-carousel-controls] {
@@ -56,18 +57,27 @@
     }
   }
 
+  &[data-fs-carousel-variant='scroll'] [data-fs-carousel-item]{
+    flex-shrink: 0;
+  }
+
   [data-fs-carousel-controls] {
-    position: relative;
+    position: absolute;
+    bottom: 50%;
     display: flex;
+    justify-content: space-between;
+    width: 100%;
+    margin: auto;
+    pointer-events: auto;
     opacity: 0;
-    pointer-events: none;
-    @include media(">=tablet") { margin: var(--fs-carousel-padding-desktop); }
+
+    @include media(">notebook") {
+      width: calc(100% + 2 * var(--fs-control-tap-size) + 2 * var(--fs-spacing-4));
+    }
   }
 
   [data-fs-carousel-control] {
-    bottom: calc(var(--fs-carousel-controls-height) + var(--fs-control-tap-size));
     cursor: pointer;
-    transform: translateY(-50%);
     [data-fs-button-wrapper] {
       border-radius: var(--fs-carousel-controls-border-radius);
       box-shadow: var(--fs-carousel-controls-box-shadow);
@@ -75,22 +85,6 @@
     &:not(:hover) [data-fs-button-wrapper] { background-color: var(--fs-carousel-controls-bkg-color); }
   }
 
-  [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] {
     color: var(--fs-carousel-controls-icon-color);
   }
@@ -109,20 +103,9 @@
   }
 
   [data-fs-carousel-item] {
-    width: var(--fs-carousel-item-width-mobile);
-    flex-shrink: 0;
-
     &:not(:last-of-type) {
       margin-right: var(--fs-carousel-item-margin-right);
     }
-
-    @include media(">=tablet") {
-      width: var(--fs-carousel-item-width-tablet);
-    }
-
-    @include media(">=desktop") {
-      width: var(--fs-carousel-item-width-desktop);
-    }
   }
 
   [data-fs-carousel-bullets] {
@@ -135,7 +118,7 @@
     padding-left: var(--fs-carousel-bullets-padding-left);
     padding-right: var(--fs-carousel-bullets-padding-right);
 
-    @include media(">=tablet") {
+    @include media(">tablet") {
       width: fit-content;
       align-items: center;
       justify-content: center;
@@ -153,7 +136,7 @@
         background-color: var(--fs-carousel-bullet-bkg-color);
         border-color: transparent;
         border-radius: 0;
-        @include media(">=tablet") {
+        @include media(">tablet") {
           width: var(--fs-carousel-bullet-width-desktop);
           height: var(--fs-carousel-bullet-height-desktop);
           margin: 0;

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

@@ -178,6 +178,18 @@
     }
   }
 
+  [data-fs-product-details-description-content] {
+    font-size: var(--fs-text-size-body);
+    line-height: 1.5;
+   /**
+    * display: contents allows you to remove an element from the box tree but still keep its contents
+    * It doesn't have padding or margin, for example.
+    * 
+    * https://blogs.igalia.com/mrego/2018/01/11/display-contents-is-coming/
+    */  
+    display: contents;
+  }
+
   [data-fs-image-gallery="with-selector"] ~ [data-fs-product-description] {
     @include media(">=notebook") {
       grid-column: 2 / 9;

package/src/styles/base/layout.scss

@@ -13,6 +13,7 @@
   main {
     display: flex;
     flex-direction: column;
+    overflow: hidden;
   }
 
   .layout__section {