Zap

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## HEAD
 
-* **css:** Rename `mzp-c-box-emphasis` to `mzp-c-emphasis-box` (#489)
+* **css:** Add Zap component (#511)
+* **css:** (breaking) Rename `mzp-c-box-emphasis` to `mzp-c-emphasis-box` (#489)
 * **assets:** Update @mozilla-protocol/assets to 3.0.1 (#509)
 * **css:** CTA links now use text underlines instead of borders (#490)
 

src/assets/sass/protocol/components/_zap.scss

@@ -0,0 +1,24 @@
+// 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/.
+
+
+@import '../protocol/includes/lib';
+
+[class*="mzp-has-zap"] strong {
+    @include zap('#{$image-path}/zaps/zap-01.svg');
+}
+
+@for $num from 2 through 18 {
+    .mzp-has-zap-#{$num} strong {
+        // add leading zero if necessary
+        $zero: '';
+        @if $num < 10 {
+            $zero: 0;
+        }
+
+        &::after {
+            background-image: url('#{$image-path}/zaps/zap-#{$zero}#{$num}.svg');
+        }
+    }
+}

src/assets/sass/protocol/includes/_mixins.scss

@@ -8,6 +8,7 @@
     'mixins/grid',
     'mixins/images',
     'mixins/bidi',
+    'mixins/zap',
     'mixins/typography';
 
 

src/assets/sass/protocol/includes/mixins/_zap.scss

@@ -0,0 +1,23 @@
+// 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/.
+
+/* -------------------------------------------------------------------------- */
+// Zap
+
+@mixin zap($img) {
+    position: relative;
+
+    &:after {
+        background-image: url('#{$img}');
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        content: '';
+        display: block;
+        height: 0.3em;
+        left: -0.2em;
+        position: absolute;
+        top: calc(100% - 0.15em);
+        width: calc(100% + 0.4em);
+    }
+}

src/assets/sass/protocol/protocol-extra.scss

@@ -21,5 +21,6 @@ $image-path: '../img' !default;
 @import '../protocol/components/notification-bar';
 @import '../protocol/components/picto-card';
 @import '../protocol/components/sidebar-menu';
+@import '../protocol/components/zap';
 @import '../protocol/templates/card-layout';
 @import '../protocol/templates/main-with-sidebar';

src/pages/demos/zap.hbs

@@ -0,0 +1,23 @@
+---
+title: Zap Styles
+notes: All 18 zap styles
+---
+
+<h2 class="mzp-has-zap-1"><strong>one</strong></h2>
+<h2 class="mzp-has-zap-2"><strong>two</strong></h2>
+<h2 class="mzp-has-zap-3"><strong>three</strong></h2>
+<h2 class="mzp-has-zap-4"><strong>four</strong></h2>
+<h2 class="mzp-has-zap-5"><strong>five</strong></h2>
+<h2 class="mzp-has-zap-6"><strong>six</strong></h2>
+<h2 class="mzp-has-zap-7"><strong>seven</strong></h2>
+<h2 class="mzp-has-zap-8"><strong>eight</strong></h2>
+<h2 class="mzp-has-zap-9"><strong>nine</strong></h2>
+<h2 class="mzp-has-zap-10"><strong>ten</strong></h2>
+<h2 class="mzp-has-zap-11"><strong>eleven</strong></h2>
+<h2 class="mzp-has-zap-12"><strong>twelve</strong></h2>
+<h2 class="mzp-has-zap-13"><strong>thirteen</strong></h2>
+<h2 class="mzp-has-zap-14"><strong>fourteen</strong></h2>
+<h2 class="mzp-has-zap-15"><strong>fifteen</strong></h2>
+<h2 class="mzp-has-zap-16"><strong>sixteen</strong></h2>
+<h2 class="mzp-has-zap-17"><strong>seventeen</strong></h2>
+<h2 class="mzp-has-zap-18"><strong>eighteen</strong></h2>

src/patterns/atoms/zap/text.hbs

@@ -0,0 +1,25 @@
+---
+name: Zap
+description: |
+  The zap is a florish that can be added to Firefox themed sites to give emphasis to one word.
+order: 1
+notes: |
+  For localization purposes the theme class for the zap goes on the parent element and the zap is applied to any child `<strong>` tags.
+
+  Add the class `mzp-has-zap-1`, and change the number `1` to the number of the zap you want. There are 18 zaps to choose from.
+
+  If you want to apply the zap in a different manner, or use a zap that's not one of the default ones you can use the `zap('zap.svg')` mixin.
+tips: |
+  - zaps cannot break to a new line, so they should only be put on one word
+  - the zap is flexible! it can be used on words of various sizes
+  - zaps will work best on large text
+  - zaps with a lot of detail don't work as well on short words
+links:
+    See all 18 zaps: /demos/zap.html
+---
+
+<h1 class="mzp-has-zap-1">Here is a zap <strong>one</strong> example.</h1>
+
+<h2 class="mzp-has-zap-3">Here is a zap <strong>three</strong> example.</h2>
+
+<h3 class="mzp-has-zap-12">Here is a zap <strong>twelve</strong> example.</h3>