BSD fixes #329: Create initial alert component.

stories/assets/styles/global/global.scss

@@ -9,13 +9,15 @@ $c-purple: #7d0096;
 $c-green: #deec1c;
 $c-maroon: #55052a;
 $c-orange: #fda307;
+$c-yellow: color("yellow-20v");
 $c-red-orange: #e02f00;
 $c-gray: color("gray-4");
 
 $font-ui: "proxima-nova", "Proxima Nova", Arial, Helvetica, sans-serif;
 $font-heading: "novel-pro", Georgia, Times, "Times New Roman", serif;
 
 :root {
+  // Theme colors
   --c-primary: #{$c-blue--dark};
   --c-primary-alt: #{$c-purple};
   --c-accent-cool: #{$c-blue--light};
@@ -25,6 +27,14 @@ $font-heading: "novel-pro", Georgia, Times, "Times New Roman", serif;
   --c-accent-warm-dark: #{$c-maroon};
   --c-accent-vivid: #{$c-green};
   --c-base: #{$c-gray};
+  // State colors
+  // Info - Closest USWDS color is blue-cool-10v.
+  --c-info: var(--c-accent-cool);
+  --c-info-dark: #{color("blue-cool-20v")};
+  --c-info-darker: #{color("blue-cool-30v")};
+  // Warning
+  --c-warning: #{$c-yellow};
+  // Fonts
   --font-heading: #{$font-heading};
   --font-ui: #{$font-ui};
 }

stories/components/alert/alert.html.twig

@@ -0,0 +1,37 @@
+{#
+/**
+  * Alert component.
+  *
+  * Available variables:
+  * - title: Optional string for the alert header.
+  * - variant: String alert type: info, error, warning.
+  * - text: A string of the alert body text.
+**/
+#}
+
+
+{% set heading_type = heading_type | default("h4") %}
+
+{% if attributes is empty %}
+  {% set attributes = create_attribute() %}
+{% endif %}
+
+{% set alert_classes = [
+  "bix-alert",
+  (variant ? "bix-alert--" ~ variant),
+] | merge(additional_classes | default([])) %}
+
+<div{{ attributes.addClass(alert_classes) }}>
+  <div class="bix-alert__body">
+  {% if title %}
+    <{{ heading_type }} class="bix-alert__heading">
+      {{ title }}
+    </{{ heading_type }}>
+  {% endif %}
+  {% if text %}
+    <div class="bix-alert__text">
+      {{ text }}
+    </div>
+  {% endif %}
+  </div>
+</div>

stories/components/alert/alert.scss

@@ -0,0 +1,29 @@
+@use "uswds-core" as *;
+
+.bix-alert {
+  --_alert-color: var(--alert-color, currentColor);
+
+  border-left: 4px solid var(--_alert-color);
+
+  &__heading {
+    font-family: var(--font-ui);
+    font-weight: 600;
+    margin-top: 0;
+  }
+
+  &__body {
+    padding: units(1.5) units(2.5);
+  }
+
+  &__text > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.bix-alert--info {
+  --alert-color: var(--c-info-darker);
+}
+
+.bix-alert--warning {
+  --alert-color: var(--c-warning);
+}

stories/components/alert/alert.stories.js

@@ -0,0 +1,46 @@
+import Alert from "./alert.html.twig";
+import "./alert.scss";
+
+export default {
+  title: "Components/Alert",
+  tags: ["autodocs"],
+  component: Alert,
+};
+
+const defaultContent = {
+  title: "Important Notice for Applicants",
+  text: `
+    <p>
+      At Bixal, we want to ensure a transparent and secure application process for all candidates. Please note that:
+    </p>
+    <ul>
+      <li>Our recruiters will never request sensitive personal information (such as social security numbers or banking information).</li>
+      <li>Our messages will never include requests to download applications or attachments.</li>
+      <li>Legitimate recruitment communications will always include clear contact details and may reference our public job postings.</li>
+    </ul>
+    <p>
+      If you experience any challenges with your submission or need assistance in completing your application for accessibility purposes, please reach out to us. <strong><a href="mailto:[email protected]">We're here to help</a></strong>!
+    </p>
+  `,
+};
+
+export const Default = {
+  args: {
+    heading_type: null,
+    ...defaultContent,
+  },
+};
+
+export const Info = {
+  args: {
+    ...defaultContent,
+    variant: "info",
+  },
+};
+
+export const Warning = {
+  args: {
+    ...defaultContent,
+    variant: "warning",
+  },
+};