From 4a296d445d30261397389de527310b4a53de6353 Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Wed, 15 Jan 2020 15:19:00 -0700 Subject: [PATCH] feat: add language menu (resolves #67) --- src/assets/styles/components/_menu--home.scss | 16 ++++- src/assets/styles/components/_menu.scss | 65 ++++++++++++++++++- src/components/01-atoms/_svg/_svg.config.js | 8 +-- src/components/01-atoms/_svg/_svg.njk | 7 +- .../02-molecules/00-menu/menu.config.js | 2 +- src/components/02-molecules/00-menu/menu.njk | 15 +++++ 6 files changed, 101 insertions(+), 12 deletions(-) diff --git a/src/assets/styles/components/_menu--home.scss b/src/assets/styles/components/_menu--home.scss index 643d0960..72bc470b 100644 --- a/src/assets/styles/components/_menu--home.scss +++ b/src/assets/styles/components/_menu--home.scss @@ -25,11 +25,25 @@ color: $blue-500; } - &[aria-current] { + &[aria-current="page"] { color: $white; } } + .menu--home .menu-item--languages [aria-current]::before { + background-image: url('data:image/svg+xml;utf8,'); + } + + .menu--home .menu-item--languages [aria-current]:hover::before, + .menu--home .menu-item--languages [aria-current]:focus::before { + background-image: url('data:image/svg+xml;utf8,'); + } + + .menu--home .menu-item--languages [aria-current]:active::before, + .menu--home .menu-item--languages [aria-current]:active:focus::before { + background-image: url('data:image/svg+xml;utf8,'); + } + .menu--home .menu__submenu { background: $blue-500; border-color: $blue-600; diff --git a/src/assets/styles/components/_menu.scss b/src/assets/styles/components/_menu.scss index 348049c2..c2533690 100644 --- a/src/assets/styles/components/_menu.scss +++ b/src/assets/styles/components/_menu.scss @@ -128,7 +128,7 @@ nav { padding: rem(13) rem(13) rem(11) rem(16); } - &[aria-current] { + &[aria-current="page"] { background-color: $black; border-left-color: $red-400; @@ -146,6 +146,44 @@ nav { &[aria-expanded="true"] svg { transform: rotate(180deg); } + + &[aria-expanded="true"] svg.icon--language { + transform: none; + } +} + +.menu-item--languages .menu__label { + display: block; +} + +.menu-item--languages .icon--language { + display: none; +} + +.menu-item--languages [aria-current] { + display: block; +} + +.menu-item--languages [aria-current]::before { + background-color: transparent; + background-image: url('data:image/svg+xml;utf8,'); + background-position: center; + background-repeat: no-repeat; + content: ""; + display: inline-block; + height: 1em; + margin-right: rem(6); + width: 1em; +} + +.menu-item--languages [aria-current]:hover::before, +.menu-item--languages [aria-current]:focus::before { + background-image: url('data:image/svg+xml;utf8,'); +} + +.menu-item--languages [aria-current]:active::before, +.menu-item--languages [aria-current]:active:focus::before { + background-image: url('data:image/svg+xml;utf8,'); } .menu__submenu { @@ -253,7 +291,7 @@ nav { margin-left: rem(12); } - &[aria-current] { + &[aria-current="page"] { background: transparent; border-left-color: transparent; color: $dark-mint-500; @@ -283,6 +321,29 @@ nav { } } + .menu-item--languages .menu__label { + display: none; + } + + .menu-item--languages .icon--language { + display: block; + margin-left: 0; + } + + .menu-item--languages [aria-current]::before { + background-image: url('data:image/svg+xml;utf8,'); + } + + .menu-item--languages [aria-current]:hover::before, + .menu-item--languages [aria-current]:focus::before { + background-image: url('data:image/svg+xml;utf8,'); + } + + .menu-item--languages [aria-current]:active::before, + .menu-item--languages [aria-current]:active:focus::before { + background-image: url('data:image/svg+xml;utf8,'); + } + .menu__submenu { border: 1px solid diff --git a/src/components/01-atoms/_svg/_svg.config.js b/src/components/01-atoms/_svg/_svg.config.js index b9235b4d..0f843529 100644 --- a/src/components/01-atoms/_svg/_svg.config.js +++ b/src/components/01-atoms/_svg/_svg.config.js @@ -4,10 +4,8 @@ module.exports = { context: { icon: 'filter', class: false, - attributes: { - ariaHidden: true, - focusable: false, - viewBox: '0 0 20 20' - } + ariaHidden: true, + focusable: false, + viewBox: '0 0 20 20' } }; diff --git a/src/components/01-atoms/_svg/_svg.njk b/src/components/01-atoms/_svg/_svg.njk index 2de63817..1f11d3a4 100644 --- a/src/components/01-atoms/_svg/_svg.njk +++ b/src/components/01-atoms/_svg/_svg.njk @@ -1,7 +1,8 @@ + aria-hidden="{{ ariaHidden }}" + viewBox="{{ viewBox }}" + focusable="{{ focusable }}" +> diff --git a/src/components/02-molecules/00-menu/menu.config.js b/src/components/02-molecules/00-menu/menu.config.js index 3b42200c..36276c1c 100644 --- a/src/components/02-molecules/00-menu/menu.config.js +++ b/src/components/02-molecules/00-menu/menu.config.js @@ -43,7 +43,7 @@ module.exports = { label: 'Submenu Item Three' } } - }, + } }, }, variants: [ diff --git a/src/components/02-molecules/00-menu/menu.njk b/src/components/02-molecules/00-menu/menu.njk index 4e923a1c..19dabfd4 100644 --- a/src/components/02-molecules/00-menu/menu.njk +++ b/src/components/02-molecules/00-menu/menu.njk @@ -17,5 +17,20 @@ {% endif %} {% endfor %} +
  • + + Language + {% render '@svg', {svg:'language', class:'language icon--lg', viewBox: '0 0 30 30'}, true %} + + +