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

package/.turbo/turbo-build.log

@@ -26,10 +26,10 @@ Route (pages)                              Size     First Load JS
 ┌ ● /                                      2.97 kB         126 kB
 ├   └ css/13a4da555ff5e3be.css             7.19 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             9.98 kB         132 kB
+├ ● /[...slug]                             10 kB           133 kB
 ├   └ css/2e9de35e0cb999e0.css             7.9 kB
-├ ● /[slug]/p                              11.2 kB         134 kB
-├   └ css/797a1959e07eb86b.css             9.28 kB
+├ ● /[slug]/p                              11.4 kB         134 kB
+├   └ css/7701d01af31e31d1.css             10.9 kB
 ├ ○ /404                                   1.09 kB         113 kB
 ├ ● /500                                   1.11 kB         113 kB
 ├ ● /account                               672 B           113 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                                     964 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-0fc824c9837f47f8.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,18 @@
 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
+
+- Pages with `RenderSection` + `Breadcrumb` section CMS ([#1747](https://github.com/vtex/faststore/issues/1747)) ([63f1b6a](https://github.com/vtex/faststore/commit/63f1b6a3b6da30b0c24ba78a8bffbc62470eac0a))
+
 ## [2.0.140-alpha.0](https://github.com/vtex/faststore/compare/v2.0.139-alpha.0...v2.0.140-alpha.0) (2023-05-16)
 
 **Note:** Version bump only for package @faststore/core

package/cms/faststore/content-types.json

@@ -59,5 +59,10 @@
     "id": "plp",
     "name": "Product List Page",
     "configurationSchemaSets": []
+  },
+  {
+    "id": "search",
+    "name": "Search Page",
+    "configurationSchemaSets": []
   }
 ]

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.140-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.135-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": "a44b71ddf57c2528e76169d36fc6d820e5eea09c"
+  "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/Breadcrumb/Breadcrumb.tsx

@@ -1,26 +1,46 @@
 import { memo } from 'react'
 
-import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
-import UIBreadcrumb from 'src/components/ui/Breadcrumb'
+import Breadcrumb from 'src/components/ui/Breadcrumb'
 
 import Section from '../Section'
 
+import {
+  ServerCollectionPageQueryQuery,
+  ServerProductPageQueryQuery,
+} from '@generated/graphql'
 import styles from './section.module.scss'
 
-interface BreadcrumbWrapperProps
-  extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
-  name: string
+type BreadcrumbContext =
+  | ServerProductPageQueryQuery['product']
+  | ServerCollectionPageQueryQuery['collection']
+
+interface BreadcrumbSectionProps {
+  context?: BreadcrumbContext
+  icon: string
+  alt: string
 }
 
-function Breadcrumb({ breadcrumbList, name }: BreadcrumbWrapperProps) {
-  const fallback = [{ item: '/', name, position: 1 }]
-  const list = breadcrumbList ?? fallback
+const isProduct = (x: any): x is ServerProductPageQueryQuery['product'] =>
+  x?.sku != undefined && x?.sku != null
+const isCollection = (
+  x: any
+): x is ServerCollectionPageQueryQuery['collection'] =>
+  x?.seo != undefined && x?.seo != null && x?.sku == undefined
+
+function BreadcrumbSection({ context, ...otherProps }: BreadcrumbSectionProps) {
+  const title = isCollection(context) ? context?.seo?.title : 'All Products'
+  const fallback = [{ item: '/', name: title, position: 1 }]
+  const breadcrumbList = isProduct(context)
+    ? context?.breadcrumbList?.itemListElement
+    : isCollection(context)
+    ? context?.breadcrumbList?.itemListElement
+    : fallback
 
   return (
     <Section className={`${styles.section} section-breadcrumb layout__content`}>
-      <UIBreadcrumb breadcrumbList={list} />
+      <Breadcrumb breadcrumbList={breadcrumbList} {...otherProps} />
     </Section>
   )
 }
 
-export default memo(Breadcrumb)
+export default memo(BreadcrumbSection)

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}

package/src/components/sections/Navbar/Navbar.tsx

