diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e9136f62..5f8dbbcee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust * Reorganization: * (breaking) Renamed `-title-` to `-heading-` in mixins and CSS vars * and `mzp-u-heading-*` utility classes - * component HTML/CSS classes will follow in a separate PR + * component HTML/CSS classes: see Component Naming below * Added font-family declaration to `@include text-body-*` mixins * Added `--theme-` prefix to variables expected to morph * Added `--token-` prefix to unchanging variables @@ -49,6 +49,20 @@ Introducing theme variables! CSS variables beginning with `--theme-` will adjust * Added status color variables (`--theme-color-success-*`, `--theme-color-error-*`, `--theme-color-warning-*`, `--theme-color-info-*`) * Removed Sass color variables from `_themes-sass.scss` (use CSS variables instead) +### Component Naming + +* (breaking) Renamed the remaining `-title`/`-subtitle` component classes to `-heading`/`-subheading`, finishing the rename the Typography section above started for mixins/utility classes/CSS vars. Affects Article, Billboard, Callout, Card, Form, Menu, Menu Item, Menu List, Newsletter, Sidebar Menu, and Sticky Promo (#668): + * `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-callout-title`, `mzp-c-sticky-promo-title`, `mzp-c-newsletter-title`, `mzp-c-menu-list-title`, `mzp-c-sidemenu-title`, `mzp-c-billboard-title`, `mzp-c-article-title` → the equivalent `-heading` +* (breaking) Renamed the remaining `-desc` component classes to `-body`, matching the `desc`/`body` naming already used by Picto. Affects Billboard, Callout, Card, and Menu Item: + * `mzp-c-callout-desc` → `mzp-c-callout-body` + * `mzp-c-card-desc` → `mzp-c-card-body` + * `mzp-c-menu-item-desc` → `mzp-c-menu-item-body` + * `mzp-c-billboard-desc` → `mzp-c-billboard-body` +* Clean break, no aliases -- see the [Migration Guide](https://protocol.mozilla.org/docs/usage/migration) for find/replace scripts + ## Component changes ### Feature Card diff --git a/assets/sass/protocol/components/_callout.scss b/assets/sass/protocol/components/_callout.scss index 3d203fff9..03c28de89 100644 --- a/assets/sass/protocol/components/_callout.scss +++ b/assets/sass/protocol/components/_callout.scss @@ -10,7 +10,7 @@ .mzp-c-callout { text-align: center; - .mzp-c-callout-desc { + .mzp-c-callout-body { margin-bottom: $spacing-lg; @include text-body-lg; } @@ -35,7 +35,7 @@ @include text-heading-sm; } - .mzp-c-callout-desc { + .mzp-c-callout-body { @include text-body-md; } @@ -65,11 +65,11 @@ } .mzp-c-callout-heading, - .mzp-c-callout-desc { + .mzp-c-callout-body { margin-bottom: 0; } - .mzp-c-callout-heading + .mzp-c-callout-desc { + .mzp-c-callout-heading + .mzp-c-callout-body { margin-top: $spacing-sm; } } diff --git a/assets/sass/protocol/components/_card.scss b/assets/sass/protocol/components/_card.scss index 5ad65d78e..43cb1a98f 100644 --- a/assets/sass/protocol/components/_card.scss +++ b/assets/sass/protocol/components/_card.scss @@ -81,7 +81,7 @@ border-bottom: 2px solid transparent; } - .mzp-c-card-desc { + .mzp-c-card-body { margin: $spacing-xs 0 0; } @@ -161,7 +161,7 @@ @include text-heading-md; } - .mzp-c-card-desc { + .mzp-c-card-body { @include text-body-lg; } } @@ -179,7 +179,7 @@ @include text-heading-2xs; } - .mzp-c-card-desc { + .mzp-c-card-body { @include text-body-sm; } diff --git a/assets/sass/protocol/components/_menu-item.scss b/assets/sass/protocol/components/_menu-item.scss index bd160383f..a3aa55982 100644 --- a/assets/sass/protocol/components/_menu-item.scss +++ b/assets/sass/protocol/components/_menu-item.scss @@ -60,7 +60,7 @@ $icon-size: 24px; display: inline; } - .mzp-c-menu-item-desc { + .mzp-c-menu-item-body { margin: $spacing-sm 0 0; @include text-body-sm; } diff --git a/components/billboard/billboard.config.yml b/components/billboard/billboard.config.yml index 28ec8125b..aa2fdf45b 100644 --- a/components/billboard/billboard.config.yml +++ b/components/billboard/billboard.config.yml @@ -1,6 +1,6 @@ preview: '@preview-unpadded' context: heading: Example headline with 35 characters - desc: A description with a maximum of 100 characters. That usually means only one or two sentences. + body: A description with a maximum of 100 characters. That usually means only one or two sentences. cta: Learn more cta_link: '#' diff --git a/components/billboard/billboard.html b/components/billboard/billboard.html index f93246fe0..314d4fecf 100644 --- a/components/billboard/billboard.html +++ b/components/billboard/billboard.html @@ -5,7 +5,7 @@ # image - path # heading - string # heading_el - HTML heading element (h1, h2, h3, h4, h5, h6) -# desc - string +# body - string # cta - string # cta_link - url #} @@ -17,8 +17,8 @@
<{{ heading_el | default('h2') }} class="mzp-c-billboard-heading">{{ heading }} - {%- if desc %} -

