Add rich text component (Fix #1079) (#1081)

* Add rich text component (Fix #1079)
* Update documentation to add utility class section

Author: stephaniehobson

CHANGELOG.md

@@ -2,9 +2,12 @@
 
 ## Features
 
+* **component:** Added `mzp-u-rich-text` utility class to add back list and table styles (#1079)
+* **docs:** Added a new utility class section to docs.
 * **component:** Update breadcrumb styles (#1036)
 * **assets:** (breaking) Update @mozilla-protocol/assets to 7.0.1
 * **css:** Updated line height variables for Mozilla theme to reflect guidance published in the brand portal.
+* **css:** * Remove `:hover:visited` styles & decrease base link specificity (#1071)
 
 ## Bug Fixes
 
@@ -13,6 +16,10 @@
 
 ## Migration Tips
 
+* Rich text
+  * If you have previously created a class to add back list and table styling to rich text fields you may be able to swap it out for the new component.
+  * This component currently styles h2-h4, ul, ol, dl, table, and pre. If you need more elements please create an issue.
+
 * Breadcrumb updates do not require any changes unless you have local customizations.
 
 * Icon updates

assets/sass/protocol/base/elements/_tables.scss

@@ -7,7 +7,7 @@
 // We so rarely use tables that it's best not to give them any
 // base styling and instead use a modifier class for those few
 // times we need to display tabular data.
-.mzp-u-data-table {
+%data-table {
     border-collapse: collapse;
     border-spacing: 0;
 
@@ -31,3 +31,7 @@
         padding-top: 0;
     }
 }
+
+.mzp-u-data-table {
+    @extend %data-table;
+}

assets/sass/protocol/base/utilities/_rich-text.scss

@@ -0,0 +1,102 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+@use '../../includes/lib' as *;
+@import '../../base/elements/tables';
+
+.mzp-u-rich-text {
+    h2 {
+        margin-bottom: $layout-xs;
+        margin-top: $layout-sm;
+    }
+
+    h3 {
+        margin-bottom: $layout-xs;
+        margin-top: $layout-sm;
+    }
+
+    h4 {
+        @include text-body-lg;
+        font-family: var(--body-font-family);
+        margin-bottom: $layout-xs;
+        margin-top: $layout-xs;
+    }
+
+    @media #{$mq-md} {
+        h2 {
+            margin-bottom: $layout-sm;
+            margin-top: $layout-md;
+        }
+
+        h3 {
+            margin-top: $layout-md;
+        }
+
+        h4 {
+            margin-top: $layout-sm;
+        }
+    }
+
+    @media #{$mq-xl} {
+        h2 {
+            margin-bottom: $layout-md;
+            margin-top: $layout-lg;
+        }
+
+        h3 {
+            margin-top: $layout-lg;
+        }
+
+        h4 {
+            margin-top: $layout-md;
+        }
+    }
+
+    ul {
+        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
+        list-style-type: disc;
+
+        ul {
+            list-style-type: circle;
+        }
+    }
+
+    ol {
+        @include bidi(((margin-left, $layout-sm, margin-right, 0),));
+        list-style-type: decimal;
+
+        ol {
+            list-style-type: lower-roman;
+        }
+    }
+
+    li {
+        margin-bottom: 0.25em;
+
+        ul, ol {
+            @include bidi(((margin-left, $layout-xs, margin-right, 0),));
+        }
+    }
+
+    dt {
+        font-weight: bold;
+        margin-bottom: 0;
+    }
+
+    dd {
+        @include bidi(((margin-left, $layout-xs, margin-right, 0),));
+        margin-bottom: 0.25em;
+    }
+
+    pre {
+        background-color: $color-light-gray-20;
+        margin-bottom: 1.25em;
+        overflow-x: auto;
+        padding: $spacing-md;
+    }
+
+    table {
+        @extend %data-table;
+    }
+}

assets/sass/protocol/protocol.scss

@@ -22,6 +22,7 @@
 
 // Base utilities
 @use 'base/utilities/backgrounds';
+@use 'base/utilities/rich-text';
 @use 'base/utilities/titles';
 
 // Base includes - animations

…asic-elements/blockquote/blockquote.html …asic-elements/blockquote/blockquote.htmlcomponents/basic-elements/blockquote/blockquote.html renamed to components/00-basic-elements/blockquote/blockquote.html components/basic-elements/blockquote/blockquote.html renamed to components/00-basic-elements/blockquote/blockquote.html

@@ -11,10 +11,6 @@ this base size can be overridden with more context-specific styling.
   immediately following an `<h1>`. If you need a subheading or tagline
   immediately after a title, chances are it should be a paragraph rather than
   a second heading.
-- There are presentational utility classes available that you can apply to any
-  heading, e.g. `mzp-u-title-sm`, but don't abuse them if they aren't necessary.
-  You can often use the equivalent mixins in Sass/SCSS without a presentational
-  class.
 
 ### Links