Refactor header components and add talons

packages/peregrine/lib/talons/Header/useCartTrigger.js

@@ -0,0 +1,20 @@
+import { useCallback, useEffect } from 'react';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
+
+export const useCartTrigger = () => {
+    const [{ details }, { getCartDetails, toggleCart }] = useCartContext();
+    const { items_qty: itemCount } = details;
+
+    useEffect(() => {
+        getCartDetails();
+    }, [getCartDetails]);
+
+    const handleClick = useCallback(() => {
+        toggleCart();
+    }, [toggleCart]);
+
+    return {
+        handleClick,
+        itemCount
+    };
+};

packages/peregrine/lib/talons/Header/useHeader.js

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+export const useHeader = () => {
+    const [
+        { hasBeenOffline, isOnline, searchOpen },
+        { toggleSearch }
+    ] = useAppContext();
+
+    const handleSearchTriggerClick = useCallback(() => {
+        toggleSearch();
+    }, [toggleSearch]);
+
+    return {
+        handleSearchTriggerClick,
+        hasBeenOffline,
+        isOnline,
+        searchOpen
+    };
+};

packages/peregrine/lib/talons/Header/useNavigationTrigger.js

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+import { useAppContext } from '@magento/peregrine/lib/context/app';
+
+export const useNavigationTrigger = () => {
+    const [, { toggleDrawer }] = useAppContext();
+
+    const handleOpenNavigation = useCallback(() => {
+        toggleDrawer('nav');
+    }, [toggleDrawer]);
+
+    return {
+        handleOpenNavigation
+    };
+};

packages/peregrine/lib/talons/Header/useSearchTrigger.js

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+export const useSearchTrigger = props => {
+    const { onClick } = props;
+    const handleClick = useCallback(() => {
+        onClick();
+    }, [onClick]);
+    return {
+        handleClick
+    };
+};

packages/venia-ui/lib/components/Header/__tests__/__snapshots__/cartTrigger.spec.js.snap

@@ -4,7 +4,7 @@ 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."
   className="a"
-  onClick={[MockFunction]}
+  onClick={[Function]}
 >
   <span>
     <svg
@@ -43,7 +43,7 @@ exports[`Cart icon svg has no fill when cart is empty 1`] = `
 <button
   aria-label="Toggle mini cart. You have 0 items in your cart."
   className="a"
-  onClick={[MockFunction]}
+  onClick={[Function]}
 >
   <span>
     <svg

packages/venia-ui/lib/components/Header/__tests__/cartTrigger.spec.js

@@ -1,44 +1,61 @@
 import React from 'react';
 import { createTestInstance } from '@magento/peregrine';
+import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
-import Trigger from '../cartTrigger';
+import CartTrigger from '../cartTrigger';
+
+jest.mock('@magento/peregrine/lib/context/cart', () => {
+    const state = {
+        details: {}
+    };
+    const api = {
+        getCartDetails: jest.fn(),
+        toggleCart: jest.fn()
+    };
+
+    const useCartContext = jest.fn(() => [state, api]);
+
+    return { useCartContext };
+});
 
 const classes = {
     root: 'a'
 };
-const getCartDetails = jest.fn();
-const toggleCart = jest.fn();
 
 test('Cart icon svg has no fill when cart is empty', () => {
-    const props = {
-        cart: {
+    const [cartState, cartApi] = useCartContext();
+    useCartContext.mockReturnValueOnce([
+        {
+            ...cartState,
             details: {
                 items_qty: 0
             }
         },
-        classes,
-        getCartDetails,
-        toggleCart
-    };
+        {
+            ...cartApi
+        }
+    ]);
 
-    const component = createTestInstance(<Trigger {...props} />);
+    const component = createTestInstance(<CartTrigger classes={classes} />);
 
     expect(component.toJSON()).toMatchSnapshot();
 });
 
 test('Cart icon svg has fill and correct value when cart contains items', () => {
-    const props = {
-        cart: {
+    const [cartState, cartApi] = useCartContext();
+    useCartContext.mockReturnValueOnce([
+        {
+            ...cartState,
             details: {
                 items_qty: 10
             }
         },
-        classes,
-        getCartDetails,
-        toggleCart
-    };
+        {
+            ...cartApi
+        }
+    ]);
 
-    const component = createTestInstance(<Trigger {...props} />);
+    const component = createTestInstance(<CartTrigger classes={classes} />);
 
     expect(component.toJSON()).toMatchSnapshot();
 });

packages/venia-ui/lib/components/Header/cartTrigger.css

@@ -3,3 +3,8 @@
     height: 3rem;
     min-width: 3rem;
 }
+
+.counter {
+    font-weight: 600;
+    margin-left: 0.3rem;
+}

packages/venia-ui/lib/components/Header/cartTrigger.js

@@ -1,12 +1,12 @@
-import React, { useEffect } from 'react';
-import { func, number, shape, string } from 'prop-types';
+import React from 'react';
+import { shape, string } from 'prop-types';
 import { ShoppingCart as ShoppingCartIcon } from 'react-feather';
 
 import Icon from '../Icon';
-import CartCounter from './cartCounter';
 
 import { mergeClasses } from '../../classify';
 import defaultClasses from './cartTrigger.css';
+import { useCartTrigger } from '@magento/peregrine/lib/talons/Header/useCartTrigger';
 
 const CART_ICON_FILLED = (
     <Icon
@@ -27,42 +27,32 @@ const CART_ICON_EMPTY = (
 );
 
 const CartTrigger = props => {
-    const { cart, getCartDetails, toggleCart } = props;
-    const { details: cartDetails } = cart;
-    const { items_qty: numItems } = cartDetails;
+    const { handleClick, itemCount } = useCartTrigger();
 
     const classes = mergeClasses(defaultClasses, props.classes);
+    const cartIcon = itemCount > 0 ? CART_ICON_FILLED : CART_ICON_EMPTY;
+    const buttonAriaLabel = `Toggle mini cart. You have ${itemCount} items in your cart.`;
 
-    useEffect(() => {
-        getCartDetails();
-    }, [getCartDetails]);
-
-    const cartIcon = numItems > 0 ? CART_ICON_FILLED : CART_ICON_EMPTY;
-    const buttonAriaLabel = `Toggle mini cart. You have ${numItems} items in your cart.`;
+    const itemCounter = itemCount ? (
+        <span className={classes.counter}>{itemCount}</span>
+    ) : null;
 
     return (
         <button
             className={classes.root}
             aria-label={buttonAriaLabel}
-            onClick={toggleCart}
+            onClick={handleClick}
         >
             {cartIcon}
-            <CartCounter numItems={numItems} />
+            {itemCounter}
         </button>
     );
 };
 
 CartTrigger.propTypes = {
-    cart: shape({
-        details: shape({
-            items_qty: number
-        }).isRequired
-    }).isRequired,
     classes: shape({
         root: string
-    }),
-    getCartDetails: func.isRequired,
-    toggleCart: func
+    })
 };
 
 export default CartTrigger;

packages/venia-ui/lib/components/Header/header.css

@@ -32,13 +32,6 @@
     padding: 0 1rem;
 }
 
-.navTrigger,
-.cartTrigger {
-    composes: root from '../clickable.css';
-    height: 3rem;
-    width: 3rem;
-}
-
 .logo {
     grid-area: title;
     width: 3rem;