Add support for icons to NoteBox.

A part of this involved increasing padding and border-width to
compensate for the additional space needed for the icon.

Author: dmfalke

packages/libs/coreui/src/components/containers/NoteBox.tsx

@@ -1,19 +1,22 @@
 import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { error, warning, mutedBlue } from '../../definitions/colors';
+import { Error, Info, Warning } from '@material-ui/icons';
 
 export interface Props {
   type: 'info' | 'warning' | 'error';
+  showIcon?: boolean;
   children: ReactNode;
 }
 
 const baseCss = css`
-  border-left: 0.25em solid var(--note-box-border-color);
+  border-left: 0.35em solid var(--note-box-border-color);
   border-radius: 0.25em;
-  padding: 0.5em 1em;
+  padding: 1em 3em;
   background: var(--note-box-bg-color);
   gap: 1em;
   margin-bottom: 1em;
+  position: relative;
 `;
 
 const infoCss = css`
@@ -36,12 +39,33 @@ const errorCss = css`
   ${baseCss};
 `;
 
+const iconCss = css`
+  position: absolute;
+  left: 0.5em;
+  font-size: 1.5em;
+`;
+
 export function NoteBox(props: Props) {
   const finalCss =
     props.type === 'warning'
       ? warningCss
       : props.type === 'error'
       ? errorCss
       : infoCss;
-  return <div css={finalCss}>{props.children}</div>;
+
+  const Icon =
+    props.showIcon === true
+      ? props.type === 'info'
+        ? Info
+        : props.type === 'warning'
+        ? Warning
+        : props.type === 'error'
+        ? Error
+        : null
+      : null;
+  return (
+    <div css={finalCss}>
+      {Icon ? <Icon css={iconCss} /> : null} {props.children}
+    </div>
+  );
 }

packages/libs/coreui/src/stories/containers/NoteBox.stories.tsx

@@ -11,22 +11,25 @@ export default {
 
 const Template: Story<Props> = function Template(props) {
   return (
-    <UIThemeProvider
-      theme={{
-        palette: {
-          primary: { hue: mutedGreen, level: 500 },
-          secondary: { hue: mutedMagenta, level: 500 },
-        },
-      }}
-    >
-      <NoteBox {...props} />
-    </UIThemeProvider>
+    <div style={{ fontFamily: 'sans-serif' }}>
+      <UIThemeProvider
+        theme={{
+          palette: {
+            primary: { hue: mutedGreen, level: 500 },
+            secondary: { hue: mutedMagenta, level: 500 },
+          },
+        }}
+      >
+        <NoteBox {...props} />
+      </UIThemeProvider>
+    </div>
   );
 };
 
-export const Info = Object.assign(Template.bind({}), {
+export const InfoWithoutIcon = Object.assign(Template.bind({}), {
   args: {
     type: 'info',
+    showIcon: false,
     children: (
       <div>
         This is some general information about the content that follows on the
@@ -36,18 +39,20 @@ export const Info = Object.assign(Template.bind({}), {
   },
 });
 
-export const Warning = Object.assign(Template.bind({}), {
+export const WarningWithoutIcon = Object.assign(Template.bind({}), {
   args: {
     type: 'warning',
+    showIcon: false,
     children: (
       <div>This is a warning about the content that follows on the page.</div>
     ),
   },
 });
 
-export const Error = Object.assign(Template.bind({}), {
+export const ErrorWithoutIcon = Object.assign(Template.bind({}), {
   args: {
     type: 'error',
+    showIcon: false,
     children: (
       <div>
         This is an error message about the content that follows on the page.
@@ -56,9 +61,10 @@ export const Error = Object.assign(Template.bind({}), {
   },
 });
 
-export const LongContent = Object.assign(Template.bind({}), {
+export const LongContentWithoutIcon = Object.assign(Template.bind({}), {
   args: {
     type: 'info',
+    showIcon: false,
     children: (
       <div>
         Lorem ipsum odor amet, consectetuer adipiscing elit. Faucibus morbi ac
@@ -72,3 +78,79 @@ export const LongContent = Object.assign(Template.bind({}), {
     ),
   },
 });
+
+export const InfoWithIcon = Object.assign(Template.bind({}), {
+  args: {
+    type: 'info',
+    showIcon: true,
+    children: (
+      <div>
+        This is some general information about the content that follows on the
+        page.
+      </div>
+    ),
+  },
+});
+
+export const WarningWithIcon = Object.assign(Template.bind({}), {
+  args: {
+    type: 'warning',
+    showIcon: true,
+    children: (
+      <div>This is a warning about the content that follows on the page.</div>
+    ),
+  },
+});
+
+export const ErrorWithIcon = Object.assign(Template.bind({}), {
+  args: {
+    type: 'error',
+    showIcon: true,
+    children: (
+      <div>
+        This is an error message about the content that follows on the page.
+      </div>
+    ),
+  },
+});
+
+export const LongContentWithIcon = Object.assign(Template.bind({}), {
+  args: {
+    type: 'info',
+    showIcon: true,
+    children: (
+      <div>
+        Lorem ipsum odor amet, consectetuer adipiscing elit. Faucibus morbi ac
+        ultrices purus urna tristique mattis consequat. Posuere volutpat
+        facilisi natoque dictumst dignissim magna dapibus. Taciti vel a etiam
+        curabitur velit torquent. Fusce interdum dictum vulputate sollicitudin
+        nulla. Orci placerat congue odio aptent enim mauris. Turpis nec rhoncus
+        eleifend eleifend eget. Auctor sed nullam vestibulum quisque egestas;
+        nullam aenean ante.
+      </div>
+    ),
+  },
+});
+
+export const ExpandableContentWithIcon = Object.assign(Template.bind({}), {
+  args: {
+    type: 'info',
+    showIcon: true,
+    children: (
+      <details>
+        <summary style={{ cursor: 'pointer' }}>
+          There are some interesting things about this...
+        </summary>
+        <p>
+          Lorem ipsum odor amet, consectetuer adipiscing elit. Faucibus morbi ac
+          ultrices purus urna tristique mattis consequat. Posuere volutpat
+          facilisi natoque dictumst dignissim magna dapibus. Taciti vel a etiam
+          curabitur velit torquent. Fusce interdum dictum vulputate sollicitudin
+          nulla. Orci placerat congue odio aptent enim mauris. Turpis nec
+          rhoncus eleifend eleifend eget. Auctor sed nullam vestibulum quisque
+          egestas; nullam aenean ante.
+        </p>
+      </details>
+    ),
+  },
+});