[PWA-618] Update Venia's header to match the styleguide's app bar (ma…

…gento#2488) * PWA-621: Carry over design tokens from styleguide - copy tokens to `venia-ui` - move index.css to `venia-ui` - update global vars and move to tokens - update custom property name references * PWA-621: Carry over design tokens from styleguide - update serif font fallback value - update @font-face weights in templates - add serif @font-face in templates * PWA-621: Carry over design tokens from styleguide - use absolute paths to import `venia-ui` in `venia-concept` * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-621: Carry over design tokens from styleguide - update existing CSS custom properties to use the new values * PWA-621: Carry over design tokens from styleguide - use functional color notation * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar * PWA-618: Update Venia's header to match the styleguide's app bar Co-authored-by: Anthoula Wojczak <[email protected]> Co-authored-by: Dave Macaulay <[email protected]> Co-authored-by: Devagouda <[email protected]>
vtmillan · Jun 22, 2020 · d5cbe62 · d5cbe62
1 parent f0ad6d8
commit d5cbe62
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 47 deletions.
diff --git a/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/cartTrigger.spec.js.snap b/packages/venia-ui/lib/components/Header/__tests__/__snapshots__/cartTrigger.spec.js.snap
@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Cart counter displays 99+ when items quantity is more than 99 1`] = `
+<button
+  aria-label="Toggle mini cart. You have 100 items in your cart."
+  className="a"
+  onClick={[Function]}
+>
+  <span>
+    <svg
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
+      />
+      <line
+        x1="3"
+        x2="21"
+        y1="6"
+        y2="6"
+      />
+      <path
+        d="M16 10a4 4 0 0 1-8 0"
+      />
+    </svg>
+  </span>
+  <span>
+    99+
+  </span>
+</button>
+`;
+
+exports[`Cart counter holds correct value when cart contains items 1`] = `
+<button
+  aria-label="Toggle mini cart. You have 10 items in your cart."
+  className="a"
+  onClick={[Function]}
+>
+  <span>
+    <svg
+      fill="none"
+      height="24"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      width="24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
+      />
+      <line
+        x1="3"
+        x2="21"
+        y1="6"
+        y2="6"
+      />
+      <path
+        d="M16 10a4 4 0 0 1-8 0"
+      />
+    </svg>
+  </span>
+  <span>
+    10
+  </span>
+</button>
+`;
+
 exports[`Cart icon svg has fill and correct value when cart contains items 1`] = `
 <button
   aria-label="Toggle mini cart. You have 10 items in your cart."
@@ -18,18 +94,17 @@ exports[`Cart icon svg has fill and correct value when cart contains items 1`] =
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="9"
-        cy="21"
-        r="1"
+      <path
+        d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
       />
-      <circle
-        cx="20"
-        cy="21"
-        r="1"
+      <line
+        x1="3"
+        x2="21"
+        y1="6"
+        y2="6"
       />
       <path
-        d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"
+        d="M16 10a4 4 0 0 1-8 0"
       />
     </svg>
   </span>
@@ -39,7 +114,7 @@ exports[`Cart icon svg has fill and correct value when cart contains items 1`] =
 </button>
 `;
 
-exports[`Cart icon svg has no fill when cart is empty 1`] = `
+exports[`No counter when cart is empty 1`] = `
 <button
   aria-label="Toggle mini cart. You have 0 items in your cart."
   className="a"
@@ -57,18 +132,17 @@ exports[`Cart icon svg has no fill when cart is empty 1`] = `
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="9"
-        cy="21"
-        r="1"
+      <path
+        d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"
       />
-      <circle
-        cx="20"
-        cy="21"
-        r="1"
+      <line
+        x1="3"
+        x2="21"
+        y1="6"
+        y2="6"
       />
       <path
-        d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"
+        d="M16 10a4 4 0 0 1-8 0"
       />
     </svg>
   </span>

diff --git a/packages/venia-ui/lib/components/Header/__tests__/cartTrigger.spec.js b/packages/venia-ui/lib/components/Header/__tests__/cartTrigger.spec.js
@@ -44,7 +44,7 @@ const classes = {
     root: 'a'
 };
 
-test('Cart icon svg has no fill when cart is empty', () => {
+test('No counter when cart is empty', () => {
     const component = createTestInstance(<CartTrigger classes={classes} />);
 
     expect(component.toJSON()).toMatchSnapshot();
@@ -57,3 +57,11 @@ test('Cart icon svg has fill and correct value when cart contains items', () =>
 
     expect(component.toJSON()).toMatchSnapshot();
 });
+
+test('Cart counter displays 99+ when items quantity is more than 99', () => {
+    useQuery.mockReturnValueOnce({ data: { cart: { total_quantity: 100 } } });
+
+    const component = createTestInstance(<CartTrigger classes={classes} />);
+
+    expect(component.toJSON()).toMatchSnapshot();
+});
diff --git a/packages/venia-ui/lib/components/Header/cartTrigger.css b/packages/venia-ui/lib/components/Header/cartTrigger.css
@@ -2,18 +2,24 @@
     composes: root from '../clickable.css';
     height: 3rem;
     min-width: 3rem;
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-content: center;
+    justify-content: center;
 }
 
 .counter {
+    top: 0.375rem;
+    position: absolute;
+    left: 1.5rem;
     font-weight: 600;
-    margin-left: 0.25rem;
-}
-
-.icon_empty {
-    composes: root from '../Icon/icon.css';
-}
-
-.icon_filled {
-    composes: root from '../Icon/icon.css';
-    --fill: rgb(var(--venia-global-color-text));
+    box-sizing: border-box;
+    padding: 0 0.25rem;
+    background-color: rgb(var(--venia-brand-color-1-700));
+    border-radius: 100px;
+    color: rgb(var(--venia-global-color-background));
+    line-height: 1.25rem;
+    min-width: 1.25rem;
+    font-size: 0.8125rem;
 }
diff --git a/packages/venia-ui/lib/components/Header/cartTrigger.js b/packages/venia-ui/lib/components/Header/cartTrigger.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shape, string } from 'prop-types';
-import { ShoppingCart as ShoppingCartIcon } from 'react-feather';
+import { ShoppingBag as ShoppingCartIcon } from 'react-feather';
 
 import { useCartTrigger } from '@magento/peregrine/lib/talons/Header/useCartTrigger';
 
@@ -23,13 +23,11 @@ const CartTrigger = props => {
     });
 
     const classes = mergeClasses(defaultClasses, props.classes);
-    const isFilled = itemCount > 0;
-    const iconClass = isFilled ? classes.icon_filled : classes.icon_empty;
-    const iconClasses = { root: iconClass };
     const buttonAriaLabel = `Toggle mini cart. You have ${itemCount} items in your cart.`;
+    const itemCountDisplay = itemCount > 99 ? '99+' : itemCount;
 
     const itemCounter = itemCount ? (
-        <span className={classes.counter}>{itemCount}</span>
+        <span className={classes.counter}>{itemCountDisplay}</span>
     ) : null;
 
     return (
@@ -38,7 +36,7 @@ const CartTrigger = props => {
             className={classes.root}
             onClick={handleClick}
         >
-            <Icon classes={iconClasses} src={ShoppingCartIcon} />
+            <Icon src={ShoppingCartIcon} />
             {itemCounter}
         </button>
     );
@@ -48,8 +46,6 @@ export default CartTrigger;
 
 CartTrigger.propTypes = {
     classes: shape({
-        icon_empty: string,
-        icon_filled: string,
         root: string
     })
 };
diff --git a/packages/venia-ui/lib/components/Header/header.css b/packages/venia-ui/lib/components/Header/header.css
@@ -32,6 +32,15 @@
     padding: 0 1rem;
 }
 
+@media (min-width: 641px) {
+    .toolbar {
+        grid-template-areas: 'primary title secondary';
+        grid-template-columns: auto auto 1fr;
+        min-height: 5rem;
+        padding: 0 1rem;
+    }
+}
+
 .logo {
     grid-area: title;
 }
@@ -46,10 +55,16 @@
 
 .secondaryActions {
     grid-area: secondary;
-    width: 100%;
+    width: max-content;
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    justify-items: end;
+    grid-auto-flow: column;
+    justify-self: end;
+}
+
+@media (min-width: 641px) {
+    .secondaryActions {
+        column-gap: 1.25rem;
+    }
 }
 
 .searchFallback {

diff --git a/packages/venia-ui/lib/components/Header/header.js b/packages/venia-ui/lib/components/Header/header.js
@@ -50,8 +50,8 @@ const Header = props => {
             <div className={classes.toolbar}>
                 <div className={classes.primaryActions}>
                     <NavTrigger />
-                    {pageLoadingIndicator}
                 </div>
+                {pageLoadingIndicator}
                 <OnlineIndicator
                     hasBeenOffline={hasBeenOffline}
                     isOnline={isOnline}

diff --git a/packages/venia-ui/lib/components/Header/onlineIndicator.css b/packages/venia-ui/lib/components/Header/onlineIndicator.css
@@ -1,8 +1,17 @@
 .root {
+    --stroke: rgb(var(--venia-global-color-text));
     align-items: center;
     display: flex;
     grid-area: primary;
     height: 3rem;
     margin-left: 4.5rem;
     width: 3rem;
 }
+
+@media (min-width: 641px) {
+    .root {
+        justify-self: start;
+        margin-left: 2.5rem;
+        grid-area: secondary;
+    }
+}
diff --git a/packages/venia-ui/lib/components/Header/searchTrigger.css b/packages/venia-ui/lib/components/Header/searchTrigger.css
@@ -9,5 +9,20 @@
 
 .open {
     composes: root;
-    color: rgb(var(--venia-global-color-teal));
+    color: rgb(var(--venia-brand-color-1-400));
+}
+
+.label {
+    display: none;
+}
+
+@media (min-width: 641px) {
+    .root {
+        width: auto;
+    }
+
+    .label {
+        display: initial;
+        margin-inline-start: 0.25rem;
+    }
 }
diff --git a/packages/venia-ui/lib/components/Header/searchTrigger.js b/packages/venia-ui/lib/components/Header/searchTrigger.js
@@ -24,6 +24,7 @@ const SearchTrigger = props => {
             onClick={handleClick}
         >
             <Icon src={SearchIcon} />
+            <span className={classes.label}>{'Search'}</span>
         </button>
     );
 };

diff --git a/packages/venia-ui/lib/components/Icon/icon.css b/packages/venia-ui/lib/components/Icon/icon.css
@@ -10,3 +10,10 @@
     fill: var(--fill, none);
     stroke: var(--stroke);
 }
+
+@media (min-width: 641px) {
+    .icon_desktop {
+        width: 28px;
+        height: 28px;
+    }
+}
diff --git a/packages/venia-ui/lib/components/Logo/VeniaLogo.svg b/packages/venia-ui/lib/components/Logo/VeniaLogo.svg
diff --git a/packages/venia-ui/lib/components/Logo/logo.js b/packages/venia-ui/lib/components/Logo/logo.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { mergeClasses } from '../../classify';
 import Image from '../Image';
-import logo from './logo.svg';
+import logo from './VeniaLogo.svg';
 
 /**
  * A component that renders a logo in the header.
@@ -49,8 +49,8 @@ Logo.propTypes = {
 };
 
 Logo.defaultProps = {
-    height: 24,
-    width: 48
+    height: 18,
+    width: 102
 };
 
 export default Logo;
diff --git a/packages/venia-ui/lib/components/PageLoadingIndicator/indicator.css b/packages/venia-ui/lib/components/PageLoadingIndicator/indicator.css
@@ -1,10 +1,20 @@
 .root {
     justify-self: start;
     animation: spin 1920ms linear infinite;
+    grid-area: primary;
+    margin-left: 3rem;
 }
 
 .indicator {
-    --stroke: rgb(var(--venia-text-hint));
+    --stroke: rgb(var(--venia-global-color-text-hint));
+}
+
+@media (min-width: 641px) {
+    .root {
+        justify-self: start;
+        margin-left: 0.5rem;
+        grid-area: secondary;
+    }
 }
 
 @keyframes spin {

diff --git a/packages/venia-ui/venia-static/favicon.ico b/packages/venia-ui/venia-static/favicon.ico