Merge pull request #194 from EnCiv/status-box#192

Status box#192

Author: ddfridley

app/components/sign-up.jsx

@@ -5,7 +5,7 @@ import cx from 'classnames'
 import { createUseStyles } from 'react-jss'
 import { useAuth } from 'civil-client'
 import { Button } from './button'
-import SvgAlertTriangle from '../svgr/alert-triangle'
+import StatusBox from '../components/status-box'
 
 function SignUp(props, ref) {
   const {
@@ -219,18 +219,18 @@ function SignUp(props, ref) {
             </label>
           </div>
         </div>
-        <div className={cx(classes.error, !state.error && classes.disabled)}>
-          <span>
-            <SvgAlertTriangle width="3rem" />
-            Oops! {state.error}
-          </span>
-        </div>
-        <div className={cx(classes.info, !state.info && classes.disabled)}>
-          <span>{state.info}</span>
-        </div>
-        <div className={cx(classes.success, !state.success && classes.disabled)}>
-          <span>{state.success}</span>
-        </div>
+        <StatusBox
+          className={cx(classes.error, !state.error && classes.disabled)}
+          status="error"
+          subject={state.error}
+        />
+        <StatusBox className={cx(classes.info, !state.info && classes.disabled)} status="notice" subject={state.info} />
+        <StatusBox
+          className={cx(classes.success, !state.success && classes.disabled)}
+          status="done"
+          subject={state.success}
+        />
+
         <div className={classes.btnContainer}>
           <Button
             className={cx(classes.btn, isLogIn && classes.disabled)}

app/components/status-box.js

@@ -0,0 +1,100 @@
+// https://github.com/EnCiv/civil-pursuit/issues/192
+
+import React from 'react'
+import { createUseStyles } from 'react-jss'
+import cx from 'classnames'
+
+import SvgAlertTriangle from '../svgr/alert-triangle'
+import SvgCheckedCircle from '../svgr/checked-circle'
+import SvgWarningTriangle from '../svgr/warning-triangle'
+import SvgNoticeCircle from '../svgr/notice-circle'
+
+function StatusBox(props) {
+  const { className, status = '', subject = '', description = '', ...otherProps } = props
+  const classes = useStylesFromThemeFunction(props)
+
+  let leadText
+  let Icon
+  if (status === 'error') {
+    Icon = SvgAlertTriangle
+  }
+  if (status === 'done') {
+    Icon = SvgCheckedCircle
+  }
+  if (status === 'warn') {
+    Icon = SvgWarningTriangle
+  }
+  if (status === 'notice') {
+    Icon = SvgNoticeCircle
+  } else {
+    console.error(`${status} is not a valid status for StatusBox.`)
+  }
+
+  return (
+    <div className={cx(classes.wrapper, className)} {...otherProps}>
+      <div className={classes.message}>
+        {Icon && <Icon className={classes.icon} />}
+        <span className={classes.subject}>{subject}</span>
+        {description}
+      </div>
+    </div>
+  )
+}
+
+const useStylesFromThemeFunction = createUseStyles(theme => ({
+  wrapper: props => ({
+    padding: '1rem',
+    width: 'auto',
+    display: 'inline-flex',
+    boxShadow: theme.boxShadow,
+    borderRadius: '0.5rem',
+    backgroundColor: (() => {
+      if (props.status === 'error') {
+        return theme.colors.statusBoxErrorBackground
+      }
+      if (props.status === 'done') {
+        return theme.colors.statusBoxDoneBackground
+      }
+      if (props.status === 'warn') {
+        return theme.colors.statusBoxWarnBackground
+      }
+      if (props.status === 'notice') {
+        return theme.colors.statusBoxNoticeBackground
+      } else {
+        return theme.colors.colorPrimary
+      }
+    })(),
+    border: `0.125rem solid ${(() => {
+      if (props.status === 'error') {
+        return theme.colors.statusBoxErrorBorder
+      }
+      if (props.status === 'done') {
+        return theme.colors.statusBoxDoneBorder
+      }
+      if (props.status === 'warn') {
+        return theme.colors.statusBoxWarnBorder
+      }
+      if (props.status === 'notice') {
+        return theme.colors.statusBoxNoticeBorder
+      } else {
+        return ''
+      }
+    })()}`,
+  }),
+  message: {
+    ...theme.font,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  subject: {
+    fontWeight: 'bold',
+    padding: '0rem 1rem',
+  },
+  icon: {
+    width: '1.5rem',
+    height: 'auto',
+    top: '50%',
+  },
+}))
+
+export default StatusBox

app/components/theme.js

@@ -39,6 +39,14 @@ const Theme = {
     statusBadgeInactiveBackground: '#FFFFFF',
     statusBadgeErrorBorder: '#BF1300',
     statusBadgeErrorBackground: '#F9E7E5',
+    statusBoxErrorBackground: '#F9E7E5',
+    statusBoxErrorBorder: '#BF1300',
+    statusBoxDoneBackground: '#E6F3EB',
+    statusBoxDoneBorder: '#005621',
+    statusBoxWarnBackground: '#FFF3D0',
+    statusBoxWarnBorder: '#EBDCB3',
+    statusBoxNoticeBackground: '#DCE8F2',
+    statusBoxNoticeBorder: '#ACC2E2',
     roundTrackerBackground: '#FDFDF7',
     inactiveGray: '#D9D9D9',
     stepContainerActive: 'rgba(6, 51, 92, 0.10)',

assets/svg/alert-triangle.svg

@@ -0,0 +1,39 @@
+import StatusBox from '../app/components/status-box'
+
+export default {
+  component: StatusBox,
+  args: {},
+}
+
+export const statusUndefined = { args: { subject: "This isn't defined." } }
+
+export const statusError = {
+  args: {
+    status: 'error',
+    subject: 'Oops!',
+    description: 'You have an error!',
+  },
+}
+
+export const statusDone = {
+  args: {
+    status: 'done',
+    subject: 'Finished!',
+    description: 'You are done!',
+  },
+}
+export const statusWarn = {
+  args: {
+    status: 'warn',
+    subject: 'Please Review',
+    description: 'You are being warned!',
+  },
+}
+
+export const statusNotice = {
+  args: {
+    status: 'notice',
+    subject: 'Notice',
+    description: 'You are being notified!',
+  },
+}