feat(alert): add alert component (#105)

Co-authored-by: Mario Biehs <[email protected]>
Co-authored-by: Christoph Fricke <[email protected]>

.changeset/late-pets-drop.md

@@ -0,0 +1,6 @@
+---
+"@holisticon/hap-documentation": minor
+"@holisticon/hap-foundation": minor
+---
+
+Added CSS classes and documentation for alert component.

packages/documentation/src/elements/alert/alert.mdx

@@ -0,0 +1,28 @@
+import { Meta, Canvas } from "@storybook/blocks";
+import * as AlertStories from "./alert.stories.ts";
+
+<Meta title="Elements/alert/Alerts" />
+
+# Alerts
+
+The following kinds of alerts are available.
+
+## Alert Positive
+
+<Canvas of={AlertStories.Positive} />
+
+## Alert Caution
+
+<Canvas of={AlertStories.Caution} />
+
+## Alert Critical
+
+<Canvas of={AlertStories.Critical} />
+
+## Alert Informative
+
+<Canvas of={AlertStories.Neutral} />
+
+## Alert Promoted
+
+<Canvas of={AlertStories.New} />

packages/documentation/src/elements/alert/alert.stories.ts

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+type AlertVariant =
+  | "positive"
+  | "caution"
+  | "critical"
+  | "informative"
+  | "promoted";
+
+interface AlertArgs {
+  label: string;
+  variant: AlertVariant;
+  icon?: string;
+  iconbutton?: string;
+}
+
+const meta: Meta<AlertArgs> = {
+  args: {
+    label: "Badge",
+    icon: "[Icon]",
+    iconbutton: "[Iconbutton]",
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["positive", "caution", "critical", "informative", "promoted"],
+    },
+  },
+
+  render: (args) => html`
+    <div style="display:flex;gap:0.5rem;flex-direction:column;padding:2rem">
+      <div class="hap-alert ${args.variant}">
+        <div class="hap-alert-content">
+          <span class="icon">${args.icon}</span>
+          <span>${args.label}</span>
+        </div>
+        <span class="iconbutton">${args.iconbutton}</span>
+      </div>
+    </div>
+  `,
+};
+
+export default meta;
+type Story = StoryObj<AlertArgs>;
+
+export const Positive: Story = {
+  args: { variant: "positive", label: "This is a positive message." },
+};
+
+export const Caution: Story = {
+  args: { variant: "caution", label: "This is a cautionary message." },
+};
+
+export const Critical: Story = {
+  args: { variant: "critical", label: "This is a critical message." },
+};
+
+export const Neutral: Story = {
+  args: { variant: "informative", label: "This is an informative message." },
+};
+
+export const New: Story = {
+  args: { variant: "promoted", label: "This is a promoted message." },
+};

packages/foundation/src/atomic-playfulness.css

@@ -5,3 +5,4 @@
 @import "./elements/typography.css";
 @import "./elements/button.css";
 @import "./elements/badge.css";
+@import "./elements/alert.css";

packages/foundation/src/elements/alert.css

@@ -0,0 +1,77 @@
+.hap-alert {
+  font-family: var(--hap-typography-font-family-body);
+  font-size: var(--hap-typography-font-size-bodytext-standard);
+  font-weight: var(--hap-typography-font-weight-regular);
+  letter-spacing: var(--hap-typography-letter-spacing-lg);
+  line-height: var(--hap-typography-line-height-bodytext-standard-multiline);
+  border: none;
+  border-radius: var(--hap-radius-rounded);
+  padding: var(--hap-spacing-md) var(--hap-spacing-md);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--hap-spacing-md);
+  width: 100%;
+
+  &.positive {
+    color: light-dark(
+      var(--hap-color-feedback-positive-light),
+      var(--hap-color-feedback-positive-dark)
+    );
+    background-color: light-dark(
+      var(--hap-color-feedback-positive-dark),
+      var(--hap-color-feedback-positive-light)
+    );
+  }
+
+  &.caution {
+    color: light-dark(
+      var(--hap-color-feedback-caution-light),
+      var(--hap-color-feedback-caution-dark)
+    );
+    background-color: light-dark(
+      var(--hap-color-feedback-caution-dark),
+      var(--hap-color-feedback-caution-light)
+    );
+  }
+
+  &.critical {
+    color: light-dark(
+      var(--hap-color-feedback-critical-light),
+      var(--hap-color-feedback-critical-dark)
+    );
+    background-color: light-dark(
+      var(--hap-color-feedback-critical-dark),
+      var(--hap-color-feedback-critical-light)
+    );
+  }
+
+  &.informative {
+    color: light-dark(
+      var(--hap-color-feedback-neutral-light),
+      var(--hap-color-feedback-neutral-dark)
+    );
+    background-color: light-dark(
+      var(--hap-color-feedback-neutral-dark),
+      var(--hap-color-feedback-neutral-light)
+    );
+  }
+
+  &.promoted {
+    color: light-dark(
+      var(--hap-color-feedback-new-light),
+      var(--hap-color-feedback-new-dark)
+    );
+    background-color: light-dark(
+      var(--hap-color-feedback-new-dark),
+      var(--hap-color-feedback-new-light)
+    );
+  }
+}
+
+.hap-alert-content {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  gap: var(--hap-spacing-sm);
+}