@faststore/core 2.0.141-alpha.0 → 2.0.142-alpha.0

package/.turbo/turbo-build.log

@@ -26,7 +26,7 @@ Route (pages)                              Size     First Load JS
 ┌ ● /                                      2.97 kB         126 kB
 ├   └ css/13a4da555ff5e3be.css             7.19 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             10 kB           132 kB
+├ ● /[...slug]                             10 kB           133 kB
 ├   └ css/2e9de35e0cb999e0.css             7.9 kB
 ├ ● /[slug]/p                              11.4 kB         134 kB
 ├   └ css/7701d01af31e31d1.css             10.9 kB
@@ -37,13 +37,13 @@ Route (pages)                              Size     First Load JS
 ├ λ /api/preview                           0 B            77.9 kB
 ├ ● /checkout                              659 B           113 kB
 ├ ● /login                                 1.01 kB         113 kB
-└ ● /s                                     994 B           123 kB
+└ ● /s                                     995 B           124 kB
 + First Load JS shared by all              80.7 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-fd466221927468fd.js        23.9 kB
   ├ chunks/pages/_app-3e4e7e579cb0681a.js  6.43 kB
-  ├ chunks/webpack-d73d5e1e07f9bee2.js     2.27 kB
-  └ css/587c27bbda64e700.css               2.8 kB
+  ├ chunks/webpack-3c331de8004e61a7.js     2.27 kB
+  └ css/923c4a942e57bc91.css               2.81 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,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.0.142-alpha.0](https://github.com/vtex/faststore/compare/v2.0.141-alpha.0...v2.0.142-alpha.0) (2023-05-16)
+
+### Features
+
+- Adjust `Navbar` for CMS ([#1756](https://github.com/vtex/faststore/issues/1756)) ([105a8b2](https://github.com/vtex/faststore/commit/105a8b2f69ffd8438532d7c9eb959ed26a567675))
+
 ## [2.0.141-alpha.0](https://github.com/vtex/faststore/compare/v2.0.140-alpha.0...v2.0.141-alpha.0) (2023-05-16)
 
 ### Features

package/cms/faststore/sections.json

@@ -149,11 +149,12 @@
       "title": "Navbar",
       "type": "object",
       "description": "Navbar configuration",
-      "required": ["image"],
+      "required": ["logo"],
       "properties": {
         "logo": {
           "title": "Logo",
           "type": "object",
+          "required": ["src"],
           "properties": {
             "src": {
               "title": "Image",
@@ -194,6 +195,11 @@
               "title": "Call to Action",
               "type": "string",
               "default": "Sign In"
+            },
+            "myAccountLabel": {
+              "title": "My Account Label",
+              "type": "string",
+              "default": "My Account"
             }
           }
         },
@@ -272,6 +278,41 @@
                   }
                 }
               }
+            },
+            "menu": {
+              "type": "object",
+              "title": "Menu",
+              "properties": {
+                "icon": {
+                  "title": "Icon",
+                  "type": "object",
+                  "properties": {
+                    "icon": {
+                      "title": "Icon",
+                      "type": "string",
+                      "enumNames": ["List"],
+                      "enum": ["List"],
+                      "default": "List"
+                    },
+                    "alt": {
+                      "title": "Alternative Label",
+                      "type": "string",
+                      "default": "List"
+                    }
+                  }
+                }
+              }
+            },
+            "home": {
+              "title": "Home",
+              "type": "object",
+              "properties": {
+                "label": {
+                  "title": "Go to Home Label",
+                  "type": "string",
+                  "default": "Go to Home"
+                }
+              }
             }
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.141-alpha.0",
+  "version": "2.0.142-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.140-alpha.0",
-    "@faststore/components": "^2.0.141-alpha.0",
+    "@faststore/components": "^2.0.142-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.139-alpha.0",
+    "@faststore/ui": "^2.0.142-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": "5c57dd9fc1c129a9e59e273b3c5c7d9b19d2a4fb"
+  "gitHead": "d03c47af5c1e66cec599d8dec1fd211c5ec01afc"
 }

package/src/components/cart/CartToggle/CartToggle.tsx

@@ -1,20 +1,20 @@
 import {
+  Icon as UIIcon,
   Badge as UIBadge,
-  Icon,
   IconButton as UIIconButton,
 } from '@faststore/ui'
 
 import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
 
