Rename component -title/-subtitle classes to -heading/-subheading (#668)

assets/js/protocol/menu.js

@@ -29,7 +29,7 @@ MzpMenu.open = (el, animate) => {
 
     _menuOpen = true; // For checking menu state on keyup.
 
-    el.querySelector('.mzp-c-menu-title').setAttribute('aria-expanded', true);
+    el.querySelector('.mzp-c-menu-heading').setAttribute('aria-expanded', true);
 
     if (typeof _options.onMenuOpen === 'function') {
         _options.onMenuOpen(el);
@@ -50,7 +50,7 @@ MzpMenu.close = () => {
         current[i].classList.remove('mzp-is-selected');
         current[i].classList.remove('mzp-is-animated');
 
-        current[i].querySelector('.mzp-c-menu-title').setAttribute('aria-expanded', false);
+        current[i].querySelector('.mzp-c-menu-heading').setAttribute('aria-expanded', false);
     }
 
     _menuOpen = false; // For checking menu state on keyup.
@@ -97,7 +97,7 @@ MzpMenu.toggle = (el) => {
         // https://github.com/mozilla/bedrock/issues/6221 :/
         el.classList.remove('mzp-is-selected');
         el.classList.remove('mzp-is-animated');
-        el.querySelector('.mzp-c-menu-title').setAttribute('aria-expanded', false);
+        el.querySelector('.mzp-c-menu-heading').setAttribute('aria-expanded', false);
 
         if (typeof _options.onMenuClose === 'function') {
             _options.onMenuClose();
@@ -230,7 +230,7 @@ MzpMenu.bindEventsWide = () => {
         items[i].addEventListener('mouseenter', MzpMenu.onMouseEnter, false);
         items[i].addEventListener('mouseleave', MzpMenu.onMouseLeave, false);
         items[i].addEventListener('focusout', MzpMenu.onFocusOut, false);
-        link = items[i].querySelector('.mzp-c-menu-title');
+        link = items[i].querySelector('.mzp-c-menu-heading');
         link.addEventListener('click', MzpMenu.onClickWide, false);
 
         close = items[i].querySelector('.mzp-c-menu-button-close');
@@ -254,7 +254,7 @@ MzpMenu.unbindEventsWide = () => {
         items[i].removeEventListener('mouseleave', MzpMenu.onMouseLeave, false);
         items[i].removeEventListener('focusout', MzpMenu.onFocusOut, false);
 
-        link = items[i].querySelector('.mzp-c-menu-title');
+        link = items[i].querySelector('.mzp-c-menu-heading');
         link.removeEventListener('click', MzpMenu.onClickWide, false);
 
         close = items[i].querySelector('.mzp-c-menu-button-close');
@@ -268,7 +268,7 @@ MzpMenu.unbindEventsWide = () => {
  * Bind events for small viewports.
  */
 MzpMenu.bindEventsSmall = () => {
-    const items = document.querySelectorAll('.mzp-c-menu-category.mzp-js-expandable .mzp-c-menu-title');
+    const items = document.querySelectorAll('.mzp-c-menu-category.mzp-js-expandable .mzp-c-menu-heading');
 
     for (let i = 0; i < items.length; i++) {
         items[i].addEventListener('click', MzpMenu.onClickSmall, false);
@@ -279,7 +279,7 @@ MzpMenu.bindEventsSmall = () => {
  * Unbind events for small viewports.
  */
 MzpMenu.unbindEventsSmall = () => {
-    const items = document.querySelectorAll('.mzp-c-menu-category.mzp-js-expandable .mzp-c-menu-title');
+    const items = document.querySelectorAll('.mzp-c-menu-category.mzp-js-expandable .mzp-c-menu-heading');
 
     for (let i = 0; i < items.length; i++) {
         items[i].removeEventListener('click', MzpMenu.onClickSmall, false);
@@ -290,7 +290,7 @@ MzpMenu.unbindEventsSmall = () => {
  * Set initial ARIA menu panel states.
  */
 MzpMenu.setAria = () => {
-    const items = document.querySelectorAll('.mzp-c-menu-category.mzp-js-expandable .mzp-c-menu-title');
+    const items = document.querySelectorAll('.mzp-c-menu-category.mzp-js-expandable .mzp-c-menu-heading');
 
     for (let i = 0; i < items.length; i++) {
         items[i].setAttribute('aria-expanded', false);

assets/sass/protocol/base/_elements.scss

@@ -11,8 +11,8 @@
 @use 'elements/details';
 @use 'elements/document';
 @use 'elements/forms';
+@use 'elements/headings';
 @use 'elements/links';
 @use 'elements/lists';
 @use 'elements/quotes';
 @use 'elements/tables';
-@use 'elements/titles';

assets/sass/protocol/base/utilities/_titles.scss → assets/sass/protocol/base/utilities/_headings.scss

@@ -4,7 +4,7 @@
 
 @use '../../includes/lib' as *;
 
-// Utility classes for title styles.
+// Utility classes for heading styles.
 // These classes are purely presentational. Don't use them if you don't have to.
 
 .mzp-u-heading-2xl {

assets/sass/protocol/components/_article.scss

@@ -21,7 +21,7 @@
     }
 }
 
-.mzp-c-article-title {
+.mzp-c-article-heading {
     @include text-heading-lg;
 }
 

assets/sass/protocol/components/_billboard.scss

@@ -28,7 +28,7 @@ $billboard-content-width-lg: 374px + $spacing-md; // content width + spacing med
         width: 100%;
     }
 
-    .mzp-c-billboard-title {
+    .mzp-c-billboard-heading {
         @include text-heading-md;
     }
 

assets/sass/protocol/components/_callout.scss

@@ -31,7 +31,7 @@
 .mzp-c-callout.mzp-l-compact {
     text-align: start;
 
-    .mzp-c-callout-title {
+    .mzp-c-callout-heading {
         @include text-heading-sm;
     }
 
@@ -64,12 +64,12 @@
             width: auto;
         }
 
-        .mzp-c-callout-title,
+        .mzp-c-callout-heading,
         .mzp-c-callout-desc {
             margin-bottom: 0;
         }
 
-        .mzp-c-callout-title + .mzp-c-callout-desc {
+        .mzp-c-callout-heading + .mzp-c-callout-desc {
             margin-top: $spacing-sm;
         }
     }

assets/sass/protocol/components/_card.scss

@@ -71,12 +71,12 @@
         background-image: url('#{$image-path}/icons/audio-card.svg');
     }
 
-    .mzp-c-card-title {
+    .mzp-c-card-heading {
         @include text-heading-xs;
         display: inline;
     }
 
-    .mzp-c-card-title,
+    .mzp-c-card-heading,
     .mzp-c-card-cta-text {
         border-bottom: 2px solid transparent;
     }
@@ -106,7 +106,7 @@
             transition: box-shadow 0.1s ease-in-out;
             box-shadow: 0 0 0 4px $color-marketing-gray-20;
 
-            .mzp-c-card-title,
+            .mzp-c-card-heading,
             .mzp-c-card-cta-text {
                 transition: border-bottom-color 100ms ease-in-out;
                 border-bottom: 2px solid;
@@ -154,10 +154,10 @@
 }
 
 // * -------------------------------------------------------------------------- */
-// Card with larger title
+// Card with larger heading
 
 .mzp-c-card.mzp-c-card-large {
-    .mzp-c-card-title {
+    .mzp-c-card-heading {
         @include text-heading-md;
     }
 
@@ -167,15 +167,15 @@
 }
 
 // * -------------------------------------------------------------------------- */
-// Card with small title and text
+// Card with small heading and text
 
 .mzp-c-card.mzp-c-card-small {
     .mzp-c-card-tag,
     .mzp-c-card-cta {
         @include text-body-xs;
     }
 
-    .mzp-c-card-title {
+    .mzp-c-card-heading {
         @include text-heading-2xs;
     }
 

assets/sass/protocol/components/_menu-item.scss

@@ -18,22 +18,22 @@ $icon-size: 24px;
         &:hover,
         &:active,
         &:focus {
-            .mzp-c-menu-item-title {
+            .mzp-c-menu-item-heading {
                 transition: border-bottom-color 100ms ease-in-out;
                 border-bottom: 2px solid var(--theme-body-text-color);
                 color: var(--theme-body-text-color);
             }
         }
 
-        .mzp-c-menu-item-title {
+        .mzp-c-menu-item-heading {
             border-bottom: 2px solid transparent;
         }
     }
 
     .mzp-c-menu-item-head {
         display: block;
 
-        .mzp-c-menu-item-title {
+        .mzp-c-menu-item-heading {
             border-bottom: 2px solid transparent;
         }
     }
@@ -55,7 +55,7 @@ $icon-size: 24px;
         }
     }
 
-    .mzp-c-menu-item-title {
+    .mzp-c-menu-item-heading {
         @include text-heading-2xs;
         display: inline;
     }

assets/sass/protocol/components/_menu-list.scss

@@ -8,7 +8,7 @@
     display: inline-block;
 }
 
-.mzp-c-menu-list-title {
+.mzp-c-menu-list-heading {
     font-family: var(--theme-button-font-family);
     font-size: inherit;
     font-weight: bold;
@@ -67,7 +67,7 @@
         position: relative;
     }
 
-    .mzp-c-menu-list-title {
+    .mzp-c-menu-list-heading {
         button {
             background: transparent;
             border: 0;

assets/sass/protocol/components/_menu.scss

@@ -45,7 +45,7 @@
 }
 
 .mzp-c-menu-category {
-    .mzp-c-menu-title {
+    .mzp-c-menu-heading {
         border-bottom: 1px solid $color-marketing-gray-30;
         color: var(--theme-body-text-color);
         display: block;
@@ -70,7 +70,7 @@
         }
     }
 
-    &.mzp-has-drop-down .mzp-c-menu-title {
+    &.mzp-has-drop-down .mzp-c-menu-heading {
         text-decoration: none;
 
         &::before {
@@ -88,7 +88,7 @@
     }
 
     @supports (display: flex) {
-        .mzp-c-menu-title {
+        .mzp-c-menu-heading {
             align-items: center;
             display: flex;
         }
@@ -98,7 +98,7 @@
         display: inline-block;
         float: inline-start;
 
-        .mzp-c-menu-title {
+        .mzp-c-menu-heading {
             border-bottom: none;
             padding: 0 $spacing-sm $spacing-lg;
 
@@ -107,38 +107,38 @@
             }
         }
 
-        &.mzp-has-drop-down .mzp-c-menu-title::before {
+        &.mzp-has-drop-down .mzp-c-menu-heading::before {
             display: none;
         }
     }
 
     @media #{$mq-lg} {
-        .mzp-c-menu-title {
+        .mzp-c-menu-heading {
             padding: 0 $spacing-md $spacing-lg;
         }
     }
 
     @media #{$mq-xl} {
-        .mzp-c-menu-title {
+        .mzp-c-menu-heading {
             padding: 0 $spacing-lg $spacing-lg;
         }
     }
 }
 
 // Basic hover interactions with JavaScript disabled or not supported..
 .mzp-c-menu.mzp-is-basic .mzp-c-menu-category {
-    .mzp-c-menu-title::before {
+    .mzp-c-menu-heading::before {
         display: none;
     }
 
     @media #{$mq-md} {
-        .mzp-c-menu-title::before {
+        .mzp-c-menu-heading::before {
             display: none;
         }
 
         &.mzp-has-drop-down:hover,
         &.mzp-has-drop-down:focus {
-            .mzp-c-menu-title {
+            .mzp-c-menu-heading {
                 @include highlighted;
                 z-index: 1001;
             }
@@ -150,7 +150,7 @@
         }
 
         &.mzp-has-drop-down:focus-within {
-            .mzp-c-menu-title {
+            .mzp-c-menu-heading {
                 @include highlighted;
                 z-index: 1001;
             }
@@ -166,7 +166,7 @@
 // Enhanced hover interactions with JavaScript enabled.
 .mzp-c-menu.mzp-is-enhanced .mzp-c-menu-category {
     &.mzp-is-selected {
-        .mzp-c-menu-title::before {
+        .mzp-c-menu-heading::before {
             transform: rotate(45deg);
         }
 
@@ -179,13 +179,13 @@
     @media #{$mq-md} {
         &.mzp-is-animated {
             .mzp-c-menu-panel,
-            .mzp-c-menu-title::after {
+            .mzp-c-menu-heading::after {
                 animation: mzp-a-fade-in 80ms ease-in 0ms 1 normal both; /* stylelint-disable-line no-unknown-animations */
             }
         }
 
         &.mzp-is-selected {
-            .mzp-c-menu-title {
+            .mzp-c-menu-heading {
                 @include highlighted;
                 z-index: 101;
             }

assets/sass/protocol/components/_newsletter-form.scss

@@ -35,7 +35,7 @@
     }
 }
 
-.mzp-c-newsletter-title {
+.mzp-c-newsletter-heading {
     @include text-heading-md;
     margin-bottom: 0.25em;
 }

assets/sass/protocol/components/_sidebar-menu.scss

@@ -98,7 +98,7 @@
     }
 }
 
-.mzp-c-sidemenu-title {
+.mzp-c-sidemenu-heading {
     line-height: 1.5;
     margin-bottom: 0.25em;
     @include text-body-lg;