Add Banner on dismiss & fixed props

6 files changed, 55 insertions, 32 deletions

diff --git a/src/components/Banner/Banner.js b/src/components/Banner/Banner.js
index daf2ae9..bc5d697 100644
--- a/src/components/Banner/Banner.js
+++ b/src/components/Banner/Banner.js
@@ -19,7 +19,7 @@ const IconSection = ({ status }) => {
   if (status === 'default' || !icons[status]) {
     return null;
   }
-  
+
   const iconClasses = classnames(
     styles.Icon,
     status && styles[`${status}Icon`]
@@ -38,12 +38,9 @@ class Banner extends Component {
       children,
       title,
       status = 'default',
-
-      // TODO props below
-      onDismiss,
       action,
       fixed,
-      autoDismiss,
+      onDismiss
     } = this.props;
 
     const titleMarkup = title
@@ -54,6 +51,10 @@ class Banner extends Component {
       ? <div className={styles.Actions}>{ buttonFrom(action, actionOverrides) }</div>
       : null;
 
+    const dismissMarkup = onDismiss
+      ? <a className={styles.Dismiss} onClick={onDismiss}><Icon name='Close' size={24} className={styles.DismissIcon} /></a>
+      : null;
+
     const bannerStyles = classnames(
       styles.Banner,
       styles[`${status}`],
@@ -64,6 +65,7 @@ class Banner extends Component {
       <div className={bannerStyles}>
         <IconSection status={status} />
         <div className={styles.Content}>
+          { dismissMarkup }
           { titleMarkup }
           { children }
           { actionMarkup }
@@ -76,10 +78,8 @@ class Banner extends Component {
 Banner.propTypes = {
   title: PropTypes.string,
   status: PropTypes.oneOf(['info', 'warning', 'success', 'danger', 'default']),
-
   fixed: PropTypes.bool,
   onDismiss: PropTypes.func,
-  autoDismiss: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
   action: PropTypes.shape({
     content: PropTypes.string.isRequired
   }),
diff --git a/src/components/Banner/Banner.module.scss b/src/components/Banner/Banner.module.scss
index 1d07e5d..d9d24e5 100644
--- a/src/components/Banner/Banner.module.scss
+++ b/src/components/Banner/Banner.module.scss
@@ -9,7 +9,7 @@
   box-shadow: shadow();
 
   background: color(gray, 9);
-  border: 1px solid color(gray, 7);
+  border: 1px solid color(gray, 8);
 
   &:before {
     display: block;
@@ -25,7 +25,7 @@
 }
 
 .success {
-  background: rgba(color(green), 0.1);
+  background: lighten(color(green), 38) ;
 
   &:before {
     background: rgba(color(green), 0.8);
@@ -33,7 +33,7 @@
 }
 
 .info {
-  background: rgba(color(blue), 0.1);
+  background: lighten(color(blue), 42) ;
 
   &:before {
     background: rgba(color(blue), 0.7);
@@ -41,7 +41,7 @@
 }
 
 .warning {
-  background: rgba(color(mustard), 0.1);
+  background: lighten(color(mustard), 51) ;
 
   &:before {
     background: rgba(color(mustard), 0.7);
@@ -49,16 +49,25 @@
 }
 
 .danger {
-  background: rgba(color(red, dark), 0.1);
+  background: lighten(color(red, dark), 41) ;
 
   &:before {
     background: rgba(color(red, dark), 0.6);
   }
 }
 
+.fixed {
+  position: absolute;
+  top: rem(15);
+  left: rem(15);
+  right: rem(15);
+  box-shadow: shadow(deeper);
+  border: 1px solid rgba(color(gray, 7), 0.5);
+}
+
 .IconWrapper {
   flex: rem(48) 0;
-  height: rem(48);
+  height: rem(27);
 }
 
 .Content {
@@ -67,7 +76,8 @@
 }
 
 .Title {
-  margin-bottom: spacing(small);
+  padding-top: rem(3);
+  margin-bottom: 0;
 }
 
 .Actions {
@@ -92,3 +102,21 @@
 .dangerIcon {
   fill: rgba(color(red, dark), 0.9);
 }
+
+.Dismiss {
+  position: absolute;
+  right: rem(18);
+  top: rem(18);
+  border-bottom: none;
+  user-select: none;
+
+  &:hover {
+    .DismissIcon {
+      fill: color(gray, 1);
+    }
+  }
+}
+
+.DismissIcon {
+  fill: color(gray, 4);
+}
diff --git a/src/icons/index.js b/src/icons/index.js
index db1d527..7c57659 100644
--- a/src/icons/index.js
+++ b/src/icons/index.js
@@ -16,6 +16,7 @@ export { default as MdCheckCircle } from './check-circle';
 export { default as MdCheck } from './check';
 export { default as MdChevronLeft } from './chevron-left';
 export { default as MdChevronRight } from './chevron-right';
+export { default as MdClose } from './close';
 export { default as MdCode } from './code';
 export { default as MdCreate } from './create';
 export { default as MdDelete } from './delete';
diff --git a/src/index.js b/src/index.js
index 98ebfba..09bd698 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,12 +1,2 @@
 import './styles/index.scss';
 export * from './components';
-
-// import React from 'react';
-// import ReactDOM from 'react-dom';
-// import { Test } from './components';
-
-//
-// ReactDOM.render(
-//   <Test />,
-//   document.getElementById('root')
-// );
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 8ac7b89..db90ef2 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -72,5 +72,6 @@ a, a:visited {
 
   &:hover, &:active, &:focus {
     color: color(blue, dark);
+    cursor: pointer;
   }
 }
diff --git a/stories/Banner.js b/stories/Banner.js
index 63d2ac7..8df4d59 100644
--- a/stories/Banner.js
+++ b/stories/Banner.js
@@ -34,8 +34,12 @@ export default storiesOf('Banner', module)
 
       <br />
 
-      <Banner title='This is a title' status='info' >
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae iure in corrupti quidem quis sint libero quo debitis quibusdam. Illo soluta sequi consequatur accusamus praesentium repudiandae rerum commodi, necessitatibus obcaecati.
+      <Banner
+        status='info'
+        action={{
+          content: 'Resend Email'
+        }}>
+        Please click the link in the email we sent you to verify your email adderss and unlock the full features of our service.
       </Banner>
 
       <br />
@@ -46,14 +50,13 @@ export default storiesOf('Banner', module)
     </StoryContainer>
   ))
 
-  .add('More Exmaples', () => (
+  .add('Fixed', () => (
     <StoryContainer>
       <Banner
-        status='info'
-        action={{
-          content: 'Resend Email'
-        }}>
-        Please click the link in the email we sent you to verify your email adderss and unlock the full features of our service.
+        title='Profile Updated'
+        status='success'
+        onDismiss={action('Dismiss Clicked')}
+        fixed >
       </Banner>
     </StoryContainer>
   ));