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

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/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/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/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;
   }
 }

package/.next/BUILD_ID

@@ -1 +0,0 @@
-aYsUeJebfxFmPYaCwqdKq

package/.next/build-manifest.json

@@ -1,132 +0,0 @@
-{
-  "polyfillFiles": [
-    "static/chunks/polyfills-c67a75d1b6f99dc8.js"
-  ],
-  "devFiles": [],
-  "ampDevFiles": [],
-  "lowPriorityFiles": [
-    "static/aYsUeJebfxFmPYaCwqdKq/_buildManifest.js",
-    "static/aYsUeJebfxFmPYaCwqdKq/_ssgManifest.js"
-  ],
-  "rootMainFiles": [],
-  "pages": {
-    "/": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/css/e434797816e17065.css",
-      "static/chunks/366-4a0572a47e2225d9.js",
-      "static/css/13a4da555ff5e3be.css",
-      "static/chunks/pages/index-7587d2684d1f1de4.js"
-    ],
-    "/404": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/404-eb7e8c41c852c36d.js"
-    ],
-    "/500": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/500-7dc597fd3f74e419.js"
-    ],
-    "/[...slug]": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/css/43b1b3821e21630c.css",
-      "static/chunks/327-43715af4f3fffaf6.js",
-      "static/css/2e9de35e0cb999e0.css",
-      "static/chunks/pages/[...slug]-229b8537827404bc.js"
-    ],
-    "/[slug]/p": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/css/e434797816e17065.css",
-      "static/chunks/366-4a0572a47e2225d9.js",
-      "static/css/7701d01af31e31d1.css",
-      "static/chunks/pages/[slug]/p-a3a8af1949dc6eca.js"
-    ],
-    "/_app": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/css/587c27bbda64e700.css",
-      "static/chunks/pages/_app-3e4e7e579cb0681a.js"
-    ],
-    "/_error": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/pages/_error-a7a0c1d9bfbb4f38.js"
-    ],
-    "/account": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/chunks/pages/account-7f4c51b747b4edd0.js"
-    ],
-    "/checkout": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/chunks/pages/checkout-cb8871ab88a1471f.js"
-    ],
-    "/login": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/css/e02cdad8fc000339.css",
-      "static/chunks/pages/login-9490b01a047906c0.js"
-    ],
-    "/s": [
-      "static/chunks/webpack-d73d5e1e07f9bee2.js",
-      "static/chunks/framework-dfd14d7ce6600b03.js",
-      "static/chunks/main-fd466221927468fd.js",
-      "static/chunks/391-47b923ef44945418.js",
-      "static/chunks/545-1d3d08edfd2ee4c6.js",
-      "static/css/2257f9a5bf751bf1.css",
-      "static/chunks/202-80a2f2380b08e20d.js",
-      "static/css/43b1b3821e21630c.css",
-      "static/chunks/327-43715af4f3fffaf6.js",
-      "static/chunks/pages/s-9582cfca21ff2718.js"
-    ]
-  },
-  "ampFirstPages": []
-}