Four Kitchens Release - Sprint 47 (#1495)

* SHS-5567: Implementation: Hide "Show as Expanded" toggle in menu settings on node form (#1490)
* SHS-5515: Implementation: Adjustments to vertical cards (#1487)
* SHS-5561: Implementation: Responsive styles for h4 and h5 (#1497)

docroot/modules/humsci/hs_admin/hs_admin.module

@@ -7,9 +7,9 @@
 
 use Drupal\Core\Cache\RefinableCacheableDependencyInterface;
 use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Render\Element;
 use Drupal\Core\Render\Markup;
 use Drupal\user\Entity\User;
-use Drupal\user\UserInterface;
 
 /**
  * Implements hook_preprocess_node_edit_form().
@@ -200,3 +200,18 @@ function hs_admin_field_widget_complete_paragraphs_browser_form_alter(&$field_wi
     }
   }
 }
+
+/**
+ * Implements hook_field_widget_complete_WIDGET_TYPE_form_alter().
+ */
+function hs_admin_field_widget_complete_menu_link_default_form_alter(array &$field_widget_form, FormStateInterface $form_state, array $context) {
+  // Go through each widget element.
+  foreach (Element::children($field_widget_form['widget']) as $key) {
+    if (!is_int($key) || !isset($field_widget_form['widget'][$key]['expanded'])) {
+      continue;
+    }
+    // Disable access to `expanded` checkbox.
+    $field_widget_form['widget'][$key]['expanded']['#access'] = FALSE;
+    break;
+  }
+}

docroot/modules/humsci/hs_layouts/patterns/vertical-card/vertical-card.html.twig

@@ -1,4 +1,4 @@
-{%- set attributes = attributes.addClass('hb-card') -%}
+{% set attributes = attributes.addClass(['hb-card', 'hb-vertical-card']) %}
 
 <div{{ attributes }}>
 
@@ -17,11 +17,20 @@
 
     {% if title %}
       <div class="hb-card__title">
-        {% if title|render matches '/<\\/h\\d>/' %}
-          {{ title }}
+      {% set title_content %}
+        {% if href %}
+          <a href="{{ href }}" data-vertical-card-link>{{ title }}</a>
         {% else %}
-          <{{ heading_tag }}>{{ title }}</{{ heading_tag }}>
+          {{ title }}
         {% endif %}
+      {% endset %}
+      {% if title|render matches '/<\\/h\\d>/' %}
+        {{ title_content }}
+      {% else %}
+        <{{ heading_tag }}>
+          {{ title_content }}
+        </{{ heading_tag }}>
+      {% endif %}
       </div>
     {% endif %}
 
@@ -54,18 +63,5 @@
     {% if year %}
       <div class="hb-card__year">{{ year }}</div>
     {% endif %}
-
-    {% if button %}
-      {% set node_url = button['#row'] ? url('entity.node.canonical', { 'node': button['#row']._entity.id }) %}
-      <div class="hb-card__decorative-link">
-        {% if node_url %}
-          <a href="{{ node_url }}" tabindex="-1" aria-hidden="true">
-            {{ 'Read More'|t }}
-          </a>
-        {% else %}
-          {{ button }}
-        {% endif %}
-      </div>
-    {% endif %}
   </div>
 </div>

docroot/modules/humsci/hs_layouts/patterns/vertical-link-card/vertical-link-card.html.twig

@@ -7,12 +7,12 @@
     </div>
   {% endif %}
 
-  {% if title and button %}
+  {% if title and href %}
     {% if title|render matches '/<\\/h\\d>/' %}
-      <a href="{{ button }}" class="hb-vertical-linked-card__title__link">{{ title }}</a>
+      <a href="{{ href }}" class="hb-vertical-linked-card__title__link">{{ title }}</a>
     {% else %}
       <{{ heading_tag }} class="hb-vertical-linked-card__title">
-        <a href="{{ button }}" class="hb-vertical-linked-card__title__link">{{ title }}</a>
+        <a href="{{ href }}" class="hb-vertical-linked-card__title__link">{{ title }}</a>
       </{{ heading_tag }}>
     {% endif %}
   {% elseif title %}

docroot/themes/humsci/humsci_basic/humsci_basic.theme

@@ -198,9 +198,9 @@ function _humsci_basic_check_link_access(array &$link_items) {
 }
 
 /**
- * Implements hook_preprocess_HOOK().
+ * Helper function to make the title of the card the link.
  */
-function humsci_basic_preprocess_pattern_vertical_link_card(&$variables) {
+function _humsci_basic_make_title_the_link(&$variables) {
   $renderer = \Drupal::service('renderer');
   if (!empty($variables['button'])) {
     $dom = new DOMDocument();
@@ -215,11 +215,11 @@ function humsci_basic_preprocess_pattern_vertical_link_card(&$variables) {
     $links = $xpath->query('//a/@href');
     // If the markup is a link, grab the href attribute.
     if ($links->length) {
-      $variables['button'] = $links->item(0)->nodeValue;
+      $variables['href'] = $links->item(0)->nodeValue;
     }
     else {
       // The markup is just a string with the url, we can use that.
-      $variables['button'] = htmlspecialchars_decode(trim(strip_tags($renderer->renderPlain($variables['button']))));
+      $variables['href'] = htmlspecialchars_decode(trim(strip_tags($renderer->renderPlain($variables['button']))));
     }
   }
   if (!empty($variables['title'])) {
@@ -228,6 +228,50 @@ function humsci_basic_preprocess_pattern_vertical_link_card(&$variables) {
   }
 }
 
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function humsci_basic_preprocess_pattern_vertical_link_card(&$variables) {
+  _humsci_basic_make_title_the_link($variables);
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function humsci_basic_preprocess_pattern_vertical_card(&$variables) {
+  $context = $variables['context'];
+  if ($context->isOfType('layout')) {
+    // Functionality for paragraphs
+    _humsci_basic_make_title_the_link($variables);
+  } else {
+    // Functionality for Views.
+    $renderer = \Drupal::service('renderer');
+    $title_rendered = $renderer->renderPlain($variables['title']);
+
+    // Create a new DOMDocument instance and load the rendered title HTML.
+    $dom = new DOMDocument();
+    $dom->loadHTML($title_rendered);
+
+    // Create a DOMXPath instance to query the DOM.
+    $xpath = new DOMXPath($dom);
+
+    // Find all anchor elements in the DOM.
+    $links = $xpath->query('//a');
+
+    // If the markup is a link, set a new attribute to it.
+    if ($links->length >= 1) {
+      $links->item(0)->setAttribute('data-vertical-card-link', '');
+      $variables['title'] = ['#markup' => $dom->saveHTML()];
+    } else {
+      $original_title = $variables['title'];
+      _humsci_basic_make_title_the_link($variables);
+      // Restore original title, because _humsci_basic_make_title_the_link() overwrote it.
+      $variables['title'] = $original_title;
+    }
+  }
+}
+
 /**
  * Implements hook_preprocess_HOOK() for we_megamenu li
  */

docroot/themes/humsci/humsci_basic/src/js/shared/index.js

@@ -8,6 +8,7 @@ import './media/video-with-caption';
 import './animation/page-scroll';
 import './timeline/expand-collapse-timeline';
 import './accordion/accordion-toggle-all';
+import './vertical-card/vertical-card';
 import './vertical-linked-card/vertical-linked-card';
 import './photo-album/colorbox';
 import './editoria11y/editoria11y';

docroot/themes/humsci/humsci_basic/src/js/shared/vertical-card/vertical-card.js

@@ -0,0 +1,35 @@
+function verticalCard() {
+  // find all hb-vertical-card elements
+  const cards = document.querySelectorAll('.hb-vertical-card');
+
+  // Loop through each card
+  cards.forEach((card) => {
+    // Find the main link within each card
+    const mainLink = card.querySelector('[data-vertical-card-link]');
+
+    if (!mainLink) {
+      return;
+    }
+
+    // Add a click event listener to each card
+    function handleClick() {
+      mainLink.click();
+    }
+
+    // Add a focus event listener to each main link
+    mainLink.addEventListener('focus', () => {
+      // Add a focus state class to card
+      card.classList.add('is-focused');
+    });
+
+    // Add a blur event listener to each main link
+    mainLink.addEventListener('blur', () => {
+      // Remove focus state class from card
+      card.classList.remove('is-focused');
+    });
+
+    card.addEventListener('click', handleClick);
+  });
+}
+
+verticalCard();

docroot/themes/humsci/humsci_basic/src/scss/_main.scss

@@ -168,6 +168,7 @@ $fa-font-path: "../../humsci_basic/node_modules/@fortawesome/fontawesome-free/we
   'components/pattern.carousel',
   'components/pattern.banner',
   'components/postcard',
+  'components/vertical-card',
   'components/vertical-linked-card',
   'components/block-layout',
   'components/pattern.table-pattern',

docroot/themes/humsci/humsci_basic/src/scss/components/_card.scss

@@ -433,22 +433,26 @@
     h4,
     h5,
     h6 {
-      @include hb-heading-5;
       margin: 0;
+      font-weight: hb-theme-font-weight(semibold);
       overflow-wrap: break-word;
 
       @include hb-traditional {
         font-size: hb-calculate-rems(20px);
+        line-height: 126%;
+      }
+
+      @include hb-themes(('colorful', 'airy')) {
+        font-size: hb-calculate-rems(18px);
+        line-height: 124%;
       }
 
       @include grid-media-min('sm') {
-        font-weight: hb-theme-font-weight(semibold);
         font-size: hb-calculate-rems(24px);
         line-height: 124%;
       }
 
       @include grid-media-min('md') {
-        font-weight: hb-theme-font-weight(semibold);
         font-size: hb-calculate-rems(27px);
         line-height: 119%;
       }
@@ -460,20 +464,19 @@
       .ptype-hs-row & {
         @include hb-themes(('colorful', 'airy')) {
           @include grid-media-min('sm') {
-            @include hb-heading-5;
+            font-size: hb-calculate-rems(18px);
+            line-height: 124%;
           }
 
           @include grid-media-min('lg') {
-            font-weight: hb-theme-font-weight(semibold);
             font-size: hb-calculate-rems(20px);
-            line-height: 124%;
           }
         }
 
         @include hb-traditional {
           @include grid-media-min('sm') {
-            @include hb-heading-5;
             font-size: hb-calculate-rems(22px);
+            line-height: 126%;
           }
         }
       }

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

@@ -0,0 +1,60 @@
+.hb-vertical-card {
+  // Needed to make the styles work when the anchor is the wrapper.
+  .hb-card__title a:not([class]),
+  .hb-card__title a > div > * {
+    @include hb-link;
+  }
+
+  // Needed to make the styles work when the anchor is the wrapper.
+  .hb-card__title a > div > * {
+    display: inline;
+  }
+
+  &:hover,
+  &:focus {
+    cursor: pointer;
+
+    @include hb-colorful {
+      .hb-raised-cards & {
+        @include hb-pairing-color('border-color', 'secondary-darken-12');
+      }
+    }
+
+    .hb-card__img img {
+      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 > div > * {
+      @include hb-global-color('color', 'black');
+
+      @include hb-themes(('airy', 'colorful')) {
+        @include hb-pairing-color('border-bottom-color', 'tertiary-highlight-darken-10');
+        transition-delay: 0s, 0s;
+        box-shadow: inset 0 hb-calculate-rems(-14px) 0 hb-get-pairing-color('tertiary-highlight', $hb-colorful-default, $hc-colorful-pairings);
+        box-shadow: inset 0 hb-calculate-rems(-14px) 0 var(--palette--tertiary-highlight);
+      }
+
+      @include hb-traditional {
+        @include hb-global-color('color', 'black');
+        background-image: none;
+        @include hb-pairing-color('text-decoration-color', 'primary');
+      }
+    }
+  }
+
+  .hb-card__img {
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      transition: hb-transition(transform);
+    }
+  }
+
+  .field-media-image {
+    margin: 0;
+  }
+}