@faststore/ui 3.65.0 → 3.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "3.65.0",
+  "version": "3.68.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -47,7 +47,7 @@
     }
   ],
   "dependencies": {
-    "@faststore/components": "^3.65.0",
+    "@faststore/components": "^3.68.0",
     "include-media": "^1.4.10",
     "modern-normalize": "^1.1.0",
     "react-swipeable": "^7.0.0",
@@ -70,5 +70,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "1dea73f0a9afa63aa0edcc3eb8433bd1155f3e74"
+  "gitHead": "ecc700eec58eaa22c6ae8c5f655c204ecf18f598"
 }

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

@@ -105,4 +105,4 @@
       cursor: not-allowed;
     }
   }
-};
+}

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

@@ -0,0 +1,82 @@
+[data-fs-pickup-point-card] {
+  // --------------------------------------------------------
+  // Design Tokens for Pickup Point Card
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-pickup-point-card-height                          : 140px;
+  --fs-pickup-point-card-row-gap                         : var(--fs-grid-gap-2);
+  --fs-pickup-point-card-padding                         : var(--fs-spacing-3);
+  --fs-pickup-point-card-border-width                    : var(--fs-border-width);
+  --fs-pickup-point-card-border-color                    : var(--fs-border-color-light);
+  --fs-pickup-point-card-border-radius                   : var(--fs-border-radius);
+
+  // Header
+  --fs-pickup-point-card-header-icon-color               : var(--fs-border-color-disabled);
+  --fs-pickup-point-card-header-title-font-weight        : var(--fs-text-weight-medium);
+
+  // Distance
+  --fs-pickup-point-card-distance-color                  : var(--fs-color-text-light);
+  --fs-pickup-point-card-distance-font-size              : var(--fs-text-size-legend);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-pickup-point-card-row-gap);
+  justify-content: space-between;
+  height: var(--fs-pickup-point-card-height);
+  padding: var(--fs-pickup-point-card-padding);
+  border:
+    var(--fs-pickup-point-card-border-width) solid
+    var(--fs-pickup-point-card-border-color);
+  border-radius: var(--fs-pickup-point-card-border-radius);
+
+  [data-fs-pickup-point-card-header] {
+    display: flex;
+    column-gap: var(--fs-grid-gap-1);
+    align-items: center;
+
+    [data-fs-icon] {
+      color: var(--fs-pickup-point-card-header-icon-color);
+    }
+  }
+
+  [data-fs-pickup-point-card-header-title] {
+    font-weight: var(--fs-pickup-point-card-header-title-font-weight);
+
+    @include truncate-title(1);
+  }
+
+  [data-fs-pickup-point-card-header-postal-code] {
+    margin-left: auto;
+  }
+
+  [data-fs-pickup-point-card-header-postal-code],
+  [data-fs-pickup-point-card-distance] {
+    font-size: var(--fs-pickup-point-card-distance-font-size);
+    color: var(--fs-pickup-point-card-distance-color);
+    white-space: nowrap;
+  }
+
+  [data-fs-pickup-point-card-header-content] {
+    display: flex;
+    flex-direction: row;
+    column-gap: var(--fs-grid-gap-1);
+    align-items: flex-end;
+    justify-content: space-between;
+  }
+
+  [data-fs-pickup-point-card-address] {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    font-size: var(--fs-pickup-point-card-distance-font-size);
+
+    > span {
+      @include truncate-title(3);
+    }
+  }
+}

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

@@ -5,7 +5,7 @@
 
   // Default properties
   --fs-region-bar-width                    : 100%;
-  --fs-region-bar-padding                  : var(--fs-spacing-0) var(--fs-spacing-1) var(--fs-spacing-1) var(--fs-spacing-2);
+  --fs-region-bar-padding                  : var(--fs-spacing-0) 0 var(--fs-spacing-0) var(--fs-spacing-2);
 
   --fs-region-bar-text-color               : var(--fs-color-text-display);
 
