From 4cd413296db1799a452f7ba4d2ee5ef7744b9814 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 15:28:50 -0300
Subject: [PATCH 1/5] move sections to sections

---
 .../sections/BannerText/BannerText.tsx        | 32 +++++-----
 .../sections/Breadcrumb/Breadcrumb.tsx        | 10 ++-
 src/components/sections/Hero/Hero.tsx         | 63 ++++++++++---------
 .../sections/Incentives/IncentivesHeader.tsx  |  7 ++-
 .../ProductDetails/ProductDetails.tsx         |  5 +-
 .../ProductGallery/ProductGallery.tsx         |  9 +--
 .../ProductGallery/ProductGalleryPage.tsx     |  2 +-
 .../sections/ProductShelf/ProductShelf.tsx    | 36 ++++++++---
 .../sections/ProductTiles/ProductTiles.tsx    | 45 ++++++++-----
 .../ScrollToTopButton/ScrollToTopButton.tsx   | 23 ++++---
 .../ScrollToTopButton/index.ts                |  0
 src/pages/index.tsx                           | 61 +++++++-----------
 src/pages/{StoreCollection.slug}.tsx          | 55 +++++++---------
 src/pages/{StoreProduct.slug}/p.tsx           | 17 ++---
 src/styles/pages/product-listing-page.scss    |  4 --
 15 files changed, 190 insertions(+), 179 deletions(-)
 rename src/components/{ui => sections}/ScrollToTopButton/ScrollToTopButton.tsx (64%)
 rename src/components/{ui => sections}/ScrollToTopButton/index.ts (100%)

diff --git a/src/components/sections/BannerText/BannerText.tsx b/src/components/sections/BannerText/BannerText.tsx
index fc7a7df15..51937815e 100644
--- a/src/components/sections/BannerText/BannerText.tsx
+++ b/src/components/sections/BannerText/BannerText.tsx
@@ -1,7 +1,9 @@
 import { Banner, BannerContent, BannerLink } from '@faststore/ui'
-import type { InputHTMLAttributes } from 'react'
 import React from 'react'
 import { LinkButton } from 'src/components/ui/Button'
+import type { InputHTMLAttributes } from 'react'
+
+import Section from '../Section'
 
 import './banner-text.scss'
 
@@ -34,19 +36,21 @@ function BannerText({
   actionLabel,
 }: BannerTextProps) {
   return (
-    <Banner>
-      <BannerContent className="grid-content">
-        <div className="title-display-big">
-          <h2>{title}</h2>
-          <p>{caption}</p>
-        </div>
-        <BannerLink>
-          <LinkButton to={actionPath} inverse>
-            {actionLabel}
-          </LinkButton>
-        </BannerLink>
-      </BannerContent>
-    </Banner>
+    <Section className="grid-section">
+      <Banner>
+        <BannerContent className="grid-content">
+          <div className="title-display-big">
+            <h2>{title}</h2>
+            <p>{caption}</p>
+          </div>
+          <BannerLink>
+            <LinkButton to={actionPath} inverse>
+              {actionLabel}
+            </LinkButton>
+          </BannerLink>
+        </BannerContent>
+      </Banner>
+    </Section>
   )
 }
 
diff --git a/src/components/sections/Breadcrumb/Breadcrumb.tsx b/src/components/sections/Breadcrumb/Breadcrumb.tsx
index 434b494d1..8d3a0abb4 100644
--- a/src/components/sections/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/sections/Breadcrumb/Breadcrumb.tsx
@@ -1,6 +1,8 @@
 import React, { memo } from 'react'
-import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
 import UIBreadcrumb from 'src/components/ui/Breadcrumb'
+import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
+
+import Section from '../Section'
 
 interface BreadcrumbWrapperProps
   extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
