From fccf9b5c4b2e4e885c92e431f9eaf5b8bef3dd2d Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Fri, 1 Jul 2022 12:23:44 -0300 Subject: [PATCH 1/3] Feat: Adds tokens to `Navbar` * Extracts Navbar related components and uses CSS Modules * Updates README navbar example * Adds tokens to navbar * Adds tokens to navlinks * Adds tokens to NavbarSlider * Tweaks navbar module comments * Adds CHANGELOG entry * Tweaks tokens spaces * Creates Navbar stories * Creates NavbarSlider stories * Creates NavLinks stories * Updates navbar related components links * Update src/components/common/Navbar/Navbar.stories.mdx Co-authored-by: Fanny Chien * Removes logo img tokens * Tweaks border color * Tweaks token name * Tweaks tokens names * Groups row token * Tweaks transition tokens * Tweaks storybook content width * Adjusts navbar tokens * Tweaks Navlinks style * Uses SectionList on navbar stories * Tweaks token stories * Applies token breakpoint name at the end * Removes row width token * Removes button collapse token * Removes button cart token * Removes overflow token * Update src/components/common/Navbar/NavbarSlider.stories.mdx Co-authored-by: Renata Motta * Tweaks navlinks tokens * Trigger CI * Removes sign-in tokens * Tweaks border color token * Update src/components/common/Navbar/NavLinks.stories.mdx Co-authored-by: Renata Motta Co-authored-by: Fanny Chien Co-authored-by: Renata Motta --- .storybook/storybook.css | 6 + README.md | 21 -- .../common/Navbar/NavLinks.stories.mdx | 105 ++++++++ src/components/common/Navbar/NavLinks.tsx | 55 +++++ .../common/Navbar/Navbar.stories.mdx | 180 ++++++++++++++ src/components/common/Navbar/Navbar.tsx | 108 +------- .../common/Navbar/NavbarSlider.stories.mdx | 107 ++++++++ src/components/common/Navbar/NavbarSlider.tsx | 62 +++++ src/components/common/Navbar/index.tsx | 2 + .../common/Navbar/navbar-slider.module.scss | 62 +++++ .../common/Navbar/navbar.module.scss | 190 +++++++++++++++ src/components/common/Navbar/navbar.scss | 230 ------------------ .../common/Navbar/navlinks.module.scss | 78 ++++++ .../ButtonLink/ButtonSignIn/ButtonSignIn.tsx | 2 +- .../ButtonSignInFallback.tsx | 2 +- src/styles/global/storybook-components.scss | 1 - 16 files changed, 861 insertions(+), 350 deletions(-) create mode 100644 src/components/common/Navbar/NavLinks.stories.mdx create mode 100644 src/components/common/Navbar/NavLinks.tsx create mode 100644 src/components/common/Navbar/Navbar.stories.mdx create mode 100644 src/components/common/Navbar/NavbarSlider.stories.mdx create mode 100644 src/components/common/Navbar/NavbarSlider.tsx create mode 100644 src/components/common/Navbar/navbar-slider.module.scss create mode 100644 src/components/common/Navbar/navbar.module.scss delete mode 100644 src/components/common/Navbar/navbar.scss create mode 100644 src/components/common/Navbar/navlinks.module.scss diff --git a/.storybook/storybook.css b/.storybook/storybook.css index 83e04cea..0f71baae 100644 --- a/.storybook/storybook.css +++ b/.storybook/storybook.css @@ -1,3 +1,9 @@ +/* General */ + +.sbdocs.sbdocs-content { + max-width: 1100px; +} + /* Text */ .sbdocs-content > header h1 { diff --git a/README.md b/README.md index ce2c716f..ace2a28b 100644 --- a/README.md +++ b/README.md @@ -301,27 +301,6 @@ function Button({ variant, ...props }: Props) { ``` Now we have a styled Button component that accepts different variants!! 🎉 -The aforementioned guide works well for UI components. However, components like `Navbar` and `Footer` are more complex and usually don't have variants, since they usually serve a single responsibility on the page. For these cases, you can use [BEM-Style CSS Syntax in SCSS](https://en.bem.info/methodology/) like: - -```tsx - // components/common/Navbar/Navbar.tsx - ... - function Navbar { - return ( -
-
-
- -
-
-
- ) -``` ### Managing SVG Icons diff --git a/src/components/common/Navbar/NavLinks.stories.mdx b/src/components/common/Navbar/NavLinks.stories.mdx new file mode 100644 index 00000000..375a3fa7 --- /dev/null +++ b/src/components/common/Navbar/NavLinks.stories.mdx @@ -0,0 +1,105 @@ +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' + +import { CartProvider, SessionProvider } from '@faststore/sdk' +import UIProvider from 'src/sdk/ui/Provider' + +import { NavLinks } from '.' + +import { + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' + + + +export const TemplateProvider = () => { + return ( + + + + + + + + ) +} + +
+ +# NavLinks + +Displays a set navigation links and self adapts on mobile NavbarSlider or desktop screens. + +
+ +## Usage + +`import { NavLinks } from 'src/components/common/Navbar'` + + + {TemplateProvider.bind({})} + + + + + + + + + + + + +--- + +## Nested Elements + +### Link + + + + + + +### List + + + + + + + diff --git a/src/components/common/Navbar/NavLinks.tsx b/src/components/common/Navbar/NavLinks.tsx new file mode 100644 index 00000000..f301b295 --- /dev/null +++ b/src/components/common/Navbar/NavLinks.tsx @@ -0,0 +1,55 @@ +import { List as UIList } from '@faststore/ui' +import type { AnchorHTMLAttributes } from 'react' +import RegionalizationButton from 'src/components/regionalization/RegionalizationButton' +import Link from 'src/components/ui/Link' +import { mark } from 'src/sdk/tests/mark' + +import styles from './navlinks.module.scss' + +interface NavLinksProps { + onClickLink?: AnchorHTMLAttributes['onClick'] + classes?: string +} + +const collections = [ + { + name: 'Office', + href: '/office', + }, + { + name: 'Home Appliances', + href: '/kitchen---home-appliances', + }, + { + name: 'Computer and Software', + href: '/computer---software', + }, + { + name: 'Technology', + href: '/technology', + }, +] + +function NavLinks({ onClickLink, classes = '' }: NavLinksProps) { + return ( + + ) +} + +export default mark(NavLinks) diff --git a/src/components/common/Navbar/Navbar.stories.mdx b/src/components/common/Navbar/Navbar.stories.mdx new file mode 100644 index 00000000..326f2fac --- /dev/null +++ b/src/components/common/Navbar/Navbar.stories.mdx @@ -0,0 +1,180 @@ +import { CartProvider, SessionProvider } from '@faststore/sdk' +import UIProvider from 'src/sdk/ui/Provider' + +import Navbar, { NavLinks } from '.' + +import { + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' + +import { SectionList, SectionItem } from 'src/../.storybook/components' + +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' + + + +export const Template = () => { + return ( + + + + + + + + ) +} + +
+ +# Navbar + +The `Navbar` represents the `Header` and groups some features like: `Search`, `Regionalization`, `SignIn`, `CartSidebar`. It also has `NavLinks` and `NavbarSlider` as related components. + +
+ +## Usage + +`import Navbar from 'src/components/common/Navbar'` + + + {Template.bind({})} + + + + + + + + + + + + + + +--- + +## Nested Elements + +### Search + + + + + + +### Search Expanded + + + + + + + + + + +### Header + + + + + + + + + +### Logo + + + + + + + + +--- + +## Compound Components + + + + Displays the NavLinks and some features using{' '} + SlideOver component. + + } + > + + + + Displays a set navigation links and self adapts on mobile{' '} + NavbarSlider or desktop screens. + + } + > + + + diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx index 0885675e..5d69b2b0 100644 --- a/src/components/common/Navbar/Navbar.tsx +++ b/src/components/common/Navbar/Navbar.tsx @@ -1,8 +1,7 @@ -import { List as UIList } from '@faststore/ui' +import type { SearchInputRef } from '@faststore/ui' import { Suspense, useRef, useState } from 'react' import CartToggle from 'src/components/cart/CartToggle' import SearchInput from 'src/components/common/SearchInput' -import RegionalizationButton from 'src/components/regionalization/RegionalizationButton' import { ButtonIcon, ButtonSignIn, @@ -11,95 +10,12 @@ import { import Icon from 'src/components/ui/Icon' import Link from 'src/components/ui/Link' import Logo from 'src/components/ui/Logo' -import SlideOver from 'src/components/ui/SlideOver' import { mark } from 'src/sdk/tests/mark' import { useUI } from 'src/sdk/ui/Provider' -import { useFadeEffect } from 'src/sdk/ui/useFadeEffect' -import type { AnchorHTMLAttributes } from 'react' -import type { SearchInputRef } from '@faststore/ui' - -interface NavLinksProps { - onClickLink?: AnchorHTMLAttributes['onClick'] -} - -const collections = [ - { - name: 'Office', - href: '/office', - }, - { - name: 'Home Appliances', - href: '/kitchen---home-appliances', - }, - { - name: 'Computer and Software', - href: '/computer---software', - }, - { - name: 'Technology', - href: '/technology', - }, -] - -function NavLinks({ onClickLink }: NavLinksProps) { - return ( - - ) -} -function NavbarSlider() { - const { closeNavbar } = useUI() - const { fade, fadeOut } = useFadeEffect() - - return ( - fade === 'out' && closeNavbar()} - > -
-
- - - - - } - onClick={fadeOut} - /> -
-
- -
- -
-
-
- - ) -} +import styles from './navbar.module.scss' +import NavbarSlider from './NavbarSlider' +import NavLinks from './NavLinks' function Navbar() { const { navbar: displayNavbar, openNavbar } = useUI() @@ -113,13 +29,13 @@ function Navbar() { } return ( -
-
-
+
+
+
{!searchExpanded && ( <> } onClick={openNavbar} @@ -128,7 +44,7 @@ function Navbar() { href="/" aria-label="Go to Faststore home" title="Go to Faststore home" - className="navbar__logo" + data-fs-navbar-logo > @@ -136,8 +52,8 @@ function Navbar() { )}
{searchExpanded && (
- +
{displayNavbar && } diff --git a/src/components/common/Navbar/NavbarSlider.stories.mdx b/src/components/common/Navbar/NavbarSlider.stories.mdx new file mode 100644 index 00000000..3c5d0a86 --- /dev/null +++ b/src/components/common/Navbar/NavbarSlider.stories.mdx @@ -0,0 +1,107 @@ +import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs' + +import { CartProvider, SessionProvider } from '@faststore/sdk' +import UIProvider, { useUI } from 'src/sdk/ui/Provider' + +import { ButtonIcon } from 'src/components/ui/Button' +import Icon from 'src/components/ui/Icon' + +import { NavbarSlider } from '.' + +import { + TokenTable, + TokenRow, + TokenDivider, +} from 'src/../.storybook/components' + + + +export const TemplateNavbarSlider = () => { + const { openNavbar, navbar: displayNavbar } = useUI() + return ( +
+ } + onClick={openNavbar} + /> +

Open Menu

+ {displayNavbar && } +
+ ) +} +export const TemplateProvider = () => { + return ( + + + + + + + + ) +} + +
+ +# Navbar Slider + +Displays the NavLinks and some features using SlideOver component. It's usually used on mobile devices only. + +
+ +## Usage + +`import { NavbarSlider } from 'src/components/common/Navbar'` + + + {TemplateProvider.bind({})} + + + + + + +--- + +## Nested Elements + +### Header + + + + + + +### Logo + + + + + + + + + +### Footer + + + + + diff --git a/src/components/common/Navbar/NavbarSlider.tsx b/src/components/common/Navbar/NavbarSlider.tsx new file mode 100644 index 00000000..89e5be8d --- /dev/null +++ b/src/components/common/Navbar/NavbarSlider.tsx @@ -0,0 +1,62 @@ +import { Suspense } from 'react' +import { + ButtonIcon, + ButtonSignIn, + ButtonSignInFallback, +} from 'src/components/ui/Button' +import Icon from 'src/components/ui/Icon' +import Link from 'src/components/ui/Link' +import Logo from 'src/components/ui/Logo' +import SlideOver from 'src/components/ui/SlideOver' +import { mark } from 'src/sdk/tests/mark' +import { useUI } from 'src/sdk/ui/Provider' +import { useFadeEffect } from 'src/sdk/ui/useFadeEffect' + +import styles from './navbar-slider.module.scss' +import NavLinks from './NavLinks' + +function NavbarSlider() { + const { closeNavbar } = useUI() + const { fade, fadeOut } = useFadeEffect() + + return ( + fade === 'out' && closeNavbar()} + > +
+ + + + + } + onClick={fadeOut} + /> +
+
+ +
+
+ }> + + +
+ + ) +} + +export default mark(NavbarSlider) diff --git a/src/components/common/Navbar/index.tsx b/src/components/common/Navbar/index.tsx index e6400ae4..e931cb23 100644 --- a/src/components/common/Navbar/index.tsx +++ b/src/components/common/Navbar/index.tsx @@ -1 +1,3 @@ export { default } from './Navbar' +export { default as NavbarSlider } from './NavbarSlider' +export { default as NavLinks } from './NavLinks' diff --git a/src/components/common/Navbar/navbar-slider.module.scss b/src/components/common/Navbar/navbar-slider.module.scss new file mode 100644 index 00000000..a05e5e11 --- /dev/null +++ b/src/components/common/Navbar/navbar-slider.module.scss @@ -0,0 +1,62 @@ +@import "src/styles/scaffold"; + +.fs-navbar-slider { + // -------------------------------------------------------- + // Design Tokens for Navbar Slider + // -------------------------------------------------------- + + // Default properties + --fs-navbar-slider-padding : var(--fs-spacing-3); + + // Header + --fs-navbar-slider-header-padding-bottom : var(--fs-spacing-2); + --fs-navbar-slider-header-button-margin-right : calc(-1 * var(--fs-spacing-1)); + + // Logo + --fs-navbar-slider-logo-height : 2.375rem; + --fs-navbar-slider-logo-padding : 0; + --fs-navbar-slider-logo-margin-right : var(--fs-spacing-5); + + // Footer + --fs-navbar-slider-footer-padding-top : var(--fs-spacing-2); + --fs-navbar-slider-footer-margin-top : var(--fs-spacing-2); + + // -------------------------------------------------------- + // Structural Styles + // -------------------------------------------------------- + + padding: var(--fs-navbar-slider-padding); + + [data-fs-navbar-slider-header] { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + padding-bottom: var(--fs-navbar-slider-header-padding-bottom); + + [data-fs-navbar-slider-button] { + margin-right: var(--fs-navbar-slider-header-button-margin-right); + } + } + + [data-fs-navbar-slider-logo] { + height: var(--fs-navbar-slider-logo-height); + padding: var(--fs-navbar-slider-logo-padding); + margin-right: var(--fs-navbar-slider-logo-margin-right); + + img { + width: 100%; + height: 100%; + } + } + + [data-fs-navbar-slider-footer] { + padding-top: var(--fs-navbar-slider-footer-padding-top); + margin-top: var(--fs-navbar-slider-footer-margin-top); + + [data-fs-button-signin-link] { + width: fit-content; + padding-left: 0; + } + } +} diff --git a/src/components/common/Navbar/navbar.module.scss b/src/components/common/Navbar/navbar.module.scss new file mode 100644 index 00000000..8fe89c9f --- /dev/null +++ b/src/components/common/Navbar/navbar.module.scss @@ -0,0 +1,190 @@ +@import "src/styles/scaffold"; + +.fs-navbar { + // -------------------------------------------------------- + // Design Tokens for Navbar + // -------------------------------------------------------- + + // Default properties + + --fs-navbar-padding : 0; + + --fs-navbar-border-bottom-width : var(--fs-border-width); + --fs-navbar-border-bottom-color : var(--fs-border-color-light); + + --fs-navbar-box-shadow : 0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%); + + --fs-navbar-transition-timing : var(--fs-transition-timing); + --fs-navbar-transition-function : var(--fs-transition-function); + + // Search + --fs-navbar-search-button-icon-width-mobile : var(--fs-spacing-5); + --fs-navbar-search-button-icon-height-mobile : var(--fs-navbar-search-button-icon-width-mobile); + + // Search Expanded + --fs-navbar-search-expanded-input-wrapper-margin-right : 0.625rem; + --fs-navbar-search-expanded-input-wrapper-margin-left : var(--fs-spacing-9); + + --fs-navbar-search-expanded-input-width : calc(100% - var(--fs-spacing-7)); + + --fs-navbar-search-expanded-button-icon-margin-right : -4.063rem; + + // Header + --fs-navbar-header-padding-top : var(--fs-spacing-1); + --fs-navbar-header-padding-bottom : var(--fs-spacing-2); + + --fs-navbar-header-padding-top-notebook : var(--fs-spacing-1); + --fs-navbar-header-padding-bottom-notebook : var(--fs-navbar-header-padding-top-notebook); + + // Logo + --fs-navbar-logo-width : 11rem; + --fs-navbar-logo-height : 2.375rem; + --fs-navbar-logo-min-height : var(--fs-navbar-logo-height); + --fs-navbar-logo-margin-right-mobile : var(--fs-spacing-5); + + // -------------------------------------------------------- + // Structural Styles + // -------------------------------------------------------- + + padding: var(--fs-navbar-padding); + border-bottom: var(--fs-navbar-border-bottom-width) solid var(--fs-navbar-border-bottom-color); + box-shadow: var(--fs-navbar-box-shadow); + + [data-store-search-input-wrapper] { + flex: 1 0 100%; + order: 2; + + @include media("=notebook") { + display: grid; + grid-template-columns: 1fr minmax(auto, 37.5rem) 1fr; + } + + [data-fs-navbar-button-menu] { + @include media(">=notebook") { display: none; } + } + } + + [data-fs-navbar-buttons] { + display: flex; + align-items: center; + justify-content: flex-end; + + [data-fs-button-collapse] { + margin-left: calc(-1 * var(--fs-spacing-3)); + } + + [data-fs-button-signin-link] + [data-fs-button-cart] { + @include media(">=notebook") { + margin-left: var(--fs-spacing-3); + } + } + + [data-fs-button-signin-link] { + display: none; + } + + @include media(">=notebook") { + order: 2; + + [data-fs-button-signin-link] { + display: inline-flex; + } + } + + [data-store-search-input-wrapper] { + display: none; + transition: flex var(--fs-navbar-transition-timing) var(--fs-navbar-transition-function); + + @include media("=notebook") { + padding-top: var(--fs-spacing-1); + padding-bottom: var(--fs-spacing-1); + } + } + + [data-fs-navbar-logo] { + width: var(--fs-navbar-logo-width); + height: var(--fs-navbar-logo-height); + min-height: var(--fs-navbar-logo-min-height); + padding: 0; + + @include media("=notebook") { - display: grid; - grid-template-columns: 1fr minmax(auto, 37.5rem) 1fr; - } - - @include media("=notebook") { display: none; } - } -} - -.navbar__buttons { - display: flex; - align-items: center; - justify-content: flex-end; - - [data-fs-button-collapse] { - margin-left: calc(-1 * var(--fs-spacing-3)); - } - - [data-fs-button-signin-link] + [data-fs-button-cart] { - @include media(">=notebook") { - margin-left: var(--fs-spacing-3); - } - } - - [data-fs-button-signin-link] { - display: none; - } - - @include media(">=notebook") { - order: 2; - - [data-fs-button-signin-link] { - display: inline-flex; - } - } - - [data-store-search-input-wrapper] { - display: none; - transition: flex 0.3s ease-in; - - @include media("=notebook") { - padding-top: var(--fs-spacing-1); - padding-bottom: var(--fs-spacing-1); - } -} - -.navbar__logo { - width: 11rem; - height: 2.375rem; - min-height: 2.375rem; - padding: 0; - - img { - width: 100%; - height: 100%; - } - - @include media("=notebook") { display: none; } - } - } -} - -.navlinks__list { - display: flex; - align-items: center; - - li { - display: flex; - align-items: center; - } - - [data-fs-link] { - display: block; - width: 100%; - } - - [data-fs-regionalization-button] { - margin-left: calc(-1 * var(--fs-spacing-1)); - - // TODO: remove this after navbar 2.0 is implemented - &[data-fs-button-variant="tertiary"] { - color: var(--fs-color-text-display); - } - - @include media("=notebook") { - padding-top: var(--fs-spacing-1); - - ul { - display: flex; - column-gap: var(--fs-spacing-3); - padding-left: var(--fs-spacing-3); - margin-left: var(--fs-spacing-2); - border-left: var(--fs-border-width) solid var(--fs-border-color-light); - } - - [data-fs-link] { - padding: 0 var(--fs-spacing-0); - } - } - - @include media("=notebook") { + display: flex; + align-items: center; + } + + [data-fs-navlinks-list-item] { + display: flex; + align-items: center; + } + + [data-fs-regionalization-button] { + margin-left: calc(-1 * var(--fs-spacing-1)); + + // TODO: remove this after navbar 2.0 is implemented + &[data-fs-button-variant="tertiary"] { + color: var(--fs-color-text-display); + } + + @include media("=notebook") { + padding-top: var(--fs-navlinks-padding-top-notebook); + + [data-fs-navlinks-list] { + display: flex; + column-gap: var(--fs-spacing-3); + padding-left: var(--fs-navlinks-list-padding-left-notebook); + margin-left: var(--fs-navlinks-list-margin-left-notebook); + border-left: var(--fs-navlinks-list-border-left-width-notebook) solid var(--fs-navlinks-list-border-left-color-notebook); + } + + [data-fs-navlinks-link] { + width: var(--fs-navlinks-link-width-notebook); + padding: var(--fs-navlinks-link-padding-notebook); + } + } + + @include media(" { diff --git a/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignInFallback/ButtonSignInFallback.tsx b/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignInFallback/ButtonSignInFallback.tsx index 0aeb0a17..18e9542f 100644 --- a/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignInFallback/ButtonSignInFallback.tsx +++ b/src/components/ui/Button/ButtonLink/ButtonSignIn/ButtonSignInFallback/ButtonSignInFallback.tsx @@ -6,7 +6,7 @@ function ButtonSignInFallback() { diff --git a/src/styles/global/storybook-components.scss b/src/styles/global/storybook-components.scss index 9b7b3ff5..c5eac390 100644 --- a/src/styles/global/storybook-components.scss +++ b/src/styles/global/storybook-components.scss @@ -6,7 +6,6 @@ // Common @import "src/components/common/Footer/footer.scss"; @import "src/components/common/SearchInput/search-input.scss"; -@import "src/components/common/Navbar/navbar.scss"; // Search @import "src/components/search/Filter/filter.scss"; From fdc4bd423adab61ed582ac278039b605f5d9ea8e Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Fri, 1 Jul 2022 12:29:10 -0300 Subject: [PATCH 2/3] Removes navbar scss from layout --- src/styles/pages/layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/styles/pages/layout.scss b/src/styles/pages/layout.scss index fb7f2456..a1fac9c3 100644 --- a/src/styles/pages/layout.scss +++ b/src/styles/pages/layout.scss @@ -5,7 +5,6 @@ // Common @import "src/components/common/Footer/footer.scss"; -@import "src/components/common/Navbar/navbar.scss"; @import "src/components/common/SearchInput/search-input.scss"; @import "src/components/search/Suggestions/suggestions.scss"; @import "src/components/search/SuggestionProductCard/suggestion-product-card.scss"; From 69046ea0a7ffad637f2b52fe98149c3746b002ed Mon Sep 17 00:00:00 2001 From: eduardoformiga Date: Fri, 1 Jul 2022 12:29:42 -0300 Subject: [PATCH 3/3] Adds CHANGELOG entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index b9d0c80d..9563de9d 100644 --- 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 `Navbar` ([#132](https://github.com/vtex-sites/gatsby.store/pull/132)) - Applies new local tokens to `ProductGrid` ([#127](https://github.com/vtex-sites/gatsby.store/pull/127)) - Applies new local tokens to `Tiles` ([#120](https://github.com/vtex-sites/gatsby.store/pull/120)) - Applies new local tokens to `Accordion` ([#126](https://github.com/vtex-sites/gatsby.store/pull/126))