@faststore/ui 2.0.93-alpha.0 → 2.0.99-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.93-alpha.0",
+  "version": "2.0.99-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": "641fafa52d0c7d74024438f784f0ca3f61426df9"
+  "gitHead": "66eb3557fc7b19e210fee38eda199d5e1b18b1a3"
 }

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

@@ -75,7 +75,10 @@
     position: absolute;
     background-color: var(--fs-qty-selector-button-bkg-color);
 
-    [data-fs-icon] {
+    [data-fs-button-icon] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       width: 100%;
       height: 100%;
       border-radius: var(--fs-qty-selector-button-border-radius);
@@ -90,7 +93,7 @@
 
     &:last-of-type { right: 0; }
 
-    &:hover:not(:disabled) [data-fs-icon] {
+    &:hover:not(:disabled) [data-fs-button-icon] {
       background-color: var(--fs-qty-selector-button-bkg-color-hover);
       box-shadow: var(--fs-qty-selector-button-shadow-hover);
     }
@@ -103,7 +106,7 @@
         background-color: var(--fs-qty-selector-button-bkg-color);
       }
 
-      [data-fs-icon] {
+      [data-fs-button-icon] {
         color: var(--fs-qty-selector-disabled-icon-color);
       }
     }
@@ -123,7 +126,7 @@
       outline: none;
       box-shadow: none;
 
-      [data-fs-icon] {
+      [data-fs-button-icon] {
         @include focus-ring;
 
         background-color: var(--fs-qty-selector-button-bkg-color-focus);
@@ -149,6 +152,6 @@
     [data-quantity-selector-input] {
       border-color: var(--fs-qty-selector-disabled-border-color);
     }
-    [data-quantity-selector-button]:hover [data-fs-icon] { background-color: transparent; }
+    [data-quantity-selector-button]:hover [data-fs-button-icon] { background-color: transparent; }
   }
 }

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

@@ -42,8 +42,8 @@
     overflow: hidden;
   }
 
-  [data-fs-rating-icon-outline] {
-    svg { fill: none; }
+  svg[data-fs-rating-icon-outline] { 
+    fill: none; 
   }
 
   [data-fs-rating-item] { position: relative; }
@@ -52,7 +52,7 @@
   // Variants Styles
   // --------------------------------------------------------
 
-  [data-fs-rating-item="empty"] [data-fs-icon] svg {
+  [data-fs-rating-item="empty"] svg[data-fs-icon] {
     fill: none;
   }
 

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

@@ -0,0 +1,60 @@
+[data-fs-region-bar] {
+  // --------------------------------------------------------
+  // Design Tokens for Region Bar
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-region-bar-width                    : 100%;
+  --fs-region-bar-padding                  : var(--fs-spacing-0) var(--fs-spacing-2) var(--fs-spacing-0) var(--fs-spacing-3);
+
+  --fs-region-bar-text-color               : var(--fs-color-text-display);
+
+  --fs-region-bar-bkg-color                : var(--fs-color-body-bkg);
+
+  --fs-region-bar-border-bottom-width      : var(--fs-border-width);
+  --fs-region-bar-border-bottom-color      : var(--fs-border-color-light);
+
+  // CTA
+  --fs-region-bar-cta-margin-left          : auto;
+  --fs-region-bar-cta-text-decoration      : underline;
+
+  // Message
+  --fs-region-bar-message-margin-right     : auto;
+
+  // Postal Code
+  --fs-region-bar-postal-code-margin-right : auto;
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: var(--fs-region-bar-width);
+
+  [data-fs-button] {
+    width: var(--fs-region-bar-width);
+    padding: var(--fs-region-bar-padding);
+    color: var(--fs-region-bar-text-color);
+    background-color: var(--fs-region-bar-bkg-color);
+    border-bottom: var(--fs-region-bar-border-bottom-width) solid var(--fs-region-bar-border-bottom-color);
+    border-radius: 0;
+
+    > span {
+      display: contents;
+    }
+  }
+
+  [data-fs-region-bar-cta] {
+    margin-left: var(--fs-region-bar-cta-margin-left);
+    text-decoration: var(--fs-region-bar-cta-text-decoration);
+  }
+
+  [data-fs-region-bar-postal-code] {
+    margin-right: var(--fs-region-bar-postal-code-margin-right);
+    font-weight: var(--fs-text-weight-regular);
+  }
+
+  [data-fs-region-bar-message] {
+    margin-right: var(--fs-region-bar-message-margin-right);
+    font-weight: var(--fs-text-weight-regular);
+  }
+}

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

@@ -7,7 +7,7 @@
   --fs-tag-text-color                     : var(--fs-color-text);
 
   // Icon
-  --fs-tag-icon-size                      : var(--fs-spacing-3);
+  --fs-tag-icon-size                      : var(--fs-spacing-4);
   --fs-tag-icon-stroke-width              : var(--fs-spacing-4);
 
   position: relative;
@@ -32,18 +32,18 @@
     height: var(--fs-control-tap-size);
     color: var(--fs-tag-text-color);
 
-    > span {
+    > [data-fs-icon] {
       border: var(--fs-border-width) solid transparent;
       border-radius: var(--fs-border-radius-circle);
       padding: 3px;
       transition: var(--fs-badge-transition-property) var(--fs-badge-transition-timing) var(--fs-badge-transition-function);
     }
 
-    &:hover > span, &:focus > span {
+    &:hover > [data-fs-icon], &:focus > [data-fs-icon] {
       filter: brightness(0.90);
     }
 
-    &:focus > span {
+    &:focus > [data-fs-icon] {
       border: var(--fs-border-width) solid var(--fs-tag-text-color);
     }
 
@@ -62,37 +62,37 @@
   }
 
   &[data-fs-badge-variant="warning"] {
-    [data-fs-tag-icon-button] > span {
+    [data-fs-tag-icon-button] > [data-fs-icon]  {
       background-color: var(--fs-badge-warning-bkg-color);
     }
   }
 
   &[data-fs-badge-variant="highlighted"] {
-    [data-fs-tag-icon-button] > span {
+    [data-fs-tag-icon-button] > [data-fs-icon]  {
       background-color: var(--fs-badge-highlighted-bkg-color);
     }
   }
 
   &[data-fs-badge-variant="neutral"] {
-    [data-fs-tag-icon-button] > span {
+    [data-fs-tag-icon-button] > [data-fs-icon]  {
       background-color: var(--fs-badge-neutral-bkg-color);
     }
   }
 
   &[data-fs-badge-variant="info"] {
-    [data-fs-tag-icon-button] > span {
+    [data-fs-tag-icon-button] > [data-fs-icon]  {
       background-color: var(--fs-badge-info-bkg-color);
     }
   }
 
   &[data-fs-badge-variant="danger"] {
-    [data-fs-tag-icon-button] > span {
+    [data-fs-tag-icon-button] > [data-fs-icon]  {
       background-color: var(--fs-badge-danger-bkg-color);
     }
   }
 
   &[data-fs-badge-variant="success"] {
-    [data-fs-tag-icon-button] > span {
+    [data-fs-tag-icon-button] > [data-fs-icon]  {
       background-color: var(--fs-badge-success-bkg-color);
     }
   }

package/src/styles/components.scss

@@ -33,6 +33,7 @@
 @import "../components/molecules/QuantitySelector/styles";
 @import "../components/molecules/RadioField/styles";
 @import "../components/molecules/Rating/styles";
+@import "../components/molecules/RegionBar/styles";
 @import "../components/molecules/SearchAutoComplete/styles";
 @import "../components/molecules/SearchDropdown/styles";
 @import "../components/molecules/SearchHistory/styles";