From 29f076ff567d8380115512007ccac7b598ce7f01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20D=C3=ADaz=20Soto?=
 <andres.diaz.soto@gmail.com>
Date: Tue, 13 Aug 2024 09:39:40 -0600
Subject: [PATCH] Four Kitchens Release - Sprint 56 (#1597)

* SHS-5692: Implementation: New Spotlight design for Colorful and Traditional (#1589)
* SHS-5772: Regression: External Links on Postcards are wrong color (#1591)
* SHS-5629: Editors can more easily edit a caption (#1580)
* SHS-5661: Remove legacy fields (#1577)
* SHS-4929: Hide caption/credits on images in default views (#1578)
* SHS-5675: Helping users avoid 'Table cell missing context (e.g. headings) A11y warning (#1579)
---
 composer.json                                 |   4 +-
 ...display.paragraph.hs_spotlight.default.yml |   7 +
 ...display.paragraph.hs_spotlight.default.yml |   2 +
 ...display.paragraph.hs_spotlight.preview.yml |   2 +
 ...aph.hs_spotlight.field_spotlight_style.yml |  21 ++
 ...torage.paragraph.field_spotlight_style.yml |  24 +++
 .../humsci/hs_layouts/hs_layouts.module       |   7 +
 .../hs_paragraph_types.module                 |   4 +
 .../carousel-slides/carousel-slides-height.js |  18 +-
 .../src/scss/components/_card.scss            |   2 +
 .../src/scss/components/_linked-cards.scss    |   7 +-
 .../scss/components/_pattern.spotlight.scss   | 189 ++++++++++++++----
 12 files changed, 243 insertions(+), 44 deletions(-)
 create mode 100644 config/default/field.field.paragraph.hs_spotlight.field_spotlight_style.yml
 create mode 100644 config/default/field.storage.paragraph.field_spotlight_style.yml

diff --git a/composer.json b/composer.json
index 2a55a56cad..06b4c9caca 100644
--- a/composer.json
+++ b/composer.json
@@ -241,7 +241,9 @@
                 "https://www.drupal.org/project/drupal/issues/3306916": "https://www.drupal.org/files/issues/2023-12-19/3306916-18.patch",
                 "views form null fix": "patches/core-views.patch",
                 "CKEditor 5 headings plugin paragraph label change": "patches/ckeditor5-paragraph-rename.patch",
-                "Allow hs group blocks in layout_builder": "patches/layout_builder-allow-hs-blocks.patch"
+                "Allow hs group blocks in layout_builder": "patches/layout_builder-allow-hs-blocks.patch",
+                "Allow media items to be edited in a modal when using the field widget https://www.drupal.org/project/drupal/issues/2985168": "https://www.drupal.org/files/issues/2023-12-18/2985168-172.patch",
+                "Cannot read properties of undefined (reading 'settings') with dialog.position.js https://www.drupal.org/project/drupal/issues/3356667": "https://www.drupal.org/files/issues/2024-08-09/3356667-undefined-settings-dialog-position-51.patch"
             },
             "drupal/entity_reference_exposed_filters": {
                 "https://www.drupal.org/project/entity_reference_exposed_filters/issues/3189025": "https://www.drupal.org/files/issues/2023-10-17/entity_reference_exposed_filters-empty_target-3189025-4.patch"
diff --git a/config/default/core.entity_form_display.paragraph.hs_spotlight.default.yml b/config/default/core.entity_form_display.paragraph.hs_spotlight.default.yml
index 609faddefc..06d47aa719 100644
--- a/config/default/core.entity_form_display.paragraph.hs_spotlight.default.yml
+++ b/config/default/core.entity_form_display.paragraph.hs_spotlight.default.yml
@@ -10,6 +10,7 @@ dependencies:
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_image_align
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_link
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_title
+    - field.field.paragraph.hs_spotlight.field_spotlight_style
     - paragraphs.paragraphs_type.hs_spotlight
   module:
     - allowed_formats
@@ -81,6 +82,12 @@ content:
       size: 60
       placeholder: ''
     third_party_settings: {  }
+  field_spotlight_style:
+    type: options_select
+    weight: 7
+    region: content
+    settings: {  }
+    third_party_settings: {  }
 hidden:
   created: true
   status: true
diff --git a/config/default/core.entity_view_display.paragraph.hs_spotlight.default.yml b/config/default/core.entity_view_display.paragraph.hs_spotlight.default.yml
index a4561c922d..dd91dbd8b8 100644
--- a/config/default/core.entity_view_display.paragraph.hs_spotlight.default.yml
+++ b/config/default/core.entity_view_display.paragraph.hs_spotlight.default.yml
@@ -10,6 +10,7 @@ dependencies:
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_image_align
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_link
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_title
+    - field.field.paragraph.hs_spotlight.field_spotlight_style
     - paragraphs.paragraphs_type.hs_spotlight
   module:
     - ds
@@ -123,4 +124,5 @@ hidden:
   field_hs_spotlight_bg: true
   field_hs_spotlight_height: true
   field_hs_spotlight_image_align: true
+  field_spotlight_style: true
   search_api_excerpt: true
diff --git a/config/default/core.entity_view_display.paragraph.hs_spotlight.preview.yml b/config/default/core.entity_view_display.paragraph.hs_spotlight.preview.yml
index 556c5e0fba..9411a1f207 100644
--- a/config/default/core.entity_view_display.paragraph.hs_spotlight.preview.yml
+++ b/config/default/core.entity_view_display.paragraph.hs_spotlight.preview.yml
@@ -11,6 +11,7 @@ dependencies:
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_image_align
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_link
     - field.field.paragraph.hs_spotlight.field_hs_spotlight_title
+    - field.field.paragraph.hs_spotlight.field_spotlight_style
     - paragraphs.paragraphs_type.hs_spotlight
   module:
     - ds
@@ -129,4 +130,5 @@ hidden:
   field_hs_spotlight_bg: true
   field_hs_spotlight_height: true
   field_hs_spotlight_image_align: true
+  field_spotlight_style: true
   search_api_excerpt: true
diff --git a/config/default/field.field.paragraph.hs_spotlight.field_spotlight_style.yml b/config/default/field.field.paragraph.hs_spotlight.field_spotlight_style.yml
new file mode 100644
index 0000000000..96c0a4b015
--- /dev/null
+++ b/config/default/field.field.paragraph.hs_spotlight.field_spotlight_style.yml
@@ -0,0 +1,21 @@
+uuid: 7bd01afb-289b-4103-a7e7-acbabc87189e
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.paragraph.field_spotlight_style
+    - paragraphs.paragraphs_type.hs_spotlight
+  module:
+    - options
+id: paragraph.hs_spotlight.field_spotlight_style
+field_name: field_spotlight_style
+entity_type: paragraph
+bundle: hs_spotlight
+label: 'Spotlight Style'
+description: ''
+required: false
+translatable: false
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: list_string
diff --git a/config/default/field.storage.paragraph.field_spotlight_style.yml b/config/default/field.storage.paragraph.field_spotlight_style.yml
new file mode 100644
index 0000000000..57bce3b8ab
--- /dev/null
+++ b/config/default/field.storage.paragraph.field_spotlight_style.yml
@@ -0,0 +1,24 @@
+uuid: bcc6ce07-7895-4a5c-810a-f2d17534ce3e
+langcode: en
+status: true
+dependencies:
+  module:
+    - options
+    - paragraphs
+id: paragraph.field_spotlight_style
+field_name: field_spotlight_style
+entity_type: paragraph
+type: list_string
+settings:
+  allowed_values:
+    -
+      value: expanded
+      label: Expanded
+  allowed_values_function: ''
+module: options
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/docroot/modules/humsci/hs_layouts/hs_layouts.module b/docroot/modules/humsci/hs_layouts/hs_layouts.module
index 2ffe4bd5b4..a9a2630095 100644
--- a/docroot/modules/humsci/hs_layouts/hs_layouts.module
+++ b/docroot/modules/humsci/hs_layouts/hs_layouts.module
@@ -105,6 +105,13 @@ function hs_layouts_preprocess_pattern_spotlight(&$variables) {
     $bgValue = $paragraph->get('field_hs_spotlight_bg')->getString();
     $variables['attributes']->addClass(Html::cleanCssIdentifier($bgValue));
   }
+  if (
+    $paragraph instanceof ParagraphInterface &&
+    $paragraph->hasField('field_spotlight_style')
+  ) {
+    $className = $paragraph->get('field_spotlight_style')->isEmpty() ? 'classic' : $paragraph->get('field_spotlight_style')->getString();
+    $variables['attributes']->addClass(Html::cleanCssIdentifier('hb-spotlight--' . $className));
+  }
 }
 
 /**
diff --git a/docroot/modules/humsci/hs_paragraph_types/hs_paragraph_types.module b/docroot/modules/humsci/hs_paragraph_types/hs_paragraph_types.module
index 40dd246bc0..bd229565e9 100644
--- a/docroot/modules/humsci/hs_paragraph_types/hs_paragraph_types.module
+++ b/docroot/modules/humsci/hs_paragraph_types/hs_paragraph_types.module
@@ -147,4 +147,8 @@ function hs_paragraph_types_field_widget_complete_options_select_form_alter(arra
   if (isset($context['items']) && $context['items']->getName() == 'field_accordion_style') {
     $field_widget_form['widget']['#options']['_none'] = t('Default');
   }
+  // Change the default option label for field_spotlight_style.
+  if (isset($context['items']) && $context['items']->getName() == 'field_spotlight_style') {
+    $field_widget_form['widget']['#options']['_none'] = t('Classic');
+  }
 }
diff --git a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
index c2dde27a7b..10c729b917 100644
--- a/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
+++ b/docroot/themes/humsci/humsci_basic/src/js/shared/carousel-slides/carousel-slides-height.js
@@ -52,9 +52,21 @@ const restrictHeight = () => {
     }
 
     // If the textBoxes are spotlight textBoxes, then give them the same height on all screen sizes
-    textBoxes.forEach(
-      (textBox) => isSpotlightTextBox(textBox) && setMinHeight(textBox, maxBoxHeight),
-    );
+    textBoxes.forEach((textBox) => {
+      const classicSpotlight = slide.querySelector('.hb-spotlight--classic');
+      if (isSpotlightTextBox(textBox) && classicSpotlight) {
+        setMinHeight(textBox, maxBoxHeight);
+      }
+    });
+
+    // Find all spotlights texBoxes wrappers to give them the same height on all screen sizes
+    const expandedSpotlights = slide.querySelectorAll('.hb-spotlight--expanded');
+    if (expandedSpotlights) {
+      expandedSpotlights.forEach((expandedSpotlight) => {
+        const expandedSpotlightWrapper = expandedSpotlight.querySelector('.hb-spotlight__wrapper');
+        setMinHeight(expandedSpotlightWrapper, maxBoxHeight);
+      });
+    }
 
     // Find images inside each slider.
     const imageWrapper = slide.querySelector('.hb-spotlight__image-wrapper');
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_card.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_card.scss
index 45e71de597..7755778e9b 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/components/_card.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/components/_card.scss
@@ -488,6 +488,8 @@
     }
 
     a {
+      @include hb-link;
+
       // Warbler color pairing override.
       @include hb-traditional {
         .ht-pairing-warbler & {
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_linked-cards.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_linked-cards.scss
index 5a96bcd9a6..f8c924ac04 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/components/_linked-cards.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/components/_linked-cards.scss
@@ -1,7 +1,7 @@
 .hb-vertical-card,
 .hb-card--date-stacked {
   // Needed to make the styles work when the anchor is the wrapper.
-  .hb-card__title a:not([class]),
+  .hb-card__title a,
   .hb-card__title a > div > * {
     @include hb-link;
   }
@@ -25,9 +25,8 @@
       transform: scale($hb-image-hover-scale);
     }
 
-    .hb-card__title a,
     // Needed to make the styles work when the anchor is the wrapper.
-    .hb-card__title a:not([class]),
+    .hb-card__title a,
     .hb-card__title a > div > * {
       color: var(--palette--black);
 
@@ -36,7 +35,7 @@
         transition-delay: 0s, 0s;
         box-shadow: inset 0 hb-calculate-rems(-14px) 0 var(--palette--tertiary-highlight);
       }
-  
+
       @include hb-traditional {
         color: var(--palette--black);
         background-image: none;
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.spotlight.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.spotlight.scss
index c275383828..12381d34ef 100644
--- a/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.spotlight.scss
+++ b/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.spotlight.scss
@@ -1,7 +1,10 @@
 .hb-spotlight {
-  padding: hb-spacing-width('md') 0;
   background-color: var(--palette--spotlight);
 
+  @include grid-media-min('md') {
+    margin: hb-spacing-width() 0;
+  }
+
   &--background-gray {
     background-color: var(--palette--gray-medium);
   }
@@ -13,12 +16,15 @@
     background-color: var(--palette--secondary-highlight);
   }
 
-  @include grid-media-min('md') {
-    padding: hb-spacing-width() 0;
-    margin: hb-spacing-width() 0;
-  }
+  &--classic {
+    @include hb-hero-full-width;
 
-  @include hb-hero-full-width;
+    padding: hb-spacing-width('md') 0;
+
+    @include grid-media-min('md') {
+      padding: hb-spacing-width() 0;
+    }
+  }
 
   &__wrapper {
     @include hb-page-width;
@@ -27,16 +33,12 @@
     @include grid-media-min('md') {
       display: flex;
       align-items: center;
-    }
 
-    .hb-spotlight--image-default & {
-      @include grid-media-min('md') {
+      .hb-spotlight--image-default & {
         flex-direction: row-reverse;
       }
-    }
 
-    .hb-spotlight--image-left & {
-      @include grid-media-min('md') {
+      .hb-spotlight--image-left & {
         flex-direction: row;
       }
     }
@@ -52,27 +54,29 @@
   }
 
   &__text {
-    @include hb-themes(('colorful', 'airy')) {
-      position: relative;
-      padding-top: hb-spacing-width('md');
-
-      &::before {
-        top: 0;
-        @include hb-colorful-text-bar('secondary');
-
-        // Add a unique secondary color for Ocean on Colorful.
-        // Note this is an extraordinary use case.
-        // Targeting styles per color pairing should not become standard practice.
-        .hc-pairing-ocean & {
-          @include hb-colorful-text-bar('secondary-darken-12');
+    .hb-spotlight--classic & {
+      @include hb-themes(('colorful', 'airy')) {
+        position: relative;
+        padding-top: hb-spacing-width('md');
+
+        &::before {
+          top: 0;
+          @include hb-colorful-text-bar('secondary');
+
+          // Add a unique secondary color for Ocean on Colorful.
+          // Note this is an extraordinary use case.
+          // Targeting styles per color pairing should not become standard practice.
+          .hc-pairing-ocean & {
+            @include hb-colorful-text-bar('secondary-darken-12');
+          }
         }
       }
-    }
 
-    @include grid-media-min('md') {
-      flex-basis: 55%;
-      flex-grow: 1;
-      max-width: 75%;
+      @include grid-media-min('md') {
+        flex-basis: 55%;
+        flex-grow: 1;
+        max-width: 75%;
+      }
     }
 
     .field-hs {
@@ -110,20 +114,22 @@
   }
 
   &__image-wrapper {
-    margin-bottom: hb-spacing-width('md');
+    .hb-spotlight--classic & {
+      margin-bottom: hb-spacing-width('md');
 
-    @include grid-media-min('md') {
-      width: 45%;
-      margin-bottom: 0;
+      @include grid-media-min('md') {
+        width: 45%;
+        margin-bottom: 0;
+      }
     }
 
-    .hb-spotlight--image-default & {
+    .hb-spotlight--classic.hb-spotlight--image-default & {
       @include grid-media-min('md') {
         margin-left: hb-spacing-width();
       }
     }
 
-    .hb-spotlight--image-left & {
+    .hb-spotlight--classic.hb-spotlight--image-left & {
       @include grid-media-min('md') {
         margin-right: hb-spacing-width();
       }
@@ -135,6 +141,111 @@
   }
 }
 
+.hb-spotlight--expanded {
+  position: relative;
+
+  @include hb-traditional {
+    .hs-paragraph-style--well &,
+    .hs-paragraph-style--well-full-width & {
+      background-color: var(--palette--white);
+    }
+  }
+
+  .hb-spotlight__wrapper {
+    position: relative;
+    width: 100% !important;
+  }
+
+  .hb-spotlight__text {
+    min-height: fit-content !important;
+
+    @include hb-themes(('colorful', 'airy')) {
+      padding: hb-calculate-rems(20px);
+      margin: hb-calculate-rems(20px);
+      background: var(--palette--white);
+      transform: translate(0%, -15%);
+
+      @include grid-media-min('md') {
+        padding: hb-calculate-rems(30px) hb-calculate-rems(40px);
+        margin: 0;
+        flex-basis: 55%;
+        flex-grow: 1;
+        max-width: 75%;
+      }
+    }
+
+    @include hb-traditional {
+      padding: hb-calculate-rems(40px);
+
+      @include grid-media-min('md') {
+        flex-basis: 60%;
+        flex-grow: 1;
+      }
+    }
+
+    .field-hs-spotlight-link {
+      margin-top: hb-calculate-rems(20px);
+    }
+
+    .hb-spotlight__title {
+      &, h2 {
+        margin-top: 0;
+        margin-bottom: hb-calculate-rems(15px);
+      }
+
+      @include hb-themes(('colorful', 'airy')) {
+        color: var(--palette--primary);
+
+        @include grid-media-min('md') {
+          &, h2 {
+            font-size: hb-calculate-rems(32px);
+          }
+        }
+      }
+    }
+  }
+
+  .hb-spotlight__image-wrapper {
+    @include hb-traditional {
+      @include grid-media-min('md') {
+        flex-basis: 40%;
+        max-width: 500px;
+      }
+    }
+
+    @include hb-themes(('colorful', 'airy')) {
+      .field-media-image + .field-media-image-caption {
+        z-index: 0;
+      }
+
+      @include grid-media-min('md') {
+        width: 45%;
+        max-width: 500px;
+      }
+    }
+  }
+}
+
+.hb-spotlight--expanded.hb-spotlight--image-default {
+  .hb-spotlight__text {
+    @include hb-themes(('colorful', 'airy')) {
+      @include grid-media-min('md') {
+        transform: translate(14%, 0%);
+      }
+    }
+  }
+}
+
+.hb-spotlight--expanded.hb-spotlight--image-left {
+  .hb-spotlight__text {
+    @include hb-themes(('colorful', 'airy')) {
+      @include grid-media-min('md') {
+        transform: translate(-14%, 0%);
+      }
+    }
+  }
+}
+
 // Spotlight Slider styles
 .paragraph--type--hs-sptlght-slder {
   @include hb-hero-full-width;
@@ -148,6 +259,12 @@
       margin-top: 0;
     }
   }
+
+  &:has(.hb-spotlight--expanded) {
+    .slick-dots {
+      bottom: 0;
+    }
+  }
 }
 
 .paragraph--type--hs-sptlght-slder.paragraph--type--hs-sptlght-slder--no-image {