From 614c3c5f8f8525888bae1e1208660b5b4eb9eeb7 Mon Sep 17 00:00:00 2001
From: Matt Poole <mattsqd@users.noreply.github.com>
Date: Tue, 26 Nov 2024 17:00:43 -0500
Subject: [PATCH 1/2] BSD fixes #349: Allow section to have a prefix label and
 show an optional prefix label.

---
 stories/assets/styles/global/global.scss      |  7 +++++++
 stories/components/section/section.html.twig  | 15 ++++++++++++---
 stories/components/section/section.stories.js |  2 ++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/stories/assets/styles/global/global.scss b/stories/assets/styles/global/global.scss
index 1e45a889..be5f6eff 100644
--- 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
index e429d760..e74cd750 100644
--- 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
index a4078177..eeef3e75 100644
--- 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.",

From 27a99e3b91c9a03aa491b4cd1015e4ecb5b176a9 Mon Sep 17 00:00:00 2001
From: Matt Poole <mattsqd@users.noreply.github.com>
Date: Tue, 26 Nov 2024 17:09:06 -0500
Subject: [PATCH 2/2] BSD fixes #349: Use the new section component options to
 move the prefix and add a label.

---
 .../bixal_uswds/templates/node/node--case-study--full.html.twig | 2 ++
 1 file changed, 2 insertions(+)

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
index 0c012ad2..ec8a1daf 100644
--- 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 %}