From ffed6ba76285f166ffe8f5566b40e416fa952c72 Mon Sep 17 00:00:00 2001 From: Randall Morey Date: Thu, 11 Jun 2020 10:51:04 -0400 Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20massage=20message=20?= =?UTF-8?q?component=20and=20simplify?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rose/addon/components/rose/anonymous.js | 2 +- .../addon/components/rose/message.stories.mdx | 67 ++++++---- .../addon/components/rose/message/link.js | 7 - addons/rose/addon/styles/rose/_index.scss | 1 - .../styles/rose/{ => components}/_icon.scss | 2 +- .../addon/styles/rose/components/_index.scss | 1 + .../styles/rose/components/_message.scss | 125 +++++++++--------- .../rose/components/layout/_global.scss | 1 - .../templates/components/rose/message.hbs | 36 ++--- .../components/rose/message/link.hbs | 13 -- addons/rose/app/components/rose/anonymous.js | 2 +- .../rose/app/components/rose/message/link.js | 1 - .../rose/tests/dummy/app/templates/index.hbs | 60 ++++++--- .../components/rose/anonymous-test.js | 4 +- .../components/rose/message-test.js | 36 ++--- .../components/rose/message/link-test.js | 28 ---- 16 files changed, 179 insertions(+), 207 deletions(-) delete mode 100644 addons/rose/addon/components/rose/message/link.js rename addons/rose/addon/styles/rose/{ => components}/_icon.scss (89%) delete mode 100644 addons/rose/addon/templates/components/rose/message/link.hbs delete mode 100644 addons/rose/app/components/rose/message/link.js delete mode 100644 addons/rose/tests/integration/components/rose/message/link-test.js diff --git a/addons/rose/addon/components/rose/anonymous.js b/addons/rose/addon/components/rose/anonymous.js index 74592a562..c5321f53a 100644 --- a/addons/rose/addon/components/rose/anonymous.js +++ b/addons/rose/addon/components/rose/anonymous.js @@ -6,5 +6,5 @@ import layout from '../../templates/components/rose/anonymous'; * that yield simple contextual components, such as layouts yielding regions. */ export default Component.extend({ - layout + layout, }); diff --git a/addons/rose/addon/components/rose/message.stories.mdx b/addons/rose/addon/components/rose/message.stories.mdx index 2c3e062d9..89447aca1 100644 --- a/addons/rose/addon/components/rose/message.stories.mdx +++ b/addons/rose/addon/components/rose/message.stories.mdx @@ -7,27 +7,29 @@ import { text, boolean, select } from '@storybook/addon-knobs'; # Message -A message component containing a title, description, and nav links. Title can be configured with optional icon and subtitle. - -```html - - {{inline-svg "chevron-left"}} Go back - Need help? - -``` +A message component containing a title, description, and nav links. +Title can be configured with optional icon and subtitle. - {{ + {{ template: hbs` - - {{inline-svg "chevron-left"}} Go back - Need help? + + + {{description}} + + + + Go back + + + Need help? + `, context: { - title: text('title', 'You are not authorized'), - subtitle: text('subtitle', 'Error 403'), - description: text('description', 'You must be granted permissions to view this data. Ask your administrator if you think you should have access.'), + title: text('title', 'Page not found'), + subtitle: text('subtitle', 'Error 404'), + description: text('description', 'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.'), icon: select( 'icon', { @@ -35,31 +37,48 @@ A message component containing a title, description, and nav links. Title can be 'help-circle-outline': 'help-circle-outline', 'disabled': 'disabled', }, - 'disabled' + 'help-circle-outline' ), }, }} -Message can be configured without icons and navigation links. ```html - + + + You must be granted permissions to view this data. Ask your administrator + if you think you should have access. + + + + Go back + + Need help? + ``` + +Message can be configured without icons and navigation links. + - {{ + {{ template: hbs` - + + + {{description}} + + `, context: { title: text('title', 'No logs received yet'), - description: text('description', 'Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.'), + description: text('description', 'Sorry, we could not find the page you were looking for. Navigate to another page with the links below.'), }, }} -Message can be configured with a single left aligned link. ```html - - Add a namespace + + + Description. + ``` diff --git a/addons/rose/addon/components/rose/message/link.js b/addons/rose/addon/components/rose/message/link.js deleted file mode 100644 index 3291d255d..000000000 --- a/addons/rose/addon/components/rose/message/link.js +++ /dev/null @@ -1,7 +0,0 @@ -import Component from '@ember/component'; -import layout from '../../../templates/components/rose/message/link'; - -export default Component.extend({ - layout, - tagName: '', -}); diff --git a/addons/rose/addon/styles/rose/_index.scss b/addons/rose/addon/styles/rose/_index.scss index b812b9f98..b3ddfcdd1 100644 --- a/addons/rose/addon/styles/rose/_index.scss +++ b/addons/rose/addon/styles/rose/_index.scss @@ -1,5 +1,4 @@ @import 'reset'; @import 'variables'; @import 'typography'; -@import 'icon'; @import 'components'; diff --git a/addons/rose/addon/styles/rose/_icon.scss b/addons/rose/addon/styles/rose/components/_icon.scss similarity index 89% rename from addons/rose/addon/styles/rose/_icon.scss rename to addons/rose/addon/styles/rose/components/_icon.scss index 08d4c6438..451af3823 100644 --- a/addons/rose/addon/styles/rose/_icon.scss +++ b/addons/rose/addon/styles/rose/components/_icon.scss @@ -1,4 +1,4 @@ -@use 'variables/sizing'; +@use '../variables/sizing'; .rose-icon { --size: #{sizing.rems(l)}; diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss index 1c86e7a83..948a7b735 100644 --- a/addons/rose/addon/styles/rose/components/_index.scss +++ b/addons/rose/addon/styles/rose/components/_index.scss @@ -2,6 +2,7 @@ @import 'form'; @import 'header'; @import 'layout'; +@import 'icon'; @import 'notification'; @import 'card'; @import 'cards'; diff --git a/addons/rose/addon/styles/rose/components/_message.scss b/addons/rose/addon/styles/rose/components/_message.scss index c00e2e1fd..5a3651b99 100644 --- a/addons/rose/addon/styles/rose/components/_message.scss +++ b/addons/rose/addon/styles/rose/components/_message.scss @@ -3,81 +3,76 @@ @use '../variables/media'; .rose-message { - @include type.type(s, normal); - display: grid; - grid-template-areas: - 'title title title' - 'description description description' - 'left-link . right-link'; - grid-auto-columns: auto 1fr; - color: var(--ui-gray); - width: sizing.rems(m) * 16; //16 rems/320 px + --message-color: var(--ui-gray-starker-1); + display: flex; + flex-direction: column; + color: var(--message-color); + width: sizing.rems(l) * 15; //16 rems/320 px + margin-bottom: sizing.rems(l); - .rose-message-title { - @include type.type(m, semibold); - grid-area: title; + // Icons always need tweaking + .rose-icon { + --size: #{sizing.rems(m)}; + > svg { + vertical-align: text-bottom; + } + } - .rose-message-title-text { - display: inline-block; + .rose-message-header { + display: grid; + grid-template-areas: + 'icon title' + 'icon subtitle'; + grid-auto-columns: auto 1fr; + margin-bottom: sizing.rems(m); + + .rose-icon { + // targeting 40px + --size: #{sizing.rems(xl) + sizing.rems(xxs)}; + grid-area: icon; + margin-right: sizing.rems(s); } - .rose-message-icon { - display: inline; - svg { - vertical-align: top; - width: sizing.rems(m) * 2; // 40px - } + .rose-message-title { + @include type.type(l, semibold); + grid-area: title; + margin: 0; } .rose-message-subtitle { - @include type.type(xs, normal); - $lineHeight: 16 / 15; - line-height: $lineHeight; // 16px - vertical-align: bottom; + @include type.type(s, normal); + grid-area: subtitle; + margin: 0; } } - .rose-message-description { - grid-area: description; - margin: sizing.rems(xs) 0; - } - - .rose-message-link { - @include type.type(xs, semibold); - text-decoration: none; - cursor: pointer; - --color: var(--ui-gray); - color: var(--color); - margin: sizing.rems(xs) 0; - - svg { - vertical-align: top; - width: sizing.rems(m); - height: sizing.rems(m); - } - - &.rose-message-link-left-align { - grid-area: left-link; - --color: var(--action); - } - - &.rose-message-link-right-align { - grid-area: right-link; - } - - &:hover { - --color: var(--action); - } - } -} - -@media (max-width: media.width(small)) { - .rose-message { + .rose-message-body { + display: grid; grid-template-areas: - 'title' - 'description' - 'right-link' - 'left-link'; - grid-auto-columns: auto 1fr; + 'description description' + 'left-link right-link'; + + .rose-message-description { + grid-area: description; + margin-bottom: sizing.rems(l); + } + + .rose-message-link { + @include type.type(s); + grid-area: left-link; + color: var(--action); + + text-decoration: none; + + & + .rose-message-link { + grid-area: right-link; + text-align: right; + color: var(--message-color); + } + + &:hover { + text-decoration: underline; + } + } } } diff --git a/addons/rose/addon/styles/rose/components/layout/_global.scss b/addons/rose/addon/styles/rose/components/layout/_global.scss index e6676017e..2100c70eb 100644 --- a/addons/rose/addon/styles/rose/components/layout/_global.scss +++ b/addons/rose/addon/styles/rose/components/layout/_global.scss @@ -23,7 +23,6 @@ grid-area: navigation; border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1); } - } @media (max-width: media.width(small)) { diff --git a/addons/rose/addon/templates/components/rose/message.hbs b/addons/rose/addon/templates/components/rose/message.hbs index d15efb596..1dd3157f0 100644 --- a/addons/rose/addon/templates/components/rose/message.hbs +++ b/addons/rose/addon/templates/components/rose/message.hbs @@ -1,25 +1,27 @@ -
+
+ {{#if @title}} -
+
{{#if @icon}} -
{{inline-svg @icon}}
+ {{/if}} -
- {{@title}} +

{{@title}}

- {{#if @subtitle}} -
{{@subtitle}}
- {{/if}} -
-
+ {{#if @subtitle}} +

{{@subtitle}}

+ {{/if}} + {{/if}} - {{#if @description}} -
{{@description}}
- {{/if}} +
+ {{yield (hash + description=(component "rose/anonymous" tagName="p" class="rose-message-description") + link=(component "link-to" class="rose-message-link") + )}} +
- {{yield (hash - link=(component 'rose/message/link') - )}} -
+ diff --git a/addons/rose/addon/templates/components/rose/message/link.hbs b/addons/rose/addon/templates/components/rose/message/link.hbs deleted file mode 100644 index 95337aaf2..000000000 --- a/addons/rose/addon/templates/components/rose/message/link.hbs +++ /dev/null @@ -1,13 +0,0 @@ -{{#if @leftAlign}} - - {{yield}} - -{{else}} - - {{yield}} - -{{/if}} diff --git a/addons/rose/app/components/rose/anonymous.js b/addons/rose/app/components/rose/anonymous.js index 56df9e7f7..5117bad96 100644 --- a/addons/rose/app/components/rose/anonymous.js +++ b/addons/rose/app/components/rose/anonymous.js @@ -1 +1 @@ -export { default } from 'rose/components/rose/anonymous'; \ No newline at end of file +export { default } from 'rose/components/rose/anonymous'; diff --git a/addons/rose/app/components/rose/message/link.js b/addons/rose/app/components/rose/message/link.js deleted file mode 100644 index fe210dd3a..000000000 --- a/addons/rose/app/components/rose/message/link.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'rose/components/rose/message/link'; diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs index bbcb98065..81a536a29 100644 --- a/addons/rose/tests/dummy/app/templates/index.hbs +++ b/addons/rose/tests/dummy/app/templates/index.hbs @@ -1,22 +1,46 @@ - - {{inline-svg "chevron-left"}} Go back + + + You must be granted permissions to view this data. + Ask your administrator if you think you should have access. + + + + Go back + Need help? -
- - {{inline-svg "chevron-left"}} Go back - Need help? - -
- - {{inline-svg "refresh-default"}} Try again - Need help? - -
- -
- - Add a namespace + + + Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below. + + + + Go back + + Need help? + + + + + We ran into a problem and could not continue. You can ask your administrator or try again later. + + + + Try Again + + Need help? + + + + + Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration. + + + + + + Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities. + + Add a namespace -
diff --git a/addons/rose/tests/integration/components/rose/anonymous-test.js b/addons/rose/tests/integration/components/rose/anonymous-test.js index 01e171a52..d5b65eac0 100644 --- a/addons/rose/tests/integration/components/rose/anonymous-test.js +++ b/addons/rose/tests/integration/components/rose/anonymous-test.js @@ -3,10 +3,10 @@ import { setupRenderingTest } from 'ember-qunit'; import { render, find } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; -module('Integration | Component | rose/anonymous', function(hooks) { +module('Integration | Component | rose/anonymous', function (hooks) { setupRenderingTest(hooks); - test('it renders', async function(assert) { + test('it renders', async function (assert) { await render(hbs` {{#rose/anonymous tagName='main'}} template block text diff --git a/addons/rose/tests/integration/components/rose/message-test.js b/addons/rose/tests/integration/components/rose/message-test.js index 497974080..e14d74f2e 100644 --- a/addons/rose/tests/integration/components/rose/message-test.js +++ b/addons/rose/tests/integration/components/rose/message-test.js @@ -1,44 +1,26 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render, find, findAll } from '@ember/test-helpers'; +import { render, find } from '@ember/test-helpers'; import hbs from 'htmlbars-inline-precompile'; module('Integration | Component | rose/message', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - await render(hbs``); + assert.expect(5); + await render(hbs` + + Description + Link + + `); assert.ok(find('.rose-message')); - }); - - test('it renders with attributes', async function (assert) { - await render(hbs``); - assert.ok(find('#message')); - }); - - test('it renders with title', async function (assert) { - await render(hbs``); assert.equal(find('.rose-message-title').textContent.trim(), 'Title'); - }); - - test('it renders with subtitle', async function (assert) { - await render(hbs``); assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Subtitle'); - }); - - test('it renders with description', async function (assert) { - await render(hbs``); assert.equal( find('.rose-message-description').textContent.trim(), 'Description' ); - }); - - test('it renders with link', async function (assert) { - await render(hbs` - - - `); - assert.equal(findAll('.rose-message-link').length, 2); + assert.equal(find('.rose-message-link').textContent.trim(), 'Link'); }); }); diff --git a/addons/rose/tests/integration/components/rose/message/link-test.js b/addons/rose/tests/integration/components/rose/message/link-test.js deleted file mode 100644 index b92f3004a..000000000 --- a/addons/rose/tests/integration/components/rose/message/link-test.js +++ /dev/null @@ -1,28 +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/message/link', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - assert.ok(find('.rose-message-link')); - assert.ok(find('.rose-message-link-right-align')); - }); - - test('it renders with content', async function (assert) { - await render(hbs`Link content`); - assert.equal(find('.rose-message-link').textContent.trim(), 'Link content'); - }); - - test('it renders left aligned', async function (assert) { - this.set('leftAlign', true); - await render(hbs``); - assert.ok(find('.rose-message-link-left-align')); - - this.set('leftAlign', false); - assert.notOk(find('.rose-message-link-left-align')); - }); -});