@faststore/ui 2.0.117-alpha.0 → 2.0.128-alpha.0

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

@@ -0,0 +1,218 @@
+[data-fs-footer] {
+  // --------------------------------------------------------
+  // Design Tokens for Footer
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-footer-spacing-vertical-mobile             : var(--fs-spacing-4);
+  --fs-footer-spacing-vertical-notebook           : var(--fs-spacing-5);
+  --fs-footer-spacing-horizontal-notebook         : var(--fs-grid-gap-3);
+
+  --fs-footer-bkg-color                           : var(--fs-color-neutral-bkg);
+
+  // Divisor
+  --fs-footer-divisor-border-width                : var(--fs-border-width);
+  --fs-footer-divisor-border-color                : var(--fs-border-color-light);
+
+  // Title
+  --fs-footer-title-size                          : var(--fs-text-size-body);
+  --fs-footer-title-line-height                   : 1.25;
+  --fs-footer-title-weight                        : var(--fs-text-weight-bold);
+  --fs-footer-title-margin-bottom                 : var(--fs-spacing-1);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  &[data-fs-footer] {
+    background-color: var(--fs-footer-bkg-color);
+  }
+
+  @include media("<notebook") {
+    padding-top: 0;
+  }
+
+  [data-fs-logo] {
+    background-position-y: var(--fs-spacing-0);
+  }
+
+  [data-fs-footer-title] {
+    margin-bottom: var(--fs-footer-title-margin-bottom);
+    font-size: var(--fs-footer-title-size);
+    font-weight: var(--fs-footer-title-weight);
+    line-height: var(--fs-footer-title-line-height);
+
+    @include media("<notebook") {
+      text-align: center;
+    }
+  }
+
+  [data-fs-footer-note],
+  [data-fs-footer-nav] {
+    position: relative;
+    display: flex;
+
+    @include media("<notebook") {
+      flex-direction: column;
+    }
+
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      column-gap: var(--fs-footer-spacing-horizontal-notebook);
+    }
+
+    &:not(:first-of-type)::before {
+      width: 100%;
+      content: "";
+      border-top: var(--fs-footer-divisor-border-width) solid var(--fs-footer-divisor-border-color);
+
+      @include media(">=notebook") {
+        grid-column: span 12;
+      }
+    }
+  }
+
+  [data-fs-footer-nav] {
+    @include media(">=notebook") {
+      row-gap: var(--fs-footer-spacing-vertical-notebook);
+      padding-bottom: var(--fs-footer-spacing-vertical-notebook);
+    }
+  }
+
+  [data-fs-footer-note] {
+    position: relative;
+
+    @include media("<notebook") {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+
+      &::before {
+        padding-bottom: var(--fs-footer-spacing-vertical-mobile);
+      }
+    }
+
+    @include media(">=notebook") {
+      row-gap: var(--fs-footer-spacing-vertical-notebook);
+      padding-top: 0;
+    }
+  }
+
+  [data-fs-footer-social],
+  [data-fs-payment-methods] {
+    @include media(">=notebook") {
+      grid-column: 11 / span 2;
+      margin-left: calc(-1 * var(--fs-spacing-3));
+    }
+  }
+
+  [data-fs-footer-social] {
+    display: flex;
+    flex-direction: column;
+
+    @include media("<notebook") {
+      padding: var(--fs-footer-spacing-vertical-mobile) 0 var(--fs-spacing-3);
+    }
+
+    [data-fs-list] {
+      display: flex;
+      justify-content: center;
+
+      @include media(">=notebook") {
+        justify-content: space-between;
+      }
+
+      [data-fs-link] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: var(--fs-control-tap-size);
+        min-height: var(--fs-control-tap-size);
+        padding: var(--fs-spacing-1);
+      }
+    }
+  }
+
+  [data-fs-payment-methods] {
+    @include media("<notebook") {
+      margin: var(--fs-footer-spacing-vertical-mobile) auto;
+    }
+
+    @include media(">=notebook") {
+      order: 3;
+    }
+  }
+
+  [data-fs-icon] {
+    @include media(">=notebook") {
+      grid-column: span 2;
+    }
+  }
+
+  [data-fs-footer-copyright] {
+    p + p {
+      margin: var(--fs-spacing-2) auto;
+    }
+
+    address {
+      font-style: normal;
+    }
+
+    @include media(">=notebook") {
+      grid-column: span 6;
+    }
+  }
+
+  [data-fs-footer-links-columns] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(0, auto));
+    grid-gap: var(--fs-footer-spacing-horizontal-notebook);
+  }
+
+  &[data-fs-footer-links] {
+    [data-fs-link] {
+      display: inline-block;
+      padding-left: 0;
+    }
+
+    @include media(">=notebook") {
+      grid-column: span 9;
+    }
+
+    @include media(">=desktop") {
+      grid-column: span 8;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-footer-incentives="true"] {
+    @include media(">=notebook") {
+      padding-top: 0;
+    }
+  }
+
+  &:not([data-fs-footer-social="true"]) {
+    [data-fs-footer-note]::before {
+      @include media("<notebook") {
+        border-color: transparent;
+      }
+    }
+
+    [data-fs-footer-links] {
+      @include media(">=notebook") {
+        grid-column: span 12;
+      }
+    }
+  }
+
+  &:not([data-fs-footer-payment-methods="true"]) [data-fs-footer-copyright] {
+    @include media(">=notebook") {
+      grid-column: span 10;
+    }
+  }
+}

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

