Feat: adds tokens to Footer

.storybook/components/SectionItem.tsx

@@ -20,7 +20,7 @@ const SectionItem = ({
       <div className="sbdocs-div">{children}</div>
       <article className="sbdocs-list-text">
         <h3 className="sbdocs sbdocs-h3">{title}</h3>
-        <p>{description}</p>
+        <p className="sbdocs sbdocs-p">{description}</p>
         {actionPath && (
           <ButtonLink
             variant="tertiary"

.storybook/storybook.css

@@ -4,6 +4,12 @@
   max-width: 1100px;
 }
 
+@media screen and (min-width: 1440px) {
+  .sbdocs.sbdocs-content {
+    max-width: 1300px;
+  }
+}
+
 /* Text */
 
 .sbdocs-content > header h1 {
@@ -224,7 +230,7 @@ h3.sbdocs.sbdocs-h3 {
   margin-top: var(--fs-spacing-4);
 }
 
-.sbdocs-list .sbdocs-li > div {
+.sbdocs-list .sbdocs-li > .sbdocs-div {
   box-sizing: border-box;
   display: flex;
   align-items: center;
@@ -234,10 +240,16 @@ h3.sbdocs.sbdocs-h3 {
   min-height: 140px;
   max-height: 300px;
   padding: var(--fs-spacing-3);
+  overflow: hidden;
   background-color: var(--fs-color-neutral-1);
   border-radius: var(--fs-border-radius);
 }
 
+.sbdocs-list .sbdocs-li > .sbdocs-div > [data-fs-footer-links] {
+  align-self: baseline;
+  width: 100%;
+}
+
 .sbdocs-list .sbdocs-div > img {
   width: auto;
   max-height: 100%;

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Applies CSS Modules to `Incentives` ([#155](https://github.com/vtex-sites/nextjs.store/pull/155))
+- Applies new local tokens to `Footer` ([#155](https://github.com/vtex-sites/nextjs.store/pull/155))
 - Adds [MSW Addon](https://storybook.js.org/addons/msw-storybook-addon) ([#166](https://github.com/vtex-sites/nextjs.store/pull/166))
 - Applies new local tokens to `Breadcrumb` ([#162](https://github.com/vtex-sites/nextjs.store/pull/162))
 - Applies new local tokens to `SlideOver` ([#145](https://github.com/vtex-sites/nextjs.store/pull/145))
@@ -20,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Updates `IncentivesFooter` content ([#155](https://github.com/vtex-sites/nextjs.store/pull/155))
 - Updated Getting Started doc page and overall improvements ([#147](https://github.com/vtex-sites/nextjs.store/pull/147))
 - Fix storybook mock structure ([#156](https://github.com/vtex-sites/nextjs.store/pull/156))
 

src/components/common/Footer/Footer.stories.mdx

@@ -0,0 +1,161 @@
+import {
+  Icon as UIIcon,
+  List as UIList,
+  PaymentMethods as UIPaymentMethods,
+} from '@faststore/ui'
+
+import { Footer } from './Footer'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+  SectionList,
+  SectionItem,
+} from 'src/../.storybook/components'
+
+import IncentivesFooter from '../../sections/Incentives/IncentivesFooter'
+import FooterLinks from './FooterLinks'
+
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+<Meta component={Footer} title="Organisms/Footer" />
+
+export const Template = (args) => {
+  return <Footer {...args} />
+}
+
+<header>
+
+# Footer
+
+The `Footer` is the final section of every page and has all the meaningful links of the store.
+
+</header>
+
+## Overview
+
+Footer section is made with `FooterLinks`, [Incentives](?path=/docs/organisms-incentives--incentives), [Links](?path=/docs/atoms-link--default), [Accordion](?path=/docs/molecules-accordion-overview--default-story), and [PaymentMethods](https://www.faststore.dev/reference/ui/molecules/PaymentMethods) (from FastStore UI).
+
+---
+
+## Usage
+
+`import Footer from 'src/components/common/Footer'`
+
+<Canvas>
+  <Story name="Footer">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Footer" />
+
+<TokenTable>
+  <TokenRow token="--fs-footer-min-height-mobile" value="rem(860px)" />
+  <TokenRow token="--fs-footer-min-height-notebook" value="rem(486px)" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-footer-spacing-vertical-mobile"
+    value="var(--fs-spacing-4)"
+  />
+  <TokenRow
+    token="--fs-footer-spacing-vertical-notebook"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-footer-spacing-horizontal-notebook"
+    value="var(--fs-grid-gap-3)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-footer-bkg-color"
+    value="var(--fs-color-neutral-bkg)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Divisor
+
+<TokenTable>
+  <TokenRow
+    token="--fs-footer-divisor-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-footer-divisor-border-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+</TokenTable>
+
+### Title
+
+<TokenTable>
+  <TokenRow token="--fs-footer-title-size" value="var(--fs-text-size-body)" />
+  <TokenRow token="--fs-footer-title-line-height" value="1.25" />
+  <TokenRow
+    token="--fs-footer-title-weight"
+    value="var(--fs-text-weight-bold)"
+  />
+  <TokenRow
+    token="--fs-footer-title-margin-bottom"
+    value="var(--fs-spacing-1)"
+  />
+</TokenTable>
+
+### Payment Methods
+
+<TokenTable>
+  <TokenRow
+    token="--fs-footer-payment-methods-flags-border-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-footer-payment-methods-flags-border-color"
+    value="var(--fs-color-neutral-3)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-footer-payment-methods-flags-border-radius"
+    value="var(--fs-border-radius-small)"
+  />
+</TokenTable>
+
+---
+
+## Compound Components
+
+<SectionList>
+  <SectionItem
+    title="Footer Links"
+    description={
+      <>
+        Sitemap listing all the meaningful links of the store. It's the most
+        essential part of the Footer.
+        <br />
+        Additionally, we use the{' '}
+        <a href="../?path=/docs/molecules-accordion-overview--default-story">
+          Accordion
+        </a>{' '}
+        for a better mobile experince.
+      </>
+    }
+  >
+    <FooterLinks />
+  </SectionItem>
+  <SectionItem
+    title="Incentives Footer"
+    description={
+      <>
+        A regular{' '}
+        <a href="../?path=/docs/organisms-incentives--incentives">Incentive</a>{' '}
+        with its own content.
+      </>
+    }
+  >
+    <IncentivesFooter />
+  </SectionItem>
+</SectionList>