@faststore/ui 2.2.0-alpha.0 → 2.2.0-alpha.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.2.0-alpha.0",
+  "version": "2.2.0-alpha.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.0",
+    "@faststore/components": "^2.2.0-alpha.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.0",
-    "@faststore/shared": "^2.2.0-alpha.0",
+    "@faststore/eslint-config": "^2.2.0-alpha.10",
+    "@faststore/shared": "^2.2.0-alpha.10",
     "@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": "356e52b6eae13cc4000c6915985009d45e7ae0c6"
+  "gitHead": "183808da50c3c697de08a478918d1da1dcd8d938"
 }

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

@@ -132,10 +132,6 @@
     border-width: 0;
     border-radius: var(--fs-breadcrumb-dropdown-button-border-radius);
     transition: var(--fs-breadcrumb-dropdown-button-transition-property) var(--fs-breadcrumb-dropdown-button-transition-timing) var(--fs-breadcrumb-dropdown-button-transition-function);
-
-    &:focus, &:focus-visible {
-      @include focus-ring;
-    }
   }
 
   &[data-fs-breadcrumb-is-desktop="true"] {

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

@@ -4,8 +4,8 @@
   // --------------------------------------------------------
 
   // Track
-  --fs-carousel-padding-mobile             : 0 var(--fs-grid-padding);
-  --fs-carousel-padding-desktop            : 0 calc((100% - var(--fs-grid-max-width))/2) var(--fs-spacing-0);
+  --fs-carousel-padding-mobile             : var(--fs-spacing-0) var(--fs-grid-padding);
+  --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%;
@@ -96,6 +96,7 @@
   }
 
   [data-fs-carousel-track] {
+    display: flex;
     padding: var(--fs-carousel-padding-mobile);
 
     &::-webkit-scrollbar {
@@ -109,6 +110,7 @@
 
   [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);
@@ -116,7 +118,6 @@
 
     @include media(">=tablet") {
       width: var(--fs-carousel-item-width-tablet);
-      height: 100%;
     }
 
     @include media(">=desktop") {

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

@@ -117,7 +117,12 @@
       border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
       border: var(--fs-image-gallery-selector-thumbnail-border-width) solid transparent;
       transition: all var(--fs-image-gallery-transition-timing) var(--fs-image-gallery-transition-function);
-      img { border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius); }
+      img {
+        border-radius: var(--fs-image-gallery-selector-thumbnail-border-radius);
+        object-fit: cover;
+        height: inherit;
+        max-width: inherit;
+      }
       > span {
         width: 100%;
         height: 100%;
@@ -139,7 +144,9 @@
       transform: scale(0.95);
     }
 
-    @include focus-ring-visible;
+    &:focus-visible [data-fs-button-wrapper] {
+      @include focus-ring;
+    }
 
     @include media(">=notebook") {
       width: var(--fs-image-gallery-selector-thumbnail-width-notebook);
@@ -207,6 +214,15 @@
     }
   }
 
+  @mixin image_pos($pos) {
+    [data-fs-image-gallery-position='#{$pos}'] {
+      object-position: $pos;
+      [data-fs-image] {
+        object-position: $pos;
+      }
+    }
+  }
+
   // --------------------------------------------------------
   // Variants Styles
   // --------------------------------------------------------
@@ -218,4 +234,25 @@
       column-gap: var(--fs-image-gallery-gap-notebook);
     }
   }
+
+  &[data-fs-image-gallery-position="top"] {
+    > [data-fs-image],
+    [data-fs-image-gallery-selector-thumbnail] [data-fs-image] {
+      object-position: top;
+    }
+  }
+
+  &[data-fs-image-gallery-position="center"] {
+    > [data-fs-image],
+    [data-fs-image-gallery-selector-thumbnail] [data-fs-image] {
+      object-position: center;
+    }
+  }
+
+  &[data-fs-image-gallery-position="bottom"] {
+    > [data-fs-image],
+    [data-fs-image-gallery-selector-thumbnail] [data-fs-image] {
+      object-position: bottom;
+    }
+  }
 }

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

@@ -117,6 +117,12 @@
     row-gap: var(--fs-product-details-vertical-spacing);
   }
 
+  [data-fs-product-details-prices] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
   [data-fs-product-details-values] {
     display: flex;
     justify-content: space-between;
@@ -172,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;