From 019388ac304018dba779c448b884eb213cfa9cd7 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Mon, 25 May 2020 18:22:57 -0400 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20refactor=20header=20nav?= =?UTF-8?q?=20and=20nav=20link?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/components/rose/header.stories.mdx | 30 +++++++++---------- .../rose/header/{navigation.js => nav.js} | 2 +- .../rose/components/header/_catchall.scss | 16 +++++----- .../styles/rose/components/header/_index.scss | 13 +++++++- .../rose/components/header/nav/_index.scss | 18 +++++++++++ .../rose/components/header/nav/_link.scss | 28 +++++++++++++++++ .../templates/components/rose/header.hbs | 6 ++-- .../templates/components/rose/header/nav.hbs | 6 ++++ .../components/rose/header/navigation.hbs | 8 ----- addons/rose/app/components/rose/header/nav.js | 1 + .../app/components/rose/header/navigation.js | 1 - .../rose/tests/dummy/app/templates/index.hbs | 11 +++++-- .../components/rose/header-test.js | 18 +++++------ .../components/rose/header/nav-test.js | 29 ++++++++++++++++++ .../components/rose/header/navigation-test.js | 29 ------------------ .../components/rose/header/utilities-test.js | 8 ++--- 16 files changed, 142 insertions(+), 82 deletions(-) rename addons/rose/addon/components/rose/header/{navigation.js => nav.js} (93%) create mode 100644 addons/rose/addon/styles/rose/components/header/nav/_index.scss create mode 100644 addons/rose/addon/styles/rose/components/header/nav/_link.scss create mode 100644 addons/rose/addon/templates/components/rose/header/nav.hbs delete mode 100644 addons/rose/addon/templates/components/rose/header/navigation.hbs create mode 100644 addons/rose/app/components/rose/header/nav.js delete mode 100644 addons/rose/app/components/rose/header/navigation.js create mode 100644 addons/rose/tests/integration/components/rose/header/nav-test.js delete mode 100644 addons/rose/tests/integration/components/rose/header/navigation-test.js diff --git a/addons/rose/addon/components/rose/header.stories.mdx b/addons/rose/addon/components/rose/header.stories.mdx index affec857c..5f69caffa 100644 --- a/addons/rose/addon/components/rose/header.stories.mdx +++ b/addons/rose/addon/components/rose/header.stories.mdx @@ -7,13 +7,13 @@ import { text, boolean } from '@storybook/addon-knobs'; # Header -A header component that allows three distinct sections to be configured: brand, navigation, and utilities. +A header component that allows three distinct sections to be configured: brand, nav, and utilities. ```htmlbars - + - + Org name @@ -22,7 +22,7 @@ A header component that allows three distinct sections to be configured: brand, Section - + @@ -39,18 +39,18 @@ A header component that allows three distinct sections to be configured: brand, {{ template: hbs` - + - + - {{navigation-dropdown-label}} + {{nav-dropdown-label}} - {{navigation-dropdown-link-label}} - {{navigation-dropdown-button-label}} + {{nav-dropdown-link-label}} + {{nav-dropdown-button-label}} - {{navigation-link-label}} - + {{nav-link-label}} + @@ -63,10 +63,10 @@ A header component that allows three distinct sections to be configured: brand, `, context: { - 'navigation-dropdown-label': text('navigation-dropdown-label', 'Org Name'), - 'navigation-dropdown-link-label': text('navigation-dropdown-link-label', 'Menu Item'), - 'navigation-dropdown-button-label': text('navigation-dropdown-button-label', 'Menu Item'), - 'navigation-link-label': text('navigation-link-label', 'Section'), + 'nav-dropdown-label': text('nav-dropdown-label', 'Org Name'), + 'nav-dropdown-link-label': text('nav-dropdown-link-label', 'Menu Item'), + 'nav-dropdown-button-label': text('nav-dropdown-button-label', 'Menu Item'), + 'nav-link-label': text('nav-link-label', 'Section'), }, }} diff --git a/addons/rose/addon/components/rose/header/navigation.js b/addons/rose/addon/components/rose/header/nav.js similarity index 93% rename from addons/rose/addon/components/rose/header/navigation.js rename to addons/rose/addon/components/rose/header/nav.js index 4ef10f9e3..387bd6be8 100644 --- a/addons/rose/addon/components/rose/header/navigation.js +++ b/addons/rose/addon/components/rose/header/nav.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import layout from '../../../templates/components/rose/header/navigation'; +import layout from '../../../templates/components/rose/header/nav'; export default Component.extend({ layout, diff --git a/addons/rose/addon/styles/rose/components/header/_catchall.scss b/addons/rose/addon/styles/rose/components/header/_catchall.scss index 9d98dfbb1..bac73fba3 100644 --- a/addons/rose/addon/styles/rose/components/header/_catchall.scss +++ b/addons/rose/addon/styles/rose/components/header/_catchall.scss @@ -1,12 +1,12 @@ -.rose-header-navigation { - grid-area: navigation; +.rose-header-nav { + grid-area: nav; - .rose-header-navigation-flex { + .rose-header-nav-flex { display: flex; flex-wrap: wrap; } - .rose-header-navigation-link { + .rose-header-nav-link { text-decoration: none; display: block; color: var(--white); @@ -40,7 +40,7 @@ } } -.rose-header-navigation, +.rose-header-nav, .rose-header-utilities { .rose-header-dropdown { &[open] { @@ -117,14 +117,14 @@ grid-template-columns: 1fr 3fr; grid-template-areas: 'brand utilities' - 'navigation navigation'; + 'nav nav'; padding-bottom: 0; - .rose-header-navigation { + .rose-header-nav { background: var(--ui-header-subtler); padding: sizing.rems(xs) sizing.rems(s); - .rose-header-navigation-link { + .rose-header-nav-link { border: 1px solid var(--ui-gray-subtler); &:hover { diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss index 9d8cc26d6..e8b593805 100644 --- a/addons/rose/addon/styles/rose/components/header/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/_index.scss @@ -3,6 +3,7 @@ @use '../../utilities/type'; @import 'brand'; +@import 'nav'; $dropdown-chevron: ( 'default': @@ -13,7 +14,17 @@ $dropdown-chevron: ( .rose-header { display: grid; - grid-template-areas: 'brand navigation utilities'; + grid-template-areas: 'brand nav utilities'; grid-template-columns: 0.01fr auto 1fr; background: var(--black) linear-gradient(90deg, #191a1c 0%, #1b212d 100%); } + +@media (max-width: media.width(small)) { + .rose-header { + grid-template-columns: 1fr 3fr; + grid-template-areas: + 'brand utilities' + 'nav nav'; + padding-bottom: 0; + } +} diff --git a/addons/rose/addon/styles/rose/components/header/nav/_index.scss b/addons/rose/addon/styles/rose/components/header/nav/_index.scss new file mode 100644 index 000000000..3605a62a2 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/header/nav/_index.scss @@ -0,0 +1,18 @@ +@use '../../../variables/media'; + +@import 'link'; + +.rose-header-nav { + grid-area: nav; + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 10px 0; +} + +@media (max-width: media.width(small)) { + .rose-header-nav { + padding: 10px 20px; + background: var(--ui-header-subtler); + } +} diff --git a/addons/rose/addon/styles/rose/components/header/nav/_link.scss b/addons/rose/addon/styles/rose/components/header/nav/_link.scss new file mode 100644 index 000000000..cbea143c3 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/header/nav/_link.scss @@ -0,0 +1,28 @@ +@use '../../../variables/sizing'; +@use '../../../utilities/type'; + +.rose-header-nav-link { + @include type.type(s, semibold); + + // target line height is 16, which is not a standard line height + $lineHeight: 16 / 14; + line-height: $lineHeight; + text-decoration: none; + + color: var(--white); + opacity: 0.5; + + // again, nonstandard sizing for header stuff + padding: 6px 12px; + border-radius: 4px; + + &.active { + opacity: 1; + background: #{color(ui-gray, 800)}; + } + + &:hover { + opacity: 1; + text-decoration: underline; + } +} diff --git a/addons/rose/addon/templates/components/rose/header.hbs b/addons/rose/addon/templates/components/rose/header.hbs index 343b45d93..0d3efc51a 100644 --- a/addons/rose/addon/templates/components/rose/header.hbs +++ b/addons/rose/addon/templates/components/rose/header.hbs @@ -1,8 +1,8 @@ -
{{yield (hash brand=(component 'rose/header/brand') utilities=(component 'rose/header/utilities') - navigation=(component 'rose/header/navigation') + nav=(component 'rose/header/nav') )}} -
+ diff --git a/addons/rose/addon/templates/components/rose/header/nav.hbs b/addons/rose/addon/templates/components/rose/header/nav.hbs new file mode 100644 index 000000000..2b2978e00 --- /dev/null +++ b/addons/rose/addon/templates/components/rose/header/nav.hbs @@ -0,0 +1,6 @@ + diff --git a/addons/rose/addon/templates/components/rose/header/navigation.hbs b/addons/rose/addon/templates/components/rose/header/navigation.hbs deleted file mode 100644 index 9e2b4308b..000000000 --- a/addons/rose/addon/templates/components/rose/header/navigation.hbs +++ /dev/null @@ -1,8 +0,0 @@ - - - {{yield (hash - link=(component 'link-to' class="rose-header-navigation-link") - dropdown=(component 'rose/header/dropdown') - )}} - - diff --git a/addons/rose/app/components/rose/header/nav.js b/addons/rose/app/components/rose/header/nav.js new file mode 100644 index 000000000..896417ffd --- /dev/null +++ b/addons/rose/app/components/rose/header/nav.js @@ -0,0 +1 @@ +export { default } from 'rose/components/rose/header/nav'; diff --git a/addons/rose/app/components/rose/header/navigation.js b/addons/rose/app/components/rose/header/navigation.js deleted file mode 100644 index ff5cfc74a..000000000 --- a/addons/rose/app/components/rose/header/navigation.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/header/navigation'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 99f416c78..4425c58a8 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,9 +1,14 @@ - + + + Section + Section + + {{!-- - + Org name @@ -12,7 +17,7 @@ Section - + diff --git a/addons/rose/tests/integration/components/rose/header-test.js b/addons/rose/tests/integration/components/rose/header-test.js index 72b6ef3fb..7e0f57da7 100644 --- a/addons/rose/tests/integration/components/rose/header-test.js +++ b/addons/rose/tests/integration/components/rose/header-test.js @@ -16,26 +16,26 @@ module('Integration | Component | rose/header', function (hooks) { `); assert.ok(find('.rose-header-brand')); - assert.notOk(find('.rose-header-navigation')); + assert.notOk(find('.rose-header-nav')); assert.notOk(find('.rose-header-utilities')); }); - test('it renders with navigation', async function (assert) { + test('it renders with nav', async function (assert) { await render(hbs` - + `); - assert.ok(find('.rose-header-navigation')); + assert.ok(find('.rose-header-nav')); assert.notOk(find('.rose-header-brand')); assert.notOk(find('.rose-header-utilities')); }); - test('it renders with navigation elements', async function (assert) { + test('it renders with nav elements', async function (assert) { await render(hbs` - + - + `); - assert.ok(find('.rose-header-navigation-link')); + assert.ok(find('.rose-header-nav-link')); }); test('it renders with utilities', async function (assert) { @@ -43,7 +43,7 @@ module('Integration | Component | rose/header', function (hooks) { `); assert.notOk(find('.rose-header-brand')); - assert.notOk(find('.rose-header-navigation')); + assert.notOk(find('.rose-header-nav')); assert.ok(find('.rose-header-utilities')); }); diff --git a/addons/rose/tests/integration/components/rose/header/nav-test.js b/addons/rose/tests/integration/components/rose/header/nav-test.js new file mode 100644 index 000000000..d1c5a688d --- /dev/null +++ b/addons/rose/tests/integration/components/rose/header/nav-test.js @@ -0,0 +1,29 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find, findAll } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | rose/header/nav', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + await render(hbs``); + assert.ok(find('.rose-header-nav')); + }); + + test('it renders nav link elements', async function (assert) { + await render(hbs` + + + `); + assert.equal(findAll('a').length, 2); + }); + + test('it renders nav dropdown elements', async function (assert) { + await render(hbs` + + + `); + assert.equal(findAll('.rose-header-dropdown').length, 2); + }); +}); diff --git a/addons/rose/tests/integration/components/rose/header/navigation-test.js b/addons/rose/tests/integration/components/rose/header/navigation-test.js deleted file mode 100644 index 11ac6cda5..000000000 --- a/addons/rose/tests/integration/components/rose/header/navigation-test.js +++ /dev/null @@ -1,29 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find, findAll } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | rose/header/navigation', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-header-navigation')); - }); - - test('it renders navigation link elements', async function (assert) { - await render(hbs` - - - `); - assert.equal(findAll('a').length, 2); - }); - - test('it renders navigation dropdown elements', async function (assert) { - await render(hbs` - - - `); - assert.equal(findAll('.rose-header-dropdown').length, 2); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/header/utilities-test.js b/addons/rose/tests/integration/components/rose/header/utilities-test.js index b0dca161d..884266d8f 100644 --- a/addons/rose/tests/integration/components/rose/header/utilities-test.js +++ b/addons/rose/tests/integration/components/rose/header/utilities-test.js @@ -11,10 +11,10 @@ module('Integration | Component | rose/header/utilities', function (hooks) { assert.ok(find('.rose-header-utilities')); }); - test('it renders navigation dropdown elements', async function (assert) { - await render(hbs` - - + test('it renders nav dropdown elements', async function (assert) { + await render(hbs` + + `); assert.equal(findAll('.rose-header-dropdown').length, 2); });