Feat: Adds new tokens to Breadcrumb (#146)

* Feat: Adds new tokens to `Breadcrumb` (#162) * Adds CSS Modules and themification to breadcrumb * Tweaks hover first item * Creates Breadcrumb stories using new format * Adds CHANGELOG entry * Adds margin top token * Removes irrelevant rule * tweaks bkg token name Co-authored-by: Renata Motta <[email protected]> * Removes margin token from button * Uses DotsThree icon instead of text * Centralizes dropdown button * Tweaks tokens to use home instead of first * Uses last-child instead of current data-attr * Trigger CI Co-authored-by: Renata Motta <[email protected]> * Removes scss imports * Adds CHANGELOG entry Co-authored-by: Renata Motta <[email protected]>
vtex-sites · Jul 12, 2022 · 1219255 · 1219255 · vercel · Jul 12, 2022
1 parent 34a91df
commit 1219255
Show file tree

Hide file tree

Showing 14 changed files with 376 additions and 184 deletions.
diff --git a/CHANGELOG.md b/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 `Breadcrumb` ([#146](https://github.com/vtex-sites/gatsby.store/pull/146))
 - Applies new local tokens to `SlideOver` ([#142](https://github.com/vtex-sites/gatsby.store/pull/142))
 - Applies new local tokens to `CartSidebar` ([#142](https://github.com/vtex-sites/gatsby.store/pull/142))
 - Adds [MSW Addon](https://storybook.js.org/addons/msw-storybook-addon) ([#143](https://github.com/vtex-sites/gatsby.store/pull/143))

diff --git a/src/components/ui/Breadcrumb/Breadcrumb.stories.mdx b/src/components/ui/Breadcrumb/Breadcrumb.stories.mdx
@@ -0,0 +1,197 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import Breadcrumb from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta component={Breadcrumb} title="Molecules/Breadcrumb" />
+
+export const breadcrumbList = [
+  { item: 'technology', name: 'Technology', position: 1 },
+  {
+    item: 'technology/electronics',
+    name: 'Electronics',
+    position: 2,
+  },
+  {
+    item: 'technology/electronics/audio-and-video',
+    name: 'Audio & Video',
+    position: 3,
+  },
+  {
+    item: 'technology/electronics/audio-and-video/headphones',
+    name: 'Headphones',
+    position: 4,
+  },
+]
+
+export const Template = (args) => <Breadcrumb {...args} />
+
+<header>
+
+# Breadcrumb
+
+Breadcrumbs indicate the user's location in a website hierarchy, facilitating the navigation to previous page levels.
+
+</header>
+
+## Overview
+
+The `Breadcrumb` component uses [FastStore UI Breadcrumb](https://www.faststore.dev/reference/ui/molecules/Breadcrumb) as base.
+
+<Canvas isColumn>
+  <Story name="overview" args={{ breadcrumbList }}>
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-with-dropdown"
+    args={{
+      breadcrumbList: [
+        ...breadcrumbList,
+        {
+          item: 'technology/electronics/audio-and-video/headphones/headphonesaedle-vk1-headphone',
+          name: 'Aedle VK-1 L Headphone',
+          position: 5,
+        },
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Breadcrumb from 'src/components/ui/Breadcrumb'`
+
+<Canvas>
+  <Story name="default" args={{ breadcrumbList }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-margin-left"
+    value="calc(-1 * var(--fs-spacing-1))"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### List Item
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-list-item-padding"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-list-item-last-text-color"
+    value="var(--fs-color-text-light)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-breadcrumb-list-item-max-width-mobile" value="30%" />
+</TokenTable>
+
+### Link
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-link-color-visited"
+    value="var(--fs-color-link)"
+    isColor
+  />
+</TokenTable>
+
+### Link Home
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-link-home-padding"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-link-home-border-radius"
+    value="var(--fs-border-radius-circle)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-link-home-hover-bkg-color"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-breadcrumb-link-home-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+</TokenTable>
+
+### Divider
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-divider-height"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-divider-margin"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-divider-border-left-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-divider-border-left-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+</TokenTable>
+
+### Dropdown Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-margin-left"
+    value="var(--fs-breadcrumb-margin-left)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-color"
+    value="var(--fs-color-link)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-border-radius"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-transition-function"
+    value="var(--fs-transition-function)"
+  />
+</TokenTable>
diff --git a/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx b/src/components/ui/Breadcrumb/Breadcrumb.stories.tsx
diff --git a/src/components/ui/Breadcrumb/Breadcrumb.tsx b/src/components/ui/Breadcrumb/Breadcrumb.tsx
@@ -1,7 +1,7 @@
-import { navigate } from 'gatsby'
-import { memo } from 'react'
 import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
 import { Breadcrumb as UIBreadcrumb } from '@faststore/ui'
+import { navigate } from 'gatsby'
+import { memo } from 'react'
 import Dropdown, {
   DropdownButton,
   DropdownItem,
@@ -10,12 +10,17 @@ import Dropdown, {
 import Icon from 'src/components/ui/Icon'
 import Link from 'src/components/ui/Link'
 
+import styles from './breadcrumb.module.scss'
+
 type ItemElement = {
   item: string
   name: string
   position: number
 }
 export interface BreadcrumbProps extends UIBreadcrumbProps {
+  /**
+   * Array of ItemElement that represents each breadcrumb item.
+   */
   breadcrumbList: ItemElement[]
 }
 
@@ -39,9 +44,16 @@ function BaseBreadcrumb({
   return (
     <UIBreadcrumb
       divider=""
-      className={isDesktop ? 'hidden-mobile' : 'display-mobile'}
+      className={`${styles.fsBreadcrumb} ${
+        isDesktop ? 'hidden-mobile' : 'display-mobile'
+      }`}
     >
-      <Link aria-label="Go to homepage" href="/">
+      <Link
+        data-fs-breadcrumb-link
+        data-fs-breadcrumb-link-home
+        aria-label="Go to homepage"
+        href="/"
+      >
         <Icon name="House" width={18} height={18} weight="bold" />
       </Link>
 
@@ -50,25 +62,27 @@ function BaseBreadcrumb({
           return breadcrumbList.length === index + 1 ? (
             <span key={String(index)}>{name}</span>
           ) : (
-            <Link href={item} key={String(index)}>
+            <Link data-fs-breadcrumb-link href={item} key={String(index)}>
               {name}
             </Link>
           )
         })}
 
       {collapseBreadcrumb && firstItem && (
-        <Link href={firstItem.item}>{firstItem.name}</Link>
+        <Link data-fs-breadcrumb-link href={firstItem.item}>
+          {firstItem.name}
+        </Link>
       )}
 
       {collapseBreadcrumb && (
         <Dropdown>
-          <DropdownButton>
-            <span>...</span>
+          <DropdownButton data-fs-breadcrumb-dropdown-button>
+            <Icon name="DotsThree" width={24} height={24} />
           </DropdownButton>
-          <DropdownMenu>
+          <DropdownMenu data-fs-breadcrumb-dropdown-menu>
             {mediumItems.map(({ item, name }, index) => (
               <DropdownItem
-                data-breadcrumb-dropdown-item
+                data-fs-breadcrumb-dropdown-item
                 icon={
                   <Icon name="ArrowElbowDownRight" width={24} height={24} />
                 }
@@ -87,7 +101,7 @@ function BaseBreadcrumb({
           return lastItems.length === index + 1 ? (
             <span key={String(index)}>{name}</span>
           ) : (
-            <Link href={item} key={String(index)}>
+            <Link data-fs-breadcrumb-link href={item} key={String(index)}>
               {name}
             </Link>
           )