@@ -11,7 +13,11 @@ function Breadcrumb({ breadcrumbList, name }: BreadcrumbWrapperProps) {
   const fallback = [{ item: '/', name, position: 1 }]
   const list = breadcrumbList ?? fallback
 
-  return <UIBreadcrumb breadcrumbList={list} />
+  return (
+    <Section className="product-listing__breadcrumb / grid-content">
+      <UIBreadcrumb breadcrumbList={list} />
+    </Section>
+  )
 }
 
 export default memo(Breadcrumb)
diff --git a/src/components/sections/Hero/Hero.tsx b/src/components/sections/Hero/Hero.tsx
index 33352a6e6..12646987a 100644
--- a/src/components/sections/Hero/Hero.tsx
+++ b/src/components/sections/Hero/Hero.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import type { ReactNode } from 'react'
 import UIHero, {
   HeroContent,
   HeroImage,
@@ -9,6 +8,8 @@ import Image from 'src/components/ui/Image/Image'
 import { LinkButton } from 'src/components/ui/Button'
 import IconSVG from 'src/components/common/IconSVG'
 
+import Section from '../Section'
+
 type Variant = 'default' | 'small'
 
 interface HeroProps {
@@ -17,7 +18,7 @@ interface HeroProps {
   variant?: Variant
   linkText?: string
   link?: string
-  icon?: ReactNode
+  icon?: JSX.Element
   imageSrc: string
   imageAlt: string
 }
@@ -42,36 +43,38 @@ const Hero = ({
   imageSrc,
 }: HeroProps) => {
   return (
-    <UIHero data-hero-variant={variant}>
-      <HeroContent aria-labelledby="hero-heading">
-        <div className="hero-content-wrapper / grid-content">
-          <div className="hero-content-info">
-            <h1
-              id="hero-heading"
-              className={
-                variant === 'default' ? 'title-hero' : 'title-hero-small'
-              }
-            >
-              {title}
-            </h1>
+    <Section>
+      <UIHero data-hero-variant={variant}>
+        <HeroContent aria-labelledby="hero-heading">
+          <div className="hero-content-wrapper / grid-content">
+            <div className="hero-content-info">
+              <h1
+                id="hero-heading"
+                className={
+                  variant === 'default' ? 'title-hero' : 'title-hero-small'
+                }
+              >
+                {title}
+              </h1>
 
-            <p className="text-body-big">{subtitle}</p>
-            {!!link && (
-              <HeroLink>
-                <LinkButton to={link} inverse>
-                  {linkText}{' '}
-                  <IconSVG name="ArrowRight" width={24} height={24} />
-                </LinkButton>
-              </HeroLink>
-            )}
+              <p className="text-body-big">{subtitle}</p>
+              {!!link && (
+                <HeroLink>
+                  <LinkButton to={link} inverse>
+                    {linkText}{' '}
+                    <IconSVG name="ArrowRight" width={24} height={24} />
+                  </LinkButton>
+                </HeroLink>
+              )}
+            </div>
+            {!!icon && <div className="hero-content-icon">{icon}</div>}
           </div>
-          {!!icon && <div className="hero-content-icon">{icon}</div>}
-        </div>
-      </HeroContent>
-      <HeroImage>
-        <Image baseUrl={imageSrc} alt={imageAlt} {...imgProps} />
-      </HeroImage>
-    </UIHero>
+        </HeroContent>
+        <HeroImage>
+          <Image baseUrl={imageSrc} alt={imageAlt} {...imgProps} />
+        </HeroImage>
+      </UIHero>
+    </Section>
   )
 }
 
diff --git a/src/components/sections/Incentives/IncentivesHeader.tsx b/src/components/sections/Incentives/IncentivesHeader.tsx
index daa28bee3..3aa28ec3f 100644
--- a/src/components/sections/Incentives/IncentivesHeader.tsx
+++ b/src/components/sections/Incentives/IncentivesHeader.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import IconSVG from 'src/components/common/IconSVG'
 
 import Incentives from './Incentives'
+import Section from '../Section'
 
 const incentives = [
   {
@@ -32,7 +33,11 @@ const incentives = [
 ]
 
 function IncentivesHeader() {
-  return <Incentives incentives={incentives} classes="incentives--colored" />
+  return (
+    <Section>
+      <Incentives incentives={incentives} classes="incentives--colored" />
+    </Section>
+  )
 }
 
 export default IncentivesHeader
diff --git a/src/components/sections/ProductDetails/ProductDetails.tsx b/src/components/sections/ProductDetails/ProductDetails.tsx
index 4aa445e77..7c66e095d 100644
--- a/src/components/sections/ProductDetails/ProductDetails.tsx
+++ b/src/components/sections/ProductDetails/ProductDetails.tsx
@@ -16,6 +16,7 @@ import type { CurrencyCode, ViewItemEvent } from '@faststore/sdk'
 import type { AnalyticsItem } from 'src/sdk/analytics/types'
 
 import './product-details.scss'
+import Section from '../Section'
 
 interface Props {
   product: ProductDetailsFragment_ProductFragment
@@ -115,7 +116,7 @@ function ProductDetails({ product: staleProduct }: Props) {
   ])
 
   return (
-    <div className="product-details / grid-content grid-section">
+    <Section className="product-details / grid-content grid-section">
       <Breadcrumb breadcrumbList={breadcrumbs.itemListElement} />
 
       <section className="product-details__body">
@@ -183,7 +184,7 @@ function ProductDetails({ product: staleProduct }: Props) {
           </article>
         </section>
       </section>
-    </div>
+    </Section>
   )
 }
 
diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index e3afd3892..c848f5454 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -9,6 +9,7 @@ import FilterSkeleton from 'src/components/skeletons/FilterSkeleton'
 import ProductGrid from 'src/components/product/ProductGrid'
 import IconSVG from 'src/components/common/IconSVG'
 
+import Section from '../Section'
 import GalleryPage from './ProductGalleryPage'
 import EmptyGallery from './EmptyGallery'
 import { useGalleryQuery } from './useGalleryQuery'
@@ -30,14 +31,14 @@ function ProductGallery({ title }: Props) {
 
   if (data && totalCount === 0) {
     return (
-      <div className="product-listing / grid-content">
+      <Section className="product-listing / grid-content">
         <EmptyGallery />
-      </div>
+      </Section>
     )
   }
 
   return (
-    <div className="product-listing / grid-content-full">
+    <Section className="product-listing / grid-content-full">
       <div className="product-listing__content-grid / grid-content">
         <div className="product-listing__filters">
           <FilterSkeleton loading={orderedFacets?.length === 0}>
@@ -167,7 +168,7 @@ function ProductGallery({ title }: Props) {
           )}
         </div>
       </div>
-    </div>
+    </Section>
   )
 }
 
diff --git a/src/components/sections/ProductGallery/ProductGalleryPage.tsx b/src/components/sections/ProductGallery/ProductGalleryPage.tsx
index 47d25aeab..00f3efd68 100644
--- a/src/components/sections/ProductGallery/ProductGalleryPage.tsx
+++ b/src/components/sections/ProductGallery/ProductGalleryPage.tsx
@@ -78,7 +78,7 @@ function GalleryPage({
           />
           <div className="product-listing__results-sponsored">
             <h3>Sponsored</h3>
-            <ProductTiles products={productsSponsored.slice(0, 2)} />
+            <ProductTiles products={productsSponsored.slice(0, 2)} title="" />
           </div>
           <ProductGrid
             products={products.slice(middleItemIndex, itemsPerPage)}
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index 4e1245519..13431f6de 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -3,24 +3,40 @@ import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import ProductShelfSkeleton from 'src/components/skeletons/ProductShelfSkeleton'
 
 import ProductCard from '../../product/ProductCard'
+import Section from '../Section'
 
 import './product-shelf.scss'
 
 interface ProductShelfProps {
   products: ProductSummary_ProductFragment[]
+  title: string | JSX.Element
+  withDivisor?: boolean
 }
 
-function ProductShelf({ products }: ProductShelfProps) {
+function ProductShelf({
+  products,
+  title,
+  withDivisor = false,
+}: ProductShelfProps) {
   return (
-    <ProductShelfSkeleton loading={products.length === 0}>
-      <ul data-product-shelf className="grid-content">
-        {products.map((product, idx) => (
-          <li key={`${product.id}`}>
-            <ProductCard product={product} index={idx + 1} />
-          </li>
-        ))}
-      </ul>
-    </ProductShelfSkeleton>
+    <Section
+      className={`page__section-shelf / grid-section ${
+        withDivisor ? 'page__section-divisor' : ''
+      }`}
+    >
+      <h2 className="title-section / grid-content">{title}</h2>
+      <div className="page__section-content">
+        <ProductShelfSkeleton loading={products.length === 0}>
+          <ul data-product-shelf className="grid-content">
+            {products.map((product, idx) => (
+              <li key={`${product.id}`}>
+                <ProductCard product={product} index={idx + 1} />
+              </li>
+            ))}
+          </ul>
+        </ProductShelfSkeleton>
+      </div>
+    </Section>
   )
 }
 
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index fdfa07210..a05ed3f6f 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -1,11 +1,14 @@
 import React from 'react'
 import Tiles, { Tile } from 'src/components/ui/Tiles'
 import ProductCard from 'src/components/product/ProductCard'
-import type { ProductSummary_ProductFragment } from '@generated/graphql'
 import ProductTilesSkeleton from 'src/components/skeletons/ProductTilesSkeleton'
+import type { ProductSummary_ProductFragment } from '@generated/graphql'
+
+import Section from '../Section'
 
 interface TilesProps {
   products: ProductSummary_ProductFragment[]
+  title: string | JSX.Element
 }
 
 const NUMBER_ITEMS_TO_EXPAND_FIRST = 3
@@ -25,23 +28,31 @@ const getRatio = (products: number, idx: number) => {
   return 3 / 4
 }
 
-const ProductTiles = ({ products }: TilesProps) => {
+const ProductTiles = ({ products, title }: TilesProps) => {
   return (
-    <ProductTilesSkeleton variant="horizontal" loading={products.length === 0}>
-      <Tiles>
-        {products.map((product, idx) => (
-          <Tile key={product.id}>
-            <ProductCard
-              data-testid="tile-card"
-              product={product}
-              index={idx + 1}
-              variant="horizontal"
-              aspectRatio={getRatio(products.length, idx)}
-            />
-          </Tile>
-        ))}
-      </Tiles>
-    </ProductTilesSkeleton>
+    <Section className="grid-section grid-content">
+      <h2 className="title-section">{title}</h2>
+      <div className="page__section-content">
+        <ProductTilesSkeleton
+          variant="horizontal"
+          loading={products.length === 0}
+        >
+          <Tiles>
+            {products.map((product, idx) => (
+              <Tile key={product.id}>
+                <ProductCard
+                  data-testid="tile-card"
+                  product={product}
+                  index={idx + 1}
+                  variant="horizontal"
+                  aspectRatio={getRatio(products.length, idx)}
+                />
+              </Tile>
+            ))}
+          </Tiles>
+        </ProductTilesSkeleton>
+      </div>
+    </Section>
   )
 }
 
diff --git a/src/components/ui/ScrollToTopButton/ScrollToTopButton.tsx b/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx
similarity index 64%
rename from src/components/ui/ScrollToTopButton/ScrollToTopButton.tsx
rename to src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx
index a2cc418bd..972ab6777 100644
--- a/src/components/ui/ScrollToTopButton/ScrollToTopButton.tsx
+++ b/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import IconSVG from 'src/components/common/IconSVG'
 
-import type { UIButtonProps } from '../Button'
-import Button from '../Button'
+import type { UIButtonProps } from '../../ui/Button'
+import Button from '../../ui/Button'
+import Section from '../Section'
 
 interface ScrollToTopButtonProps {
   /**
@@ -28,14 +29,16 @@ function ScrollToTopButton({
   iconPosition = 'left',
 }: ScrollToTopButtonProps) {
   return (
-    <Button
-      variant="secondary"
-      icon={icon}
-      iconPosition={iconPosition}
-      onClick={() => window.scrollTo(0, 0)}
-    >
-      {text}
-    </Button>
+    <Section className="product-listing__scroll-top">
+      <Button
+        variant="secondary"
+        icon={icon}
+        iconPosition={iconPosition}
+        onClick={() => window.scrollTo(0, 0)}
+      >
+        {text}
+      </Button>
+    </Section>
   )
 }
 
diff --git a/src/components/ui/ScrollToTopButton/index.ts b/src/components/sections/ScrollToTopButton/index.ts
similarity index 100%
rename from src/components/ui/ScrollToTopButton/index.ts
rename to src/components/sections/ScrollToTopButton/index.ts
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 7a30549ff..a2ccfc7d3 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -7,7 +7,6 @@ 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'
@@ -58,50 +57,32 @@ function Page(props: Props) {
         Sections: Components imported from '../components/sections' only.
         Do not import or render components from any other folder in here.
       */}
-      <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."
-          linkText="See all"
-          link="/"
-          imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
-          imageAlt="Quest 2 Controller on a table"
-        />
-      </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."
+        linkText="See all"
+        link="/"
+        imageSrc="https://storeframework.vtexassets.com/arquivos/ids/190897/Photo.jpg"
+        imageAlt="Quest 2 Controller on a table"
+      />
 
-      <Section>
-        <IncentivesHeader />
-      </Section>
+      <IncentivesHeader />
 
-      <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>
+      <ProductShelf products={products?.slice(0, 5)} title="Most Wanted" />
 
-      <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>
+      <ProductTiles products={products?.slice(5, 8)} title="Just Arrived" />
 
-      <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>
+      <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 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>
+      <ProductShelf
+        products={products?.slice(9, 14)}
+        title="Deals & Promotions"
+      />
     </>
   )
 }
diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx
index 056a0ebe9..253ba8e1d 100644
--- a/src/pages/{StoreCollection.slug}.tsx
+++ b/src/pages/{StoreCollection.slug}.tsx
@@ -6,8 +6,7 @@ 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 ScrollToTopButton from 'src/components/sections/ScrollToTopButton'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useSearchParams } from 'src/hooks/useSearchParams'
 import { applySearchState } from 'src/sdk/search/state'
@@ -66,43 +65,33 @@ function Page(props: Props) {
         Sections: Components imported from '../components/sections' only.
         Do not import or render components from any other folder in here.
       */}
+      <Breadcrumb
+        breadcrumbList={collection?.breadcrumbList.itemListElement}
+        name={title}
+      />
 
-      <Section className="product-listing__breadcrumb / grid-content">
-        <Breadcrumb
-          breadcrumbList={collection?.breadcrumbList.itemListElement}
-          name={title}
-        />
-      </Section>
-
-      <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={
-            <IconSVG name="Headphones" width={48} height={48} weight="thin" />
-          }
-        />
-      </Section>
+      <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={
+          <IconSVG name="Headphones" width={48} height={48} weight="thin" />
+        }
+      />
 
-      <Section>
-        <ProductGallery title={title} />
-      </Section>
+      <ProductGallery title={title} />
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <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>
+        <ProductShelf
+          products={youMightAlsoLikeProducts.slice(0, 5)}
+          title="You might also like"
+          withDivisor
+        />
       )}
 
-      <Section className="product-listing__scroll-top">
-        <ScrollToTopButton />
-      </Section>
+      <ScrollToTopButton />
     </SearchProvider>
   )
 }
