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 1/4] 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'));
+  });
 });

From af2710f6c47979832188ca8eac657446dc816600 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 30 Sep 2020 17:03:13 -0400
Subject: [PATCH 2/4] feat: Add global footer

---
 .../components/rose/footer/brand/index.hbs    | 12 +++++
 .../rose/footer/copyright/index.hbs           | 11 ++++
 .../components/rose/footer/copyright/index.js |  8 +++
 .../addon/components/rose/footer/index.hbs    | 11 ++++
 .../components/rose/footer/index.stories.mdx  | 42 +++++++++++++++
 .../rose/footer/nav/external-link/index.hbs   |  7 +++
 .../components/rose/footer/nav/index.hbs      |  5 ++
 .../components/rose/footer/product/index.hbs  | 11 ++++
 .../addon/styles/rose/components/_index.scss  |  1 +
 .../styles/rose/components/footer/_brand.scss | 14 +++++
 .../rose/components/footer/_copyright.scss    | 14 +++++
 .../components/footer/_external-link.scss     |  9 ++++
 .../styles/rose/components/footer/_index.scss | 18 +++++++
 .../styles/rose/components/footer/_nav.scss   |  9 ++++
 .../rose/components/footer/_product.scss      | 11 ++++
 addons/rose/app/components/rose/footer.js     |  1 +
 .../rose/app/components/rose/footer/brand.js  |  1 +
 .../app/components/rose/footer/copyright.js   |  1 +
 addons/rose/app/components/rose/footer/nav.js |  1 +
 .../rose/footer/nav/external-link.js          |  1 +
 .../app/components/rose/footer/product.js     |  1 +
 .../components/rose/footer-test.js            | 51 +++++++++++++++++++
 .../components/rose/footer/brand-test.js      | 15 ++++++
 .../components/rose/footer/copyright-test.js  | 20 ++++++++
 .../components/rose/footer/nav-test.js        | 24 +++++++++
 .../rose/footer/nav/external-link-test.js     | 15 ++++++
 .../components/rose/footer/product-test.js    | 22 ++++++++
 ui/core/app/templates/application.hbs         | 11 ++++
 ui/core/translations/en-us.yaml               |  9 +++-
 29 files changed, 355 insertions(+), 1 deletion(-)
 create mode 100644 addons/rose/addon/components/rose/footer/brand/index.hbs
 create mode 100644 addons/rose/addon/components/rose/footer/copyright/index.hbs
 create mode 100644 addons/rose/addon/components/rose/footer/copyright/index.js
 create mode 100644 addons/rose/addon/components/rose/footer/index.hbs
 create mode 100644 addons/rose/addon/components/rose/footer/index.stories.mdx
 create mode 100644 addons/rose/addon/components/rose/footer/nav/external-link/index.hbs
 create mode 100644 addons/rose/addon/components/rose/footer/nav/index.hbs
 create mode 100644 addons/rose/addon/components/rose/footer/product/index.hbs
 create mode 100644 addons/rose/addon/styles/rose/components/footer/_brand.scss
 create mode 100644 addons/rose/addon/styles/rose/components/footer/_copyright.scss
 create mode 100644 addons/rose/addon/styles/rose/components/footer/_external-link.scss
 create mode 100644 addons/rose/addon/styles/rose/components/footer/_index.scss
 create mode 100644 addons/rose/addon/styles/rose/components/footer/_nav.scss
 create mode 100644 addons/rose/addon/styles/rose/components/footer/_product.scss
 create mode 100644 addons/rose/app/components/rose/footer.js
 create mode 100644 addons/rose/app/components/rose/footer/brand.js
 create mode 100644 addons/rose/app/components/rose/footer/copyright.js
 create mode 100644 addons/rose/app/components/rose/footer/nav.js
 create mode 100644 addons/rose/app/components/rose/footer/nav/external-link.js
 create mode 100644 addons/rose/app/components/rose/footer/product.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer/brand-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer/copyright-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer/nav-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer/product-test.js

