From ab083f38f96096c98f88acf0a7f82ff01a5768bf Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 11 Jun 2020 21:03:49 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20centered=20layout?=
 =?UTF-8?q?=20component=20to=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../addon/components/rose/layout/centered.js  |  7 +++
 .../rose/layout/centered.stories.mdx          | 25 +++++++++
 .../rose/components/layout/_centered.scss     | 11 ++++
 .../styles/rose/components/layout/_index.scss |  1 +
 .../components/rose/layout/centered.hbs       |  5 ++
 .../app/components/rose/layout/centered.js    |  1 +
 .../rose/tests/dummy/app/templates/index.hbs  | 56 ++++---------------
 .../tests/dummy/app/templates/playground.hbs  | 47 ++++++++++++++++
 .../components/rose/layout/centered-test.js   | 29 ++++++++++
 9 files changed, 137 insertions(+), 45 deletions(-)
 create mode 100644 addons/rose/addon/components/rose/layout/centered.js
 create mode 100644 addons/rose/addon/components/rose/layout/centered.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/layout/_centered.scss
 create mode 100644 addons/rose/addon/templates/components/rose/layout/centered.hbs
 create mode 100644 addons/rose/app/components/rose/layout/centered.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/centered-test.js

diff --git a/addons/rose/addon/components/rose/layout/centered.js b/addons/rose/addon/components/rose/layout/centered.js
new file mode 100644
index 000000000..ddebf0b09
--- /dev/null
+++ b/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: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/centered.stories.mdx b/addons/rose/addon/components/rose/layout/centered.stories.mdx
new file mode 100644
index 000000000..0d7a95b61
--- /dev/null
+++ b/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 that allows a boby section to be configured
+
+```htmlbars
+<Rose::Layout::Centered as |layout|>
+  <layout.body />
+</Rose::Layout::Centered>
+```
+
+<Preview>
+  <Story name="Centered">{{
+    template: hbs`
+    <Rose::Layout::Centered as |layout|>
+      <layout.body style="background: var(--brand-gray-7);">Centered Body</layout.body>
+    </Rose::Layout::Centered>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/layout/_centered.scss b/addons/rose/addon/styles/rose/components/layout/_centered.scss
new file mode 100644
index 000000000..ea8496fa9
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/_centered.scss
@@ -0,0 +1,11 @@
+@use '../../variables/sizing';
+
+.rose-layout-centered {
+  display: flex;
+  flex-direction: column;
+
+  .rose-layout-centered-body {
+    margin: auto;
+    padding: sizing.rems(l) + sizing.rems(xxs) 0; //35px
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 02f7021b2..1ed6d8338 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,2 +1,3 @@
 @import 'global';
 @import 'page';
+@import 'centered';
diff --git a/addons/rose/addon/templates/components/rose/layout/centered.hbs b/addons/rose/addon/templates/components/rose/layout/centered.hbs
new file mode 100644
index 000000000..f3b2a54fb
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/centered.hbs
@@ -0,0 +1,5 @@
+<div ...attributes class="rose-layout-centered">
+  {{yield (hash
+    body=(component "rose/anonymous" tagName="section" class="rose-layout-centered-body")
+  )}}
+</div>
diff --git a/addons/rose/app/components/rose/layout/centered.js b/addons/rose/app/components/rose/layout/centered.js
new file mode 100644
index 000000000..ff3274fee
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/centered.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/centered';
diff --git a/addons/rose/tests/dummy/app/templates/index.hbs b/addons/rose/tests/dummy/app/templates/index.hbs
index 81a536a29..b6871d7a2 100644
--- a/addons/rose/tests/dummy/app/templates/index.hbs
+++ b/addons/rose/tests/dummy/app/templates/index.hbs
@@ -1,46 +1,12 @@
-<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::Layout::Centered />
 
-<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 as |layout|>
+  <layout.body>
+    <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::Centered>
diff --git a/addons/rose/tests/dummy/app/templates/playground.hbs b/addons/rose/tests/dummy/app/templates/playground.hbs
index 00b1c94cf..3d4559c6b 100644
--- a/addons/rose/tests/dummy/app/templates/playground.hbs
+++ b/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>
diff --git a/addons/rose/tests/integration/components/rose/layout/centered-test.js b/addons/rose/tests/integration/components/rose/layout/centered-test.js
new file mode 100644
index 000000000..6e74193fb
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/centered-test.js
@@ -0,0 +1,29 @@
+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('.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 as |layout|>
+      <layout.body>Layout content</layout.body>
+    </Rose::Layout::Centered>`);
+    assert.equal(
+      find('.rose-layout-centered').textContent.trim(),
+      'Layout content'
+    );
+  });
+});