Feat: Adds tokens to Navbar

.storybook/storybook.css

@@ -1,3 +1,9 @@
+/* General */
+
+.sbdocs.sbdocs-content {
+  max-width: 1100px;
+}
+
 /* Text */
 
 .sbdocs-content > header h1 {

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` ([#142](https://github.com/vtex-sites/nextjs.store/pull/142))
 - Applies new local tokens to `Tiles` ([#134](https://github.com/vtex-sites/nextjs.store/pull/134))
 - Applies new local tokens to `ProductGrid` ([#144](https://github.com/vtex-sites/nextjs.store/pull/144))
 - Applies new local tokens to `Accordion` ([#130](https://github.com/vtex-sites/nextjs.store/pull/130))

README.md

@@ -287,27 +287,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
 Icons help build web pages by illustrating concepts and improving website navigation. However, using icons can decrease the page's performance. One option to avoid the decrease of the page's performance is to use SVGs from a single SVG file, located in `/static/icons.svg`, and load them with the `ui/Icon` component.

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-notebook-padding-top"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-mobile-border-top-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navlinks-mobile-border-top-color"
+    value="var(--fs-color-neutral-2)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-mobile-border-bottom-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navlinks-mobile-border-bottom-color"
+    value="var(--fs-color-neutral-2)"
+    isColor
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Link
+
+<TokenTable>
+  <TokenRow token="--fs-navlinks-link-mobile-width" value="100%" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-link-notebook-padding"
+    value="0 var(--fs-spacing-0)"
+  />
+</TokenTable>
+
+### List
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navlinks-list-notebook-padding-left"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-notebook-margin-left"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-notebook-border-left-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navlinks-list-notebook-border-left-color"
+    value="var(--fs-border-color-light)"
+  />
+</TokenTable>

src/components/common/Navbar/NavLinks.tsx

@@ -0,0 +1,56 @@
+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)