diff --git a/addons/rose/addon/components/rose/footer/brand/index.hbs b/addons/rose/addon/components/rose/footer/brand/index.hbs
new file mode 100644
index 000000000..27b91417f
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/brand/index.hbs
@@ -0,0 +1,12 @@
+<LinkTo
+  ...attributes
+  class="rose-footer-brand"
+  title={{@text}}
+  @route={{if @route @route "index"}}
+>
+
+  {{#if @logo}}
+    {{inline-svg @logo}}
+  {{/if}}
+
+</LinkTo>
diff --git a/addons/rose/addon/components/rose/footer/copyright/index.hbs b/addons/rose/addon/components/rose/footer/copyright/index.hbs
new file mode 100644
index 000000000..47e582dcb
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/copyright/index.hbs
@@ -0,0 +1,11 @@
+<span class="rose-footer-copyright">
+  <span class="rose-footer-copyright-symbol">
+    &copy;
+  </span>
+  <span class="rose-footer-copyright-year">
+    {{this.currentYear}}
+  </span>
+  <span class="rose-footer-copyright-text">
+    {{@text}}
+  </span>
+</span>
diff --git a/addons/rose/addon/components/rose/footer/copyright/index.js b/addons/rose/addon/components/rose/footer/copyright/index.js
new file mode 100644
index 000000000..a9068f750
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/copyright/index.js
@@ -0,0 +1,8 @@
+import Component from '@glimmer/component';
+
+export default class RoseFooterCopyrightComponent extends Component {
+
+  // =attributes
+  currentYear = new Date().getFullYear();
+
+}
diff --git a/addons/rose/addon/components/rose/footer/index.hbs b/addons/rose/addon/components/rose/footer/index.hbs
new file mode 100644
index 000000000..cafad5904
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/index.hbs
@@ -0,0 +1,11 @@
+<footer
+  ...attributes
+  class="rose-footer"
+>
+  {{yield (hash
+    brand=(component 'rose/footer/brand')
+    copyright=(component 'rose/footer/copyright')
+    product=(component 'rose/footer/product')
+    nav=(component 'rose/footer/nav')
+  )}}
+</footer>
diff --git a/addons/rose/addon/components/rose/footer/index.stories.mdx b/addons/rose/addon/components/rose/footer/index.stories.mdx
new file mode 100644
index 000000000..779f1d2e6
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/index.stories.mdx
@@ -0,0 +1,42 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Footer" component="Footer" />
+
+# Footer
+
+A footer component that allows four distinct sections to be configured: brand, nav, product, and copyright.
+
+```html
+<Rose::Footer as |footer|>
+  <footer.brand @logo="logo" @text="Product Name" />
+  <footer.copyright @text="Company Name" />
+  <footer.product @text="Product Name" @version="1.0" />
+  <footer.nav as |nav|>
+    <nav.external-link @route="index">Section</nav.external-link>
+    <nav.external-link @route="about">Section</nav.external-link>
+  </footer.nav>
+</Rose::Footer>
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`
+      <Rose::Footer as |footer|>
+        <footer.brand @logo="logo" @text={{brandName}} />
+        <footer.copyright @text={{copyright}} />
+        <footer.product @text={{brandName}} @version="1.0" />
+        <footer.nav as |nav|>
+          <nav.external-link @route="index">Section</nav.external-link>
+          <nav.external-link @route="about">Section</nav.external-link>
+        </footer.nav>
+      </Rose::Footer>
+    `,
+    context: {
+      brandName: text('brandName', 'Brand Name'),
+      copyright: text('copyright', 'Company Name'),
+    },
+  }}</Story>
+</Preview>
diff --git a/addons/rose/addon/components/rose/footer/nav/external-link/index.hbs b/addons/rose/addon/components/rose/footer/nav/external-link/index.hbs
new file mode 100644
index 000000000..213ecce7a
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/nav/external-link/index.hbs
@@ -0,0 +1,7 @@
+<a target="_blank"
+  href={{@href}}
+  class="rose-footer-nav-external-link"
+  rel="noopener noreferrer" 
+>
+  {{yield}}
+</a>
diff --git a/addons/rose/addon/components/rose/footer/nav/index.hbs b/addons/rose/addon/components/rose/footer/nav/index.hbs
new file mode 100644
index 000000000..444202f6e
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/nav/index.hbs
@@ -0,0 +1,5 @@
+<nav class="rose-footer-nav" aria-label="footer-nav">
+  {{yield (hash
+    external-link=(component 'rose/footer/nav/external-link')
+  )}}
+</nav>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/footer/product/index.hbs b/addons/rose/addon/components/rose/footer/product/index.hbs
new file mode 100644
index 000000000..6d3436db1
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/product/index.hbs
@@ -0,0 +1,11 @@
+<span class="rose-footer-product">
+  <span class="rose-footer-product-text">
+    {{@text}}
+  </span>
+
+  {{#if @version}}
+    <span class="rose-footer-product-version">
+      v{{@version}}
+    </span>
+  {{/if}}
+</span>
\ No newline at end of file
diff --git a/addons/rose/addon/styles/rose/components/_index.scss b/addons/rose/addon/styles/rose/components/_index.scss
index 19a9d3de6..6e6ef8490 100644
--- a/addons/rose/addon/styles/rose/components/_index.scss
+++ b/addons/rose/addon/styles/rose/components/_index.scss
@@ -2,6 +2,7 @@
 @import 'dropdown';
 @import 'form';
 @import 'header';
+@import 'footer';
 @import 'layout';
 @import 'icon';
 @import 'list';
diff --git a/addons/rose/addon/styles/rose/components/footer/_brand.scss b/addons/rose/addon/styles/rose/components/footer/_brand.scss
new file mode 100644
index 000000000..26e5f2983
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/footer/_brand.scss
@@ -0,0 +1,14 @@
+@use '../../variables/sizing';
+
+.rose-footer-brand {
+  display: flex;
+  align-items: center;
+  color: var(--ui-gray-starker-1);
+  margin: sizing.rems(xs);
+
+  svg {
+    $logoSize: sizing.rems(m);
+    display: inline-block;
+    width: $logoSize;
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/footer/_copyright.scss b/addons/rose/addon/styles/rose/components/footer/_copyright.scss
new file mode 100644
index 000000000..9db1a4fa1
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/footer/_copyright.scss
@@ -0,0 +1,14 @@
+@use '../../variables/sizing';
+
+.rose-footer-copyright {
+  display: inline-flex;
+  align-items: center;
+
+  .rose-footer-copyright-symbol {
+    margin-right: sizing.rems(xxxs);
+  }
+
+  .rose-footer-copyright-year {
+    margin-right: sizing.rems(xxs);
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/footer/_external-link.scss b/addons/rose/addon/styles/rose/components/footer/_external-link.scss
new file mode 100644
index 000000000..287db2b9b
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/footer/_external-link.scss
@@ -0,0 +1,9 @@
+@use '../../variables/sizing';
+
+.rose-footer-nav-external-link {
+  display: inline-flex;
+  align-items: center;
+  margin-right: sizing.rems(s);
+  text-decoration: underline;
+  color: var(--ui-gray-starker-1);
+}
diff --git a/addons/rose/addon/styles/rose/components/footer/_index.scss b/addons/rose/addon/styles/rose/components/footer/_index.scss
new file mode 100644
index 000000000..93e03b5ec
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/footer/_index.scss
@@ -0,0 +1,18 @@
+@use '../../variables/sizing';
+@use '../../variables/media';
+@use '../../utilities/type';
+
+@import 'brand';
+@import 'nav';
+@import 'product';
+@import 'copyright';
+@import 'external-link';
+
+.rose-footer {
+  @include type.type(xs);
+
+  display: flex;
+  justify-content: center;
+  color: var(--ui-gray-starker-1);
+  height: sizing.rems(xxl) + sizing.rems(xxs); //65px
+}
diff --git a/addons/rose/addon/styles/rose/components/footer/_nav.scss b/addons/rose/addon/styles/rose/components/footer/_nav.scss
new file mode 100644
index 000000000..bd23dde4a
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/footer/_nav.scss
@@ -0,0 +1,9 @@
+@use '../../variables/sizing';
+
+.rose-footer-nav {
+  grid-area: nav;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-right: sizing.rems(s);
+}
diff --git a/addons/rose/addon/styles/rose/components/footer/_product.scss b/addons/rose/addon/styles/rose/components/footer/_product.scss
new file mode 100644
index 000000000..510fc1670
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/footer/_product.scss
@@ -0,0 +1,11 @@
+@use '../../variables/sizing';
+
+.rose-footer-product {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 sizing.rems(l);
+
+  .rose-footer-product-version {
+    margin-left: sizing.rems(xxxs);
+  }
+}
diff --git a/addons/rose/app/components/rose/footer.js b/addons/rose/app/components/rose/footer.js
new file mode 100644
index 000000000..ccac33104
--- /dev/null
+++ b/addons/rose/app/components/rose/footer.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/footer';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/footer/brand.js b/addons/rose/app/components/rose/footer/brand.js
new file mode 100644
index 000000000..995d715ba
--- /dev/null
+++ b/addons/rose/app/components/rose/footer/brand.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/footer/brand';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/footer/copyright.js b/addons/rose/app/components/rose/footer/copyright.js
new file mode 100644
index 000000000..d46304fc7
--- /dev/null
+++ b/addons/rose/app/components/rose/footer/copyright.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/footer/copyright';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/footer/nav.js b/addons/rose/app/components/rose/footer/nav.js
new file mode 100644
index 000000000..3ca032af2
--- /dev/null
+++ b/addons/rose/app/components/rose/footer/nav.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/footer/nav';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/footer/nav/external-link.js b/addons/rose/app/components/rose/footer/nav/external-link.js
new file mode 100644
index 000000000..40e8cd9f6
--- /dev/null
+++ b/addons/rose/app/components/rose/footer/nav/external-link.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/footer/nav/external-link';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/footer/product.js b/addons/rose/app/components/rose/footer/product.js
new file mode 100644
index 000000000..7193b5690
--- /dev/null
+++ b/addons/rose/app/components/rose/footer/product.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/footer/product';
\ No newline at end of file
diff --git a/addons/rose/tests/integration/components/rose/footer-test.js b/addons/rose/tests/integration/components/rose/footer-test.js
new file mode 100644
index 000000000..efb3147d7
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer-test.js
@@ -0,0 +1,51 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer', function(hooks) {
+  setupRenderingTest(hooks);
+  
+  test('it renders', async function (assert) {
+    assert.expect(5);
+    await render(hbs`<Rose::Footer />`);
+    assert.ok(find('.rose-footer'));
+    assert.notOk(find('.rose-footer-nav'));
+    assert.notOk(find('.rose-footer-brand'));
+    assert.notOk(find('.rose-footer-product'));
+    assert.notOk(find('.rose-footer-copyright'));
+  });
+
+  test('it renders with brand', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer as |footer| >
+      <footer.brand />
+    </Rose::Footer>`);
+    assert.ok(find('.rose-footer-brand'));
+  });
+
+  test('it renders with nav', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer as |footer| >
+      <footer.nav />
+    </Rose::Footer>`);
+    assert.ok(find('.rose-footer-nav'));
+  });
+
+  test('it renders with product', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer as |footer| >
+      <footer.product @text="boundary"/>
+    </Rose::Footer>`);
+    assert.ok(find('.rose-footer-product'));
+  });
+
+  test('it renders with copyright', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer as |footer| >
+      <footer.copyright @text="copyright"/>
+    </Rose::Footer>`);
+    assert.ok(find('.rose-footer-copyright'));
+  });
+
+});
diff --git a/addons/rose/tests/integration/components/rose/footer/brand-test.js b/addons/rose/tests/integration/components/rose/footer/brand-test.js
new file mode 100644
index 000000000..2910d4a56
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer/brand-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer/brand', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(2);
+    await render(hbs`<Rose::Footer::Brand @logo="logo" @text="Product Name" />`);
+    assert.ok(find('.rose-footer-brand'));
+    assert.ok(find('.rose-footer-brand svg'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/footer/copyright-test.js b/addons/rose/tests/integration/components/rose/footer/copyright-test.js
new file mode 100644
index 000000000..63d5feed0
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer/copyright-test.js
@@ -0,0 +1,20 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer/copyright', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer::Copyright @text="copyright" />`);
+    assert.equal(find('.rose-footer-copyright-text').textContent.trim(), 'copyright');
+  });
+
+  test('it renders with current year', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer::Copyright />`);
+    assert.equal(find('.rose-footer-copyright-year').textContent.trim(), new Date().getFullYear());
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/footer/nav-test.js b/addons/rose/tests/integration/components/rose/footer/nav-test.js
new file mode 100644
index 000000000..6ba5cdb19
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer/nav-test.js
@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer/nav', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer::nav />`);
+    assert.ok(find('.rose-footer-nav'));
+  });
+
+  test('it renders nav external link elements', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer::nav as |nav| >
+      <nav.external-link @href="index"/>
+      <nav.external-link @href="about"/>
+    </Rose::Footer::nav>`);
+    assert.equal(findAll('a').length, 2);
+  });
+
+});
diff --git a/addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js b/addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js
new file mode 100644
index 000000000..58f389a2f
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js
@@ -0,0 +1,15 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer/nav/external-link', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with link', async function (assert) {
+    assert.expect(2);
+    await render(hbs`<Rose::Footer::Nav::ExternalLink />`);
+    assert.ok(find('a'));
+    assert.ok(find('.rose-footer-nav-external-link'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/footer/product-test.js b/addons/rose/tests/integration/components/rose/footer/product-test.js
new file mode 100644
index 000000000..2cdd8927d
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer/product-test.js
@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer/product', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with product', async function (assert) {
+    assert.expect(3);
+    await render(hbs`<Rose::Footer::Product @text="boundary" />`);
+    assert.ok(find('.rose-footer-product'));
+    assert.equal(find('.rose-footer-product-text').textContent.trim(), 'boundary');
+    assert.notOk(find('.rose-footer-product-version'));
+  });
+
+  test('it renders with product and version', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer::Product @version="1.0" />`);
+    assert.equal(find('.rose-footer-product-version').textContent.trim(), 'v1.0');
+  });
+});
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index b38e02f4d..d0728605a 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -37,6 +37,17 @@
     {{outlet}}
   </layout.body>
 
