@faststore/core 2.0.121-alpha.0 → 2.0.122-alpha.0

package/src/components/common/Footer/footer.module.scss

@@ -1,220 +0,0 @@
-@import "src/styles/scaffold";
-
-.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/sections/BannerNewsletter/banner-newsletter.module.scss

@@ -1,23 +0,0 @@
-@import "src/styles/scaffold";
-
-.fs-banner-newsletter {
-  margin-bottom: var(--fs-grid-padding);
-
-  [data-fs-banner-text] {
-    border-radius: var(--fs-border-radius);
-  }
-
-  > section {
-    margin-top: 0;
-  }
-
-  @include media(">=notebook") {
-    display: flex;
-    column-gap: var(--fs-grid-gap-3);
-
-    > section {
-      padding-top: 0;
-      padding-bottom: 0;
-    }
-  }
-}

package/src/components/sections/Incentives/Incentives.stories.mdx

@@ -1,159 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-
-import {
-  TokenTable,
-  TokenRow,
-  TokenDivider,
-} from 'src/../.storybook/components'
-
-import Incentives from '.'
-import { incentivesMockHeader, incentivesMockFooter } from './incentivesMock'
-
-<Meta title="Organisms/Incentives" component={Incentives} />
-
-export const Template = (args) => <Incentives {...args} />
-
-<header>
-
-# Incentives
-
-It's a component that displays a list of "incentives".
-
-</header>
-
-## Usage
-
-`import Incentives from '../components/sections/Incentives'`
-
-<Canvas>
-  <Story
-    name="Incentives"
-    args={{
-      incentives: incentivesMockHeader,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<ArgsTable story="Incentives" />
-
-<TokenTable>
-  <TokenRow
-    token="--fs-incentives-bkg-color"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-  <TokenDivider />
-  <TokenRow token="--fs-incentives-gap" value="var(--fs-spacing-4)" />
-  <TokenRow
-    token="--fs-incentives-padding-top"
-    value="var(--fs-incentives-gap)"
-  />
-  <TokenRow
-    token="--fs-incentives-padding-bottom"
-    value="var(--fs-incentives-gap)"
-  />
-  <TokenDivider />
-  <TokenRow
-    token="--fs-incentives-border-color"
-    value="var(--fs-border-color-light)"
-    isColor
-  />
-  <TokenRow
-    token="--fs-incentives-border-width"
-    value="var(--fs-border-width)"
-  />
-</TokenTable>
-
----
-
-## Nested Elements
-
-### Title
-
-<TokenTable>
-  <TokenRow token="--fs-incentives-title-size" value="var(--fs-text-size-1)" />
-  <TokenRow
-    token="--fs-incentives-title-weight"
-    value="var(--fs-text-weight-bold)"
-  />
-  <TokenRow token="--fs-incentives-title-line-height" value="1.42" />
-  <TokenRow token="--fs-incentives-title-color" value="var(--fs-color-text)" />
-</TokenTable>
-
-### Description
-
-<TokenTable>
-  <TokenRow
-    token="--fs-incentives-description-size"
-    value="var(--fs-incentives-title-size)"
-  />
-  <TokenRow token="--fs-incentives-description-line-height" value="1.14" />
-  <TokenRow
-    token="--fs-incentives-description-color"
-    value="var(--fs-incentives-title-color)"
-  />
-</TokenTable>
-
-### Icon
-
-<TokenTable>
-  <TokenRow
-    token="--fs-incentives-icon-color"
-    value="var(--fs-incentives-title-color)"
-  />
-</TokenTable>
-
----
-
-## Variants
-
-### Colored
-
-<Canvas>
-  <Story
-    name="Colored"
-    args={{
-      incentives: incentivesMockHeader,
-      colored: true,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<TokenTable>
-  <TokenRow
-    token="--fs-incentives-bkg-color"
-    value="var(--fs-color-primary-bkg-light)"
-    isColor
-  />
-</TokenTable>
-
-### Description Only
-
-<Canvas>
-  <Story
-    name="Description Only"
-    args={{
-      incentives: incentivesMockFooter,
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Vertical
-
-<Canvas>
-  <Story
-    name="Vertical"
-    args={{
-      incentives: incentivesMockHeader,
-      variant: 'vertical',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/components/sections/Incentives/IncentivesFooter.tsx

@@ -1,8 +0,0 @@
-import Incentives from './Incentives'
-import { incentivesMockFooter as IncentivesMock } from './incentivesMock'
-
-function IncentivesFooter() {
-  return <Incentives incentives={IncentivesMock} />
-}
-
-export default IncentivesFooter

package/src/components/sections/Incentives/incentives.module.scss

@@ -1,122 +0,0 @@
-@import "src/styles/scaffold";
-
-.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/sections/Incentives/incentivesMock.ts

@@ -1,55 +0,0 @@
-export const incentivesMockHeader = [
-  {
-    icon: 'Truck',
-    title: 'Buy online',
-    firstLineText: 'Get Free Shipping',
-  },
-  {
-    icon: 'Calendar',
-    title: 'Free return',
-    firstLineText: '30 days to return',
-  },
-  {
-    icon: 'Gift',
-    title: 'Gift cards',
-    firstLineText: '$20 / $30 / $50',
-  },
-  {
-    icon: 'Storefront',
-    title: 'Physical Stores',
-    firstLineText: '+40 Stores in Brazil',
-  },
-  {
-    icon: 'ShieldCheck',
-    title: 'Buy online',
-    firstLineText: 'Get Free Shipping',
-  },
-]
-
-export const incentivesMockFooter = [
-  {
-    icon: 'ShieldCheck',
-    firstLineText: 'Trusted',
-    secondLineText: 'by Safecon',
-  },
-  {
-    icon: 'Medal',
-    firstLineText: 'Quality',
-    secondLineText: 'Products',
-  },
-  {
-    icon: 'CircleWavyCheck',
-    firstLineText: '3-year',
-    secondLineText: 'Guarantee',
-  },
-  {
-    icon: 'Storefront',
-    firstLineText: 'Pickup',
-    secondLineText: 'Options',
-  },
-  {
-    icon: 'Truck',
-    firstLineText: 'Free',
-    secondLineText: 'Shippping',
-  },
-]