-function CartToggle() {
+function CartToggle({ alt, icon }: { alt: string; icon: string }) {
   const btnProps = useCartToggleButton()
   const totalItems = btnProps['data-items']
 
   return (
     <UIIconButton
       data-fs-cart-toggle
-      aria-label={`Cart with ${totalItems} items`}
-      icon={<Icon name="ShoppingCart" width={32} height={32} />}
+      aria-label={alt}
+      icon={<UIIcon name={icon} width={32} height={32} />}
       {...btnProps}
     >
       <UIBadge counter>{totalItems}</UIBadge>

package/src/components/cms/GlobalSections.tsx

@@ -7,11 +7,11 @@ import { PageContentType, getPage } from 'src/server/cms'
 
 import RegionBar from 'src/components/common/RegionBar'
 import Toast from 'src/components/common/Toast'
-import Navbar from 'src/components/navigation/Navbar'
 import RenderSections from './RenderSections'
 
+import Alert from 'src/components/sections/Alert'
+import Navbar from 'src/components/sections/Navbar'
 import Footer from 'src/components/sections/Footer'
-import Alert from 'src/components/sections/Alert/Alert'
 
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalSections'
 
@@ -23,6 +23,7 @@ export type GlobalSectionsData = {
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Alert,
   Footer,
+  Navbar,
   ...CUSTOM_COMPONENTS,
 }
 
@@ -49,7 +50,6 @@ function GlobalSections({
   return (
     <>
       <RenderSections sections={firstSections} components={COMPONENTS} />
-      <Navbar />
 
       <Toast />
 

package/src/components/navigation/Navbar/Navbar.tsx

@@ -1,30 +1,80 @@
 import { Suspense, useRef, useState } from 'react'
 
 import {
+  useUI,
+  useScrollDirection,
   Icon as UIIcon,
-  IconButton as UIIconButton,
   Navbar as UINavbar,
+  NavbarRow as UINavbarRow,
+  IconButton as UIIconButton,
   NavbarButtons as UINavbarButtons,
   NavbarHeader as UINavbarHeader,
-  NavbarRow as UINavbarRow,
-  useScrollDirection,
-  useUI,
 } from '@faststore/ui'
 
+import { mark } from 'src/sdk/tests/mark'
+
 import CartToggle from 'src/components/cart/CartToggle'
-import type { SearchInputRef } from 'src/components/search/SearchInput'
 import SearchInput from 'src/components/search/SearchInput'
-import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
+import type { SearchInputRef } from 'src/components/search/SearchInput'
+
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
-import { mark } from 'src/sdk/tests/mark'
+import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
 
 import NavbarLinks from '../NavbarLinks'
 import NavbarSlider from '../NavbarSlider'
+import type { NavbarProps as SectionNavbarProps } from '../../sections/Navbar'
 
-import styles from './section.module.scss'
+export interface NavbarProps {
+  /**
+   * Logo props.
+   */
+  logo: SectionNavbarProps['logo']
+  /**
+   * Cart props.
+   */
+  cart: SectionNavbarProps['cartIcon']
+  /**
+   * Sign In props.
+   */
+  signIn: {
+    button: SectionNavbarProps['signInButton']
+  }
+  /**
+   * Region props.
+   */
+  region: {
+    icon: string
+    label: string
+    shouldDisplayRegion: boolean
+  }
+  /**
+   * Page links.
+   */
+  links: SectionNavbarProps['navigation']['pageLinks']
+  /**
+   * Home props.
+   */
+  home: SectionNavbarProps['navigation']['home']
+  /**
+   * Menu props.
+   */
+  menu: SectionNavbarProps['navigation']['menu']
+}
 
-function Navbar() {
+function Navbar({
+  cart,
+  logo,
+  home,
+  links,
+  signIn,
+  region,
+  home: { label: homeLabel },
+  signIn: { button: signInButton },
+  menu: {
+    icon: { icon: menuIcon, alt: menuIconAlt },
+  },
+}: NavbarProps) {
   const scrollDirection = useScrollDirection()
   const { openNavbar, navbar: displayNavbar } = useUI()
   const searchMobileRef = useRef<SearchInputRef>(null)
@@ -36,67 +86,73 @@ function Navbar() {
   }
 
   return (
-    <header className={`section ${styles.section} section-navbar`}>
-      <UINavbar scrollDirection={scrollDirection}>
-        <UINavbarHeader>
-          <UINavbarRow className="layout__content">
-            {!searchExpanded && (
-              <>
-                <UIIconButton
-                  data-fs-navbar-button-menu
-                  aria-label="Open Menu"
-                  icon={<UIIcon name="List" width={32} height={32} />}
-                  onClick={openNavbar}
-                />
-                <Link
-                  href="/"
-                  prefetch={false}
-                  aria-label="Go to Faststore home"
-                  title="Go to Faststore home"
-                  data-fs-navbar-logo
-                >
-                  <Logo />
-                </Link>
-              </>
-            )}
+    <UINavbar scrollDirection={scrollDirection}>
+      <UINavbarHeader>
+        <UINavbarRow className="layout__content">
+          {!searchExpanded && (
+            <>
+              <UIIconButton
+                data-fs-navbar-button-menu
+                onClick={openNavbar}
+                aria-label={menuIconAlt}
+                icon={<UIIcon name={menuIcon} width={32} height={32} />}
+              />
+              <Link
+                href="/"
+                data-fs-navbar-logo
+                prefetch={false}
+                title={homeLabel}
+                aria-label={homeLabel}
+              >
+                <Logo {...logo} />
+              </Link>
+            </>
+          )}
 
-            <SearchInput />
-
-            <UINavbarButtons searchExpanded={searchExpanded}>
-              {searchExpanded && (
-                <UIIconButton
-                  data-fs-button-collapse
-                  aria-label="Collapse search bar"
-                  icon={<UIIcon 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}
+          <SearchInput />
+
+          <UINavbarButtons searchExpanded={searchExpanded}>
+            {searchExpanded && (
+              <UIIconButton
+                data-fs-button-collapse
+                aria-label="Collapse search bar"
+                icon={<UIIcon 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>
+            <Suspense fallback={<ButtonSignInFallback />}>
+              <ButtonSignIn {...signInButton} />
+            </Suspense>
 
-              <CartToggle />
-            </UINavbarButtons>
-          </UINavbarRow>
-        </UINavbarHeader>
+            <CartToggle {...cart} />
+          </UINavbarButtons>
+        </UINavbarRow>
+      </UINavbarHeader>
 
-        <NavbarLinks className="hidden-mobile" />
+      <NavbarLinks links={links} region={region} className="hidden-mobile" />
 
-        {displayNavbar && <NavbarSlider />}
-      </UINavbar>
-    </header>
+      {displayNavbar && (
+        <NavbarSlider
+          home={home}
+          logo={logo}
+          links={links}
+          signIn={signIn}
+          region={region}
+        />
+      )}
+    </UINavbar>
   )
 }
 

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

@@ -1 +1,2 @@
 export { default } from './Navbar'
+export type { NavbarProps } from './Navbar'

package/src/components/navigation/NavbarLinks/NavbarLinks.tsx

@@ -1,57 +1,44 @@
 import type { AnchorHTMLAttributes } from 'react'
 
-import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
 import {
   NavbarLinks as UINavbarLinks,
   NavbarLinksList as UINavbarLinksList,
   NavbarLinksListItem as UINavbarLinksListItem,
 } from '@faststore/ui'
+import type { NavbarLinksProps as UINavbarLinksProps } from '@faststore/ui'
 
-import RegionButton from 'src/components/region/RegionButton'
 import Link from 'src/components/ui/Link'
+import RegionButton from 'src/components/region/RegionButton'
+import type { NavbarProps } from 'src/components/navigation/Navbar'
+
 import { mark } from 'src/sdk/tests/mark'
 
-export interface NavbarLinksProps extends UINavbarLinksProps {
+interface NavbarLinksProps extends UINavbarLinksProps {
+  links: NavbarProps['links']
+  region: NavbarProps['region']
   /**
    * Callback function when a link is clicked.
    */
   onClickLink?: AnchorHTMLAttributes<HTMLAnchorElement>['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 NavbarLinks({ onClickLink, ...otherProps }: NavbarLinksProps) {
+function NavbarLinks({
+  links,
+  onClickLink,
+  region: { icon: regionIcon, label: regionLabel, shouldDisplayRegion },
+  ...otherProps
+}: NavbarLinksProps) {
   return (
     <UINavbarLinks {...otherProps}>
       <div className="layout__content">
-        <RegionButton />
+        {shouldDisplayRegion && (
+          <RegionButton icon={regionIcon} label={regionLabel} />
+        )}
         <UINavbarLinksList>
-          {collections.map(({ href, name }) => (
-            <UINavbarLinksListItem key={name}>
-              <Link
-                variant="display"
-                href={href}
-                prefetch={false}
-                onClick={onClickLink}
-              >
-                {name}
+          {links.map(({ url, text }) => (
+            <UINavbarLinksListItem key={text}>
+              <Link variant="display" href={url} onClick={onClickLink}>
+                {text}
               </Link>
             </UINavbarLinksListItem>
           ))}

package/src/components/navigation/NavbarSlider/NavbarSlider.tsx

@@ -12,11 +12,27 @@ 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 NavbarLinks from '../NavbarLinks'
+import type { NavbarProps } from '../Navbar'
+
+import styles from '../../sections/Navbar/section.module.scss'
 
-import styles from '../Navbar/section.module.scss'
+interface NavbarSliderProps {
+  logo: NavbarProps['logo']
+  home: NavbarProps['home']
+  links: NavbarProps['links']
+  region: NavbarProps['region']
+  signIn: NavbarProps['signIn']
+}
 
-function NavbarSlider() {
+function NavbarSlider({
+  logo,
+  links,
+  region,
+  home: { label: homeLabel },
+  signIn: { button: signInButton },
+}: NavbarSliderProps) {
   const { closeNavbar } = useUI()
   const { fade, fadeOut } = useFadeEffect()
 
@@ -33,19 +49,19 @@ function NavbarSlider() {
         <Link
           href="/"
           onClick={fadeOut}
-          aria-label="Go to FastStore home"
-          title="Go to FastStore home"
+          title={homeLabel}
+          aria-label={homeLabel}
           data-fs-navbar-slider-logo
         >
-          <Logo />
+          <Logo {...logo} />
         </Link>
       </UINavbarSliderHeader>
       <UINavbarSliderContent>
-        <NavbarLinks onClickLink={fadeOut} />
+        <NavbarLinks onClickLink={fadeOut} links={links} region={region} />
       </UINavbarSliderContent>
       <UINavbarSliderFooter>
         <Suspense fallback={<ButtonSignInFallback />}>
-          <ButtonSignIn />
+          <ButtonSignIn {...signInButton} />
         </Suspense>
       </UINavbarSliderFooter>
     </UINavbarSlider>

package/src/components/region/RegionButton/RegionButton.tsx

@@ -3,7 +3,7 @@ import { Button as UIButton } from '@faststore/ui'
 import { Icon, useUI } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
 
-function RegionButton() {
+function RegionButton({ icon, label }: { icon: string; label: string }) {
   const { openModal } = useUI()
   const { postalCode } = useSession()
 
@@ -11,11 +11,11 @@ function RegionButton() {
     <UIButton
       variant="tertiary"
       size="small"
-      icon={<Icon name="MapPin" width={18} height={18} weight="bold" />}
+      icon={<Icon name={icon} width={18} height={18} weight="bold" />}
       iconPosition="left"
       onClick={openModal}
     >
-      {postalCode ?? 'Set your location'}
+      {postalCode ?? label}
     </UIButton>
   )
 }

package/src/components/sections/Alert/index.ts

@@ -0,0 +1 @@
+export { default } from './Alert'

package/src/components/sections/Footer/Footer.tsx

@@ -11,7 +11,7 @@ import UIFooter, {
 } from '../../common/Footer'
 import type { FooterLinksProps, FooterSocialProps } from '../../common/Footer'
 
-import { Image } from '../../ui/Image'
+import Logo from 'src/components/ui/Logo'
 import UIIncentives from '../../ui/Incentives'
 import type { Incentive } from '../../ui/Incentives'
 
@@ -61,14 +61,7 @@ const Footer = ({
           />
         </UIFooterNavigation>
         <UIFooterInfo>
-          <Image
-            data-fs-footer-logo
-            loading="lazy"
-            src={logoSrc}
-            alt={logoAlt}
-            width={112}
-            height={119}
-          />
+          <Logo alt={logoAlt} src={logoSrc} />
           {showPaymentMethods && (
             <UIPaymentMethods
               flagList={paymentMethods}