chore: 🤖 Add new message component to rose addon

Message component provides ability to show users a message with title, subtitle, icon, description, and navigation links.
2020-06-10 21:19:05 -04:00
1 parent 357fde8288
commit d92ec3bcaf
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/message';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
@@ -0,0 +1,65 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean, select } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Message" component="Message" />
+
+# 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>
+```
+
+<Preview>
+  <Story name="Advanced">{{
+    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>
+    `,
+    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.'),
+      icon: select(
+        'icon',
+        {
+          'alert-circle-outline': 'alert-circle-outline',
+          'help-circle-outline': 'help-circle-outline',
+          'disabled': 'disabled',
+        },
+        'disabled'
+      ),
+    },
+  }}</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." />
+```
+<Preview>
+  <Story name="Basic">{{
+    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." />
+    `,
+    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.'),
+    },
+  }}</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>
+```
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/message/link';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
@@ -9,3 +9,4 @@
@import 'separator';
@import 'nav';
@import 'table';
+@import 'message';
@@ -0,0 +1,83 @@
+@use '../utilities/type';
+@use '../variables/sizing';
+@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
+
+  .rose-message-title {
+    @include type.type(m, semibold);
+    grid-area: title;
+
+    .rose-message-title-text {
+      display: inline-block;
+    }
+
+    .rose-message-icon {
+      display: inline;
+      svg {
+        vertical-align: top;
+        width: sizing.rems(m) * 2; // 40px
+      }
+    }
+
+    .rose-message-subtitle {
+      @include type.type(xs, normal);
+      $lineHeight: 16 / 15;
+      line-height: $lineHeight; // 16px
+      vertical-align: bottom;
+    }
+  }
+
+  .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 {
+    grid-template-areas:
+      'title'
+      'description'
+      'right-link'
+      'left-link';
+    grid-auto-columns: auto 1fr;
+  }
+}
@@ -0,0 +1,25 @@
+<div ...attributes class="rose-message">
+  {{#if @title}}
+    <div class="rose-message-title">
+      {{#if @icon}}
+        <div class="rose-message-icon">{{inline-svg @icon}}</div>
+      {{/if}}
+
+      <div class="rose-message-title-text">
+        {{@title}}
+
+        {{#if @subtitle}}
+          <div class="rose-message-subtitle">{{@subtitle}}</div>
+        {{/if}}
+      </div>
+    </div>
+  {{/if}}
+
+  {{#if @description}}
+    <div class="rose-message-description">{{@description}}</div>
+  {{/if}}
+
+  {{yield (hash
+    link=(component 'rose/message/link')
+  )}}
+</div>
@@ -0,0 +1,13 @@
+{{#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}}
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/message';
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/message/link';
@@ -1,7 +1,22 @@
-<Rose::Nav::Breadcrumbs as |breadcrumbs|>
-  <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
-  <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
-  <breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
-  <breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
-  <breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
-</Rose::Nav::Breadcrumbs>
+<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>
+<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>
+<br />
@@ -229,5 +229,13 @@
        </footer.row>
      </table.footer>
    </Rose::Table>
+
+    <Rose::Nav::Breadcrumbs as |breadcrumbs|>
+      <breadcrumbs.link @route="about">Level 1</breadcrumbs.link>
+      <breadcrumbs.link @route="index">Level 2</breadcrumbs.link>
+      <breadcrumbs.link @route="about">Level 3</breadcrumbs.link>
+      <breadcrumbs.link @route="about">Level 4</breadcrumbs.link>
+      <breadcrumbs.link @route="about">Level 5</breadcrumbs.link>
+    </Rose::Nav::Breadcrumbs>
  </layout.body>
 </Rose::Layout::Global>
@@ -0,0 +1,44 @@
+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/message', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<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);
+  });
+});
@@ -0,0 +1,28 @@
+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'));
+  });
+});
				`@@ -0,0 +1 @@`
				`export { default } from 'rose/components/rose/message';`