Merge pull request #310 from Tripwire/feat/add-notification-layout

feat(layout) add layout for notifications (re-do)

src/components/BannerMessage/BannerMessage.jsx

@@ -12,7 +12,7 @@ import classnames from 'classnames'
  */
 
 const BannerMessage = props => {
-  const { button, closed, header, icon, children, info, warning, error, success, onCloseClicked, ...rest } = props
+  const { className, button, closed, header, icon, children, info, warning, error, success, onCloseClicked, ...rest } = props
   const forceInfo = !info && !warning && !error && !success
 
   function getOneDismissElement () {
@@ -52,7 +52,7 @@ const BannerMessage = props => {
   const DismissElement = getOneDismissElement()
 
   return (
-    <div className='banner-message__wrapper'>
+    <div className={classnames('banner-message__wrapper', className)}>
       <div
         className={classnames(
           'banner-message',

src/components/unstable/Layout/Layout.css

@@ -9,6 +9,13 @@
     "header header"
     "nav body";
 }
+.layout__container--notifying {
+  grid-template-rows: auto auto 1fr;
+  grid-template-areas:
+    "header header"
+    "nav notification"
+    "nav body";
+}
 .layout__container--full {
   height: 100vh;
   width: 100vw;
@@ -20,6 +27,9 @@
 .layout__nav {
   grid-area: nav;
 }
+.layout__notification {
+  grid-area: notification;
+}
 .layout__body {
   grid-area: body;
   overflow: auto;

src/components/unstable/Layout/Layout.jsx

@@ -5,10 +5,13 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 export default function Layout (props) {
-  const { className, children, full, ...rest } = props
+  const { className, children, full, notifying, ...rest } = props
   const classes = classnames(
     'layout__container',
-    full ? 'layout__container--full' : null,
+    {
+      'layout__container--full': full,
+      'layout__container--notifying': notifying
+    },
     className
   )
   return (
@@ -22,8 +25,13 @@ Layout.propTypes = {
   /**
    * size the layout to the viewpost (100vh, 100vw)
    */
-  full: PropTypes.bool
+  full: PropTypes.bool,
+  /**
+   * provide a container for notifications between the header and the body
+   */
+  notifying: PropTypes.bool
 }
 Layout.Header = generic({ name: 'LayoutHeader', className: 'layout__header' })
 Layout.Nav = generic({ name: 'LayoutNav', className: 'layout__nav' })
+Layout.Notification = generic({ name: 'LayoutNotification', className: 'layout__notification' })
 Layout.Body = generic({ name: 'LayoutBody', className: 'layout__body' })

src/styles/components/banner-message.css

@@ -11,7 +11,6 @@
 }
 
 .banner-message {
-  z-index: 999;
   margin-top: 0;
   transition: all 2s ease-in;
 }