Merge branch 'master' into fix/facets-not-being-selected

CHANGELOG.md

@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `SuggestionProductCard` component.
 - `EmptyState` component.
 - `EmptyState` at the `ProductGallery` section.
+- `IconSVG` component to load SVG Icons.
 
 ### Changed
 
@@ -48,6 +49,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - API style redirects from `/_v/private/graphql` since they have no effect
 - Display box from `<ProductCard/>` component
 - `useTotalCount` hook
+- Phosphor-react library
 
 ### Fixed
 

README.md

@@ -340,6 +340,50 @@ The aforementioned guide works well for UI components. However, components like
    )
 ```
 
+### Managing SVG Icons
+Icons help build web pages by illustrating concepts and improving website navigation. However, using icons can decrease the page's performance. One option to avoid the decrease of the page's performance is to use SVGs from a single SVG file, located in `/static/icons/icons.svg`, and load them with the `IconSVG` component.
+
+In the following steps, learn how to add and use a new SVG icon and avoid decreasing page performance while using an icon.
+
+> ⚠️ Warning
+>
+> This is a recommendation while using icons on a web page. Evaluate if this fits in your project.
+
+#### Adding an SVG icon
+1. In the SVG file, change the `svg` tag to `symbol`.
+2. Add an `id` to the symbol. Remember to use an unique `id` and do not replicate it.
+3. Remove unnecessary HTML/SVG properties to allow you to style and decrease the final file size, such as `fill`, `stroke-width`, `width`, `height`, and `color`.
+
+An example adding Bell icon:
+
+```svg
+<svg style="display:none">
+<symbol id="Bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><path d="M56.2,104a71.9,71.9,0,0,1,72.3-72c39.6.3,71.3,33.2,71.3,72.9V112c0,35.8,7.5,56.6,14.1,68a8,8,0,0,1-6.9,12H49a8,8,0,0,1-6.9-12c6.6-11.4,14.1-32.2,14.1-68Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M96,192v8a32,32,0,0,0,64,0v-8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></symbol>
+</svg>
+```
+
+#### Using an SVG icon
+
+1. Get the icon's `id` that you created in the SVG icon file.
+2. Add the `id` in the React component that you desire to use the SVG icon. For example
+
+```tsx
+// src/components/ui/MyIconButton/MyIconButton.tsx
+import React from 'react'
+import IconSVG from 'src/components/common/IconSVG' // this path can be outdated.
+
+function IconButton() {
+  return (
+    <button>
+      <IconSVG name="<<symbol_id>>" weight="thin" />
+    </button>
+  )
+}
+
+export default IconButton
+```
+This project uses SVGs from [Phosphor icons](https://phosphoricons.com/).
+
 ## 🖊️ Styling Components
 
 Our customized themes are based on [Design Tokens](https://css-tricks.com/what-are-design-tokens/) using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) or a CSS class for each token. Today, we have the following files in the `src/styles` folder:

package.json

@@ -47,7 +47,6 @@
     "gatsby-plugin-sass": "^5.3.0",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.26",
     "include-media": "^1.4.10",
-    "phosphor-react": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-helmet-async": "^1.2.2",

src/components/cart/CartItem/CartItem.tsx

@@ -1,5 +1,4 @@
 import { Card, CardActions, CardContent, CardImage } from '@faststore/ui'
-import { XCircle as XCircleIcon } from 'phosphor-react'
 import React from 'react'
 import Button from 'src/components/ui/Button'
 import { Image } from 'src/components/ui/Image'
@@ -9,6 +8,7 @@ import { useCart } from 'src/sdk/cart/useCart'
 import { useRemoveButton } from 'src/sdk/cart/useRemoveButton'
 import { useFormattedPrice } from 'src/sdk/product/useFormattedPrice'
 import type { CartItem as ICartItem } from 'src/sdk/cart/validate'
+import IconSVG from 'src/components/common/IconSVG'
 
 import './cart-item.scss'
 
@@ -72,7 +72,7 @@ function CartItem({ item }: Props) {
       <CardActions>
         <Button
           variant="tertiary"
-          icon={<XCircleIcon size={18} />}
+          icon={<IconSVG name="XCircle" width={18} height={18} />}
           iconPosition="left"
           {...btnProps}
         >

src/components/cart/CartSidebar/CartSidebar.tsx

@@ -1,9 +1,4 @@
 import { List } from '@faststore/ui'
-import {
-  ArrowRight as ArrowRightIcon,
-  Truck as TruckIcon,
-  X as XIcon,
-} from 'phosphor-react'
 import React, { useRef } from 'react'
 import Alert from 'src/components/ui/Alert'
 import { Badge } from 'src/components/ui/Badge'
@@ -13,6 +8,7 @@ import SlideOver from 'src/components/ui/SlideOver'
 import { useCart } from 'src/sdk/cart/useCart'
 import { useCheckoutButton } from 'src/sdk/cart/useCheckoutButton'
 import { useUI } from 'src/sdk/ui'
+import IconSVG from 'src/components/common/IconSVG'
 
 import CartItem from '../CartItem'
 import EmptyCart from '../EmptyCart'
@@ -51,11 +47,13 @@ function CartSidebar() {
         <IconButton
           data-testid="cart-sidebar-button-close"
           aria-label="Close Cart"
-          icon={<XIcon size={32} />}
+          icon={<IconSVG name="X" width={32} height={32} />}
           onClick={() => dismissTransition.current?.()}
         />
       </header>
-      <Alert icon={<TruckIcon size={24} />}>Free shiping starts at $300</Alert>
+      <Alert icon={<IconSVG name="Truck" width={24} height={24} />}>
+        Free shiping starts at $300
+      </Alert>
 
       {isEmpty ? (
         <EmptyCart onDismiss={() => dismissTransition.current?.()} />
@@ -77,7 +75,11 @@ function CartSidebar() {
               checkoutButton={
                 <Button
                   variant="primary"
-                  icon={!isValidating && <ArrowRightIcon size={18} />}
+                  icon={
+                    !isValidating && (
+                      <IconSVG name="ArrowRight" width={18} height={18} />
+                    )
+                  }
                   iconPosition="right"
                   {...btnProps}
                 >

src/components/cart/CartToggle/CartToggle.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import IconButton from 'src/components/ui/IconButton'
 import { useCartToggleButton } from 'src/sdk/cart/useCartToggleButton'
-import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
+import IconSVG from 'src/components/common/IconSVG'
 
 import './cart-toggle.scss'
 
@@ -13,7 +13,7 @@ function CartToggle() {
       {...btnProps}
       className="cart-toggle"
       aria-label={`Cart with ${btnProps['data-items']} items`}
-      icon={<ShoppingCartIcon size={32} />}
+      icon={<IconSVG name="ShoppingCart" width={32} height={32} />}
     />
   )
 }

src/components/cart/EmptyCart/EmptyCart.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { ShoppingCart as ShoppingCartIcon } from 'phosphor-react'
 import Button from 'src/components/ui/Button'
 import EmptyState from 'src/components/common/EmptyState'
+import IconSVG from 'src/components/common/IconSVG'
 
 interface Props {
   /**
@@ -14,7 +14,7 @@ function EmptyCart({ onDismiss }: Props) {
   return (
     <EmptyState>
       <header data-empty-cart-title>
-        <ShoppingCartIcon size="56" weight="thin" />
+        <IconSVG name="ShoppingCart" width={56} height={56} weight="thin" />
         <p>Your Cart is empty</p>
       </header>
       <Button onClick={onDismiss} variant="secondary">

src/components/common/Alert/Alert.tsx

@@ -1,8 +1,8 @@
-import { BellRinging as BellRingingIcon } from 'phosphor-react'
 import React, { useCallback, useState } from 'react'
 import UIAlert from 'src/components/ui/Alert'
 import { mark } from 'src/sdk/tests/mark'
 import type { PropsWithChildren } from 'react'
+import IconSVG from 'src/components/common/IconSVG'
 
 function Alert({ children }: PropsWithChildren<unknown>) {
   const [displayAlert, setDisplayAlert] = useState(true)
@@ -18,7 +18,7 @@ function Alert({ children }: PropsWithChildren<unknown>) {
 
   return (
     <UIAlert
-      icon={<BellRingingIcon size={24} />}
+      icon={<IconSVG name="BellRinging" width={24} height={24} />}
       dismissible
       onClose={onAlertClose}
     >

src/components/common/Footer/footer.scss

@@ -2,7 +2,10 @@
 
 .footer {
   background-color: var(--bg-neutral-light);
-  .incentives { padding-top: 0; }
+
+  .incentives {
+    padding-top: 0;
+  }
 
   content-visibility: auto;
   contain-intrinsic-size: rem(860px);
@@ -53,7 +56,10 @@
     align-items: center;
     justify-content: space-between;
     text-align: center;
-    &::before { padding-bottom: var(--space-4); }
+
+    &::before {
+      padding-bottom: var(--space-4);
+    }
   }
 
   @include media(">=notebook") {
@@ -72,7 +78,9 @@
   }
 
   [data-store-icon] {
-    @include media(">=notebook") { grid-column: span 2; }
+    @include media(">=notebook") {
+      grid-column: span 2;
+    }
   }
 
   [data-payment-methods-flags] {
@@ -91,7 +99,9 @@
       justify-content: space-between;
       row-gap: var(--space-1);
 
-      @include media("<notebook") { column-gap: var(--grid-gap-0); }
+      @include media("<notebook") {
+        column-gap: var(--grid-gap-0);
+      }
     }
   }
 }
@@ -104,7 +114,9 @@
     padding: var(--space-4) 0 var(--space-3);
   }
 
-  @include media(">=notebook") { grid-column: 11 / span 2; }
+  @include media(">=notebook") {
+    grid-column: 11 / span 2;
+  }
 
   .title-sub-subsection {
     text-align: center;
@@ -139,7 +151,10 @@
   p + p {
     margin: var(--space-2) auto;
   }
-  address { font-style: normal; }
+
+  address {
+    font-style: normal;
+  }
 
   @include media(">=notebook") {
     grid-column: span 6;
@@ -152,19 +167,38 @@
 }
 
 .footer__links {
-  [data-store-list] { margin-bottom: var(--space-2); }
+  [data-store-list] {
+    margin-bottom: var(--space-2);
+  }
 
   [data-store-link] {
     display: inline-block;
     padding-left: 0;
   }
 
-  @include media(">=notebook") { grid-column: span 8; }
+  @include media(">=notebook") {
+    grid-column: span 8;
+  }
+
+  [data-store-icon] [data-icon] {
+    display: none;
+  }
+
+  [data-store-icon] [data-icon="expanded"] {
+    display: initial;
+  }
+
+  [data-store-icon] [data-icon="collapsed"] {
+    display: initial;
+  }
 }
 
 .footer__links-columns {
   display: grid;
   grid-gap: var(--grid-gap-1);
   grid-template-columns: repeat(4, 1fr);
-  .title-sub-subsection { margin-bottom: var(--space-1); }
+
+  .title-sub-subsection {
+    margin-bottom: var(--space-1);
+  }
 }

src/components/common/IconSVG/IconSVG.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import type { SVGProps } from 'react'
+
+type IconWeight = 'thin' | 'light' | 'regular' | 'bold'
+
+const mapWeightToValue: Record<IconWeight, number> = {
+  bold: 24,
+  regular: 16,
+  light: 12,
+  thin: 8,
+}
+
+interface Props extends SVGProps<SVGSVGElement> {
+  /**
+   * Symbol id from element to render. Take a look at `/static/icons/icons.svg`.
+   *
+   * Example: <IconSVG name="Bell" />
+   */
+  name: string
+  /**
+   * SVG weight.
+   *
+   * @default 'regular'
+   */
+  weight?: IconWeight
+}
+
+function IconSVG({ name, weight = 'regular', ...otherProps }: Props) {
+  return (
+    <svg {...otherProps} strokeWidth={mapWeightToValue[weight]}>
+      <use href={`/icons/icons.svg#${name}`} />
+    </svg>
+  )
+}
+
+export default IconSVG