+  <layout.footer>
+    <Rose::Footer as |footer|>
+      <footer.brand @logo="logo-hashi" @text={{t "hashicorp.title"}} />
+      <footer.copyright @text={{t "hashicorp.title"}} />
+      <footer.product @text={{app-name}} @version={{t "boundary.version"}} />
+      <footer.nav as |nav|>
+        <nav.external-link @href={{t "hashicorp.documentation.link"}}>{{t "hashicorp.documentation.title"}}</nav.external-link>
+      </footer.nav>
+    </Rose::Footer>
+  </layout.footer>
+
 </Rose::Layout::Global>
 
 <EmberNotify @closeAfter={{this.notifyTimeout}} as |message close|>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index a86a36263..cdb5cb5b7 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -17,4 +17,11 @@ titles:
   global: Global
   actions: Actions
 descriptions:
-  empty-set: There are no items to display yet.  You may be able to add items or try back later.
\ No newline at end of file
+  empty-set: There are no items to display yet.  You may be able to add items or try back later.
+hashicorp:
+  title: HashiCorp
+  documentation:
+    title: Documentation
+    link: https://boundaryproject.io
+boundary:
+  version: '0.1'
\ No newline at end of file

From d26f6896bcc55a29a16d20cbc11b700446162f88 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Wed, 30 Sep 2020 23:03:01 -0400
Subject: [PATCH 3/4] refactor: Simplify rose/footer component

