Feature/corrections-home-header-footer

cypress/integration/performance.test.js

@@ -47,13 +47,13 @@ describe('React rendering performance', () => {
     }
   })
 
-  it('Renders Alert component once', () => {
-    const mark = 'Alert'
+  // it('Renders Alert component once', () => {
+  //   const mark = 'Alert'
 
-    for (const path of paths) {
-      testMark(path, mark)
-    }
-  })
+  //   for (const path of paths) {
+  //     testMark(path, mark)
+  //   }
+  // })
 
   it('Renders Page component once', () => {
     const mark = 'Page'

package.json

@@ -31,6 +31,7 @@
     "@faststore/api": "^1.6.26",
     "@faststore/sdk": "^1.6.26",
     "@faststore/ui": "^1.6.26",
+    "@reach/router": "^1.3.4",
     "@vtex/gatsby-plugin-nginx": "^1.6.26",
     "@vtex/gatsby-source-cms": "^0.2.4",
     "@vtex/gatsby-source-store": "^1.6.26",
@@ -103,4 +104,4 @@
       "stylelint --fix"
     ]
   }
-}
+}

src/Layout.tsx

@@ -1,30 +1,35 @@
-import React, { lazy, Suspense } from 'react'
-import Alert from 'src/components/common/Alert'
+import React, { lazy, Suspense, useEffect } from 'react'
 import Footer from 'src/components/common/Footer'
 import Navbar from 'src/components/common/Navbar'
-import Toast from 'src/components/common/Toast'
 import { useUI } from 'src/sdk/ui'
 import type { PropsWithChildren } from 'react'
