feat(notification): add fds-notification component (#192)

src/components/notification/fds-notification.scss

@@ -0,0 +1,82 @@
+@import '../../styles/settings/prefix';
+@import '../../styles/tools/notification';
+@import '../../styles/tools/typography';
+
+:host {
+  display: block;
+}
+
+.#{$prefix}-notification {
+  @include notification-base;
+}
+
+.#{$prefix}-notification__content-wrapper {
+  display: flex;
+  flex-flow: column wrap;
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  gap: $spacing-3x-small;
+}
+
+.#{$prefix}-notification__header {
+  @include type-style('heading-06');
+}
+
+.#{$prefix}-notification__content {
+  @include type-style('body-short-01');
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([status="information"]) {
+  @include notification-status(
+    $notification-color-information-background,
+    $notification-color-information-text,
+    $notification-color-information-border,
+  );
+}
+
+:host([status="success"]) {
+  @include notification-status(
+    $notification-color-success-background,
+    $notification-color-success-text,
+    $notification-color-success-border,
+  );
+}
+
+:host([status="warning"]) {
+  @include notification-status(
+    $notification-color-warning-background,
+    $notification-color-warning-text,
+    $notification-color-warning-border,
+  );
+}
+
+:host([status="error"]) {
+  @include notification-status(
+    $notification-color-error-background,
+    $notification-color-error-text,
+    $notification-color-error-border,
+  );
+}
+
+:host([type="toast"]) {
+  min-width: calc($spacing-medium * 18);
+  max-width: calc($spacing-medium * 18);
+}
+
+:host([type="app"]) .#{$prefix}-notification {
+  align-items: center;
+}
+
+:host([type="app"]) .#{$prefix}-notification__content-wrapper {
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+
+

src/components/notification/fds-notification.stories.ts

