From bc8293343542cd345aceab7687234f3d8c54aed9 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Thu, 3 Mar 2022 12:40:29 -0300
Subject: [PATCH 1/6] add content-visibility to sections

---
 CHANGELOG.md                                 |  2 +-
 src/components/sections/Section/Section.scss |  9 +++
 src/components/sections/Section/Section.tsx  | 10 +++
 src/components/sections/Section/index.ts     |  1 +
 src/pages/index.tsx                          | 69 +++++++++++---------
 src/pages/s.tsx                              | 11 ++--
 src/pages/{StoreCollection.slug}.tsx         | 51 +++++++++------
 src/pages/{StoreProduct.slug}/p.tsx          | 23 ++++---
 8 files changed, 113 insertions(+), 63 deletions(-)
 create mode 100644 src/components/sections/Section/Section.scss
 create mode 100644 src/components/sections/Section/Section.tsx
 create mode 100644 src/components/sections/Section/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b60b5b9d6..2ee14c378 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
-
+- Sections component with `content-visibility: auto`
 - Webpack Bundle analyzer
 - `GatsbyLink` to `Link` ui component.
 - `Skeleton` loading components.
diff --git a/src/components/sections/Section/Section.scss b/src/components/sections/Section/Section.scss
new file mode 100644
index 000000000..7cbd849f7
--- /dev/null
+++ b/src/components/sections/Section/Section.scss
@@ -0,0 +1,9 @@
+.pages__section {
+  width: 100vw;
+  content-visibility: auto;
+  contain-intrinsic-size: 2px 1024px;
+
+  .title-section {
+    margin-bottom: var(--space-3);
+  }
+}
diff --git a/src/components/sections/Section/Section.tsx b/src/components/sections/Section/Section.tsx
new file mode 100644
index 000000000..f70747d4a
--- /dev/null
+++ b/src/components/sections/Section/Section.tsx
@@ -0,0 +1,10 @@
+import './Section.scss'
+
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+
+function Section({ children }: PropsWithChildren<unknown>) {
+  return <section className="pages__section">{children}</section>
+}
+
+export default Section
diff --git a/src/components/sections/Section/index.ts b/src/components/sections/Section/index.ts
new file mode 100644
index 000000000..58e9490a5
--- /dev/null
+++ b/src/components/sections/Section/index.ts
@@ -0,0 +1 @@
+export { default } from './Section'
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index f8e72c7fc..44c206f52 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,6 +7,7 @@ import Hero from 'src/components/sections/Hero'
 import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeader'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import ProductTiles from 'src/components/sections/ProductTiles'
+import Section from 'src/components/sections/Section'
 import { mark } from 'src/sdk/tests/mark'
 import type { PageProps } from 'gatsby'
 import type { HomePageQueryQuery } from '@generated/graphql'
@@ -57,7 +58,7 @@ function Page(props: Props) {
         Sections: Components imported from '../components/sections' only.
         Do not import or render components from any other folder in here.
       */}
-      <section className="page__section">
+      <Section>
         <Hero
           title="New Products Available"
           subtitle="At FastStore you can shop the best tech of 2022. Enjoy and get 10% off on your first purchase."
