feat: Improve banner (#405)

pluralsh · Feb 6, 2023 · 66496a8 · 66496a8
1 parent 042f0e4
commit 66496a8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -80,6 +80,7 @@ const BannerOuter = styled.div<{
 const BannerInner = styled.div(({ theme }) => ({
   display: 'flex',
   paddingTop: theme.spacing.xxsmall,
+  paddingBottom: theme.spacing.xxsmall,
   alignItems: 'flex-start',
 }))
 
@@ -146,12 +147,6 @@ ref: Ref<any>) {
   const iconColorKey = severityToIconColorKey[severity]
   const borderColorKey = severityToBorderColorKey[severity]
 
-  function handleClose() {
-    if (typeof onClose === 'function') {
-      onClose()
-    }
-  }
-
   const content = (
     <BannerOuter
       ref={ref}
@@ -181,7 +176,9 @@ ref: Ref<any>) {
         </div>
       </BannerInner>
       <Div flexGrow={1} />
-      <CloseButton onClick={handleClose} />
+      {typeof onClose === 'function' && (
+        <CloseButton onClick={onClose} />
+      )}
     </BannerOuter>
   )
 

diff --git a/src/stories/Banner.stories.tsx b/src/stories/Banner.stories.tsx
@@ -124,6 +124,19 @@ function Template(args: any) {
       >
         Having a full width Banner can sometimes be useful.
       </Banner>
+      <H1
+        marginTop="medium"
+        subtitle2
+      >
+        onClose=fn
+      </H1>
+      <Banner
+        {...args}
+        fullWidth
+        onClose={() => {}}
+      >
+        Having a full width Banner can sometimes be useful.
+      </Banner>
     </Flex>
   )
 }