fix: set standard banner padding regardless of viewport, add sm size (#…

…559) * fix: set standard banner padding regardless of viewport * feat(Banner): add sm size * feat(banner): add stories for mobile viewport * feat: update padding for small banner * fix: use default variant from Banner theme if available
opengovsg · Nov 22, 2023 · 9f88640 · 9f88640
1 parent 2b986cf
commit 9f88640
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 6 deletions.
diff --git a/react/src/Banner/Banner.stories.tsx b/react/src/Banner/Banner.stories.tsx
@@ -1,5 +1,8 @@
+import { Divider, Stack } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
+import { getMobileViewParameters } from '~/utils/storybook'
+
 import { Banner, BannerProps } from './Banner'
 
 export default {
@@ -36,3 +39,31 @@ Error.args = {
   variant: 'error',
   children: `This is an error banner`,
 }
+
+const SizeTemplate: StoryFn<BannerProps> = (args) => {
+  return (
+    <Stack>
+      <Template variant="info" {...args}>
+        This is a small dismissable info banner
+      </Template>
+      <Template variant="warn" {...args}>
+        This is a small warning banner
+      </Template>
+      <Template variant="error" {...args}>
+        This is a small error banner
+      </Template>
+    </Stack>
+  )
+}
+
+export const Mobile = SizeTemplate.bind({})
+Mobile.args = {
+  size: 'md',
+}
+Mobile.parameters = getMobileViewParameters()
+
+export const SmSizeMobile = SizeTemplate.bind({})
+SmSizeMobile.args = {
+  size: 'sm',
+}
+SmSizeMobile.parameters = getMobileViewParameters()
diff --git a/react/src/Banner/Banner.tsx b/react/src/Banner/Banner.tsx
@@ -9,6 +9,7 @@ import {
   ThemingProps,
   useDisclosure,
   useMultiStyleConfig,
+  useTheme,
 } from '@chakra-ui/react'
 
 import { BxsErrorCircle, BxsInfoCircle, BxX } from '~/icons'
@@ -31,10 +32,12 @@ export interface BannerProps {
    * If `null`, the close button will not be rendered.
    */
   closeButton?: React.ReactNode
+  size?: ThemingProps<'Banner'>['size']
 }
 
 export const Banner = ({
-  variant = 'info',
+  variant: _variant,
+  size,
   children,
   isDismissable: isDismissableProp,
   icon: iconProp,
@@ -44,7 +47,14 @@ export const Banner = ({
     defaultIsOpen: true,
   })
 
-  const styles = useMultiStyleConfig('Banner', { variant })
+  const theme = useTheme()
+  const styles = useMultiStyleConfig('Banner', { variant: _variant, size })
+
+  // Required in case variant is set in theme, we should respect the one set in theme.
+  const variant = useMemo(
+    () => _variant ?? theme?.components?.Banner?.defaultProps?.size ?? 'info',
+    [_variant, theme?.components?.Banner?.defaultProps?.size],
+  )
 
   const iconToUse = useMemo(() => {
     if (iconProp) {

diff --git a/react/src/theme/components/Banner.ts b/react/src/theme/components/Banner.ts
@@ -16,22 +16,43 @@ const baseStyle = definePartsStyle({
 })
 
 const sizes = {
+  sm: definePartsStyle({
+    item: {
+      py: '0.5rem',
+      px: '0.75rem',
+      textStyle: 'body-2',
+    },
+    icon: {
+      my: '0.125rem',
+      fontSize: '1rem',
+      mr: '0.5rem',
+    },
+    close: {
+      my: '-0.5rem',
+      ml: '0.5rem',
+      mr: '-0.5rem',
+      fontSize: '1rem',
+      w: '2.25rem',
+      h: '2.25rem',
+    },
+  }),
   md: definePartsStyle({
     item: {
-      py: ['1rem', '1rem', '0.5rem'],
+      py: '0.5rem',
       px: '1rem',
+      textStyle: 'body-1',
     },
     icon: {
       fontSize: '1.5rem',
       mr: '0.5rem',
     },
     close: {
-      padding: 0,
       ml: '0.5rem',
       mr: '-0.5rem',
+      my: '-0.375rem',
       fontSize: '1.5rem',
-      w: '1.5rem',
-      h: '1.5rem',
+      w: '2.25rem',
+      h: '2.25rem',
     },
   }),
 }