feat(Banner): add show close button override prop

opengovsg · Aug 16, 2022 · ca45cc6 · ca45cc6
1 parent a1eeaf2
commit ca45cc6
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/frontend/src/components/Banner/Banner.tsx b/frontend/src/components/Banner/Banner.tsx
@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { BiX } from 'react-icons/bi'
 import ReactMarkdown from 'react-markdown'
 import {
@@ -18,13 +19,15 @@ import { useMdComponents } from '~hooks/useMdComponents'
 export interface BannerProps {
   variant?: BannerVariant
   children: string
-  useMarkdown: boolean
+  useMarkdown?: boolean
+  showCloseButton?: boolean
 }
 
 export const Banner = ({
   variant = 'info',
   children,
   useMarkdown = false,
+  showCloseButton,
 }: BannerProps): JSX.Element => {
   const { isOpen, onToggle } = useDisclosure({
     defaultIsOpen: true,
@@ -34,6 +37,12 @@ export const Banner = ({
 
   const mdComponents = useMdComponents({ styles })
 
+  const shouldShowCloseButton = useMemo(() => {
+    // Prop supercedes all.
+    if (showCloseButton !== undefined) return showCloseButton
+    return variant === 'info'
+  }, [showCloseButton, variant])
+
   return (
     <Collapse in={isOpen} animateOpacity>
       <Box __css={styles.banner}>
@@ -51,7 +60,7 @@ export const Banner = ({
               children
             )}
           </Flex>
-          {variant === 'info' && (
+          {shouldShowCloseButton && (
             <CloseButton
               variant="subtle"
               colorScheme="whiteAlpha"