refactor: 💡 massage message component and simplify

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,
 });

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
-<Rose::Message @title="You are not authorized" @subtitle="Error 403" @description="You must be granted permissions to view this data. Ask your administrator if you think you should have access." @icon="disabled" as |message|>
-  <message.link @route="index" @leftAlign={{true}}> {{inline-svg "chevron-left"}} Go back</message.link>
-  <message.link @route="index">Need help?</message.link>
-</Rose::Message>
-```
+A message component containing a title, description, and nav links.
+Title can be configured with optional icon and subtitle.
 
 <Preview>
-  <Story name="Advanced">{{
+  <Story name="Advanced Message" height="12rem">{{
     template: hbs`
-    <Rose::Message @title={{title}} @subtitle={{subtitle}} @description={{description}} @icon={{icon}} as |message|>
-      <message.link @route="index" @leftAlign={{true}}>{{inline-svg "chevron-left"}} Go back</message.link>
-      <message.link @route="index">Need help?</message.link>
+    <Rose::Message @title={{title}} @subtitle={{subtitle}} @icon={{icon}} as |message|>
+      <message.description>
+        {{description}}
+      </message.description>
+      <message.link @route="index">
+        <Rose::Icon @name="chevron-left" />
+        Go back
+      </message.link>
+      <message.link @route="index">
+        Need help?
+      </message.link>
     </Rose::Message>
     `,
     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'
       ),
     },
   }}</Story>
 </Preview>
 
-Message can be configured without icons and navigation links.
 ```html
-<Rose::Message @title="No logs received yet" @description="Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration." />
+<Rose::Message @title="Page not found" @subtitle="Error 404" @icon="disabled" as |message|>
+  <message.description>
+      You must be granted permissions to view this data. Ask your administrator
+      if you think you should have access.
+  </message.description>
+  <message.link @route="index">
+    <Rose::Icon @name="chevron-left" />
+    Go back
+  </message.link>
+  <message.link @route="index">Need help?</message.link>
+</Rose::Message>
 ```
+
+Message can be configured without icons and navigation links.
+
 <Preview>
-  <Story name="Basic">{{
+  <Story name="Basic Message" height="8rem">{{
     template: hbs`
-    <Rose::Message @title="No logs received yet" @description="Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration." />
+    <Rose::Message @title="No logs received yet" as |message|>
+      <message.description>
+        {{description}}
+      </message.description>
+    </Rose::Message>
     `,
     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.'),
     },
   }}</Story>
 </Preview>
 
-Message can be configured with a single left aligned link.
 ```html