{{ desc }}

+ {%- if body %} +

{{ body }}

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

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.config.yml b/components/callout/callout.config.yml index 4e8ee8905..37c55a046 100644 --- a/components/callout/callout.config.yml +++ b/components/callout/callout.config.yml @@ -2,7 +2,7 @@ preview: '@preview-unpadded' context: heading: A Headline With 30 Characters heading_el: h1 - desc: A description of about 150 characters, give or take. Because this text is centered it works best with a tagline or brief intro, just a sentence or two. + body: A description of about 150 characters, give or take. Because this text is centered it works best with a tagline or brief intro, just a sentence or two. cta: False image: False variants: @@ -10,7 +10,7 @@ variants: notes: A dark theme is available with the `mzp-t-dark` theme class. This example omits a description and includes a CTA button. context: class: mzp-t-dark - desc: False + body: False cta: Call to Action cta_link: '#' cta_class: mzp-t-dark @@ -29,7 +29,7 @@ variants: context: class: mzp-t-background-tertiary content_class: mzp-t-content-sm - desc: A description of about 150 characters, give or take. Because this text is centered it works best with a tagline or brief intro, just a sentence or two. + body: A description of about 150 characters, give or take. Because this text is centered it works best with a tagline or brief intro, just a sentence or two. cta: False image: '/img/image-3-2.jpg' - name: Compact @@ -56,5 +56,5 @@ variants: content_class: mzp-t-content-lg cta: Call to Action cta_class: mzp-t-product mzp-t-secondary - desc: A description of about 150 characters, give or take. This text is left- or right-aligned but should still be short, only a sentence or two. + body: A description of about 150 characters, give or take. This text is left- or right-aligned but should still be short, only a sentence or two. diff --git a/components/callout/callout.html b/components/callout/callout.html index 5afdb1a57..112ae7149 100644 --- a/components/callout/callout.html +++ b/components/callout/callout.html @@ -6,7 +6,7 @@ # heading - string # heading_el - HTML heading element (h1, h2, h3, h4, h5, h6) # heading_class - string -# desc - string +# body - string # cta - string # cta_link - url # cta_class - string @@ -15,9 +15,9 @@
<{{ heading_el | default('h2') }} class="mzp-c-callout-heading{% if heading_class %} {{ heading_class }}{% endif %}">{{ heading }} - {%- if desc %} -
-

{{ desc }}

+ {%- if body %} +
+

{{ body }}