diff --git a/src/pages/{StoreProduct.slug}/p.tsx b/src/pages/{StoreProduct.slug}/p.tsx
index 9283e9309..5a7f707b0 100644
--- a/src/pages/{StoreProduct.slug}/p.tsx
+++ b/src/pages/{StoreProduct.slug}/p.tsx
@@ -8,7 +8,6 @@ import {
 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 {
@@ -94,18 +93,14 @@ function Page(props: Props) {
         Sections: Components imported from '../components/sections' only.
         Do not import or render components from any other folder in here.
       */}
-
-      <Section>
-        <ProductDetails product={product} />
-      </Section>
+      <ProductDetails product={product} />
 
       {youMightAlsoLikeProducts?.length > 0 && (
-        <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>
+        <ProductShelf
+          products={youMightAlsoLikeProducts.slice(0, 5)}
+          title="You might also like"
+          withDivisor
+        />
       )}
     </>
   )
diff --git a/src/styles/pages/product-listing-page.scss b/src/styles/pages/product-listing-page.scss
index 287798bb4..9a83cb3b7 100644
--- a/src/styles/pages/product-listing-page.scss
+++ b/src/styles/pages/product-listing-page.scss
@@ -5,10 +5,6 @@
   padding-bottom: var(--space-3);
 }
 
