add content-visibility to sections

vtex-sites · Mar 3, 2022 · f7aa56a · f7aa56a
1 parent 7efcc63
commit f7aa56a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 30 deletions.
diff --git a/src/components/sections/Section/Section.scss 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
@@ -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
@@ -0,0 +1 @@
+export { default } from './Section'
diff --git 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>
     </>
   )
 }