From e103c885da7effbf6939ccaeb5c3f9a5147f57ac Mon Sep 17 00:00:00 2001
From: Daniel Andrews <daniel@revelry.co>
Date: Wed, 4 Sep 2019 11:42:28 -0500
Subject: [PATCH 1/3] Add dismissable flash functionality

---
 docs-src/src/examples/Flash.js.example | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs-src/src/examples/Flash.js.example b/docs-src/src/examples/Flash.js.example
index 45347ab6..c069eb74 100644
--- a/docs-src/src/examples/Flash.js.example
+++ b/docs-src/src/examples/Flash.js.example
@@ -33,9 +33,9 @@
         <Col> Flash that fades out after [X]s </Col>
       </Row>    
     </Flash>
-    <Flash dismissible>
+    <Flash dismissable>
       <Row> 
-        <Col> Dismissible Flash <span class="close_btn"> &times; </span> </Col>
+        <Col> Dismissable Flash </Col>
       </Row>      
     </Flash>
   </Col>

From 92c524a82d50d3240f96e32c84cc96129c848f86 Mon Sep 17 00:00:00 2001
From: Daniel Andrews <daniel@revelry.co>
Date: Wed, 4 Sep 2019 11:44:15 -0500
Subject: [PATCH 2/3] Fix spelling

---
 docs-src/src/examples/Flash.js.example | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs-src/src/examples/Flash.js.example b/docs-src/src/examples/Flash.js.example
index c069eb74..33e3495c 100644
--- a/docs-src/src/examples/Flash.js.example
+++ b/docs-src/src/examples/Flash.js.example
@@ -33,9 +33,9 @@
         <Col> Flash that fades out after [X]s </Col>
       </Row>    
     </Flash>
-    <Flash dismissable>
+    <Flash dismissible>
       <Row> 
-        <Col> Dismissable Flash </Col>
+        <Col> Dismissible Flash </Col>
       </Row>      
     </Flash>
   </Col>

From 1a5613a61c110a357ff9b93f86dc55ae6c53a339 Mon Sep 17 00:00:00 2001
From: Daniel Andrews <daniel@revelry.co>
Date: Wed, 4 Sep 2019 11:46:20 -0500
Subject: [PATCH 3/3] Dismissible flash functionality

---
 scss/components/_Flash.scss | 13 +++++++++
 src/Flash.js                | 54 ++++++++++++++++++++++++++++++++-----
 2 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/scss/components/_Flash.scss b/scss/components/_Flash.scss
index b26a9056..6d3d4d95 100644
--- a/scss/components/_Flash.scss
+++ b/scss/components/_Flash.scss
@@ -15,8 +15,21 @@ $flash-padding: $global-vertical-space $global-horizontal-space !default;
   color: $flash-color;
   margin-bottom: $global-margin;
   padding: $global-padding-tiny 0;
+  position: relative;
 
   &.rev-Flash--fade {
     @include fade-out--hide();
   }
+  &.rev-Flash--dismissible {
+    cursor: pointer;
+  }
+}
+
+.rev-FlashClose {
+  background: none;
+  border: none;
+  color: $flash-color;
+  position: absolute;
+  right: $global-padding-tiny;
+  top: $global-padding-tiny;
 }
diff --git a/src/Flash.js b/src/Flash.js
index 4872e36d..5afdeda6 100644
--- a/src/Flash.js
+++ b/src/Flash.js
@@ -10,16 +10,32 @@ const BOOL_PROPS_TO_CLASS_NAMES = {
   fade: ['rev-Flash--fade'],
   dismissible: ['rev-Flash--dismissible'],
 }
-const BOOL_PROPS = Object.keys(BOOL_PROPS_TO_CLASS_NAMES)
+const BOOL_PROPS = [
+  ...Object.keys(BOOL_PROPS_TO_CLASS_NAMES),
+  'dismissible',
+  'closeIcon',
+]
 
 export default class Flash extends React.Component {
   static propTypes = {
     className: PropTypes.string,
     children: PropTypes.node,
+    dismissible: PropTypes.bool,
+    closeIcon: PropTypers.node,
+  }
+
+  state = {
+    isOpen: true,
+  }
+
+  handleCloseFlash = () => {
+    if (this.props.dismissible) {
+      this.setState({isOpen: false})
+    }
   }
 
   render() {
-    const {className, children, ...props} = this.props
+    const {className, children, dismissible, ...props} = this.props
 
     const boolClassNames = []
 
@@ -32,10 +48,34 @@ export default class Flash extends React.Component {
 
     const divClassName = classNames(className, 'rev-Flash', boolClassNames)
 
-    return (
-      <div {...props} className={divClassName}>
-        {children}
-      </div>
-    )
+    if (this.state.isOpen) {
+      return (
+        <div
+          {...props}
+          className={divClassName}
+          onClick={this.handleCloseFlash}
+          onKeyPress={this.handleCloseFlash}
+          role="button"
+          tabIndex="0"
+        >
+          {children}
+          {dismissible && <CloseButton icon={props.closeIcon} />}
+        </div>
+      )
+    }
+
+    return null
   }
 }
+
+function CloseButton({icon}) {
+  return (
+    <button className="rev-FlashClose">
+      {icon ? icon : <span>&times;</span>}
+    </button>
+  )
+}
+
+CloseButton.propTypes = {
+  icon: PropTypes.node,
+}