@@ -66,41 +67,49 @@ function Page(props: Props) {
           imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
           imageAlt="Quest 2 Controller on a table"
         />
-      </section>
+      </Section>
 
-      <section className="page__section">
+      <Section>
         <IncentivesHeader />
-      </section>
+      </Section>
 
-      <section className="page__section page__section-shelf / grid-section">
-        <h2 className="title-section / grid-content">Most Wanted</h2>
-        <div className="page__section-content">
-          <ProductShelf products={products?.slice(0, 5)} />
-        </div>
-      </section>
+      <Section>
+        <section className="page__section-shelf / grid-section">
+          <h2 className="title-section / grid-content">Most Wanted</h2>
+          <div className="page__section-content">
+            <ProductShelf products={products?.slice(0, 5)} />
+          </div>
+        </section>
+      </Section>
 
-      <section className="page__section / grid-section grid-content">
-        <h2 className="title-section">Just Arrived</h2>
-        <div className="page__section-content">
-          <ProductTiles products={products?.slice(5, 8)} />
-        </div>
-      </section>
+      <Section>
+        <section className="grid-section grid-content">
+          <h2 className="title-section">Just Arrived</h2>
+          <div className="page__section-content">
+            <ProductTiles products={products?.slice(5, 8)} />
+          </div>
+        </section>
+      </Section>
 
-      <section className="page__section / grid-section">
-        <BannerText
-          title="Receive our news and promotions in advance."
-          caption="Enjoy and get 10% off on your first purchase."
-          actionPath="/"
-          actionLabel="Call to action"
-        />
-      </section>
+      <Section>
+        <section className="grid-section">
+          <BannerText
+            title="Receive our news and promotions in advance."
+            caption="Enjoy and get 10% off on your first purchase."
+            actionPath="/"
+            actionLabel="Call to action"
+          />
+        </section>
+      </Section>
 
-      <section className="page__section page__section-shelf / grid-section">
-        <h2 className="title-section / grid-content">Deals & Promotions</h2>
-        <div className="page__section-content">
-          <ProductShelf products={products?.slice(9, 14)} />
-        </div>
-      </section>
+      <Section>
+        <section className="page__section-shelf / grid-section">
+          <h2 className="title-section / grid-content">Deals & Promotions</h2>
+          <div className="page__section-content">
+            <ProductShelf products={products?.slice(9, 14)} />
+          </div>
+        </section>
+      </Section>
     </>
   )
 }
diff --git a/src/pages/s.tsx b/src/pages/s.tsx
index 8990e339e..9bdde85a1 100644
--- a/src/pages/s.tsx
+++ b/src/pages/s.tsx
@@ -1,17 +1,18 @@
 import { parseSearchState, SearchProvider, useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
+import { GatsbySeo } from 'gatsby-plugin-next-seo'
 import React, { useMemo } from 'react'
 import ProductGallery from 'src/components/sections/ProductGallery'
+import Section from 'src/components/sections/Section'
+import SROnly from 'src/components/ui/SROnly'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { applySearchState } from 'src/sdk/search/state'
+import { mark } from 'src/sdk/tests/mark'
 import type { PageProps } from 'gatsby'
 import type {
   SearchPageQueryQuery,
   SearchPageQueryQueryVariables,
 } from '@generated/graphql'
-import { GatsbySeo } from 'gatsby-plugin-next-seo'
-import SROnly from 'src/components/ui/SROnly'
-import { mark } from 'src/sdk/tests/mark'
 
 export type Props = PageProps<
   SearchPageQueryQuery,
@@ -60,7 +61,9 @@ function Page(props: Props) {
       */}
       <SROnly as="h1" text={title} />
 
-      <ProductGallery title="Search Results" />
+      <Section>
+        <ProductGallery title="Search Results" />
+      </Section>
     </SearchProvider>
   )
 }
diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx
index b6b8af5a9..244100a46 100644
--- a/src/pages/{StoreCollection.slug}.tsx
+++ b/src/pages/{StoreCollection.slug}.tsx
@@ -3,14 +3,15 @@ import { graphql } from 'gatsby'
 import { BreadcrumbJsonLd, GatsbySeo } from 'gatsby-plugin-next-seo'
 import { Headphones as HeadphonesIcon } from 'phosphor-react'
 import React from 'react'
+import Breadcrumb from 'src/components/sections/Breadcrumb'
 import Hero from 'src/components/sections/Hero'
 import ProductGallery from 'src/components/sections/ProductGallery'
 import ProductShelf from 'src/components/sections/ProductShelf'
+import Section from 'src/components/sections/Section'
 import ScrollToTopButton from 'src/components/ui/ScrollToTopButton'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useSearchParams } from 'src/hooks/useSearchParams'
 import { applySearchState } from 'src/sdk/search/state'
-import Breadcrumb from 'src/components/sections/Breadcrumb'
 import { mark } from 'src/sdk/tests/mark'
 import type { Props } from 'src/hooks/useSearchParams'
 
@@ -66,15 +67,17 @@ function Page(props: Props) {
         Do not import or render components from any other folder in here.
       */}
 
-      <section className="product-listing__breadcrumb / grid-content">
-        <Breadcrumb
-          breadcrumbList={collection?.breadcrumbList.itemListElement}
-          name={title}
-        />
-      </section>
+      <Section>
+        <div className="product-listing__breadcrumb / grid-content">
+          <Breadcrumb
+            breadcrumbList={collection?.breadcrumbList.itemListElement}
+            name={title}
+          />
+        </div>
+      </Section>
 