{% endif -%} {%- if image %} diff --git a/components/card/card.config.yml b/components/card/card.config.yml index 360f4a4c1..20d52bef7 100644 --- a/components/card/card.config.yml +++ b/components/card/card.config.yml @@ -6,7 +6,7 @@ context: image: '/img/image-3-2.jpg' tag: Card tag heading: Card heading with about 30-40 characters - desc: A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like. + body: A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like. cta: Call to action meta: Card meta info variants: @@ -17,7 +17,7 @@ variants: image: '/img/image-1-1.jpg' tag: Audio heading: Card heading with about 30-40 characters - desc: A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like. + body: A description of about 150 characters, give or take. That means we usually only have room for one or two sentences. Here is what that looks like. cta: This call to action is 37 characters meta: false notes: | diff --git a/components/card/card.html b/components/card/card.html index e6a8f0054..68551a655 100644 --- a/components/card/card.html +++ b/components/card/card.html @@ -7,7 +7,7 @@ # tag - string # heading - string # heading_el - HTML heading element (h1, h2, h3, h4, h5, h6) -# desc - string +# body - string # cta - string # meta - string #} @@ -19,7 +19,7 @@
{% if tag %}
{{ tag }}
{% endif %} {% if heading %}<{{ heading_el | default('h2') }} class="mzp-c-card-heading">{{ heading }}{% endif %} - {% if desc %}

{{ desc }}

{% endif %} + {% if body %}

{{ body }}

{% endif %} {% if cta %}

{{ cta }}

{% endif %} {% if meta %}

{{ meta }}