@@ -0,0 +1,85 @@
+import UINavbar from '../../navigation/Navbar'
+
+import Section from '../Section'
+
+import styles from './section.module.scss'
+
+type PageLinks = {
+  url: string
+  text: string
+}
+
+export interface NavbarProps {
+  logo: {
+    alt: string
+    src: string
+  }
+  signInButton: {
+    icon: {
+      alt: string
+      icon: string
+    }
+    label: string
+    myAccountLabel: string
+  }
+  cartIcon: {
+    alt: string
+    icon: string
+  }
+  navigation: {
+    regionalization: {
+      enabled: boolean
+      icon: {
+        alt: string
+        icon: string
+      }
+      label: string
+    }
+    pageLinks: PageLinks[]
+    menu: {
+      icon: {
+        alt: string
+        icon: string
+      }
+    }
+    home: {
+      label: string
+    }
+  }
+}
+
+function Navbar({
+  logo,
+  cartIcon,
+  signInButton,
+  navigation: {
+    menu,
+    home,
+    pageLinks,
+    regionalization: {
+      label: regionLabel,
+      icon: { icon: regionIcon },
+      enabled: shouldDisplayRegion,
+    },
+  },
+}: NavbarProps) {
+  return (
+    <Section as="header" className={`${styles.section} section-navbar`}>
+      <UINavbar
+        home={home}
+        menu={menu}
+        logo={logo}
+        cart={cartIcon}
+        links={pageLinks}
+        signIn={{ button: signInButton }}
+        region={{
+          icon: regionIcon,
+          label: regionLabel,
+          shouldDisplayRegion,
+        }}
+      />
+    </Section>
+  )
+}
+
+export default Navbar

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

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

package/src/components/sections/ProductDetails/ProductDetails.tsx

@@ -3,8 +3,8 @@ import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import {
   BuyButton as UIBuyButton,
-  QuantitySelector as UIQuantitySelector,
   ProductTitle as UIProductTitle,
+  QuantitySelector as UIQuantitySelector,
 } from '@faststore/ui'
 import { useEffect, useState } from 'react'
 
@@ -13,7 +13,6 @@ const { Price, DiscountBadge } = Components
 
 import type { ProductDetailsFragment_ProductFragment } from '@generated/graphql'
 import OutOfStock from 'src/components/product/OutOfStock'
-import Breadcrumb from 'src/components/ui/Breadcrumb'
 import ImageGallery from 'src/components/ui/ImageGallery'
 import ShippingSimulation from 'src/components/ui/ShippingSimulation'
 import Selectors from 'src/components/ui/SkuSelector'
