fix: #1588 add important alert with title (#1609)

Co-authored-by: codecalm <[email protected]>
Co-authored-by: Paweł Kuna <[email protected]>

.changeset/hip-jobs-double.md

@@ -0,0 +1,5 @@
+---
+"@tabler/core": minor
+---
+
+Adding `alerts.html` page with example of alerts.

docs/components/alerts.mdx

@@ -352,6 +352,21 @@ Add primary and secondary buttons to your alert modals if you want users to take
 If you want your alert to be really eye-catching, you can add a class `alert-important`.
 
 ```html example
+<div class="alert alert-important alert-success alert-dismissible" role="alert">
+  <div class="d-flex">
+    <div>
+		<svg xmlns="http://www.w3.org/2000/svg" class="icon alert-icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+			<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+			<path d="M5 12l5 5l10 -10"></path>
+		</svg>
+    </div>
+    <div>
+		 <h4 class="alert-title">Wow! Everything worked!</h4>
+		 <div class="text-secondary">Your account has been saved!</div>
+    </div>
+  </div>
+  <a class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="close"></a>
+</div>
 <div class="alert alert-important alert-danger alert-dismissible" role="alert">
   <div class="d-flex">
     <div>

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

src/pages/_includes/ui/alert.html

@@ -1,23 +1,44 @@
-<div class="alert{% if include.important %} alert-important{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
+{% 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 %}
+
+<div class="alert{% if include.important %} alert-important{% endif %} alert-{{ include.type | default: 'primary'}}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
 
-	{% if include.icon or include.person-id %}
+	{% if include.show-icon or include.person-id %}
 		<div class="d-flex">
 		<div>
 			{% 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 %}
 		</div>
 		<div>
 	{% endif %}
 
 
-	{% if include.description %}
+	{% if include.show-description or include.description %}
 		<h4 class="alert-title">{{ include.text | default: "This is a custom alert box!" }}</h4>
-		<div class="text-secondary">{{ include.description }}</div>
+		<div class="text-secondary">{{ include.description | default: description }}</div>
 	{% else %}
-		{{ include.text | default: "This is a custom alert box!" }}
+		{{ include.title | default: title }}
 	{% endif %}
 
 	{% if include.buttons %}
@@ -27,10 +48,10 @@
 	</div>
 	{% endif %}
 
-	{% if include.icon or include.person-id %}
+	{% if include.show-icon or include.person-id %}
 		</div>
 		</div>
 	{% endif %}
 
-	{% if include.close %}<a class="btn-close{% if include.important %} btn-close-white{% endif %}" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
+	{% if include.show-close %}<a class="btn-close" data-bs-dismiss="alert" aria-label="close"></a>{% endif %}
 </div>

src/pages/alerts.html

@@ -0,0 +1,67 @@
+---
+title: Alerts
+menu: base.alerts
+page-header: Alerts
+---
+
+<div class="row row-cards">
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Basic alerts</h2>
+				<p class="text-secondary">Wrap any text and an optional dismiss button in <code>.alert</code> and one of the four contextual classes (e.g., <code>.alert-success</code>) for basic alert messages.</p>
+				{% include ui/alert.html type="success" %}
+				{% include ui/alert.html type="warning" %}
+				{% include ui/alert.html type="danger" %}
+				{% include ui/alert.html type="info" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Alerts with icon</h2>
+				<p class="text-secondary">Build on any alert by adding an optional icon.</p>
+				{% 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 %}
+			</div>
+		</div>
+	</div>
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Dismissible alerts</h2>
+				<p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
+				{% 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 %}
+			</div>
+		</div>
+	</div>
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Alert with a description</h2>
+				<p class="text-secondary">Build on any alert by adding an optional <code>.alert-dismissible</code> and close button.</p>
+				{% 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 %}
+			</div>
+		</div>
+	</div>
+	<div class="col-lg-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Important alerts</h2>
+				{% 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 %}
+			</div>
+		</div>
+	</div>
+</div>

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, {