Skip to content

Commit

Permalink
[#44] Adds Alert Banner Component
Browse files Browse the repository at this point in the history
joshuapease committed Sep 24, 2024
1 parent 4daa7e0 commit bf5ca7e
Showing 3 changed files with 60 additions and 2 deletions.
38 changes: 38 additions & 0 deletions templates/_components/alert-banner.twig
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 5 additions & 2 deletions templates/_components/button.twig
Original file line number Diff line number Diff line change
@@ -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,
17 changes: 17 additions & 0 deletions templates/parts-kit/alert-banner/default.twig
Original file line number Diff line number Diff line change
@@ -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 %}

0 comments on commit bf5ca7e

Please sign in to comment.