feat: Add footer section to global layout in addons/rose

addons/rose/addon/components/rose/layout/global/index.hbs

@@ -2,5 +2,6 @@
   {{yield (hash
     header=(component "rose/anonymous" tagName="header" class="rose-layout-global-header")
     body=(component "rose/anonymous" class="rose-layout-global-body")
+    footer=(component "rose/anonymous" class="rose-layout-global-footer")
   )}}
 </section>

addons/rose/addon/components/rose/layout/global/index.stories.mdx

@@ -1,29 +1,29 @@
 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|Layout|Global" component="Global" />
 
 # Layout|Global
 
-A top-level layout/positioning component that allows two distinct sections to
-be configured: header and body.
+A top-level layout/positioning component that allows three distinct sections to
+be configured: header, body, and footer.
 
-```htmlbars
+```html
 <Rose::Layout::Global as |layout|>
   <layout.header />
   <layout.body />
+  <layout.footer />
 </Rose::Layout::Global>
 ```
 
 <Preview>
   <Story name="Global">{{
     template: hbs`
-    <Rose::Layout::Global as |layout|>
-      <layout.header style="background: var(--brand-gray-5);">Header</layout.header>
-      <layout.body style="background: var(--brand-gray-7);">Body</layout.body>
-    </Rose::Layout::Global>
+      <Rose::Layout::Global as |layout|>
+        <layout.header style="background: var(--brand-gray-5);">Header</layout.header>
+        <layout.body style="background: var(--brand-gray-7);">Body</layout.body>
+        <layout.footer style="background: var(--brand-gray-5);">Footer</layout.footer>
+      </Rose::Layout::Global>
     `,
   }}</Story>
 </Preview>

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

@@ -30,4 +30,11 @@ module('Integration | Component | rose/layout/global', function (hooks) {
     </Rose::Layout::Global>`);
     assert.ok(find('.rose-layout-global-body'));
   });
+
+  test('it renders with footer', async function (assert) {
+    await render(hbs`<Rose::Layout::Global as |layout|>
+      <layout.footer />
+    </Rose::Layout::Global>`);
+    assert.ok(find('.rose-layout-global-footer'));
+  });
 });