@faststore/core 2.0.130-alpha.0 → 2.0.133-alpha.0

package/.turbo/turbo-build.log

@@ -16,32 +16,33 @@ info  - Collecting page data...
 info  - Generating static pages (0/7)
 info  - Generating static pages (1/7)
 info  - Generating static pages (3/7)
+warn - IncentivesHeader not found. Add a new component for this section or remove it from the CMS
 warn - CallToAction not found. Add a new component for this section or remove it from the CMS
 info  - Generating static pages (5/7)
 info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      2.85 kB         126 kB
-├   └ css/7a8417de90d11c60.css             7.06 kB
+┌ ● /                                      2.87 kB         126 kB
+├   └ css/56ac93c668f9132f.css             7.22 kB
 ├   /_app                                  0 B            77.9 kB
-├ ● /[...slug]                             7.74 kB         133 kB
-├   └ css/326e215d7b09f642.css             7.72 kB
-├ ● /[slug]/p                              11.2 kB         135 kB
-├   └ css/4b7b7b64ae6afe67.css             9.14 kB
-├ ○ /404                                   951 B           110 kB
-├ ● /500                                   718 B           110 kB
-├ ● /account                               669 B           110 kB
+├ ● /[...slug]                             9.96 kB         132 kB
+├   └ css/408ab64ab5c04787.css             7.95 kB
+├ ● /[slug]/p                              11.2 kB         134 kB
+├   └ css/bc39c02d387d74b8.css             9.34 kB
+├ ○ /404                                   1.09 kB         113 kB
+├ ● /500                                   1.11 kB         113 kB
+├ ● /account                               672 B           113 kB
 ├ λ /api/graphql                           0 B            77.9 kB
 ├ λ /api/preview                           0 B            77.9 kB
-├ ● /checkout                              657 B           110 kB
-├ ● /login                                 868 B           110 kB
-└ ● /s                                     961 B           121 kB
+├ ● /checkout                              659 B           113 kB
+├ ● /login                                 1.01 kB         113 kB
+└ ● /s                                     964 B           123 kB
 + First Load JS shared by all              80.7 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