+import { useLocation } from '@reach/router'
 
 const CartSidebar = lazy(() => import('src/components/cart/CartSidebar'))
 
 function Layout({ children }: PropsWithChildren<unknown>) {
   const { displayMinicart } = useUI()
 
+  const { pathname } = useLocation()
+
+  useEffect(() => {
+    if (pathname === '/') {
+      document.querySelector('body')?.classList.remove('notHome')
+      document.querySelector('body')?.classList.add('home')
+    } else {
+      document.querySelector('body')?.classList.remove('home')
+      document.querySelector('body')?.classList.add('notHome')
+    }
+  })
+
   return (
     <div id="layout">
-      <Alert>
-        Get 10% off today:&nbsp;<span>NEW10</span>
-      </Alert>
-
       <Navbar />
 
       <main>{children}</main>
 
       <Footer />
 
-      <Toast />
-
       {displayMinicart && (
         <Suspense fallback={null}>
           <CartSidebar />

src/components/cart/CartItem/CartItem.tsx

@@ -1,7 +1,6 @@
 import { Card, CardActions, CardContent, CardImage } from '@faststore/ui'
 import React from 'react'
 import Button from 'src/components/ui/Button'
-import Icon from 'src/components/ui/Icon'
 import { Image } from 'src/components/ui/Image'
 import Price from 'src/components/ui/Price'
 import QuantitySelector from 'src/components/ui/QuantitySelector'
@@ -30,8 +29,8 @@ function CartItem({ item }: Props) {
           <Image
             src={item.itemOffered.image[0].url}
             alt={item.itemOffered.image[0].alternateName}
-            width={72}
-            height={72}
+            width={95}
+            height={95}
           />
         </CardImage>
         <div data-cart-item-summary>
@@ -59,23 +58,17 @@ function CartItem({ item }: Props) {
             />
           </span>
         </div>
+        <CardActions>
+          <Button variant="tertiary" iconPosition="left" {...btnProps}>
+            remover
+          </Button>
+          <QuantitySelector
+            min={1}
+            initial={item.quantity}
+            onChange={(quantity) => updateItemQuantity(item.id, quantity)}
+          />
+        </CardActions>
       </CardContent>
-
-      <CardActions>
-        <Button
-          variant="tertiary"
-          icon={<Icon name="XCircle" width={18} height={18} />}
-          iconPosition="left"
-          {...btnProps}
-        >
-          Remove
-        </Button>
-        <QuantitySelector
-          min={1}
-          initial={item.quantity}
-          onChange={(quantity) => updateItemQuantity(item.id, quantity)}
-        />
-      </CardActions>
     </Card>
   )
 }

src/components/cart/CartItem/cart-item.scss

@@ -1,16 +1,16 @@
 @import "src/styles/scaffold";
 
 .cart-item {
-  padding: var(--space-3);
-  background-color: var(--bg-neutral-lightest);
-  border: var(--border-width-0) solid var(--color-border-display);
-  border-radius: var(--border-radius-default);
+  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-3);
+  border-bottom: var(--border-width-0) solid var(--color-gray-transparent);
+
+  @include media("<notebook") {
+    padding: 27px 33px 27px 21px;
+  }
 
   [data-card-content] {
-    display: grid;
-    grid-template-columns: rem(72px) repeat(4, 1fr);
+    display: flex;
     align-items: center;
-    column-gap: var(--grid-gap-0);
   }
 
   [data-gatsby-image-wrapper] {
@@ -22,26 +22,57 @@
   [data-cart-item-summary] {
     flex-direction: column;
     grid-column: 2 / span 4;
+    max-width: 171px;
+    margin: 0 12px 0 22px;
+
+    @include media("<notebook") {
+      margin: 0 6px 0 12px;
+    }
   }
 
   [data-cart-item-title] {
-    margin-bottom: var(--space-0);
-    color: inherit;
+    // margin-bottom: var(--space-0);
+    margin-bottom: 31px;
+    font-size: 14px;
     line-height: 1.2;
+    color: #333056;
     text-decoration: none;
     outline: none;
 
     @include truncate-title;
   }
 
+  [data-card-image] {
+    display: block;
+    width: 95px;
+  }
+
   [data-cart-item-prices] {
     display: flex;
     align-items: baseline;
   }
 
   [data-card-actions] {
     display: flex;
+    flex-direction: column;
     justify-content: space-between;
-    margin-top: var(--space-3);
+
+    button[data-testid="remove-from-cart-button"] {
+      width: auto;
+      height: auto;
+      margin-bottom: 26px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: #333056;
+      text-decoration-line: underline;
+      letter-spacing: 0.01em;
+      background-color: transparent;
+      border: 0;
+    }
+  }
+
+  [data-store-quantity-selector] {
+    width: 103px;
   }
 }

src/components/cart/CartSidebar/CartSidebar.tsx

@@ -1,6 +1,5 @@
 import { List } from '@faststore/ui'
 import React, { useRef } from 'react'
-import Alert from 'src/components/ui/Alert'
 import { Badge } from 'src/components/ui/Badge'
 import Button from 'src/components/ui/Button'
 import Icon from 'src/components/ui/Icon'
@@ -37,22 +36,22 @@ function CartSidebar() {
     >
       <header data-testid="cart-sidebar">
         <div className="cart-sidebar__title">
-          <p className="title-display">Your Cart</p>
+          <IconButton
+            aria-label="Cart title"
+            icon={<Icon name="ShoppingCart" width={25} height={25} />}
+          />
+          <p className="title-display">Seu carrinho</p>
           <Badge variant="info" small>
             {totalItems}
           </Badge>
         </div>
         <IconButton
           data-testid="cart-sidebar-button-close"
           aria-label="Close Cart"
-          icon={<Icon name="X" width={32} height={32} />}
+          icon={<Icon name="X" width={35} height={35} />}
           onClick={() => dismissTransition.current?.()}
         />
       </header>
-      <Alert icon={<Icon name="Truck" width={24} height={24} />}>
-        Free shipping starts at $300
-      </Alert>
-
       {isEmpty ? (
         <EmptyCart onDismiss={() => dismissTransition.current?.()} />
       ) : (
@@ -81,10 +80,16 @@ function CartSidebar() {
                   iconPosition="right"
                   {...btnProps}
                 >
-                  {isValidating ? 'Loading...' : 'Checkout'}
+                  {isValidating ? 'Loading...' : 'finalizar o pedido'}
                 </Button>
               }
             />
+            <IconButton
+              data-testid="cart-sidebar-button-close"
+              aria-label="continuar comprando"
+              icon={<Icon name="X" width={35} height={35} />}
+              onClick={() => dismissTransition.current?.()}
+            />
           </footer>
         </>
       )}

src/components/cart/CartSidebar/cart-sidebar.scss

@@ -3,38 +3,81 @@
   flex-direction: column;
   height: 100%;
   overflow: auto;
-  background-color: var(--bg-neutral-light);
+  background-color: rgb(255 255 255 / 80%);
 
   > header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--space-2) var(--page-padding-phone) var(--space-2);
-    background-color: var(--bg-neutral-lightest);
+    padding: var(--space-5) var(--page-padding-phone) var(--space-5);
+    color: var(--color-primary-4);
+    background-color: var(--color-white-transparent-9);
+
+    @include media("<notebook") {
+      padding: 29px 25px;
+    }
 
     > [data-store-icon-button] {
       &:last-of-type {
         margin-right: calc(-1 * var(--space-1));
+        color: var(--color-primary-4);
       }
     }
   }
 
+  .empty-state[data-empty-state] {
+    button {
+      color: var(--color-theme-2);
+      cursor: pointer;
+      border-color: var(--color-theme-2);
+    }
+  }
+
   .cart-sidebar__title {
     display: flex;
     align-items: center;
 
+    button {
+      color: var(--color-theme-3);
+    }
+
     p {
       margin-right: var(--space-2);
+      font-size: var(--text-size-4);
+      font-weight: 500;
       line-height: 1.35;
+      color: var(--color-theme-3);
+    }
+
+    [data-store-badge][data-store-badge="small"] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: 27px;
+      padding: 2px 6px;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 15px;
+      background: #de68d1;
+      border-radius: 5px;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
+
+      &::after {
+        content: attr(data-items);
+      }
     }
   }
 
   > [data-store-list] {
     display: flex;
     flex-direction: column;
-    padding: var(--page-padding-phone);
-    overflow: auto;
     row-gap: var(--space-2);
+    padding: 0;
+    margin: 10px 7px 0 0;
+    overflow: auto;
+    &::-webkit-scrollbar { width: 10px; }
+    &::-webkit-scrollbar-track { background: rgb(255 255 255 / 20%); }
+    &::-webkit-scrollbar-thumb { background-color: #fbfbfb; }
   }
 
   > footer {
@@ -45,5 +88,20 @@
     [data-store-button] {
       width: 100%;
     }
+
+    [aria-label="continuar comprando"] {
+      svg {
+        display: none;
+      }
+
+      &::after {
+        display: block;
+        margin: 0 auto 22px;
+        font-size: 14px;
+        line-height: 17px;
+        color: var(--color-primary-4);
+        content: "continuar comprando";
+      }
+    }
   }
 }

src/components/cart/CartToggle/CartToggle.tsx

@@ -11,7 +11,7 @@ function CartToggle() {
       {...btnProps}
       className="cart-toggle"
       aria-label={`Cart with ${btnProps['data-items']} items`}
-      icon={<Icon name="ShoppingCart" width={32} height={32} />}
+      icon={<Icon name="ShoppingCart" width={17} height={17} />}
     />
   )
 }