From 10b9f96df394a798aecce0557e788089922e62d1 Mon Sep 17 00:00:00 2001
From: Klink <85062+dogmar@users.noreply.github.com>
Date: Wed, 29 Mar 2023 13:11:52 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20Add=20=E2=80=9Cseverity=E2=80=9D=20vari?=
 =?UTF-8?q?ant=20for=20Modals=20(#436)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Banner.tsx     |  4 +--
 src/components/Layer.tsx      | 14 ++++-----
 src/components/Modal.tsx      | 53 ++++++++++++++++++++++++++++++++---
 src/stories/Modal.stories.tsx |  7 +++++
 4 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index c42f4b08..c4fbb7e6 100644
--- a/src/components/Banner.tsx
+++ b/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 }) => ({
diff --git a/src/components/Layer.tsx b/src/components/Layer.tsx
index a77d28e5..bb1808ac 100644
--- a/src/components/Layer.tsx
+++ b/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
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 0d11991e..6c579db5 100644
--- a/src/components/Modal.tsx
+++ b/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}
diff --git a/src/stories/Modal.stories.tsx b/src/stories/Modal.stories.tsx
index b8730b1a..44c519bf 100644
--- a/src/stories/Modal.stories.tsx
+++ b/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',
+      },
+    },
   },
 }