@faststore/core 2.0.113-alpha.0 → 2.0.114-alpha.0

package/.turbo/turbo-build.log

@@ -26,26 +26,26 @@ info  - Finalizing page optimization...
 Route (pages)                              Size     First Load JS
 ┌ ● /                                      8.65 kB         117 kB
 ├   └ css/3a57acf6e411f24d.css             1.69 kB
-├   /_app                                  0 B            96.7 kB
+├   /_app                                  0 B            96.6 kB
 ├ ● /[...slug]                             9.46 kB         122 kB
 ├   └ css/1f987650dd4e39d0.css             1.33 kB
 ├ ● /[slug]/p                              16.8 kB         125 kB
 ├   └ css/4abccf9803c3c356.css             1.82 kB
-├ ○ /404                                   665 B           103 kB
+├ ○ /404                                   665 B           102 kB
 ├ ○ /500                                   439 B           102 kB
 ├ ○ /account                               383 B           102 kB
-├ λ /api/graphql                           0 B            96.7 kB
-├ λ /api/preview                           0 B            96.7 kB
+├ λ /api/graphql                           0 B            96.6 kB
+├ λ /api/preview                           0 B            96.6 kB
 ├ ○ /checkout                              371 B           102 kB
-├ ○ /login                                 577 B           103 kB
+├ ○ /login                                 577 B           102 kB
 └ ○ /s                                     895 B           113 kB
     └ css/6f4d3e91f1d161a8.css             1.29 kB
 + First Load JS shared by all              120 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-501ccc46c846c040.js  25.4 kB
-  ├ chunks/webpack-855ba0986bd6023a.js     2.15 kB
-  └ css/231b8c31105a684a.css               23.6 kB
+  ├ chunks/pages/_app-9d067ed89f7a4001.js  25.3 kB
+  ├ chunks/webpack-62b0142505600323.js     2.15 kB
+  └ css/b32231bee7a654b8.css               23.6 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
 ○  (Static)  automatically rendered as static HTML (uses no initial props)

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.114-alpha.0](https://github.com/vtex/faststore/compare/v2.0.113-alpha.0...v2.0.114-alpha.0) (2023-04-24)
+
+**Note:** Version bump only for package @faststore/core
+
 ## [2.0.113-alpha.0](https://github.com/vtex/faststore/compare/v2.0.112-alpha.0...v2.0.113-alpha.0) (2023-04-24)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.113-alpha.0",
+  "version": "2.0.114-alpha.0",
   "license": "MIT",
   "browserslist": "supports es6-module and not dead",
   "scripts": {
@@ -30,10 +30,10 @@
     "@envelop/parser-cache": "^2.2.0",
     "@envelop/validation-cache": "^2.2.0",
     "@faststore/api": "^2.0.105-alpha.0",
-    "@faststore/components": "^2.0.113-alpha.0",
+    "@faststore/components": "^2.0.114-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.3-alpha.0",
-    "@faststore/ui": "^2.0.113-alpha.0",
+    "@faststore/ui": "^2.0.114-alpha.0",
     "@types/react": "^18.0.14",
     "@vtex/client-cms": "^0.2.12",
     "autoprefixer": "^10.4.0",
@@ -108,5 +108,5 @@
   "msw": {
     "workerDirectory": "public"
   },
-  "gitHead": "d98da992d055d403b4beb5b15f74829a017bb763"
+  "gitHead": "3d49923a96682db78955fcf81e6f134161de0d40"
 }

package/src/Layout.tsx

@@ -4,7 +4,7 @@ import { lazy, Suspense } from 'react'
 import { Icon, useUI } from '@faststore/ui'
 import Alert from 'src/components/common/Alert'
 import Footer from 'src/components/common/Footer'
-import Navbar from 'src/components/navigation/Navbar'
+import Navbar from 'src/components/common/Navbar'
 import Toast from 'src/components/common/Toast'
 import RegionBar from 'src/components/region/RegionBar'
 

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

@@ -0,0 +1,122 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+
+import { UIProvider } from '@faststore/ui'
+
+import { NavLinks } from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta component={NavLinks} title="Organisms/Navbar/NavLinks" />
+
+export const TemplateProvider = () => {
+  return (
+    <UIProvider>
+      <NavLinks />
+    </UIProvider>
+  )
+}
+
+<header>
+
+# NavLinks
+
+Displays a set navigation links and self adapts on mobile [NavbarSlider](?path=/docs/organisms-navbar-navbarslider--overview-default) 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)"
+  />
+  <TokenRow
+    token="--fs-navlinks-padding-bottom-notebook"
+    value="var(--fs-navlinks-padding-top-notebook)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-bkg-color"
+    value="--fs-color-body-bkg"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-navlinks-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-navlinks-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow
+    token="--fs-navlinks-transition-function"
+    value="var(--fs-transition-function)"
+  />
+  <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
+  />
+  <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>

package/src/components/{navigation/NavbarLinks/NavbarLinks.tsx → common/Navbar/NavLinks.tsx}

@@ -1,21 +1,15 @@
+import { List as UIList } from '@faststore/ui'
 import type { AnchorHTMLAttributes } from 'react'
 
-import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
-import { List as UIList, NavbarLinks as UINavbarLinks } from '@faststore/ui'
-
 import RegionButton from 'src/components/region/RegionButton'
 import Link from 'src/components/ui/Link'
 import { mark } from 'src/sdk/tests/mark'
 