-  ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-b601536188b9a919.js  6.43 kB
-  ├ chunks/webpack-02fe78a6d63f52e6.js     2.25 kB
+  ├ chunks/main-fd466221927468fd.js        23.9 kB
+  ├ chunks/pages/_app-3e4e7e579cb0681a.js  6.43 kB
+  ├ chunks/webpack-ff9d67a587aa8a8e.js     2.29 kB
   └ css/587c27bbda64e700.css               2.8 kB
 
 λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)

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.133-alpha.0](https://github.com/vtex/faststore/compare/v2.0.132-alpha.0...v2.0.133-alpha.0) (2023-05-09)
+
+### Features
+
+- Adjust `Footer` for CMS ([#1743](https://github.com/vtex/faststore/issues/1743)) ([86dd67a](https://github.com/vtex/faststore/commit/86dd67a293dcd3a67a5b96ac45dc27d097f95381))
+
+## [2.0.132-alpha.0](https://github.com/vtex/faststore/compare/v2.0.131-alpha.0...v2.0.132-alpha.0) (2023-05-09)
+
+### Bug Fixes
+
+- Lighthouse Checks 🟢 ([#1737](https://github.com/vtex/faststore/issues/1737)) ([b862703](https://github.com/vtex/faststore/commit/b862703ce991065f92765f4cecc88c9946b3d702)), closes [/github.com/GoogleChrome/lighthouse-ci/blob/main/packages/utils/src/presets/all.js#L25](https://github.com/vtex//github.com/GoogleChrome/lighthouse-ci/blob/main/packages/utils/src/presets/all.js/issues/L25)
+
 ## [2.0.130-alpha.0](https://github.com/vtex/faststore/compare/v2.0.129-alpha.0...v2.0.130-alpha.0) (2023-05-04)
 
 ### Features

package/cms/faststore/sections.json

@@ -532,7 +532,7 @@
                         ],
                         "enum": [
                           "Visa",
-                          "DinersClub",
+                          "Diners",
                           "Mastercard",
                           "EloCard",
                           "PayPal",

package/lighthouserc.js

@@ -18,5 +18,6 @@ module.exports = lhConfig({
     ],
     deprecations: 'warn',
     'resource-summary:stylesheet:count': ['warn', { maxNumericValue: 400 }],
+    'resource-summary:script:count': ['warn', { maxNumericValue: 20 }],
   },
 })

package/next.config.js

@@ -8,6 +8,8 @@ const nextConfig = {
   /* config options here */
   images: {
     domains: [`${storeConfig.api.storeId}.vtexassets.com`],
+    deviceSizes: [360, 540, 768, 1280, 1440],
+    imageSizes: [34, 68, 154, 320],
   },
   i18n: {
     locales: ['en-US'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.130-alpha.0",
+  "version": "2.0.133-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.118-alpha.0",
-    "@faststore/components": "^2.0.128-alpha.0",
+    "@faststore/components": "^2.0.133-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.128-alpha.0",
+    "@faststore/ui": "^2.0.133-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": "1f98570bc7c6833f90b658356f074febbba01d2c"
+  "gitHead": "d6ccdde94a4a7210b6e2ebf77a6caf358ecb07b2"
 }

package/src/components/cms/GlobalSections.tsx

@@ -5,13 +5,14 @@ import type { ComponentType } from 'react'
 import CUSTOM_COMPONENTS from 'src/customizations/components'
 import { PageContentType, getPage } from 'src/server/cms'
 
-import Footer from 'src/components/common/Footer'
 import RegionBar from 'src/components/common/RegionBar'
 import Toast from 'src/components/common/Toast'
 import Navbar from 'src/components/navigation/Navbar'
-import Alert from 'src/components/sections/Alert/Alert'
 import RenderSections from './RenderSections'
 
+import Footer from 'src/components/sections/Footer'
+import Alert from 'src/components/sections/Alert/Alert'
+
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalSections'
 
 export type GlobalSectionsData = {
@@ -21,6 +22,7 @@ export type GlobalSectionsData = {
 /* A list of components that can be used in the CMS. */
 const COMPONENTS: Record<string, ComponentType<any>> = {
   Alert,
+  Footer,
   ...CUSTOM_COMPONENTS,
 }
 
@@ -56,7 +58,6 @@ function GlobalSections({
         {children}
       </main>
 
-      <Footer />
       {hasChildren && (
         <RenderSections sections={lastSections} components={COMPONENTS} />
       )}

package/src/components/common/Footer/Footer.tsx

@@ -1,127 +1,32 @@
-import {
-  Icon,
-  List as UIList,
-  PaymentMethods as UIPaymentMethods,
-} from '@faststore/ui'
-
-import Link from 'src/components/ui/Link'
-import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
 
-import Incentives from 'src/components/ui/Incentives/Incentives'
-import { incentivesMockFooter } from 'src/components/ui/Incentives/incentivesMock'
-import FooterFlags from './FooterFlags'
-import FooterLinks from './FooterLinks'
-import styles from './section.module.scss'
+export function FooterInfo({ children }) {
+  return (
+    <div data-fs-footer-info className="layout__content">
+      {children}
+    </div>
+  )
+}
 
-type FooterProps = {
-  /**
-   * Enables Incentives Section
-   */
-  sectionIncentives?: boolean
-  /**
-   * Enables Social Section
-   */
-  sectionSocial?: boolean
-  /**
-   * Enables Payment Methods Section
-   */
-  sectionPaymentMethods?: boolean
+export function FooterNavigation({ children }) {
+  return (
+    <div data-fs-footer-navigation className="layout__content">
+      {children}
+    </div>
+  )
 }
 
-export function Footer({
-  sectionIncentives = true,
-  sectionSocial = true,
-  sectionPaymentMethods = true,
-}: FooterProps) {
+export function Footer({ children }) {
   return (
-    <footer className={`section ${styles.section} section-footer`}>
-      <div
-        data-fs-footer
-        data-fs-footer-incentives={sectionIncentives}
-        data-fs-footer-social={sectionSocial}
-        data-fs-footer-payment-methods={sectionPaymentMethods}
-        className="layout__content-full"
-      >
-        {sectionIncentives && <Incentives incentives={incentivesMockFooter} />}
-        <div data-fs-footer-nav className="layout__content">
-          <FooterLinks />
-          {sectionSocial && (
-            <section data-fs-footer-social>
-              <p data-fs-footer-title>Follow us</p>
-              <UIList>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://www.facebook.com/"
-                    title="Facebook"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Facebook" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://www.instagram.com/"
-                    title="Instagram"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Instagram" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://www.pinterest.com/"
-                    title="Pinterest"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Pinterest" />
-                  </Link>
-                </li>
-                <li>
-                  <Link
-                    variant="display"
-                    size="small"
-                    href="https://twitter.com/"
-                    title="Twitter"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Icon name="Twitter" />
-                  </Link>
-                </li>
-              </UIList>
-            </section>
-          )}
-        </div>
-        <div data-fs-footer-note className="layout__content">
-          <Logo />
-          {sectionPaymentMethods && (
-            <UIPaymentMethods
-              title={<p>Payment Methods</p>}
-              flagList={FooterFlags}
-            />
-          )}
-          <div data-fs-footer-copyright className="text__legend">
-            <p>This website uses VTEX technology</p>
-            <p>
-              In-store price may vary. Prices and offers are subject to change.
-              2021 Store name. All rights reserved. Store is a trademark of
-              Store and its affiliated companies.
-            </p>
-            <address>Mount St, 000, New York / NY - 00000.</address>
-          </div>
-        </div>
-      </div>
-    </footer>
+    <div
+      data-fs-footer
+      data-fs-footer-social
+      data-fs-footer-incentives
+      data-fs-footer-payment-methods
+      className="layout__content-full"
+    >
+      {children}
+    </div>
   )
 }
 

package/src/components/common/Footer/FooterLinks.tsx

@@ -9,101 +9,23 @@ import { useState } from 'react'
 
 import Link from 'src/components/ui/Link'
 
-const links = [
-  {
-    title: 'Our company',
-    items: [
-      {
-        href: '/',
-        name: 'About Us',
-      },
-      {
-        href: '/',
-        name: 'Our Blog',
-      },
-      {
-        href: '/',
-        name: 'Stores',
-      },
-      {
-        href: '/',
-        name: 'Work With Us',
-      },
-    ],
-  },
-  {
-    title: 'Orders & Purchases',
-    items: [
-      {
-        href: '/',
-        name: 'Check Order Status',
-      },
-      {
-        href: '/',
-        name: 'Returns and Exchanges',
-      },
-      {
-        href: '/',
-        name: 'Product Recall',
-      },
-      {
-        href: '/',
-        name: 'Gift Cards',
-      },
-    ],
-  },
-  {
-    title: 'Support & Services',
-    items: [
-      {
-        href: '/',
-        name: 'Support Center',
-      },
-      {
-        href: '/',
-        name: 'Schedule a Service',
-      },
-      {
-        href: '/',
-        name: 'Contact Us',
-      },
-    ],
-  },
-  {
-    title: 'Partnerships',
-    items: [
-      {
-        href: '/',
-        name: 'Affiliate Program',
-      },
-      {
-        href: '/',
-        name: 'Advertise with US',
-      },
-      {
-        href: '/',
-        name: 'Market Place',
-      },
-    ],
-  },
-]
-
-type LinkItem = {
-  href: string
-  name: string
+type Item = {
+  url: string
+  text: string
 }
 
-interface LinksListProps {
-  items: LinkItem[]
+type FooterLink = {
+  items: Item[]
+  sectionTitle: string
 }
 
-function LinksList({ items }: LinksListProps) {
+function Links({ items }: Pick<FooterLink, 'items'>) {
   return (
     <UIList>
       {items.map((item) => (
-        <li key={item.name}>
-          <Link variant="display" size="small" href={item.href}>
-            {item.name}
+        <li key={item.text}>
+          <Link variant="display" size="small" href={item.url}>
+            {item.text}
           </Link>
         </li>
       ))}
@@ -111,7 +33,11 @@ function LinksList({ items }: LinksListProps) {
   )
 }
 
-function FooterLinks() {
+export interface FooterLinksProps {
+  links: FooterLink[]
+}
+
+function FooterLinks({ links }: FooterLinksProps) {
   const [indicesExpanded, setIndicesExpanded] = useState<Set<number>>(
     new Set([])
   )
@@ -129,11 +55,11 @@ function FooterLinks() {
     <section data-fs-footer data-fs-footer-links>
       <div className="display-mobile">
         <UIAccordion indices={indicesExpanded} onChange={onChange}>
-          {links.map((section) => (
-            <UIAccordionItem key={section.title}>
-              <UIAccordionButton>{section.title}</UIAccordionButton>
+          {links.map(({ sectionTitle, items }) => (
+            <UIAccordionItem key={sectionTitle}>
+              <UIAccordionButton>{sectionTitle}</UIAccordionButton>
               <UIAccordionPanel>
-                <LinksList items={section.items} />
+                <Links items={items} />
               </UIAccordionPanel>
             </UIAccordionItem>
           ))}
@@ -142,10 +68,10 @@ function FooterLinks() {
 
       <div className="hidden-mobile">
         <nav data-fs-footer-links-columns>
-          {links.map((section) => (
-            <div key={section.title}>
-              <p data-fs-footer-title>{section.title}</p>
-              <LinksList items={section.items} />
+          {links.map(({ sectionTitle, items }) => (
+            <div key={sectionTitle}>
+              <p data-fs-footer-links-title>{sectionTitle}</p>
+              <Links items={items} />
             </div>
           ))}
         </nav>

package/src/components/common/Footer/FooterSocial.tsx

@@ -0,0 +1,42 @@
+import { Icon as UIIcon, List as UIList } from '@faststore/ui'
+
+import Link from 'src/components/ui/Link'
+
+type FooterSocialLink = {
+  icon: {
+    icon: string
+  }
+  alt: string
+  url: string
+}
+
+export interface FooterSocialProps {
+  title: string
+  links: FooterSocialLink[]
+}
+
+function FooterSocial({ title, links }: FooterSocialProps) {
+  return (
+    <section data-fs-footer-social>
+      <p data-fs-footer-social-title>{title}</p>
+      <UIList>
+        {links.map(({ icon: { icon }, url }) => (
+          <li key={icon}>
+            <Link
+              href={url}
+              title={icon}
+              size="small"
+              target="_blank"
+              variant="display"
+              rel="noopener noreferrer"
+            >
+              <UIIcon name={icon} />
+            </Link>
+          </li>
+        ))}
+      </UIList>
+    </section>
+  )
+}
+
+export default FooterSocial

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

@@ -1,3 +1,8 @@
 export { default } from './Footer'
+export { FooterInfo, FooterNavigation } from './Footer'
+
 export { default as FooterLinks } from './FooterLinks'
-export { default as FooterFlags } from './FooterFlags'
+export type { FooterLinksProps } from './FooterLinks'
+
+export { default as FooterSocial } from './FooterSocial'
+export type { FooterSocialProps } from './FooterSocial'

package/src/components/common/Toast/Toast.tsx

@@ -1,7 +1,9 @@
-import { Suspense, useEffect } from 'react'
+import { useEffect } from 'react'
 
 import { Toast as UIToast, useUI } from '@faststore/ui'
+import Section from 'src/components/sections/Section/Section'
 import { useCart } from 'src/sdk/cart'
+import styles from './section.module.scss'
 
 function Toast() {
   const { toasts, pushToast } = useUI()
@@ -27,9 +29,9 @@ function Toast() {
   return (
     <>
       {toasts.length > 0 && (
-        <Suspense fallback={null}>
+        <Section className={`${styles.section} section-toast`}>
           <UIToast />
-        </Suspense>
+        </Section>
       )}
     </>
   )

package/src/components/common/Toast/section.module.scss

@@ -0,0 +1,7 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Icon/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Toast/styles.scss";
+}

package/src/components/product/ProductCard/ProductCard.tsx

@@ -1,16 +1,17 @@
+import { gql } from '@faststore/graphql-utils'
 import {
   ProductCard as UIProductCard,
   ProductCardContent as UIProductCardContent,
   ProductCardImage as UIProductCardImage,
 } from '@faststore/ui'
-import { gql } from '@faststore/graphql-utils'
 import { memo } from 'react'
 
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+import { ImageProps } from 'next/future/image'
+import NextLink from 'next/link'
 import { Image } from 'src/components/ui/Image'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import NextLink from 'next/link'
 
 type Variant = 'wide' | 'default'
 
@@ -29,6 +30,10 @@ export interface ProductCardProps {
    * Specifies the ProductCard image's aspect ratio.
    */
   aspectRatio?: number
+  /**
+   * Specifies the ProductCard image's props.
+   */
+  imgProps?: Partial<ImageProps>
   /**
    * Specifies Rating Value of the product.
    */
@@ -53,6 +58,7 @@ function ProductCard({
   bordered = false,
   variant = 'default',
   aspectRatio = 1,
+  imgProps,
   ratingValue,
   buttonLabel = 'Add',
   onButtonClick,
@@ -90,10 +96,10 @@ function ProductCard({
         <Image
           src={img.url}
           alt={img.alternateName}
-          width={360}
-          height={360 / aspectRatio}
-          sizes="(max-width: 768px) 25vw, 30vw"
-          loading="lazy"
+          sizes={`${imgProps?.sizes ?? '(max-width: 768px) 40vw, 30vw'}`}
+          width={imgProps?.width ?? 360}
+          height={Math.round((Number(imgProps?.height) || 360) / aspectRatio)}
+          loading={imgProps?.loading}
         />
       </UIProductCardImage>
       <UIProductCardContent

package/src/components/product/ProductGrid/ProductGrid.tsx

@@ -35,6 +35,11 @@ function ProductGrid({ products, page, pageSize }: Props) {
               index={pageSize * page + idx + 1}
               bordered
               aspectRatio={aspectRatio}
+              imgProps={{
+                width: 150,
+                height: 150,
+                sizes: '30vw',
+              }}
             />
           </UIProductGridItem>
         ))}

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

@@ -11,11 +11,11 @@ function RegionButton() {
     <UIButton
       variant="tertiary"
       size="small"
-      icon={<Icon name="MapPin" width={24} height={24} />}
+      icon={<Icon name="MapPin" width={18} height={18} weight="bold" />}
       iconPosition="left"
       onClick={openModal}
     >
-      <span>{postalCode ?? 'Set your location'}</span>
+      {postalCode ?? 'Set your location'}
     </UIButton>
   )
 }

package/src/components/sections/BannerNewsletter/BannerNewsletter.tsx

@@ -21,6 +21,7 @@ function BannerNewsletter() {
           title="Get News and Special Offers!"
           description="Receive our news and promotions in advance. Enjoy and get 10% off your first purchase. For more information click here."
           card
+          lite
         />
       </div>
     </Section>

package/src/components/sections/BannerNewsletter/section.module.scss

@@ -3,6 +3,7 @@
 
 .section {
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/molecules/LinkButton/styles.scss";
   @import "@faststore/ui/src/components/molecules/Banner/styles.scss";
   @import "@faststore/ui/src/components/organisms/BannerNewsletter/styles.scss";
 }