@faststore/core 2.0.121-alpha.0 → 2.0.123-alpha.0

package/.turbo/turbo-build.log

@@ -36,28 +36,27 @@ info  - Generating static pages (7/7)
 info  - Finalizing page optimization...
 
 Route (pages)                              Size     First Load JS
-┌ ● /                                      4.05 kB         122 kB
-├   └ css/777fb0b5b1c2fa32.css             2.87 kB
+┌ ● /                                      2.85 kB         122 kB
+├   └ css/7a8417de90d11c60.css             7.06 kB
 ├   /_app                                  0 B            77.8 kB
-├ ● /[...slug]                             2.29 kB         130 kB
-├   └ css/c302d203b46499ff.css             2.52 kB
-├ ● /[slug]/p                              12.3 kB         131 kB
-├   └ css/384a7a015bca80d6.css             3.01 kB
-├ ○ /404                                   950 B           110 kB
+├ ● /[...slug]                             9.58 kB         129 kB
+├   └ css/4e0fc649e912b30f.css             6.98 kB
+├ ● /[slug]/p                              11.1 kB         131 kB
+├   └ css/4b7b7b64ae6afe67.css             9.14 kB
+├ ○ /404                                   951 B           110 kB
 ├ ● /500                                   718 B           110 kB
-├ ● /account                               671 B           110 kB
+├ ● /account                               669 B           110 kB
 ├ λ /api/graphql                           0 B            77.8 kB
 ├ λ /api/preview                           0 B            77.8 kB
-├ ● /checkout                              659 B           109 kB
-├ ● /login                                 869 B           110 kB
-└ ● /s                                     2.77 kB         121 kB
-    └ css/57c1885d16efdc73.css             2.48 kB
-+ First Load JS shared by all              100 kB
+├ ● /checkout                              657 B           110 kB
+├ ● /login                                 868 B           110 kB
+└ ● /s                                     961 B           121 kB
++ First Load JS shared by all              80.6 kB
   ├ chunks/framework-dfd14d7ce6600b03.js   45.3 kB
   ├ chunks/main-9746772201fe3ac1.js        23.9 kB