-export interface NavbarLinksProps extends UINavbarLinksProps {
-  /**
-   * Defines the classes to be applied.
-   */
-  className?: string
-  /**
-   * Defines action to be performed when clicking on a link.
-   */
+import styles from './navlinks.module.scss'
+
+interface NavLinksProps {
   onClickLink?: AnchorHTMLAttributes<HTMLAnchorElement>['onClick']
+  classes?: string
 }
 
 const collections = [
@@ -37,16 +31,16 @@ const collections = [
   },
 ]
 
-function NavbarLinks({ onClickLink, ...otherProps }: NavbarLinksProps) {
+function NavLinks({ onClickLink, classes = '' }: NavLinksProps) {
   return (
-    <UINavbarLinks {...otherProps}>
+    <nav className={`${styles.fsNavlinks} ${classes}`}>
       <div className="layout__content">
         <RegionButton />
-        <UIList data-fs-navbar-links-list>
+        <UIList data-fs-navlinks-list>
           {collections.map(({ href, name }) => (
-            <li key={name} data-fs-navbar-links-list-item>
+            <li key={name} data-fs-navlinks-list-item>
               <Link
-                data-fs-navbar-links-link
+                data-fs-navlinks-link
                 variant="display"
                 href={href}
                 onClick={onClickLink}
@@ -57,8 +51,8 @@ function NavbarLinks({ onClickLink, ...otherProps }: NavbarLinksProps) {
           ))}
         </UIList>
       </div>
-    </UINavbarLinks>
+    </nav>
   )
 }
 
-export default mark(NavbarLinks)
+export default mark(NavLinks)

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

@@ -0,0 +1,179 @@
+import { UIProvider } from '@faststore/ui'
+
+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/{navigation → common}/Navbar/Navbar.tsx

@@ -1,26 +1,18 @@
 import { Suspense, useRef, useState } from 'react'
 
-import {
-  useUI,
-  useScrollDirection,
-  Icon as UIIcon,
-  IconButton as UIIconButton,
-  Navbar as UINavbar,
-  NavbarHeader as UINavbarHeader,
-  NavbarRow as UINavbarRow,
-  NavbarButtons as UINavbarButtons,
-} from '@faststore/ui'
-
+import { Icon, IconButton as UIIconButton, useUI } from '@faststore/ui'
 import CartToggle from 'src/components/cart/CartToggle'
-import SearchInput from 'src/components/search/SearchInput'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
-import Logo from 'src/components/ui/Logo'
-import Link from 'src/components/ui/Link'
+import SearchInput from 'src/components/search/SearchInput'
 import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
+import Link from 'src/components/ui/Link'
+import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
+import useScrollDirection from 'src/sdk/ui/useScrollDirection'
 
-import NavbarSlider from '../NavbarSlider'
-import NavbarLinks from '../NavbarLinks'
+import styles from './navbar.module.scss'
+import NavbarSlider from './NavbarSlider'
+import NavLinks from './NavLinks'
 
 function Navbar() {
   const scrollDirection = useScrollDirection()
@@ -34,18 +26,19 @@ function Navbar() {
   }
 
   return (
-    <UINavbar
-      className="layout__content-full"
-      scrollDirection={scrollDirection}
+    <header
+      data-fs-navbar
+      data-fs-navbar-scroll={scrollDirection}
+      className={`${styles.fsNavbar} layout__content-full`}
     >
-      <UINavbarHeader>
-        <UINavbarRow className="layout__content">
+      <section data-fs-navbar-header>
+        <div className="layout__content" data-fs-navbar-row>
           {!searchExpanded && (
             <>
               <UIIconButton
                 data-fs-navbar-button-menu
                 aria-label="Open Menu"
-                icon={<UIIcon name="List" width={32} height={32} />}
+                icon={<Icon name="List" width={32} height={32} />}
                 onClick={openNavbar}
               />
               <Link
@@ -58,22 +51,22 @@ function Navbar() {
               </Link>
             </>
           )}
-
           <SearchInput />
-
-          <UINavbarButtons searchExpanded={searchExpanded}>
+          <div
+            data-fs-navbar-buttons
+            data-fs-navbar-search-expanded={searchExpanded}
+          >
             {searchExpanded && (
               <UIIconButton
                 data-fs-button-collapse
                 aria-label="Collapse search bar"
-                icon={<UIIcon name="CaretLeft" width={32} height={32} />}
+                icon={<Icon name="CaretLeft" width={32} height={32} />}
                 onClick={() => {
                   setSearchExpanded(false)
                   searchMobileRef.current?.resetSearchInput()
                 }}
               />
             )}
-
             <SearchInput
               placeholder=""
               ref={searchMobileRef}
@@ -81,22 +74,20 @@ function Navbar() {
               buttonTestId="store-input-mobile-button"
               onSearchClick={handlerExpandSearch}
             />
-
             <Suspense fallback={<ButtonSignInFallback />}>
               <ButtonSignIn />
             </Suspense>
-
             <CartToggle />
-          </UINavbarButtons>
-        </UINavbarRow>
-      </UINavbarHeader>
-
-      <NavbarLinks className="hidden-mobile" />
+          </div>
+        </div>
+      </section>
+      <NavLinks classes="hidden-mobile" />
 
       {displayNavbar && <NavbarSlider />}
-    </UINavbar>
+    </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 '@faststore/ui'
+
+import { Button } from '@faststore/ui'
+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>