feat(bootstrap4): alert (for TACC project pages redesign)

dist/bootstrap4/components/alert/demo.css

@@ -0,0 +1 @@
+/*! @tacc/core-styles 2.57.0-rc1+ | MIT | github.com/TACC/Core-Styles */.alert{margin-block:1em}

src/lib/_imports/bootstrap4/components/alert.css

@@ -0,0 +1,76 @@
+@import url("../../tools/x-message.css");
+
+.alert {
+  border-radius: unset; /* to undo bootstrap */
+
+  @mixin message;
+  @mixin message--scope-section;
+}
+
+.alert-primary,
+.alert-secondary,
+.alert-success,
+.alert-danger,
+.alert-warning,
+.alert-info,
+.alert-light,
+.alert-dark {
+  color: unset; /* to undo bootstrap */
+}
+
+.alert-primary {
+  @mixin message--type-info---message--scope-section;
+}
+.alert-secondary {
+  @mixin message--type-extra---message--scope-section;
+}
+.alert-success {
+  @mixin message--type-success---message--scope-section;
+}
+.alert-danger {
+  @mixin message--type-error---message--scope-section;
+}
+.alert-warning {
+  @mixin message--type-warning---message--scope-section;
+}
+.alert-info {
+  @mixin message--type-info---message--scope-section;
+}
+.alert-light {
+  @mixin message--type-info---message--scope-section;
+}
+.alert-dark {
+  @mixin message--type-info---message--scope-section;
+}
+
+.alert hr {
+  --global-space--hr-buffer-below: 1em;
+  --global-space--hr-buffer-above: 1em;
+
+  border-top-color: unset;
+}
+
+.alert-link {
+  font-weight: unset;
+  color: unset;
+}
+
+.alert-heading {
+  font-weight: bold;
+}
+
+.alert-dismissible {
+  padding-right: calc(12px + 1ch);
+
+  & .close {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    padding: 8px 12px;
+    width: 1ch;
+    box-sizing: content-box;
+
+    color: inherit;
+  }
+}

src/lib/_imports/bootstrap4/components/alert/alert.hbs

@@ -0,0 +1,36 @@
+{{#groups}}
+  <section>
+    <h3>{{title}}</h3>
+    {{#types}}
+      <div
+        class="alert alert-{{type}}{{#if dismissible}} alert-dismissible fade show{{/if}}"
+        role="alert"
+      >
+        {{#if ../heading}}
+          <h4 class="alert-heading">{{../heading}}</h4>
+        {{/if}}
+        {{#if ../heading}}
+          <p>
+            {{../message}}{{#if hasHr}} This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.{{/if}}
+            {{#if ../linkText}}
+              <a href="#" class="alert-link">{{../linkText}}</a>
+            {{/if}}
+          </p>
+          {{#if hasHr}}
+            <hr>
+            <p class="mb-0">{{../messageAfterHr}}</p>
+          {{/if}}
+        {{else if ../message}}
+          {{../message}}
+        {{else}}
+          A simple {{type}} alert{{#if ../linkText}} <a href="#" class="alert-link">{{../linkText}}</a>{{/if}}.
+        {{/if}}
+        {{#if dismissible}}
+          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        {{/if}}
+      </div>
+    {{/types}}
+  </section>
+{{/groups}}

src/lib/_imports/bootstrap4/components/alert/config.yml

@@ -0,0 +1,29 @@
+label: Alerts
+context:
+  shouldLoadBootstrap: true
+  # shouldLoadCMS: true # (for expanded message size)
+  groups:
+    - title: Basic
+      linkText: "with a link"
+      types:
+        - type: primary
+        - type: secondary
+        - type: success
+        - type: danger
+        - type: warning
+        - type: info
+        - type: light
+        - type: dark
+    - title: Dismissible
+      message: Holy guacamole! You should check in on some of those fields below.
+      types:
+        - type: warning
+          dismissible: true
+    - title: with Heading
+      heading: Well done!
+      message: Aww yeah, you successfully read this important alert message.
+      messageAfterHr: Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+      types:
+        - type: secondary
+        - type: success
+          hasHr: true

src/lib/_imports/bootstrap4/components/alert/demo.css

@@ -0,0 +1,5 @@
+/* Pattern library only */
+
+.alert {
+  margin-block: 1em;
+}

src/lib/_imports/bootstrap4/components/alert/readme.md

@@ -0,0 +1 @@
+To skin [Bootstrap v4 Alerts](https://getbootstrap.com/docs/4.6/components/alerts/) for Django CMS Bootstrap 4 Alert plugin output.

src/lib/_imports/components/c-message--expanded.css

@@ -1,7 +1,14 @@
 @import url("./c-message.selectors.css");
 
 :--c-message--scope-section,
-:--c-message--scope-global {
+:--c-message--scope-global,
+.alert {
   padding-block: 20px;
   padding-inline: 30px;
 }
+
+/* To match dismissible inset to expanded alert inline padding */
+/* SEE: ../bootstrap4/components/alert.css */
+.alert-dismissible {
+  padding-right: calc(30px + 1ch);
+}

src/lib/_imports/core-styles.bootstrap4.css

@@ -1,6 +1,7 @@
 /*! core-styles.bootstrap4.css */
 /* DO NOT ADD STYLES HERE; ONLY IMPORT OTHER STYLESHEETS */
 
+@import url("./bootstrap4/components/alert.css");
 @import url("./bootstrap4/components/btn.css");
 @import url("./bootstrap4/components/card.css");
 @import url("./bootstrap4/components/media.css");