-.product-listing__hero {
-  width: 100%;
-}
-
 .product-listing__scroll-top {
   display: flex;
   justify-content: center;

From 4166a8fb8a25545b484bdbbb74dad2be4e1adfe6 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 15:38:32 -0300
Subject: [PATCH 2/5] move css to sections

---
 src/components/sections/Breadcrumb/Breadcrumb.tsx        | 4 +++-
 src/components/sections/Breadcrumb/breadcrumb.scss       | 6 ++++++
 .../sections/ScrollToTopButton/ScrollToTopButton.tsx     | 6 ++++--
 .../ScrollToTopButton/scroll-to-top-button.scss}         | 9 ++-------
 4 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 src/components/sections/Breadcrumb/breadcrumb.scss
 rename src/{styles/pages/product-listing-page.scss => components/sections/ScrollToTopButton/scroll-to-top-button.scss} (50%)

diff --git a/src/components/sections/Breadcrumb/Breadcrumb.tsx b/src/components/sections/Breadcrumb/Breadcrumb.tsx
index 8d3a0abb4..cf7887e8d 100644
--- a/src/components/sections/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/sections/Breadcrumb/Breadcrumb.tsx
@@ -4,6 +4,8 @@ import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
 
 import Section from '../Section'
 
+import './breadcrumb.scss'
+
 interface BreadcrumbWrapperProps
   extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
   name: string
