Rename component -desc classes to -body (#668)

CHANGELOG.md

@@ -22,7 +22,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
@@ -43,6 +43,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

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;
         }
     }

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;
     }
 

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;
     }

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: '#'

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 @@
     <div class="mzp-c-billboard-content-container">
       <div class="mzp-c-billboard-content-inner">
         <{{ heading_el | default('h2') }} class="mzp-c-billboard-heading">{{ heading }}</{{ heading_el | default('h2') }}>
-      {%- if desc %}
-        <p class="mzp-c-billboard-desc">{{ desc }}</p>
+      {%- if body %}
+        <p class="mzp-c-billboard-body">{{ body }}</p>
       {% endif -%}
       {%- if cta %}
         <a href="{{ cta_link }}" class="mzp-c-cta-link">{{ cta }}</a>

components/callout/callout--example.html

@@ -3,7 +3,7 @@
     <div class="mzp-c-callout-content">
       {% render '@logo', { product: 'firefox', size: 'lg', label: 'Firefox', layout: 'mzp-l-logo-center' }  %}
       <h1 class="mzp-c-callout-heading mzp-u-heading-2xl">A Prime Example</h1>
-      <div class="mzp-c-callout-desc">
+      <div class="mzp-c-callout-body">
         <p>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.</p>
         <p>It also has a video.</p>
       </div>

components/callout/callout.config.yml

@@ -2,15 +2,15 @@ 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:
   - name: Dark theme
     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.
 

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 @@
   <div class="mzp-l-content{% if content_class %} {{ content_class }}{% endif %}">
     <div class="mzp-c-callout-content">
       <{{ heading_el | default('h2') }} class="mzp-c-callout-heading{% if heading_class %} {{ heading_class }}{% endif %}">{{ heading }}</{{ heading_el | default('h2') }}>
-    {%- if desc %}
-      <div class="mzp-c-callout-desc">
-        <p>{{ desc }}</p>
+    {%- if body %}
+      <div class="mzp-c-callout-body">
+        <p>{{ body }}</p>
       </div>
     {% endif -%}
     {%- if image %}

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: |

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 @@
     <div class="mzp-c-card-content">
       {% if tag %}<div class="mzp-c-card-tag">{{ tag }}</div>{% endif %}
       {% if heading %}<{{ heading_el | default('h2') }} class="mzp-c-card-heading">{{ heading }}</{{ heading_el | default('h2') }}>{% endif %}
-      {% if desc %}<p class="mzp-c-card-desc">{{ desc }}</p>{% endif %}
+      {% if body %}<p class="mzp-c-card-body">{{ body }}</p>{% endif %}
       {% if cta %}<p class="mzp-c-card-cta"><span class="mzp-c-card-cta-text">{{ cta }}</span></p>{% endif %}
       {% if meta %}<p class="mzp-c-card-meta">{{ meta }}</p>{% endif %}
     </div>

components/layout/03-card-layout/02-card-layout--third.html

@@ -1,5 +1,5 @@
 <div class="mzp-l-content mzp-l-card-third">
- {% 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.' } %}
 </div>

components/layout/03-card-layout/03-card-layout--quarter.html

@@ -1,6 +1,6 @@
 <div class="mzp-l-content mzp-l-card-quarter">
- {% 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.' } %}
 </div>

components/layout/03-card-layout/04-card-layout--hero.html

@@ -1,7 +1,7 @@
 <div class="mzp-l-content mzp-l-card-hero">
-  {% 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.' } %}
 </div>

components/layout/03-card-layout/card-layout.html

@@ -1,4 +1,4 @@
 <div class="mzp-l-content mzp-l-card-half">
-  {% 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.' } %}
 </div>

components/navigation/02-menu/menu.html

@@ -27,18 +27,18 @@
             </ul>
             <ul>
               <li>
-                {% 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.' } %}
               </li>
               <li>
-                {% 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.' } %}
               </li>
               <li>
-                {% 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.' } %}
               </li>
             </ul>
           </div>
           <div class="mzp-c-menu-panel-card">
-            {% 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.' } %}
           </div>
         </div>
       </div>

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

components/navigation/03-menu-item/menu-item.html

@@ -3,15 +3,15 @@
 # parameters:
 # icon          - path
 # link          - string
-# desc          - string
+# body          - string
 # list          - array
 #}
 <section class="mzp-c-menu-item  {% if icon %}mzp-has-icon{% endif %}">
   {% if link %}<a class="mzp-c-menu-item-link" href="{{ link }}">{% else %}<div class="mzp-c-menu-item-head">{% endif %}
     {% if icon %}<img class="mzp-c-menu-item-icon" src="{{ icon }}" alt="Useful alt text where appropriate">{% endif %}
     <h4 class="mzp-c-menu-item-heading">A headline with 30 characters</h4>
-    {% if desc %}
-    <p class="mzp-c-menu-item-desc">{{ desc }}</p>
+    {% if body %}
+    <p class="mzp-c-menu-item-body">{{ body }}</p>
     {% endif %}
   {% if link %}</a>{% else %}</div>{% endif %}
   {% if list %}

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

docs/03-contributing/02-naming.md

@@ -46,7 +46,7 @@ Example:
   <img class="mzp-c-card-image" src="/static/img/card-image.jpg" alt="">
   <h3 class="mzp-c-card-heading">Card Heading</h3>
 
-  <div class="mzp-c-card-desc">
+  <div class="mzp-c-card-body">
     <p>Lorem ipsum dolor sit amet, pri illum munere mollis at, amet senserit te vix, sint porro mei eu.</p>
   </div>