-  ├ chunks/pages/_app-c3a2ae2beed7c7e5.js  6.43 kB
-  ├ chunks/webpack-4b9a36060b4c8160.js     2.22 kB
-  └ css/4e34a56a38b0d9d5.css               22.5 kB
+  ├ chunks/pages/_app-b601536188b9a919.js  6.43 kB
+  ├ chunks/webpack-426a37879992164d.js     2.24 kB
+  └ css/587c27bbda64e700.css               2.8 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.123-alpha.0](https://github.com/vtex/faststore/compare/v2.0.122-alpha.0...v2.0.123-alpha.0) (2023-05-02)
+
+### Documentation
+
+- Updates Icons docs + general updates ([#1739](https://github.com/vtex/faststore/issues/1739)) ([44f3521](https://github.com/vtex/faststore/commit/44f35219ba09e157aba0ea47d462f7a2ccc42b50))
+
+## [2.0.122-alpha.0](https://github.com/vtex/faststore/compare/v2.0.121-alpha.0...v2.0.122-alpha.0) (2023-04-27)
+
+### Bug Fixes
+
+- LH Unused CSS + Organizes CMS Sections and components styles. ([#1712](https://github.com/vtex/faststore/issues/1712)) ([0ab1fa8](https://github.com/vtex/faststore/commit/0ab1fa805e41a53f21cbe26dc5143f853b64dc00))
+
 ## [2.0.121-alpha.0](https://github.com/vtex/faststore/compare/v2.0.120-alpha.0...v2.0.121-alpha.0) (2023-04-27)
 
 **Note:** Version bump only for package @faststore/core

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/core",
-  "version": "2.0.121-alpha.0",
+  "version": "2.0.123-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.117-alpha.0",
+    "@faststore/components": "^2.0.123-alpha.0",
     "@faststore/graphql-utils": "^2.0.3-alpha.0",
     "@faststore/sdk": "^2.0.118-alpha.0",
-    "@faststore/ui": "^2.0.117-alpha.0",
+    "@faststore/ui": "^2.0.122-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": "2571f06b295c21d4046b26760852d7e87057d5e7"
+  "gitHead": "1fa54ca9614dde12ba99a2870273e1797986ee16"
 }

package/src/components/cart/CartSidebar/CartSidebar.tsx

@@ -1,9 +1,9 @@
 import { sendAnalyticsEvent } from '@faststore/sdk'
 import {
+  Button as UIButton,
   CartSidebar as UICartSidebar,
-  CartSidebarList as UICartSidebarList,
   CartSidebarFooter as UICartSidebarFooter,
-  Button as UIButton,
+  CartSidebarList as UICartSidebarList,
 } from '@faststore/ui'
 
 import type { CurrencyCode, ViewCartEvent } from '@faststore/sdk'
@@ -18,6 +18,7 @@ import Gift from '../../ui/Gift'
 import CartItem from '../CartItem'
 import EmptyCart from '../EmptyCart'
 import OrderSummary from '../OrderSummary'
+import styles from './section.module.scss'
 
 function CartSidebar() {
   const { currency } = useSession()
@@ -55,6 +56,9 @@ function CartSidebar() {
 
   return (
     <UICartSidebar
+      overlayProps={{
+        className: `section ${styles.section} section-cart-sidebar`,
+      }}
       totalItems={totalItems}
       alertIcon={<Icon name="Truck" />}
       alertText="Free shipping starts at $300"

package/src/components/cart/CartSidebar/section.module.scss

@@ -0,0 +1,21 @@
+/* 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/atoms/Overlay/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Badge/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Price/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Modal/styles.scss";
+  @import "@faststore/ui/src/components/molecules/CartItem/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Gift/styles.scss";
+  @import "@faststore/ui/src/components/molecules/QuantitySelector/styles.scss";
+  @import "@faststore/ui/src/components/molecules/OrderSummary/styles.scss";
+  @import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
+  @import "@faststore/ui/src/components/organisms/SlideOver/styles.scss";
+  @import "@faststore/ui/src/components/organisms/CartSidebar/styles.scss";
+}

package/src/components/cms/GlobalSections.tsx

@@ -1,16 +1,16 @@
 import { PropsWithChildren, useMemo } from 'react'
 
 import { Locator, Section } from '@vtex/client-cms'
-import { PageContentType, getPage } from 'src/server/cms'
-import CUSTOM_COMPONENTS from 'src/customizations/components'
 import type { ComponentType } from 'react'
+import CUSTOM_COMPONENTS from 'src/customizations/components'
+import { PageContentType, getPage } from 'src/server/cms'
 
-import RenderSections from './RenderSections'
-import { RegionBar } from '@faststore/components'
-import Alert from 'src/components/sections/Alert/Alert'
-import Navbar from 'src/components/navigation/Navbar'
 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'
 
 // TODO: When the CMS is finished, switch to using 'globalSections'.
 export const GLOBAL_SECTIONS_CONTENT_TYPE = 'globalAlert'

package/src/components/common/Alert/Alert.tsx

@@ -4,6 +4,9 @@ import { useCallback, useState } from 'react'
 import { Alert as UIAlert, AlertProps as UIAlertProps } from '@faststore/ui'
 import { mark } from 'src/sdk/tests/mark'
 
+import Section from 'src/components/sections/Section/Section'
+import styles from './section.module.scss'
+
 export interface AlertProps extends UIAlertProps {
   /**
    * For CMS integration purposes, should be used to pass content through it
@@ -28,9 +31,11 @@ function Alert({
   }
 
   return (
-    <UIAlert onClose={onAlertClose} {...otherProps}>
-      {content ?? children}
-    </UIAlert>
+    <Section className={`${styles.section} section-alert`}>
+      <UIAlert onClose={onAlertClose} {...otherProps}>
+        {content ?? children}
+      </UIAlert>
+    </Section>
   )
 }
 

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

@@ -0,0 +1,9 @@
+/* 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/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
+}

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

@@ -4,14 +4,15 @@ import {
   PaymentMethods as UIPaymentMethods,
 } from '@faststore/ui'
 
-import IncentivesFooter from 'src/components/sections/Incentives/IncentivesFooter'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
 
-import styles from './footer.module.scss'
+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'
 
 type FooterProps = {
   /**
@@ -34,93 +35,90 @@ export function Footer({
   sectionPaymentMethods = true,
 }: FooterProps) {
   return (
-    <footer
-      data-fs-footer
-      data-fs-footer-incentives={sectionIncentives}
-      data-fs-footer-social={sectionSocial}
-      data-fs-footer-payment-methods={sectionPaymentMethods}
-      className={`${styles.fsFooter} layout__content-full`}
-    >
-      {sectionIncentives && <IncentivesFooter />}
-
-      <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 width="24px" height="24px" name="Facebook" />
-                </Link>
-              </li>
-              <li>
-                <Link
-                  variant="display"
-                  size="small"
-                  href="https://www.instagram.com/"
-                  title="Instagram"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Icon width="24px" height="24px" name="Instagram" />
-                </Link>
-              </li>
-              <li>
-                <Link
-                  variant="display"
-                  size="small"
-                  href="https://www.pinterest.com/"
-                  title="Pinterest"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Icon width="24px" height="24px" name="Pinterest" />
-                </Link>
-              </li>
-              <li>
-                <Link
-                  variant="display"
-                  size="small"
-                  href="https://twitter.com/"
-                  title="Twitter"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  <Icon width="24px" height="24px" 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>
+    <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>

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

@@ -1,16 +1,14 @@
-import { useState } from 'react'
 import {
-  List as UIList,
   Accordion as UIAccordion,
-  AccordionItem as UIAccordionItem,
   AccordionButton as UIAccordionButton,
+  AccordionItem as UIAccordionItem,
   AccordionPanel as UIAccordionPanel,
+  List as UIList,
 } from '@faststore/ui'
+import { useState } from 'react'
 
 import Link from 'src/components/ui/Link'
 
-import styles from './footer.module.scss'
-
 const links = [
   {
     title: 'Our company',
@@ -128,7 +126,7 @@ function FooterLinks() {
   }
 
   return (
-    <section className={styles.fsFooter} data-fs-footer-links>
+    <section data-fs-footer data-fs-footer-links>
       <div className="display-mobile">
         <UIAccordion indices={indicesExpanded} onChange={onChange}>
           {links.map((section) => (

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

@@ -0,0 +1,12 @@
+/* stylelint-disable no-invalid-position-at-import-rule */
+@import "@faststore/ui/src/styles/base/utilities.scss";
+
+.section {
+  @import "@faststore/ui/src/components/atoms/Link/styles.scss";
+  @import "@faststore/ui/src/components/atoms/List/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Logo/styles.scss";
+  @import "@faststore/ui/src/components/molecules/Accordion/styles.scss";
+  @import "@faststore/ui/src/components/organisms/PaymentMethods/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Incentives/styles.scss";
+  @import "@faststore/ui/src/components/organisms/Footer/styles.scss";
+}

package/src/components/common/RegionBar/RegionBar.tsx

@@ -0,0 +1,17 @@
+import RegionBarComponent from 'src/components/region/RegionBar/RegionBar'
+import Section from 'src/components/sections/Section/Section'
+import styles from './section.module.scss'
+
+type RegionBarProps = {
+  className?: string
+}
+
+function RegionBar({ className = '' }: RegionBarProps) {
+  return (
+    <Section className={`${styles.section} section-region-bar`}>
+      <RegionBarComponent className={className} />
+    </Section>
+  )
+}
+
+export default RegionBar

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

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

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

@@ -0,0 +1,8 @@
+/* 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/atoms/Button/styles.scss";
+  @import "@faststore/ui/src/components/molecules/RegionBar/styles.scss";
+}

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

@@ -1,26 +1,28 @@
 import { Suspense, useRef, useState } from 'react'
 
 import {
-  useUI,
-  useScrollDirection,
   Icon as UIIcon,
   IconButton as UIIconButton,
   Navbar as UINavbar,
+  NavbarButtons as UINavbarButtons,
   NavbarHeader as UINavbarHeader,
   NavbarRow as UINavbarRow,
-  NavbarButtons as UINavbarButtons,
+  useScrollDirection,
+  useUI,
 } from '@faststore/ui'
 
 import CartToggle from 'src/components/cart/CartToggle'
-import SearchInput from 'src/components/search/SearchInput'
 import type { SearchInputRef } from 'src/components/search/SearchInput'
-import Logo from 'src/components/ui/Logo'
-import Link from 'src/components/ui/Link'
+import SearchInput from 'src/components/search/SearchInput'
 import { ButtonSignIn, ButtonSignInFallback } from 'src/components/ui/Button'
+import Link from 'src/components/ui/Link'
+import Logo from 'src/components/ui/Logo'
 import { mark } from 'src/sdk/tests/mark'
 
-import NavbarSlider from '../NavbarSlider'
 import NavbarLinks from '../NavbarLinks'
+import NavbarSlider from '../NavbarSlider'
+
+import styles from './section.module.scss'
 
 function Navbar() {
   const scrollDirection = useScrollDirection()
@@ -34,67 +36,66 @@ function Navbar() {
   }
 
   return (
-    <UINavbar
-      className="layout__content-full"
-      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="/"
-                aria-label="Go to Faststore home"
-                title="Go to Faststore home"
-                data-fs-navbar-logo
-              >
-                <Logo />
-              </Link>
-            </>
-          )}
+    <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="/"
+                  aria-label="Go to Faststore home"
+                  title="Go to Faststore home"
+                  data-fs-navbar-logo
+                >
+                  <Logo />
+                </Link>
+              </>
+            )}
 
-          <SearchInput />
+            <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()
-                }}
-              />
-            )}
+            <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
+                placeholder=""
+                ref={searchMobileRef}
+                testId="store-input-mobile"
+                buttonTestId="store-input-mobile-button"
+                onSearchClick={handlerExpandSearch}
+              />
 
-            <Suspense fallback={<ButtonSignInFallback />}>
-              <ButtonSignIn />
-            </Suspense>
+              <Suspense fallback={<ButtonSignInFallback />}>
+                <ButtonSignIn />
+              </Suspense>
 
-            <CartToggle />
-          </UINavbarButtons>
-        </UINavbarRow>
-      </UINavbarHeader>
+              <CartToggle />
+            </UINavbarButtons>
+          </UINavbarRow>
+        </UINavbarHeader>
 
-      <NavbarLinks className="hidden-mobile" />
+        <NavbarLinks className="hidden-mobile" />
 
-      {displayNavbar && <NavbarSlider />}
-    </UINavbar>
+        {displayNavbar && <NavbarSlider />}
+      </UINavbar>
+    </header>
   )
 }