Feat: Adds new tokens to Incentives

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies new local tokens to `Incentives` ([#49](https://github.com/vtex-sites/gatsby.store/pull/49))
 - Uses new WebOps Incremental Static Builds ([#47](https://github.com/vtex-sites/gatsby.store/pull/47))
 - `add_to_cart` and `remove_from_cart` analytics events to `CartItem` ([#43](https://github.com/vtex-sites/gatsby.store/pull/43))
 

src/components/common/Footer/footer.scss

@@ -1,12 +1,8 @@
 @import "src/styles/scaffold";
 
 .footer {
+  padding-top: 0;
   background-color: var(--fs-color-neutral-bkg);
-
-  .incentives {
-    padding-top: 0;
-  }
-
   content-visibility: auto;
   contain-intrinsic-size: rem(860px);
 

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

@@ -0,0 +1,113 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+
+import Incentives from '.'
+import IncentivesMock 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>
+
+### Import
+
+`import Incentives from '../components/sections/Incentives'`
+
+### Usage
+
+<Canvas>
+  <Story
+    name="Incentives"
+    args={{
+      incentives: IncentivesMock,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Incentives" />
+
+| Local token                                 | Default value/Global token linked              |
+| ------------------------------------------- | ---------------------------------------------- |
+| <code>--fs-incentives-bkg-color</code>      | <code>var(--fs-color-primary-bkg-light)</code> |
+| <code>--fs-incentives-gap</code>            | <code>var(--fs-spacing-4)</code>               |
+| <code>--fs-incentives-padding-top</code>    | <code>var(--fs-incentives-gap)</code>          |
+| <code>--fs-incentives-padding-bottom</code> | <code>var(--fs-incentives-gap)</code>          |
+| <code>--fs-incentives-border-color</code>   | <code>var(--fs-border-color-light)</code>      |
+| <code>--fs-incentives-border-width</code>   | <code>var(--fs-border-width)</code>            |
+
+<br />
+
+## Nested Elements
+
+### Title
+
+| Local token                                    | Default value/Global token linked       |
+| ---------------------------------------------- | --------------------------------------- |
+| <code>--fs-incentives-title-size</code>        | <code>var(--fs-text-size-1)</code>      |
+| <code>--fs-incentives-title-weight</code>      | <code>var(--fs-text-weight-bold)</code> |
+| <code>--fs-incentives-title-line-height</code> | <code>1.42</code>                       |
+| <code>--fs-incentives-title-color</code>       | <code>var(--fs-color-neutral-7)</code>  |
+
+### Description
+
+| Local token                                          | Default value/Global token linked             |
+| ---------------------------------------------------- | --------------------------------------------- |
+| <code>--fs-incentives-description-size</code>        | <code>var(--fs-incentives-title-size)</code>  |
+| <code>--fs-incentives-description-line-height</code> | <code>1.14</code>                             |
+| <code>--fs-incentives-description-color</code>       | <code>var(--fs-incentives-title-color)</code> |
+
+### Icon
+
+| Local token                             | Default value/Global token linked             |
+| --------------------------------------- | --------------------------------------------- |
+| <code>--fs-incentives-icon-color</code> | <code>var(--fs-incentives-title-color)</code> |
+
+<br />
+
+## Variants
+
+<br />
+
+### Colored
+
+<Canvas>
+  <Story
+    name="Colored"
+    args={{
+      incentives: IncentivesMock,
+      colored: true,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+| Local token                            | Default value/Global token linked              |
+| -------------------------------------- | ---------------------------------------------- |
+| <code>--fs-incentives-bkg-color</code> | <code>var(--fs-color-primary-bkg-light)</code> |
+
+<br />
+
+### Vertical
+
+<Canvas>
+  <Story
+    name="Vertical"
+    args={{
+      incentives: IncentivesMock,
+      variant: 'vertical',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<br />

src/components/sections/Incentives/Incentives.tsx

@@ -8,24 +8,50 @@ interface Incentive {
   secondLineText?: string
 }
 
-interface Props {
+export interface IncentivesProps {
   incentives: Incentive[]
-  classes?: string
+  /**
+   * Controls whether the component will be colored or not.
+   */
+  colored?: boolean
+  /**
+   * Controls the component's direction.
+   */
+  variant?: 'horizontal' | 'vertical'
 }
 
-function Incentives({ incentives, classes = '' }: Props) {
+function Incentives({
+  incentives,
+  variant = 'horizontal',
+  colored = false,
+}: IncentivesProps) {
   return (
-    <div className={`incentives ${classes} layout__content-full`}>
+    <div
+      data-fs-incentives
+      data-fs-incentives-colored={colored}
+      data-fs-incentives-variant={variant}
+    >
       <UIList variant="unordered" className="layout__content">
         {incentives.map((incentive, index) => (
           <li key={String(index)}>
             <UIIncentive>
-              <Icon name={incentive.icon} width={32} height={32} />
-              <div data-incentive-content>
-                {incentive.title && <p>{incentive.title}</p>}
-                <span>{incentive.firstLineText}</span>
+              <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>{incentive.secondLineText}</span>
+                  <span data-fs-incentive-description>
+                    {incentive.secondLineText}
+                  </span>
                 )}
               </div>
             </UIIncentive>

src/components/sections/Incentives/IncentivesHeader.tsx

@@ -15,7 +15,7 @@ interface Props {
 function IncentivesHeader({ incentives }: Props) {
   return (
     <Section>
-      <Incentives incentives={incentives} classes="incentives--colored" />
+      <Incentives incentives={incentives} colored />
     </Section>
   )
 }

src/components/sections/Incentives/incentives.scss

@@ -1,46 +1,52 @@
 @import "src/styles/scaffold";
 
-.incentives {
+[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-neutral-7);
+
+  // 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-store-list] {
     display: flex;
     width: fit-content;
     overflow-x: auto;
 
-    @include media("<notebook") {
-      li {
-        &:not(:first-child) {
-          [data-store-incentive] {
-            padding: 0 var(--fs-spacing-4);
-          }
-        }
-
-        &:first-child {
-          [data-store-incentive] {
-            padding-right: var(--fs-spacing-4);
-            padding-left: 0;
-          }
-        }
-
-        &:last-child {
-          [data-store-incentive] {
-            padding-right: 0;
-          }
-        }
-      }
-    }
-
     @include media(">=notebook") {
       justify-content: center;
     }
-
-    li {
-      &:not(:last-child) {
-        border-right: 1px solid var(--fs-border-color-light);
-      }
-    }
   }
 
   [data-store-incentive] {
@@ -49,43 +55,68 @@
     align-items: center;
     justify-content: center;
 
-    p, span {
-      font-size: var(--fs-text-size-1);
-    }
-
-    p {
-      font-weight: var(--fs-text-weight-bold);
-      line-height: 1.42;
-    }
-
-    span {
-      display: block;
-      line-height: 1.14;
-      white-space: nowrap;
-    }
-
-    [data-incentive-content] {
-      text-align: center;
-    }
-
     @include media("<notebook") {
       row-gap: var(--fs-spacing-0);
     }
 
     @include media(">=notebook") {
       flex-direction: row;
-      padding: 0 var(--fs-spacing-5);
 
-      [data-incentive-content] {
+      [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);
+  }
+}
 
-  &.incentives--colored {
-    padding-top: var(--fs-spacing-4);
-    padding-bottom: var(--fs-spacing-4);
-    background-color: var(--fs-color-primary-bkg-light);
+[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);
   }
 }

src/components/sections/Incentives/index.tsx

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