@@ -15,15 +15,24 @@
   --fs-region-bar-border-bottom-color      : var(--fs-border-color-light);
 
   // CTA
+  // @deprecated
   --fs-region-bar-cta-margin-left          : auto;
   --fs-region-bar-cta-text-decoration      : underline;
 
   // Message
+  // @deprecated
   --fs-region-bar-message-margin-right     : auto;
 
   // Postal Code
+  // @deprecated
   --fs-region-bar-postal-code-margin-right : auto;
 
+  // Icon
+  --fs-region-bar-icon-margin-right        : var(--fs-spacing-1);
+
+  // Location
+  --fs-region-bar-location-height          : var(--fs-spacing-4);
+
   // --------------------------------------------------------
   // Structural Styles
   // --------------------------------------------------------
@@ -33,31 +42,84 @@
   [data-fs-button] {
     width: var(--fs-region-bar-width);
 
-    [data-fs-button-wrapper]{
+    [data-fs-button-wrapper] {
+      gap: 0;
+      justify-content: flex-start;
       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;
       }
     }
+
+    &:last-child {
+      border-bottom: var(--fs-region-bar-border-bottom-width) solid var(--fs-region-bar-border-bottom-color);
+    }
+  }
+
+  [data-fs-icon] {
+    flex-shrink: 0;
+    margin-right: var(--fs-region-bar-icon-margin-right);
+
+    &:last-child {
+      position: absolute;
+      right: 0;
+    }
   }
 
+  // @deprecated
   [data-fs-region-bar-cta] {
     margin-left: var(--fs-region-bar-cta-margin-left);
     text-decoration: var(--fs-region-bar-cta-text-decoration);
   }
 
+  // @deprecated
   [data-fs-region-bar-postal-code] {
     margin-right: var(--fs-region-bar-postal-code-margin-right);
     font-weight: var(--fs-text-weight-regular);
   }
 
+  // @deprecated
   [data-fs-region-bar-message] {
     margin-right: var(--fs-region-bar-message-margin-right);
     font-weight: var(--fs-text-weight-regular);
   }
+
+  [data-fs-region-bar-location] {
+    display: flex;
+    flex-direction: row;
+    gap: 0;
+    align-items: center;
+    max-width: 80%;
+  }
+
+  [data-fs-region-bar-location-city],
+  [data-fs-region-bar-location-message],
+  [data-fs-region-bar-filter],
+  [data-fs-region-bar-filter-message] {
+    align-content: center;
+    height: var(--fs-region-bar-location-height);
+    overflow: hidden;
+    font-weight: var(--fs-text-weight-semibold);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [data-fs-region-bar-location-city] {
+    flex: 1 1 auto;
+  }
+
+  [data-fs-region-bar-location-postal-code] {
+    flex-shrink: 0;
+    font-weight: var(--fs-text-weight-semibold);
+    white-space: nowrap;
+  }
+
+  [data-fs-region-bar-filter],
+  [data-fs-region-bar-filter-message] {
+    max-width: 80%;
+  }
 }

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

@@ -27,39 +27,38 @@
   // Structural Styles
   // --------------------------------------------------------
 
-    position: absolute;
-    top: var(--fs-search-dropdown-position-top-mobile);
-    left: var(--fs-search-dropdown-position-left-mobile);
-    z-index: 1;
-    width: var(--fs-search-dropdown-width-mobile);
-    padding-top: 0;
-    background-color: var(--fs-search-dropdown-bkg-color);
+  position: absolute;
+  top: var(--fs-search-dropdown-position-top-mobile);
+  left: var(--fs-search-dropdown-position-left-mobile);
+  z-index: 1;
+  width: var(--fs-search-dropdown-width-mobile);
+  padding-top: 0;
+  background-color: var(--fs-search-dropdown-bkg-color);
+  &:empty { display: none; }
 
