From e2df40cf45983f4a7cfe8c60ad5c40ed49743df1 Mon Sep 17 00:00:00 2001
From: Natalie Johnstone <nhj@illinois.edu>
Date: Fri, 4 Aug 2023 08:57:10 -0500
Subject: [PATCH 1/2] added formatted text body field to paragraph vertical tab
 and fixed spacing to match other paragraphs spacing

---
 .../_paragraphs.vertical-tab.scss             |  5 +++++
 scss/style.scss                               |  1 +
 .../paragraph--vertical-tab-panel.html.twig   |  5 ++++-
 .../paragraph--vertical-tab.html.twig         | 20 ++++++++++++++-----
 4 files changed, 25 insertions(+), 6 deletions(-)
 create mode 100644 scss/illinois-framework/_paragraphs.vertical-tab.scss

diff --git a/scss/illinois-framework/_paragraphs.vertical-tab.scss b/scss/illinois-framework/_paragraphs.vertical-tab.scss
new file mode 100644
index 0000000..33b1543
--- /dev/null
+++ b/scss/illinois-framework/_paragraphs.vertical-tab.scss
@@ -0,0 +1,5 @@
+.paragraph--type--vertical-tab {
+  .fixed-width {
+    padding: 0;
+  }
+}
diff --git a/scss/style.scss b/scss/style.scss
index d23e3ef..5267125 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -83,6 +83,7 @@
 @import "illinois-framework/paragraphs.hero--section";
 @import "illinois-framework/paragraphs.accordion";
 @import "illinois-framework/paragraphs.image-gallery";
+@import "illinois-framework/paragraphs.vertical-tab";
 
 // Views
 @import "illinois-framework/view.frontpage";
diff --git a/templates/paragraphs/paragraph--vertical-tab-panel.html.twig b/templates/paragraphs/paragraph--vertical-tab-panel.html.twig
index 5bf399e..96ee4a3 100644
--- a/templates/paragraphs/paragraph--vertical-tab-panel.html.twig
+++ b/templates/paragraphs/paragraph--vertical-tab-panel.html.twig
@@ -52,7 +52,10 @@
     {% block content %}
     <il-vertical-tab-panel id="il-vertical-tab-id-">
       <h3 slot="header">{{ content.field_vertical_tab_panel_title }}</h3>
-      <div class="field--name-field-vertical-tab-panel__body">{{ content.field_vertical_tab_panel_body }}</div>
+      {% if content.field_vertical_tab_panel_body %}
+        <div class="field--name-field-vertical-tab-panel__body">{{ content.field_vertical_tab_panel_body }}</div>{# this body field is deprecated #}
+      {% endif %}
+      <div class="field--name-field-vertical-tab-panel__body">{{ content.field_vertical_tab_panel_body_fo }}</div>
     </il-vertical-tab-panel>
 
     {% endblock %}
diff --git a/templates/paragraphs/paragraph--vertical-tab.html.twig b/templates/paragraphs/paragraph--vertical-tab.html.twig
index c22d22e..c0f5c88 100644
--- a/templates/paragraphs/paragraph--vertical-tab.html.twig
+++ b/templates/paragraphs/paragraph--vertical-tab.html.twig
@@ -38,23 +38,33 @@
  * @ingroup themeable
  */
 #}
+{% if content.field_vertical_tab_background['#items'].0.value == 'il-theme-gray' %}
+  {% set background = 'background--color--gray' %}
+{% elseif content.field_vertical_tab_background['#items'].0.value == 'il-theme-blue' %}
+  {% set background = 'background--color--illiniblue' %}
+{% else %}
+  {% set background = 'background--color--white' %}
+{% endif %}
 {%
   set classes = [
     'paragraph',
     'paragraph--type--' ~ paragraph.bundle|clean_class,
     view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
     not paragraph.isPublished() ? 'paragraph--unpublished',
-    'col-lg-12 col-md-12 col-sm-12 full-width il-formatted' ~ flex_row_class ~ max_width
+    'col-lg-12 col-md-12 col-sm-12 full-width il-formatted ' ~ flex_row_class ~ max_width ~ background
   ]
 %}
 {% block paragraph %}
   {# Paragraph ID used for anchor linking #}
   <div {{ attributes.setAttribute('id', 'paragraph--' ~ paragraph.id() ) }} {{ attributes.addClass(classes) }}>
     {% block content %}
-    <il-vertical-tab class="{{ content.field_vertical_tab_background['#items'].0.value }}">
-      <h2 slot="title">{{ content.field_vertical_tab_title }}</h2>
-      {{ content.field_vertical_tab }}
-    </il-vertical-tab>
+      <div class="fixed-width">
+        <il-vertical-tab class="{{ content.field_vertical_tab_background['#items'].0.value }}">
+        <h2 slot="title">{{ content.field_vertical_tab_title }}</h2>
+        {{ content.field_vertical_tab }}
+        </il-vertical-tab>
+      </div>
+
 
     {% endblock %}
   </div>

From 41ae0f12add2358a30100b81895095fa29c590de Mon Sep 17 00:00:00 2001
From: Natalie Johnstone <nhj@illinois.edu>
Date: Tue, 8 Aug 2023 10:48:10 -0500
Subject: [PATCH 2/2] added padding to top of body formatted field, fixed if
 check on body field

---
 scss/illinois-framework/_paragraphs.vertical-tab.scss        | 3 +++
 templates/paragraphs/paragraph--vertical-tab-panel.html.twig | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/scss/illinois-framework/_paragraphs.vertical-tab.scss b/scss/illinois-framework/_paragraphs.vertical-tab.scss
index 33b1543..882e9a5 100644
--- a/scss/illinois-framework/_paragraphs.vertical-tab.scss
+++ b/scss/illinois-framework/_paragraphs.vertical-tab.scss
@@ -2,4 +2,7 @@
   .fixed-width {
     padding: 0;
   }
+  .field--name-field-vertical-tab-panel-body-fo {
+    padding-top: 1rem;
+  }
 }
diff --git a/templates/paragraphs/paragraph--vertical-tab-panel.html.twig b/templates/paragraphs/paragraph--vertical-tab-panel.html.twig
index 96ee4a3..3f20972 100644
--- a/templates/paragraphs/paragraph--vertical-tab-panel.html.twig
+++ b/templates/paragraphs/paragraph--vertical-tab-panel.html.twig
@@ -52,10 +52,10 @@
     {% block content %}
     <il-vertical-tab-panel id="il-vertical-tab-id-">
       <h3 slot="header">{{ content.field_vertical_tab_panel_title }}</h3>
-      {% if content.field_vertical_tab_panel_body %}
+      {% if content.field_vertical_tab_panel_body['#items'] %}
         <div class="field--name-field-vertical-tab-panel__body">{{ content.field_vertical_tab_panel_body }}</div>{# this body field is deprecated #}
       {% endif %}
-      <div class="field--name-field-vertical-tab-panel__body">{{ content.field_vertical_tab_panel_body_fo }}</div>
+      <div class="field--name-field-vertical-tab-panel__body__fo">{{ content.field_vertical_tab_panel_body_fo }}</div>
     </il-vertical-tab-panel>
 
     {% endblock %}