-      <div className="product-listing__hero">
-        <section className="page__section">
+      <Section>
+        <div className="product-listing__hero">
           <Hero
             variant="small"
             title={title}
@@ -83,23 +86,31 @@ function Page(props: Props) {
             imageAlt="Quest 2 Controller on a table"
             icon={<HeadphonesIcon size={48} weight="thin" />}
           />
-        </section>
-      </div>
+        </div>
+      </Section>
 
-      <ProductGallery title={title} />
+      <Section>
+        <ProductGallery title={title} />
+      </Section>
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <section className="page__section page__section-shelf page__section-divisor / grid-section">
-          <h2 className="title-section / grid-content">You might also like</h2>
-          <div className="page__section-content">
-            <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
+        <Section>
+          <div className="page__section-shelf page__section-divisor / grid-section">
+            <h2 className="title-section / grid-content">
+              You might also like
+            </h2>
+            <div className="page__section-content">
+              <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
+            </div>
           </div>
-        </section>
+        </Section>
       )}
 
-      <div className="product-listing__scroll-top">
-        <ScrollToTopButton />
-      </div>
+      <Section>
+        <div className="product-listing__scroll-top">
+          <ScrollToTopButton />
+        </div>
+      </Section>
     </SearchProvider>
   )
 }
diff --git a/src/pages/{StoreProduct.slug}/p.tsx b/src/pages/{StoreProduct.slug}/p.tsx
index c6ebca6c0..717855dd1 100644
--- a/src/pages/{StoreProduct.slug}/p.tsx
+++ b/src/pages/{StoreProduct.slug}/p.tsx
@@ -7,13 +7,14 @@ import {
 } from 'gatsby-plugin-next-seo'
 import React from 'react'
 import ProductDetails from 'src/components/sections/ProductDetails'
+import ProductShelf from 'src/components/sections/ProductShelf'
+import Section from 'src/components/sections/Section'
+import { mark } from 'src/sdk/tests/mark'
 import type { PageProps } from 'gatsby'
 import type {
   ProductPageQueryQuery,
   ProductPageQueryQueryVariables,
 } from '@generated/graphql'
-import ProductShelf from 'src/components/sections/ProductShelf'
-import { mark } from 'src/sdk/tests/mark'
 
 export type Props = PageProps<
   ProductPageQueryQuery,
@@ -94,15 +95,21 @@ function Page(props: Props) {
         Do not import or render components from any other folder in here.
       */}
 
-      <ProductDetails product={product} />
+      <Section>
+        <ProductDetails product={product} />
+      </Section>
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <section className="page__section page__section-shelf page__section-divisor / grid-section">
-          <h2 className="title-section / grid-content">You might also like</h2>
-          <div className="page__section-content">
-            <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
+        <Section>
+          <div className="page__section-shelf page__section-divisor / grid-section">
+            <h2 className="title-section / grid-content">
+              You might also like
+            </h2>
+            <div className="page__section-content">
+              <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
+            </div>
           </div>
-        </section>
+        </Section>
       )}
     </>
   )

From f123de6b9496af00f12e19110ec8a8e9f6b9bb8c Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 14:15:21 -0300
Subject: [PATCH 2/6] Update src/components/sections/Section/Section.scss

Co-authored-by: Eduardo Formiga <eduardo.formiga@gmail.com>
---
 src/components/sections/Section/Section.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sections/Section/Section.scss b/src/components/sections/Section/Section.scss