@@ -0,0 +1,209 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import './fds-notification';
+import '../icon/fds-icon';
+import '../button/fds-button';
+import '../list/fds-list';
+
+export default {
+  title: 'Components/Notification',
+  component: 'fds-notification',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Notification is a component that provides the user with relevant information and updates about the outcome of an action they have taken.',
+      },
+    },
+  },
+  argTypes: {
+    status: {
+      options: ['information', 'success', 'warning', 'error'],
+      control: {
+        type: 'select',
+      },
+    },
+    type: {
+      options: ['line', 'app', 'toast'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    icon: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    closable: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    heading: {
+      control: {
+        type: 'text',
+      },
+    },
+  },
+  args: {
+    status: 'information',
+    type: 'line',
+    icon: false,
+    closable: false,
+  },
+};
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export const Base = (args: any) => html`
+  <fds-notification
+    status=${ifDefined(args.status)}
+    type=${ifDefined(args.type)}
+    ?icon=${args.icon}
+    ?closable=${args.closable}
+    heading=${ifDefined(args.heading)}
+  >
+    A notification message goes here
+  </fds-notification>
+`;
+
+export const Statuses = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <fds-notification status="information">
+        An info notification message goes here
+      </fds-notification>
+      <fds-notification status="success">
+        A success notification message goes here
+      </fds-notification>
+      <fds-notification status="warning">
+        A warning notification message goes here
+      </fds-notification>
+      <fds-notification status="error"> An error notification message goes here </fds-notification>
+    </div>
+  `,
+};
+
+export const Types = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <fds-notification type="app" status="information">
+        An info notification message goes here
+      </fds-notification>
+      <fds-notification type="line" status="information">
+        An info notification message goes here
+      </fds-notification>
+      <fds-notification type="toast" status="information">
+        An info notification message goes here
+      </fds-notification>
+    </div>
+  `,
+};
+
+export const WithHeading = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <fds-notification status="information" heading="Informational notification">
+        An info notification message goes here
+      </fds-notification>
+      <fds-notification status="success" heading="Success notification">
+        A success notification message goes here
+      </fds-notification>
+      <fds-notification status="warning" heading="Warning notification">
+        A warning notification message goes here
+      </fds-notification>
+      <fds-notification status="error" heading="Error notification">
+        An error notification message goes here
+      </fds-notification>
+    </div>
+  `,
+};
+
+export const WithIcon = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <fds-notification status="information" heading="Informational notification" icon>
+        An info notification message goes here
+      </fds-notification>
+      <fds-notification status="success" heading="Success notification" icon>
+        A success notification message goes here
+      </fds-notification>
+      <fds-notification status="warning" heading="Warning notification" icon>
+        A warning notification message goes here
+      </fds-notification>
+      <fds-notification status="error" heading="Error notification" icon>
+        An error notification message goes here
+      </fds-notification>
+    </div>
+  `,
+};
+
+export const WithList = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <fds-notification status="information" heading="Informational notification" icon>
+        <fds-list type="bulleted">
+          <fds-list-item>An info notification message goes here</fds-list-item>
+          <fds-list-item>An info notification message goes here</fds-list-item>
+          <fds-list-item>An info notification message goes here</fds-list-item>
+          <fds-list-item>An info notification message goes here</fds-list-item>
+        </fds-list>
+      </fds-notification>
+      <fds-notification status="success" heading="Success notification" icon>
+        <fds-list type="bulleted">
+          <fds-list-item>A success notification message goes here</fds-list-item>
+          <fds-list-item>A success notification message goes here</fds-list-item>
+          <fds-list-item>A success notification message goes here</fds-list-item>
+          <fds-list-item>A success notification message goes here</fds-list-item>
+        </fds-list>
+      </fds-notification>
+      <fds-notification status="warning" heading="Warning notification" icon>
+        <fds-list type="bulleted">
+          <fds-list-item>A warning notification message goes here</fds-list-item>
+          <fds-list-item>A warning notification message goes here</fds-list-item>
+          <fds-list-item>A warning notification message goes here</fds-list-item>
+          <fds-list-item>A warning notification message goes here</fds-list-item>
+        </fds-list>
+      </fds-notification>
+      <fds-notification status="error" heading="Error notification" icon>
+        <fds-list type="bulleted">
+          <fds-list-item>An error notification message goes here</fds-list-item>
+          <fds-list-item>An error notification message goes here</fds-list-item>
+          <fds-list-item>An error notification message goes here</fds-list-item>
+          <fds-list-item>An error notification message goes here</fds-list-item>
+        </fds-list>
+      </fds-notification>
+    </div>
+  `,
+};
+
+export const Closable = {
+  render: () => html`
+    <div style="display: flex; flex-direction: column; gap: 1rem">
+      <fds-notification
+        type="app"
+        status="information"
+        heading="Informational notification"
+        closable
+      >
+        An info notification message goes here
+      </fds-notification>
+      <fds-notification
+        type="line"
+        status="information"
+        heading="Informational notification"
+        closable
+      >
+        An info notification message goes here
+      </fds-notification>
+      <fds-notification
+        type="toast"
+        status="information"
+        heading="Informational notification"
+        closable
+      >
+        An info notification message goes here
+      </fds-notification>
+    </div>
+  `,
+};

src/components/notification/fds-notification.ts

@@ -0,0 +1,77 @@
+import { html, LitElement, TemplateResult, unsafeCSS } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import style from './fds-notification.scss';
+
+export type NotificationType = 'line' | 'toast' | 'app';
+export type NotificationStatus = 'information' | 'success' | 'warning' | 'error';
+
+@customElement('fds-notification')
+export class FdsNotification extends LitElement {
+  static get styles() {
+    return [unsafeCSS(style)];
+  }
+
+  @property({ type: String, reflect: true })
+  type: NotificationType = 'line';
+
+  @property({ type: String, reflect: true })
+  status: NotificationStatus = 'information';
+
+  @property({ type: String, reflect: true })
+  heading?: string;
+
+  @property({ type: Boolean, reflect: true })
+  closable = false;
+
+  @property({ type: Boolean, reflect: true })
+  icon?: boolean;
+
+  @property({ type: Boolean, reflect: true })
+  hidden = false;
+
+  private handleClose() {
+    this.hidden = true;
+  }
+
+  private getIconName() {
+    switch (this.status) {
+      case 'success':
+        return 'circle-check';
+      case 'warning':
+        return 'circle-exclamation';
+      case 'error':
+        return 'circle-minus';
+      default:
+        return 'circle';
+    }
+  }
+
+  render(): TemplateResult {
+    return html`<div class="fds-notification" role="alert" aria-hidden="${this.hidden}">
+      ${this.icon
+        ? html`<fds-icon icon-style="fas" name="${this.getIconName()}"></fds-icon>`
+        : null}
+      <div class="fds-notification__content-wrapper">
+        ${this.heading
+          ? html`<span class="fds-notification__header">
+              <slot name="header">${this.heading}</slot>
+            </span>`
+          : null}
+        <div part="content" class="fds-notification__content">
+          <slot></slot>
+        </div>
+      </div>
+      ${this.closable
+        ? html`<fds-button
+            class="fds-notification__close-button"
+            variant="ghost"
+            aria-label="close"
+            size="small"
+            icon="xmark"
+            @click=${this.handleClose}
+          ></fds-button>`
+        : null}
+    </div>`;
+  }
+}

src/index.ts

@@ -11,6 +11,7 @@ export { FdsIcon } from './components/icon/fds-icon';
 export { FdsLink } from './components/link/fds-link';
 export { FdsList } from './components/list/fds-list';
 export { FdsListItem } from './components/list/fds-list-item';
+export { FdsNotification } from './components/notification/fds-notification';
 export { FdsProgressBar } from './components/progress-bar/fds-progress-bar';
 export { FdsRadio } from './components/radio/fds-radio';
 export { FdsRadioGroup } from './components/radio-group/fds-radio-group';