From 234e9a5606cc7d1d5d51c923ba27963d68edfe8b Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Sun, 24 May 2020 15:55:37 -0400 Subject: [PATCH 1/8] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20refactor=20brand?= =?UTF-8?q?=20styles=20with=20heading=20and=20better=20size?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/form/input.js | 2 +- .../addon/components/rose/form/textarea.js | 2 +- .../addon/components/rose/header.stories.mdx | 4 +- .../addon/styles/rose/components/_header.scss | 168 ------------------ .../styles/rose/components/header/_brand.scss | 31 ++++ .../rose/components/header/_catchall.scss | 136 ++++++++++++++ .../styles/rose/components/header/_index.scss | 19 ++ .../components/rose/header/brand.hbs | 16 +- addons/rose/index.js | 30 ++++ addons/rose/package.json | 2 +- .../rose/tests/dummy/app/templates/index.hbs | 5 +- addons/rose/tests/dummy/public/logo.svg | 1 + .../components/rose/header/brand-test.js | 10 +- ui/core/app/templates/application.hbs | 9 +- ui/core/public/logo.svg | 1 + 15 files changed, 255 insertions(+), 181 deletions(-) delete mode 100644 addons/rose/addon/styles/rose/components/_header.scss create mode 100644 addons/rose/addon/styles/rose/components/header/_brand.scss create mode 100644 addons/rose/addon/styles/rose/components/header/_catchall.scss create mode 100644 addons/rose/addon/styles/rose/components/header/_index.scss create mode 100644 addons/rose/tests/dummy/public/logo.svg create mode 100644 ui/core/public/logo.svg diff --git a/addons/rose/addon/components/rose/form/input.js b/addons/rose/addon/components/rose/form/input.js index 0b7915a17..005ed82e2 100644 --- a/addons/rose/addon/components/rose/form/input.js +++ b/addons/rose/addon/components/rose/form/input.js @@ -18,5 +18,5 @@ import layout from '../../../templates/components/rose/form/input'; */ export default Component.extend({ layout, - tagName: '' + tagName: '', }); diff --git a/addons/rose/addon/components/rose/form/textarea.js b/addons/rose/addon/components/rose/form/textarea.js index f8f4a6a71..fd74470f7 100644 --- a/addons/rose/addon/components/rose/form/textarea.js +++ b/addons/rose/addon/components/rose/form/textarea.js @@ -18,5 +18,5 @@ import layout from '../../../templates/components/rose/form/textarea'; */ export default Component.extend({ layout, - tagName: '' + tagName: '', }); diff --git a/addons/rose/addon/components/rose/header.stories.mdx b/addons/rose/addon/components/rose/header.stories.mdx index 05d376e64..affec857c 100644 --- a/addons/rose/addon/components/rose/header.stories.mdx +++ b/addons/rose/addon/components/rose/header.stories.mdx @@ -11,7 +11,7 @@ A header component that allows three distinct sections to be configured: brand, ```htmlbars - + @@ -40,7 +40,7 @@ A header component that allows three distinct sections to be configured: brand, {{ template: hbs` - + {{navigation-dropdown-label}} diff --git a/addons/rose/addon/styles/rose/components/_header.scss b/addons/rose/addon/styles/rose/components/_header.scss deleted file mode 100644 index fb9787b99..000000000 --- a/addons/rose/addon/styles/rose/components/_header.scss +++ /dev/null @@ -1,168 +0,0 @@ -@use '../variables/sizing'; -@use '../variables/media'; -@use '../utilities/type'; - -$brand-hashicorp: "data:image/svg+xml;utf-8,"; - -$dropdown-chevron: ( - 'default': - "data:image/svg+xml;utf-8,", - 'open': - "data:image/svg+xml;utf-8,", -); - -.rose-header { - @include type.type(s, semibold); - display: grid; - grid-template-areas: 'brand navigation utilities'; - grid-template-columns: 0.01fr auto 1fr; - grid-gap: sizing.rems(xxxs); - background: var(--black); - color: var(--white); - - .rose-header-brand { - grid-area: brand; - width: sizing.rems(l); - height: sizing.rems(l); - background-image: url($brand-hashicorp); - background-repeat: no-repeat; - margin: sizing.rems(xxs); - } - - .rose-header-navigation { - grid-area: navigation; - - .rose-header-navigation-flex { - display: flex; - flex-wrap: wrap; - } - - .rose-header-navigation-link { - text-decoration: none; - display: block; - color: var(--white); - border: 1px solid var(--stark); - border-radius: sizing.rems(xxs); - text-align: center; - padding: sizing.rems(xxs) sizing.rems(s); - position: relative; - top: sizing.rems(xxxs); - cursor: pointer; - margin: 0 sizing.rems(xs); - - &:hover { - background: var(--ui-gray-starker-3); - } - - &:active { - background: var(--ui-gray-starker-2); - } - } - } - - .rose-header-utilities { - grid-area: utilities; - - .rose-header-utilities-flex { - margin-right: sizing.rems(s); - display: flex; - flex-wrap: wrap; - flex-direction: row-reverse; - } - } - - .rose-header-navigation, - .rose-header-utilities { - .rose-header-dropdown { - &[open] { - .rose-header-dropdown-trigger { - background: var(--white); - color: var(--ui-gray-starker-4); - - .rose-header-dropdown-chevron { - background-image: url(map-get($dropdown-chevron, 'open')); - } - } - } - - .rose-header-dropdown-trigger { - padding: sizing.rems(xxs) sizing.rems(s); - border-radius: sizing.rems(xxxs); - color: var(--white); - position: relative; - top: sizing.rems(xxxs); - cursor: pointer; - &::-webkit-details-marker { - display: none; - } - - .rose-header-dropdown-chevron { - background-image: url(map-get($dropdown-chevron, 'default')); - width: sizing.rems(m); - height: sizing.rems(m); - background-repeat: no-repeat; - display: inline-block; - vertical-align: middle; - } - } - - .rose-header-dropdown-content { - position: absolute; - background-color: var(--white); - border-radius: sizing.rems(xxxs); - border: 1px solid var(--ui-gray-subtler-2); - padding-right: sizing.rems(xl); - margin-top: sizing.rems(xxxs); - - &.rose-header-dropdown-content-right { - right: sizing.rems(s); - } - - .rose-header-dropdown-content-link { - padding: sizing.rems(xs) sizing.rems(s); - text-decoration: none; - display: block; - color: var(--ui-gray-starker-4); - height: sizing.rems(l); - } - - .rose-header-dropdown-content-button { - button { - cursor: pointer; - padding: sizing.rems(xs) sizing.rems(s); - color: var(--ui-gray-starker-4); - display: inline-block; - border: none; - text-decoration: none; - font-size: inherit; - font-weight: inherit; - -webkit-appearance: none; - } - } - } - } - } -} - -@media (max-width: media.width(small)) { - .rose-header { - grid-template-columns: 1fr 3fr; - grid-template-areas: - 'brand utilities' - 'navigation navigation'; - padding-bottom: 0; - - .rose-header-navigation { - background: var(--ui-header-subtler); - padding: sizing.rems(xs) sizing.rems(s); - - .rose-header-navigation-link { - border: 1px solid var(--ui-gray-subtler); - - &:hover { - background: var(--ui-gray-starker-3); - } - } - } - } -} diff --git a/addons/rose/addon/styles/rose/components/header/_brand.scss b/addons/rose/addon/styles/rose/components/header/_brand.scss new file mode 100644 index 000000000..463cbb639 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/header/_brand.scss @@ -0,0 +1,31 @@ +@use '../../variables/sizing'; +@use '../../utilities/type'; + +.rose-header-brand { + grid-area: brand; + display: flex; + align-items: center; + color: var(--white); + text-decoration: none; + padding: 10px; + margin: 0 10px; + + svg { + // 28px... header sizes do not follow the sizing system + $logoSize: sizing.rems(l) + sizing.rems(xxs); + display: block; + width: $logoSize; + } + + .rose-header-brand-text { + @include type.type(m, normal); + margin: 0; + white-space: nowrap; + position: absolute; + top: -1000px; + left: -1000px; + opacity: 0; + width: 1px; + height: 1px; + } +} diff --git a/addons/rose/addon/styles/rose/components/header/_catchall.scss b/addons/rose/addon/styles/rose/components/header/_catchall.scss new file mode 100644 index 000000000..9d98dfbb1 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/header/_catchall.scss @@ -0,0 +1,136 @@ +.rose-header-navigation { + grid-area: navigation; + + .rose-header-navigation-flex { + display: flex; + flex-wrap: wrap; + } + + .rose-header-navigation-link { + text-decoration: none; + display: block; + color: var(--white); + border: 1px solid var(--stark); + border-radius: sizing.rems(xxs); + text-align: center; + padding: sizing.rems(xxs) sizing.rems(s); + position: relative; + top: sizing.rems(xxxs); + cursor: pointer; + margin: 0 sizing.rems(xs); + + &:hover { + background: var(--ui-gray-starker-3); + } + + &:active { + background: var(--ui-gray-starker-2); + } + } +} + +.rose-header-utilities { + grid-area: utilities; + + .rose-header-utilities-flex { + margin-right: sizing.rems(s); + display: flex; + flex-wrap: wrap; + flex-direction: row-reverse; + } +} + +.rose-header-navigation, +.rose-header-utilities { + .rose-header-dropdown { + &[open] { + .rose-header-dropdown-trigger { + background: var(--white); + color: var(--ui-gray-starker-4); + + .rose-header-dropdown-chevron { + background-image: url(map-get($dropdown-chevron, 'open')); + } + } + } + + .rose-header-dropdown-trigger { + padding: sizing.rems(xxs) sizing.rems(s); + border-radius: sizing.rems(xxxs); + color: var(--white); + position: relative; + top: sizing.rems(xxxs); + cursor: pointer; + &::-webkit-details-marker { + display: none; + } + + .rose-header-dropdown-chevron { + background-image: url(map-get($dropdown-chevron, 'default')); + width: sizing.rems(m); + height: sizing.rems(m); + background-repeat: no-repeat; + display: inline-block; + vertical-align: middle; + } + } + + .rose-header-dropdown-content { + position: absolute; + background-color: var(--white); + border-radius: sizing.rems(xxxs); + border: 1px solid var(--ui-gray-subtler-2); + padding-right: sizing.rems(xl); + margin-top: sizing.rems(xxxs); + + &.rose-header-dropdown-content-right { + right: sizing.rems(s); + } + + .rose-header-dropdown-content-link { + padding: sizing.rems(xs) sizing.rems(s); + text-decoration: none; + display: block; + color: var(--ui-gray-starker-4); + height: sizing.rems(l); + } + + .rose-header-dropdown-content-button { + button { + cursor: pointer; + padding: sizing.rems(xs) sizing.rems(s); + color: var(--ui-gray-starker-4); + display: inline-block; + border: none; + text-decoration: none; + font-size: inherit; + font-weight: inherit; + -webkit-appearance: none; + } + } + } + } +} + +@media (max-width: media.width(small)) { + .rose-header { + grid-template-columns: 1fr 3fr; + grid-template-areas: + 'brand utilities' + 'navigation navigation'; + padding-bottom: 0; + + .rose-header-navigation { + background: var(--ui-header-subtler); + padding: sizing.rems(xs) sizing.rems(s); + + .rose-header-navigation-link { + border: 1px solid var(--ui-gray-subtler); + + &:hover { + background: var(--ui-gray-starker-3); + } + } + } + } +} diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss new file mode 100644 index 000000000..9d8cc26d6 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/header/_index.scss @@ -0,0 +1,19 @@ +@use '../../variables/sizing'; +@use '../../variables/media'; +@use '../../utilities/type'; + +@import 'brand'; + +$dropdown-chevron: ( + 'default': + "data:image/svg+xml;utf-8,", + 'open': + "data:image/svg+xml;utf-8,", +); + +.rose-header { + display: grid; + grid-template-areas: 'brand navigation utilities'; + grid-template-columns: 0.01fr auto 1fr; + background: var(--black) linear-gradient(90deg, #191a1c 0%, #1b212d 100%); +} diff --git a/addons/rose/addon/templates/components/rose/header/brand.hbs b/addons/rose/addon/templates/components/rose/header/brand.hbs index 836e22b70..525dd1540 100644 --- a/addons/rose/addon/templates/components/rose/header/brand.hbs +++ b/addons/rose/addon/templates/components/rose/header/brand.hbs @@ -1 +1,15 @@ - + + + {{#if @logo}} + {{inline-svg @logo}} + {{/if}} + + {{#if @text}} +

{{@text}}

+ {{/if}} + + diff --git a/addons/rose/index.js b/addons/rose/index.js index 8b3c004d5..73cccf517 100644 --- a/addons/rose/index.js +++ b/addons/rose/index.js @@ -11,6 +11,8 @@ module.exports = { this.includeStyles(app); this.includeIcons(app); + this.includePublic(app); + this.setupSVGO(app); }, /** @@ -56,4 +58,32 @@ module.exports = { if (addon.name === 'ember-inline-svg') addon.included(app); }); }, + + /** + * Finds the public folder and includes it into the ember-inline-svg addon. + */ + includePublic(app) { + const publicPath = path.resolve('public'); + const dummyPublicPath = path.resolve('tests/dummy/public'); + + app.options.svg = app.options.svg || {}; + app.options.svg.paths = app.options.svg.paths || []; + + app.options.svg.paths.push(publicPath); + if (this.isDevelopingAddon()) app.options.svg.paths.push(dummyPublicPath); + + this.addons.forEach((addon) => { + if (addon.name === 'ember-inline-svg') addon.included(app); + }); + }, + + /** + * Adjust SVG optimizer defaults (used by ember-inline-svg). + */ + setupSVGO(app) { + app.options.svg = app.options.svg || {}; + app.options.svg.optimize = app.options.svg.optimize || {}; + app.options.svg.optimize.plugins = app.options.svg.optimize.plugins || []; + app.options.svg.optimize.plugins.push({ removeViewBox: false }); + }, }; diff --git a/addons/rose/package.json b/addons/rose/package.json index bcc19b49f..4ec6dadf1 100644 --- a/addons/rose/package.json +++ b/addons/rose/package.json @@ -16,7 +16,7 @@ "lint:sass": "sass-lint -v -q", "format": "npm run format:js && npm run format:sass", "format:js": "prettier --write '{addon,app,config,stories,tests}/**/*.js' *.js", - "format:sass": "prettier --write {addon,app}/**/*.scss", + "format:sass": "prettier --write addon/**/*.scss", "start": "ember serve", "test": "ember test", "test:all": "ember try:each", diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 6e3605e07..99f416c78 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,6 +1,8 @@ - + + + {{!-- Org name @@ -21,6 +23,7 @@ + --}} diff --git a/addons/rose/tests/dummy/public/logo.svg b/addons/rose/tests/dummy/public/logo.svg new file mode 100644 index 000000000..2a28cc024 --- /dev/null +++ b/addons/rose/tests/dummy/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/addons/rose/tests/integration/components/rose/header/brand-test.js b/addons/rose/tests/integration/components/rose/header/brand-test.js index e3df6dc9e..e89327632 100644 --- a/addons/rose/tests/integration/components/rose/header/brand-test.js +++ b/addons/rose/tests/integration/components/rose/header/brand-test.js @@ -7,7 +7,15 @@ module('Integration | Component | rose/header/brand', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - await render(hbs``); + assert.expect(3); + await render(hbs` + + `); assert.ok(find('.rose-header-brand')); + assert.ok(find('.rose-header-brand svg')); + assert.equal( + find('.rose-header-brand-text').textContent.trim(), + 'Product Name' + ); }); }); diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs index 221940351..1ac60bbce 100644 --- a/ui/core/app/templates/application.hbs +++ b/ui/core/app/templates/application.hbs @@ -1,9 +1,8 @@ - - - - - {{title (app-name)}} + + + + {{outlet}} diff --git a/ui/core/public/logo.svg b/ui/core/public/logo.svg new file mode 100644 index 000000000..2a28cc024 --- /dev/null +++ b/ui/core/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file From edc90e05998d1f2430de7160f6a21a597f7cb723 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Sun, 24 May 2020 15:58:21 -0400 Subject: [PATCH 2/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20brand=20should=20ha?= =?UTF-8?q?ve=20a=20title=20attribute?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- addons/rose/addon/templates/components/rose/header/brand.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/rose/addon/templates/components/rose/header/brand.hbs b/addons/rose/addon/templates/components/rose/header/brand.hbs index 525dd1540..cff66cc3b 100644 --- a/addons/rose/addon/templates/components/rose/header/brand.hbs +++ b/addons/rose/addon/templates/components/rose/header/brand.hbs @@ -1,6 +1,7 @@ From 019388ac304018dba779c448b884eb213cfa9cd7 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Mon, 25 May 2020 18:22:57 -0400 Subject: [PATCH 3/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20refactor=20header?= =?UTF-8?q?=20nav=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); }); From 707bca8a72d417f65799e24e9949905f41b2875e Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 26 May 2020 08:56:11 -0400 Subject: [PATCH 4/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20brand=20and=20nav?= =?UTF-8?q?=20should=20collapse=20when=20no=20items=20present?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/styles/rose/components/header/_brand.scss | 4 ++-- .../addon/styles/rose/components/header/nav/_index.scss | 8 +++----- .../addon/styles/rose/components/header/nav/_link.scss | 5 +++-- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/addons/rose/addon/styles/rose/components/header/_brand.scss b/addons/rose/addon/styles/rose/components/header/_brand.scss index 463cbb639..671e38ffc 100644 --- a/addons/rose/addon/styles/rose/components/header/_brand.scss +++ b/addons/rose/addon/styles/rose/components/header/_brand.scss @@ -7,8 +7,8 @@ align-items: center; color: var(--white); text-decoration: none; - padding: 10px; - margin: 0 10px; + padding: 0 10px; + margin: 10px; svg { // 28px... header sizes do not follow the sizing system diff --git a/addons/rose/addon/styles/rose/components/header/nav/_index.scss b/addons/rose/addon/styles/rose/components/header/nav/_index.scss index 3605a62a2..e950cb452 100644 --- a/addons/rose/addon/styles/rose/components/header/nav/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/nav/_index.scss @@ -1,3 +1,4 @@ +@use '../../../variables/sizing'; @use '../../../variables/media'; @import 'link'; @@ -7,12 +8,9 @@ display: flex; flex-wrap: wrap; align-items: center; - padding: 10px 0; -} -@media (max-width: media.width(small)) { - .rose-header-nav { - padding: 10px 20px; + @media (max-width: media.width(small)) { + padding: 0 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 index cbea143c3..8a143fcd2 100644 --- a/addons/rose/addon/styles/rose/components/header/nav/_link.scss +++ b/addons/rose/addon/styles/rose/components/header/nav/_link.scss @@ -10,11 +10,12 @@ text-decoration: none; color: var(--white); - opacity: 0.5; + opacity: 0.75; // again, nonstandard sizing for header stuff + margin: 10px 0; padding: 6px 12px; - border-radius: 4px; + border-radius: sizing.rems(xxs); &.active { opacity: 1; From 63e426c4a453e31d2e544172e00065cca5babaf7 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 26 May 2020 09:04:20 -0400 Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20reorganize=20hea?= =?UTF-8?q?der=20nav=20style=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/components/header/_catchall.scss | 54 ------------------- .../styles/rose/components/header/_index.scss | 1 + .../components/header/{nav => }/_link.scss | 4 +- .../header/{nav/_index.scss => _nav.scss} | 6 +-- 4 files changed, 5 insertions(+), 60 deletions(-) rename addons/rose/addon/styles/rose/components/header/{nav => }/_link.scss (88%) rename addons/rose/addon/styles/rose/components/header/{nav/_index.scss => _nav.scss} (71%) diff --git a/addons/rose/addon/styles/rose/components/header/_catchall.scss b/addons/rose/addon/styles/rose/components/header/_catchall.scss index bac73fba3..f7355deb2 100644 --- a/addons/rose/addon/styles/rose/components/header/_catchall.scss +++ b/addons/rose/addon/styles/rose/components/header/_catchall.scss @@ -1,34 +1,3 @@ -.rose-header-nav { - grid-area: nav; - - .rose-header-nav-flex { - display: flex; - flex-wrap: wrap; - } - - .rose-header-nav-link { - text-decoration: none; - display: block; - color: var(--white); - border: 1px solid var(--stark); - border-radius: sizing.rems(xxs); - text-align: center; - padding: sizing.rems(xxs) sizing.rems(s); - position: relative; - top: sizing.rems(xxxs); - cursor: pointer; - margin: 0 sizing.rems(xs); - - &:hover { - background: var(--ui-gray-starker-3); - } - - &:active { - background: var(--ui-gray-starker-2); - } - } -} - .rose-header-utilities { grid-area: utilities; @@ -111,26 +80,3 @@ } } } - -@media (max-width: media.width(small)) { - .rose-header { - grid-template-columns: 1fr 3fr; - grid-template-areas: - 'brand utilities' - 'nav nav'; - padding-bottom: 0; - - .rose-header-nav { - background: var(--ui-header-subtler); - padding: sizing.rems(xs) sizing.rems(s); - - .rose-header-nav-link { - border: 1px solid var(--ui-gray-subtler); - - &:hover { - background: var(--ui-gray-starker-3); - } - } - } - } -} diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss index e8b593805..25dc59f2f 100644 --- a/addons/rose/addon/styles/rose/components/header/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/_index.scss @@ -4,6 +4,7 @@ @import 'brand'; @import 'nav'; +@import 'link'; $dropdown-chevron: ( 'default': diff --git a/addons/rose/addon/styles/rose/components/header/nav/_link.scss b/addons/rose/addon/styles/rose/components/header/_link.scss similarity index 88% rename from addons/rose/addon/styles/rose/components/header/nav/_link.scss rename to addons/rose/addon/styles/rose/components/header/_link.scss index 8a143fcd2..e1620d910 100644 --- a/addons/rose/addon/styles/rose/components/header/nav/_link.scss +++ b/addons/rose/addon/styles/rose/components/header/_link.scss @@ -1,5 +1,5 @@ -@use '../../../variables/sizing'; -@use '../../../utilities/type'; +@use '../../variables/sizing'; +@use '../../utilities/type'; .rose-header-nav-link { @include type.type(s, semibold); diff --git a/addons/rose/addon/styles/rose/components/header/nav/_index.scss b/addons/rose/addon/styles/rose/components/header/_nav.scss similarity index 71% rename from addons/rose/addon/styles/rose/components/header/nav/_index.scss rename to addons/rose/addon/styles/rose/components/header/_nav.scss index e950cb452..6e50ec714 100644 --- a/addons/rose/addon/styles/rose/components/header/nav/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/_nav.scss @@ -1,7 +1,5 @@ -@use '../../../variables/sizing'; -@use '../../../variables/media'; - -@import 'link'; +@use '../../variables/sizing'; +@use '../../variables/media'; .rose-header-nav { grid-area: nav; From d7b044b2f76b53f94784e43026ec72c0a902703f Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 26 May 2020 14:46:55 -0400 Subject: [PATCH 6/8] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20simplify=20dropd?= =?UTF-8?q?own=20component=20and=20clean=20up=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/components/rose/header.stories.mdx | 26 +++---- .../rose/header/dropdown/content.js | 7 -- .../rose/header/dropdown/content/button.js | 7 -- .../rose/header/dropdown/trigger.js | 7 -- .../rose/addon/modifiers/on-click-outside.js | 5 ++ .../rose/components/header/_catchall.scss | 52 ------------- .../rose/components/header/_dropdown.scss | 76 +++++++++++++++++++ .../styles/rose/components/header/_index.scss | 8 +- .../components/rose/header/dropdown.hbs | 22 ++++-- .../rose/header/dropdown/content.hbs | 6 -- .../rose/header/dropdown/content/button.hbs | 3 - .../rose/header/dropdown/trigger.hbs | 4 - .../rose/header/dropdown/content.js | 1 - .../rose/header/dropdown/content/button.js | 1 - .../rose/header/dropdown/trigger.js | 1 - .../rose/tests/dummy/app/templates/index.hbs | 16 ++-- .../components/rose/header/dropdown-test.js | 47 +++++------- .../rose/header/dropdown/content-test.js | 75 ------------------ .../header/dropdown/content/button-test.js | 32 -------- .../rose/header/dropdown/trigger-test.js | 41 ---------- 20 files changed, 132 insertions(+), 305 deletions(-) delete mode 100644 addons/rose/addon/components/rose/header/dropdown/content.js delete mode 100644 addons/rose/addon/components/rose/header/dropdown/content/button.js delete mode 100644 addons/rose/addon/components/rose/header/dropdown/trigger.js create mode 100644 addons/rose/addon/styles/rose/components/header/_dropdown.scss delete mode 100644 addons/rose/addon/templates/components/rose/header/dropdown/content.hbs delete mode 100644 addons/rose/addon/templates/components/rose/header/dropdown/content/button.hbs delete mode 100644 addons/rose/addon/templates/components/rose/header/dropdown/trigger.hbs delete mode 100644 addons/rose/app/components/rose/header/dropdown/content.js delete mode 100644 addons/rose/app/components/rose/header/dropdown/content/button.js delete mode 100644 addons/rose/app/components/rose/header/dropdown/trigger.js delete mode 100644 addons/rose/tests/integration/components/rose/header/dropdown/content-test.js delete mode 100644 addons/rose/tests/integration/components/rose/header/dropdown/content/button-test.js delete mode 100644 addons/rose/tests/integration/components/rose/header/dropdown/trigger-test.js diff --git a/addons/rose/addon/components/rose/header.stories.mdx b/addons/rose/addon/components/rose/header.stories.mdx index 5f69caffa..d546e5c5e 100644 --- a/addons/rose/addon/components/rose/header.stories.mdx +++ b/addons/rose/addon/components/rose/header.stories.mdx @@ -14,13 +14,12 @@ A header component that allows three distinct sections to be configured: brand, - - Org name - - link - button - + + Menu item + Menu item + Button menu item + Section Section @@ -42,14 +41,13 @@ A header component that allows three distinct sections to be configured: brand, - - {{nav-dropdown-label}} - - {{nav-dropdown-link-label}} - {{nav-dropdown-button-label}} - + + Menu item + Menu item + Button menu item - {{nav-link-label}} + Section + Section @@ -63,7 +61,7 @@ A header component that allows three distinct sections to be configured: brand, `, context: { - 'nav-dropdown-label': text('nav-dropdown-label', 'Org Name'), + '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/dropdown/content.js b/addons/rose/addon/components/rose/header/dropdown/content.js deleted file mode 100644 index 4f2bf32a0..000000000 --- a/addons/rose/addon/components/rose/header/dropdown/content.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../../templates/components/rose/header/dropdown/content'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/components/rose/header/dropdown/content/button.js b/addons/rose/addon/components/rose/header/dropdown/content/button.js deleted file mode 100644 index fa19bd4b9..000000000 --- a/addons/rose/addon/components/rose/header/dropdown/content/button.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../../../templates/components/rose/header/dropdown/content/button'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/components/rose/header/dropdown/trigger.js b/addons/rose/addon/components/rose/header/dropdown/trigger.js deleted file mode 100644 index 72ffb581c..000000000 --- a/addons/rose/addon/components/rose/header/dropdown/trigger.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../../templates/components/rose/header/dropdown/trigger'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/modifiers/on-click-outside.js b/addons/rose/addon/modifiers/on-click-outside.js index 8feb0335e..be434a234 100644 --- a/addons/rose/addon/modifiers/on-click-outside.js +++ b/addons/rose/addon/modifiers/on-click-outside.js @@ -1,5 +1,10 @@ import { modifier } from 'ember-modifier'; +/** + * Used to detect clicks occuring _outside_ of the modified element. + * This is useful especially for dropdowns to toggle content visibility + * when the user clicks away. + */ export default modifier((element, [callback]) => { function handleClick(event) { if (!element.contains(event.target)) { diff --git a/addons/rose/addon/styles/rose/components/header/_catchall.scss b/addons/rose/addon/styles/rose/components/header/_catchall.scss index f7355deb2..0d01e8090 100644 --- a/addons/rose/addon/styles/rose/components/header/_catchall.scss +++ b/addons/rose/addon/styles/rose/components/header/_catchall.scss @@ -12,37 +12,6 @@ .rose-header-nav, .rose-header-utilities { .rose-header-dropdown { - &[open] { - .rose-header-dropdown-trigger { - background: var(--white); - color: var(--ui-gray-starker-4); - - .rose-header-dropdown-chevron { - background-image: url(map-get($dropdown-chevron, 'open')); - } - } - } - - .rose-header-dropdown-trigger { - padding: sizing.rems(xxs) sizing.rems(s); - border-radius: sizing.rems(xxxs); - color: var(--white); - position: relative; - top: sizing.rems(xxxs); - cursor: pointer; - &::-webkit-details-marker { - display: none; - } - - .rose-header-dropdown-chevron { - background-image: url(map-get($dropdown-chevron, 'default')); - width: sizing.rems(m); - height: sizing.rems(m); - background-repeat: no-repeat; - display: inline-block; - vertical-align: middle; - } - } .rose-header-dropdown-content { position: absolute; @@ -56,27 +25,6 @@ right: sizing.rems(s); } - .rose-header-dropdown-content-link { - padding: sizing.rems(xs) sizing.rems(s); - text-decoration: none; - display: block; - color: var(--ui-gray-starker-4); - height: sizing.rems(l); - } - - .rose-header-dropdown-content-button { - button { - cursor: pointer; - padding: sizing.rems(xs) sizing.rems(s); - color: var(--ui-gray-starker-4); - display: inline-block; - border: none; - text-decoration: none; - font-size: inherit; - font-weight: inherit; - -webkit-appearance: none; - } - } } } } diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss new file mode 100644 index 000000000..3584c3126 --- /dev/null +++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss @@ -0,0 +1,76 @@ +@use 'sass:map'; +@use '../../variables/sizing'; +@use '../../utilities/type'; + +$dropdown-chevron: ( + 'default': + "data:image/svg+xml;utf-8,", +); + +.rose-header-dropdown { + position: relative; + + .rose-header-dropdown-trigger { + cursor: default; + color: var(--white); + background: url(map.get($dropdown-chevron, default)) no-repeat right center; + margin-right: sizing.rems(s); + padding-right: sizing.rems(l); + + // Hide default twistie triangle + // Webkit / Chromium + &::-webkit-details-marker { + display: none; + } + // Firefox + list-style-type: none; + &::marker { + display: none; + } + } + + .rose-header-dropdown-content { + $xs: sizing.rems(xs); // 8 + $xxs: sizing.rems(xxs); // 4 + position: absolute; + padding: $xxs 0; + border: 1px solid var(--ui-gray-subtler-2); + border-radius: sizing.rems(xxxs); + background: var(--subtle); + box-shadow: 0 $xxs $xxs rgba(var(--stark-components), var(--opacity-3)), + 0 $xxs $xs rgba(var(--stark-components), var(--opacity-4)); + } + + &.dropdown-right { + .rose-header-dropdown-content { + right: 0; + } + } + + .rose-header-dropdown-link, + .rose-button-header-dropdown { + @include type.type(m, normal); + display: block; + // Targeting min-width of 200 + min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10; + padding: 0 sizing.rems(s); + margin: 0; + border: 0; + color: var(--stark); + background-color: transparent; + // target line height is 36, which is not a standard line height for this + // font size + $lineHeight: 36 / 16; + line-height: $lineHeight; + text-align: left; + text-decoration: none; + + &:hover { + background-color: var(--ui-gray-subtler-4); + } + } + + .rose-button-header-dropdown { + width: 100%; + } +} diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss index 25dc59f2f..fd0595fe6 100644 --- a/addons/rose/addon/styles/rose/components/header/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/_index.scss @@ -5,13 +5,7 @@ @import 'brand'; @import 'nav'; @import 'link'; - -$dropdown-chevron: ( - 'default': - "data:image/svg+xml;utf-8,", - 'open': - "data:image/svg+xml;utf-8,", -); +@import 'dropdown'; .rose-header { display: grid; diff --git a/addons/rose/addon/templates/components/rose/header/dropdown.hbs b/addons/rose/addon/templates/components/rose/header/dropdown.hbs index 3f4810eea..f9376ddfe 100644 --- a/addons/rose/addon/templates/components/rose/header/dropdown.hbs +++ b/addons/rose/addon/templates/components/rose/header/dropdown.hbs @@ -1,8 +1,18 @@ -
+
+ + + {{@text}} + + +
+ {{yield (hash + link=(component "link-to" class="rose-header-dropdown-link") + button=(component "rose/button" style="header-dropdown") + )}} +
- {{yield (hash - trigger=(component 'rose/header/dropdown/trigger') - content=(component 'rose/header/dropdown/content' alignRight=@alignRight) - )}}
diff --git a/addons/rose/addon/templates/components/rose/header/dropdown/content.hbs b/addons/rose/addon/templates/components/rose/header/dropdown/content.hbs deleted file mode 100644 index 68af8036a..000000000 --- a/addons/rose/addon/templates/components/rose/header/dropdown/content.hbs +++ /dev/null @@ -1,6 +0,0 @@ - - {{yield (hash - link=(component 'link-to' class="rose-header-dropdown-content-link") - button=(component 'rose/header/dropdown/content/button') - )}} - diff --git a/addons/rose/addon/templates/components/rose/header/dropdown/content/button.hbs b/addons/rose/addon/templates/components/rose/header/dropdown/content/button.hbs deleted file mode 100644 index e437e4689..000000000 --- a/addons/rose/addon/templates/components/rose/header/dropdown/content/button.hbs +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/addons/rose/addon/templates/components/rose/header/dropdown/trigger.hbs b/addons/rose/addon/templates/components/rose/header/dropdown/trigger.hbs deleted file mode 100644 index f513aa8bd..000000000 --- a/addons/rose/addon/templates/components/rose/header/dropdown/trigger.hbs +++ /dev/null @@ -1,4 +0,0 @@ - - {{yield}} - - diff --git a/addons/rose/app/components/rose/header/dropdown/content.js b/addons/rose/app/components/rose/header/dropdown/content.js deleted file mode 100644 index 51792f92e..000000000 --- a/addons/rose/app/components/rose/header/dropdown/content.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/header/dropdown/content'; diff --git a/addons/rose/app/components/rose/header/dropdown/content/button.js b/addons/rose/app/components/rose/header/dropdown/content/button.js deleted file mode 100644 index cc70f39b5..000000000 --- a/addons/rose/app/components/rose/header/dropdown/content/button.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/header/dropdown/content/button'; diff --git a/addons/rose/app/components/rose/header/dropdown/trigger.js b/addons/rose/app/components/rose/header/dropdown/trigger.js deleted file mode 100644 index 0bb1491ed..000000000 --- a/addons/rose/app/components/rose/header/dropdown/trigger.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/header/dropdown/trigger'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index 4425c58a8..aaa68d9be 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -3,22 +3,16 @@ + + Menu item + Menu item + Button menu item + Section Section {{!-- - - - Org name - - link - button - - - Section - - diff --git a/addons/rose/tests/integration/components/rose/header/dropdown-test.js b/addons/rose/tests/integration/components/rose/header/dropdown-test.js index 439c29800..fcb355cf1 100644 --- a/addons/rose/tests/integration/components/rose/header/dropdown-test.js +++ b/addons/rose/tests/integration/components/rose/header/dropdown-test.js @@ -20,10 +20,7 @@ module('Integration | Component | rose/header/dropdown', function (hooks) { }); test('it renders with trigger', async function (assert) { - await render(hbs` - Click me - `); - assert.ok(find('.rose-header-dropdown-trigger')); + await render(hbs``); assert.equal( find('.rose-header-dropdown-trigger').textContent.trim(), 'Click me' @@ -31,14 +28,12 @@ module('Integration | Component | rose/header/dropdown', function (hooks) { }); test('it renders with content', async function (assert) { - await render(hbs` - - - - - - - + await render(hbs` + + + + + `); assert.ok(find('.rose-header-dropdown-content')); assert.equal(findAll('a').length, 2); @@ -46,32 +41,24 @@ module('Integration | Component | rose/header/dropdown', function (hooks) { }); test('it is toggled on click on trigger content', async function (assert) { - await render(hbs` - Click me - - - - `); + await render(hbs``); + assert.notOk(find('#dropdown').open); - - await click('#trigger'); + await click('summary'); assert.ok(find('#dropdown').open); - - await click('#trigger'); + await click('summary'); assert.notOk(find('#dropdown').open); }); test('it is closed with outside click is triggered', async function (assert) { - await render(hbs`
- Click me - - - -
`); + await render(hbs` +
+ +
+ `); - await click('#trigger'); + await click('summary'); assert.ok(find('#dropdown').open); - await click('#wrapper'); assert.notOk(find('#dropdown').open); }); diff --git a/addons/rose/tests/integration/components/rose/header/dropdown/content-test.js b/addons/rose/tests/integration/components/rose/header/dropdown/content-test.js deleted file mode 100644 index b0bb4a371..000000000 --- a/addons/rose/tests/integration/components/rose/header/dropdown/content-test.js +++ /dev/null @@ -1,75 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | rose/header/dropdown/content', function ( - hooks -) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-header-dropdown-content')); - }); - - test('it renders with content', async function (assert) { - await render(hbs` - content - `); - assert.equal( - find('.rose-header-dropdown-content').textContent.trim(), - 'content' - ); - }); - - test('it renders with html attributes', async function (assert) { - await render( - hbs`` - ); - assert.equal(find('.rose-header-dropdown-content').id, 'dropdown-content'); - assert.ok( - find('.rose-header-dropdown-content').className.match('universe') - ); - }); - - test('it is positioned right when @alignRight={{true}}', async function (assert) { - await render(hbs``); - assert.notOk(find('.rose-header-dropdown-content-right')); - - await render( - hbs`` - ); - assert.ok(find('.rose-header-dropdown-content-right')); - }); - - test('it render link element', async function (assert) { - await render(hbs` - - `); - assert.ok(find('a')); - assert.ok(find('.rose-header-dropdown-content-link')); - }); - - test('it render link element with content', async function (assert) { - await render(hbs` - linkify - `); - assert.equal(find('a').textContent.trim(), 'linkify'); - }); - - test('it render button element', async function (assert) { - await render(hbs` - - `); - assert.ok(find('button')); - assert.ok(find('.rose-header-dropdown-content-button')); - }); - - test('it render button element with content', async function (assert) { - await render(hbs` - dropdown button - `); - assert.equal(find('button').textContent.trim(), 'dropdown button'); - }); -}); diff --git a/addons/rose/tests/integration/components/rose/header/dropdown/content/button-test.js b/addons/rose/tests/integration/components/rose/header/dropdown/content/button-test.js deleted file mode 100644 index a73dc28df..000000000 --- a/addons/rose/tests/integration/components/rose/header/dropdown/content/button-test.js +++ /dev/null @@ -1,32 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module( - 'Integration | Component | rose/header/dropdown/content/button', - function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-header-dropdown-content-button')); - }); - - test('it renders with content', async function (assert) { - await render( - hbs`Button content` - ); - assert.equal( - find('.rose-header-dropdown-content-button').textContent.trim(), - 'Button content' - ); - }); - - test('it render button element', async function (assert) { - await render(hbs``); - assert.ok(find('button')); - assert.equal(find('button').type, 'button'); - }); - } -); diff --git a/addons/rose/tests/integration/components/rose/header/dropdown/trigger-test.js b/addons/rose/tests/integration/components/rose/header/dropdown/trigger-test.js deleted file mode 100644 index 83309f23e..000000000 --- a/addons/rose/tests/integration/components/rose/header/dropdown/trigger-test.js +++ /dev/null @@ -1,41 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render, find } from '@ember/test-helpers'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | rose/header/dropdown/trigger', function ( - hooks -) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-header-dropdown-trigger')); - assert.notOk(find('.rose-header-dropdown-open')); - }); - - test('it renders with content', async function (assert) { - await render(hbs` - trigger content - `); - assert.equal( - find('.rose-header-dropdown-trigger').textContent.trim(), - 'trigger content' - ); - }); - - test('it renders with html attributes', async function (assert) { - await render( - hbs`` - ); - assert.equal(find('.rose-header-dropdown-trigger').id, 'trigger'); - assert.ok( - find('.rose-header-dropdown-trigger').className.match('dropdown-trigger') - ); - }); - - test('it renders chevron', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-header-dropdown-chevron')); - }); -}); From de5814699aaa872f56837129472bf17addab141a Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Tue, 26 May 2020 15:58:27 -0400 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20add=20right-alig?= =?UTF-8?q?n=20and=20icon=20options=20to=20dropdowns?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../addon/components/rose/header.stories.mdx | 48 ++++++++++++------- .../rose/components/header/_catchall.scss | 2 - .../rose/components/header/_dropdown.scss | 31 +++++++++++- .../styles/rose/components/header/_index.scss | 1 + .../rose/components/header/_utilities.scss | 9 ++++ .../templates/components/rose/header.hbs | 6 ++- .../components/rose/header/dropdown.hbs | 18 ++++++- .../components/rose/header/utilities.hbs | 12 ++--- .../rose/tests/dummy/app/templates/index.hbs | 18 +++---- .../components/rose/header/dropdown-test.js | 15 ++++++ 10 files changed, 120 insertions(+), 40 deletions(-) create mode 100644 addons/rose/addon/styles/rose/components/header/_utilities.scss diff --git a/addons/rose/addon/components/rose/header.stories.mdx b/addons/rose/addon/components/rose/header.stories.mdx index d546e5c5e..bffd410b7 100644 --- a/addons/rose/addon/components/rose/header.stories.mdx +++ b/addons/rose/addon/components/rose/header.stories.mdx @@ -1,7 +1,7 @@ import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; import { hbs } from 'ember-cli-htmlbars'; import { action } from '@storybook/addon-actions'; -import { text, boolean } from '@storybook/addon-knobs'; +import { text, boolean, select } from '@storybook/addon-knobs'; @@ -24,12 +24,14 @@ A header component that allows three distinct sections to be configured: brand, - - Click me - - link - button - + + Menu item + Menu item + Button menu item @@ -39,7 +41,7 @@ A header component that allows three distinct sections to be configured: brand, {{ template: hbs` - + Menu item @@ -50,21 +52,31 @@ A header component that allows three distinct sections to be configured: brand, Section - - - - link - button - + + Menu item + Menu item + Button menu item `, context: { - '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'), + brandName: text('brandName', 'Brand Name'), + dropdownIcon: select( + 'dropdownIcon', + { + 'user-square-fill': 'user-square-fill', + 'check-circle-outline': 'check-circle-outline', + 'copy-action': 'copy-action', + 'unfold-more': 'unfold-more', + 'unfold-less': 'unfold-less', + }, + 'user-square-fill' + ), }, }} diff --git a/addons/rose/addon/styles/rose/components/header/_catchall.scss b/addons/rose/addon/styles/rose/components/header/_catchall.scss index 0d01e8090..dddb4761a 100644 --- a/addons/rose/addon/styles/rose/components/header/_catchall.scss +++ b/addons/rose/addon/styles/rose/components/header/_catchall.scss @@ -12,7 +12,6 @@ .rose-header-nav, .rose-header-utilities { .rose-header-dropdown { - .rose-header-dropdown-content { position: absolute; background-color: var(--white); @@ -24,7 +23,6 @@ &.rose-header-dropdown-content-right { right: sizing.rems(s); } - } } } diff --git a/addons/rose/addon/styles/rose/components/header/_dropdown.scss b/addons/rose/addon/styles/rose/components/header/_dropdown.scss index 3584c3126..bf6ab366d 100644 --- a/addons/rose/addon/styles/rose/components/header/_dropdown.scss +++ b/addons/rose/addon/styles/rose/components/header/_dropdown.scss @@ -12,10 +12,30 @@ $dropdown-chevron: ( .rose-header-dropdown-trigger { cursor: default; + overflow: hidden; + display: flex; + align-items: center; color: var(--white); background: url(map.get($dropdown-chevron, default)) no-repeat right center; + background-size: sizing.rems(m); margin-right: sizing.rems(s); - padding-right: sizing.rems(l); + padding-right: sizing.rems(l) - sizing.rems(xxs); + $lineHeight: 48 / 16; + line-height: $lineHeight; + + &.icon-only { + padding-right: sizing.rems(m); + + .rose-header-dropdown-trigger-text { + // TODO: factor out into visually-hidden mixin utility + position: absolute; + left: -1000px; + top: -1000px; + width: 1px; + height: 1px; + opacity: 0; + } + } // Hide default twistie triangle // Webkit / Chromium @@ -27,6 +47,15 @@ $dropdown-chevron: ( &::marker { display: none; } + + .rose-icon { + display: inline-block; + height: var(--size); + + > svg { + vertical-align: top; + } + } } .rose-header-dropdown-content { diff --git a/addons/rose/addon/styles/rose/components/header/_index.scss b/addons/rose/addon/styles/rose/components/header/_index.scss index fd0595fe6..6ba8aba30 100644 --- a/addons/rose/addon/styles/rose/components/header/_index.scss +++ b/addons/rose/addon/styles/rose/components/header/_index.scss @@ -4,6 +4,7 @@ @import 'brand'; @import 'nav'; +@import 'utilities'; @import 'link'; @import 'dropdown'; diff --git a/addons/rose/addon/styles/rose/components/header/_utilities.scss b/addons/rose/addon/styles/rose/components/header/_utilities.scss new file mode 100644 index 000000000..ad28137ff --- /dev/null +++ b/addons/rose/addon/styles/rose/components/header/_utilities.scss @@ -0,0 +1,9 @@ +@use '../../variables/sizing'; + +.rose-header-utilities { + grid-area: utilities; + display: flex; + flex-wrap: wrap; + flex-direction: row-reverse; + align-items: center; +} diff --git a/addons/rose/addon/templates/components/rose/header.hbs b/addons/rose/addon/templates/components/rose/header.hbs index 0d3efc51a..2d355f398 100644 --- a/addons/rose/addon/templates/components/rose/header.hbs +++ b/addons/rose/addon/templates/components/rose/header.hbs @@ -1,5 +1,7 @@ -
+
{{yield (hash brand=(component 'rose/header/brand') utilities=(component 'rose/header/utilities') diff --git a/addons/rose/addon/templates/components/rose/header/dropdown.hbs b/addons/rose/addon/templates/components/rose/header/dropdown.hbs index f9376ddfe..86406b2d9 100644 --- a/addons/rose/addon/templates/components/rose/header/dropdown.hbs +++ b/addons/rose/addon/templates/components/rose/header/dropdown.hbs @@ -4,8 +4,22 @@ {{on-click-outside this.close}} > - - {{@text}} + + + {{#if @icon}} + + {{/if}} + + + {{@text}} + +
diff --git a/addons/rose/addon/templates/components/rose/header/utilities.hbs b/addons/rose/addon/templates/components/rose/header/utilities.hbs index eefb15e8d..6ee49e33f 100644 --- a/addons/rose/addon/templates/components/rose/header/utilities.hbs +++ b/addons/rose/addon/templates/components/rose/header/utilities.hbs @@ -1,7 +1,5 @@ - - - {{yield (hash - dropdown=(component 'rose/header/dropdown' position="true") - )}} - - +
+ {{yield (hash + dropdown=(component 'rose/header/dropdown' alignRight=true) + )}} +
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index aaa68d9be..400f1d6f1 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -12,17 +12,19 @@ Section - {{!-- + - - - - link - button - + + Menu item + Menu item + Button menu item - --}} + diff --git a/addons/rose/tests/integration/components/rose/header/dropdown-test.js b/addons/rose/tests/integration/components/rose/header/dropdown-test.js index fcb355cf1..96806b98b 100644 --- a/addons/rose/tests/integration/components/rose/header/dropdown-test.js +++ b/addons/rose/tests/integration/components/rose/header/dropdown-test.js @@ -27,6 +27,21 @@ module('Integration | Component | rose/header/dropdown', function (hooks) { ); }); + test('it supports an icon', async function (assert) { + await render(hbs``); + assert.ok(find('svg')); + }); + + test('it supports icon-only display', async function (assert) { + await render(hbs``); + assert.ok(find('.icon-only')); + }); + + test('it supports right-aligned content', async function (assert) { + await render(hbs``); + assert.ok(find('.dropdown-right')); + }); + test('it renders with content', async function (assert) { await render(hbs` From 9249bf6332e867f8b9faaf059d56f4ab70ef6530 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Wed, 27 May 2020 09:58:04 -0400 Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=F0=9F=A4=96=20remove=20temporary?= =?UTF-8?q?=20catchall=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/components/header/_catchall.scss | 28 ------------------- 1 file changed, 28 deletions(-) delete mode 100644 addons/rose/addon/styles/rose/components/header/_catchall.scss diff --git a/addons/rose/addon/styles/rose/components/header/_catchall.scss b/addons/rose/addon/styles/rose/components/header/_catchall.scss deleted file mode 100644 index dddb4761a..000000000 --- a/addons/rose/addon/styles/rose/components/header/_catchall.scss +++ /dev/null @@ -1,28 +0,0 @@ -.rose-header-utilities { - grid-area: utilities; - - .rose-header-utilities-flex { - margin-right: sizing.rems(s); - display: flex; - flex-wrap: wrap; - flex-direction: row-reverse; - } -} - -.rose-header-nav, -.rose-header-utilities { - .rose-header-dropdown { - .rose-header-dropdown-content { - position: absolute; - background-color: var(--white); - border-radius: sizing.rems(xxxs); - border: 1px solid var(--ui-gray-subtler-2); - padding-right: sizing.rems(xl); - margin-top: sizing.rems(xxxs); - - &.rose-header-dropdown-content-right { - right: sizing.rems(s); - } - } - } -}