SHS 5130 Use <hr> when there is no color band text (#1398)

* fix(shs-5130): adding hr tag when there is no color band text

* fix(SHS-5130): hr adjustments

* fix(SHS-5130): hr margins and another instance

docroot/modules/humsci/hs_layouts/patterns/color-band/color-band.html.twig

@@ -6,5 +6,9 @@
 {% endif %}
 
 <div{{ attributes }}>
-  <h2 class="hb-color-band--text">{{ color_band_text }}</h2>
+  {% if color_band_text %}
+    <h2 class="hb-color-band--text">{{ color_band_text }}</h2>
+  {% else %}
+    <hr class="hb-color-band--text" />
+  {% endif %}
 </div>

docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.color-band.scss

@@ -73,4 +73,11 @@
       padding: hb-calculate-rems(20px);
     }
   }
+
+  hr {
+    margin-block-start: 0.83em;
+    margin-block-end: 0.83em;
+    border: 0;
+    font-size: 3.6rem;
+  }
 }

docroot/themes/humsci/humsci_basic/templates/components/pattern-color-band--layout--paragraph--preview.html.twig

@@ -8,10 +8,14 @@
 {%- set attributes = attributes.addClass(classes) -%}
 
 {% if variant %}
-  {% set variant_class = "hb-color-band--#{variant}" %} 
+  {% set variant_class = "hb-color-band--#{variant}" %}
   {% set attributes = attributes.addClass(variant_class) %}
 {% endif %}
 
 <div{{ attributes }}>
-  <h2 class="hb-color-band--text">{{ color_band_text }}</h2>
+  {% if color_band_text %}
+    <h2 class="hb-color-band--text">{{ color_band_text }}</h2>
+  {% else %}
+    <hr class="hb-color-band--text" />
+  {% endif %}
 </div>