feat: Add “severity” variant for Modals (#436)

src/components/Banner.tsx

@@ -73,8 +73,8 @@ const BannerOuter = styled.div<{
   backgroundColor: theme.colors['fill-three'],
   borderRadius: theme.borderRadiuses.medium,
   borderLeft: `4px solid ${theme.colors[$borderColorKey]}`,
-  maxWidth: $fullWidth ? null : 480,
-  width: $fullWidth ? '100%' : null,
+  maxWidth: $fullWidth ? undefined : 480,
+  width: $fullWidth ? '100%' : undefined,
 }))
 
 const BannerInner = styled.div(({ theme }) => ({

src/components/Layer.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react'
 import { createPortal } from 'react-dom'
 import { UseTransitionProps, animated, useTransition } from 'react-spring'
-
+import isNil from 'lodash/isNil'
 import styled, { useTheme } from 'styled-components'
 
 import usePrevious from '../hooks/usePrevious'
@@ -23,7 +23,7 @@ type TransitionType = 'slide' | 'fade' | 'scale'
 type GetTransitionProps = {
   isOpen: boolean
   type: TransitionType
-  direction: Direction
+  direction?: Direction
 }
 
 type AnimationType =
@@ -134,10 +134,10 @@ const LayerWrapper = styled.div<{
   left: 0,
   right: 0,
   bottom: 0,
-  paddingLeft: margin.left,
-  paddingRight: margin.right,
-  paddingTop: margin.top,
-  paddingBottom: margin.bottom,
+  paddingLeft: margin.left ?? undefined,
+  paddingRight: margin.right ?? undefined,
+  paddingTop: margin.top ?? undefined,
+  paddingBottom: margin.bottom ?? undefined,
 }))
 
 function LayerRef({
@@ -219,7 +219,7 @@ ref: MutableRefObject<HTMLDivElement>) {
     margin = {}
   }
   for (const [key, value] of Object.entries(margin)) {
-    margin[key] = theme.spacing[value] || value
+    margin[key] = (!isNil(value) && theme.spacing[value]) || value
   }
   let transitionDirection: GetTransitionProps['direction'] = DEFAULT_DIRECTION
   let transitionType: GetTransitionProps['type'] = DEFAULT_TRANSITION_TYPE

src/components/Modal.tsx

@@ -2,17 +2,50 @@ import { ReactNode, Ref, forwardRef } from 'react'
 import {
   Div,
   Flex,
+  H1,
   Modal as HonorableModal,
   ModalProps,
-  P,
 } from 'honorable'
 import PropTypes from 'prop-types'
+import { ColorKey, Severity } from 'src/types'
+
+import CheckRoundedIcon from './icons/CheckRoundedIcon'
+import createIcon from './icons/createIcon'
+import ErrorIcon from './icons/ErrorIcon'
+import WarningIcon from './icons/WarningIcon'
+import InfoIcon from './icons/InfoIcon'
+
+export const SEVERITIES = ['info', 'warning', 'success', 'danger'] as const
+
+type ModalSeverity = Extract<Severity, typeof SEVERITIES[number]>
 
 type ModalPropsType = ModalProps & {
   form?: boolean
   size?: 'medium' | 'large' | string
   header?: ReactNode
   actions?: ReactNode
+  severity?: ModalSeverity
+}
+
+const severityToIconColorKey: Readonly<
+  Record<ModalSeverity | 'default', ColorKey>
+> = {
+  default: 'icon-default',
+  info: 'icon-info',
+  danger: 'icon-danger',
+  warning: 'icon-warning',
+  success: 'icon-success',
+}
+
+const severityToIcon: Record<
+  ModalSeverity | 'default',
+  ReturnType<typeof createIcon> | null | undefined
+> = {
+  default: null,
+  info: InfoIcon,
+  danger: ErrorIcon,
+  warning: WarningIcon,
+  success: CheckRoundedIcon,
 }
 
 const propTypes = {
@@ -35,9 +68,13 @@ function ModalRef({
   open = false,
   size = form ? 'large' : 'medium',
   onClose,
+  severity,
   ...props
 }: ModalPropsType,
 ref: Ref<any>) {
+  const HeaderIcon = severityToIcon[severity ?? 'default']
+  const iconColorKey = severityToIconColorKey[severity ?? 'default']
+
   return (
     <HonorableModal
       open={open}
@@ -52,20 +89,28 @@ ref: Ref<any>) {
       <Div
         margin="large"
         marginBottom={actions ? 0 : 'large'}
+        body1
       >
         {!!header && (
           <Flex
             ref={ref}
             align="center"
-            justify="space-between"
+            justify="start"
             marginBottom="large"
+            gap="xsmall"
           >
-            <P
+            {HeaderIcon && (
+              <HeaderIcon
+                marginTop={-2} // optically center icon
+                color={iconColorKey}
+              />
+            )}
+            <H1
               overline
               color="text-xlight"
             >
               {header}
-            </P>
+            </H1>
           </Flex>
         )}
         {children}

src/stories/Modal.stories.tsx

@@ -2,6 +2,7 @@ import { Button, H3, P } from 'honorable'
 import { useState } from 'react'
 
 import { FormField, Input, Modal } from '..'
+import { SEVERITIES } from '../components/Modal'
 
 export default {
   title: 'Modal',
@@ -13,6 +14,12 @@ export default {
         type: 'select',
       },
     },
+    severity: {
+      options: [undefined, ...SEVERITIES],
+      control: {
+        type: 'select',
+      },
+    },
   },
 }