@faststore/core 22.42.6

package/src/components/common/Navbar/Navbar.stories.mdx

@@ -0,0 +1,179 @@
+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 (
+    <UIProvider>
+      <Navbar />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Navbar
+
+The `Navbar` represents the **Page Header** and groups some features like: `Search`, `Regionalization`, `SignIn`, `CartSidebar`.
+
+</header>
+
+## Overview
+
+Uses [NavLinks](?path=/docs/organisms-navbar-navlinks--overview-default) and [NavbarSlider](?path=/docs/organisms-navbar-navbarslider--overview-default) as compound components.
+
+---
+
+## Usage
+
+`import Navbar from 'src/components/common/Navbar'`
+
+<Canvas>
+  <Story name="overview-default">{Template.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-navbar-height-mobile" value="3.5rem" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-bkg-color"
+    value="rgb(255 255 255 / 90%)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow
+    token="--fs-navbar-transition-function"
+    value="var(--fs-transition-function)"
+  />
+  <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-border-bottom-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navbar-border-bottom-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+</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" value="0 var(--fs-spacing-0)" />
+  <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-border-left-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-navbar-logo-border-left-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+</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>

package/src/components/common/Navbar/Navbar.tsx

@@ -0,0 +1,97 @@
+import { Suspense, useRef, useState } from 'react'
+
+import CartToggle from 'src/components/cart/CartToggle'
+import SearchInput from 'src/components/search/SearchInput'
+import type { SearchInputRef } from 'src/components/search/SearchInput'
+import Button, {
+  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 { mark } from 'src/sdk/tests/mark'
+import { useUI } from 'src/sdk/ui/Provider'
+import useScrollDirection from 'src/sdk/ui/useScrollDirection'
+
+import styles from './navbar.module.scss'
+import NavbarSlider from './NavbarSlider'
+import NavLinks from './NavLinks'
+
+function Navbar() {
+  const scrollDirection = useScrollDirection()
+  const { openNavbar, navbar: displayNavbar } = useUI()
+  const searchMobileRef = useRef<SearchInputRef>(null)
+  const [searchExpanded, setSearchExpanded] = useState(false)
+
+  const handlerExpandSearch = () => {
+    setSearchExpanded(true)
+    searchMobileRef.current?.inputRef?.focus()
+  }
+
+  return (
+    <header
+      data-fs-navbar
+      data-fs-navbar-scroll={scrollDirection}
+      className={`${styles.fsNavbar} layout__content-full`}
+    >
+      <section data-fs-navbar-header>
+        <div className="layout__content" data-fs-navbar-row>
+          {!searchExpanded && (
+            <>
+              <Button
+                data-fs-navbar-button-menu
+                aria-label="Open Menu"
+                icon={<Icon name="List" width={32} height={32} />}
+                onClick={openNavbar}
+              />
+              <Link
+                href="/"
+                aria-label="Go to Faststore home"
+                title="Go to Faststore home"
+                data-fs-navbar-logo
+              >
+                <Logo />
+              </Link>
+            </>
+          )}
+          <SearchInput />
+          <div
+            data-fs-navbar-buttons
+            data-fs-navbar-search-expanded={searchExpanded}
+          >
+            {searchExpanded && (
+              <Button
+                data-fs-button-collapse
+                aria-label="Collapse search bar"
+                icon={<Icon name="CaretLeft" width={32} height={32} />}
+                onClick={() => {
+                  setSearchExpanded(false)
+                  searchMobileRef.current?.resetSearchInput()
+                }}
+              />
+            )}
+            <SearchInput
+              placeholder=""
+              ref={searchMobileRef}
+              testId="store-input-mobile"
+              buttonTestId="store-input-mobile-button"
+              onSearchClick={handlerExpandSearch}
+            />
+            <Suspense fallback={<ButtonSignInFallback />}>
+              <ButtonSignIn />
+            </Suspense>
+            <CartToggle />
+          </div>
+        </div>
+      </section>
+      <NavLinks classes="hidden-mobile" />
+
+      {displayNavbar && <NavbarSlider />}
+    </header>
+  )
+}
+
+Navbar.displayName = 'Navbar'
+
+export default mark(Navbar)

package/src/components/common/Navbar/NavbarSlider.stories.mdx

@@ -0,0 +1,108 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import UIProvider, { useUI } from 'src/sdk/ui/Provider'
+
+import Button from 'src/components/ui/Button'
+import Icon from 'src/components/ui/Icon'
+
+import { NavbarSlider } from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta component={NavbarSlider} title="Organisms/Navbar/NavbarSlider" />
+
+export const TemplateNavbarSlider = () => {
+  const { openNavbar, navbar: displayNavbar } = useUI()
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Button
+        aria-label="Open Menu"
+        icon={<Icon name="List" width={32} height={32} />}
+        onClick={openNavbar}
+      />
+      <p style={{ marginLeft: '12px' }}>Open Menu</p>
+      {displayNavbar && <NavbarSlider />}
+    </div>
+  )
+}
+
+export const TemplateProvider = () => {
+  return (
+    <UIProvider>
+      <TemplateNavbarSlider />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# Navbar Slider
+
+As part of the [Navbar](?path=/docs/organisms-navbar-overview--overview-default), NavbarSlider is its mobile version to list the `NavLinks`.
+
+</header>
+
+## Overview
+
+Uses [SlideOver](?path=/docs/organisms-slideover--default-story) as base to show [Navlinks](?path=/docs/organisms-navbar-navlinks--overview-default) on mobile devices.
+
+---
+
+## Usage
+
+`import { NavbarSlider } from 'src/components/common/Navbar'`
+
+<Canvas>
+  <Story name="overview-default">{TemplateProvider.bind({})}</Story>
+</Canvas>
+
+<TokenTable>
+  <TokenRow token="--fs-navbar-slider-padding" value="var(--fs-spacing-3)" />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### Header
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navbar-slider-header-padding-bottom"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-navbar-slider-header-button-margin-right"
+    value="calc(-1 * var(--fs-spacing-1))"
+  />
+</TokenTable>
+
+### Logo
+
+<TokenTable>
+  <TokenRow token="--fs-navbar-slider-logo-height" value="2.375rem" />
+  <TokenDivider />
+  <TokenRow token="--fs-navbar-slider-logo-padding" value="0" />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navbar-slider-logo-margin-right"
+    value="var(--fs-spacing-5)"
+  />
+</TokenTable>
+
+### Footer
+
+<TokenTable>
+  <TokenRow
+    token="--fs-navbar-slider-footer-padding-top"
+    value="var(--fs-spacing-2)"
+  />
+  <TokenRow
+    token="--fs-navbar-slider-footer-margin-top"
+    value="var(--fs-spacing-2)"
+  />
+</TokenTable>

package/src/components/common/Navbar/NavbarSlider.tsx

@@ -0,0 +1,62 @@
+import { Suspense } from 'react'
+
+import Button, {
+  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 (
+    <SlideOver
+      isOpen
+      fade={fade}
+      onDismiss={fadeOut}
+      size="full"
+      direction="leftSide"
+      className={styles.fsNavbarSlider}
+      onTransitionEnd={() => fade === 'out' && closeNavbar()}
+    >
+      <header data-fs-navbar-slider-header>
+        <Link
+          href="/"
+          onClick={fadeOut}
+          aria-label="Go to FastStore home"
+          title="Go to FastStore home"
+          data-fs-navbar-slider-logo
+        >
+          <Logo />
+        </Link>
+
+        <Button
+          data-fs-navbar-slider-button
+          aria-label="Close Menu"
+          icon={<Icon name="X" width={32} height={32} />}
+          onClick={fadeOut}
+        />
+      </header>
+      <div data-fs-navbar-slider-content>
+        <NavLinks onClickLink={fadeOut} />
+      </div>
+      <footer data-fs-navbar-slider-footer>
+        <Suspense fallback={<ButtonSignInFallback />}>
+          <ButtonSignIn />
+        </Suspense>
+      </footer>
+    </SlideOver>
+  )
+}
+
+export default mark(NavbarSlider)

package/src/components/common/Navbar/index.ts

@@ -0,0 +1,3 @@
+export { default } from './Navbar'
+export { default as NavbarSlider } from './NavbarSlider'
+export { default as NavLinks } from './NavLinks'

package/src/components/common/Navbar/navbar-slider.module.scss

@@ -0,0 +1,60 @@
+.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;
+    }
+  }
+}