Merge pull request #353 from Bixal/feature/BSD-349-allow-section-labe…

…l-prefix Feature/bsd 349 allow section label prefix
Bixal · Dec 2, 2024 · 8af94f7 · 8af94f7
2 parents da4b684 + 27a99e3
commit 8af94f7
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 3 deletions.
diff --git a/stories/assets/styles/global/global.scss b/stories/assets/styles/global/global.scss
@@ -142,6 +142,13 @@ h6 {
   }
 }
 
+.bix-title-prefix-label {
+  @extend .bix-title-prefix;
+  border-left: none;
+  border-right: none;
+  padding: 0px;
+}
+
 dl {
   line-height: 1.75;
   margin-top: units(2);

diff --git a/stories/components/section/section.html.twig b/stories/components/section/section.html.twig
@@ -4,6 +4,9 @@
   *
   * Available variables:
   * - prefix: Optional string. Contains title prefix with borders on the side.
+  * - prefix_below: Opt boolean. If true, the prefix will show under the title.
+  * - prefix_label: Optional string. Adds a label to prefix seperated by a |
+                    and removes the borders from the sides.
   * - heading_type: String heading type for title.
   * - title: String title of section.
   * - description: String body text, can include paragraphs.
@@ -33,12 +36,18 @@
     #}
   <div class="bix-container">
     {% block header %}
+      {% if prefix_below %}
+        {% include "@partials/section-title.html.twig" %}
+      {% endif %}
       {% if prefix %}
-        <div class="bix-title-prefix">
-          {{ prefix }}
+        <div class="bix-title-prefix{% if prefix_label %}-label{% endif %}">
+          {% if prefix_label %}{{ prefix_label }}&nbsp;<span aria-hidden="true">|</span>&nbsp;{% endif %}{{ prefix }}
         </div>
       {% endif %}
-      {% include "@partials/section-title.html.twig" %}
+      {% if not prefix_below  %}
+        {% include "@partials/section-title.html.twig" %}
+      {% endif %}
+
     {% endblock %}
 
     {% block description %}

diff --git a/stories/components/section/section.stories.js b/stories/components/section/section.stories.js
@@ -11,6 +11,8 @@ export default {
   args: {
     center_content: false,
     prefix: "Who we are",
+    prefix_below: 0,
+    prefix_label: '',
     heading_type: "h2",
     title:
       "Bixal is a diverse group of strategists, designers, engineers, and thinkers.",

diff --git a/web/themes/custom/bixal_uswds/templates/node/node--case-study--full.html.twig b/web/themes/custom/bixal_uswds/templates/node/node--case-study--full.html.twig
@@ -73,6 +73,8 @@
     heading_type: "h1",
     prefix: content.field_client | field_value,
     title: node.label,
+    prefix_below: 1,
+    prefix_label: 'Client',
 } only %}
 
 {% set main_body %}