-<Rose::Message @title="Welcome to Namespaces" @description="Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities." as |message|>
-  <message.link @route="index" @leftAlign={{true}}>Add a namespace</message.link>
+<Rose::Message @title="No logs received yet" as |message|>
+  <message.description>
+    Description.
+  </message.description>
 </Rose::Message>
 ```

addons/rose/addon/components/rose/message/link.js

@@ -1,7 +0,0 @@
-import Component from '@ember/component';
-import layout from '../../../templates/components/rose/message/link';
-
-export default Component.extend({
-  layout,
-  tagName: '',
-});

addons/rose/addon/styles/rose/_index.scss

@@ -1,5 +1,4 @@
 @import 'reset';
 @import 'variables';
 @import 'typography';
-@import 'icon';
 @import 'components';

addons/rose/addon/styles/rose/components/_icon.scss

@@ -1,4 +1,4 @@
-@use 'variables/sizing';
+@use '../variables/sizing';
 
 .rose-icon {
   --size: #{sizing.rems(l)};

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';

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;
+      }
+    }
   }
 }

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)) {

addons/rose/addon/templates/components/rose/message.hbs

@@ -1,25 +1,27 @@
-<div ...attributes class="rose-message">
+<article
+  ...attributes
+  class="rose-message"
+>
+
   {{#if @title}}
-    <div class="rose-message-title">
+    <header class="rose-message-header">
       {{#if @icon}}
-        <div class="rose-message-icon">{{inline-svg @icon}}</div>
+        <Rose::Icon @name={{@icon}} />
       {{/if}}
 
-      <div class="rose-message-title-text">
-        {{@title}}
+      <h2 class="rose-message-title">{{@title}}</h2>
 
-        {{#if @subtitle}}
-          <div class="rose-message-subtitle">{{@subtitle}}</div>
-        {{/if}}
-      </div>
-    </div>
+      {{#if @subtitle}}
+        <h3 class="rose-message-subtitle">{{@subtitle}}</h3>
+      {{/if}}
+    </header>
   {{/if}}
 
-  {{#if @description}}
-    <div class="rose-message-description">{{@description}}</div>
-  {{/if}}
+  <section class="rose-message-body">
+    {{yield (hash
+      description=(component "rose/anonymous" tagName="p" class="rose-message-description")
+      link=(component "link-to" class="rose-message-link")
+    )}}
+  </section>
 
-  {{yield (hash
-    link=(component 'rose/message/link')
-  )}}
-</div>
+</article>

addons/rose/addon/templates/components/rose/message/link.hbs

@@ -1,13 +0,0 @@
-{{#if @leftAlign}}
-  <LinkTo title={{@title}} @route={{@route}} @model={{@model}}
-    class='rose-message-link rose-message-link-left-align'
-  >
-    {{yield}}
-  </LinkTo>
-{{else}}
-  <LinkTo title={{@title}} @route={{@route}} @model={{@model}}
-    class='rose-message-link rose-message-link-right-align'
-  >
-    {{yield}}
-  </LinkTo>
-{{/if}}

addons/rose/app/components/rose/anonymous.js

@@ -1 +1 @@
-export { default } from 'rose/components/rose/anonymous';
+export { default } from 'rose/components/rose/anonymous';

addons/rose/app/components/rose/message/link.js

@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/message/link';

addons/rose/tests/dummy/app/templates/index.hbs

@@ -1,22 +1,46 @@
-<Rose::Message @title="You are not authorized" @subtitle="Error 403" @description="You must be granted permissions to view this data. Ask your administrator if you think you should have access." @icon="disabled" as |message|>
-  <message.link @route="index" @leftAlign={{true}}> {{inline-svg "chevron-left"}} Go back</message.link>
+<Rose::Message @title="You are not authorized" @subtitle="Error 403" @icon="disabled" as |message|>
+  <message.description>
+    You must be granted permissions to view this data.
+    Ask your administrator if you think you should have access.
+  </message.description>
+  <message.link @route="index">
+    <Rose::Icon @name="chevron-left" />
+    Go back
+  </message.link>
   <message.link @route="index">Need help?</message.link>
 </Rose::Message>
-<br />
-<Rose::Message @title="Page Not Found" @subtitle="Error 404" @description="Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below." @icon="help-circle-outline" as |message|>
-  <message.link @route="index" @leftAlign={{true}}> {{inline-svg "chevron-left"}} Go back</message.link>
-  <message.link @route="index">Need help?</message.link>
-</Rose::Message>
-<br />
-<Rose::Message @title="Something went wrong" @subtitle="Error 500" @description="We ran into a problem and could not continue. You can ask your administrator or try again later." @icon="alert-circle-outline" as |message|>
-  <message.link @route="index" @leftAlign={{true}}> {{inline-svg "refresh-default"}} Try again</message.link>
-  <message.link @route="index">Need help?</message.link>
-</Rose::Message>
-<br />
 
-<Rose::Message @title="No logs received yet" @description="Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration." />
-<br />
-<Rose::Message @title="Welcome to Namespaces" @description="Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities." as |message|>
-  <message.link @route="index" @leftAlign={{true}}>Add a namespace</message.link>
+<Rose::Message @title="Page Not Found" @subtitle="Error 404" @icon="help-circle-outline" as |message|>
+  <message.description>
+    Sorry, we couldn't find the page you were looking for. You can go back or to one of the links below.
+  </message.description>
+  <message.link @route="index">
+    <Rose::Icon @name="chevron-left" />
+    Go back
+  </message.link>
+  <message.link @route="index">Need help?</message.link>
+</Rose::Message>
+
+<Rose::Message @title="Something went wrong" @subtitle="Error 500" @icon="alert-circle-outline" as |message|>
+  <message.description>
+    We ran into a problem and could not continue. You can ask your administrator or try again later.
+  </message.description>
+  <message.link @route="index">
+    <Rose::Icon @name="refresh-default" />
+    Try Again
+  </message.link>
+  <message.link @route="index">Need help?</message.link>
+</Rose::Message>
+
+<Rose::Message @title="No logs received yet" as |message|>
+  <message.description>
+    Your logs will appear here when we start receiving them. If your server is currently outputting logs, check your configuration.
+  </message.description>
+</Rose::Message>
+
+<Rose::Message @title="Welcome to Namespaces" as |message|>
+  <message.description>
+    Namespaces allow you to create distinct areas with their own separate policies, mounts, tokens, and identity entities.
+  </message.description>
+  <message.link @route="index">Add a namespace</message.link>
 </Rose::Message>
-<br />

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

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`<Rose::Message />`);
+    assert.expect(5);
+    await render(hbs`
+      <Rose::Message @title="Title" @subtitle="Subtitle" as |message|>
+        <message.description>Description</message.description>
+        <message.link @route="index">Link</message.link>
+      </Rose::Message>
+    `);
     assert.ok(find('.rose-message'));
-  });
-
-  test('it renders with attributes', async function (assert) {
-    await render(hbs`<Rose::Message id="message"/>`);
-    assert.ok(find('#message'));
-  });
-
-  test('it renders with title', async function (assert) {
-    await render(hbs`<Rose::Message @title="Title"/>`);
     assert.equal(find('.rose-message-title').textContent.trim(), 'Title');
-  });
-
-  test('it renders with subtitle', async function (assert) {
-    await render(hbs`<Rose::Message @title="title" @subtitle="Subtitle"/>`);
     assert.equal(find('.rose-message-subtitle').textContent.trim(), 'Subtitle');
-  });
-
-  test('it renders with description', async function (assert) {
-    await render(hbs`<Rose::Message @description="Description"/>`);
     assert.equal(
       find('.rose-message-description').textContent.trim(),
       'Description'
     );
-  });
-
-  test('it renders with link', async function (assert) {
-    await render(hbs`<Rose::Message as |message|>
-      <message.link />
-      <message.link />
-    </Rose::Message>`);
-    assert.equal(findAll('.rose-message-link').length, 2);
+    assert.equal(find('.rose-message-link').textContent.trim(), 'Link');
   });
 });

addons/rose/tests/integration/components/rose/message/link-test.js

@@ -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`<Rose::Message::Link />`);
-    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`<Rose::Message::Link>Link content</Rose::Message::Link>`);
-    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`<Rose::Message::Link @leftAlign={{this.leftAlign}} />`);
-    assert.ok(find('.rose-message-link-left-align'));
-
-    this.set('leftAlign', false);
-    assert.notOk(find('.rose-message-link-left-align'));
-  });
-});