Fix Banner pointer behavior

curology · Sep 28, 2020 · e148436 · e148436
1 parent a572517
commit e148436
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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
@@ -30,15 +30,18 @@ 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 {
     outline: none;
     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
@@ -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>