diff --git a/assets/js/protocol/menu.js b/assets/js/protocol/menu.js index 2c066d715..3e4e4979f 100644 --- a/assets/js/protocol/menu.js +++ b/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); diff --git a/assets/sass/protocol/base/_elements.scss b/assets/sass/protocol/base/_elements.scss index f86d16151..3c9fc9251 100644 --- a/assets/sass/protocol/base/_elements.scss +++ b/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'; diff --git a/assets/sass/protocol/base/elements/_titles.scss b/assets/sass/protocol/base/elements/_headings.scss similarity index 100% rename from assets/sass/protocol/base/elements/_titles.scss rename to assets/sass/protocol/base/elements/_headings.scss diff --git a/assets/sass/protocol/base/utilities/_titles.scss b/assets/sass/protocol/base/utilities/_headings.scss similarity index 95% rename from assets/sass/protocol/base/utilities/_titles.scss rename to assets/sass/protocol/base/utilities/_headings.scss index 0a185f0d8..1ee1e9ef9 100644 --- a/assets/sass/protocol/base/utilities/_titles.scss +++ b/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 { diff --git a/assets/sass/protocol/components/_article.scss b/assets/sass/protocol/components/_article.scss index 77705418b..7a91b2659 100644 --- a/assets/sass/protocol/components/_article.scss +++ b/assets/sass/protocol/components/_article.scss @@ -21,7 +21,7 @@ } } -.mzp-c-article-title { +.mzp-c-article-heading { @include text-heading-lg; } diff --git a/assets/sass/protocol/components/_billboard.scss b/assets/sass/protocol/components/_billboard.scss index 342b56796..95d41316f 100644 --- a/assets/sass/protocol/components/_billboard.scss +++ b/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; } diff --git a/assets/sass/protocol/components/_callout.scss b/assets/sass/protocol/components/_callout.scss index 26fa9c48b..3d203fff9 100644 --- a/assets/sass/protocol/components/_callout.scss +++ b/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; } } diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss index 5d86e0c52..5ad65d78e 100644 --- a/assets/sass/protocol/components/_card.scss +++ b/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,7 +167,7 @@ } // * -------------------------------------------------------------------------- */ -// Card with small title and text +// Card with small heading and text .mzp-c-card.mzp-c-card-small { .mzp-c-card-tag, @@ -175,7 +175,7 @@ @include text-body-xs; } - .mzp-c-card-title { + .mzp-c-card-heading { @include text-heading-2xs; } diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss index 3a6cbbded..bd160383f 100644 --- a/assets/sass/protocol/components/_menu-item.scss +++ b/assets/sass/protocol/components/_menu-item.scss @@ -18,14 +18,14 @@ $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; } } @@ -33,7 +33,7 @@ $icon-size: 24px; .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; } diff --git a/assets/sass/protocol/components/_menu-list.scss b/assets/sass/protocol/components/_menu-list.scss index e4a7f3b25..0808bf15e 100644 --- a/assets/sass/protocol/components/_menu-list.scss +++ b/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; diff --git a/assets/sass/protocol/components/_menu.scss b/assets/sass/protocol/components/_menu.scss index 7af4bd7a5..bd7072c23 100644 --- a/assets/sass/protocol/components/_menu.scss +++ b/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,19 +107,19 @@ } } - &.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; } } @@ -127,18 +127,18 @@ // 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; } diff --git a/assets/sass/protocol/components/_newsletter-form.scss b/assets/sass/protocol/components/_newsletter-form.scss index 7cb4cb524..e9ddf4506 100644 --- a/assets/sass/protocol/components/_newsletter-form.scss +++ b/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; } diff --git a/assets/sass/protocol/components/_sidebar-menu.scss b/assets/sass/protocol/components/_sidebar-menu.scss index 1af31260c..70f0c5144 100644 --- a/assets/sass/protocol/components/_sidebar-menu.scss +++ b/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; diff --git a/assets/sass/protocol/components/_sticky-promo.scss b/assets/sass/protocol/components/_sticky-promo.scss index cad61663c..f8b79e786 100644 --- a/assets/sass/protocol/components/_sticky-promo.scss +++ b/assets/sass/protocol/components/_sticky-promo.scss @@ -14,7 +14,7 @@ $logos: ( ); @each $name, $value in $logos { - .mzp-c-sticky-promo-title { + .mzp-c-sticky-promo-heading { .mzp-t-dark.mzp-t-product-#{$name} & { background-image: url('#{$value}-white.svg'); background-size: auto, 40px; @@ -76,7 +76,7 @@ $logos: ( &.mzp-t-product-beta, &.mzp-t-product-developer, &.mzp-t-product-nightly { - .mzp-c-sticky-promo-title { + .mzp-c-sticky-promo-heading { background-size: auto 40px; background-position: top left; background-repeat: no-repeat; @@ -86,7 +86,7 @@ $logos: ( } } -.mzp-c-sticky-promo-title { +.mzp-c-sticky-promo-heading { @include text-heading-xs; margin-bottom: $spacing-xl; } diff --git a/assets/sass/protocol/components/forms/_form.scss b/assets/sass/protocol/components/forms/_form.scss index 0a0bfae38..4c932f3d1 100644 --- a/assets/sass/protocol/components/forms/_form.scss +++ b/assets/sass/protocol/components/forms/_form.scss @@ -10,7 +10,7 @@ // - form // - form // - form-header -// - form-title +// - form-heading // - form-footer .mzp-c-form { @@ -54,9 +54,9 @@ } } -// Title -.mzp-c-form-title, -legend.mzp-c-form-title { +// Heading +.mzp-c-form-heading, +legend.mzp-c-form-heading { @include text-heading-xs; color: var(--theme-heading-text-color); margin: 0 0 $spacing-lg; @@ -70,16 +70,16 @@ legend.mzp-c-form-title { } } -// Subtitle -.mzp-c-form-subtitle, -legend.mzp-c-form-subtitle { +// Subheading +.mzp-c-form-subheading, +legend.mzp-c-form-subheading { font-weight: bold; margin-bottom: forms.$field-v-spacing; @include text-body-lg; } -legend.mzp-c-form-title, -legend.mzp-c-form-subtitle { +legend.mzp-c-form-heading, +legend.mzp-c-form-subheading { float: left; width: 100%; } diff --git a/assets/sass/protocol/protocol.scss b/assets/sass/protocol/protocol.scss index d023177d5..6bb2b0724 100644 --- a/assets/sass/protocol/protocol.scss +++ b/assets/sass/protocol/protocol.scss @@ -25,8 +25,8 @@ // Base utilities @use 'base/utilities/backgrounds'; +@use 'base/utilities/headings'; @use 'base/utilities/rich-text'; -@use 'base/utilities/titles'; // Base includes - animations @use 'base/includes'; diff --git a/components/article/article.html b/components/article/article.html index 80acac637..a9241a76e 100644 --- a/components/article/article.html +++ b/components/article/article.html @@ -1,5 +1,5 @@
-

