From bf5ca7ec0d4800df09dd24e66df87d130a135a69 Mon Sep 17 00:00:00 2001
From: Joshua Pease <joshua.pease@viget.com>
Date: Tue, 24 Sep 2024 14:45:15 -0700
Subject: [PATCH] [#44] Adds Alert Banner Component

---
 templates/_components/alert-banner.twig       | 38 +++++++++++++++++++
 templates/_components/button.twig             |  7 +++-
 templates/parts-kit/alert-banner/default.twig | 17 +++++++++
 3 files changed, 60 insertions(+), 2 deletions(-)
 create mode 100644 templates/_components/alert-banner.twig
 create mode 100644 templates/parts-kit/alert-banner/default.twig

diff --git a/templates/_components/alert-banner.twig b/templates/_components/alert-banner.twig
new file mode 100644
index 0000000..8b683c3
--- /dev/null
+++ b/templates/_components/alert-banner.twig
@@ -0,0 +1,38 @@
+
+{# @var string title #}
+{% set title = title ?? null %}
+
+{# @var string description #}
+{% set description = description ?? null %}
+
+{# @var bool dismissible #}
+{% set dismissible = dismissible ?? false %}
+
+<div
+  role="alert"
+  data-component="AlertBanner"
+  aria-live="assertive"
+  aria-atomic="true"
+  class="relative flex flex-col gap-16 bg-sky-100 p-24 dark:bg-gray-600 dark:text-white lg:p-48"
+  x-data="{ dismiss() { this.$root.remove() } }"
+>
+  {% if title %}
+    <h2 class="text-md font-bold">{{ title }}</h2>
+  {% endif %}
+
+  {% if description %}
+    <p>{{ description }}</p>
+  {% endif %}
+
+  {{ dismissible ? include('_components/button.twig', {
+    variant: 'subtle',
+    size: 'sm',
+    icon: 'close',
+    iconOnly: true,
+    class: 'absolute right-24 top-24',
+    text: 'Close',
+    attrs: {
+      'x-on:click': 'dismiss()',
+    },
+  }) }}
+</div>
diff --git a/templates/_components/button.twig b/templates/_components/button.twig
index d74e239..906930e 100644
--- a/templates/_components/button.twig
+++ b/templates/_components/button.twig
@@ -36,7 +36,10 @@
 {# Determine element type #}
 {% set el = as ?? (href and not disabled ? 'a' : 'button') %}
 
-{% tag el with {
+{# @var array attrs #}
+{% set attrs = attrs ?? {} %}
+
+{% tag el with attrs | merge({
   href: not disabled ? href : null,
   disabled: disabled ? true : null,
   type: el == 'button' ? type : null,
@@ -50,7 +53,7 @@
     'btn-sm': size == 'sm',
     'btn-lg': size == 'lg',
   }, class),
-} %}
+}) %}
 
   {{ icon ? icon({
     name: icon,
diff --git a/templates/parts-kit/alert-banner/default.twig b/templates/parts-kit/alert-banner/default.twig
new file mode 100644
index 0000000..f545ead
--- /dev/null
+++ b/templates/parts-kit/alert-banner/default.twig
@@ -0,0 +1,17 @@
+{% extends 'viget-parts-kit/layout.twig' %}
+
+{% block main %}
+  {{ include('_components/alert-banner.twig', {
+    title: 'Dismissible Alert Banner',
+    description: 'Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.',
+    dismissible: true,
+  }) }}
+
+  <hr class="my-48" />
+
+  {{ include('_components/alert-banner.twig', {
+    title: 'Non-Dismissible Alert Banner',
+    description: 'Cillum dolor nisi et sunt in in et ullamco eiusmod duis aute et fugiat excepteur. Sit irure consectetur anim do aliqua excepteur amet nulla magna enim proident incididunt ipsum.',
+    dismissible: false,
+  }) }}
+{% endblock %}