@@ -170,7 +169,6 @@ function ProductDetails({ context: staleProduct }: Props) {
       className={`${styles.section} section-product-details layout__content layout__section`}
     >
       <section data-fs-product-details>
-        <Breadcrumb breadcrumbList={breadcrumbs.itemListElement} />
         <section data-fs-product-details-body>
           <header data-fs-product-details-title data-fs-product-details-section>
             <UIProductTitle

package/src/components/sections/Section/Section.tsx

@@ -1,14 +1,20 @@
 import { forwardRef } from 'react'
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 
-type Props = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>
+type BaseProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>
 
-const Section = forwardRef<HTMLDivElement, Props>(function Section(
-  { className = '', ...otherProps },
+type SectionProps = BaseProps & {
+  as?: 'section' | 'header' | 'footer' | 'aside'
+}
+
+const Section = forwardRef<HTMLDivElement, SectionProps>(function Section(
+  { as, className = '', ...otherProps },
   ref
 ) {
+  const Component = as ?? 'section'
+
   return (
-    <section ref={ref} className={`section ${className}`} {...otherProps} />
+    <Component ref={ref} className={`section ${className}`} {...otherProps} />
   )
 })
 

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -4,28 +4,26 @@ import { memo } from 'react'
 
 import Link from 'src/components/ui/Link'
 
-type ItemElement = {
-  item: string
-  name: string
-  position: number
-}
 export interface BreadcrumbProps extends UIBreadcrumbProps {
-  /**
-   * Array of ItemElement that represents each breadcrumb item.
-   */
-  breadcrumbList: ItemElement[]
-}
-
-interface BaseBreadcrumbProps extends BreadcrumbProps {
-  isDesktop?: boolean
+  icon: string
+  alt: string
 }
 
-const Breadcrumb = ({ breadcrumbList, ...otherProps }: BaseBreadcrumbProps) => (
+const Breadcrumb = ({
+  icon = 'Home',
+  alt = 'Go to homepage',
+  ...otherProps
+}: BreadcrumbProps) => (
   <UIBreadcrumb
-    breadcrumbList={breadcrumbList}
     homeLink={
-      <Link aria-label="Go to homepage" href="/" prefetch={false}>
-        <Icon name="House" width={18} height={18} weight="bold" />
+      <Link
+        data-fs-breadcrumb-link
+        data-fs-breadcrumb-link-home
+        aria-label={alt}
+        href="/"
+        prefetch={false}
+      >
+        <Icon name={icon} width={18} height={18} weight="bold" />
       </Link>
     }
     renderLink={({ itemProps: { item: link, name } }) => (

package/src/components/ui/Button/ButtonSignIn/ButtonSignIn.tsx

@@ -3,7 +3,15 @@ import { Icon, LinkButton } from '@faststore/ui'
 import { useSession } from 'src/sdk/session'
 import { useCart } from '../../../../sdk/cart/index'
 
-const ButtonSignIn = () => {
+const ButtonSignIn = ({
+  label,
+  myAccountLabel,
+  icon: { alt, icon },
+}: {
+  label: string
+  myAccountLabel: string
+  icon: { alt: string; icon: string }
+}) => {
   const { id } = useCart()
   const { person } = useSession()
 
@@ -14,11 +22,12 @@ const ButtonSignIn = () => {
         person?.id ? `/account?orderFormId=${id}` : `/login?orderFormId=${id}`
       }
       className="text__title-mini"
+      aria-label={alt}
       variant="tertiary"
-      icon={<Icon name="User" width={18} height={18} weight="bold" />}
+      icon={<Icon name={icon} width={18} height={18} weight="bold" />}
       iconPosition="left"
     >
-      {person?.id ? 'My Account' : 'Sign In'}
+      {person?.id ? myAccountLabel : label}
     </LinkButton>
   )
 }

package/src/components/ui/Image/Image.tsx

@@ -1,8 +1,10 @@
 import { memo } from 'react'
 
-import NextImage, { ImageProps } from 'next/future/image'
+import NextImage, { ImageProps as NextImageProps } from 'next/future/image'
 import loader from './loader'
 
+export type ImageProps = NextImageProps
+
 // Next loader function does not handle all props as height and options
 // so we use a custom loader to handle images using thumbor server with VTEX CDN
 // https://nextjs.org/docs/api-reference/next/image#loader

package/src/components/ui/Image/index.ts

@@ -1 +1,2 @@
 export { default as Image } from './Image'
+export type { ImageProps } from './Image'

package/src/components/ui/Logo/Logo.tsx

@@ -1,5 +1,26 @@
-function Logo() {
-  return <span data-fs-logo role="img" aria-label="BaseStore logo" />
+import { Image } from 'src/components/ui/Image'
+import type { ImageProps } from 'src/components/ui/Image'
+
+interface LogoProps {
+  alt: string
+  src: string
+  loading?: ImageProps['loading']
+}
+
+function Logo({ alt, src, loading = 'lazy' }: LogoProps) {
+  return (
+    <div data-fs-logo>
+      <Image
+        alt={alt}
+        src={src}
+        width={0}
+        height={0}
+        sizes="15vw"
+        loading={loading}
+        style={{ width: '100%', height: 'auto' }}
+      />
+    </div>
+  )
 }
 
 export default Logo

package/src/pages/[...slug].tsx

@@ -25,15 +25,29 @@ import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
 import { execute } from 'src/server'
 
-import storeConfig from '../../faststore.config'
+import { Locator } from '@vtex/client-cms'
+import type { ComponentType } from 'react'
 import GlobalSections, {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { Locator } from '@vtex/client-cms'
+import RenderSections from 'src/components/cms/RenderSections'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
+import { getPage, PLPContentType } from 'src/server/cms'
+import storeConfig from '../../faststore.config'
 
-type Props = ServerCollectionPageQueryQuery & {
-  globalSections: GlobalSectionsData
+type Props = ServerCollectionPageQueryQuery &
+  PLPContentType & {
+    globalSections: GlobalSectionsData
+  }
+
+/**
+ * Sections: Components imported from each store's custom components and '../components/sections' only.
+ * Do not import or render components from any other folder in here.
+ */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  Breadcrumb,
+  ...CUSTOM_COMPONENTS,
 }
 
 const useSearchParams = ({
@@ -56,11 +70,11 @@ const useSearchParams = ({
   return useMemo(() => parseSearchState(new URL(hrefState)), [hrefState])
 }
 
-function Page({ globalSections, ...props }: Props) {
-  const { collection } = props
+function Page({ sections, globalSections, ...otherProps }: Props) {
+  const { collection } = otherProps
   const router = useRouter()
   const applySearchState = useApplySearchState()
-  const searchParams = useSearchParams(props)
+  const searchParams = useSearchParams(otherProps)
 
   const { page } = searchParams
   const title = collection?.seo.title ?? storeConfig.seo.title
@@ -103,9 +117,10 @@ function Page({ globalSections, ...props }: Props) {
           If needed, wrap your component in a <Section /> component
           (not the HTML tag) before rendering it here.
         */}
-        <Breadcrumb
-          breadcrumbList={collection?.breadcrumbList.itemListElement}
-          name={title}
+        <RenderSections
+          context={collection}
+          sections={sections}
+          components={COMPONENTS}
         />
 
         <Hero
@@ -161,16 +176,21 @@ export const getStaticProps: GetStaticProps<
   Props,
   { slug: string[] },
   Locator
-> = async (context) => {
-  const { params } = context
-
-  const { data, errors = [] } = await execute<
-    ServerCollectionPageQueryQueryVariables,
-    ServerCollectionPageQueryQuery
-  >({
-    variables: { slug: params?.slug.join('/') ?? '' },
-    operationName: query,
-  })
+> = async ({ params, previewData }) => {
+  const [{ data, errors = [] }, cmsPage, globalSections] = await Promise.all([
+    execute<
+      ServerCollectionPageQueryQueryVariables,
+      ServerCollectionPageQueryQuery
+    >({
+      variables: { slug: params?.slug.join('/') ?? '' },
+      operationName: query,
+    }),
+    getPage<PLPContentType>({
+      ...(previewData?.contentType === 'plp' ? previewData : null),
+      contentType: 'plp',
+    }),
+    getGlobalSectionsData(previewData),
+  ])
 
   const notFound = errors.find(isNotFoundError)
 
@@ -184,11 +204,10 @@ export const getStaticProps: GetStaticProps<
     throw errors[0]
   }
 
-  const globalSections = await getGlobalSectionsData(context.previewData)
-
   return {
     props: {
       ...data,
+      ...cmsPage,
       globalSections,
     },
   }

package/src/pages/[slug]/p.tsx

@@ -11,6 +11,7 @@ import type {
 } from '@generated/graphql'
 import RenderSections from 'src/components/cms/RenderSections'
 import BannerNewsletter from 'src/components/sections/BannerNewsletter/BannerNewsletter'
+import Breadcrumb from 'src/components/sections/Breadcrumb'
 import CrossSellingShelf from 'src/components/sections/CrossSellingShelf'
 import ProductDetails from 'src/components/sections/ProductDetails'
 import CUSTOM_COMPONENTS from 'src/customizations/components'
@@ -20,17 +21,18 @@ import { execute } from 'src/server'
 import type { PDPContentType } from 'src/server/cms'
 import { getPage } from 'src/server/cms'
 
-import storeConfig from '../../../faststore.config'
 import GlobalSections, {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
+import storeConfig from '../../../faststore.config'
 
 /**
  * Sections: Components imported from each store's custom components and '../components/sections' only.
  * Do not import or render components from any other folder in here.
  */
 const COMPONENTS: Record<string, ComponentType<any>> = {
+  Breadcrumb,
   ProductDetails,
   CrossSellingShelf,
   BannerNewsletter,
@@ -181,15 +183,16 @@ export const getStaticProps: GetStaticProps<
   Locator
 > = async ({ params, previewData }) => {
   const slug = params?.slug ?? ''
-  const [cmsPage, searchResult] = await Promise.all([
-    getPage<PDPContentType>({
-      ...(previewData?.contentType === 'pdp' ? previewData : null),
-      contentType: 'pdp',
-    }),
+  const [searchResult, cmsPage, globalSections] = await Promise.all([
     execute<ServerProductPageQueryQueryVariables, ServerProductPageQueryQuery>({
       variables: { slug },
       operationName: query,
     }),
+    getPage<PDPContentType>({
+      ...(previewData?.contentType === 'pdp' ? previewData : null),
+      contentType: 'pdp',
+    }),
+    getGlobalSectionsData(previewData),
   ])
 
   const { data, errors = [] } = searchResult
@@ -206,8 +209,6 @@ export const getStaticProps: GetStaticProps<
     throw errors[0]
   }
 
-  const globalSections = await getGlobalSectionsData(previewData)
-
   return {
     props: {
       ...data,

package/src/pages/index.tsx

@@ -15,11 +15,11 @@ import { mark } from 'src/sdk/tests/mark'
 import type { PageContentType } from 'src/server/cms'
 import { getPage } from 'src/server/cms'
 
-import storeConfig from '../../faststore.config'
 import GlobalSections, {
   GlobalSectionsData,
   getGlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
+import storeConfig from '../../faststore.config'
 
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
@@ -85,14 +85,15 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   Locator
 > = async ({ previewData }) => {
-  const page = await getPage<PageContentType>({
-    ...(previewData?.contentType === 'page'
-      ? previewData
-      : { filters: { 'settings.seo.slug': '/' } }),
-    contentType: 'page',
-  })
-
-  const globalSections = await getGlobalSectionsData(previewData)
+  const [page, globalSections] = await Promise.all([
+    getPage<PageContentType>({
+      ...(previewData?.contentType === 'page'
+        ? previewData
+        : { filters: { 'settings.seo.slug': '/' } }),
+      contentType: 'page',
+    }),
+    getGlobalSectionsData(previewData),
+  ])
 
   return {
     props: { page, globalSections },

package/src/pages/s.tsx

@@ -1,25 +1,38 @@
+import type { SearchState } from '@faststore/sdk'
 import { parseSearchState, SearchProvider } from '@faststore/sdk'
+import { SROnly as UISROnly } from '@faststore/ui'
 import { NextSeo } from 'next-seo'
 import { useRouter } from 'next/router'
+import type { ComponentType } from 'react'
 import { useEffect, useState } from 'react'
-import type { SearchState } from '@faststore/sdk'
-import { SROnly as UISROnly } from '@faststore/ui'
 
 import Breadcrumb from 'src/components/sections/Breadcrumb'
 import ProductGallery from 'src/components/sections/ProductGallery'
 import { ITEMS_PER_PAGE } from 'src/constants'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { useApplySearchState } from 'src/sdk/search/state'
 import { mark } from 'src/sdk/tests/mark'
 
-import storeConfig from '../../faststore.config'
+import { Locator } from '@vtex/client-cms'
+import { GetStaticProps } from 'next'
 import GlobalSections, {
   getGlobalSectionsData,
   GlobalSectionsData,
 } from 'src/components/cms/GlobalSections'
-import { Locator } from '@vtex/client-cms'
-import { GetStaticProps } from 'next'
+import RenderSections from 'src/components/cms/RenderSections'
+import { getPage, SearchContentType } from 'src/server/cms'
+import storeConfig from '../../faststore.config'
+
+/**
+ * Sections: Components imported from each store's custom components and '../components/sections' only.
+ * Do not import or render components from any other folder in here.
+ */
+const COMPONENTS: Record<string, ComponentType<any>> = {
+  Breadcrumb,
+  ...CUSTOM_COMPONENTS,
+}
 
-type Props = {
+type Props = SearchContentType & {
   globalSections: GlobalSectionsData
 }
 
@@ -36,7 +49,7 @@ const useSearchParams = () => {
   return params
 }
 
-function Page({ globalSections }: Props) {
+function Page({ sections, globalSections }: Props) {
   const searchParams = useSearchParams()
   const applySearchState = useApplySearchState()
   const title = 'Search Results'
@@ -79,7 +92,7 @@ function Page({ globalSections }: Props) {
           If needed, wrap your component in a <Section /> component
           (not the HTML tag) before rendering it here.
         */}
-        <Breadcrumb name="All Products" />
+        <RenderSections sections={sections} components={COMPONENTS} />
 
         <ProductGallery
           title="Search Results"
@@ -95,10 +108,16 @@ export const getStaticProps: GetStaticProps<
   Record<string, string>,
   Locator
 > = async ({ previewData }) => {
-  const globalSections = await getGlobalSectionsData(previewData)
+  const [cmsPage, globalSections] = await Promise.all([
+    getPage<SearchContentType>({
+      ...(previewData?.contentType === 'search' ? previewData : null),
+      contentType: 'search',
+    }),
+    getGlobalSectionsData(previewData),
+  ])
 
   return {
-    props: { globalSections },
+    props: { ...cmsPage, globalSections },
   }
 }
 

package/src/server/cms.ts

@@ -1,5 +1,5 @@
-import ClientCMS from '@vtex/client-cms'
 import type { ContentData, Locator } from '@vtex/client-cms'
+import ClientCMS from '@vtex/client-cms'
 
 import config from '../../faststore.config'
 
@@ -54,6 +54,8 @@ export const getPage = async <T extends ContentData>(options: Options) => {
 }
 
 export type PDPContentType = ContentData
+export type PLPContentType = ContentData
+export type SearchContentType = ContentData
 
 export type PageContentType = ContentData & {
   settings: {

package/src/styles/themes/midnight.scss

@@ -113,7 +113,6 @@
   }
 
   [data-fs-logo] {
-    --fs-logo-img                                 : url("~/public/brandless-negative.png");
     --fs-logo-width                               : 8rem;
   }
 

package/src/styles/themes/soft-blue.scss

@@ -73,7 +73,6 @@
   }
 
   [data-fs-logo] {
-    --fs-logo-img                        : url("~/public/brandless-positive.png");
     --fs-logo-width                      : 8rem;
   }
 }