Reduce number of elements footer supports
---
 .../addon/components/rose/footer/index.hbs    |  5 ++--
 .../components/rose/footer/index.stories.mdx  | 18 +++++++-------
 .../rose/footer/nav/external-link/index.hbs   |  7 ------
 .../components/rose/footer/nav/index.hbs      |  2 +-
 .../components/rose/footer/nav/link/index.hbs | 20 ++++++++++++++++
 .../rose/components/footer/_copyright.scss    | 14 -----------
 .../styles/rose/components/footer/_index.scss |  5 ++--
 .../{_external-link.scss => _link.scss}       |  4 ++--
 .../rose/components/footer/_product.scss      | 11 ---------
 .../styles/rose/components/footer/_text.scss  |  7 ++++++
 .../rose/footer/nav/external-link.js          |  1 -
 .../app/components/rose/footer/nav/link.js    |  1 +
 .../components/rose/footer-test.js            | 19 ++++-----------
 .../components/rose/footer/brand-test.js      | 15 ------------
 .../components/rose/footer/copyright-test.js  | 20 ----------------
 .../components/rose/footer/nav-test.js        |  4 ++--
 .../rose/footer/nav/external-link-test.js     | 15 ------------
 .../components/rose/footer/nav/link-test.js   | 22 +++++++++++++++++
 .../components/rose/footer/product-test.js    | 22 -----------------
 .../components/rose/footer/text-test.js       | 24 +++++++++++++++++++
 ui/core/app/templates/application.hbs         |  6 ++---
 ui/core/translations/en-us.yaml               |  4 ++--
 22 files changed, 101 insertions(+), 145 deletions(-)
 delete mode 100644 addons/rose/addon/components/rose/footer/nav/external-link/index.hbs
 create mode 100644 addons/rose/addon/components/rose/footer/nav/link/index.hbs
 delete mode 100644 addons/rose/addon/styles/rose/components/footer/_copyright.scss
 rename addons/rose/addon/styles/rose/components/footer/{_external-link.scss => _link.scss} (69%)
 delete mode 100644 addons/rose/addon/styles/rose/components/footer/_product.scss
 create mode 100644 addons/rose/addon/styles/rose/components/footer/_text.scss
 delete mode 100644 addons/rose/app/components/rose/footer/nav/external-link.js
 create mode 100644 addons/rose/app/components/rose/footer/nav/link.js
 delete mode 100644 addons/rose/tests/integration/components/rose/footer/brand-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/footer/copyright-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer/nav/link-test.js
 delete mode 100644 addons/rose/tests/integration/components/rose/footer/product-test.js
 create mode 100644 addons/rose/tests/integration/components/rose/footer/text-test.js

