From 0ba71899d10ff559d18706702c363fcaa4100e5c Mon Sep 17 00:00:00 2001 From: Stephanie Hobson Date: Wed, 9 Sep 2026 12:07:46 -0700 Subject: [PATCH 1/2] Rename component -title/-subtitle classes to -heading/-subheading (#668) Finishes the component-class half of the title -> heading rename that PR") -- the branch that originally held this work no longer exists, so this redoes it against current main. Mixins, utility classes, and CSS vars were already renamed in #1107; this covers the remaining 12 component-level BEM classes across Article, Billboard, Callout, Card, Form, Menu, Menu Item, Menu List, Newsletter, Sidebar Menu, and Sticky Promo: mzp-c-menu-title -> mzp-c-menu-heading mzp-c-form-title -> mzp-c-form-heading mzp-c-form-subtitle -> mzp-c-form-subheading mzp-c-card-title -> mzp-c-card-heading mzp-c-menu-item-title -> mzp-c-menu-item-heading mzp-c-callout-title -> mzp-c-callout-heading mzp-c-sticky-promo-title -> mzp-c-sticky-promo-heading mzp-c-newsletter-title -> mzp-c-newsletter-heading mzp-c-menu-list-title -> mzp-c-menu-list-heading mzp-c-sidemenu-title -> mzp-c-sidemenu-heading mzp-c-billboard-title -> mzp-c-billboard-heading mzp-c-article-title -> mzp-c-article-heading Clean break, no aliases, per the naming issue's own note that this is a breaking rename (#668). Also: - Renamed the two already-heading-only-content files that still had the stale filename: base/elements/_titles.scss and base/utilities/_titles.scss -> _headings.scss (updated their @use sites and kept the alphabetical @use ordering in _elements.scss and protocol.scss) - Renamed the forms/07-titles component directory and titles.html to 07-headings/headings.html; reworded its readme, which still said "titles (aka headings)" - Updated the 8 .mzp-c-menu-title selectors in assets/js/protocol/menu.js - Fixed tests/unit/menu.js's fixture markup, which still built a .mzp-c-menu-title element -- missed by a first pass that only searched assets/ and components/ - Extended docs/02-usage/migration.md with find/replace recipes for this rename, matching the existing style docs/03-contributing/02-naming.md's example already used -heading/-desc and needed no change here. Verified: npm run lint, npm test (47 specs, Firefox + Chrome), npm run build-docs (523 items, no errors -- confirmed the renamed forms/headings component renders with the new classes), and npm run build-package all pass. --- assets/js/protocol/menu.js | 16 +++++------ assets/sass/protocol/base/_elements.scss | 2 +- .../elements/{_titles.scss => _headings.scss} | 0 .../{_titles.scss => _headings.scss} | 2 +- assets/sass/protocol/components/_article.scss | 2 +- .../sass/protocol/components/_billboard.scss | 2 +- assets/sass/protocol/components/_callout.scss | 6 ++-- assets/sass/protocol/components/_card.scss | 10 +++---- .../sass/protocol/components/_menu-item.scss | 8 +++--- .../sass/protocol/components/_menu-list.scss | 4 +-- assets/sass/protocol/components/_menu.scss | 28 +++++++++---------- .../protocol/components/_newsletter-form.scss | 2 +- .../protocol/components/_sidebar-menu.scss | 2 +- .../protocol/components/_sticky-promo.scss | 6 ++-- .../sass/protocol/components/forms/_form.scss | 12 ++++---- assets/sass/protocol/protocol.scss | 2 +- components/article/article.html | 2 +- components/billboard/billboard.html | 2 +- components/callout/callout--example.html | 2 +- components/callout/callout.html | 2 +- components/card/card.html | 2 +- components/forms/07-headings/headings.html | 2 ++ components/forms/07-headings/readme.md | 7 +++++ components/forms/07-titles/readme.md | 7 ----- components/forms/07-titles/titles.html | 2 -- .../forms/12-form-header/form-header.html | 2 +- .../forms/example-form/example-form.html | 10 +++---- components/menu-list/menu-list.html | 4 +-- components/navigation/02-menu/menu.html | 4 +-- .../navigation/03-menu-item/menu-item.html | 2 +- components/newsletter/newsletter--errors.html | 2 +- .../newsletter/newsletter--success.html | 2 +- components/newsletter/newsletter.html | 2 +- components/sidebar-menu/sidebar-menu.html | 4 +-- components/sticky-promo/sticky-promo.html | 2 +- docs/02-usage/migration.md | 28 +++++++++++++++++++ tests/unit/menu.js | 6 ++-- 37 files changed, 114 insertions(+), 86 deletions(-) rename assets/sass/protocol/base/elements/{_titles.scss => _headings.scss} (100%) rename assets/sass/protocol/base/utilities/{_titles.scss => _headings.scss} (95%) create mode 100644 components/forms/07-headings/headings.html create mode 100644 components/forms/07-headings/readme.md delete mode 100644 components/forms/07-titles/readme.md delete mode 100644 components/forms/07-titles/titles.html 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..66089d991 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; @@ -157,7 +157,7 @@ // Card with larger title .mzp-c-card.mzp-c-card-large { - .mzp-c-card-title { + .mzp-c-card-heading { @include text-heading-md; } @@ -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..9c75096af 100644 --- a/assets/sass/protocol/components/forms/_form.scss +++ b/assets/sass/protocol/components/forms/_form.scss @@ -55,8 +55,8 @@ } // Title -.mzp-c-form-title, -legend.mzp-c-form-title { +.mzp-c-form-heading, +legend.mzp-c-form-heading { @include text-heading-xs; color: var(--theme-heading-text-color); margin: 0 0 $spacing-lg; @@ -71,15 +71,15 @@ legend.mzp-c-form-title { } // Subtitle -.mzp-c-form-subtitle, -legend.mzp-c-form-subtitle { +.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

  • Relay
  • Monitor
    • @@ -11,5 +11,5 @@

    Meet the Family

    diff --git a/components/navigation/02-menu/menu.html b/components/navigation/02-menu/menu.html index 977179d25..f7f7cede5 100644 --- a/components/navigation/02-menu/menu.html +++ b/components/navigation/02-menu/menu.html @@ -2,10 +2,10 @@