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);