-    &:empty { display: none; }
-
-    @include media(">=tablet") {
-      top: var(--fs-search-dropdown-position-top-tablet);
-      left: var(--fs-search-dropdown-position-left-tablet);
-    }
+  @include media(">=tablet") {
+    top: var(--fs-search-dropdown-position-top-tablet);
+    left: var(--fs-search-dropdown-position-left-tablet);
+  }
 
-    @include media(">=notebook") {
-      top: var(--fs-search-dropdown-position-top-desktop);
-      left: 0;
-      width: var(--fs-search-dropdown-width-desktop);
-      overflow: hidden;
-      border: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-border-color);
-      border-top: none;
-      border-radius: var(--fs-search-dropdown-border-radius);
-      box-shadow: var(--fs-search-dropdown-box-shadow);
-    }
+  @include media(">=notebook") {
+    top: var(--fs-search-dropdown-position-top-desktop);
+    left: 0;
+    width: var(--fs-search-dropdown-width-desktop);
+    overflow: hidden;
+    border: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-border-color);
+    border-top: none;
+    border-radius: var(--fs-search-dropdown-border-radius);
+    box-shadow: var(--fs-search-dropdown-box-shadow);
+  }
 
-    [data-fs-search-dropdown-loading-text] { padding: var(--fs-spacing-3); }
+  [data-fs-search-dropdown-loading-text] { padding: var(--fs-spacing-3); }
 
-    section, [data-fs-search-section] {
-      border-bottom: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-section-border-color);
+  section, [data-fs-search-section] {
+    border-bottom: var(--fs-search-dropdown-border-width) solid var(--fs-search-dropdown-section-border-color);
 
-      &:last-child {
-        border-bottom-width: 0;
-      }
+    &:last-child {
+      border-bottom-width: 0;
     }
   }
+}

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

@@ -73,6 +73,7 @@
         font-size: var(--fs-filter-accordion-button-text-size);
         font-weight: var(--fs-filter-accordion-button-text-weight);
         line-height: var(--fs-filter-accordion-button-line-height);
+
         @include media(">=notebook") {
           padding-right: var(--fs-filter-accordion-button-padding-right-notebook);
           padding-left: var(--fs-filter-accordion-button-padding-left-notebook);
@@ -88,6 +89,13 @@
         padding-left: var(--fs-filter-accordion-item-panel-padding-left-notebook);
       }
     }
+
+    [data-fs-filter-accordion-item-description] {
+      display: flex;
+      margin-bottom: var(--fs-spacing-4);
+      font-size: var(--fs-text-size-legend);
+      line-height: 1.42;
+    }
   }
 
   [data-fs-filter-list] {
@@ -121,4 +129,28 @@
   [data-fs-filter-list-item-badge] {
     margin-left: var(--fs-filter-list-item-badge-margin-left);
   }
+
+  [data-fs-filter-list-item-radio] {
+    + [data-fs-label] {
+      display: inline-flex;
+      flex-wrap: wrap;
+      column-gap: var(--fs-spacing-0);
+      align-items: center;
+    }
+  }
+
+  [data-fs-filter-list-item-button] {
+    min-height: fit-content;
+    padding: 0;
+    color: var(--fs-color-link);
+
+    [data-fs-button-wrapper] {
+      padding: 0;
+      font-weight: var(--fs-text-weight-medium);
+    }
+  }
+
+  [data-fs-filter-list-delivery-button] {
+    width: 100%;
+  }
 }

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

@@ -5,11 +5,11 @@
 
   // Content
   --fs-filter-slider-content-height                   : calc(100vh - var(--fs-filter-slider-footer-height));
-  --fs-filter-slider-content-padding                  : var(--fs-spacing-3) var(--fs-spacing-3) calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3));
+  --fs-filter-slider-content-padding                  : 0 var(--fs-spacing-3);
 
-  // Title 
-  --fs-filter-slider-title-font-size                  : var(--fs-text-size-4);
-  --fs-filter-slider-title-font-weight                : var(--fs-text-weight-bold);
+  // Title
+  --fs-filter-slider-title-font-size                  : var(--fs-text-size-3);
+  --fs-filter-slider-title-font-weight                : var(--fs-text-weight-semibold);
   --fs-filter-slider-title-line-height                : 1.12;
 
   // Footer