We’re building a better Internet

+

We’re building a better Internet

Our mission is to ensure the Internet is a global public resource, open and accessible to all. An Internet that truly puts people first, where individuals can shape their own experience and are diff --git a/components/billboard/billboard.html b/components/billboard/billboard.html index 3d1548205..7cca6f186 100644 --- a/components/billboard/billboard.html +++ b/components/billboard/billboard.html @@ -16,7 +16,7 @@

- <{{ title_el | default('h2') }} class="mzp-c-billboard-title">{{ title }} + <{{ title_el | default('h2') }} class="mzp-c-billboard-heading">{{ title }} {%- if desc %}

{{ desc }}

{% endif -%} diff --git a/components/callout/callout--example.html b/components/callout/callout--example.html index f75a51246..6d45916ff 100644 --- a/components/callout/callout--example.html +++ b/components/callout/callout--example.html @@ -2,7 +2,7 @@
{% render '@logo', { product: 'firefox', size: 'lg', label: 'Firefox', layout: 'mzp-l-logo-center' } %} -

A Prime Example

+

A Prime Example

This is an example of a more elaborate Callout component like you might see as a page header or other prominent callout. It features a logo and two short paragraphs as a description, one of which is perhaps a little too long. Centered text is hard to read in large blocks so it‘s best to keep it short.

It also has a video.

diff --git a/components/callout/callout.html b/components/callout/callout.html index b74df8c50..65c4750ed 100644 --- a/components/callout/callout.html +++ b/components/callout/callout.html @@ -14,7 +14,7 @@
- <{{ title_el | default('h2') }} class="mzp-c-callout-title{% if title_class %} {{ title_class }}{% endif %}">{{ title }} + <{{ title_el | default('h2') }} class="mzp-c-callout-heading{% if title_class %} {{ title_class }}{% endif %}">{{ title }} {%- if desc %}

{{ desc }}

diff --git a/components/card/card.html b/components/card/card.html index 8f5cfeb05..944b56ca0 100644 --- a/components/card/card.html +++ b/components/card/card.html @@ -18,7 +18,7 @@
{% if tag %}
{{ tag }}
{% endif %} - {% if title %}<{{ title_el | default('h2') }} class="mzp-c-card-title">{{ title }}{% endif %} + {% if title %}<{{ title_el | default('h2') }} class="mzp-c-card-heading">{{ title }}{% endif %} {% if desc %}

