From 8bf3c295a6381aadd43afc3fe3e1ca0ca26ca114 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 30 Sep 2020 14:12:34 -0400
Subject: [PATCH] feat: Add footer section to global layout in addons/rose

---
 .../components/rose/layout/global/index.hbs    |  1 +
 .../rose/layout/global/index.stories.mdx       | 18 +++++++++---------
 .../components/rose/layout/global-test.js      |  7 +++++++
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/addons/rose/addon/components/rose/layout/global/index.hbs b/addons/rose/addon/components/rose/layout/global/index.hbs
index bfa2c8e75..373f70531 100644
--- a/addons/rose/addon/components/rose/layout/global/index.hbs
+++ b/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>
diff --git a/addons/rose/addon/components/rose/layout/global/index.stories.mdx b/addons/rose/addon/components/rose/layout/global/index.stories.mdx
index 9b8e34ea4..22cb6b8e6 100644
--- a/addons/rose/addon/components/rose/layout/global/index.stories.mdx
+++ b/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>
diff --git a/addons/rose/tests/integration/components/rose/layout/global-test.js b/addons/rose/tests/integration/components/rose/layout/global-test.js
index 2e6b91039..aa87f074b 100644
--- a/addons/rose/tests/integration/components/rose/layout/global-test.js
+++ b/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'));
+  });
 });