@@ -14,7 +16,7 @@ function Breadcrumb({ breadcrumbList, name }: BreadcrumbWrapperProps) {
   const list = breadcrumbList ?? fallback
 
   return (
-    <Section className="product-listing__breadcrumb / grid-content">
+    <Section className="breadcrumb / grid-content">
       <UIBreadcrumb breadcrumbList={list} />
     </Section>
   )
diff --git a/src/components/sections/Breadcrumb/breadcrumb.scss b/src/components/sections/Breadcrumb/breadcrumb.scss
new file mode 100644
index 000000000..6047f2b94
--- /dev/null
+++ b/src/components/sections/Breadcrumb/breadcrumb.scss
@@ -0,0 +1,6 @@
+@import "src/styles/scaffold";
+
+.breadcrumb {
+  padding-top: var(--space-3);
+  padding-bottom: var(--space-3);
+}
diff --git a/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx b/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx
index 972ab6777..f48191e91 100644
--- a/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx
+++ b/src/components/sections/ScrollToTopButton/ScrollToTopButton.tsx
@@ -1,9 +1,11 @@
 import React from 'react'
 import IconSVG from 'src/components/common/IconSVG'
 
-import type { UIButtonProps } from '../../ui/Button'
 import Button from '../../ui/Button'
 import Section from '../Section'
+import type { UIButtonProps } from '../../ui/Button'
+
+import './scroll-to-top-button.scss'
 
 interface ScrollToTopButtonProps {
   /**
@@ -29,7 +31,7 @@ function ScrollToTopButton({
   iconPosition = 'left',
 }: ScrollToTopButtonProps) {
   return (
-    <Section className="product-listing__scroll-top">
+    <Section className="scroll-to-top-button">
       <Button
         variant="secondary"
         icon={icon}
diff --git a/src/styles/pages/product-listing-page.scss b/src/components/sections/ScrollToTopButton/scroll-to-top-button.scss
similarity index 50%
rename from src/styles/pages/product-listing-page.scss
rename to src/components/sections/ScrollToTopButton/scroll-to-top-button.scss
index 9a83cb3b7..d89de2cf5 100644
--- a/src/styles/pages/product-listing-page.scss
+++ b/src/components/sections/ScrollToTopButton/scroll-to-top-button.scss
@@ -1,11 +1,6 @@
-@import "../vendors/include-media";
+@import "src/styles/scaffold";
 
-.product-listing__breadcrumb {
-  padding-top: var(--space-3);
-  padding-bottom: var(--space-3);
-}
-
-.product-listing__scroll-top {
+.scroll-to-top-button {
   display: flex;
   justify-content: center;
   width: 100%;

From 9f178653f53d8796fac731f4cf61dd56617c20cf Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 4 Mar 2022 16:31:35 -0300
Subject: [PATCH 3/5] remove unecessary import

---
 src/pages/{StoreCollection.slug}.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx
index 253ba8e1d..88bf02468 100644
--- a/src/pages/{StoreCollection.slug}.tsx
+++ b/src/pages/{StoreCollection.slug}.tsx
@@ -14,8 +14,6 @@ import { mark } from 'src/sdk/tests/mark'
 import type { Props } from 'src/hooks/useSearchParams'
 import IconSVG from 'src/components/common/IconSVG'
 
-import '../styles/pages/product-listing-page.scss'
-
 function Page(props: Props) {
   const {
     data: {

From 508ef8e52634c9240e5b00e5ddf662625bbfc2c6 Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Mon, 7 Mar 2022 10:09:54 -0300
Subject: [PATCH 4/5] changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8d185f39..06f15e7fa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Removed fit-in property from image component
+- Sections are now self-contained
 - Moves icons to `/static/icons` folder
 - Replaces page type redirects, a.k.a. `/account`, `/login` to a corresponding file in `/pages` folder
 - Replaces `let` declarations for `useRef` for better React compatibility

From dd69d79323ce9a247d8042ab75bd7e72fd061d1d Mon Sep 17 00:00:00 2001
From: Tiago Gimenes <tlgimenes@gmail.com>
Date: Fri, 11 Mar 2022 15:19:36 -0300
Subject: [PATCH 5/5] add todo

---
 .../sections/ProductGallery/ProductGalleryPage.tsx          | 6 ++++++
 src/pages/s.tsx                                             | 5 +----
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/sections/ProductGallery/ProductGalleryPage.tsx b/src/components/sections/ProductGallery/ProductGalleryPage.tsx
index 00f3efd68..996c20ac0 100644
--- a/src/components/sections/ProductGallery/ProductGalleryPage.tsx
+++ b/src/components/sections/ProductGallery/ProductGalleryPage.tsx
@@ -78,6 +78,12 @@ function GalleryPage({
           />
           <div className="product-listing__results-sponsored">
             <h3>Sponsored</h3>
+            {/*
+              TODO: Refactor this bit of code
+
+              Sections should be self contained and should not import other sections.
+              We should remove/refactor this section from here
+            */}
             <ProductTiles products={productsSponsored.slice(0, 2)} title="" />
           </div>
           <ProductGrid
diff --git a/src/pages/s.tsx b/src/pages/s.tsx
index 9bdde85a1..55f252d2c 100644
--- a/src/pages/s.tsx
+++ b/src/pages/s.tsx
@@ -3,7 +3,6 @@ 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'
@@ -61,9 +60,7 @@ function Page(props: Props) {
       */}
       <SROnly as="h1" text={title} />
 
-      <Section>
-        <ProductGallery title="Search Results" />
-      </Section>
+      <ProductGallery title="Search Results" />
     </SearchProvider>
   )
 }