{% endif %}
diff --git a/components/layout/03-card-layout/02-card-layout--third.html b/components/layout/03-card-layout/02-card-layout--third.html index bceb23788..218bec7d2 100644 --- a/components/layout/03-card-layout/02-card-layout--third.html +++ b/components/layout/03-card-layout/02-card-layout--third.html @@ -1,5 +1,5 @@
- {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %}
diff --git a/components/layout/03-card-layout/03-card-layout--quarter.html b/components/layout/03-card-layout/03-card-layout--quarter.html index 2433fc37a..422023354 100644 --- a/components/layout/03-card-layout/03-card-layout--quarter.html +++ b/components/layout/03-card-layout/03-card-layout--quarter.html @@ -1,6 +1,6 @@
- {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %}
diff --git a/components/layout/03-card-layout/04-card-layout--hero.html b/components/layout/03-card-layout/04-card-layout--hero.html index 942acf883..8268a986e 100644 --- a/components/layout/03-card-layout/04-card-layout--hero.html +++ b/components/layout/03-card-layout/04-card-layout--hero.html @@ -1,7 +1,7 @@
- {% render '@card--large', { class: 'mzp-c-card-large mzp-has-aspect-16-9', image: '/img/image-16-9.jpg', link: '#', heading: 'A large hero card', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} + {% render '@card--large', { class: 'mzp-c-card-large mzp-has-aspect-16-9', image: '/img/image-16-9.jpg', link: '#', heading: 'A large hero card', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-has-aspect-1-1', image: '/img/image-1-1.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--small', { class: 'mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %}
diff --git a/components/layout/03-card-layout/card-layout.html b/components/layout/03-card-layout/card-layout.html index 7f654abf1..80dd04fd7 100644 --- a/components/layout/03-card-layout/card-layout.html +++ b/components/layout/03-card-layout/card-layout.html @@ -1,4 +1,4 @@
- {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} - {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'A brief card description, just a single sentence.' } %} + {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %} + {% render '@card--medium', { class: 'mzp-c-card-medium mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'A brief card description, just a single sentence.' } %}
diff --git a/components/navigation/02-menu/menu.html b/components/navigation/02-menu/menu.html index cf7e916ad..5b506bb76 100644 --- a/components/navigation/02-menu/menu.html +++ b/components/navigation/02-menu/menu.html @@ -27,18 +27,18 @@
  • - {% render '@menu-item', { description: 'This is a short description with only a single sentence and no more.' } %} + {% render '@menu-item', { body: 'This is a short description with only a single sentence and no more.' } %}
  • - {% render '@menu-item', { description: 'This is a short description with only a single sentence and no more.' } %} + {% render '@menu-item', { body: 'This is a short description with only a single sentence and no more.' } %}
  • - {% render '@menu-item', { description: 'This is a short description with only a single sentence and no more.' } %} + {% render '@menu-item', { body: 'This is a short description with only a single sentence and no more.' } %}
- {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', desc: 'This is an optional card included in the menu. Only visible on wide viewports.' } %} + {% render '@card--small', { class: 'mzp-c-card-small mzp-has-aspect-3-2', image: '/img/image-3-2.jpg', link: '#', heading: 'A short heading', body: 'This is an optional card included in the menu. Only visible on wide viewports.' } %}
diff --git a/components/navigation/03-menu-item/menu-item.config.yml b/components/navigation/03-menu-item/menu-item.config.yml index 294f85305..0662c2d35 100644 --- a/components/navigation/03-menu-item/menu-item.config.yml +++ b/components/navigation/03-menu-item/menu-item.config.yml @@ -1,7 +1,7 @@ context: link: '#' icon: '/protocol/img/icons/image.svg' - desc: This is a short description with only a single sentence and no more. + body: This is a short description with only a single sentence and no more. list: - Secondary link - Secondary link diff --git a/components/navigation/03-menu-item/menu-item.html b/components/navigation/03-menu-item/menu-item.html index 2090270e4..fd55e665f 100644 --- a/components/navigation/03-menu-item/menu-item.html +++ b/components/navigation/03-menu-item/menu-item.html @@ -3,15 +3,15 @@ # parameters: # icon - path # link - string -# desc - string +# body - string # list - array #}
{% if link %}{% else %}
{% endif %} {% if icon %}Useful alt text where appropriate{% endif %}

A headline with 30 characters

- {% if desc %} -

{{ desc }}

+ {% if body %} +

{{ body }}

{% endif %} {% if link %}{% else %}
{% endif %} {% if list %} diff --git a/docs/02-usage/migration.md b/docs/02-usage/migration.md index 395362319..71089af1b 100644 --- a/docs/02-usage/migration.md +++ b/docs/02-usage/migration.md @@ -60,6 +60,13 @@ Find: mzp-c-(menu|menu-item|menu-list|card|callout|sticky-promo|newsletter|si Replace: mzp-c-$1-heading ``` +Rename the remaining `-desc` component classes to `-body`. Affects Billboard, Callout, Card, and Menu Item. + +```text +Find: mzp-c-(callout|card|menu-item|billboard)-desc +Replace: mzp-c-$1-body +``` + ### CSS Variable Renames (SCSS files) Font family and line-height variables: @@ -260,6 +267,11 @@ find . -name "*.scss" -exec sed -i '' 's/mzp-c-form-subtitle/mzp-c-form-subheadi find . -name "*.html" -exec sed -i '' -E 's/mzp-c-(menu|menu-item|menu-list|card|callout|sticky-promo|newsletter|sidemenu|billboard|article|form)-title/mzp-c-\1-heading/g' {} + find . -name "*.njk" -exec sed -i '' -E 's/mzp-c-(menu|menu-item|menu-list|card|callout|sticky-promo|newsletter|sidemenu|billboard|article|form)-title/mzp-c-\1-heading/g' {} + find . -name "*.scss" -exec sed -i '' -E 's/mzp-c-(menu|menu-item|menu-list|card|callout|sticky-promo|newsletter|sidemenu|billboard|article|form)-title/mzp-c-\1-heading/g' {} + + +# Rename the remaining -desc component classes to -body +find . -name "*.html" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} + +find . -name "*.njk" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} + +find . -name "*.scss" -exec sed -i '' -E 's/mzp-c-(callout|card|menu-item|billboard)-desc/mzp-c-\1-body/g' {} + ``` ### CSS Variable Renames diff --git a/docs/03-contributing/02-naming.md b/docs/03-contributing/02-naming.md index c0a2758c6..38a19f31f 100644 --- a/docs/03-contributing/02-naming.md +++ b/docs/03-contributing/02-naming.md @@ -46,7 +46,7 @@ Example:

Card Heading

-
+

Lorem ipsum dolor sit amet, pri illum munere mollis at, amet senserit te vix, sint porro mei eu.