[fix #499] Update emphasis box

CHANGELOG.md

@@ -1,3 +1,9 @@
+# HEAD
+
+## Features
+
+* **component:** Updates to emphasis box, with additional documentation and usage guidelines.
+
 # 11.0.1
 
 ## Bug Fixes

src/assets/sass/demos/emphasis-box.scss

@@ -0,0 +1,11 @@
+// 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/.
+
+/* -------------------------------------------------------------------------- */
+// Card layout demo
+
+@import '../protocol/includes/lib';
+@import '../docs/protocol';
+@import '../docs/protocol-extra';
+

src/assets/sass/protocol/components/_emphasis-box.scss

@@ -9,7 +9,12 @@
 .mzp-c-emphasis-box {
     background: $color-white;
     border-radius: $border-radius-md;
-    margin: $spacing-md;
     box-shadow: $box-shadow-sm;
+    margin: $spacing-md;
     padding: $spacing-xl;
+
+    &.mzp-t-dark {
+        background: $color-marketing-gray-80;
+        color: $color-white;
+    }
 }

src/pages/demos/emphasis-box.hbs

@@ -0,0 +1,96 @@
+---
+title: Emphasis box
+layout: blank
+styles:
+  - emphasis-box
+---
+
+<section class="mzp-l-content">
+  <div class="mzp-c-emphasis-box">
+    <p>Just a standard emphasis box.</p>
+  </div>
+</section>
+
+<hr>
+
+{{#with (data "specimens")}}
+<section class="mzp-l-content mzp-t-narrow">
+  <div class="mzp-c-emphasis-box">
+    <h3>{{heading}}</h3>
+    <p>{{sentence}}</p>
+  </div>
+</section>
+{{/with}}
+
+<hr>
+
+{{#with (data "specimens")}}
+<section class="mzp-l-content mzp-t-narrow">
+  <div class="mzp-c-emphasis-box  mzp-t-dark">
+    <h3>{{heading}}</h3>
+    <p>{{sentence}}</p>
+  </div>
+</section>
+{{/with}}
+
+<hr>
+
+<section class="mzp-l-content mzp-t-narrow">
+  <div class="fxa-form-cta mzp-c-emphasis-box">
+    <form action="#" class="fxa-email-form">
+      <h3 class="fxa-email-form-title">Join Firefox</h3>
+      <p class="fxa-email-form-intro">Enter your email address to get started.</p>
+
+      <div class="fxa-email-field-container">
+        <p class="field">
+          <label for="fxa-email-field">Email address</label>
+          <input type="email" name="email" id="fxa-email-field" class="fxa-email-field" placeholder="[email protected]" required="">
+        </p>
+
+        <p class="agreement">
+          By proceeding, you agree to the <a href="https://accounts.firefox.com/legal/terms">Terms of Service</a> and <a href="https://accounts.firefox.com/legal/privacy">Privacy Notice</a>.
+        </p>
+
+        <button type="submit" class="mzp-c-button mzp-t-product mzp-t-small" id="fxa-email-form-submit">
+          Start Syncing
+        </button>
+      </div>
+    </form>
+  </div>
+</section>
+
+<hr>
+
+<div class="mzp-l-content">
+  <section class="mzp-c-card-feature mzp-l-card-feature-right-half mzp-c-emphasis-box">
+    <div class="mzp-c-card-feature-content">
+      <div class="mzp-c-card-feature-content-container">
+        <h3 class="mzp-c-card-feature-title">Get the <strong>respect</strong> you deserve</h3>
+        <div class="mzp-c-card-feature-desc">
+          <p>Every single Firefox product honors our Personal Data Promise: <strong>Take less. Keep it safe. No secrets.</strong></p>
+        </div>
+        <a class="mzp-c-cta-link" href="#">Learn more</a>
+      </div>
+    </div>
+
+    <div class="mzp-c-card-feature-media-wrapper">
+      <div class="mzp-c-card-feature-media">
+        <img src="{{@root.baseurl}}/static/img/card/card-image.png" alt="">
+      </div>
+    </div>
+  </section>
+</div>
+
+<hr>
+
+<section class="mzp-l-content">
+  <div class="mzp-l-card-third mzp-c-emphasis-box">
+    {{#embed "patterns.molecules.picto-card.picto-card"}}{{/embed}}
+    {{#embed "patterns.molecules.picto-card.picto-card"}}{{/embed}}
+    {{#embed "patterns.molecules.picto-card.picto-card"}}{{/embed}}
+  </div>
+</section>
+
+
+
+

src/patterns/molecules/emphasis-box/emphasis-box.hbs

@@ -0,0 +1,29 @@
+---
+name: Emphasis Box
+description: A visual wrapper used around some CTAs and forms in both marketing and application contexts.
+order: 2
+notes: |
+    - The Emphasis Box is a visual wrapper used around some CTAs and forms in both marketing and application contexts. It's defined by a contrasting background, large border radius (rounded corners) and drop shadow which provides visual separation from the rest of the page and draws the user’s attention to its contents.
+    - The emphasis box is a block-level layout component. Due to its rounded corners and drop shadow, it should fit within the defined width of your application or website (as opposed to being edge-to-edge within a browser window).
+    - Within an Emphasis Box you have a great deal of layout freedom. In general, consider using either a single column of left-aligned or center-aligned text for narrow boxes, or flexing your content so that text appears in two columns in wider boxes (perhaps with text on one side and an image on the other).
+    - Use an emphasis box:
+        - When you need to frame a key form or interactive area on a page.
+        - When you need to call out one key CTA among several on a page.
+tips: |
+    - In smaller, responsive views, make sure your layout accommodates some margins around the emphasis box.
+    - Try to limit text to around 70 characters per line. The emphasis box doesn't have any internal layout of its own so you may need to limit its total width or add some other inner container.
+nonos: |
+    - Emphasis boxes should be used sparingly. In general, limit one per page. If you use two they should be far apart (e.g. one at the top and another at the bottom of a long page).
+    - Do not use Emphasis Boxes in a list or grid. If you want a group of boxes, use Cards.
+    - Do not let emphasis boxes collide with browser or device window edges. Ensure there is some outer margin to accommodate the shadow.
+    - The emphasis box shouldn't be used for long-form content where a user would likely have to scroll to see the whole thing.
+links:
+    Demo page with various contents: /demos/emphasis-box.html
+---
+
+<section class="mzp-c-emphasis-box" >
+  {{#block "content"}}
+    <h3>This is a standard Emphasis Box</h3>
+    <p>This is some filler content. Cats are the best, every cat.</p>
+  {{/block}}
+</section>