Four Kitchens Release - Sprint 44 (#1459)

* SHS-5052: Video preview in CKeditor should better reflect rendered size (#1451)
* SHS-5491: Menu UI updates (#1458)
* SHS-5495: Update border color on combo based select fields (#1460)
* SHS-5492: Fix bug in hb-stretch-vertical-linked-cards (#1457)
* SHS-4898: [EX] Add link to user guide on all content types (#1461)
* SHS-5053: Consistency: Update to field names (#1462)

config/default/field.field.paragraph.hs_gradient_hero.field_hs_gradient_hero_link.yml

@@ -11,7 +11,7 @@ id: paragraph.hs_gradient_hero.field_hs_gradient_hero_link
 field_name: field_hs_gradient_hero_link
 entity_type: paragraph
 bundle: hs_gradient_hero
-label: 'Gradient Hero Link'
+label: Link
 description: 'Be descriptive but short, and don''t use "click here" or "more info".  For e.g. "Explore H&S departments and programs"'
 required: false
 translatable: false

docroot/modules/humsci/hs_admin/assets/js/hs_admin.js

@@ -1,4 +1,4 @@
-Drupal.behaviors.hsAdmin= {
+Drupal.behaviors.hsAdmin = {
   attach: function (context) {
     function alterSourceBtnTxt() {
       const htmlBtn = context.querySelector('.ck-source-editing-button');
@@ -13,11 +13,11 @@ Drupal.behaviors.hsAdmin= {
     window.addEventListener('load', function() {
       alterSourceBtnTxt();
     });
-    
+
     // Then we observe when additional text areas are added on the DOM
     const ckContainer = document.querySelector('.form-textarea-wrapper');
     const observer = new MutationObserver(mutationCallback);
-    
+
     if (ckContainer) {
       observer.observe(ckContainer, { childList: true, subtree: true });
     }
@@ -26,16 +26,16 @@ Drupal.behaviors.hsAdmin= {
       alterSourceBtnTxt();
       observer.disconnect();
     }
-    
+
     // Here we handle observing text format changes (Basic HTML -> Full HTML, etc.)
     const sourceInput = context.querySelector('.js-filter-list');
-    
+
     if (sourceInput) {
       sourceInput.addEventListener('change', () => {
         const textArea = ckContainer.querySelector('.js-text-full');
         const observer = new MutationObserver(mutationCallback);
         observer.observe(textArea, { attributes: true });
-  
+
         function mutationCallback(mutations, observer) {
           alterSourceBtnTxt();
         }
@@ -48,5 +48,61 @@ Drupal.behaviors.hsAdmin= {
     if (rowWeightsBtn && rowWeightsBtn.innerText == 'Hide row weights') {
       rowWeightsBtn.setAttribute('style', 'display: inline;');
     }
-  }
+  },
 };
+
+Drupal.behaviors.menuLinkCshs = {
+  attach: function (context) {
+    let menuLinkWeightWrapper;
+    let labels = [
+      'Parent menu',
+      'First level menu item',
+      'Second level menu item',
+      'Third level menu item',
+    ];
+    let helpTexts = [
+      'Select the main item under which your current content will be organized.',
+      'Choose the first level menu item that directly falls under your selected parent menu.',
+      'Choose the item that falls under your selected first level menu item.',
+      'Choose the item that falls under your selected second level menu item.',
+    ];
+    if (context instanceof Document) {
+      menuLinkWeightWrapper = context.querySelector(
+        '#menu-link-weight-wrapper'
+      );
+    }
+    if (
+      context instanceof HTMLDivElement &&
+      context.getAttribute('id') === 'menu-link-weight-wrapper'
+    ) {
+      menuLinkWeightWrapper = context;
+    }
+    if (!menuLinkWeightWrapper) {
+      return;
+    }
+    // Use a timeout to allow CSHS to update the markup.
+    setTimeout(() => {
+      const cshsContainer = menuLinkWeightWrapper.previousElementSibling;
+      // Ensure that each select wrapper is only processed once.
+      const selectWrappers = once(
+        'chsh-select-wrapper',
+        '.select-wrapper',
+        cshsContainer
+      );
+      selectWrappers.forEach((selectWrapper) => {
+        const index = parseInt(selectWrapper.getAttribute('data-level'), 10);
+        if (isNaN(index) || index < 0 || index > 3) {
+          return;
+        }
+        const label = document.createElement('label');
+        label.className = 'form-item__label';
+        label.innerText = labels[index];
+        const helptext = document.createElement('div');
+        helptext.className = 'form-item__description';
+        helptext.innerText = helpTexts[index];
+        selectWrapper.insertAdjacentElement('afterbegin', label);
+        selectWrapper.insertAdjacentElement('beforeend', helptext);
+      });
+    }, 0);
+  }
+}

docroot/modules/humsci/hs_admin/hs_admin.module

@@ -68,7 +68,10 @@ function hs_admin_preprocess_details(&$variables) {
     return;
   }
 
-  $expanded = ['menu settings'];
+  $expanded = [
+    'menu settings',
+    'user guide',
+  ];
   // Close all sidebar elements if not Menu Settings.
   $title = $variables['title'] ?? '';
   if (!is_array($title) && in_array(strtolower((string) $title), $expanded, TRUE)) {
@@ -98,6 +101,27 @@ function hs_admin_preprocess_form_element(&$variables) {
 function hs_admin_form_node_form_alter(&$form, FormStateInterface $form_state, $form_id) {
   // Weight is applied to some tabs after form build.
   $form['#after_build'][] = '_hs_admin_form_after_build';
+
+  // Add user guide link to node form details.
+  $form['user_guide'] = [
+    '#title' => t('User Guide'),
+    '#type' => 'details',
+    '#group' => 'advanced',
+    '#weight' => 100,
+    '#open' => TRUE,
+  ];
+
+  $form['user_guide']['link'] = [
+    '#type' => 'html_tag',
+    '#tag' => 'a',
+    '#value' => t('User Guide'),
+    '#attributes' => [
+      'href' => '/user-guide',
+      'target' => '_blank',
+    ],
+    '#group' => 'advanced',
+    '#weight' => 100,
+  ];
 }
 
 /**

docroot/modules/humsci/hs_paragraph_types/hs_paragraph_types.module

@@ -39,23 +39,47 @@ function hs_paragraph_types_preprocess_field__field_hs_collection_items(&$variab
  * Implements hook_field_widget_complete_WIDGET_TYPE_form_alter().
  */
 function hs_paragraph_types_field_widget_complete_paragraphs_form_alter(array &$field_widget_form, FormStateInterface $form_state, array $context) {
+  $elements_to_change = [
+    'field_hs_carousel_slides',
+    'field_hs_sptlght_sldes',
+  ];
+  // We need the field name to alter the correct element.
   if (
-    isset($field_widget_form['widget']['add_more']['add_more_button_hs_hero_image'], $field_widget_form['widget']['#field_name']) &&
-    $field_widget_form['widget']['#field_name'] == 'field_hs_carousel_slides'
+    empty($field_widget_form['widget']['#field_name']) ||
+    !in_array($field_widget_form['widget']['#field_name'], $elements_to_change)
   ) {
-    $new_label = 'Banner image with text box';
-    // Change the add button label for field_hs_carousel_slides.
-    $field_widget_form['widget']['add_more']['add_more_button_hs_hero_image']['#value'] = t('Add @type', [
-      '@type' => $new_label,
-    ]);
-    // Change the paragraph type label for hs_hero_image embedded in hs_carousel.
-    foreach (Element::children($field_widget_form['widget']) as $key) {
-      // Only alter markup in field widget elements.
-      if (!is_int($key)) {
-        continue;
+    return;
+  }
+  switch ($field_widget_form['widget']['#field_name']) {
+    case 'field_hs_carousel_slides':
+      if (empty($field_widget_form['widget']['add_more'])) {
+        return;
       }
-      $field_widget_form['widget'][$key]['top']['type']['label']['#markup'] = $new_label;
-    }
+      // Change the add button label for field_hs_carousel_slides.
+      $new_label = 'Banner image with text box';
+      $field_widget_form['widget']['add_more']['add_more_button_hs_hero_image']['#value'] = t('Add @type', [
+        '@type' => $new_label,
+      ]);
+      // Change the paragraph type label for hs_hero_image embedded in hs_carousel.
+      foreach (Element::children($field_widget_form['widget']) as $key) {
+        // Only alter markup in field widget elements.
+        if (!is_int($key)) {
+          continue;
+        }
+        $field_widget_form['widget'][$key]['top']['type']['label']['#markup'] = t('@label', ['@label' => $new_label]);
+      }
+      break;
+    case 'field_hs_sptlght_sldes':
+      // Change the spotlight widget title.
+      $new_label = 'Spotlight(s)';
+      $field_widget_form['widget']['#title'] = t('@label', ['@label' => $new_label]);
+      if (!empty($field_widget_form['widget']['add_more']['#suffix'])) {
+        // Change the paragraph type label for the add more button.
+        $field_widget_form['widget']['add_more']['#suffix'] = t('to %type', [
+          '%type' => $new_label,
+        ]);
+      }
+      break;
   }
 }
 

docroot/themes/humsci/humsci_basic/src/scss/ckeditor/imports.scss

@@ -322,6 +322,21 @@ $px-only: true;
       }
     }
   }
+
+  // Fix Video preview in CKeditor for "Align center and break text" option
+  .drupal-media-style-align-center {
+    max-width: none;
+
+    article:not(.hb-media-video) {
+      max-width: 50%;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    .hb-media-video {
+      max-width: 100%;
+    }
+  }
 }
 
 // Media embeds previews shouldn't be clickable.

docroot/themes/humsci/humsci_basic/src/scss/components/_vertical-linked-card.scss

@@ -25,6 +25,7 @@
   .hb-stretch-vertical-linked-cards & {
     display: flex;
     flex-flow: column nowrap;
+    height: 100%;
   }
 
   &__img {
@@ -89,14 +90,6 @@
       margin: 0;
     }
 
-    // Only extend the title if it's not
-    // the last visual element on the card.
-    &:nth-last-child(2) {
-      .hb-stretch-vertical-linked-cards & {
-        flex: 1 1 auto;
-      }
-    }
-
     .hb-vertical-linked-card:hover &,
     .hb-vertical-linked-card:focus &,
     .hb-vertical-linked-card.is-focused & {
@@ -142,16 +135,10 @@
 
       position: absolute;
       right: 0;
+      top: 50%;
+      transform: translateY(-50%);
 
       transition: hb-transition(background-position);
-
-      @include hb-themes(('colorful', 'airy')) {
-        bottom: hb-calculate-rems(10px);
-      }
-
-      @include hb-traditional {
-        bottom: hb-calculate-rems(7px);
-      }
     }
   }
 

docroot/themes/humsci/humsci_basic/src/scss/components/_views-exposed-form.scss

@@ -53,3 +53,9 @@
     }
   }
 }
+
+.views-exposed-form .select-preact {
+  button {
+    @include hb-global-color('border-color', 'gray', true);
+  }
+}

docroot/themes/humsci/su_humsci_gin_admin/dist/su_humsci_gin_admin.css

@@ -113,3 +113,24 @@ html:not(.gin--dark-mode) .user-logged-in[data-gin-accent="custom"] {
   width: 1.5rem;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
 }
+
+/* Styles for menu link field in Node add/edit forms. */
+.menu-link-form .form-type--cshs>label {
+  display: none;
+}
+
+.menu-link-form .form-type--cshs .select-wrapper {
+  margin: 0;
+}
+
+.menu-link-form .form-type--cshs .select-wrapper:not(:last-child) {
+  margin-bottom: 24px;
+}
+
+.menu-link-form .form-type--cshs select {
+  width: 100%;
+}
+
+.menu-link-form .form-type--cshs .form-item__description {
+  margin: 8px 0 0;
+}

tests/codeception/functional/Install/Content/FlexiblePageCest.php

@@ -249,7 +249,7 @@ public function testSpotlightSlider(FunctionalTester $I) {
     // Populating spotlight #1.
     $I->amOnPage($node->toUrl('edit-form')->toString());
     $I->click('field_hs_page_components_0_edit');
-    $I->waitForText('Slides');
+    $I->waitForText('Body');
     $I->fillField('.ck-editor__editable_inline', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.');
     $I->fillField('field_hs_page_components[0][subform][field_hs_sptlght_sldes][0][subform][field_hs_spotlight_link][0][uri]', 'http://google.com');
     $I->fillField('field_hs_page_components[0][subform][field_hs_sptlght_sldes][0][subform][field_hs_spotlight_link][0][title]', 'Google Link');
@@ -275,7 +275,7 @@ public function testSpotlightSlider(FunctionalTester $I) {
     // // Populating spotlight #2.
     $I->amOnPage($node->toUrl('edit-form')->toString());
     $I->click('field_hs_page_components_0_edit');
-    $I->waitForText('Slides');
+    $I->waitForText('Body');
     $I->click('field_hs_page_components_0_subform_field_hs_sptlght_sldes_0_collapse');
     $I->wait(1);
     $I->scrollTo('.field-add-more-submit');