Menu List

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## HEAD
 
+* **css:** Add Menu List component (#474)
 * **css:** Fx theme CTAs should use the Metropolis Font (#468)
 * **css:** Separate newsletter form and newsletter layout styling (#444)
 * **css:** Add inline list component (#465)

src/assets/sass/protocol/components/_menu-list.scss

@@ -0,0 +1,139 @@
+// 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 '../includes/lib';
+
+.mzp-c-menu-list {
+    display: inline-block;
+}
+
+.mzp-c-menu-list-title {
+    font-size: inherit;
+    font-weight: bold;
+
+    .mzp-t-mozilla .mzp-t-cta & {
+        @include font-firefox;
+    }
+}
+
+.mzp-c-menu-list-list {
+    background-color: #fff;
+    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .3);
+    border-radius: 4px;
+}
+
+.mzp-c-menu-list-item {
+    display: inline-block;
+
+    a {
+        color: $color-link;
+        display: inline-block;
+        padding: $spacing-sm;
+        position: relative;
+        text-decoration: none;
+
+        .mzp-t-download & {
+            @include bidi(((padding-right, $spacing-sm * 2 + 14px, padding-left, $spacing-sm),));
+
+            &::after {
+                @include background-size(20px, 20px);
+                @include bidi(((right, $spacing-sm, left, auto),));
+                bottom: $spacing-sm;
+                content: '';
+                display: block;
+                position: absolute;
+                top: $spacing-sm;
+                width: 14px;
+            }
+        }
+
+        &:hover,
+        &:focus {
+            background: $color-gray-20;
+            color: $color-link-hover;
+
+            &::after {
+                background: $url-image-download-link-hover center center no-repeat;
+            }
+        }
+    }
+}
+
+
+/* ---- */
+// JS init
+
+//TODO: hide menu if JS enabled
+
+.is-details {
+    &.mzp-c-menu-list {
+        position: relative;
+    }
+
+    .mzp-c-menu-list-title {
+        button {
+            @include bidi(((padding, 0 (16px + $spacing-sm) 0 0, 0 0 0 (16px + $spacing-sm)),));
+            background: transparent;
+            border: 0;
+            color: $color-link;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: inherit;
+            font-weight: inherit;
+            position: relative;
+            text-align: inherit;
+            text-decoration: underline;
+            width: 100%;
+
+            &:after {
+                @include background-size(20px, 20px);
+                @include bidi(((right, 0, left, auto),));
+                background: $url-image-arrow-down-link center bottom no-repeat;
+                bottom: 1px;
+                content: '';
+                display: inline-block;
+                position: absolute;
+                top: 0;
+                width: 16px;
+                @include transition(transform 200ms ease-in-out);
+            }
+
+            &[aria-expanded=true]:after {
+                @include transform(scaleY(-1));
+            }
+
+            &:hover,
+            &:focus {
+                color: $color-link-hover;
+                text-decoration: none;
+
+                &:after {
+                    background-image: $url-image-arrow-down-link-hover;
+                }
+            }
+
+        }
+    }
+
+    .mzp-c-menu-list-list {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 1;
+        padding: $spacing-xs 0;
+        min-width: 150px;
+
+        &.is-closed {
+            display: none;
+        }
+    }
+
+    .mzp-c-menu-list-item {
+        display: block;
+
+        a {
+            display: block;
+        }
+    }
+}

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

@@ -77,7 +77,13 @@
 $svg-expand-white: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M7 7V1a1 1 0 1 1 2 0v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 1 1 0-2h6z" fill="#fff" fill-rule="evenodd"/></svg>';
 // https://github.com/mozilla/protocol-assets/blob/master/icons/ui/expand-black.svg
 $svg-expand-black: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M7 7V1a1 1 0 1 1 2 0v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 1 1 0-2h6z" fill="#000" fill-rule="evenodd"/></svg>';
+$svg-arrow-down-link: '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><polyline stroke="#0060df" stroke-width="2" points="5 9 12 16 19 9"></polyline></g></svg>';
+$svg-arrow-down-link-hover: '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><polyline stroke="#0250bb" stroke-width="2" points="5 9 12 16 19 9"></polyline></g></svg>';
+$svg-download-link-hover: '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"><g transform="translate(6.000000, 3.000000)" stroke="#0250bb" stroke-width="2"><path d="M0,18 L12,18"></path><polyline stroke-linejoin="round" points="0 8 6 14 12 8"></polyline><path d="M6,0 L6,14"></path></g></g></svg>';
 
 // converted to url(svg) value
 $url-image-expand-white: svg-url($svg-expand-white);
 $url-image-expand-black: svg-url($svg-expand-black);
+$url-image-arrow-down-link: svg-url($svg-arrow-down-link);
+$url-image-arrow-down-link-hover: svg-url($svg-arrow-down-link-hover);
+$url-image-download-link-hover: svg-url($svg-download-link-hover);

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

@@ -16,6 +16,7 @@ $image-path: '../img' !default;
 @import '../protocol/components/hero';
 @import '../protocol/components/inline-list';
 @import '../protocol/components/modal';
+@import '../protocol/components/menu-list';
 @import '../protocol/components/newsletter-form';
 @import '../protocol/components/notification-bar';
 @import '../protocol/components/picto-card';

src/patterns/molecules/menu-list/collection.yml

@@ -0,0 +1,2 @@
+name: Menu List
+title: Menu List

src/patterns/molecules/menu-list/menu-list-default.hbs

@@ -0,0 +1,23 @@
+---
+name: Menu List
+description: A sort title, when clicked, expands a list of links.
+order: 1
+notes: |
+    - Use the mzp-t-cta and mzp-t-download options to customize the appearance
+---
+
+
+<div class="mzp-c-menu-list">
+  <h3 class="mzp-c-menu-list-title">Meet the Family</h3>
+  <ul class="mzp-c-menu-list-list">
+    <li class="mzp-c-menu-list-item"><a href="#">Lockwise</a></li>
+    <li class="mzp-c-menu-list-item"><a href="#">Monitor</a></li>
+    <li class="mzp-c-menu-list-item"><a href="#">Send</a></li>
+    <li class="mzp-c-menu-list-item"><a href="#">Slightly longer menu item for testing</a></li>
+  </ul>
+</div>
+
+<script src="{{@root.baseurl}}/assets/protocol/protocol/js/protocol-details.js"></script>
+<script>
+  window.Mzp.Details.init('.mzp-c-menu-list-title');
+</script>

src/patterns/molecules/menu-list/menu-list-download.hbs

@@ -0,0 +1,23 @@
+---
+name: Menu List
+description: Customized with mzp-t-cta and mzp-t-download
+order: 2
+---
+<div class="mzp-t-firefox">
+
+<div class="mzp-c-menu-list mzp-t-cta mzp-t-download">
+  <h3 class="mzp-c-menu-list-title">Download the App</h3>
+  <ul id="download" class="mzp-c-menu-list-list">
+    <li class="mzp-c-menu-list-item"><a href="#">Desktop</a></li>
+    <li class="mzp-c-menu-list-item"><a href="#">Android</a></li>
+    <li class="mzp-c-menu-list-item"><a href="#">iOS</a></li>
+    <li class="mzp-c-menu-list-item"><a href="#">Slightly longer menu item for testing</a></li>
+  </ul>
+</div>
+
+</div>
+
+<script src="{{@root.baseurl}}/assets/protocol/protocol/js/protocol-details.js"></script>
+<script>
+  window.Mzp.Details.init('.mzp-c-menu-list-title');
+</script>