diff --git a/addons/rose/addon/components/rose/footer/index.hbs b/addons/rose/addon/components/rose/footer/index.hbs
index cafad5904..bbe5ecc72 100644
--- a/addons/rose/addon/components/rose/footer/index.hbs
+++ b/addons/rose/addon/components/rose/footer/index.hbs
@@ -3,9 +3,8 @@
   class="rose-footer"
 >
   {{yield (hash
-    brand=(component 'rose/footer/brand')
-    copyright=(component 'rose/footer/copyright')
-    product=(component 'rose/footer/product')
     nav=(component 'rose/footer/nav')
+    brand=(component 'rose/footer/brand')
+    text=(component "rose/anonymous" class="rose-footer-text")
   )}}
 </footer>
diff --git a/addons/rose/addon/components/rose/footer/index.stories.mdx b/addons/rose/addon/components/rose/footer/index.stories.mdx
index 779f1d2e6..608bc1068 100644
--- a/addons/rose/addon/components/rose/footer/index.stories.mdx
+++ b/addons/rose/addon/components/rose/footer/index.stories.mdx
@@ -7,16 +7,15 @@ import { text } from '@storybook/addon-knobs';
 
 # Footer
 
-A footer component that allows four distinct sections to be configured: brand, nav, product, and copyright.
+A footer component that allows four distinct sections to be configured: brand, nav, and text.
 
 ```html
 <Rose::Footer as |footer|>
   <footer.brand @logo="logo" @text="Product Name" />
-  <footer.copyright @text="Company Name" />
-  <footer.product @text="Product Name" @version="1.0" />
+  <footer.text>Text</footer.text>
   <footer.nav as |nav|>
-    <nav.external-link @route="index">Section</nav.external-link>
-    <nav.external-link @route="about">Section</nav.external-link>
+    <nav.link @route="index">Section</nav.link>
+    <nav.link @href="index">Section</nav.link>
   </footer.nav>
 </Rose::Footer>
 ```
@@ -26,17 +25,16 @@ A footer component that allows four distinct sections to be configured: brand, n
     template: hbs`
       <Rose::Footer as |footer|>
         <footer.brand @logo="logo" @text={{brandName}} />
-        <footer.copyright @text={{copyright}} />
-        <footer.product @text={{brandName}} @version="1.0" />
+        <footer.text>{{footerText}}</footer.text>
         <footer.nav as |nav|>
-          <nav.external-link @route="index">Section</nav.external-link>
-          <nav.external-link @route="about">Section</nav.external-link>
+          <nav.link @route="index">Section</nav.link>
+          <nav.link @href="index">Section</nav.link>
         </footer.nav>
       </Rose::Footer>
     `,
     context: {
       brandName: text('brandName', 'Brand Name'),
-      copyright: text('copyright', 'Company Name'),
+      footerText: text('footerText', 'Text'),
     },
   }}</Story>
 </Preview>
