vtex-sites · eduardoformiga · Jul 1, 2022 · Jul 1, 2022 · Jul 1, 2022 · Jul 1, 2022
diff --git 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/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,8 @@ 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))
+
 ### Changed
 
 ### Deprecated

diff --git 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 (
-      <header className="navbar">
-        <div className="navbar__header">
-         <section className="navbar__row">
-           <Button
-               className="navbar__menu"
-               aria-label="Open Menu"
-           >
-             <ListIcon size={32} />
-           </Button>
-         </section>
-        </div>
-      </header>
-   )
-```
 
 ### Managing SVG Icons
 

diff --git a/src/components/common/Navbar/NavLinks.stories.mdx 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'
+
+<Meta component={NavLinks} title="Organisms/Navbar/NavLinks" />
+
+export const TemplateProvider = () => {
+  return (
+    <SessionProvider initialState={{}}>
+      <CartProvider>
+        <UIProvider>
+          <NavLinks />
+        </UIProvider>
+      </CartProvider>
+    </SessionProvider>
+  )
+}
+
+<header>
+
+# NavLinks
+
+Displays a set navigation links and self adapts on mobile <code>NavbarSlider</code> or desktop screens.
+
+</header>
+
+## Usage
+
+`import { NavLinks } from 'src/components/common/Navbar'`
+
+<Canvas>
+  <Story name="overview-default">{TemplateProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navlinks-padding-top-notebook"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-border-top-width-mobile"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navlinks-border-top-color-mobile"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-border-bottom-width-mobile"
+    value="var(--fs-navlinks-border-top-width-mobile)"
+  />
+  <TokenRow
+    token="--fs-navlinks-border-bottom-color-mobile"
+    value="var(--fs-navlinks-border-top-color-mobile)"
+    globalValue="var(--fs-border-color-light)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Link
+
+<TokenTable>
+  <TokenRow token="--fs-navlinks-link-width-notebook" value="auto" />
+  <TokenRow
+    token="--fs-navlinks-link-padding-notebook"
+    value="0 var(--fs-spacing-0)"
+  />
+</TokenTable>
+
+### List
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navlinks-list-padding-left-notebook"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-margin-left-notebook"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-border-left-width-notebook"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-border-left-color-notebook"
+    value="var(--fs-border-color-light)"
+  />
+</TokenTable>
diff --git a/src/components/common/Navbar/NavLinks.tsx 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<HTMLAnchorElement>['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 (
+    <nav className={`${styles.fsNavlinks} ${classes}`}>
+      <RegionalizationButton />
+      <UIList data-fs-navlinks-list>
+        {collections.map(({ href, name }) => (
+          <li key={name} data-fs-navlinks-list-item>
+            <Link
+              data-fs-navlinks-link
+              variant="display"
+              href={href}
+              onClick={onClickLink}
+            >
+              {name}
+            </Link>
+          </li>
+        ))}
+      </UIList>
+    </nav>
+  )
+}
+
+export default mark(NavLinks)
diff --git a/src/components/common/Navbar/Navbar.stories.mdx 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'
+
+<Meta component={Navbar} title="Organisms/Navbar/Overview" />
+
+export const Template = () => {
+  return (
+    <SessionProvider initialState={{}}>
+      <CartProvider>
+        <UIProvider>
+          <Navbar />
+        </UIProvider>
+      </CartProvider>
+    </SessionProvider>
+  )
+}
+
+<header>
+
+# Navbar
+
+The `Navbar` represents the `Header` and groups some features like: `Search`, `Regionalization`, `SignIn`, `CartSidebar`. It also has `NavLinks` and `NavbarSlider` as related components.
+
+</header>
+
+## Usage
+
+`import Navbar from 'src/components/common/Navbar'`
+
+<Canvas>
+  <Story name="overview-default">{Template.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-navbar-padding" value="0" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-border-bottom-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navbar-border-bottom-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-box-shadow"
+    value="0 var(--fs-spacing-0) var(--fs-spacing-3) rgb(0 0 0 / 5%)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow
+    token="--fs-navbar-transition-function"
+    value="var(--fs-transition-function)"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Search
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navbar-search-button-icon-width-mobile"
+    value="var(--fs-spacing-5)"
+  />
+  <TokenRow
+    token="--fs-navbar-search-button-icon-height-mobile"
+    value="var(--fs-navbar-search-button-icon-width-mobile)"
+  />
+</TokenTable>
+
+### Search Expanded
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navbar-search-expanded-input-wrapper-margin-right"
+    value="0.625rem"
+  />
+  <TokenRow
+    token="--fs-navbar-search-expanded-input-wrapper-margin-left"
+    value="var(--fs-spacing-9)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-search-expanded-input-width"
+    value="calc(100% - var(--fs-spacing-7))"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-search-expanded-button-icon-margin-right"
+    value="-4.063rem"
+  />
+</TokenTable>
+
+### Header
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navbar-header-padding-top"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-navbar-header-padding-bottom"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-header-padding-top-notebook"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenRow
+    token="--fs-navbar-header-padding-bottom-notebook"
+    value="var(--fs-navbar-header-padding-top-notebook)"
+  />
+</TokenTable>
+
+### Logo
+
+<TokenTable>
+  <TokenRow token="--fs-navbar-logo-width" value="11rem" />
+  <TokenRow token="--fs-navbar-logo-height" value="2.375rem" />
+  <TokenRow
+    token="--fs-navbar-logo-min-height"
+    value="var(--fs-navbar-logo-height)"
+  />
+  <TokenRow
+    token="--fs-navbar-logo-margin-right-mobile"
+    value="var(--fs-spacing-5)"
+  />
+</TokenTable>
+
+---
+
+## Compound Components
+
+<SectionList grid="grid">
+  <SectionItem
+    title="Navbar Slider"
+    actionPath="../?path=/docs/organisms-navbar-navbarslider--overview-default"
+    description={
+      <>
+        Displays the <code>NavLinks</code> and some features using{' '}
+        <code>SlideOver</code> component.
+      </>
+    }
+  >
+    <img src="https://vtexhelp.vtexassets.com/assets/docs/src/navlinks___52dff993e0e04dea5d02c1e1a5bbf4e3.png" />
+  </SectionItem>
+  <SectionItem
+    title="NavLinks"
+    actionPath="../?path=/docs/organisms-navbar-navlinks--overview-default"
+    description={
+      <>
+        Displays a set navigation links and self adapts on mobile{' '}
+        <code>NavbarSlider</code> or desktop screens.
+      </>
+    }
+  >
+    <img src="https://vtexhelp.vtexassets.com/assets/docs/src/navlinks___ad2d67dbdbac8ea8ccb4e5a7d453a997.png" />
+  </SectionItem>
+</SectionList>