@faststore/ui 2.0.139-alpha.0 → 2.0.151-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.139-alpha.0",
+  "version": "2.0.151-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": "ad144308f377a12dce5341d3192e3d3d1a6a8b34"
+  "gitHead": "6e3e406c91c7dd87beff20ddf090f4ad724b3a7d"
 }

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

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

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

@@ -20,6 +20,9 @@
   --fs-footer-title-weight                        : var(--fs-text-weight-bold);
   --fs-footer-title-margin-bottom                 : var(--fs-spacing-1);
 
+  // Logo
+  --fs-footer-logo-width                          : var(--fs-logo-width);
+
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
@@ -32,14 +35,6 @@
     padding-top: 0;
   }
 
-  [data-fs-footer-logo] {
-    margin: var(--fs-spacing-3) 0;
-    display: block;
-    width: 7rem;
-    height: 100%;
-    min-height: var(--fs-spacing-6);
-  }
-
   [data-fs-footer-links-title],
   [data-fs-footer-social-title] {
     margin-bottom: var(--fs-footer-title-margin-bottom);
@@ -76,6 +71,14 @@
         grid-column: span 12;
       }
     }
+
+    [data-fs-logo] {
+      width: var(--fs-footer-logo-width);
+
+      [data-fs-image] {
+        object-position: left top;
+      }
+    }
   }
 
   [data-fs-footer-navigation] {
@@ -158,7 +161,6 @@
 
   [data-fs-footer-copyright] {
     p {
-      margin: var(--fs-spacing-2) auto;
       white-space: break-spaces;
     }
 

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

@@ -33,6 +33,7 @@
   --fs-navbar-search-expanded-button-icon-margin-right   : -4.063rem;
 
   // Logo
+  --fs-navbar-logo-width                                 : var(--fs-logo-width);
   --fs-navbar-logo-border-left-width                     : var(--fs-border-width);
   --fs-navbar-logo-border-left-color                     : var(--fs-border-color-light);
 
@@ -82,6 +83,7 @@
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    height: 100%;
 
     @include media("<notebook") {
       padding: 0;
@@ -185,9 +187,11 @@
     overflow-x: clip;
     background-color: var(--fs-navbar-bkg-color);
     backdrop-filter: blur(10px);
+    height: 100%;
   }
 
   [data-fs-navbar-logo] {
+    height: 100%;
     align-self: stretch;
 
     @include media("<notebook") {
@@ -196,5 +200,13 @@
       margin-left: var(--fs-spacing-0);
       border-left: var(--fs-navbar-logo-border-left-width) solid var(--fs-navbar-logo-border-left-color);
     }
+
+    [data-fs-logo] {
+      width: var(--fs-navbar-logo-width);
+      
+      @include media(">=notebook") {
+        padding: var(--fs-spacing-2) 0;
+      }
+    }
   }
 }

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

@@ -7,6 +7,7 @@
   --fs-navbar-slider-padding                    : var(--fs-spacing-3);
 
   // Header
+  --fs-navbar-slider-header-height              : 5rem;
   --fs-navbar-slider-header-padding-bottom      : var(--fs-spacing-2);
   --fs-navbar-slider-header-button-margin-right : calc(-1 * var(--fs-spacing-1));
 
@@ -15,7 +16,6 @@
   --fs-navbar-slider-footer-margin-top          : var(--fs-navbar-slider-header-padding-bottom);
 
   // Logo
-  --fs-navbar-slider-logo-height                : 2.375rem;
   --fs-navbar-slider-logo-padding               : 0;
   --fs-navbar-slider-logo-margin-right          : var(--fs-spacing-5);
 
@@ -27,18 +27,14 @@
 
   [data-fs-navbar-slider-header] {
     padding: 0;
+    height: var(--fs-navbar-slider-header-height);
     padding-bottom: var(--fs-navbar-slider-header-padding-bottom);
   }
 
   [data-fs-navbar-slider-logo] {
-    height: var(--fs-navbar-slider-logo-height);
+    height: 100%;
     padding: var(--fs-navbar-slider-logo-padding);
     margin-right: var(--fs-navbar-slider-logo-margin-right);
-
-    img {
-      width: 100%;
-      height: 100%;
-    }
   }
 
   [data-fs-navbar-slider-footer] {

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

@@ -163,7 +163,7 @@
   // Content Section
   // -----------------------------
 
-  [data-fs-product-details-content] {
+  [data-fs-product-description] {
     @include media(">=tablet") {
       grid-row: span 10;
       grid-column: span 7;
@@ -175,7 +175,7 @@
     }
   }
 
-  [data-fs-image-gallery="with-selector"] ~ [data-fs-product-details-content] {
+  [data-fs-image-gallery="with-selector"] ~ [data-fs-product-description] {
     @include media(">=notebook") {
       grid-column: 2 / 9;
     }

package/src/styles/base/tokens.scss

@@ -271,4 +271,7 @@ body {
   --fs-shadow                          : none;
   --fs-shadow-darker                   : 0 0 10px rgb(0 0 0 / 20%);
   --fs-shadow-hover                    : 0 2px 3px rgba(0,0,0,.1);
+
+  // LOGO
+  --fs-logo-width                      : 7rem;
 }