-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Changes `Footer` styles to use Module CSS * Creates `Footer` Story doc * Fixes typo * Updates `IncentivesFooter`content * Fixes `SectionItem` text * Adds new variations to Footer * Improves Footer Nav section * Improves `Footer` doc * Updates Changelog * Fix typo Co-authored-by: Eduardo Formiga <[email protected]> * Fixes `Incentives` import Co-authored-by: Eduardo Formiga <[email protected]> * Adds TokenTable to `Incentives` * Adds CSS Modules to Incentives * Improves `Footer` tokens * Update Changelog * Removes grid prop from `SectionList` * Change `IncentivesMock` file to `.ts` * Fixes `Footer` Integration Tests Co-authored-by: Eduardo Formiga <[email protected]>
- Loading branch information
1 parent
8bff5a0
commit d301101
Showing
17 changed files
with
756 additions
and
405 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Oops, something went wrong.