@@ -0,0 +1,120 @@
+[data-fs-incentives] {
+  // --------------------------------------------------------
+  // Design Tokens for Incentives
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-incentives-bkg-color               : var(--fs-color-primary-bkg-light);
+
+  --fs-incentives-gap                     : var(--fs-spacing-4);
+  --fs-incentives-padding-top             : var(--fs-incentives-gap);
+  --fs-incentives-padding-bottom          : var(--fs-incentives-gap);
+
+  --fs-incentives-border-color            : var(--fs-border-color-light);
+  --fs-incentives-border-width            : var(--fs-border-width);
+
+  // Title
+  --fs-incentives-title-size              : var(--fs-text-size-1);
+  --fs-incentives-title-weight            : var(--fs-text-weight-bold);
+  --fs-incentives-title-line-height       : 1.42;
+  --fs-incentives-title-color             : var(--fs-color-text);
+
+  // Description
+  --fs-incentives-description-size        : var(--fs-incentives-title-size);
+  --fs-incentives-description-line-height : 1.14;
+  --fs-incentives-description-color       : var(--fs-incentives-title-color);
+
+  // Incentive Icon
+  --fs-incentives-icon-color              : var(--fs-incentives-title-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  justify-content: center;
+  padding-top: var(--fs-incentives-padding-top);
+  padding-bottom: var(--fs-incentives-padding-bottom);
+
+  [data-fs-list] {
+    display: flex;
+    width: fit-content;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    @include media(">=notebook") {
+      justify-content: center;
+    }
+  }
+
+  [data-fs-incentive] {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    @include media("<notebook") {
+      row-gap: var(--fs-spacing-0);
+    }
+
+    @include media(">=notebook") {
+      flex-direction: row;
+
+      [data-fs-incentive-content] {
+        margin-left: var(--fs-spacing-2);
+        text-align: left;
+      }
+    }
+  }
+
+  [data-fs-incentive-title] {
+    font-size: var(--fs-incentives-title-size);
+    font-weight: var(--fs-incentives-title-weight);
+    line-height: var(--fs-incentives-title-line-height);
+    color: var(--fs-incentives-title-color);
+  }
+
+  [data-fs-incentive-description] {
+    display: block;
+    font-size: var(--fs-incentives-description-size);
+    line-height: var(--fs-incentives-description-line-height);
+    color: var(--fs-incentives-description-color);
+    white-space: nowrap;
+  }
+
+  [data-fs-incentive-content] {
+    text-align: center;
+  }
+
+  [data-fs-incentive-icon] {
+    color: var(--fs-incentives-icon-color);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-incentives-colored="true"] {
+    background-color: var(--fs-incentives-bkg-color);
+  }
+
+  &[data-fs-incentives-variant="vertical"] {
+    ul {
+      flex-direction: column;
+    }
+
+    li:not(:last-child) {
+      padding-bottom: var(--fs-incentives-gap);
+      margin-bottom: var(--fs-incentives-gap);
+      border-bottom: var(--fs-incentives-border-width) solid var(--fs-incentives-border-color);
+    }
+  }
+
+  &[data-fs-incentives-variant="horizontal"] {
+    li:not(:last-child) {
+      padding-right: var(--fs-incentives-gap);
+      margin-right: var(--fs-incentives-gap);
+      border-right: var(--fs-incentives-border-width) solid var(--fs-incentives-border-color);
+    }
+  }
+}

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

@@ -40,9 +40,6 @@
   // Structural Styles
   // --------------------------------------------------------
 
-  position: sticky;
-  top: 0;
-  z-index: var(--fs-z-index-high);
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -183,6 +180,7 @@
   }
 
   [data-fs-navbar-header] {
+    z-index: var(--fs-z-index-top);
     padding: var(--fs-navbar-header-padding);
     overflow-x: clip;
     background-color: var(--fs-navbar-bkg-color);

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

@@ -0,0 +1,133 @@
+[data-fs-newsletter] {
+  // --------------------------------------------------------
+  // Design Tokens for Newsletter
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-newsletter-padding                           : var(--fs-spacing-4) var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1);
+  --fs-newsletter-bkg                               : var(--fs-color-primary-bkg);
+  --fs-newsletter-text-color                        : var(--fs-color-text-inverse);
+
+  // Title
+  --fs-newsletter-title-size                        : var(--fs-text-size-title-section);
+  --fs-newsletter-title-weight                      : var(--fs-text-weight-bold);
+
+  // Card
+  --fs-newsletter-card-border-radius                : var(--fs-border-radius);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: var(--fs-newsletter-padding);
+  color: var(--fs-newsletter-text-color);
+  background-color: var(--fs-newsletter-bkg);
+
+  [data-fs-newsletter-form] {
+    @include media(">=notebook") {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      column-gap: var(--fs-spacing-8);
+      padding-top: var(--fs-spacing-6);
+      padding-bottom: var(--fs-spacing-6);
+
+      [data-fs-newsletter-header] {
+        align-content: flex-start;
+      }
+    }
+
+    [data-fs-newsletter-controls] {
+      @include media(">=notebook") {
+        grid-template-columns: repeat(3, 1fr);
+        margin-top: 0;
+
+        [data-fs-input-field] {
+          grid-column: 1 / span 3;
+        }
+
+        [data-fs-button-inverse] {
+          grid-column: 3;
+        }
+
+        [data-fs-newsletter-addendum] {
+          grid-column: 1 / span 3;
+        }
+      }
+    }
+  }
+
+  [data-fs-newsletter-header] {
+    display: grid;
+    row-gap: var(--fs-spacing-2);
+    line-height: 1.5;
+    text-align: center;
+
+    @include media(">=notebook") {
+      text-align: left;
+    }
+  }
+
+  [data-fs-newsletter-header] h3 {
+    display: grid;
+    grid-template-columns: var(--fs-spacing-5) auto;
+    column-gap: var(--fs-spacing-1);
+    align-items: center;
+    justify-content: center;
+    font-size: var(--fs-newsletter-title-size);
+    font-weight: var(--fs-newsletter-title-weight);
+    color: var(--fs-newsletter-text-color);
+
+    @include media(">=notebook") {
+      justify-content: left;
+    }
+  }
+
+  [data-fs-newsletter-controls] {
+    display: grid;
+    row-gap: var(--fs-spacing-3);
+    margin-top: var(--fs-spacing-4);
+
+    [data-fs-button-inverse] {
+      margin-top: var(--fs-spacing-3);
+    }
+  }
+
+  [data-fs-newsletter-addendum] {
+    text-align: center;
+
+    @include media(">=notebook") {
+      text-align: left;
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-newsletter="card"] {
+    text-align: center;
+    border-radius: var(--fs-newsletter-card-border-radius);
+
+    [data-fs-newsletter-header] {
+      text-align: center;
+    }
+
+    @include media(">=notebook") {
+      [data-fs-newsletter-form] {
+        display: block;
+      }
+
+      [data-fs-newsletter-controls] {
+        margin-top: var(--fs-spacing-4);
+      }
+    }
+
+    [data-fs-newsletter-header] h3 {
+      justify-content: center;
+    }
+  }
+}

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

@@ -0,0 +1,183 @@
+[data-fs-product-details] {
+  // --------------------------------------------------------
+  // Design Tokens for Product Details
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-product-details-vertical-spacing      : var(--fs-spacing-4);
+
+  --fs-product-details-section-border-radius : var(--fs-border-radius);
+  --fs-product-details-section-border-color  : var(--fs-border-color-light);
+  --fs-product-details-section-border-width  : var(--fs-border-width);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  margin-top: 0;
+
+  [data-fs-product-details-body] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-details-vertical-spacing);
+
+    @include media(">=tablet") {
+      display: grid;
+      grid-template-columns: repeat(12, 1fr);
+      row-gap: 0;
+      column-gap: var(--fs-product-details-vertical-spacing);
+    }
+  }
+
+  [data-fs-product-details-section] {
+    height: fit-content;
+
+    [data-fs-buy-button] {
+      width: 100%;
+      margin-top: var(--fs-spacing-3);
+    }
+
+    [data-fs-price] {
+      display: block;
+
+      &[data-fs-price-variant="spot"] {
+        margin: 0;
+        font-weight: var(--fs-text-weight-black);
+      }
+    }
+
+    @include media(">=tablet") {
+      padding: var(--fs-spacing-3);
+      border: var(--fs-product-details-section-border-width) solid var(--fs-product-details-section-border-color);
+
+      &:not(:first-child) {
+        border-top: 0;
+      }
+    }
+
+    @include media(">=notebook") {
+      padding: var(--fs-product-details-vertical-spacing) var(--fs-spacing-5);
+    }
+  }
+
+  [data-fs-product-details-title],
+  [data-fs-product-details-info] {
+    @include media(">=tablet") {
+      grid-column: 8 / span 5;
+      height: 100%;
+    }
+
+    @include media(">=notebook") {
+      grid-column: 9 / span 4;
+    }
+  }
+
+  // -----------------------------
+  // Title Section
+  // -----------------------------
+
+  [data-fs-product-details-title] {
+    @include media(">=tablet") {
+      border-bottom: 0;
+      border-radius: var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius) 0 0;
+    }
+  }
+
+  // -----------------------------
+  // Info Section
+  // -----------------------------
+
+  [data-fs-product-details-info] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-details-vertical-spacing);
+
+    @include media(">=tablet") {
+      grid-row: span 5;
+      row-gap: 0;
+    }
+  }
+
+  // Settings
+
+  [data-fs-product-details-settings] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-details-vertical-spacing);
+  }
+
+  [data-fs-product-details-selectors] {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--fs-product-details-vertical-spacing);
+  }
+
+  [data-fs-product-details-values] {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  // Shipping
+
+  [data-fs-product-details-shipping] {
+    @include media(">=tablet") {
+      border-radius: 0 0 var(--fs-product-details-section-border-radius) var(--fs-product-details-section-border-radius);
+    }
+  }
+
+  // -----------------------------
+  // Gallery Section
+  // -----------------------------
+
+  [data-fs-product-details-gallery] {
+    @include media(">=tablet") {
+      grid-row: 1 / span 3;
+      grid-column: span 7;
+      max-height: 23.75rem;
+    }
+
+    @include media(">tablet", "<notebook") {
+      max-height: 35rem;
+    }
+
+    @include media(">=notebook") {
+      max-height: 33.125rem;
+    }
+
+    &[data-fs-image-gallery="without-selector"] {
+      @include media(">=notebook") {
+        grid-row-end: span 4;
+        grid-column: span 8;
+      }
+    }
+
+    &[data-fs-image-gallery="with-selector"] {
+      @include media(">=notebook") {
+        grid-row: 1 / span 4;
+        grid-column: span 8;
+      }
+    }
+  }
+
+  // -----------------------------
+  // Content Section
+  // -----------------------------
+
+  [data-fs-product-details-content] {
+    @include media(">=tablet") {
+      grid-row: span 10;
+      grid-column: span 7;
+      margin-top: var(--fs-spacing-7);
+    }
+
+    @include media(">=notebook") {
+      grid-column: span 8;
+    }
+  }
+
+  [data-fs-image-gallery="with-selector"] ~ [data-fs-product-details-content] {
+    @include media(">=notebook") {
+      grid-column: 2 / 9;
+    }
+  }
+}