src/components/common/IconSVG/index.tsx

@@ -0,0 +1 @@
+export { default } from './IconSVG'

src/components/common/Navbar/Navbar.tsx

@@ -7,18 +7,13 @@ import CartToggle from 'src/components/cart/CartToggle'
 import IconButton from 'src/components/ui/IconButton'
 import Link from 'src/components/ui/Link'
 import Logo from 'src/components/ui/Logo'
-import {
-  CaretLeft as CaretLeftIcon,
-  List as ListIcon,
-  X as XIcon,
-} from 'phosphor-react'
 import SignInLink from 'src/components/ui/SignInLink'
 import SlideOver from 'src/components/ui/SlideOver'
 import { useStoreCollection } from 'src/hooks/useAllCollections'
 import { mark } from 'src/sdk/tests/mark'
 import PostalCodeInput from 'src/components/common/PostalCode'
-
-import SearchInput from '../SearchInput'
+import IconSVG from 'src/components/common/IconSVG'
+import SearchInput from 'src/components/common/SearchInput'
 
 import './navbar.scss'
 
@@ -67,7 +62,7 @@ function Navbar() {
               <IconButton
                 classes="navbar__menu"
                 aria-label="Open Menu"
-                icon={<ListIcon size={32} />}
+                icon={<IconSVG name="List" width={32} height={32} />}
                 onClick={() => setShowMenu(true)}
               />
               <LinkGatsby
@@ -89,7 +84,7 @@ function Navbar() {
               <IconButton
                 classes="navbar__collapse"
                 aria-label="Collapse search bar"
-                icon={<CaretLeftIcon size={32} />}
+                icon={<IconSVG name="CaretLeft" width={32} height={32} />}
                 onClick={() => setSearchExpanded(false)}
               />
             )}
@@ -133,7 +128,7 @@ function Navbar() {
             <IconButton
               classes="navbar__button"
               aria-label="Close Menu"
-              icon={<XIcon size={32} />}
+              icon={<IconSVG name="X" width={32} height={32} />}
               onClick={() => dismissTransition.current?.()}
             />
           </header>