diff --git a/addons/rose/addon/components/rose/footer/nav/external-link/index.hbs b/addons/rose/addon/components/rose/footer/nav/external-link/index.hbs
deleted file mode 100644
index 213ecce7a..000000000
--- a/addons/rose/addon/components/rose/footer/nav/external-link/index.hbs
+++ /dev/null
@@ -1,7 +0,0 @@
-<a target="_blank"
-  href={{@href}}
-  class="rose-footer-nav-external-link"
-  rel="noopener noreferrer" 
->
-  {{yield}}
-</a>
diff --git a/addons/rose/addon/components/rose/footer/nav/index.hbs b/addons/rose/addon/components/rose/footer/nav/index.hbs
index 444202f6e..c03ac88c9 100644
--- a/addons/rose/addon/components/rose/footer/nav/index.hbs
+++ b/addons/rose/addon/components/rose/footer/nav/index.hbs
@@ -1,5 +1,5 @@
 <nav class="rose-footer-nav" aria-label="footer-nav">
   {{yield (hash
-    external-link=(component 'rose/footer/nav/external-link')
+    link=(component 'rose/footer/nav/link')
   )}}
 </nav>
\ No newline at end of file
diff --git a/addons/rose/addon/components/rose/footer/nav/link/index.hbs b/addons/rose/addon/components/rose/footer/nav/link/index.hbs
new file mode 100644
index 000000000..bebaacc29
--- /dev/null
+++ b/addons/rose/addon/components/rose/footer/nav/link/index.hbs
@@ -0,0 +1,20 @@
+{{#if @href}}
+  <a target="_blank"
+    href={{@href}}
+    class="rose-footer-nav-link"
+    rel="noopener noreferrer" 
+  >
+    {{yield}}
+  </a>
+{{/if}}
+
+{{#if @route}}
+  <LinkTo
+    ...attributes
+    @route={{@route}}
+    @model={{@model}}
+    class="rose-footer-nav-link"
+  >
+    {{yield}}
+  </LinkTo>
+{{/if}}
diff --git a/addons/rose/addon/styles/rose/components/footer/_copyright.scss b/addons/rose/addon/styles/rose/components/footer/_copyright.scss
deleted file mode 100644
index 9db1a4fa1..000000000
--- a/addons/rose/addon/styles/rose/components/footer/_copyright.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@use '../../variables/sizing';
-
-.rose-footer-copyright {
-  display: inline-flex;
-  align-items: center;
-
-  .rose-footer-copyright-symbol {
-    margin-right: sizing.rems(xxxs);
-  }
-
-  .rose-footer-copyright-year {
-    margin-right: sizing.rems(xxs);
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/footer/_index.scss b/addons/rose/addon/styles/rose/components/footer/_index.scss
index 93e03b5ec..9de207b95 100644
--- a/addons/rose/addon/styles/rose/components/footer/_index.scss
+++ b/addons/rose/addon/styles/rose/components/footer/_index.scss
@@ -4,9 +4,8 @@
 
 @import 'brand';
 @import 'nav';
-@import 'product';
-@import 'copyright';
-@import 'external-link';
+@import 'text';
+@import 'link';
 
 .rose-footer {
   @include type.type(xs);
diff --git a/addons/rose/addon/styles/rose/components/footer/_external-link.scss b/addons/rose/addon/styles/rose/components/footer/_link.scss
similarity index 69%
rename from addons/rose/addon/styles/rose/components/footer/_external-link.scss
rename to addons/rose/addon/styles/rose/components/footer/_link.scss
index 287db2b9b..dc35db4c0 100644
--- a/addons/rose/addon/styles/rose/components/footer/_external-link.scss
+++ b/addons/rose/addon/styles/rose/components/footer/_link.scss
@@ -1,9 +1,9 @@
 @use '../../variables/sizing';
 
-.rose-footer-nav-external-link {
+.rose-footer-nav-link {
   display: inline-flex;
   align-items: center;
-  margin-right: sizing.rems(s);
   text-decoration: underline;
   color: var(--ui-gray-starker-1);
+  margin: 0 sizing.rems(xs);
 }
diff --git a/addons/rose/addon/styles/rose/components/footer/_product.scss b/addons/rose/addon/styles/rose/components/footer/_product.scss
deleted file mode 100644
index 510fc1670..000000000
--- a/addons/rose/addon/styles/rose/components/footer/_product.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use '../../variables/sizing';
-
-.rose-footer-product {
-  display: inline-flex;
-  align-items: center;
-  margin: 0 sizing.rems(l);
-
-  .rose-footer-product-version {
-    margin-left: sizing.rems(xxxs);
-  }
-}
diff --git a/addons/rose/addon/styles/rose/components/footer/_text.scss b/addons/rose/addon/styles/rose/components/footer/_text.scss
new file mode 100644
index 000000000..9e7b29b8b
--- /dev/null
+++ b/addons/rose/addon/styles/rose/components/footer/_text.scss
@@ -0,0 +1,7 @@
+@use '../../variables/sizing';
+
+.rose-footer-text {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 sizing.rems(xs);
+}
diff --git a/addons/rose/app/components/rose/footer/nav/external-link.js b/addons/rose/app/components/rose/footer/nav/external-link.js
deleted file mode 100644
index 40e8cd9f6..000000000
--- a/addons/rose/app/components/rose/footer/nav/external-link.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'rose/components/rose/footer/nav/external-link';
\ No newline at end of file
diff --git a/addons/rose/app/components/rose/footer/nav/link.js b/addons/rose/app/components/rose/footer/nav/link.js
new file mode 100644
index 000000000..e38b27530
--- /dev/null
+++ b/addons/rose/app/components/rose/footer/nav/link.js
@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/footer/nav/link';
\ No newline at end of file
diff --git a/addons/rose/tests/integration/components/rose/footer-test.js b/addons/rose/tests/integration/components/rose/footer-test.js
index efb3147d7..4a43f0d4f 100644
--- a/addons/rose/tests/integration/components/rose/footer-test.js
+++ b/addons/rose/tests/integration/components/rose/footer-test.js
@@ -7,13 +7,12 @@ module('Integration | Component | rose/footer', function(hooks) {
   setupRenderingTest(hooks);
   
   test('it renders', async function (assert) {
-    assert.expect(5);
+    assert.expect(4);
     await render(hbs`<Rose::Footer />`);
     assert.ok(find('.rose-footer'));
     assert.notOk(find('.rose-footer-nav'));
+    assert.notOk(find('.rose-footer-text'));
     assert.notOk(find('.rose-footer-brand'));
-    assert.notOk(find('.rose-footer-product'));
-    assert.notOk(find('.rose-footer-copyright'));
   });
 
   test('it renders with brand', async function (assert) {
@@ -32,20 +31,12 @@ module('Integration | Component | rose/footer', function(hooks) {
     assert.ok(find('.rose-footer-nav'));
   });
 
-  test('it renders with product', async function (assert) {
+  test('it renders with text', async function (assert) {
     assert.expect(1);
     await render(hbs`<Rose::Footer as |footer| >
-      <footer.product @text="boundary"/>
+      <footer.text />
     </Rose::Footer>`);
-    assert.ok(find('.rose-footer-product'));
-  });
-
-  test('it renders with copyright', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Footer as |footer| >
-      <footer.copyright @text="copyright"/>
-    </Rose::Footer>`);
-    assert.ok(find('.rose-footer-copyright'));
+    assert.ok(find('.rose-footer-text'));
   });
 
 });
diff --git a/addons/rose/tests/integration/components/rose/footer/brand-test.js b/addons/rose/tests/integration/components/rose/footer/brand-test.js
deleted file mode 100644
index 2910d4a56..000000000
--- a/addons/rose/tests/integration/components/rose/footer/brand-test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/footer/brand', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Footer::Brand @logo="logo" @text="Product Name" />`);
-    assert.ok(find('.rose-footer-brand'));
-    assert.ok(find('.rose-footer-brand svg'));
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/footer/copyright-test.js b/addons/rose/tests/integration/components/rose/footer/copyright-test.js
deleted file mode 100644
index 63d5feed0..000000000
--- a/addons/rose/tests/integration/components/rose/footer/copyright-test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/footer/copyright', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Footer::Copyright @text="copyright" />`);
-    assert.equal(find('.rose-footer-copyright-text').textContent.trim(), 'copyright');
-  });
-
-  test('it renders with current year', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Footer::Copyright />`);
-    assert.equal(find('.rose-footer-copyright-year').textContent.trim(), new Date().getFullYear());
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/footer/nav-test.js b/addons/rose/tests/integration/components/rose/footer/nav-test.js
index 6ba5cdb19..782602f44 100644
--- a/addons/rose/tests/integration/components/rose/footer/nav-test.js
+++ b/addons/rose/tests/integration/components/rose/footer/nav-test.js
@@ -15,8 +15,8 @@ module('Integration | Component | rose/footer/nav', function(hooks) {
   test('it renders nav external link elements', async function (assert) {
     assert.expect(1);
     await render(hbs`<Rose::Footer::nav as |nav| >
-      <nav.external-link @href="index"/>
-      <nav.external-link @href="about"/>
+      <nav.link @href="index"/>
+      <nav.link @route="about"/>
     </Rose::Footer::nav>`);
     assert.equal(findAll('a').length, 2);
   });
diff --git a/addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js b/addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js
deleted file mode 100644
index 58f389a2f..000000000
--- a/addons/rose/tests/integration/components/rose/footer/nav/external-link-test.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/footer/nav/external-link', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders with link', async function (assert) {
-    assert.expect(2);
-    await render(hbs`<Rose::Footer::Nav::ExternalLink />`);
-    assert.ok(find('a'));
-    assert.ok(find('.rose-footer-nav-external-link'));
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/footer/nav/link-test.js b/addons/rose/tests/integration/components/rose/footer/nav/link-test.js
new file mode 100644
index 000000000..d5405db01
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer/nav/link-test.js
@@ -0,0 +1,22 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer/nav/link', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders with @href', async function (assert) {
+    assert.expect(2);
+    await render(hbs`<Rose::Footer::Nav::Link @href="localhost" />`);
+    assert.ok(find('a'));
+    assert.ok(find('.rose-footer-nav-link'));
+  });
+
+  test('it renders with @route', async function (assert) {
+    assert.expect(2);
+    await render(hbs`<Rose::Footer::Nav::Link @route="index" />`);
+    assert.ok(find('a'));
+    assert.ok(find('.rose-footer-nav-link'));
+  });
+});
diff --git a/addons/rose/tests/integration/components/rose/footer/product-test.js b/addons/rose/tests/integration/components/rose/footer/product-test.js
deleted file mode 100644
index 2cdd8927d..000000000
--- a/addons/rose/tests/integration/components/rose/footer/product-test.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | rose/footer/product', function(hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders with product', async function (assert) {
-    assert.expect(3);
-    await render(hbs`<Rose::Footer::Product @text="boundary" />`);
-    assert.ok(find('.rose-footer-product'));
-    assert.equal(find('.rose-footer-product-text').textContent.trim(), 'boundary');
-    assert.notOk(find('.rose-footer-product-version'));
-  });
-
-  test('it renders with product and version', async function (assert) {
-    assert.expect(1);
-    await render(hbs`<Rose::Footer::Product @version="1.0" />`);
-    assert.equal(find('.rose-footer-product-version').textContent.trim(), 'v1.0');
-  });
-});
diff --git a/addons/rose/tests/integration/components/rose/footer/text-test.js b/addons/rose/tests/integration/components/rose/footer/text-test.js
new file mode 100644
index 000000000..d3cbfacff
--- /dev/null
+++ b/addons/rose/tests/integration/components/rose/footer/text-test.js
@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | rose/footer/text', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer as |footer|>
+      <footer.text />
+    </Rose::Footer>`);
+    assert.ok(find('.rose-footer-text'));
+  });
+
+  test('it renders content', async function (assert) {
+    assert.expect(1);
+    await render(hbs`<Rose::Footer as |footer|>
+      <footer.text>content</footer.text>
+    </Rose::Footer>`);
+    assert.equal(find('.rose-footer-text').textContent.trim(), 'content');
+  });
+});
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 5a8003366..7d2f00db3 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -40,10 +40,10 @@
   <layout.footer>
     <Rose::Footer as |footer|>
       <footer.brand @logo="logo-hashi" @text={{t "hashicorp.title"}} />
-      <footer.copyright @text={{t "hashicorp.title"}} />
-      <footer.product @text={{app-name}} @version={{t "boundary.version"}} />
+      <footer.text>{{t "hashicorp.copyright"}}</footer.text>
+      <footer.text>{{t "hashicorp.product"}}</footer.text>
       <footer.nav as |nav|>
-        <nav.external-link @href={{t "hashicorp.documentation.link"}}>{{t "hashicorp.documentation.title"}}</nav.external-link>
+        <nav.link @href={{t "hashicorp.documentation.link"}}>{{t "hashicorp.documentation.title"}}</nav.link>
       </footer.nav>
     </Rose::Footer>
   </layout.footer>
diff --git a/ui/core/translations/en-us.yaml b/ui/core/translations/en-us.yaml
index cdb5cb5b7..6755b8976 100644
--- a/ui/core/translations/en-us.yaml
+++ b/ui/core/translations/en-us.yaml
@@ -20,8 +20,8 @@ descriptions:
   empty-set: There are no items to display yet.  You may be able to add items or try back later.
 hashicorp:
   title: HashiCorp
+  copyright: © 2020 HashiCorp
+  product: Boundary v0.1
   documentation:
     title: Documentation
     link: https://boundaryproject.io
-boundary:
-  version: '0.1'
\ No newline at end of file

From d76bc046a66d6d87ee5db8fa401bcd95484d226b Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 1 Oct 2020 11:19:41 -0400
Subject: [PATCH 4/4] chore: remove comment

---
 addons/rose/addon/styles/rose/components/footer/_index.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/addons/rose/addon/styles/rose/components/footer/_index.scss b/addons/rose/addon/styles/rose/components/footer/_index.scss
index 9de207b95..9632c4e0c 100644
--- a/addons/rose/addon/styles/rose/components/footer/_index.scss
+++ b/addons/rose/addon/styles/rose/components/footer/_index.scss
@@ -13,5 +13,5 @@
   display: flex;
   justify-content: center;
   color: var(--ui-gray-starker-1);
-  height: sizing.rems(xxl) + sizing.rems(xxs); //65px
+  height: sizing.rems(xxl) + sizing.rems(xxs);
 }