@faststore/core 22.42.6

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

@@ -0,0 +1,159 @@
+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/Incentives.tsx

@@ -0,0 +1,69 @@
+import { Incentive as UIIncentive, List as UIList } from '@faststore/ui'
+
+import Icon from 'src/components/ui/Icon'
+
+import styles from './incentives.module.scss'
+
+interface Incentive {
+  icon: string
+  title?: string
+  firstLineText: string
+  secondLineText?: string
+}
+
+export interface IncentivesProps {
+  incentives: Incentive[]
+  /**
+   * Controls whether the component will be colored or not.
+   */
+  colored?: boolean
+  /**
+   * Controls the component's direction.
+   */
+  variant?: 'horizontal' | 'vertical'
+}
+
+function Incentives({
+  incentives,
+  variant = 'horizontal',
+  colored = false,
+}: IncentivesProps) {
+  return (
+    <div
+      data-fs-incentives
+      data-fs-incentives-colored={colored}
+      data-fs-incentives-variant={variant}
+      className={styles.fsIncentives}
+    >
+      <UIList variant="unordered" className="layout__content">
+        {incentives.map((incentive, index) => (
+          <li key={String(index)}>
+            <UIIncentive>
+              <Icon
+                data-fs-incentive-icon
+                name={incentive.icon}
+                width={32}
+                height={32}
+              />
+              <div data-fs-incentive-content>
+                {incentive.title && (
+                  <p data-fs-incentive-title>{incentive.title}</p>
+                )}
+                <span data-fs-incentive-description>
+                  {incentive.firstLineText}
+                </span>
+                {incentive.secondLineText && (
+                  <span data-fs-incentive-description>
+                    {incentive.secondLineText}
+                  </span>
+                )}
+              </div>
+            </UIIncentive>
+          </li>
+        ))}
+      </UIList>
+    </div>
+  )
+}
+
+export default Incentives

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

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

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

@@ -0,0 +1,23 @@
+import Incentives from './Incentives'
+import Section from '../Section'
+
+interface Incentive {
+  icon: string
+  title?: string
+  firstLineText: string
+  secondLineText?: string
+}
+
+interface Props {
+  incentives: Incentive[]
+}
+
+function IncentivesHeader({ incentives }: Props) {
+  return (
+    <Section>
+      <Incentives incentives={incentives} colored />
+    </Section>
+  )
+}
+
+export default IncentivesHeader

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

@@ -0,0 +1,122 @@
+@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

@@ -0,0 +1,55 @@
+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',
+  },
+]

package/src/components/sections/Incentives/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Incentives'
+export type { IncentivesProps } from './Incentives'

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

@@ -0,0 +1,139 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import { TokenTable, TokenRow } from 'src/../.storybook/components'
+
+import UIProvider from 'src/sdk/ui/Provider'
+
+import Newsletter from '.'
+
+<Meta title="Organisms/Newsletter" component={Newsletter} />
+
+export const Template = (args) => (
+  <UIProvider>
+    <Newsletter {...args} />
+  </UIProvider>
+)
+
+<header>
+
+# Newsletter
+
+The Newsletter component is a section with at least one input text with an action which its value could be submitted.
+
+</header>
+
+---
+
+## Usage
+
+`import Newsletter from 'src/components/sections/Newsletter'`
+
+<Canvas>
+  <Story
+    name="default"
+    args={{
+      title: 'Get News and Special Offers!',
+      description:
+        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-newsletter-padding"
+    value="var(--fs-spacing-4) var(--fs-spacing-1) var(--fs-spacing-5) var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-newsletter-bkg"
+    value="var(--fs-color-primary-bkg)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-newsletter-text-color"
+    value="var(--fs-color-text-inverse)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Title
+
+<TokenTable>
+  <TokenRow
+    token="--fs-newsletter-title-size"
+    value="var(--fs-text-size-title-section)"
+  />
+  <TokenRow
+    token="--fs-newsletter-title-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+</TokenTable>
+
+---
+
+## Variants
+
+### Lite
+
+<Canvas>
+  <Story
+    name="Lite"
+    args={{
+      title: 'Get News and Special Offers!',
+      description:
+        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
+      lite: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### Card
+
+<Canvas>
+  <Story
+    name="Card"
+    args={{
+      title: 'Get News and Special Offers!',
+      description:
+        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
+      card: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-newsletter-card-width" value="23.438rem" />
+  <TokenRow token="--fs-newsletter-card-width-notebook" value="33.125rem" />
+  <TokenRow
+    token="--fs-newsletter-card-border-radius"
+    value="var(--fs-border-radius)"
+  />
+</TokenTable>
+
+### Card & Lite
+
+<Canvas>
+  <Story
+    name="Card-Lite"
+    args={{
+      title: 'Get News and Special Offers!',
+      description:
+        'Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here.',
+      card: true,
+      lite: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>