diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml
index b2b238d4ccf850d1bb77c174048b34276027e665..6fdf14facc604b83e1dba741d42f4c045efd932f 100644
--- a/src/pages/_data/menu.yml
+++ b/src/pages/_data/menu.yml
@@ -8,6 +8,9 @@ base:
icon: package
columns: 2
children:
+ alerts:
+ title: Alerts
+ url: alerts.html
accordion:
title: Accordion
url: accordion.html
diff --git a/src/pages/_includes/ui/alert.html b/src/pages/_includes/ui/alert.html
index c98ba32a1c4bbc41b73ba15bac48b005b69c43a9..a30c7e0ff44ef04f3fdd2a1df0c5a386f1912681 100644
--- a/src/pages/_includes/ui/alert.html
+++ b/src/pages/_includes/ui/alert.html
@@ -1,23 +1,44 @@
-
+{% assign icon = include.icon %}
+{% unless icon %}
+ {% if include.type == 'success' %}
+ {% assign icon = 'check' %}
+ {% assign title = 'Wow! Everything worked!' %}
+ {% assign description = 'Your account has been saved!' %}
+ {% elsif include.type == 'warning' %}
+ {% assign icon = 'alert-triangle' %}
+ {% assign title = 'Uh oh, something went wrong' %}
+ {% assign description = 'Sorry! There was a problem with your request.' %}
+ {% elsif include.type == 'danger' %}
+ {% assign icon = 'alert-circle' %}
+ {% assign title = "I'm so sorry…" %}
+ {% assign description = 'Something went wrong. Please try again.' %}
+ {% elsif include.type == 'info' %}
+ {% assign icon = 'info-circle' %}
+ {% assign title = 'Did you know?' %}
+ {% assign description = 'Here is something that you might like to know.' %}
+ {% endif %}
+{% endunless %}
+
+
- {% if include.icon or include.person-id %}
+ {% if include.show-icon or include.person-id %}
{% if include.person-id %}{% include ui/avatar.html person-id=include.person-id class="float-start me-3" %}{% endif %}
- {% if include.icon %}
- {% include ui/icon.html icon=include.icon class="alert-icon" %}
+ {% if include.show-icon %}
+ {% include ui/icon.html icon=icon class="alert-icon" %}
{% endif %}
{% endif %}
- {% if include.description %}
+ {% if include.show-description or include.description %}
{{ include.text | default: "This is a custom alert box!" }}
-
{{ include.description }}
+
{{ include.description | default: description }}
{% else %}
- {{ include.text | default: "This is a custom alert box!" }}
+ {{ include.title | default: title }}
{% endif %}
{% if include.buttons %}
@@ -27,10 +48,10 @@
{% endif %}
- {% if include.icon or include.person-id %}
+ {% if include.show-icon or include.person-id %}
{% endif %}
- {% if include.close %}
{% endif %}
+ {% if include.show-close %}
{% endif %}
diff --git a/src/pages/alerts.html b/src/pages/alerts.html
new file mode 100644
index 0000000000000000000000000000000000000000..1dfe54b5b78fe345e3b83983eefcc9fab9c88bb2
--- /dev/null
+++ b/src/pages/alerts.html
@@ -0,0 +1,67 @@
+---
+title: Alerts
+menu: base.alerts
+page-header: Alerts
+---
+
+
+
+
+
+
Basic alerts
+
Wrap any text and an optional dismiss button in .alert
and one of the four contextual classes (e.g., .alert-success
) for basic alert messages.
+ {% include ui/alert.html type="success" %}
+ {% include ui/alert.html type="warning" %}
+ {% include ui/alert.html type="danger" %}
+ {% include ui/alert.html type="info" %}
+
+
+
+
+
+
+
Alerts with icon
+
Build on any alert by adding an optional icon.
+ {% include ui/alert.html type="success" show-icon=true %}
+ {% include ui/alert.html type="warning" show-icon=true %}
+ {% include ui/alert.html type="danger" show-icon=true %}
+ {% include ui/alert.html type="info" show-icon=true %}
+
+
+
+
+
+
+
Dismissible alerts
+
Build on any alert by adding an optional .alert-dismissible
and close button.
+ {% include ui/alert.html type="success" show-icon=true show-close=true %}
+ {% include ui/alert.html type="warning" show-icon=true show-close=true %}
+ {% include ui/alert.html type="danger" show-icon=true show-close=true %}
+ {% include ui/alert.html type="info" show-icon=true show-close=true %}
+
+
+
+
+
+
+
Alert with a description
+
Build on any alert by adding an optional .alert-dismissible
and close button.
+ {% include ui/alert.html type="success" show-description=true show-icon=true %}
+ {% include ui/alert.html type="warning" show-description=true show-icon=true %}
+ {% include ui/alert.html type="danger" show-description=true show-icon=true %}
+ {% include ui/alert.html type="info" show-description=true show-icon=true %}
+
+
+
+
+
+
+
Important alerts
+ {% include ui/alert.html important=true type="success" show-icon=true show-close=true %}
+ {% include ui/alert.html important=true type="warning" show-icon=true show-close=true %}
+ {% include ui/alert.html important=true type="danger" show-icon=true show-close=true %}
+ {% include ui/alert.html important=true type="info" show-icon=true show-close=true %}
+
+
+
+
diff --git a/src/scss/ui/_alerts.scss b/src/scss/ui/_alerts.scss
index 5833f283a511b21a7b7ccc476015fdd1d4c66207..bfe66cb3657af7510cc590e1bf349a3b9e678d0d 100644
--- a/src/scss/ui/_alerts.scss
+++ b/src/scss/ui/_alerts.scss
@@ -1,6 +1,6 @@
.alert {
--#{$prefix}alert-color: #{var(--#{$prefix}secondary)};
- background: $white;
+ --tblr-alert-bg: #{var(--#{$prefix}surface)};
border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
border-left: .25rem var(--#{$prefix}border-style) var(--#{$prefix}alert-color);
box-shadow: $alert-shadow;
@@ -16,13 +16,18 @@
color: #fff;
.alert-icon,
- .alert-link {
+ .alert-link,
+ .alert-title {
color: inherit;
}
.alert-link:hover {
color: inherit;
}
+
+ .btn-close {
+ filter: var(--#{$prefix}btn-close-white-filter);
+ }
}
.alert-link, {