[GHI #22] Flash Documentation (#68)

This PR cleans up the flash message implementation and adds documentation

src/components/flash.scss

@@ -1,21 +1,29 @@
 .flash {
+  display: inline-grid;
+  grid-auto-flow: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--rm-space-small);
+
   position: fixed;
   right: var(--rm-space-large);
-  display: flex;
-  align-items: center;
   top: var(--rm-space-large);
-  z-index: var(--rm-z-index-alert-group);
+  animation: rmSlideInOutFlash var(--rm-transition-flash) normal forwards;
+
   width: auto;
+
+  z-index: var(--rm-z-index-alert-group);
   padding: var(--rm-space-x-small) var(--rm-space-medium);
   font-size: var(--rm-font-small);
-  background: var(--rm-color-white);
   box-shadow: var(--rm-shadow-x-small);
   border-radius: var(--rm-radius-small);
 
-  animation: rmSlideInOutFlash var(--rm-transition-flash) normal forwards;
+  background: var(--rm-color-background);
+  color: var(--rm-color-on-background);
 
   border-left-width: var(--rm-border-width-x-large);
   border-left-style: solid;
+  border-color: var(--rm-color-on-background);
 }
 
 .flash--notice {
@@ -40,12 +48,12 @@
 
 .flash__message-type {
   font-weight: bold;
-  color: var(--rm-color-black);
+  color: var(--rm-color-on-background);
 }
 
 .flash__message {
   font-size: var(--rm-font-x-small);
-  color: var(--rm-color-black);
+  color: var(--rm-color-on-background);
 }
 
 .flash--demo {

src/stories/Flash.stories.js

@@ -0,0 +1,46 @@
+import { createFlash } from './Flash/Flash.js';
+import FlashDocs from './Flash/Flash.mdx';
+
+export default {
+  title: 'Components/Flash',
+  argTypes: {
+    label: { control: 'text' },
+    style: {
+      control: { type: 'select' },
+      options: ['notice', 'info', 'alert', 'warning'],
+    },
+  },
+  parameters: {
+    docs: {
+      page: FlashDocs
+    },
+  },
+};
+
+const Template = ({ label, ...args }) => {
+  return createFlash({ label, ...args });
+};
+
+export const Notice = Template.bind({});
+Notice.args = {
+  label: 'Success Message',
+  style: 'notice',
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  label: 'Info Message',
+  style: 'info',
+};
+
+export const Alert = Template.bind({});
+Alert.args = {
+  label: 'Alert Message',
+  style: 'alert',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  label: 'Warning Message',
+  style: 'warning',
+};

src/stories/Flash/Flash.js

@@ -0,0 +1,36 @@
+import { createIcon } from '../Icon/Icon.js'
+
+const capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1)
+
+export const createFlash = ({
+  label,
+  style = 'notice',
+}) => {
+  const flash = document.createElement('div');
+
+  flash.className = [
+    'flash',
+    'flash--demo',
+    `flash--${style}`,
+  ].filter(Boolean).join(' ')
+
+  const iconMapping = {
+    'notice': 'check_circle',
+    'info': 'info',
+    'alert': 'cancel',
+    'warning': 'warning',
+  }
+
+  flash.innerHTML += "\n  "
+
+  flash.appendChild(createIcon({ name: iconMapping[style], size: 'large' }))
+
+  flash.innerHTML += `
+  <div>
+    <div class='flash__message-type'>${capitalize(style)}</div>
+    <div class='flash__message'>${label}</div>
+  </div>
+`
+
+  return flash
+}

src/stories/Flash/Flash.mdx

@@ -0,0 +1,48 @@
+import { Primary, ArgsTable, Canvas, Story } from "@storybook/addon-docs";
+
+import imageFile from './flash.gif';
+
+# Flash
+
+<img src={imageFile} alt='Flash' />
+
+Flash classes provide notification style alert messages that "Flash" onto the screen (top right corner) with application information.
+
+**Note:** The `flash--demo` class that each example here uses is not intended to be used in a real application. It is only used here to allow for showing the flash messages in a static way.
+
+## Notice
+
+`.flash--notice` Provides a success styled message using the alert green color with a circle checkmark icon.
+
+<Canvas withToolbar>
+  <Story id='components-flash--notice' />
+</Canvas>
+
+## Info
+
+`.flash--info` Provides an info styled message using the alert blue color with a circle info icon.
+
+<Canvas withToolbar>
+  <Story id='components-flash--info' />
+</Canvas>
+
+## Alert
+
+`.flash--alert` Provides an alert styled message using the alert danger color with a circle cross icon.
+
+<Canvas withToolbar>
+  <Story id='components-flash--alert' />
+</Canvas>
+
+## Warning
+
+`.flash--warning` Provides an warning styled message using the alert warning color with a triangle exclamation icon.
+
+<Canvas withToolbar>
+  <Story id='components-flash--warning' />
+</Canvas>
+
+## Playground
+
+<Primary/>
+<ArgsTable of='.' story='^'/>