From ffb23aa6866de00ce93c26244a98ff00838c10f2 Mon Sep 17 00:00:00 2001
From: Fanny Chien <fannychienn@gmail.com>
Date: Wed, 2 Feb 2022 12:52:07 -0300
Subject: [PATCH 1/8] [FSSS-163] Feat: Style IconButton (#290)

* Creates styled IconButton

* Uses IconButton over Button on Navbar

* Uses IconButton on CartSide bar

* Uses IconButton on Filter

* Renames props to otherProps

* Fixes icon size and alignment

* Updates icon sizes

* Updates header paddings

* Removes icon-button class and renames color

* Uses IconButton over Button on CartToggle

* Triggers CI with an empty commit

* Triggers CI with an empty commit

* Triggers CI with an empty commit

Co-authored-by: Filipe W. Lima <filipe.lima@vtex.com.br>
---
 .../cart/CartSidebar/CartSidebar.tsx          | 10 ++++---
 .../cart/CartSidebar/cart-sidebar.scss        | 10 ++-----
 src/components/cart/CartToggle/CartToggle.tsx |  9 +++---
 .../cart/CartToggle/cart-toggle.scss          | 18 +-----------
 src/components/common/Navbar/Navbar.tsx       | 21 +++++++-------
 src/components/common/Navbar/navbar.scss      | 15 ++--------
 src/components/search/Filter/Filter.tsx       | 12 ++++----
 src/components/search/Filter/filter.scss      | 11 +------
 src/components/ui/IconButton/IconButton.tsx   | 23 +++++++++++++++
 src/components/ui/IconButton/icon-button.scss | 29 +++++++++++++++++++
 src/components/ui/IconButton/index.ts         |  1 +
 11 files changed, 86 insertions(+), 73 deletions(-)
 create mode 100644 src/components/ui/IconButton/IconButton.tsx
 create mode 100644 src/components/ui/IconButton/icon-button.scss
 create mode 100644 src/components/ui/IconButton/index.ts

diff --git a/src/components/cart/CartSidebar/CartSidebar.tsx b/src/components/cart/CartSidebar/CartSidebar.tsx
index 2634ad579..fb6cc5a64 100644
--- a/src/components/cart/CartSidebar/CartSidebar.tsx
+++ b/src/components/cart/CartSidebar/CartSidebar.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { useCart } from 'src/sdk/cart/useCart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import Button from 'src/components/ui/Button'
+import IconButton from 'src/components/ui/IconButton'
 import {
   ArrowRight as ArrowRightIcon,
   X as XIcon,
@@ -51,12 +52,13 @@ function CartSidebar() {
                   {totalItems}
                 </Badge>
               </div>
-              <Button
+              <IconButton
                 data-testid="cart-sidebar-button-close"
+                classes="cart-sidebar__button"
+                aria-label="Close Cart"
+                icon={<XIcon size={32} />}
                 onClick={() => onDismissTransition()}
-              >
-                <XIcon size={32} />
-              </Button>
+              />
             </header>
             <Alert icon={<TruckIcon size={24} />}>
               Free shiping starts at $300
diff --git a/src/components/cart/CartSidebar/cart-sidebar.scss b/src/components/cart/CartSidebar/cart-sidebar.scss
index 2b0b11be2..cd3dbdc5e 100644
--- a/src/components/cart/CartSidebar/cart-sidebar.scss
+++ b/src/components/cart/CartSidebar/cart-sidebar.scss
@@ -27,15 +27,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-5) var(--page-padding-phone) var(--space-4);
+  padding: var(--space-2) var(--page-padding-phone) var(--space-2);
   background-color: var(--bg-neutral-lightest);
 
-  button {
-    position: absolute;
-    right: calc(-1 * var(--page-padding-phone));
-    margin-right: var(--space-0);
-    color: var(--color-text);
-    background-color: transparent;
+  .cart-sidebar__button {
+    margin-right: calc(-1 * var(--space-1));
   }
 }
 
diff --git a/src/components/cart/CartToggle/CartToggle.tsx b/src/components/cart/CartToggle/CartToggle.tsx
index 71cd863c6..7fd637cdd 100644
--- a/src/components/cart/CartToggle/CartToggle.tsx
+++ b/src/components/cart/CartToggle/CartToggle.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from 'src/components/ui/Button'
+import IconButton from 'src/components/ui/IconButton'
 import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
 import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
 
@@ -9,13 +9,12 @@ function CartToggle() {
   const btnProps = useCartToggleButton()
 
   return (
-    <Button
+    <IconButton
       {...btnProps}
       className="cart-toggle"
       aria-label={`Cart with ${btnProps['data-items']} items`}
-    >
-      <ShoppingCartIcon size={32} />
-    </Button>
+      icon={<ShoppingCartIcon size={32} />}
+    />
   )
 }
 
diff --git a/src/components/cart/CartToggle/cart-toggle.scss b/src/components/cart/CartToggle/cart-toggle.scss
index 9bac4fccd..9f3dc701f 100644
--- a/src/components/cart/CartToggle/cart-toggle.scss
+++ b/src/components/cart/CartToggle/cart-toggle.scss
@@ -1,19 +1,7 @@
 @import "../../../styles/utilities.scss";
 
-.cart-toggle[data-store-button] {
+.cart-toggle[data-store-icon-button] {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: var(--tap-min-size);
-  min-height: var(--tap-min-size);
-  background-color: transparent;
-  border-width: 0;
-  border-radius: var(--border-radius-button);
-  cursor: pointer;
-  transition: background-color .5s ease;
-
-  svg { color: var(--color-text); }
 
   &::after {
     --cart-toggle-size: var(--space-3);
@@ -34,8 +22,4 @@
     border-radius: var(--border-radius-pill);
     content: attr(data-items);
   }
-
-  &:hover {
-    background-color: var(--bg-secondary-light);
-  }
 }
diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx
index b1b38a6ca..c214bf17e 100644
--- a/src/components/common/Navbar/Navbar.tsx
+++ b/src/components/common/Navbar/Navbar.tsx
@@ -4,7 +4,7 @@ import { List as UIList } from '@faststore/ui'
 import CartToggle from 'src/components/cart/CartToggle'
 import Logo from 'src/components/ui/Logo'
 import Link from 'src/components/ui/Link'
-import Button from 'src/components/ui/Button'
+import IconButton from 'src/components/ui/IconButton'
 import { List as ListIcon, X as XIcon } from 'phosphor-react'
 import SignInLink from 'src/components/ui/SignInLink'
 import SlideOver from 'src/components/ui/SlideOver'
@@ -50,13 +50,12 @@ function Navbar() {
     <header className="navbar / grid-content-full">
       <div className="navbar__header / grid-content">
         <section className="navbar__row">
-          <Button
-            className="navbar__menu"
+          <IconButton
+            classes="navbar__menu"
             aria-label="Open Menu"
+            icon={<ListIcon size={32} />}
             onClick={() => setShowMenu(true)}
-          >
-            <ListIcon size={32} />
-          </Button>
+          />
           <LinkGatsby
             to="/"
             aria-label="Go to Faststore home"
@@ -95,15 +94,15 @@ function Navbar() {
               >
                 <Logo />
               </LinkGatsby>
-              <Button
-                className="navbar__button"
+
+              <IconButton
+                classes="navbar__button"
                 aria-label="Close Menu"
+                icon={<XIcon size={32} />}
                 onClick={() => {
                   onDismissTransition?.()
                 }}
-              >
-                <XIcon size={32} />
-              </Button>
+              />
             </header>
             <div className="navlinks">
               <NavLinks />
diff --git a/src/components/common/Navbar/navbar.scss b/src/components/common/Navbar/navbar.scss
index 3fd43b3fa..88fe70754 100644
--- a/src/components/common/Navbar/navbar.scss
+++ b/src/components/common/Navbar/navbar.scss
@@ -31,10 +31,6 @@
 }
 
 .navbar__menu[data-store-button] {
-  color: var(--color-text);
-  background-color: transparent;
-  border: 0;
-
   @include media(">=notebook") { display: none; }
 }
 
@@ -87,17 +83,10 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--space-3) 0;
+  padding-bottom: var(--space-2);
 
   .navbar__button {
-    position: absolute;
-    right: calc(-1 * var(--page-padding-phone));
-    display: flex;
-    margin-right: var(--space-1);
-    padding: var(--space-1);
-    color: var(--color-text-display);
-    background-color: transparent;
-    border: 0;
+    margin-right: calc(-1 * var(--space-1));
   }
 }
 
diff --git a/src/components/search/Filter/Filter.tsx b/src/components/search/Filter/Filter.tsx
index 06138c163..c86151b9e 100644
--- a/src/components/search/Filter/Filter.tsx
+++ b/src/components/search/Filter/Filter.tsx
@@ -6,6 +6,7 @@ import type {
 } from '@generated/graphql'
 import useWindowDimensions from 'src/hooks/useWindowDimensions'
 import Button from 'src/components/ui/Button'
+import IconButton from 'src/components/ui/IconButton'
 import { X as XIcon } from 'phosphor-react'
 import SlideOver from 'src/components/ui/SlideOver'
 
@@ -183,17 +184,16 @@ function Filter({
       <div className="filter-modal__body">
         <header className="filter-modal__header">
           <h2 className="title-display">Filters</h2>
-          <Button
-            className="filter-modal__button"
+          <IconButton
             data-testid="filter-modal-button-close"
-            aria-label="Close"
+            classes="filter-modal__button"
+            aria-label="Close Filters"
+            icon={<XIcon size={32} />}
             onClick={() => {
               setSelectedFacets(searchState.selectedFacets)
               onDismissTransition?.()
             }}
-          >
-            <XIcon size={32} />
-          </Button>
+          />
         </header>
         <Facets
           slug={slug}
diff --git a/src/components/search/Filter/filter.scss b/src/components/search/Filter/filter.scss
index 80bbc8c03..199363bc2 100644
--- a/src/components/search/Filter/filter.scss
+++ b/src/components/search/Filter/filter.scss
@@ -64,17 +64,8 @@
   align-items: center;
   justify-content: space-between;
 
-  h2 { padding: var(--space-3) 0; }
-
   .filter-modal__button {
-    position: absolute;
-    right: calc(-1 * var(--page-padding-phone));
-    display: flex;
-    margin-right: var(--space-0);
-    padding: var(--space-1);
-    color: var(--color-text);
-    background-color: transparent;
-    border: 0;
+    margin-right: calc(-1 * var(--space-1));
   }
 }
 
diff --git a/src/components/ui/IconButton/IconButton.tsx b/src/components/ui/IconButton/IconButton.tsx
new file mode 100644
index 000000000..1351ae17f
--- /dev/null
+++ b/src/components/ui/IconButton/IconButton.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { IconButton as UIIconButton } from '@faststore/ui'
+import type { IconButtonProps as UIIconButtonProps } from '@faststore/ui'
+
+import './icon-button.scss'
+
+interface IconButtonProps {
+  classes?: string
+}
+
+type Props = IconButtonProps & UIIconButtonProps
+
+function IconButton({ icon, classes, ...otherProps }: Props) {
+  return (
+    <UIIconButton
+      className={`icon-button ${classes}`}
+      icon={icon}
+      {...otherProps}
+    />
+  )
+}
+
+export default IconButton
diff --git a/src/components/ui/IconButton/icon-button.scss b/src/components/ui/IconButton/icon-button.scss
new file mode 100644
index 000000000..eabc8f1f5
--- /dev/null
+++ b/src/components/ui/IconButton/icon-button.scss
@@ -0,0 +1,29 @@
+@import "../../../styles/utilities";
+
+[data-store-icon-button] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tap-min-size);
+  height: var(--tap-min-size);
+  color: var(--color-text);
+  background-color: transparent;
+  border: 0;
+  border-radius: var(--border-radius-button);
+  transition: background-color .5s ease;
+
+  &:focus { outline: none; }
+  &:focus-visible { @include button-focus-ring; }
+
+  &:hover, &:focus { background-color: var(--bg-secondary-light); }
+
+  &:active {
+    color: var(--color-text-display);
+    background-color: var(--color-secondary-1);
+  }
+
+  &:disabled, &[data-button-disabled="true"] {
+    color: var(--color-text-disabled);
+    background-color: var(--bg-disabled);
+  }
+}
diff --git a/src/components/ui/IconButton/index.ts b/src/components/ui/IconButton/index.ts
new file mode 100644
index 000000000..9de6d2c2d
--- /dev/null
+++ b/src/components/ui/IconButton/index.ts
@@ -0,0 +1 @@
+export { default } from './IconButton'

From 0769b16a4c0e1c9061014ba89f59719d4dda6af6 Mon Sep 17 00:00:00 2001
From: "Filipe W. Lima" <fwl.ufpe@gmail.com>
Date: Wed, 2 Feb 2022 13:55:03 -0300
Subject: [PATCH 2/8] Fix a SonarQube warning (#297)

## What's the purpose of this pull request?

Fix a [SonarQube warning](https://github.com/vtex-sites/base.store/runs/5025104180#:~:text=15M/61M%0AINFO%3A%20%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D%2D-,ANNOTATIONS,-Check%20warning%20on) in a piece of the code by following its suggestion of removing a temporary variable.

## How to test it?

The last commit should not have SonarQube trigger the warning anymore.

Before|After
-|-
![Screen Shot 2022-02-01 at 16 42 27](https://user-images.githubusercontent.com/381395/152039613-343f1236-ac76-4dcc-9a73-48ce992f92bf.png)|![Screen Shot 2022-02-01 at 16 42 31](https://user-images.githubusercontent.com/381395/152039598-958c00b8-5041-4f6d-aa8e-b3e93999bec3.png)
---
 src/components/ui/QuantitySelector/QuantitySelector.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ui/QuantitySelector/QuantitySelector.tsx b/src/components/ui/QuantitySelector/QuantitySelector.tsx
index 69b0a74d9..ebee0a16d 100644
--- a/src/components/ui/QuantitySelector/QuantitySelector.tsx
+++ b/src/components/ui/QuantitySelector/QuantitySelector.tsx
@@ -36,9 +36,8 @@ export function QuantitySelector({
 
   function validateQuantityBounds(n: number): number {
     const maxValue = min ? Math.max(n, min) : n
-    const minValue = max ? Math.min(maxValue, max) : maxValue
 
-    return minValue
+    return max ? Math.min(maxValue, max) : maxValue
   }
 
   function validateInput(e: React.FormEvent<HTMLInputElement>) {

From a9d6dfbf9d44a868169ab5274f1af1a37af47328 Mon Sep 17 00:00:00 2001
From: Renata Motta <renata@guava.com.br>
Date: Thu, 3 Feb 2022 10:55:07 -0300
Subject: [PATCH 3/8] [FSSS-162] General fixes on Beta components (#287)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Removes unnecessary padding from breadcrumb

* Fixes select click behavior

* Improves Button Secondary states

* Simplifies disabled buttons styling

* Unifies cursor on Buttons and LinkButtons

* Fixes Accordion click area and cursor

* Attempts to fix menu buttons on mobile

* Improves navbar button position

* Attempts to unify focus on all interactive elements

* Changes theme-color from safari

* Unifies focus

* Fixes LinkButton's disabled state

* Fixes typo

* Updates disabled button token to a more semantical one

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

* Changes focus-ring to focus-ring-visible when possible

* Improves FocusEvent on LinkButton

Co-Authored-By: Eduardo Formiga <eduardo.formiga@gmail.com>

* Updates SkuSelector's focus

* Fixes merge bugs

* Change use of && as safe-guard to 'if'

* Aligns Filters title

* Adds { after 'if' condition

* Rerun tests

* Trigger CI with an empty commit

Co-authored-by: Fanny Chien <fannychienn@gmail.com>
Co-authored-by: Eduardo Formiga <eduardo.formiga@gmail.com>
Co-authored-by: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Co-authored-by: Lucas Feijó <lucas.portela@vtex.com.br>
---
 gatsby-config.js                              |  2 +-
 .../common/SearchInput/search-input.scss      |  7 ++-
 src/components/search/Filter/filter.scss      |  5 +-
 src/components/search/Sort/sort.scss          |  9 +--
 src/components/ui/Accordion/accordion.scss    | 19 +++++--
 src/components/ui/Breadcrumb/breadcrumb.scss  |  2 -
 src/components/ui/Button/LinkButton.tsx       | 13 ++++-
 src/components/ui/Button/buttons.scss         | 57 ++++++++++---------
 src/components/ui/Checkbox/checkbox.scss      |  8 +--
 src/components/ui/IconButton/icon-button.scss |  9 ++-
 src/components/ui/Link/link.scss              |  9 ++-
 .../QuantitySelector/quantity-selector.scss   | 41 ++++++++++---
 .../ui/SkuSelector/sku-selector.scss          | 28 +++++++--
 src/styles/pages/product-listing.scss         |  3 +-
 src/styles/utilities.scss                     | 46 ++++++++++-----
 15 files changed, 183 insertions(+), 75 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index ab8e05be1..b9682aa85 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -42,7 +42,7 @@ module.exports = {
         start_url: '/',
         icon: 'src/images/icon.png',
         background_color: '#E31C58',
-        theme_color: '#E31C58',
+        theme_color: '#ffffff',
         display: 'standalone',
         cache_busting_mode: 'none',
       },
diff --git a/src/components/common/SearchInput/search-input.scss b/src/components/common/SearchInput/search-input.scss
index 393663b24..1f7272a8a 100644
--- a/src/components/common/SearchInput/search-input.scss
+++ b/src/components/common/SearchInput/search-input.scss
@@ -15,7 +15,12 @@
     border-radius: var(--border-radius-default);
     transition: box-shadow .2s ease, border .2s ease;
 
-    &:focus { @include input-focus-ring; }
+    &:hover {
+      border-color: var(--color-border-input-selected);
+      box-shadow: 0 0 0 var(--border-width-0) var(--color-border-input-selected);
+    }
+
+    @include input-focus-ring;
   }
 
   [data-store-icon] { display: block; }
diff --git a/src/components/search/Filter/filter.scss b/src/components/search/Filter/filter.scss
index 199363bc2..875e71be6 100644
--- a/src/components/search/Filter/filter.scss
+++ b/src/components/search/Filter/filter.scss
@@ -2,7 +2,10 @@
 
 .filter[data-store-filter] {
   > .title-small {
-    margin-bottom: var(--space-3);
+    display: flex;
+    align-items: center;
+    height: var(--product-listing-row-height);
+    margin-bottom: var(--space-0);
 
     @include media("<notebook") {
       display: none;
diff --git a/src/components/search/Sort/sort.scss b/src/components/search/Sort/sort.scss
index 6f0496e0a..9e6912db4 100644
--- a/src/components/search/Sort/sort.scss
+++ b/src/components/search/Sort/sort.scss
@@ -20,6 +20,10 @@
     transition: box-shadow .2s ease, background-color .2s ease;
     appearance: none;
 
+    @include focus-ring-visible;
+
+    &:focus { background-color: var(--bg-secondary-light); }
+
     &:hover:not(:disabled) { background-color: var(--bg-secondary-light); }
 
     &:disabled {
@@ -29,10 +33,6 @@
       + svg { display: none; }
     }
 
-    &:focus-visible {
-      @include focus-ring;
-    }
-
     @include media("<notebook") { min-height: var(--tap-min-size); }
 
     @include media(">=notebook") { height: var(--space-6); }
@@ -42,5 +42,6 @@
     position: absolute;
     right: var(--space-2);
     color: var(--color-link);
+    pointer-events: none;
   }
 }
diff --git a/src/components/ui/Accordion/accordion.scss b/src/components/ui/Accordion/accordion.scss
index 1fad33d74..30bc99bf7 100644
--- a/src/components/ui/Accordion/accordion.scss
+++ b/src/components/ui/Accordion/accordion.scss
@@ -9,15 +9,20 @@
     border-bottom: 1px solid var(--color-border-display);
 
     @include media(">=notebook") {
-      padding: 0 var(--space-4);
-
       &:last-child {
         border-bottom: 0;
       }
     }
   }
 
-  [data-accordion-item] [data-store-button] {
+  [data-accordion-panel] {
+    @include media(">=notebook") {
+      padding-right: var(--space-4);
+      padding-left: var(--space-4);
+    }
+  }
+
+  [data-store-button] {
     display: inline-flex;
     align-items: center;
     justify-content: space-between;
@@ -26,9 +31,15 @@
     color: var(--color-text);
     background-color: transparent;
     border: 0;
+    cursor: pointer;
+
+    @include media(">=notebook") {
+      padding-right: var(--space-4);
+      padding-left: var(--space-4);
+    }
   }
 
-  [data-accordion-item] [data-store-icon] {
+  [data-store-icon] {
     display: flex;
   }
 }
diff --git a/src/components/ui/Breadcrumb/breadcrumb.scss b/src/components/ui/Breadcrumb/breadcrumb.scss
index a0ce5dd3e..395cfaafd 100644
--- a/src/components/ui/Breadcrumb/breadcrumb.scss
+++ b/src/components/ui/Breadcrumb/breadcrumb.scss
@@ -2,8 +2,6 @@
 
 [data-store-breadcrumb] {
   width: 100%;
-  padding-top: var(--space-2);
-  padding-bottom: var(--space-2);
 
   [data-breadcrumb-list] {
     display: flex;
diff --git a/src/components/ui/Button/LinkButton.tsx b/src/components/ui/Button/LinkButton.tsx
index 013b2c5e6..c00f82f9b 100644
--- a/src/components/ui/Button/LinkButton.tsx
+++ b/src/components/ui/Button/LinkButton.tsx
@@ -1,6 +1,7 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import type { LinkProps } from '@faststore/ui'
 import { Icon as UIIcon, Link as UILink } from '@faststore/ui'
+import type { FocusEvent } from 'react'
 
 import type { UIButtonProps } from './Button'
 
@@ -21,13 +22,23 @@ function LinkButton({
   className = '',
   ...otherProps
 }: Props) {
+  const linkRef = useRef<HTMLAnchorElement | null>(null)
+
   return (
     <UILink
+      ref={linkRef}
       data-store-button
       className={`link-button ${className}`}
       data-button-variant={variant}
       data-button-inverse={inverse}
       data-button-disabled={disabled}
+      onFocus={(e: FocusEvent) => {
+        e.preventDefault()
+
+        if (disabled) {
+          linkRef.current?.blur()
+        }
+      }}
       {...otherProps}
     >
       {iconPosition === 'left' && <UIIcon component={icon} />}
diff --git a/src/components/ui/Button/buttons.scss b/src/components/ui/Button/buttons.scss
index a5da0167d..2fdc40ba5 100644
--- a/src/components/ui/Button/buttons.scss
+++ b/src/components/ui/Button/buttons.scss
@@ -1,5 +1,12 @@
 @import "../../../styles/utilities";
 
+[data-store-button] {
+  border-radius: var(--border-radius-button);
+  transition: background-color .5s ease, box-shadow .5s ease;
+
+  @include focus-ring-visible;
+}
+
 .button[data-store-button], .link-button[data-store-button] {
   display: inline-flex;
   align-items: center;
@@ -10,11 +17,7 @@
   text-decoration: none;
   column-gap: var(--space-2);
   border: 0;
-  border-radius: var(--border-radius-button);
-  transition: background-color .5s ease;
-
-  &:focus { outline: none; }
-  &:focus-visible { @include button-focus-ring; }
+  cursor: default;
 
   &:disabled, &[data-button-disabled="true"] {
     cursor: not-allowed;
@@ -29,11 +32,6 @@
 
     &:active { background-color: var(--bg-secondary-pressed); }
 
-    &:disabled, &[data-button-disabled="true"] {
-      color: var(--color-neutral-6);
-      background-color: var(--bg-disabled);
-    }
-
     &[data-button-inverse] {
       color: var(--color-text-display);
       background-color: var(--bg-neutral-lightest);
@@ -47,23 +45,27 @@
   &[data-button-variant="secondary"] {
     color: var(--color-text-display);
     background-color: transparent;
-    border: 2px solid var(--bg-secondary-default);
-
-    &:hover, &:focus { background-color: var(--bg-darken-hover); }
+    border: var(--border-width-1) solid var(--bg-secondary-default);
 
-    &:active { background-color: var(--bg-darken-pressed); }
+    &:hover, &:focus {
+      color: var(--color-text-inverse);
+      background-color: var(--bg-secondary-default);
+    }
 
-    &:disabled, &[data-button-disabled="true"] {
-      color: var(--color-neutral-6);
-      background-color: var(--bg-disabled);
-      border: 0;
+    &:active {
+      background-color: var(--bg-secondary-hover);
+      border-color: var(--bg-secondary-hover);
     }
 
     &[data-button-inverse] {
       color: var(--color-text-inverse);
       border-color: var(--color-border-light);
-      &:hover, &:focus { background-color: var(--bg-lighten-hover); }
-      &:active { background-color: var(--bg-lighten-pressed); }
+
+      &:hover, &:focus {
+        color: var(--color-text-display);
+        background-color: var(--bg-neutral-lightest);
+      }
+      &:active { background-color: var(--bg-secondary-light); }
     }
   }
 
@@ -78,11 +80,6 @@
       background-color: var(--color-secondary-1);
     }
 
-    &:disabled, &[data-button-disabled="true"] {
-      color: var(--color-neutral-6);
-      background-color: var(--bg-disabled);
-    }
-
     &[data-button-inverse] {
       color: var(--color-text-display);
       background-color: var(--bg-neutral-lightest);
@@ -93,6 +90,14 @@
     }
   }
 
+  &[data-button-variant] {
+    &:disabled, &[data-button-disabled="true"] {
+      color: var(--color-text-disabled);
+      background-color: var(--bg-disabled);
+      border: 0;
+    }
+  }
+
   [data-store-icon] {
     display: flex;
   }
@@ -103,7 +108,7 @@
     text-decoration: none;
   }
 
-  &[data-button-disabled="true"] {
+  &[data-button-disabled="true"]:active {
     pointer-events: none;
   }
 }
diff --git a/src/components/ui/Checkbox/checkbox.scss b/src/components/ui/Checkbox/checkbox.scss
index 20a57f5e5..ac69d41ac 100644
--- a/src/components/ui/Checkbox/checkbox.scss
+++ b/src/components/ui/Checkbox/checkbox.scss
@@ -14,6 +14,8 @@
   transition: border .2s ease, background-color .2s ease, box-shadow .2s ease;
   appearance: none;
 
+  @include input-focus-ring;
+
   &::before {
     position: absolute;
     top: rem(3px);
@@ -28,13 +30,10 @@
     content: "";
   }
 
-  &:focus {
-    @include focus-ring;
-  }
-
   &:hover {
     background-color: var(--bg-secondary-light);
     border-color: var(--color-text);
+    box-shadow: 0 0 0 var(--border-width-0) var(--color-border-input-selected);
   }
 
   &:checked {
@@ -48,6 +47,7 @@
 
     &:hover {
       background-color: var(--bg-secondary-hover);
+      box-shadow: none;
     }
   }
 
diff --git a/src/components/ui/IconButton/icon-button.scss b/src/components/ui/IconButton/icon-button.scss
index eabc8f1f5..45d6f06d2 100644
--- a/src/components/ui/IconButton/icon-button.scss
+++ b/src/components/ui/IconButton/icon-button.scss
@@ -12,8 +12,13 @@
   border-radius: var(--border-radius-button);
   transition: background-color .5s ease;
 
-  &:focus { outline: none; }
-  &:focus-visible { @include button-focus-ring; }
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  @include focus-ring-visible;
 
   &:hover, &:focus { background-color: var(--bg-secondary-light); }
 
diff --git a/src/components/ui/Link/link.scss b/src/components/ui/Link/link.scss
index 9744025ff..13b4e56da 100644
--- a/src/components/ui/Link/link.scss
+++ b/src/components/ui/Link/link.scss
@@ -1,4 +1,11 @@
-@import "../../../styles/vendors/include-media";
+@import "../../../styles/scaffold.scss";
+
+a, [data-store-link] {
+  border-radius: var(--border-radius-default);
+  transition: box-shadow .5s ease;
+
+  @include focus-ring-visible;
+}
 
 [data-store-link] {
   min-width: auto;
diff --git a/src/components/ui/QuantitySelector/quantity-selector.scss b/src/components/ui/QuantitySelector/quantity-selector.scss
index 463d9d905..d93fd268e 100644
--- a/src/components/ui/QuantitySelector/quantity-selector.scss
+++ b/src/components/ui/QuantitySelector/quantity-selector.scss
@@ -1,3 +1,34 @@
+@import "../../../styles/utilities";
+
+@mixin quantity-selector-focus-ring {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {
+      // Use `focus` instead of `focus-visible` due to Safari's lack of support
+      &:focus {
+        outline: none;
+        box-shadow: none;
+
+        [data-store-icon] {
+          @include focus-ring;
+
+          background-color: var(--bg-secondary-light);
+        }
+      }
+    }
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: none;
+
+    [data-store-icon] {
+      @include focus-ring;
+
+      background-color: var(--bg-secondary-light);
+    }
+  }
+}
+
 [data-store-quantity-selector] {
   display: flex;
   flex-direction: row;
@@ -35,6 +66,8 @@
     border: 0;
     border-radius: var(--border-radius-default);
 
+    @include quantity-selector-focus-ring;
+
     [data-store-icon] {
       display: flex;
       align-items: center;
@@ -51,14 +84,6 @@
       cursor: not-allowed;
       [data-store-icon] { color: var(--color-border-input-disabled); }
     }
-
-    &:focus-visible {
-      outline: none;
-
-      [data-store-icon] {
-        box-shadow: inset 0 0 0 var(--border-width-1) var(--color-border-input-selected);
-      }
-    }
   }
 
   &:hover:not([data-store-quantity-selector="disabled"]) {
diff --git a/src/components/ui/SkuSelector/sku-selector.scss b/src/components/ui/SkuSelector/sku-selector.scss
index 4b1f3b1f0..438092579 100644
--- a/src/components/ui/SkuSelector/sku-selector.scss
+++ b/src/components/ui/SkuSelector/sku-selector.scss
@@ -1,5 +1,26 @@
 @import "../../../styles/utilities.scss";
 
+@mixin sku-selector-focus-ring {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {
+      // Use `focus` instead of `focus-visible` due to Safari's lack of support
+      &:focus + span {
+        border-color: var(--color-border-input-selected);
+        border-width: var(--border-width-1);
+
+        @include focus-ring;
+      }
+    }
+  }
+
+  &:focus-visible + span {
+    border-color: var(--color-border-input-selected);
+    border-width: var(--border-width-1);
+
+    @include focus-ring;
+  }
+}
+
 [data-store-sku-selector] {
   display: flex;
   flex-wrap: wrap;
@@ -37,12 +58,7 @@
       height: 100%;
       opacity: 0;
 
-      &:focus-visible + span {
-        border-color: var(--color-border-input-selected);
-        border-width: var(--border-width-1);
-
-        @include focus-ring;
-      }
+      @include sku-selector-focus-ring;
 
       &:hover:not(:disabled):not(:checked) + span {
         border-color: var(--color-border-input-selected);
diff --git a/src/styles/pages/product-listing.scss b/src/styles/pages/product-listing.scss
index 13fc01e20..7eec64d98 100644
--- a/src/styles/pages/product-listing.scss
+++ b/src/styles/pages/product-listing.scss
@@ -2,6 +2,7 @@
 
 .product-listing {
   padding-top: 0;
+  --product-listing-row-height: var(--space-6);
 
   @include media(">=notebook") {
     padding-top: var(--page-padding-notebook);
@@ -35,6 +36,7 @@
   @include media(">=notebook") {
     display: grid;
     grid-template-columns: repeat(12, 1fr);
+    grid-templat-rows: var(--product-listing-row-height) auto;
     padding-right: var(--page-padding-notebook);
     padding-left: var(--page-padding-notebook);
     column-gap: var(--space-4);
@@ -49,7 +51,6 @@
     grid-row: span 2;
     grid-column: 1 / span 3;
     align-self: start;
-    padding-top: var(--space-1);
   }
 }
 
diff --git a/src/styles/utilities.scss b/src/styles/utilities.scss
index f2ca8e2b4..b936524c9 100644
--- a/src/styles/utilities.scss
+++ b/src/styles/utilities.scss
@@ -14,22 +14,42 @@ $base: 16px !default;
   @return #{$rem}rem;
 }
 
-@mixin button-focus-ring {
-  outline: none;
-  box-shadow: 0 0 0 1px var(--bg-neutral-lightest), 0 0 0 var(--border-width-2) var(--bg-focus-ring);
-}
-
 @mixin input-focus-ring {
-  border-color: var(--color-border-input-selected);
-  outline: none;
-  box-shadow:
-    0 0 0 1px var(--bg-neutral-lightest),
-    0 0 0 var(--border-width-2) var(--bg-focus-ring),
-    inset 0 0 0 var(--border-width-0) var(--color-border-input-selected);
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {         // Use `focus` instead of `focus-visible`
+      &:hover:focus,
+      &:focus {                                   // due to Safari's lack of support
+        border-color: var(--color-border-input-selected);
+        outline: none;
+        box-shadow:
+          0 0 0 1px var(--bg-body),
+          0 0 0 var(--border-width-2) var(--bg-focus-ring),
+          inset 0 0 0 var(--border-width-0) var(--color-border-input-selected);
+      }
+    }
+  }
+
+  &:focus-visible,
+  &:hover:focus-visible {
+    border-color: var(--color-border-input-selected);
+    outline: none;
+    box-shadow:
+      0 0 0 1px var(--bg-body),
+      0 0 0 var(--border-width-2) var(--bg-focus-ring),
+      inset 0 0 0 var(--border-width-0) var(--color-border-input-selected);
+  }
 }
 
-// Supports safari browsers
 @mixin focus-ring {
   outline: none;
-  box-shadow: 0 0 0 1px var(--bg-neutral-lightest), 0 0 0 var(--border-width-2) var(--bg-focus-ring);
+  box-shadow: 0 0 0 1px var(--bg-body), 0 0 0 var(--border-width-2) var(--bg-focus-ring);
+}
+
+@mixin focus-ring-visible {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {        // Use `focus` instead of `focus-visible`
+      &:focus { @include focus-ring; }           // due to Safari's lack of support
+    }
+  }
+  &:focus-visible { @include focus-ring; }
 }

From 96ea67b079f9ec2da962b4f709ba0dea25a5cf98 Mon Sep 17 00:00:00 2001
From: Eduardo Formiga <eduardo.formiga@gmail.com>
Date: Thu, 3 Feb 2022 13:30:19 -0300
Subject: [PATCH 4/8] [FSSS-170] Chore: tweaks search page (#293)

* Removes unused title

* Extracts css from product-gallery section

* Tweaks SROnly component

* Adds SROnly h1 title to search page

* Fixes typo
---
 .../ProductGallery/ProductGallery.tsx         |   2 +
 .../ProductGallery/product-gallery.scss       | 150 +++++++++++++++++
 src/components/ui/SROnly/SROnly.tsx           |   8 +-
 src/pages/s.tsx                               |   6 +-
 src/styles/pages/product-listing.scss         | 151 +-----------------
 5 files changed, 162 insertions(+), 155 deletions(-)
 create mode 100644 src/components/sections/ProductGallery/product-gallery.scss

diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index 0f04c9ba8..f53dfc64e 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -11,6 +11,8 @@ import {
 import { useGalleryQuery } from './useGalleryQuery'
 import { useOrderedFacets } from './useOrderedFacets'
 
+import './product-gallery.scss'
+
 const GalleryPage = lazy(() => import('./ProductGalleryPage'))
 const Sort = lazy(() => import('src/components/search/Sort'))
 const Filter = lazy(() => import('src/components/search/Filter'))
diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss
new file mode 100644
index 000000000..c82e41239
--- /dev/null
+++ b/src/components/sections/ProductGallery/product-gallery.scss
@@ -0,0 +1,150 @@
+@import "../../../styles/scaffold.scss";
+
+.product-listing {
+  padding-top: 0;
+  --product-listing-row-height: var(--space-6);
+
+  @include media(">=notebook") {
+    padding-top: var(--page-padding-notebook);
+  }
+}
+
+// Temporary till we have skeletons.
+.product-listing__data-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding-top: var(--space-5);
+}
+
+.product-listing__content-grid {
+  display: flex;
+  flex-direction: column;
+  padding-right: 0;
+  padding-left: 0;
+
+  @include media(">=notebook") {
+    display: grid;
+    grid-template-rows: var(--product-listing-row-height) auto;
+    grid-template-columns: repeat(12, 1fr);
+    padding-right: var(--page-padding-notebook);
+    padding-left: var(--page-padding-notebook);
+    column-gap: var(--space-4);
+    row-gap: var(--space-0);
+  }
+}
+
+.product-listing__filters {
+  @include media(">=notebook") {
+    position: sticky;
+    top: var(--grid-gap-0);
+    grid-row: span 2;
+    grid-column: 1 / span 3;
+    align-self: start;
+  }
+}
+
+.product-listing__sort {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  order: 1;
+  width: 100%;
+  min-height: rem(68px);
+  padding: var(--space-1) var(--space-3) var(--space-2);
+  background-color: var(--bg-neutral-lightest);
+
+  @include media(">=notebook") {
+    grid-column: 6 / span 7;
+    justify-content: flex-end;
+    order: unset;
+    min-height: initial;
+    padding: 0;
+  }
+}
+
+.product-listing__results-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  order: 2;
+  min-height: rem(45px);
+  padding: var(--space-2) var(--space-3);
+  background-color: var(--bg-neutral-light);
+
+  @include media(">=notebook") {
+    grid-column: 4 /span 2;
+    justify-content: left;
+    order: unset;
+    min-height: initial;
+    padding: 0;
+    background-color: unset;
+  }
+}
+
+.product-listing__results {
+  --padding: var(--space-1);
+
+  order: 3;
+  padding: var(--padding) var(--padding) 0;
+  background-color: var(--bg-neutral-light);
+
+  @include media(">=notebook") {
+    grid-column: 4 / span 9;
+    order: unset;
+    padding: 0;
+    background-color: unset;
+  }
+
+  .product-card[data-store-card] { min-width: 100%; }
+}
+
+.product-listing__results-sponsored {
+  margin: var(--space-1) calc(-1 * var(--padding));
+  padding: var(--space-4) var(--space-3);
+  background-color: var(--bg-neutral-lightest);
+
+  @include media(">=notebook") {
+    margin: var(--space-6) 0;
+    padding: 0;
+
+    [data-store-tiles] {
+      column-gap: var(--grid-gap-0);
+      row-gap: 0;
+    }
+  }
+
+  h3 { margin-bottom: var(--space-1); }
+}
+
+.product-listing__pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--space-13);
+  margin-right: calc(-1 * var(--padding));
+  margin-left: calc(-1 * var(--padding));
+  padding: var(--space-4);
+  background-color: var(--bg-neutral-lightest);
+
+  @include media(">=notebook") {
+    padding: var(--space-1) var(--space-2);
+  }
+
+  &--top {
+    margin-bottom: var(--padding);
+  }
+
+  &--bottom {
+    margin-top: var(--padding);
+  }
+
+  [data-store-button] {
+    width: 100%;
+
+    @include media(">=notebook") {
+      width: fit-content;
+    }
+  }
+}
diff --git a/src/components/ui/SROnly/SROnly.tsx b/src/components/ui/SROnly/SROnly.tsx
index 918b13f50..8756c9cb2 100644
--- a/src/components/ui/SROnly/SROnly.tsx
+++ b/src/components/ui/SROnly/SROnly.tsx
@@ -1,13 +1,17 @@
+import type { ElementType } from 'react'
 import React from 'react'
 
 import './sr-only.scss'
 
 interface Props {
   text: string
+  as?: ElementType
 }
 
-function SROnly({ text }: Props) {
-  return <span data-store-sr-only>{text}</span>
+function SROnly({ text, as }: Props) {
+  const Component = as ?? 'span'
+
+  return <Component data-store-sr-only>{text}</Component>
 }
 
 export default SROnly
diff --git a/src/pages/s.tsx b/src/pages/s.tsx
index f7d84c0b4..40566d26a 100644
--- a/src/pages/s.tsx
+++ b/src/pages/s.tsx
@@ -10,6 +10,7 @@ import type {
   SearchPageQueryQueryVariables,
 } from '@generated/graphql'
 import { GatsbySeo } from 'gatsby-plugin-next-seo'
+import SROnly from 'src/components/ui/SROnly'
 
 export type Props = PageProps<
   SearchPageQueryQuery,
@@ -26,7 +27,7 @@ function Page(props: Props) {
 
   const { locale } = useSession()
   const searchParams = useSearchParams(props.location)
-  const title = site?.siteMetadata?.title ?? ''
+  const title = 'Search Results | FastStore'
 
   if (!searchParams) {
     return null
@@ -56,8 +57,7 @@ function Page(props: Props) {
         Sections: Components imported from '../components/sections' only.
         Do not import or render components from any other folder in here.
       */}
-      <h1>{title}</h1>
-
+      <SROnly as="h1" text={title} />
       <ProductGallery title="Search Results" />
     </SearchProvider>
   )
diff --git a/src/styles/pages/product-listing.scss b/src/styles/pages/product-listing.scss
index 7eec64d98..287798bb4 100644
--- a/src/styles/pages/product-listing.scss
+++ b/src/styles/pages/product-listing.scss
@@ -1,163 +1,14 @@
-@import "../scaffold.scss";
-
-.product-listing {
-  padding-top: 0;
-  --product-listing-row-height: var(--space-6);
-
-  @include media(">=notebook") {
-    padding-top: var(--page-padding-notebook);
-  }
-}
+@import "../vendors/include-media";
 
 .product-listing__breadcrumb {
   padding-top: var(--space-3);
   padding-bottom: var(--space-3);
 }
 
-// Temporary till we have skeletons.
-.product-listing__data-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding-top: var(--space-5);
-}
-
 .product-listing__hero {
   width: 100%;
 }
 
-.product-listing__content-grid {
-  display: flex;
-  flex-direction: column;
-  padding-right: 0;
-  padding-left: 0;
-
-  @include media(">=notebook") {
-    display: grid;
-    grid-template-columns: repeat(12, 1fr);
-    grid-templat-rows: var(--product-listing-row-height) auto;
-    padding-right: var(--page-padding-notebook);
-    padding-left: var(--page-padding-notebook);
-    column-gap: var(--space-4);
-    row-gap: var(--space-0);
-  }
-}
-
-.product-listing__filters {
-  @include media(">=notebook") {
-    position: sticky;
-    top: var(--grid-gap-0);
-    grid-row: span 2;
-    grid-column: 1 / span 3;
-    align-self: start;
-  }
-}
-
-.product-listing__sort {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  order: 1;
-  width: 100%;
-  min-height: rem(68px);
-  padding: var(--space-1) var(--space-3) var(--space-2);
-  background-color: var(--bg-neutral-lightest);
-
-  @include media(">=notebook") {
-    grid-column: 6 / span 7;
-    justify-content: flex-end;
-    order: unset;
-    min-height: initial;
-    padding: 0;
-  }
-}
-
-.product-listing__results-count {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  order: 2;
-  min-height: rem(45px);
-  padding: var(--space-2) var(--space-3);
-  background-color: var(--bg-neutral-light);
-
-  @include media(">=notebook") {
-    grid-column: 4 /span 2;
-    justify-content: left;
-    order: unset;
-    min-height: initial;
-    padding: 0;
-    background-color: unset;
-  }
-}
-
-.product-listing__results {
-  --padding: var(--space-1);
-
-  order: 3;
-  padding: var(--padding) var(--padding) 0;
-  background-color: var(--bg-neutral-light);
-
-  @include media(">=notebook") {
-    grid-column: 4 / span 9;
-    order: unset;
-    padding: 0;
-    background-color: unset;
-  }
-
-  .product-card[data-store-card] { min-width: 100%; }
-}
-
-.product-listing__results-sponsored {
-  margin: var(--space-1) calc(-1 * var(--padding));
-  padding: var(--space-4) var(--space-3);
-  background-color: var(--bg-neutral-lightest);
-
-  @include media(">=notebook") {
-    margin: var(--space-6) 0;
-    padding: 0;
-
-    [data-store-tiles] {
-      column-gap: var(--grid-gap-0);
-      row-gap: 0;
-    }
-  }
-
-  h3 { margin-bottom: var(--space-1); }
-}
-
-.product-listing__pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--space-13);
-  margin-right: calc(-1 * var(--padding));
-  margin-left: calc(-1 * var(--padding));
-  padding: var(--space-4);
-  background-color: var(--bg-neutral-lightest);
-
-  @include media(">=notebook") {
-    padding: var(--space-1) var(--space-2);
-  }
-
-  &--top {
-    margin-bottom: var(--padding);
-  }
-
-  &--bottom {
-    margin-top: var(--padding);
-  }
-
-  [data-store-button] {
-    width: 100%;
-
-    @include media(">=notebook") {
-      width: fit-content;
-    }
-  }
-}
-
 .product-listing__scroll-top {
   display: flex;
   justify-content: center;

From ee340801a79ff5611a755fea37da4bd74804c3cb Mon Sep 17 00:00:00 2001
From: Heitor Carvalho <heitor.carvalho@vtex.com.br>
Date: Thu, 3 Feb 2022 21:50:02 -0300
Subject: [PATCH 5/8] [FSSS-164] Extract UISelect from Sort to its own
 component (#299)

* Extract UISelect from Sort to its own component

* Rename data-ui-select to data-select

* Change attribute className to classes

* Remove whitespace

* Remove aria-label property from Sort

* Make 'id' a required attribute for Select

* Change 'SelectOptions' type to Record

* Use className attribute instead of classes

Co-authored-by: Fanny Chien <fannychienn@gmail.com>
---
 src/components/search/Sort/Sort.tsx           | 31 ++++------
 src/components/ui/Select/Select.tsx           | 56 +++++++++++++++++++
 src/components/ui/Select/index.tsx            |  1 +
 .../Sort/sort.scss => ui/Select/select.scss}  |  2 +-
 4 files changed, 68 insertions(+), 22 deletions(-)
 create mode 100644 src/components/ui/Select/Select.tsx
 create mode 100644 src/components/ui/Select/index.tsx
 rename src/components/{search/Sort/sort.scss => ui/Select/select.scss} (98%)

diff --git a/src/components/search/Sort/Sort.tsx b/src/components/search/Sort/Sort.tsx
index 9c228fbbf..24ff7dfe8 100644
--- a/src/components/search/Sort/Sort.tsx
+++ b/src/components/search/Sort/Sort.tsx
@@ -1,9 +1,6 @@
 import { useSearch } from '@faststore/sdk'
 import React from 'react'
-import { Select as UISelect } from '@faststore/ui'
-import { CaretDown as CaretDownIcon } from 'phosphor-react'
-
-import './sort.scss'
+import Select from 'src/components/ui/Select'
 
 const OptionsMap = {
   price_desc: 'Price, descending',
@@ -25,23 +22,15 @@ function Sort() {
   } = useSearch()
 
   return (
-    <div className="sort / title-small">
-      <label htmlFor="select-sort">Sort by</label>
-      <UISelect
-        data-testid="search-sort"
-        onChange={(e) => setSort(keys[e.target.selectedIndex])}
-        value={sort}
-        aria-label="Product Sort"
-        id="select-sort"
-      >
-        {keys.map((key) => (
-          <option key={key} value={key}>
-            {OptionsMap[key]}
-          </option>
-        ))}
-      </UISelect>
-      <CaretDownIcon size={18} weight="bold" />
-    </div>
+    <Select
+      id="sort-select"
+      className="sort / title-small"
+      labelText="Sort by"
+      options={OptionsMap}
+      onChange={(e) => setSort(keys[e.target.selectedIndex])}
+      value={sort}
+      testId="search-sort"
+    />
   )
 }
 
diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx
new file mode 100644
index 000000000..ed11d82fd
--- /dev/null
+++ b/src/components/ui/Select/Select.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import { Select as UISelect } from '@faststore/ui'
+import type { SelectProps } from '@faststore/ui'
+import { CaretDown as CaretDownIcon } from 'phosphor-react'
+
+import './select.scss'
+
+interface UISelectProps extends SelectProps {
+  /*
+   * Redefines the id property to be required when using the Select component. The
+   * id will be used to link the UISelect component and its label.
+   */
+  id: string
+  /*
+   * Defines the options available in the select. The SelectOptions object
+   * keys are the property names, while the values correspond to the text that
+   * will be displayed in the UI
+   */
+  options: Record<string, string>
+  /*
+   * Specifies the text that will be displayed in the label right next to the Select.
+   * If omitted, the label will not be rendered.
+   */
+  labelText?: string
+}
+
+export default function Select({
+  id,
+  className,
+  options,
+  onChange,
+  labelText,
+  value,
+  'aria-label': ariaLabel,
+  testId,
+}: UISelectProps) {
+  return (
+    <div data-select className={className}>
+      {labelText && <label htmlFor={id}>{labelText}</label>}
+      <UISelect
+        data-testid={testId}
+        onChange={onChange}
+        value={value}
+        aria-label={ariaLabel}
+        id={id}
+      >
+        {Object.keys(options).map((key) => (
+          <option key={key} value={key}>
+            {options[key]}
+          </option>
+        ))}
+      </UISelect>
+      <CaretDownIcon size={18} weight="bold" />
+    </div>
+  )
+}
diff --git a/src/components/ui/Select/index.tsx b/src/components/ui/Select/index.tsx
new file mode 100644
index 000000000..bb4b6a044
--- /dev/null
+++ b/src/components/ui/Select/index.tsx
@@ -0,0 +1 @@
+export { default } from './Select'
diff --git a/src/components/search/Sort/sort.scss b/src/components/ui/Select/select.scss
similarity index 98%
rename from src/components/search/Sort/sort.scss
rename to src/components/ui/Select/select.scss
index 9e6912db4..64bfb710d 100644
--- a/src/components/search/Sort/sort.scss
+++ b/src/components/ui/Select/select.scss
@@ -1,6 +1,6 @@
 @import "../../../styles/scaffold.scss";
 
-.sort {
+[data-select] {
   position: relative;
   display: flex;
   align-items: center;

From fe9618ecb2ebd5b3a429fe85c43e0ef9198c041c Mon Sep 17 00:00:00 2001
From: Eduardo Formiga <eduardo.formiga@gmail.com>
Date: Fri, 4 Feb 2022 18:05:37 -0300
Subject: [PATCH 6/8] [FSSS-168] Feat: lazy loading and improvements (CLS)
 (#300)

* Lazy loading layout components

* Prevents to load total count (blink behavior)

* Lazy loading grid with loading fallback (CLS solved)

* Lazy loading below the fold components and Improves CLS

* Trigger CI

* Fixes plp filter spec

Co-authored-by: Arthur Andrade <arthurfelandrade@gmail.com>

* Renames loadable import

* Tweaks product listing grid height

* Fix: Adds slug as prop

* Extracts css to corresponding components/pages

* Styles search page and prevent CLS

* Lazy loading homepage below the fold components

* Removes outer unnecessary bracket

Co-authored-by: Filipe W. Lima <fwl.ufpe@gmail.com>

* Extracts shared styles

* Adds info comments regarding Skeletons

* Revert "Extracts shared styles"

This reverts commit bc93a0a443745757b3b12f1e3d9f20bdb1c6cefa.

* Creates ProductListing section

* Aims Search page use Product Listing component

* Aims PLP to use ProductListing section

* Adds Lazy loading components section to README.md

* Update README.md

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

* Update README.md

Co-authored-by: Fanny Chien <fannychienn@gmail.com>

Co-authored-by: Arthur Andrade <arthurfelandrade@gmail.com>
Co-authored-by: Filipe W. Lima <fwl.ufpe@gmail.com>
Co-authored-by: Fanny Chien <fannychienn@gmail.com>
---
 README.md                                     |  10 +
 cypress/integration/plp.test.js               |  38 +--
 src/Layout.tsx                                |  24 +-
 .../ProductGallery/ProductGallery.tsx         | 247 +++++++++---------
 .../ProductGallery/ProductGalleryPage.tsx     |  17 +-
 .../ProductGallery/product-gallery.scss       |  41 +--
 .../sections/ProductGallery/useTotalCount.ts  |  14 +
 .../ProductListing/ProductListing.tsx         |  25 ++
 .../sections/ProductListing/index.tsx         |   1 +
 .../ProductListing/product-listing.scss       |  32 +++
 src/pages/index.tsx                           |   8 +-
 src/pages/s.tsx                               |   5 +-
 src/pages/{StoreCollection.slug}.tsx          |  19 +-
 ...listing.scss => product-listing-page.scss} |   0
 14 files changed, 276 insertions(+), 205 deletions(-)
 create mode 100644 src/components/sections/ProductGallery/useTotalCount.ts
 create mode 100644 src/components/sections/ProductListing/ProductListing.tsx
 create mode 100644 src/components/sections/ProductListing/index.tsx
 create mode 100644 src/components/sections/ProductListing/product-listing.scss
 rename src/styles/pages/{product-listing.scss => product-listing-page.scss} (100%)

diff --git a/README.md b/README.md
index 9c05c6cc2..cd01c8174 100644
--- a/README.md
+++ b/README.md
@@ -412,6 +412,16 @@ Looking for more guidance? Full documentation for Faststore lives [on this GitHu
 
 This project has strict performance budgets. Right out of the box, this project performs around 95 on Google's Page Speed Insights website, which usually is way more strict than your laptop's chrome lighthouse. Every time you commit to the repository, our QA bots will run and evaluate your code quality. We recommend you NEVER put in production a code that breaks any of the bots. If a bot breaks and still you need to put the code into production, change the bot config (`lighthouserc.js`, `cypress.json`) to make it pass and merge. This way you ensure your website will keep performing well during the years to come.
 
+### Lazy loading components
+
+[According to Gatsby](https://www.gatsbyjs.com/docs/how-to/performance/improving-site-performance/#step-5-on-critical-paths-lazy-load-below-the-fold-components):
+
+> `loadable-components` is the recommended lazy-loading solution for all server-side-rendered React applications, including Gatsby websites.
+
+So First, try to use the native `lazy`/`Suspense` alternative. But if there is some Server Side Rendered dependency, switch to using the `loadable-components`.
+
+Finally, for that pages that can use both `lazy` and `loadable`, keep the preference to use only `loadable` for the sake of avoiding loading two different things for the same purpose.
+
 ## Adding third party scripts
 
 Adding third-party scripts to a webpage usually makes it slow. To maintain great performance while third-party scripts are added, this project uses [Partytown](https://github.com/BuilderIO/partytown/), a lazy-load library that helps relocate intensive scripts into a web worker and off of the main thread.
diff --git a/cypress/integration/plp.test.js b/cypress/integration/plp.test.js
index 6a9105131..c0cc9af07 100644
--- a/cypress/integration/plp.test.js
+++ b/cypress/integration/plp.test.js
@@ -28,28 +28,30 @@ describe('Search page Filters and Sorting options', () => {
       .should('exist')
       .first()
       .click()
-      .getById('filter-modal-button-apply')
-      .click()
-
-    // Check applied filters
-    cy.getById('open-filter-button')
-      .click()
-      .getById('filter-accordion-panel-checkbox')
-      .first()
-      .click({ force: true })
       .then(($checkbox) => {
         const value = $checkbox.attr('data-value')
         const quantity = $checkbox.attr('data-quantity')
 
-        // Check if the filter applied actually ended up in the URL
-        cy.location('href').should((loc) => {
-          expect(loc).to.include(value)
-        })
-
-        // Check if the filter applied actually brought the number of products it said it would
-        cy.getById('total-product-count').then(($countDiv) => {
-          expect(Number($countDiv.attr('data-count'))).to.eq(Number(quantity))
-        })
+        cy.getById('filter-modal-button-apply')
+          .click()
+          .then(() => {
+            // Check if the filter applied actually ended up in the URL
+            cy.location('href').should((loc) => {
+              expect(loc).to.include(value)
+            })
+
+            // Check if the filter applied actually brought the number of products it said it would
+
+            cy.waitUntil(() => {
+              return cy.get('.product-grid').should('exist')
+            }).then(() => {
+              cy.getById('total-product-count').then(($countDiv) => {
+                expect(Number($countDiv.attr('data-count'))).to.eq(
+                  Number(quantity)
+                )
+              })
+            })
+          })
       })
   })
 
diff --git a/src/Layout.tsx b/src/Layout.tsx
index b3703400b..50cd6c188 100644
--- a/src/Layout.tsx
+++ b/src/Layout.tsx
@@ -1,5 +1,5 @@
-import React, { lazy, Suspense, useState } from 'react'
-import Loadable from '@loadable/component'
+import React, { useState } from 'react'
+import loadable from '@loadable/component'
 import Navbar from 'src/components/common/Navbar'
 import { BellRinging as BellRingingIcon } from 'phosphor-react'
 import { useCartNotificationEffect } from 'src/sdk/cart/useCartNotificationEffect'
@@ -9,9 +9,11 @@ import type { PropsWithChildren } from 'react'
 import Alert from './components/ui/Alert'
 import './styles/fonts.css'
 
-const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
-const Toast = lazy(() => import('src/components/ui/Toast'))
-const Footer = Loadable(() => import('src/components/common/Footer'))
+const CartSidebar = loadable(() => import('src/components/cart/CartSidebar'))
+
+const Toast = loadable(() => import('src/components/ui/Toast'))
+
+const Footer = loadable(() => import('src/components/common/Footer'))
 
 function Layout({ children }: PropsWithChildren<unknown>) {
   const { displayMinicart, toasts } = useUI()
@@ -51,17 +53,9 @@ function Layout({ children }: PropsWithChildren<unknown>) {
       <main>{children}</main>
 
       <Footer />
-      {displayMinicart && (
-        <Suspense fallback={null}>
-          <CartSidebar />
-        </Suspense>
-      )}
+      {displayMinicart && <CartSidebar />}
 
-      {toasts.length > 0 && (
-        <Suspense fallback={null}>
-          <Toast />
-        </Suspense>
-      )}
+      {toasts.length > 0 && <Toast />}
     </div>
   )
 }
diff --git a/src/components/sections/ProductGallery/ProductGallery.tsx b/src/components/sections/ProductGallery/ProductGallery.tsx
index f53dfc64e..d249d6c03 100644
--- a/src/components/sections/ProductGallery/ProductGallery.tsx
+++ b/src/components/sections/ProductGallery/ProductGallery.tsx
@@ -2,6 +2,7 @@ import { usePagination, useSearch } from '@faststore/sdk'
 import { GatsbySeo } from 'gatsby-plugin-next-seo'
 import React, { useState, lazy, Suspense } from 'react'
 import Button, { LinkButton } from 'src/components/ui/Button'
+import Sort from 'src/components/search/Sort'
 import useWindowDimensions from 'src/hooks/useWindowDimensions'
 import {
   FadersHorizontal as FadersHorizontalIcon,
@@ -10,11 +11,11 @@ import {
 
 import { useGalleryQuery } from './useGalleryQuery'
 import { useOrderedFacets } from './useOrderedFacets'
+import { useTotalCount } from './useTotalCount'
 
 import './product-gallery.scss'
 
 const GalleryPage = lazy(() => import('./ProductGalleryPage'))
-const Sort = lazy(() => import('src/components/search/Sort'))
 const Filter = lazy(() => import('src/components/search/Filter'))
 
 interface Props {
@@ -26,7 +27,8 @@ function ProductGallery({ title, slug }: Props) {
   const { pages, state: searchState, addNextPage, addPrevPage } = useSearch()
   const { data } = useGalleryQuery()
 
-  const totalCount = data?.search.products.pageInfo.totalCount ?? 0
+  const totalCount = useTotalCount(data)
+
   const { next, prev } = usePagination(totalCount)
   const { isMobile } = useWindowDimensions()
 
@@ -34,136 +36,131 @@ function ProductGallery({ title, slug }: Props) {
 
   const orderedFacets = useOrderedFacets(data)
 
-  if (!orderedFacets.length) {
-    return <div className="product-listing__data-loading">Loading…</div>
-  }
-
   return (
-    <div className="product-listing / grid-content-full">
-      <div className="product-listing__content-grid / grid-content">
-        <div className="product-listing__filters">
+    <>
+      <div className="product-listing__filters">
+        <Suspense fallback={null}>
+          <Filter
+            slug={slug}
+            isOpen={isFilterOpen}
+            facets={orderedFacets}
+            onDismiss={() => setIsFilterOpen(false)}
+          />
+        </Suspense>
+      </div>
+
+      <div
+        className="product-listing__results-count"
+        data-testid="total-product-count"
+        data-count={totalCount}
+      >
+        <h2>{totalCount} Results</h2>
+      </div>
+
+      <div className="product-listing__sort">
+        <Sort />
+
+        {isMobile && (
+          <Button
+            variant="tertiary"
+            data-testid="open-filter-button"
+            icon={<FadersHorizontalIcon size={16} />}
+            iconPosition="left"
+            aria-label="Open Filters"
+            onClick={() => setIsFilterOpen(!isFilterOpen)}
+          >
+            Filters
+          </Button>
+        )}
+      </div>
+
+      <div className="product-listing__results">
+        {/* Add link to previous page. This helps on SEO */}
+        {prev !== false && (
+          <div className="product-listing__pagination product-listing__pagination--top">
+            <GatsbySeo linkTags={[{ rel: 'prev', href: prev.link }]} />
+            <LinkButton
+              onClick={(e) => {
+                e.currentTarget.blur()
+                e.preventDefault()
+                addPrevPage()
+              }}
+              href={prev.link}
+              rel="prev"
+              variant="secondary"
+              iconPosition="left"
+              icon={<ArrowLeftIcon size={16} weight="bold" />}
+            >
+              Previous Page
+            </LinkButton>
+          </div>
+        )}
+
+        {/* Render ALL products */}
+        {pages.map((page) => {
+          return data ? (
+            <Suspense
+              fallback={
+                <div className="product-listing__data-loading">Loading…</div>
+              }
+              key={`gallery-page-${page}`}
+            >
+              <GalleryPage
+                showSponsoredProducts={false}
+                key={`gallery-page-${page}`}
+                fallbackData={page === searchState.page ? data : undefined}
+                page={page}
+                title={title}
+              />
+            </Suspense>
+          ) : (
+            <div className="product-listing__data-loading">Loading…</div>
+          )
+        })}
+
+        {/* Prefetch Previous and Next pages */}
+        {prev !== false && (
           <Suspense fallback={null}>
-            <Filter
-              slug={slug}
-              isOpen={isFilterOpen}
-              facets={orderedFacets}
-              onDismiss={() => setIsFilterOpen(false)}
+            <GalleryPage
+              showSponsoredProducts={false}
+              page={prev.cursor}
+              display={false}
+              title={title}
             />
           </Suspense>
-        </div>
-
-        {data ? (
-          <>
-            <div
-              className="product-listing__results-count"
-              data-testid="total-product-count"
-              data-count={totalCount}
+        )}
+        {next !== false && (
+          <Suspense fallback={null}>
+            <GalleryPage
+              showSponsoredProducts={false}
+              page={next.cursor}
+              display={false}
+              title={title}
+            />
+          </Suspense>
+        )}
+
+        {/* Add link to next page. This helps on SEO */}
+        {next !== false && (
+          <div className="product-listing__pagination product-listing__pagination--bottom">
+            <GatsbySeo linkTags={[{ rel: 'next', href: next.link }]} />
+            <LinkButton
+              data-testid="show-more"
+              onClick={(e) => {
+                e.currentTarget.blur()
+                e.preventDefault()
+                addNextPage()
+              }}
+              href={next.link}
+              rel="next"
+              variant="secondary"
             >
-              <h2>{totalCount} Results</h2>
-            </div>
-
-            <div className="product-listing__sort">
-              <Suspense fallback={null}>
-                <Sort />
-              </Suspense>
-
-              {isMobile && (
-                <Button
-                  variant="tertiary"
-                  data-testid="open-filter-button"
-                  icon={<FadersHorizontalIcon size={16} />}
-                  iconPosition="left"
-                  aria-label="Open Filters"
-                  onClick={() => setIsFilterOpen(!isFilterOpen)}
-                >
-                  Filters
-                </Button>
-              )}
-            </div>
-
-            <div className="product-listing__results">
-              {/* Add link to previous page. This helps on SEO */}
-              {prev !== false && (
-                <div className="product-listing__pagination product-listing__pagination--top">
-                  <GatsbySeo linkTags={[{ rel: 'prev', href: prev.link }]} />
-                  <LinkButton
-                    onClick={(e) => {
-                      e.currentTarget.blur()
-                      e.preventDefault()
-                      addPrevPage()
-                    }}
-                    href={prev.link}
-                    rel="prev"
-                    variant="secondary"
-                    iconPosition="left"
-                    icon={<ArrowLeftIcon size={16} weight="bold" />}
-                  >
-                    Previous Page
-                  </LinkButton>
-                </div>
-              )}
-
-              {/* Render ALL products */}
-              {pages.map((page) => (
-                <Suspense fallback={null} key={`gallery-page-${page}`}>
-                  <GalleryPage
-                    showSponsoredProducts={false}
-                    key={`gallery-page-${page}`}
-                    fallbackData={page === searchState.page ? data : undefined}
-                    page={page}
-                    title={title}
-                  />
-                </Suspense>
-              ))}
-
-              {/* Prefetch Previous and Next pages */}
-              {prev !== false && (
-                <Suspense fallback={null}>
-                  <GalleryPage
-                    showSponsoredProducts={false}
-                    page={prev.cursor}
-                    display={false}
-                    title={title}
-                  />
-                </Suspense>
-              )}
-              {next !== false && (
-                <Suspense fallback={null}>
-                  <GalleryPage
-                    showSponsoredProducts={false}
-                    page={next.cursor}
-                    display={false}
-                    title={title}
-                  />
-                </Suspense>
-              )}
-
-              {/* Add link to next page. This helps on SEO */}
-              {next !== false && (
-                <div className="product-listing__pagination product-listing__pagination--bottom">
-                  <GatsbySeo linkTags={[{ rel: 'next', href: next.link }]} />
-                  <LinkButton
-                    data-testid="show-more"
-                    onClick={(e) => {
-                      e.currentTarget.blur()
-                      e.preventDefault()
-                      addNextPage()
-                    }}
-                    href={next.link}
-                    rel="next"
-                    variant="secondary"
-                  >
-                    Load more products
-                  </LinkButton>
-                </div>
-              )}
-            </div>
-          </>
-        ) : (
-          <div className="product-listing__data-loading">Loading…</div>
+              Load more products
+            </LinkButton>
+          </div>
         )}
       </div>
-    </div>
+    </>
   )
 }
 
diff --git a/src/components/sections/ProductGallery/ProductGalleryPage.tsx b/src/components/sections/ProductGallery/ProductGalleryPage.tsx
index 47d25aeab..a789926d2 100644
--- a/src/components/sections/ProductGallery/ProductGalleryPage.tsx
+++ b/src/components/sections/ProductGallery/ProductGalleryPage.tsx
@@ -1,12 +1,13 @@
 import { useSearch } from '@faststore/sdk'
-import React, { useMemo } from 'react'
-import ProductGrid from 'src/components/product/ProductGrid'
+import React, { useMemo, lazy, Suspense } from 'react'
 import { useProductsQuery } from 'src/sdk/product/useProductsQuery'
 import Sentinel from 'src/sdk/search/Sentinel'
 import type { ProductsQueryQuery } from '@generated/graphql'
 
 import ProductTiles from '../ProductTiles'
 
+const ProductGrid = lazy(() => import('src/components/product/ProductGrid'))
+
 /* If showSponsoredProducts is true, a ProductTiles will be displayed in between two blocks of ProductGrid on the page 0 */
 interface Props {
   page: number
@@ -87,7 +88,17 @@ function GalleryPage({
           />
         </>
       ) : (
-        <ProductGrid products={products} page={page} pageSize={itemsPerPage} />
+        <Suspense
+          fallback={
+            <div className="product-listing__data-loading">Loading...</div>
+          }
+        >
+          <ProductGrid
+            products={products}
+            page={page}
+            pageSize={itemsPerPage}
+          />
+        </Suspense>
       )}
     </>
   )
diff --git a/src/components/sections/ProductGallery/product-gallery.scss b/src/components/sections/ProductGallery/product-gallery.scss
index c82e41239..b30a0e9d4 100644
--- a/src/components/sections/ProductGallery/product-gallery.scss
+++ b/src/components/sections/ProductGallery/product-gallery.scss
@@ -1,38 +1,11 @@
-@import "../../../styles/scaffold.scss";
+@import "../../../styles/scaffold";
 
-.product-listing {
-  padding-top: 0;
-  --product-listing-row-height: var(--space-6);
-
-  @include media(">=notebook") {
-    padding-top: var(--page-padding-notebook);
-  }
-}
-
-// Temporary till we have skeletons.
+// Check it after apply Skeletons.
 .product-listing__data-loading {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  padding-top: var(--space-5);
-}
-
-.product-listing__content-grid {
-  display: flex;
-  flex-direction: column;
-  padding-right: 0;
-  padding-left: 0;
+  --product-listing-grid-height: 2197px;
+  --product-listing-row-height: var(--space-6);
 
-  @include media(">=notebook") {
-    display: grid;
-    grid-template-rows: var(--product-listing-row-height) auto;
-    grid-template-columns: repeat(12, 1fr);
-    padding-right: var(--page-padding-notebook);
-    padding-left: var(--page-padding-notebook);
-    column-gap: var(--space-4);
-    row-gap: var(--space-0);
-  }
+  min-height: calc(var(--product-listing-grid-height) - var(--product-listing-row-height));
 }
 
 .product-listing__filters {
@@ -83,10 +56,14 @@
   }
 }
 
+// Check it after apply Skeletons.
 .product-listing__results {
   --padding: var(--space-1);
+  --product-listing-grid-height: 2197px;
+  --product-listing-row-height: var(--space-6);
 
   order: 3;
+  min-height: calc(var(--product-listing-grid-height) - var(--product-listing-row-height));
   padding: var(--padding) var(--padding) 0;
   background-color: var(--bg-neutral-light);
 
diff --git a/src/components/sections/ProductGallery/useTotalCount.ts b/src/components/sections/ProductGallery/useTotalCount.ts
new file mode 100644
index 000000000..d648722cc
--- /dev/null
+++ b/src/components/sections/ProductGallery/useTotalCount.ts
@@ -0,0 +1,14 @@
+import type { ProductGalleryQueryQuery } from '@generated/graphql'
+import { useMemo, useRef } from 'react'
+
+export const useTotalCount = (data?: ProductGalleryQueryQuery) => {
+  const totalCount = useRef<number>(0)
+
+  return useMemo(() => {
+    if (data) {
+      totalCount.current = data.search.products.pageInfo.totalCount
+    }
+
+    return totalCount.current
+  }, [data, totalCount])
+}
diff --git a/src/components/sections/ProductListing/ProductListing.tsx b/src/components/sections/ProductListing/ProductListing.tsx
new file mode 100644
index 000000000..e22a99358
--- /dev/null
+++ b/src/components/sections/ProductListing/ProductListing.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import loadable from '@loadable/component'
+
+import './product-listing.scss'
+
+type Props = {
+  title: string
+  slug?: string
+}
+
+const ProductGallery = loadable(
+  () => import('src/components/sections/ProductGallery')
+)
+
+function ProductListing({ title, slug }: Props) {
+  return (
+    <div className="product-listing / grid-content-full">
+      <div className="product-listing__content-grid / grid-content">
+        <ProductGallery title={title} slug={slug} />
+      </div>
+    </div>
+  )
+}
+
+export default ProductListing
diff --git a/src/components/sections/ProductListing/index.tsx b/src/components/sections/ProductListing/index.tsx
new file mode 100644
index 000000000..6438b8d88
--- /dev/null
+++ b/src/components/sections/ProductListing/index.tsx
@@ -0,0 +1 @@
+export { default } from './ProductListing'
diff --git a/src/components/sections/ProductListing/product-listing.scss b/src/components/sections/ProductListing/product-listing.scss
new file mode 100644
index 000000000..221b5cd02
--- /dev/null
+++ b/src/components/sections/ProductListing/product-listing.scss
@@ -0,0 +1,32 @@
+@import "../../../styles/vendors/include-media";
+
+// Check it after apply Skeletons.
+.product-listing {
+  --product-listing-grid-height: 2197px;
+  --product-listing-row-height: var(--space-6);
+
+  min-height: var(--product-listing-grid-height);
+  padding-top: 0;
+
+  @include media(">=notebook") {
+    padding-top: var(--page-padding-notebook);
+  }
+}
+
+.product-listing__content-grid {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding-right: 0;
+  padding-left: 0;
+
+  @include media(">=notebook") {
+    display: grid;
+    grid-template-rows: var(--product-listing-row-height) auto;
+    grid-template-columns: repeat(12, 1fr);
+    padding-right: var(--page-padding-notebook);
+    padding-left: var(--page-padding-notebook);
+    column-gap: var(--space-4);
+    row-gap: var(--space-0);
+  }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 8a1ec503e..020f24ac8 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,14 +2,18 @@ import { useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
 import { GatsbySeo, JsonLd } from 'gatsby-plugin-next-seo'
 import React, { useMemo } from 'react'
+import loadable from '@loadable/component'
 import type { PageProps } from 'gatsby'
 import type { HomePageQueryQuery } from '@generated/graphql'
-import BannerText from 'src/components/sections/BannerText'
-import ProductTiles from 'src/components/sections/ProductTiles'
 import Hero from 'src/components/sections/Hero'
 import ProductShelf from 'src/components/sections/ProductShelf'
 import IncentivesHeader from 'src/components/sections/Incentives/IncentivesHeader'
 
+const BannerText = loadable(() => import('src/components/sections/BannerText'))
+const ProductTiles = loadable(
+  () => import('src/components/sections/ProductTiles')
+)
+
 export type Props = PageProps<HomePageQueryQuery>
 
 function Page(props: Props) {
diff --git a/src/pages/s.tsx b/src/pages/s.tsx
index 40566d26a..9d3d19983 100644
--- a/src/pages/s.tsx
+++ b/src/pages/s.tsx
@@ -1,7 +1,7 @@
 import { parseSearchState, SearchProvider, useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
 import React, { useMemo } from 'react'
-import ProductGallery from 'src/components/sections/ProductGallery'
+import ProductListing from 'src/components/sections/ProductListing'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { applySearchState } from 'src/sdk/search/state'
 import type { PageProps } from 'gatsby'
@@ -58,7 +58,8 @@ function Page(props: Props) {
         Do not import or render components from any other folder in here.
       */}
       <SROnly as="h1" text={title} />
-      <ProductGallery title="Search Results" />
+
+      <ProductListing title="Search Results" />
     </SearchProvider>
   )
 }
diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx
index 6ce6e93b9..3cb828dd8 100644
--- a/src/pages/{StoreCollection.slug}.tsx
+++ b/src/pages/{StoreCollection.slug}.tsx
@@ -2,25 +2,28 @@ import { parseSearchState, SearchProvider, useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
 import { BreadcrumbJsonLd, GatsbySeo } from 'gatsby-plugin-next-seo'
 import React, { useMemo } from 'react'
-import Loadable from '@loadable/component'
-import Hero from 'src/components/sections/Hero'
-import ProductGallery from 'src/components/sections/ProductGallery'
+import loadable from '@loadable/component'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { applySearchState } from 'src/sdk/search/state'
 import { Headphones as HeadphonesIcon } from 'phosphor-react'
+import Breadcrumb from 'src/components/ui/Breadcrumb'
+import Hero from 'src/components/sections/Hero'
+import ProductListing from 'src/components/sections/ProductListing'
 import type { SearchState } from '@faststore/sdk'
 import type { PageProps } from 'gatsby'
 import type {
   CollectionPageQueryQuery,
   CollectionPageQueryQueryVariables,
 } from '@generated/graphql'
-import Breadcrumb from 'src/components/ui/Breadcrumb'
 import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
-import ScrollToTopButton from 'src/components/ui/ScrollToTopButton'
 
-import '../styles/pages/product-listing.scss'
+import '../styles/pages/product-listing-page.scss'
+
+const ScrollToTopButton = loadable(
+  () => import('src/components/ui/ScrollToTopButton')
+)
 
-const ProductShelf = Loadable(
+const ProductShelf = loadable(
   () => import('src/components/sections/ProductShelf')
 )
 
@@ -127,7 +130,7 @@ function Page(props: Props) {
         </section>
       </div>
 
-      <ProductGallery title={title} slug={slug} />
+      <ProductListing title={title} slug={slug} />
 
       {haveYouMightAlsoLikeProducts && (
         <section className="page__section page__section-shelf page__section-divisor / grid-section">
diff --git a/src/styles/pages/product-listing.scss b/src/styles/pages/product-listing-page.scss
similarity index 100%
rename from src/styles/pages/product-listing.scss
rename to src/styles/pages/product-listing-page.scss

From 9302081ffc9ee109a1c9e5c0f3b11b33da412ff5 Mon Sep 17 00:00:00 2001
From: Arthur Andrade <arthurfelandrade@gmail.com>
Date: Mon, 7 Feb 2022 10:39:44 -0300
Subject: [PATCH 7/8] [FSSS-172] Fix/Adjust inappropriate rerenders (#304)

---
 src/components/common/Footer/Footer.tsx       |  4 +-
 src/components/common/Navbar/Navbar.tsx       |  4 +-
 .../product/ProductCard/ProductCard.tsx       | 47 ++----------
 .../product/ProductGrid/ProductGrid.tsx       |  1 -
 src/components/sections/Hero/Hero.tsx         |  4 +-
 .../sections/ProductShelf/ProductShelf.tsx    |  2 +-
 .../sections/ProductTiles/ProductTiles.tsx    |  1 -
 src/components/ui/Alert/Alert.tsx             |  4 +-
 src/components/ui/Badge/DiscountBadge.tsx     |  4 +-
 src/components/ui/Breadcrumb/Breadcrumb.tsx   |  4 +-
 .../ui/Breadcrumb/BreadcrumbWrapper.tsx       | 21 ++++++
 src/components/ui/Breadcrumb/index.tsx        |  1 +
 src/components/ui/Price/Price.tsx             |  4 +-
 .../ui/ProductTitle/ProductTitle.tsx          |  4 +-
 .../ui/QuantitySelector/QuantitySelector.tsx  |  4 +-
 src/hooks/useSearchParams.ts                  | 37 ++++++++++
 src/pages/{StoreCollection.slug}.tsx          | 74 +++----------------
 src/pages/{StoreProduct.slug}/p.tsx           | 18 ++---
 18 files changed, 102 insertions(+), 136 deletions(-)
 create mode 100644 src/components/ui/Breadcrumb/BreadcrumbWrapper.tsx
 create mode 100644 src/hooks/useSearchParams.ts

diff --git a/src/components/common/Footer/Footer.tsx b/src/components/common/Footer/Footer.tsx
index f00c7fe26..27f2011a4 100644
--- a/src/components/common/Footer/Footer.tsx
+++ b/src/components/common/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import {
   List as UIList,
   Icon as UIIcon,
@@ -137,4 +137,4 @@ function Footer() {
   )
 }
 
-export default Footer
+export default memo(Footer)
diff --git a/src/components/common/Navbar/Navbar.tsx b/src/components/common/Navbar/Navbar.tsx
index c214bf17e..2805fb9c8 100644
--- a/src/components/common/Navbar/Navbar.tsx
+++ b/src/components/common/Navbar/Navbar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { memo, useState } from 'react'
 import { Link as LinkGatsby } from 'gatsby'
 import { List as UIList } from '@faststore/ui'
 import CartToggle from 'src/components/cart/CartToggle'
@@ -117,4 +117,4 @@ function Navbar() {
   )
 }
 
-export default Navbar
+export default memo(Navbar)
diff --git a/src/components/product/ProductCard/ProductCard.tsx b/src/components/product/ProductCard/ProductCard.tsx
index 9cf9e8ab6..820808d13 100644
--- a/src/components/product/ProductCard/ProductCard.tsx
+++ b/src/components/product/ProductCard/ProductCard.tsx
@@ -1,16 +1,14 @@
 import { graphql, Link } from 'gatsby'
+import type { ReactNode } from 'react'
 import React, { useMemo, memo } from 'react'
-import Button from 'src/components/ui/Button'
 import { DiscountBadge, Badge } from 'src/components/ui/Badge'
 import Price from 'src/components/ui/Price'
 import AspectRatio from 'src/components/ui/AspectRatio'
 import type { AspectRatioProps } from 'src/components/ui/AspectRatio'
 import { Image } from 'src/components/ui/Image'
-import { useBuyButton } from 'src/sdk/cart/useBuyButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import { useProductLink } from 'src/sdk/product/useProductLink'
 import type { ProductSummary_ProductFragment } from '@generated/graphql'
-import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
 import {
   Card as UICard,
   CardImage as UICardImage,
@@ -28,27 +26,21 @@ interface Props {
   bordered?: boolean
   outOfStock?: boolean
   variant?: Variant
-  showActions?: boolean
   ratio?: AspectRatioProps['ratio']
+  buyButton?: ReactNode
 }
 
 function ProductCard({
   product,
   index,
   variant = 'vertical',
-  showActions = true,
   ratio = '1',
   bordered = false,
   outOfStock = false,
+  buyButton,
   ...otherProps
 }: Props) {
   const {
-    id,
-    sku,
-    gtin,
-    name: variantName,
-    brand,
-    isVariantOf,
     isVariantOf: { name },
     image: [img],
     offers: { lowPrice: spotPrice, offers },
@@ -68,24 +60,9 @@ function ProductCard({
     return lowestPriceOffer
   }, [spotPrice, offers])
 
-  const { listPrice, seller } = offers[selectedOffer]
+  const { listPrice } = offers[selectedOffer]
 
   const linkProps = useProductLink({ product, selectedOffer, index })
-  const buyProps = useBuyButton({
-    id,
-    brand,
-    price: spotPrice,
-    listPrice,
-    seller,
-    quantity: 1,
-    isVariantOf,
-    gtin,
-    itemOffered: {
-      name: variantName,
-      image: [img],
-      sku,
-    },
-  })
 
   return (
     <UICard
@@ -93,7 +70,6 @@ function ProductCard({
       data-card-variant={variant}
       data-card-bordered={bordered}
       data-card-out-of-stock={outOfStock}
-      data-sku={buyProps['data-sku']}
       {...otherProps}
     >
       <UICardImage>
@@ -152,20 +128,7 @@ function ProductCard({
           <DiscountBadge small listPrice={listPrice} spotPrice={spotPrice} />
         )}
       </UICardContent>
-      {showActions && (
-        <UICardActions>
-          <Button
-            {...buyProps}
-            variant="primary"
-            icon={<ShoppingCartIcon size={18} weight="bold" />}
-            iconPosition="left"
-            aria-label="Add to cart"
-            title="Add to cart"
-          >
-            Add
-          </Button>
-        </UICardActions>
-      )}
+      {!!buyButton && <UICardActions>{buyButton}</UICardActions>}
     </UICard>
   )
 }
diff --git a/src/components/product/ProductGrid/ProductGrid.tsx b/src/components/product/ProductGrid/ProductGrid.tsx
index e39650a2b..b96c426f7 100644
--- a/src/components/product/ProductGrid/ProductGrid.tsx
+++ b/src/components/product/ProductGrid/ProductGrid.tsx
@@ -18,7 +18,6 @@ function ProductGrid({ products, page, pageSize }: Props) {
           <ProductCard
             product={product}
             index={pageSize * page + idx + 1}
-            showActions={false}
             bordered
             outOfStock={
               product.offers.offers?.[0].availability !==
diff --git a/src/components/sections/Hero/Hero.tsx b/src/components/sections/Hero/Hero.tsx
index b21544146..08db2afbe 100644
--- a/src/components/sections/Hero/Hero.tsx
+++ b/src/components/sections/Hero/Hero.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import type { ReactNode } from 'react'
 import UIHero, {
   HeroContent,
@@ -75,4 +75,4 @@ const Hero = ({
   )
 }
 
-export default Hero
+export default memo(Hero)
diff --git a/src/components/sections/ProductShelf/ProductShelf.tsx b/src/components/sections/ProductShelf/ProductShelf.tsx
index a97a4889c..db12a007c 100644
--- a/src/components/sections/ProductShelf/ProductShelf.tsx
+++ b/src/components/sections/ProductShelf/ProductShelf.tsx
@@ -14,7 +14,7 @@ function ProductShelf({ products }: ProductShelfProps) {
     <ul data-product-shelf className="grid-content">
       {products.map((product, idx) => (
         <li key={`${product.id}`}>
-          <ProductCard product={product} index={idx + 1} showActions={false} />
+          <ProductCard product={product} index={idx + 1} />
         </li>
       ))}
     </ul>
diff --git a/src/components/sections/ProductTiles/ProductTiles.tsx b/src/components/sections/ProductTiles/ProductTiles.tsx
index 3c0f535a3..7281a95e4 100644
--- a/src/components/sections/ProductTiles/ProductTiles.tsx
+++ b/src/components/sections/ProductTiles/ProductTiles.tsx
@@ -35,7 +35,6 @@ const ProductTiles = ({ products }: TilesProps) => {
             product={product}
             index={idx + 1}
             variant="horizontal"
-            showActions={false}
             ratio={getRatio(idx)}
           />
         </Tile>
diff --git a/src/components/ui/Alert/Alert.tsx b/src/components/ui/Alert/Alert.tsx
index 3ce0ca2e5..2d7faf430 100644
--- a/src/components/ui/Alert/Alert.tsx
+++ b/src/components/ui/Alert/Alert.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode, MouseEvent } from 'react'
-import React from 'react'
+import React, { memo } from 'react'
 import { Alert as UIAlert, Icon as UIIcon } from '@faststore/ui'
 import type { AlertProps } from '@faststore/ui'
 import Button from 'src/components/ui/Button'
@@ -56,4 +56,4 @@ function Alert({
   )
 }
 
-export default Alert
+export default memo(Alert)
diff --git a/src/components/ui/Badge/DiscountBadge.tsx b/src/components/ui/Badge/DiscountBadge.tsx
index 3cfcde77d..729349506 100644
--- a/src/components/ui/Badge/DiscountBadge.tsx
+++ b/src/components/ui/Badge/DiscountBadge.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { useDiscountPercent } from 'src/sdk/product/useDiscountPercent'
 
 import Badge from './Badge'
@@ -44,4 +44,4 @@ const DiscountBadge = ({
   )
 }
 
-export default DiscountBadge
+export default memo(DiscountBadge)
diff --git a/src/components/ui/Breadcrumb/Breadcrumb.tsx b/src/components/ui/Breadcrumb/Breadcrumb.tsx
index 17a5746d0..dde47f0f3 100644
--- a/src/components/ui/Breadcrumb/Breadcrumb.tsx
+++ b/src/components/ui/Breadcrumb/Breadcrumb.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Breadcrumb as UIBreadcrumb } from '@faststore/ui'
 import Link from 'src/components/ui/Link'
 import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
@@ -41,4 +41,4 @@ function Breadcrumb({ breadcrumbList }: BreadcrumbProps) {
   )
 }
 
-export default Breadcrumb
+export default memo(Breadcrumb)
diff --git a/src/components/ui/Breadcrumb/BreadcrumbWrapper.tsx b/src/components/ui/Breadcrumb/BreadcrumbWrapper.tsx
new file mode 100644
index 000000000..a57f22ea8
--- /dev/null
+++ b/src/components/ui/Breadcrumb/BreadcrumbWrapper.tsx
@@ -0,0 +1,21 @@
+import React, { memo } from 'react'
+
+import type { BreadcrumbProps } from '.'
+import Breadcrumb from '.'
+
+interface BreadcrumbWrapperProps
+  extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
+  name: string
+}
+
+const BreadcrumbWrapper = ({
+  breadcrumbList,
+  name,
+}: BreadcrumbWrapperProps) => {
+  const fallback = [{ item: '/', name, position: 1 }]
+  const list = breadcrumbList ?? fallback
+
+  return <Breadcrumb breadcrumbList={list} />
+}
+
+export default memo(BreadcrumbWrapper)
diff --git a/src/components/ui/Breadcrumb/index.tsx b/src/components/ui/Breadcrumb/index.tsx
index b9d7e28f4..1bc8ca8f0 100644
--- a/src/components/ui/Breadcrumb/index.tsx
+++ b/src/components/ui/Breadcrumb/index.tsx
@@ -1,2 +1,3 @@
 export { default } from './Breadcrumb'
+export { default as BreadcrumbWrapper } from './BreadcrumbWrapper'
 export type { BreadcrumbProps } from './Breadcrumb'
diff --git a/src/components/ui/Price/Price.tsx b/src/components/ui/Price/Price.tsx
index 731897023..38626b4d2 100644
--- a/src/components/ui/Price/Price.tsx
+++ b/src/components/ui/Price/Price.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import { Price as UIPrice } from '@faststore/ui'
 import type { PriceProps } from '@faststore/ui'
 
@@ -26,4 +26,4 @@ function Price({ classes, SRText, ...props }: Props) {
   )
 }
 
-export default Price
+export default memo(Price)
diff --git a/src/components/ui/ProductTitle/ProductTitle.tsx b/src/components/ui/ProductTitle/ProductTitle.tsx
index a7172b10a..31ce01146 100644
--- a/src/components/ui/ProductTitle/ProductTitle.tsx
+++ b/src/components/ui/ProductTitle/ProductTitle.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import React from 'react'
+import React, { memo } from 'react'
 
 import './product-title.scss'
 
@@ -35,4 +35,4 @@ function ProductTitle({ title, label, refNumber }: ProductTitleProp) {
   )
 }
 
-export default ProductTitle
+export default memo(ProductTitle)
diff --git a/src/components/ui/QuantitySelector/QuantitySelector.tsx b/src/components/ui/QuantitySelector/QuantitySelector.tsx
index ebee0a16d..2cc62e85b 100644
--- a/src/components/ui/QuantitySelector/QuantitySelector.tsx
+++ b/src/components/ui/QuantitySelector/QuantitySelector.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { memo, useEffect, useState } from 'react'
 import { QuantitySelector as UIQuantitySelector } from '@faststore/ui'
 import { Plus as PlusIcon, Minus as MinusIcon } from 'phosphor-react'
 
@@ -81,4 +81,4 @@ export function QuantitySelector({
   )
 }
 
-export default QuantitySelector
+export default memo(QuantitySelector)
diff --git a/src/hooks/useSearchParams.ts b/src/hooks/useSearchParams.ts
new file mode 100644
index 000000000..797d7397c
--- /dev/null
+++ b/src/hooks/useSearchParams.ts
@@ -0,0 +1,37 @@
+import type { SearchState } from '@faststore/sdk'
+import { parseSearchState } from '@faststore/sdk'
+import type {
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables,
+} from '@generated/graphql'
+import type { PageProps } from 'gatsby'
+import { useMemo } from 'react'
+
+export type Props = PageProps<
+  CollectionPageQueryQuery,
+  CollectionPageQueryQueryVariables
+> & { slug: string }
+
+export const useSearchParams = (props: Props): SearchState => {
+  const {
+    location: { href, pathname },
+    data,
+  } = props
+
+  const selectedFacets = data?.collection?.meta.selectedFacets
+
+  return useMemo(() => {
+    const maybeState = href ? parseSearchState(new URL(href)) : null
+
+    return {
+      page: maybeState?.page ?? 0,
+      base: maybeState?.base ?? pathname,
+      selectedFacets:
+        maybeState && maybeState.selectedFacets.length > 0
+          ? maybeState.selectedFacets
+          : selectedFacets ?? [],
+      term: maybeState?.term ?? null,
+      sort: maybeState?.sort ?? 'score_desc',
+    }
+  }, [href, pathname, selectedFacets])
+}
diff --git a/src/pages/{StoreCollection.slug}.tsx b/src/pages/{StoreCollection.slug}.tsx
index 3cb828dd8..d1d9823a7 100644
--- a/src/pages/{StoreCollection.slug}.tsx
+++ b/src/pages/{StoreCollection.slug}.tsx
@@ -1,21 +1,16 @@
-import { parseSearchState, SearchProvider, useSession } from '@faststore/sdk'
+import { SearchProvider, useSession } from '@faststore/sdk'
 import { graphql } from 'gatsby'
 import { BreadcrumbJsonLd, GatsbySeo } from 'gatsby-plugin-next-seo'
-import React, { useMemo } from 'react'
+import React from 'react'
 import loadable from '@loadable/component'
+import Hero from 'src/components/sections/Hero'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { applySearchState } from 'src/sdk/search/state'
 import { Headphones as HeadphonesIcon } from 'phosphor-react'
-import Breadcrumb from 'src/components/ui/Breadcrumb'
-import Hero from 'src/components/sections/Hero'
+import { BreadcrumbWrapper } from 'src/components/ui/Breadcrumb'
+import type { Props } from 'src/hooks/useSearchParams'
+import { useSearchParams } from 'src/hooks/useSearchParams'
 import ProductListing from 'src/components/sections/ProductListing'
-import type { SearchState } from '@faststore/sdk'
-import type { PageProps } from 'gatsby'
-import type {
-  CollectionPageQueryQuery,
-  CollectionPageQueryQueryVariables,
-} from '@generated/graphql'
-import type { BreadcrumbProps } from 'src/components/ui/Breadcrumb'
 
 import '../styles/pages/product-listing-page.scss'
 
@@ -27,38 +22,13 @@ const ProductShelf = loadable(
   () => import('src/components/sections/ProductShelf')
 )
 
-export type Props = PageProps<
-  CollectionPageQueryQuery,
-  CollectionPageQueryQueryVariables
-> & { slug: string }
-
-const useSearchParams = (props: Props): SearchState => {
-  const {
-    location: { href, pathname },
-    data,
-  } = props
-
-  const selectedFacets = data?.collection?.meta.selectedFacets
-
-  return useMemo(() => {
-    const maybeState = href ? parseSearchState(new URL(href)) : null
-
-    return {
-      page: maybeState?.page ?? 0,
-      base: maybeState?.base ?? pathname,
-      selectedFacets:
-        maybeState && maybeState.selectedFacets.length > 0
-          ? maybeState.selectedFacets
-          : selectedFacets ?? [],
-      term: maybeState?.term ?? null,
-      sort: maybeState?.sort ?? 'score_desc',
-    }
-  }, [href, pathname, selectedFacets])
-}
-
 function Page(props: Props) {
   const {
-    data: { site, collection, allStoreProduct },
+    data: {
+      site,
+      collection,
+      allStoreProduct: { nodes: youMightAlsoLikeProducts },
+    },
     location: { host },
     params: { slug },
   } = props
@@ -74,14 +44,6 @@ function Page(props: Props) {
       ? `https://${host}/${slug}/${pageQuery}`
       : `/${slug}/${pageQuery}`
 
-  const youMightAlsoLikeProducts = useMemo(
-    () => allStoreProduct?.nodes,
-    [allStoreProduct]
-  )
-
-  const haveYouMightAlsoLikeProducts =
-    youMightAlsoLikeProducts && youMightAlsoLikeProducts?.length > 0
-
   return (
     <SearchProvider
       onChange={applySearchState}
@@ -132,7 +94,7 @@ function Page(props: Props) {
 
       <ProductListing title={title} slug={slug} />
 
-      {haveYouMightAlsoLikeProducts && (
+      {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">
@@ -148,18 +110,6 @@ function Page(props: Props) {
   )
 }
 
-interface BreadcrumbWrapperProps
-  extends Partial<Pick<BreadcrumbProps, 'breadcrumbList'>> {
-  name: string
-}
-
-function BreadcrumbWrapper({ breadcrumbList, name }: BreadcrumbWrapperProps) {
-  const fallback = [{ item: '/', name, position: 1 }]
-  const list = breadcrumbList ?? fallback
-
-  return <Breadcrumb breadcrumbList={list} />
-}
-
 /**
  * This query is run during SSG
  * */
diff --git a/src/pages/{StoreProduct.slug}/p.tsx b/src/pages/{StoreProduct.slug}/p.tsx
index f02f59fde..2f4338ef4 100644
--- a/src/pages/{StoreProduct.slug}/p.tsx
+++ b/src/pages/{StoreProduct.slug}/p.tsx
@@ -5,7 +5,7 @@ import {
   GatsbySeo,
   ProductJsonLd,
 } from 'gatsby-plugin-next-seo'
-import React, { useMemo } from 'react'
+import React from 'react'
 import ProductDetails from 'src/components/sections/ProductDetails'
 import type { PageProps } from 'gatsby'
 import type {
@@ -22,7 +22,11 @@ export type Props = PageProps<
 function Page(props: Props) {
   const { locale, currency } = useSession()
   const {
-    data: { product, site, allStoreProduct },
+    data: {
+      product,
+      site,
+      allStoreProduct: { nodes: youMightAlsoLikeProducts },
+    },
     location: { host },
     params: { slug },
   } = props
@@ -38,14 +42,6 @@ function Page(props: Props) {
   const canonical =
     host !== undefined ? `https://${host}/${slug}/p` : `/${slug}/p`
 
-  const youMightAlsoLikeProducts = useMemo(
-    () => allStoreProduct?.nodes,
-    [allStoreProduct]
-  )
-
-  const haveYouMightAlsoLikeProducts =
-    youMightAlsoLikeProducts && youMightAlsoLikeProducts?.length > 0
-
   return (
     <>
       {/* SEO */}
@@ -99,7 +95,7 @@ function Page(props: Props) {
 
       <ProductDetails product={product} />
 
-      {haveYouMightAlsoLikeProducts && (
+      {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">

From 9b222b5ef3f90eacc5ded38ca2d01622a4cc1c33 Mon Sep 17 00:00:00 2001
From: Daniel Zanzini <daniel.zanzini@vtex.com.br>
Date: Mon, 7 Feb 2022 12:41:02 -0300
Subject: [PATCH 8/8] Updates CHANGELOG with 0.1.1

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3aec35138..be8116ecb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Security
 
+## [0.1.1] - 2022-02-07
+
+### Added
+
+- Feat: Style IconButton (#290)
+
+### Changed
+
+- Chore: tweaks search page (#293)
+- Extract UISelect from Sort to its own component (#299)
+- Feat: lazy loading and improvements (CLS) (#300)
+
+### Fixed
+
+- SonarQube warning (#297)
+- General fixes on Beta component (#287)
+- Fix/Adjust inappropriate rerenders (#304)
+
 ## [0.1.0] - 2022-02-01
 
 Version released for the Closed Beta