Merge pull request #105 from qld-gov-au/QOLOE-9-Page-Alert-make-headi…

…ng-optional QOLOE-9 Fix for PageAlert color and optional heading
qld-gov-au · May 9, 2024 · 7b0d92b · 7b0d92b
2 parents 7c3bf4a + 83a04da
commit 7b0d92b
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/components/bs5/inpageAlert/inpageAlert.hbs b/src/components/bs5/inpageAlert/inpageAlert.hbs
@@ -1,4 +1,6 @@
 <div class="alert {{variantClass}} {{customClass}}" role="alert">
-    <h4 class="alert-heading">{{{ heading }}}</h4>
+    {{#if heading}}
+    <div class="alert-heading" role="heading">{{{ heading }}}</div>
+    {{/if}}
     {{{ content }}}
 </div>
diff --git a/src/components/bs5/inpageAlert/inpageAlert.scss b/src/components/bs5/inpageAlert/inpageAlert.scss
@@ -9,9 +9,9 @@
 .light-alt .alert,
 .dark .alert,
 .dark-alt .alert {
-
     --qld-headings-color: var(--#{$prefix}light-text-text);
     --qld-body-color: var(--#{$prefix}light-text-text);
+    --qld-alert-color: var(--#{$prefix}light-text-text);
     --qld-alert-bg: #FFF;
     --qld-link-color: #{$link-color};
     --qld-link-hover-color: #{$link-hover-color};
@@ -32,6 +32,7 @@
     .alert-heading {
         line-height: 1.5;
         font-size: 1.5rem;
+        font-weight: 600;
         margin: 0 0 1rem 0;
         padding: 0;
         color: var(--qld-headings-color);