From e1484368d95beb03b922c053323348b2906e34ca Mon Sep 17 00:00:00 2001
From: Michael Altamirano <michaeljaltamirano@gmail.com>
Date: Mon, 28 Sep 2020 15:32:04 -0500
Subject: [PATCH] Fix Banner pointer behavior

---
 docs/banner.md                                           | 8 ++++++++
 src/shared-components/banner/__snapshots__/test.tsx.snap | 6 +++---
 src/shared-components/banner/style.ts                    | 7 +++++--
 stories/banner/index.tsx                                 | 9 +++++++++
 4 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/docs/banner.md b/docs/banner.md
index 6417ad8c1..f69a5eabc 100644
--- a/docs/banner.md
+++ b/docs/banner.md
@@ -11,6 +11,14 @@ import { Banner } from 'radiance-ui';
     </React.Fragment>
   }
 />
+<Banner
+  onClick={() => alert('clicked!')}
+  content={
+    <React.Fragment>
+      <strong>Clickable banner</strong> This is a banner with an onClick prop
+    </React.Fragment>
+  }
+/>
 <Banner
   content={
     <React.Fragment>
diff --git a/src/shared-components/banner/__snapshots__/test.tsx.snap b/src/shared-components/banner/__snapshots__/test.tsx.snap
index 52446128b..3104a9e4a 100644
--- a/src/shared-components/banner/__snapshots__/test.tsx.snap
+++ b/src/shared-components/banner/__snapshots__/test.tsx.snap
@@ -36,7 +36,7 @@ exports[`Banner UI snapshots renders error type and text 1`] = `
   background: transparent;
   border: none;
   width: 100%;
-  cursor: pointer;
+  cursor: inherit;
   position: relative;
   margin: 0 auto 0.5rem;
   padding: 1rem;
@@ -115,7 +115,7 @@ exports[`Banner UI snapshots renders info type and text 1`] = `
   background: transparent;
   border: none;
   width: 100%;
-  cursor: pointer;
+  cursor: inherit;
   position: relative;
   margin: 0 auto 0.5rem;
   padding: 1rem;
@@ -163,7 +163,7 @@ exports[`Banner UI snapshots renders success type and text 1`] = `
   background: transparent;
   border: none;
   width: 100%;
-  cursor: pointer;
+  cursor: inherit;
   position: relative;
   margin: 0 auto 0.5rem;
   padding: 1rem;
diff --git a/src/shared-components/banner/style.ts b/src/shared-components/banner/style.ts
index b9e384f85..027bf77e4 100644
--- a/src/shared-components/banner/style.ts
+++ b/src/shared-components/banner/style.ts
@@ -30,7 +30,10 @@ const errorAlertStyles = css`
 /**
  * width: 100% to match previous <div> behavior
  */
-export const BannerContainer = styled.button<{ bannerType: BannerType }>`
+export const BannerContainer = styled.button<{
+  bannerType: BannerType;
+  onClick?: () => void;
+}>`
   ${buttonReset}
   width: 100%;
   &:focus {
@@ -38,7 +41,7 @@ export const BannerContainer = styled.button<{ bannerType: BannerType }>`
     box-shadow: ${BOX_SHADOWS.focus};
   }
 
-  cursor: pointer;
+  cursor: ${({ onClick }) => (onClick ? `pointer` : `inherit`)};
   position: relative;
   margin: 0 auto ${SPACER.small};
   padding: ${SPACER.medium};
diff --git a/stories/banner/index.tsx b/stories/banner/index.tsx
index 15ca6880f..b1678b8f5 100644
--- a/stories/banner/index.tsx
+++ b/stories/banner/index.tsx
@@ -28,6 +28,15 @@ stories.add(
         }
         type="success"
       />
+      <Banner
+        onClick={() => alert('clicked!')}
+        content={
+          <React.Fragment>
+            <strong>Clickable banner</strong> This is a banner with an onClick
+            prop
+          </React.Fragment>
+        }
+      />
       <Banner
         content={
           <React.Fragment>