From a794445d54960888f2a4be4edae6658f6fad57c5 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Thu, 3 Mar 2022 16:58:51 -0300
Subject: [PATCH] add section to pages

---
 CHANGELOG.md                                 |  1 +
 src/components/sections/Section/Section.scss |  5 +-
 src/pages/s.tsx                              | 11 +++--
 src/pages/{StoreCollection.slug}.tsx         | 51 ++++++++++++--------
 src/pages/{StoreProduct.slug}/p.tsx          | 23 ++++++---
 5 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ece466f89..cda5e4e40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +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
index d088dabf6..7cbd849f7 100644
--- a/src/components/sections/Section/Section.scss
+++ b/src/components/sections/Section/Section.scss
@@ -1,8 +1,7 @@
 .pages__section {
-  display: inline-block;
-  width: 100%;
+  width: 100vw;
   content-visibility: auto;
-  contain-intrinsic-size: auto 500px;
+  contain-intrinsic-size: 2px 1024px;
 
   .title-section {
     margin-bottom: var(--space-3);
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>
       )}
     </>
   )