Merge pull request #51 from hashicorp/ICU-303-centered-layout

New centered layout rose component

addons/rose/addon/components/rose/layout/centered.js

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

addons/rose/addon/components/rose/layout/centered.stories.mdx

@@ -0,0 +1,25 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+
+<Meta title="Rose|Layout|Centered" component="Centered" />
+
+# Layout|Centered
+
+A left and right centered layout/positioning component.
+
+```htmlbars
+<Rose::Layout::Centered>
+  Centered
+</Rose::Layout::Centere>
+```
+
+<Preview>
+  <Story name="Centered">{{
+    template: hbs`
+    <Rose::Layout::Centered style="background: var(--brand-gray-7);">
+      Centered
+    </Rose::Layout::Centered>
+    `,
+  }}</Story>
+</Preview>

addons/rose/addon/styles/rose/components/layout/_centered.scss

@@ -0,0 +1,6 @@
+@use '../../variables/sizing';
+
+.rose-layout-centered {
+  display: flex;
+  justify-content: center;
+}

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

@@ -1,2 +1,3 @@
 @import 'global';
 @import 'page';
+@import 'centered';

addons/rose/addon/templates/components/rose/layout/centered.hbs

@@ -0,0 +1,3 @@
+<section ...attributes class="rose-layout-centered">
+  {{yield}}
+</section>

addons/rose/app/components/rose/layout/centered.js

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

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

@@ -1,46 +1,8 @@
-<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>
-
-<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>
+<Rose::Layout::Centered>
+  <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>
+</Rose::Layout::Centered>

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

@@ -237,5 +237,52 @@
       <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" @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>
+
+    <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>
   </layout.body>
 </Rose::Layout::Global>

addons/rose/tests/integration/components/rose/layout/centered-test.js

@@ -0,0 +1,30 @@
+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/layout/centered', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Layout::Centered />`);
+    assert.ok(find('section'));
+    assert.ok(find('.rose-layout-centered'));
+    assert.notOk(find('.rose-layout-centered-body'));
+  });
+
+  test('it renders with attributes', async function (assert) {
+    await render(hbs`<Rose::Layout::Centered id="layout"/>`);
+    assert.ok(find('#layout'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Layout::Centered>
+      Layout content
+    </Rose::Layout::Centered>`);
+    assert.equal(
+      find('.rose-layout-centered').textContent.trim(),
+      'Layout content'
+    );
+  });
+});