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

---
 src/components/sections/Section/Section.scss | 10 +++
 src/components/sections/Section/Section.tsx  | 10 +++
 src/components/sections/Section/index.ts     |  1 +
 src/pages/index.tsx                          | 69 +++++++++++---------
 4 files changed, 60 insertions(+), 30 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/src/components/sections/Section/Section.scss b/src/components/sections/Section/Section.scss
new file mode 100644
index 000000000..d088dabf6
--- /dev/null
+++ b/src/components/sections/Section/Section.scss
@@ -0,0 +1,10 @@
+.pages__section {
+  display: inline-block;
+  width: 100%;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
+
+  .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>
     </>
   )
 }