index 7cbd849f7..97589c76c 100644
--- a/src/components/sections/Section/Section.scss
+++ b/src/components/sections/Section/Section.scss
@@ -1,7 +1,7 @@
 .pages__section {
   width: 100vw;
   content-visibility: auto;
-  contain-intrinsic-size: 2px 1024px;
+  contain-intrinsic-size: rem(2px) rem(1024px);
 
   .title-section {
     margin-bottom: var(--space-3);

From b03f36d5e6510ab611290972cc9a1b586f87adc6 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 14:16:41 -0300
Subject: [PATCH 3/6] change case of file

---
 src/components/sections/Section/Section.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/sections/Section/Section.tsx b/src/components/sections/Section/Section.tsx
index f70747d4a..666f8ab3c 100644
--- a/src/components/sections/Section/Section.tsx
+++ b/src/components/sections/Section/Section.tsx
@@ -1,4 +1,4 @@
-import './Section.scss'
+import './section.scss'
 
 import React from 'react'
 import type { PropsWithChildren } from 'react'

From 4ba0defb096730fd1ac8e5435277eae399ef43c7 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 14:18:06 -0300
Subject: [PATCH 4/6] change case

---
 src/components/sections/Section/{Section.scss => section.scss} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/sections/Section/{Section.scss => section.scss} (100%)

diff --git a/src/components/sections/Section/Section.scss b/src/components/sections/Section/section.scss
similarity index 100%
rename from src/components/sections/Section/Section.scss
rename to src/components/sections/Section/section.scss

From 2a5872c3bea2a57ee8487564502cc3a68ecc3790 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 14:30:16 -0300
Subject: [PATCH 5/6] reduce dom elements

---
 src/components/sections/Section/Section.tsx  |  8 ++-
 src/components/sections/Section/section.scss |  2 +-
 src/pages/index.tsx                          | 52 +++++++++-----------
 src/pages/{StoreCollection.slug}.tsx         | 50 ++++++++-----------
 src/pages/{StoreProduct.slug}/p.tsx          | 12 ++---
 5 files changed, 53 insertions(+), 71 deletions(-)

diff --git a/src/components/sections/Section/Section.tsx b/src/components/sections/Section/Section.tsx
index 666f8ab3c..2953a4fb8 100644
--- a/src/components/sections/Section/Section.tsx
+++ b/src/components/sections/Section/Section.tsx
@@ -3,8 +3,12 @@ import './section.scss'
 import React from 'react'
 import type { PropsWithChildren } from 'react'
 
-function Section({ children }: PropsWithChildren<unknown>) {
-  return <section className="pages__section">{children}</section>
+interface Props {
+  className?: string
+}
+
+function Section({ children, className = '' }: PropsWithChildren<Props>) {
+  return <section className={`section ${className}`}>{children}</section>
 }
 
 export default Section
diff --git a/src/components/sections/Section/section.scss b/src/components/sections/Section/section.scss
index 97589c76c..829137c22 100644
--- a/src/components/sections/Section/section.scss
+++ b/src/components/sections/Section/section.scss
@@ -1,4 +1,4 @@
-.pages__section {
+.section {
   width: 100vw;
   content-visibility: auto;
   contain-intrinsic-size: rem(2px) rem(1024px);
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 44c206f52..7a30549ff 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -73,42 +73,34 @@ function Page(props: Props) {
         <IncentivesHeader />
       </Section>
 
-      <Section>
-        <section className="page__section-shelf / grid-section">
-          <h2 className="title-section / grid-content">Most Wanted</h2>
-          <div className="page__section-content">
-            <ProductShelf products={products?.slice(0, 5)} />
-          </div>
-        </section>
+      <Section className="page__section-shelf / grid-section">
+        <h2 className="title-section / grid-content">Most Wanted</h2>
+        <div className="page__section-content">
+          <ProductShelf products={products?.slice(0, 5)} />
+        </div>
       </Section>
 
-      <Section>
-        <section className="grid-section grid-content">
-          <h2 className="title-section">Just Arrived</h2>
-          <div className="page__section-content">
-            <ProductTiles products={products?.slice(5, 8)} />
-          </div>
-        </section>
+      <Section className="grid-section grid-content">
+        <h2 className="title-section">Just Arrived</h2>
+        <div className="page__section-content">
+          <ProductTiles products={products?.slice(5, 8)} />
+        </div>
       </Section>
 
-      <Section>
-        <section className="grid-section">
-          <BannerText
-            title="Receive our news and promotions in advance."
-            caption="Enjoy and get 10% off on your first purchase."
-            actionPath="/"
-            actionLabel="Call to action"
-          />
-        </section>
+      <Section className="grid-section">
+        <BannerText
+          title="Receive our news and promotions in advance."
+          caption="Enjoy and get 10% off on your first purchase."
+          actionPath="/"
+          actionLabel="Call to action"
+        />
       </Section>
 
-      <Section>
-        <section className="page__section-shelf / grid-section">
-          <h2 className="title-section / grid-content">Deals & Promotions</h2>
-          <div className="page__section-content">
-            <ProductShelf products={products?.slice(9, 14)} />
-          </div>
-        </section>
+      <Section className="page__section-shelf / grid-section">
+        <h2 className="title-section / grid-content">Deals & Promotions</h2>
+        <div className="page__section-content">
+          <ProductShelf products={products?.slice(9, 14)} />
+        </div>
       </Section>
     </>
   )
diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx
index 244100a46..282a18e85 100644
--- a/src/pages/{StoreCollection.slug}.tsx
+++ b/src/pages/{StoreCollection.slug}.tsx
@@ -67,26 +67,22 @@ function Page(props: Props) {
         Do not import or render components from any other folder in here.
       */}
 
-      <Section>
-        <div className="product-listing__breadcrumb / grid-content">
-          <Breadcrumb
-            breadcrumbList={collection?.breadcrumbList.itemListElement}
-            name={title}
-          />
-        </div>
+      <Section className="product-listing__breadcrumb / grid-content">
+        <Breadcrumb
+          breadcrumbList={collection?.breadcrumbList.itemListElement}
+          name={title}
+        />
       </Section>
 
-      <Section>
-        <div className="product-listing__hero">
-          <Hero
-            variant="small"
-            title={title}
-            subtitle={`All the amazing ${title} from the brands we partner with.`}
-            imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
-            imageAlt="Quest 2 Controller on a table"
-            icon={<HeadphonesIcon size={48} weight="thin" />}
-          />
-        </div>
+      <Section className="product-listing__hero">
+        <Hero
+          variant="small"
+          title={title}
+          subtitle={`All the amazing ${title} from the brands we partner with.`}
+          imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
+          imageAlt="Quest 2 Controller on a table"
+          icon={<HeadphonesIcon size={48} weight="thin" />}
+        />
       </Section>
 
       <Section>
@@ -94,22 +90,16 @@ function Page(props: Props) {
       </Section>
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <Section>
-          <div className="page__section-shelf page__section-divisor / grid-section">
-            <h2 className="title-section / grid-content">
-              You might also like
-            </h2>
-            <div className="page__section-content">
-              <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
-            </div>
+        <Section className="page__section-shelf page__section-divisor / grid-section">
+          <h2 className="title-section / grid-content">You might also like</h2>
+          <div className="page__section-content">
+            <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
           </div>
         </Section>
       )}
 
-      <Section>
-        <div className="product-listing__scroll-top">
-          <ScrollToTopButton />
-        </div>
+      <Section className="product-listing__scroll-top">
+        <ScrollToTopButton />
       </Section>
     </SearchProvider>
   )
diff --git a/src/pages/{StoreProduct.slug}/p.tsx b/src/pages/{StoreProduct.slug}/p.tsx
index 717855dd1..9283e9309 100644
--- a/src/pages/{StoreProduct.slug}/p.tsx
+++ b/src/pages/{StoreProduct.slug}/p.tsx
@@ -100,14 +100,10 @@ function Page(props: Props) {
       </Section>
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <Section>
-          <div className="page__section-shelf page__section-divisor / grid-section">
-            <h2 className="title-section / grid-content">
-              You might also like
-            </h2>
-            <div className="page__section-content">
-              <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
-            </div>
+        <Section className="page__section-shelf page__section-divisor / grid-section">
+          <h2 className="title-section / grid-content">You might also like</h2>
+          <div className="page__section-content">
+            <ProductShelf products={youMightAlsoLikeProducts.slice(0, 5)} />
           </div>
         </Section>
       )}

From 1ede4b84692b892b07f0162236d078d404bf56ae Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 14:42:22 -0300
Subject: [PATCH 6/6] add intrisic size

---
 src/components/sections/Section/section.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/sections/Section/section.scss b/src/components/sections/Section/section.scss
index 829137c22..3ea55728c 100644
--- a/src/components/sections/Section/section.scss
+++ b/src/components/sections/Section/section.scss
@@ -1,3 +1,5 @@
+@import "src/styles/scaffold";
+
 .section {
   width: 100vw;
   content-visibility: auto;