Feature: #41 Alert.

src/components/base/outline-alert/outline-alert.css

@@ -0,0 +1,28 @@
+/* The default is information. */
+#body {
+  @apply block border-solid border-0 border-l-8 p-4 bg-ui-info text-ui-infoText;
+
+  border-color: var(--ui-infoText);
+}
+
+#header {
+  @apply font-bold text-lg capitalize;
+}
+
+:host([statusType='warning']) #body {
+  @apply bg-ui-warning text-ui-warningText;
+
+  border-color: var(--ui-warningText);
+}
+
+:host([statusType='error']) #body {
+  @apply bg-ui-error text-ui-errorText;
+
+  border-color: var(--ui-errorText);
+}
+
+:host([statusType='success']) #body {
+  @apply bg-ui-success text-ui-successText;
+
+  border-color: var(--ui-successText);
+}

src/components/base/outline-alert/outline-alert.stories.ts

@@ -0,0 +1,158 @@
+import { html, TemplateResult } from 'lit';
+import './outline-alert';
+import { argTypeSlotContent } from '../../base/outline-element/utils/utils';
+import { alertSizes, alertStatusTypes } from './outline-alert';
+import { ifDefined } from 'lit/directives/if-defined';
+
+export default {
+  title: 'Molecules/Alert',
+  component: 'outline-alert',
+  argTypes: {
+    headerSlot: {
+      name: 'slot="outline-alert--header"',
+      description: 'The header slot. For example a header title.',
+      table: {
+        category: 'Slots',
+      },
+      // We aren't setting a control type here so we can edit the value using the infered object.
+    },
+    // We aren't setting a control type here so we can edit the value using the infered object.
+    defaultSlot: {
+      ...argTypeSlotContent.defaultSlot,
+      table: {
+        category: 'Slots',
+      },
+    },
+    statusType: {
+      description:
+        'The status type of the alert. Such as `information` or `warning`.',
+      options: alertStatusTypes,
+      control: { type: 'select' },
+    },
+    size: {
+      description: 'The size of the alert.',
+      options: alertSizes,
+      control: { type: 'select' },
+    },
+    shouldShowIcon: {
+      description: '(not yet implemented) Should we show the icon',
+      control: { type: 'boolean' },
+    },
+    isInteractive: {
+      description: 'Is there an interaction in the alert, such as a button.',
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+This component renders an alert.
+
+## Variation
+
+You can set the type of alert with \`statusType\`.
+
+You can use a smaller alert with \`size\` of \`small\`.
+
+You can remove the icon with \`shouldShowIcon\` set to \`false\`.
+
+You can customize the header by adding a \`outline-alert--header\` slot.
+
+## Accessibility
+
+If the alert has an interaction, you should indicate this with \`isInteractive\` set to \`true\`.
+`,
+      },
+      source: {
+        // This code sample will be used for every example unless overridden.
+        code: `
+<outline-alert
+  statusType="{{ statusType }}"
+  size="{{ size }}"
+  shouldShowIcon="{{ shouldShowIcon }}"
+  isInteractive="{{ isInteractive }}"
+>
+  <span slot="outline-alert--header">{{ headerSlot }}</span>
+  {{ defaultSlot }}
+</outline-alert>
+        `,
+      },
+    },
+  },
+};
+
+const Template = ({
+  headerSlot,
+  defaultSlot,
+  statusType,
+  size,
+  shouldShowIcon,
+  isInteractive,
+}): TemplateResult => {
+  return html`
+    <outline-alert
+      statusType="${ifDefined(statusType)}"
+      size="${ifDefined(size)}"
+      ?shouldShowIcon="${shouldShowIcon}"
+      ?isInteractive="${isInteractive}"
+    >
+      ${ifDefined(headerSlot)} ${ifDefined(defaultSlot)}
+    </outline-alert>
+  `;
+};
+
+export const Information = Template.bind({});
+Information.args = {
+  defaultSlot: html`Here is an informational message.`,
+  statusType: 'information',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  defaultSlot: html`Here is a warning message.`,
+  statusType: 'warning',
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  defaultSlot: html`Here is an error message.`,
+  statusType: 'error',
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  defaultSlot: html`Here is a success message.`,
+  statusType: 'success',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  defaultSlot: html`Here is a small alert message.`,
+  size: 'small',
+};
+
+export const Header = Template.bind({});
+Header.args = {
+  headerSlot: html`
+    <span slot="outline-alert--header">
+      Here is an alert with a custom header.
+    </span>
+  `,
+  defaultSlot: html` Here is a message. `,
+};
+
+export const NoIcon = Template.bind({});
+NoIcon.args = {
+  defaultSlot: html`Here is an alert with no icon.`,
+  shouldShowIcon: false,
+};
+
+export const InteractiveAlert = Template.bind({});
+InteractiveAlert.args = {
+  defaultSlot: html`
+    Here is an alert with an interaction.
+    <outline-link linkhref="#">Click here</outline-link>
+  `,
+  isInteractive: true,
+};

src/components/base/outline-alert/outline-alert.ts

@@ -0,0 +1,67 @@
+import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import componentStyles from './outline-alert.css.lit';
+import { OutlineElement } from '../outline-element/outline-element';
+
+export type AlertSize = 'small' | 'large';
+export const alertSizes: AlertSize[] = ['small', 'large'];
+
+export type AlertStatusType = 'information' | 'warning' | 'error' | 'success';
+export const alertStatusTypes: AlertStatusType[] = [
+  'information',
+  'warning',
+  'error',
+  'success',
+];
+
+/**
+ * The Outline Alert component
+ *
+ * @element outline-alert
+ * @slot default - The alert contents
+ * @slot outline-alert--header - The header in the alert
+ */
+@customElement('outline-alert')
+export class OutlineAlert extends OutlineElement {
+  static styles: CSSResultGroup = [componentStyles];
+
+  @property({ type: String })
+  statusType: AlertStatusType = 'information';
+
+  /**
+   * This is important context for screen readers.
+   */
+  @property({ type: Boolean })
+  isInteractive = false;
+
+  @property({ type: Boolean })
+  shouldShowIcon = true;
+
+  @property({ type: String })
+  size: AlertSize = 'large';
+
+  render(): TemplateResult {
+    // The `body` wrapper is used to avoid styles (like border) that are preventing us from styling `:host`.
+    return html`
+      <div id="body" role="${this.isInteractive ? 'alertdialog' : 'alert'}">
+        ${this.shouldShowIcon === true
+          ? html`
+              <div id="icon">
+                <!--@todo include icon when we have that ready.-->
+              </div>
+            `
+          : null}
+        ${this.size === 'large'
+          ? html`
+              <div id="header">
+                <slot name="outline-alert--header">${this.statusType}</slot>
+              </div>
+            `
+          : null}
+        <div id="message">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}