{{ desc }}

{% endif %} {% if cta %}

{{ cta }}

{% endif %} {% if meta %}

{{ meta }}

{% endif %} diff --git a/components/forms/07-headings/headings.html b/components/forms/07-headings/headings.html new file mode 100644 index 000000000..d4f7d89ee --- /dev/null +++ b/components/forms/07-headings/headings.html @@ -0,0 +1,2 @@ +

Title

+

Subtitle

diff --git a/components/forms/07-headings/readme.md b/components/forms/07-headings/readme.md new file mode 100644 index 000000000..6b574da10 --- /dev/null +++ b/components/forms/07-headings/readme.md @@ -0,0 +1,7 @@ +There are two classes for styling headings that appear in forms: +`mzp-c-form-heading` and `mzp-c-form-subheading` + +### Tips + +- Use semantic headings to communicate the hierarchy of headings within the document. +- The subheading styles match the styling of the `` element. diff --git a/components/forms/07-titles/readme.md b/components/forms/07-titles/readme.md deleted file mode 100644 index 1a5d039bd..000000000 --- a/components/forms/07-titles/readme.md +++ /dev/null @@ -1,7 +0,0 @@ -There are two classes for styling titles (aka headings) that appear in forms: -`mzp-c-form-title` and `mzp-c-form-subtitle` - -### Tips - -- Use semantic headings to communicate the hierarchy of titles within the document. -- The subtitle styles match the styling of the `` element. diff --git a/components/forms/07-titles/titles.html b/components/forms/07-titles/titles.html deleted file mode 100644 index 4fcdba92f..000000000 --- a/components/forms/07-titles/titles.html +++ /dev/null @@ -1,2 +0,0 @@ -

Title

-

Subtitle

diff --git a/components/forms/12-form-header/form-header.html b/components/forms/12-form-header/form-header.html index 20e5e5692..2382d8507 100644 --- a/components/forms/12-form-header/form-header.html +++ b/components/forms/12-form-header/form-header.html @@ -1,6 +1,6 @@
-

Form Title

+

Form Title

The title and this introduction are inside a form-header.

diff --git a/components/forms/example-form/example-form.html b/components/forms/example-form/example-form.html index af3c22e8f..e34fd331f 100644 --- a/components/forms/example-form/example-form.html +++ b/components/forms/example-form/example-form.html @@ -1,12 +1,12 @@
-

Speaker request form

+

Speaker request form

Please complete and submit the form below to request a speaker from Mozilla for your upcoming event.

- Event Information + Event Information {% render '@input-field', { type: 'text', id: 'event_name', name: 'event_name', required: true, note: 'Required', note: 'Required', label: 'Event Name' } %} {% render '@input-field', { type: 'url', id: 'event_url', name: 'event_url', required: true, note: 'Required', label: 'Event URL', placeholder: 'https://' } %} {% render '@input-field', { type: 'date', id: 'event_date', name: 'event_date', required: true, note: 'Required', label: 'Event Date', info: 'If the event is sooner than 20 business days we are unlikely to be able to provide a speaker' } %} @@ -14,7 +14,7 @@

Speaker request form

- Your Contact Information + Your Contact Information {% render '@input-field', { type: 'text', id: 'contact_company', name: 'contact_company', required: true, note: 'Required', label: 'Company' } %} {% render '@input-field', { type: 'text', id: 'contact_name', name: 'contact_name', required: true, note: 'Required', label: 'Name' } %} {% render '@input-field', { type: 'email', id: 'contact_email', name: 'contact_email', required: true, note: 'Required', label: 'E-mail' } %} @@ -22,12 +22,12 @@

Speaker request form

- Event Details + Event Details {% render '@textarea-field', { id: 'event_details', name: 'event_details', rows: 5, cols: 60, note: 'Theme, venue, audience demographics, confirmed speakers…', label: 'Tell us about your event' } %}
- Speaker Request + Speaker Request {% render '@input-field', { type: 'text', id: 'guest_1', name: 'guest_1', label: 'Guest Speaker Choice #1' } %} {% render '@input-field', { type: 'text', id: 'guest_2', name: 'guest_2', label: 'Guest Speaker Choice #2' } %} {% render '@input-field', { type: 'text', id: 'guest_topic', name: 'guest_topic', label: 'Topic of Presentation' } %} diff --git a/components/menu-list/menu-list.html b/components/menu-list/menu-list.html index bc792909e..cab14ae16 100644 --- a/components/menu-list/menu-list.html +++ b/components/menu-list/menu-list.html @@ -1,5 +1,5 @@
-

Meet the Family

+

Meet the Family