ws2-1371 - Merge main, and commit recompiled css

config.js

@@ -10,4 +10,4 @@ mix.webpackConfig({
   devtool: 'source-map'
 })
 
-mix.sourceMaps(true,'eval-source-map');
+mix.sourceMaps(false,'eval-source-map');

includes/block.inc

@@ -20,7 +20,8 @@ function renovation_preprocess_block(&$variables) {
 
   $block_id = $variables['derivative_plugin_id'];
 
-  if ($block_id == 'hero') {
+  // Per WS2-1215 - Add video hero heading bg color
+  if (($block_id == 'hero') || ($block_id == 'video_hero')) {
     // Get the key of the selected value from the background color field.
     /** @var Drupal\block_content\ $block_content */
     $block_content = $variables['content']['#block_content'];

package.json

@@ -3,7 +3,7 @@
   "description": "A theme based on Radix.",
   "private": true,
   "scripts": {
-    "postinstall": "find node_modules/ -name '*.info' -type f -delete",
+    "postinstall": "find node_modules/ -name '*.info' -type f -delete && cp ./config.js ./config.local.js",
     "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",

src/components/accordions/accordions.js

@@ -1,18 +1,30 @@
-/* 
- * To change this license header, choose License Headers in Project Properties.
- * To change this template file, choose Tools | Templates
- * and open the template in the editor.
- */
+(function () {
+  const toggler = (url, state) => {
+    if (url.indexOf("#") !== -1) {
+      const sectionName = url.split("#").at(-1);
+      const link = document.getElementById(sectionName);
 
+      if (link) {
+        const section = link.closest(".card");
+        const content = section.querySelector(".card-body");
 
-if (window.location.href.indexOf('#') !== -1) {
-  const sectionName = window.location.href.split('#').at(-1)
-  const link = document.getElementById(sectionName);
-
-  if (link) {
-    const section = link.closest('.card');
-    const content = section.querySelector('.card-body')
-    link.setAttribute("aria-expanded", true);
-    content.classList.add("show");
-  }
-}
+        link.setAttribute("aria-expanded", state);
+
+        if (state) {
+          content.classList.add("show");
+        } else {
+          content.classList.remove("show");
+        }
+      }
+    }
+  };
+
+  window.addEventListener("hashchange", (event) => {
+    toggler(event.oldURL, false);
+    toggler(event.newURL, true);
+  });
+
+  window.addEventListener("DOMContentLoaded", () => {
+    toggler(window.location.href, true);
+  });
+})();

src/components/block/block.scss

@@ -3,6 +3,7 @@
     max-width: 100%;
   }
 }
+
 .block-inline-blockvideo-hero {
   .poster {
     display: none;
@@ -14,12 +15,14 @@
     .poster {
       display: block;
       width: 100%;
+      object-fit: fill;
     }
 
     .container {
       margin-bottom: 0;
       position: absolute;
       bottom: $uds-size-spacing-4;
+
       h1 {
         color: $uds-component-heading-highlight-white-bg-color;
       }
@@ -32,6 +35,7 @@
 
       .btn-row {
         margin-top: $uds-size-spacing-2;
+
         a {
           display: table;
         }
@@ -73,12 +77,11 @@
       width: 100%;
       background: linear-gradient(transparent, rgba(25, 25, 25, 0.75));
     }
-
   }
 
   .text-white {
     font-size: 1.5rem;
     font-weight: 700;
     line-height: 1.5;
   }
-}
+}

src/components/breadcrumb/_breadcrumb.scss

@@ -27,3 +27,9 @@
   }
 }
 
+// WS2-1036 and UDS-1129 hide breadcrumb on mobile
+@media screen and (max-width: $uds-breakpoint-sm) {
+  .breadcrumb {
+    display: none;
+  }
+}

src/components/breadcrumb/breadcrumb.twig

@@ -2,15 +2,9 @@
   {% if links is not empty %}
     <ol class="breadcrumb {{ bg_color }}">
       {% for link in links %}
-        {% if (link.url.routeName == '<nolink>') or (link.url.routeName == '<none>') %}
-          <li class="breadcrumb-item {{ not item.url ? ' active' }}" aria-current="page">
-            {{ link.text }}
-          </li>
-        {% else %}
-          <li class="breadcrumb-item">
-            <a href="{{ link.url }}">{{ link.text }}</a>
-          </li>
-        {% endif %}
+        <li class="breadcrumb-item">
+          <a href="{{ link.url }}">{{ link.text }}</a>
+        </li>
       {% endfor %}
     </ol>
   {% endif %}

src/components/buttons/button-action.twig

@@ -1,3 +1,4 @@
+{% if url is not empty %}
 <a 
     href="{{ url }}" 
     class="btn {{ button_color }}" 
@@ -10,4 +11,5 @@
     data-ga-section="{% if sub_heading is empty %}{{ heading }}{% else %}{{ sub_heading }}{% endif %}"
     data-ga-region="main content"
     data-ga-text="{{ title }}" 
-    {% if sub_heading is empty %}data-ga-component="" />{{ title }}</a>{% else %}data-ga-component="{{ heading }}" />{{ title }}</a>{% endif %}
+    {% if sub_heading is empty %}data-ga-component="" />{{ title }}</a>{% else %}data-ga-component="{{ heading }}" />{{ title }}</a>{% endif %}
+{% endif %}

src/components/headings/_headings.scss

@@ -1 +1,6 @@
 @import '../../sass/extends/headings';
+// Override the default headings to match max width of content
+.h2, h2, .h3, h3 {
+    max-width: 700px;
+    overflow-wrap: break-word;
+}

src/components/heroes/_heroes.scss

@@ -34,9 +34,38 @@
       margin: auto auto 3rem auto;
       width: 100%;
 
+      /* WS2-1215 - Sub heading added to video hero */
+      [role='doc-subtitle'] {
+        @include like-h3;
+        display: inline-block;
+        grid-row: 2;
+        line-height: 1;
+        .highlight-white {
+          @include like-h3-highlight-white;
+        }
+        .highlight-black {
+          @include like-h3-highlight-black;
+        }
+        .highlight-gold {
+          @include like-h3-highlight-gold;
+        }
+        span {
+          box-decoration-break: clone;
+          -webkit-box-decoration-break: clone;
+          margin-left: 0.15em;
+        }
+      }
+
+      /* WS2-1215 - CSS adjustments for h1 and .content */
       h1 {
         padding-left: 0;
         color: #ffffff;
+        margin: 0 0 0 0.6rem;
+        max-width: 700px;
+      }
+
+      .content {
+        margin-top: 1.5rem;
       }
 
       .buttons {

src/components/heroes/heroes.twig

@@ -59,6 +59,7 @@
       <button 
         class="second pause" 
         type="button"
+        aria-label="Pause"
         data-ga-event="link"
         data-ga-action="click"
         data-ga-name="onclick"