Add refactored Callout component, replace Call-out [fix #787]

CHANGELOG.md

@@ -1,16 +1,23 @@
 # HEAD
 
 ## Features
-
+* **component:** Refactor and rename the Callout component (previously Call-out) (#787)
+* **component:** Remove Compact Call-out as a separate component. It's now just a variant of the updated Callout.
 * **js:** Update newsletter component to include JS to post directly to Basket (#839).
 * **css:** Add CSS utility class for centered text and document existing title utility classes (#897).
 
 ## Bug Fixes
+* **css:** Fix incorrect value for `text-body-lg` in Firefox theme.
 
-* **css:** Fix incorrect value for `text-body-lg` in firefox theme.
+## Migration Tips
+* Rename instances of `mzp-c-call-out` to `mzp-c-callout` (note the removed dash).
+* Replace instances of Compact Call-out with the compact variant of Callout (`class="mzp-c-callout mzp-l-compact"`).
+* Update references to the `call-out` SCSS file to `callout` in any `@import` or `@use` rules.
+  ** e.g. `@use 'components/call-out';` should change to `@use 'components/callout';`
+* The rebuilt Callout doesn't feature integrated brand logos. Use Logo and Wordmark components instead.
+* The rebuilt Compact Callout lacks an integrated logo, so it no longer positions the logo at one end of the component. A Logo or Wordmark component should appear in the body instead.
 
 # 18.0.0
-
 ## Features
 * **css:** Replace `get-theme`, `type-scale` functions and theme and type-scale maps with CSS Custom Properties. Sass variables added for legacy support
 * **css:** Migrates the sass `@import` with `@use` and `@forward` (#755).

assets/sass/protocol/components/_callout.scss

@@ -0,0 +1,92 @@
+// 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 *;
+
+// * -------------------------------------------------------------------------- */
+// Callout component
+
+.mzp-c-callout {
+    text-align: center;
+
+    .mzp-c-callout-desc {
+        @include text-body-lg;
+        margin-bottom: $spacing-lg;
+    }
+
+    .mzp-c-callout-cta,
+    .mzp-c-callout-media {
+        margin: $spacing-lg auto;
+    }
+
+    @media #{$mq-md} {
+        .mzp-l-content {
+            padding-bottom: $spacing-2xl;
+            padding-top: $spacing-2xl;
+        }
+    }
+}
+
+.mzp-c-callout.mzp-l-compact {
+    text-align: start;
+
+    .mzp-c-callout-title {
+        @include text-title-sm;
+    }
+
+    .mzp-c-callout-desc {
+        @include text-body-md;
+    }
+
+    .mzp-c-callout-cta {
+        margin: $spacing-sm 0 0;
+    }
+
+    @media #{$mq-md} {
+        @include clearfix;
+
+        .mzp-c-callout-title,
+        .mzp-c-callout-desc {
+            margin-bottom: 0;
+        }
+
+        .mzp-c-callout-title + .mzp-c-callout-desc {
+            margin-top: $spacing-sm;
+        }
+
+        .mzp-c-callout-content {
+            @include bidi(((float, left, right),));
+            width: calc(66.6% - #{$spacing-lg});
+        }
+
+        .mzp-c-callout-cta {
+            @include bidi(((float, right, left),));
+            margin: 0;
+            position: relative;
+            width: calc(33.3% - #{$spacing-lg});
+        }
+    }
+
+    @supports (display: grid) {
+        @media #{$mq-md} {
+            .mzp-l-content {
+                @include grid-column-gap($spacing-xl);
+                display: grid;
+                grid-template-columns: 2fr 1fr;
+            }
+
+            .mzp-c-callout-content {
+                width: auto;
+                align-items: center;
+            }
+
+            .mzp-c-callout-cta {
+                @include flexbox;
+                align-items: center;
+                justify-content: flex-end;
+                width: auto;
+            }
+        }
+    }
+}