From 33d85940bf4af15c6a6aec1caa9f300fa249483e Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Tue, 2 Jun 2020 15:17:47 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20page=20header=20c?=
 =?UTF-8?q?omponent=20to=20rose=20addon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Page header component comprises of a simple 1x1 grid component
---
 .../components/rose/layout/page-header.js     |  7 ++++++
 .../rose/layout/page-header.stories.mdx       | 23 +++++++++++++++++++
 .../styles/rose/components/layout/_index.scss |  1 +
 .../rose/components/layout/_page-header.scss  | 19 +++++++++++++++
 .../components/rose/layout/page-header.hbs    |  3 +++
 .../app/components/rose/layout/page-header.js |  1 +
 .../rose/layout/page-header-test.js           | 23 +++++++++++++++++++
 7 files changed, 77 insertions(+)
 create mode 100644 addons/rose/addon/components/rose/layout/page-header.js
 create mode 100644 addons/rose/addon/components/rose/layout/page-header.stories.mdx
 create mode 100644 addons/rose/addon/styles/rose/components/layout/_page-header.scss
 create mode 100644 addons/rose/addon/templates/components/rose/layout/page-header.hbs
 create mode 100644 addons/rose/app/components/rose/layout/page-header.js
 create mode 100644 addons/rose/tests/integration/components/rose/layout/page-header-test.js

diff --git a/addons/rose/addon/components/rose/layout/page-header.js b/addons/rose/addon/components/rose/layout/page-header.js
new file mode 100644
index 000000000..e7ed1d390
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page-header.js
@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/layout/page-header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});
diff --git a/addons/rose/addon/components/rose/layout/page-header.stories.mdx b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
new file mode 100644
index 000000000..c771ba93a
--- /dev/null
+++ b/addons/rose/addon/components/rose/layout/page-header.stories.mdx
@@ -0,0 +1,23 @@
+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" component="PageHeader" />
+
+# Layout|Page Header
+
+A page layout/positioning component that configures a single column grid for use as a header.
+
+```htmlbars
+<Rose::Layout::PageHeader />
+```
+
+<Preview>
+  <Story name="Page Header">{{
+    template: hbs`
+    <Rose::Layout::PageHeader style="background: var(--brand-gray-5); padding: 1rem;">
+      Page Header
+    </Rose::Layout::PageHeader>
+    `,
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 33944c8fe..40c35ee12 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -2,6 +2,7 @@
 @use '../../variables/media';
 
 @import 'main';
+@import 'page-header';
 
 .rose-layout-page {
   display: grid;
diff --git a/addons/rose/addon/styles/rose/components/layout/_page-header.scss b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
new file mode 100644
index 000000000..0fb1fe8eb
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/layout/_page-header.scss
@@ -0,0 +1,19 @@
+@use '../../variables/media';
+
+.rose-layout-page-header {
+  display: grid;
+  grid-template-areas:
+    'title title utilities';
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto 1fr;
+}
+
+@media (max-width: media.width(small)) {
+  .rose-layout-page {
+    grid-template-columns: 1fr;
+    grid-template-rows: 0.1fr auto 1fr;
+    grid-template-areas:
+      'title'
+      'utilities';
+  }
+}
diff --git a/addons/rose/addon/templates/components/rose/layout/page-header.hbs b/addons/rose/addon/templates/components/rose/layout/page-header.hbs
new file mode 100644
index 000000000..090d7b83d
--- /dev/null
+++ b/addons/rose/addon/templates/components/rose/layout/page-header.hbs
@@ -0,0 +1,3 @@
+<div ...attributes class="rose-layout-page-header">
+  {{yield}}
+</div>
diff --git a/addons/rose/app/components/rose/layout/page-header.js b/addons/rose/app/components/rose/layout/page-header.js
new file mode 100644
index 000000000..0ee612631
--- /dev/null
+++ b/addons/rose/app/components/rose/layout/page-header.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/layout/page-header';
\ No newline at end of file
diff --git a/addons/rose/tests/integration/components/rose/layout/page-header-test.js b/addons/rose/tests/integration/components/rose/layout/page-header-test.js
new file mode 100644
index 000000000..a5f0be46b
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/layout/page-header-test.js
@@ -0,0 +1,23 @@
+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/page-header', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    await render(hbs`<Rose::Layout::PageHeader />`);
+    assert.ok(find('.rose-layout-page-header'));
+  });
+
+  test('it renders with html attributes', async function(assert) {
+    await render(hbs`<Rose::Layout::PageHeader id="page-header"/>`);
+    assert.ok(find('#page-header'));
+  });
+
+  test('it renders with content', async function(assert) {
+    await render(hbs`<Rose::Layout::PageHeader>Page header content</Rose::Layout::PageHeader>`);
+    assert.equal(find('.rose-layout-page-header').textContent.trim(), 'Page header content');
+  });
+});