@@ -25,10 +25,34 @@
 
   --fs-filter-slider-footer-button-apply-width        : 60%;
 
+  // Link
+  --fs-filter-link-padding                            : 0;
+  --fs-filter-link-column-gap                         : var(--fs-spacing-0);
+  --fs-filter-link-color                              : var(--fs-color-link);
+
   [data-fs-filter-slider-content] {
     height: var(--fs-filter-slider-content-height);
-    padding: var(--fs-filter-slider-content-padding);
+    padding-bottom: calc(var(--fs-filter-slider-footer-height) + var(--fs-spacing-3));
     overflow-y: auto;
+
+    [data-fs-slide-over-header] {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        display: block;
+        width: 100%;
+        height: 1px;
+        content: "";
+        background-color: var(--fs-border-color-light);
+      }
+    }
+  }
+
+  [data-fs-filter] {
+    padding: var(--fs-filter-slider-content-padding);
   }
 
   [data-fs-filter-slider-title] {
@@ -37,10 +61,6 @@
     line-height: var(--fs-filter-slider-title-line-height);
   }
 
-  [data-fs-slide-over-header] {
-    padding: 0;
-  }
-
   [data-fs-filter-slider-footer] {
     position: sticky;
     bottom: 0;

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

@@ -92,7 +92,11 @@
     }
 
     [data-fs-navbar-button-menu] {
-      @include media(">=notebook") { display: none; }
+      @include media(">=notebook") {
+        display: none;
+      }
+
+      margin: 0 var(--fs-spacing-1);
     }
   }
 

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

@@ -0,0 +1,43 @@
+[data-fs-pickup-point-cards] {
+  // --------------------------------------------------------
+  // Design Tokens for Pickup Point Cards
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-pickup-point-cards-row-gap                      : var(--fs-grid-gap-2);
+
+  // Pickup Point Card Item
+  --fs-pickup-point-cards-item-border-color-selected   : var(--fs-border-color-active);
+  --fs-pickup-point-cards-item-border-width-selected   : var(--fs-border-width-thick);
+
+  --fs-pickup-point-cards-item-bkg-color-hover         : var(--fs-color-neutral-bkg);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--fs-pickup-point-cards-row-gap);
+  margin: var(--fs-spacing-3) 0;
+
+  [data-fs-pickup-point-cards-item] {
+    [data-fs-radio-option-item] {
+      position: absolute;
+      opacity: 0;
+    }
+
+    input:checked + [data-fs-pickup-point-card] {
+      border-color: var(--fs-pickup-point-cards-item-border-color-selected);
+      border-width: var(--fs-pickup-point-cards-item-border-width-selected);
+
+      [data-fs-icon] {
+        color: var(--fs-pickup-point-cards-item-border-color-selected);
+      }
+    }
+
+    input:hover + [data-fs-pickup-point-card] {
+      background-color: var(--fs-pickup-point-cards-item-bkg-color-hover);
+    }
+  }
+}

package/src/styles/components.scss

@@ -35,6 +35,7 @@
 @import "../components/molecules/Modal/styles";
 @import "../components/molecules/NavbarLinks/styles";
 @import "../components/molecules/OrderSummary/styles";
+@import "../components/molecules/PickupPointCard/styles";
 @import "../components/molecules/Popover/styles";
 @import "../components/molecules/ProductCard/styles";
 @import "../components/molecules/ProductCardSkeleton/styles";
@@ -78,6 +79,7 @@
 @import "../components/organisms/Newsletter/styles";
 @import "../components/organisms/OutOfStock/styles";
 @import "../components/organisms/PaymentMethods/styles";
+@import "../components/organisms/PickupPointCards/styles";
 @import "../components/organisms/PriceRange/styles";
 @import "../components/organisms/ProductDetails/styles";
 @import "../components/organisms/ProductGallery/styles";