Refactor the Page component and its children

packages/venia-concept/src/components/Header/cartTrigger.css

@@ -0,0 +1,5 @@
+.root {
+  composes: root from "../button.css";
+  height: 3rem;
+  width: 3rem;
+}

packages/venia-concept/src/components/Header/cartTrigger.js

@@ -0,0 +1,39 @@
+import { Component, createElement } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import PropTypes from 'prop-types';
+
+import classify from 'src/classify';
+import defaultClasses from './cartTrigger.css';
+
+class Trigger extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        classes: PropTypes.shape({
+            root: PropTypes.string
+        }),
+        openCart: PropTypes.func.isRequired
+    };
+
+    render() {
+        const { children, classes, openCart } = this.props;
+
+        return (
+            <button className={classes.root} onClick={openCart}>
+                {children}
+            </button>
+        );
+    }
+}
+
+const mapDispatchToProps = dispatch => ({
+    openCart: () => dispatch({ type: 'TOGGLE_DRAWER', payload: 'cart' })
+});
+
+export default compose(
+    classify(defaultClasses),
+    connect(
+        null,
+        mapDispatchToProps
+    )
+)(Trigger);

packages/venia-concept/src/components/Header/header.css

@@ -1,12 +1,11 @@
 .root {
   background-color: rgb(var(--venia-grey));
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px rgba(0, 0, 0, 0.12);
   display: grid;
   grid-auto-columns: 100%;
   grid-auto-flow: row;
   grid-auto-rows: auto;
   grid-row-gap: 0.5rem;
-  position: relative;
 }
 
 .toolbar {

packages/venia-concept/src/components/Header/header.js

@@ -1,19 +1,17 @@
 import { Component, createElement } from 'react';
-import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
 import classify from 'src/classify';
-import { Trigger as NavTrigger } from 'src/components/Navigation';
 import Icon from 'src/components/Icon';
+import CartTrigger from './cartTrigger';
+import NavTrigger from './navTrigger';
 import defaultClasses from './header.css';
 import logo from './logo.svg';
 
 class Header extends Component {
     static propTypes = {
         classes: PropTypes.shape({
-            cartTrigger: PropTypes.string,
             logo: PropTypes.string,
-            navTrigger: PropTypes.string,
             primaryActions: PropTypes.string,
             root: PropTypes.string,
             searchBlock: PropTypes.string,
@@ -24,14 +22,6 @@ class Header extends Component {
         })
     };
 
-    get triggerClasses() {
-        const { classes } = this.props;
-
-        return {
-            root: classes.navTrigger
-        };
-    }
-
     render() {
         const { classes } = this.props;
 
@@ -46,17 +36,17 @@ class Header extends Component {
                         title="Venia"
                     />
                     <div className={classes.primaryActions}>
-                        <NavTrigger classes={this.triggerClasses}>
+                        <NavTrigger>
                             <Icon name="menu" />
                         </NavTrigger>
                     </div>
                     <div className={classes.secondaryActions}>
                         <button className={classes.searchTrigger}>
                             <Icon name="search" />
                         </button>
-                        <Link to="/cart" className={classes.cartTrigger}>
+                        <CartTrigger>
                             <Icon name="shopping-cart" />
-                        </Link>
+                        </CartTrigger>
                     </div>
                 </div>
                 <div className={classes.searchBlock}>

packages/venia-concept/src/components/Header/navTrigger.css

@@ -0,0 +1,5 @@
+.root {
+  composes: root from "../button.css";
+  height: 3rem;
+  width: 3rem;
+}

packages/venia-concept/src/components/Header/navTrigger.js

@@ -0,0 +1,39 @@
+import { Component, createElement } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import PropTypes from 'prop-types';
+
+import classify from 'src/classify';
+import defaultClasses from './navTrigger.css';
+
+class Trigger extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        classes: PropTypes.shape({
+            root: PropTypes.string
+        }),
+        openNav: PropTypes.func.isRequired
+    };
+
+    render() {
+        const { children, classes, openNav } = this.props;
+
+        return (
+            <button className={classes.root} onClick={openNav}>
+                {children}
+            </button>
+        );
+    }
+}
+
+const mapDispatchToProps = dispatch => ({
+    openNav: () => dispatch({ type: 'TOGGLE_DRAWER', payload: 'nav' })
+});
+
+export default compose(
+    classify(defaultClasses),
+    connect(
+        null,
+        mapDispatchToProps
+    )
+)(Trigger);

packages/venia-concept/src/components/Main/main.css

@@ -1,4 +1,13 @@
 .root {
   background-color: white;
   color: rgb(var(--venia-text));
+  position: relative;
+  z-index: 1;
+}
+
+/* state: masked */
+
+.root_masked {
+  composes: root;
+  filter: grayscale(1);
 }

packages/venia-concept/src/components/Main/main.js

@@ -2,19 +2,30 @@ import { Component, createElement } from 'react';
 import PropTypes from 'prop-types';
 
 import classify from 'src/classify';
+import Footer from 'src/components/Footer';
+import Header from 'src/components/Header';
 import defaultClasses from './main.css';
 
 class Main extends Component {
     static propTypes = {
         classes: PropTypes.shape({
-            root: PropTypes.string
-        })
+            root: PropTypes.string,
+            root_masked: PropTypes.string
+        }),
+        isMasked: PropTypes.bool
     };
 
     render() {
-        const { children, classes } = this.props;
+        const { children, classes, isMasked } = this.props;
+        const className = isMasked ? classes.root_masked : classes.root;
 
-        return <main className={classes.root}>{children}</main>;
+        return (
+            <main className={className}>
+                <Header />
+                {children}
+                <Footer />
+            </main>
+        );
     }
 }
 

packages/venia-concept/src/components/Navigation/navigation.css

@@ -4,17 +4,18 @@
   display: grid;
   grid-template-rows: auto 1fr auto;
   left: 0;
-  position: absolute;
-  right: 0;
+  position: fixed;
   top: 0;
   transition-property: opacity, transform, visibility;
+  width: 360px;
+  z-index: 3;
 }
 
 .header {
   align-content: center;
   align-items: center;
   background-color: rgb(var(--venia-grey));
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px rgb(var(--venia-border));
   display: grid;
   grid-auto-columns: auto;
   grid-auto-flow: column;
@@ -29,10 +30,11 @@
 .title {
   align-items: center;
   display: inline-flex;
-  font-size: 1.25rem;
+  font-size: 1rem;
   font-weight: 400;
   margin: 0 auto 0 0;
   padding: 0 1rem;
+  text-transform: uppercase;
 }
 
 .navTrigger {
@@ -77,15 +79,15 @@
 .closed {
   composes: root;
   opacity: 0;
-  transform: translate3d(-100vw, 0, 0);
+  transform: translate3d(-100%, 0, 0);
   transition-duration: 192ms;
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
   visibility: hidden;
 }
 
 .open {
   composes: root;
-  box-shadow: 0px -1px rgb(var(--venia-border));
+  box-shadow: 1px 0 rgb(var(--venia-border));
   opacity: 1;
   transform: translate3d(0, 0, 0);
   transition-duration: 224ms;

packages/venia-concept/src/components/Navigation/navigation.js

@@ -28,20 +28,20 @@ class Navigation extends Component {
         classes: PropTypes.shape({
             root: PropTypes.string
         }),
-        nav: PropTypes.bool
+        isOpen: PropTypes.bool
     };
 
     render() {
-        const { classes, nav } = this.props;
-        const className = nav ? classes.open : classes.closed;
+        const { classes, isOpen } = this.props;
+        const className = isOpen ? classes.open : classes.closed;
 
         return (
             <aside className={className}>
                 <div className={classes.header}>
                     <h2 className={classes.title}>
                         <span>Main Menu</span>
                     </h2>
-                    <Trigger className={classes.navTrigger}>
+                    <Trigger>
                         <Icon name="x" />
                     </Trigger>
                 </div>

packages/venia-concept/src/components/Navigation/trigger.js

@@ -1,34 +1,39 @@
 import { Component, createElement } from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { compose } from 'redux';
+import PropTypes from 'prop-types';
 
 import classify from 'src/classify';
 import defaultClasses from './trigger.css';
 
-class Trigger extends Component {
+class NavTrigger extends Component {
     static propTypes = {
+        children: PropTypes.node,
         classes: PropTypes.shape({
             root: PropTypes.string
-        })
+        }),
+        closeNav: PropTypes.func.isRequired
     };
 
     render() {
-        const { children, classes } = this.props;
+        const { children, classes, closeNav } = this.props;
 
         return (
-            <button className={classes.root} onClick={this.handleClick}>
+            <button className={classes.root} type="button" onClick={closeNav}>
                 {children}
             </button>
         );
     }
-
-    handleClick = () => {
-        this.props.dispatch({ type: 'TOGGLE_NAVIGATION' });
-    };
 }
 
+const mapDispatchToProps = dispatch => ({
+    closeNav: () => dispatch({ type: 'TOGGLE_DRAWER', payload: null })
+});
+
 export default compose(
     classify(defaultClasses),
-    connect()
-)(Trigger);
+    connect(
+        null,
+        mapDispatchToProps
+    )
+)(NavTrigger);

packages/venia-concept/src/components/Page/mask.css

@@ -0,0 +1,26 @@
+.root {
+  background-image: repeating-linear-gradient(-45deg, #080808, #080808 20px, black 20px, black 40px);
+  cursor: pointer;
+  display: block;
+  height: 100vh;
+  left: 0;
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  transition-duration: 192ms;
+  transition-property: opacity, visibility;
+  transition-timing-function: linear;
+  visibility: hidden;
+  width: 100vw;
+  z-index: 2;
+  -webkit-appearance: none;
+}
+
+/* state: active */
+
+.root_active {
+  composes: root;
+  opacity: 0.5;
+  transition-duration: 224ms;
+  visibility: visible;
+}

packages/venia-concept/src/components/Page/mask.js

@@ -0,0 +1,25 @@
+import { Component, createElement } from 'react';
+import PropTypes from 'prop-types';
+
+import classify from 'src/classify';
+import defaultClasses from './mask.css';
+
+class Mask extends Component {
+    static propTypes = {
+        classes: PropTypes.shape({
+            root: PropTypes.string,
+            root_active: PropTypes.string
+        }),
+        dismiss: PropTypes.func,
+        isActive: PropTypes.bool
+    };
+
+    render() {
+        const { classes, dismiss, isActive } = this.props;
+        const className = isActive ? classes.root_active : classes.root;
+
+        return <button className={className} onClick={dismiss} />;
+    }
+}
+
+export default classify(defaultClasses)(Mask);