chore: 🤖 Add page header component to rose addon

Page header component comprises of a simple 1x1 grid component

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

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>

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;

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

addons/rose/addon/templates/components/rose/layout/page-header.hbs

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

addons/rose/app/components/rose/layout/page-header.js

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

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