chore: 🤖 manual merge from develop

addons/rose/addon/components/rose/header.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../templates/components/rose/header';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/header.stories.mdx

@@ -0,0 +1,72 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { hbs } from 'ember-cli-htmlbars';
+import { action } from '@storybook/addon-actions';
+import { text, boolean } from '@storybook/addon-knobs';
+
+<Meta title="Rose|Header" component="Header" />
+
+# Header
+
+A header component that allows three distinct sections to be configured: brand, navigation, and utilities.
+
+```htmlbars
+<Rose::Header name="main header" as |header|>
+  <header.brand />
+
+  <header.navigation as |nav|>
+    <nav.dropdown as |dropdown|>
+      <dropdown.trigger>Org name</dropdown.trigger>
+      <dropdown.content as |content|>
+        <content.link @route="about">link</content.link>
+        <content.button>button</content.button>
+      </dropdown.content>
+    </nav.dropdown>
+    <nav.link @route="about">Section</nav.link>
+  </header.navigation>
+
+  <header.utilities as |utilities|>
+    <utilities.dropdown as |dropdown|>
+      <dropdown.trigger>Click me</dropdown.trigger>
+      <dropdown.content as |content|>
+        <content.link @route="about">link</content.link>
+        <content.button>button</content.button>
+      </dropdown.content>
+    </utilities.dropdown>
+  </header.utilities>
+</Rose::Header>
+```
+
+<Preview>
+  <Story name="Basic">{{
+    template: hbs`
+    <Rose::Header name="main header" as |header|>
+      <header.brand />
+      <header.navigation as |nav|>
+        <nav.dropdown as |dropdown|>
+          <dropdown.trigger>{{navigation-dropdown-label}}</dropdown.trigger>
+          <dropdown.content as |content|>
+            <content.link @route="about">{{navigation-dropdown-link-label}}</content.link>
+            <content.button>{{navigation-dropdown-button-label}}</content.button>
+          </dropdown.content>
+        </nav.dropdown>
+        <nav.link @route="about">{{navigation-link-label}}</nav.link>
+      </header.navigation>
+      <header.utilities as |utilities|>
+        <utilities.dropdown @alignRight={{true}} as |dropdown|>
+          <dropdown.trigger><Rose::Icon @name="user-square-outline" /></dropdown.trigger>
+          <dropdown.content as |content|>
+            <content.link @route="about">link</content.link>
+            <content.button>button</content.button>
+          </dropdown.content>
+        </utilities.dropdown>
+      </header.utilities>
+    </Rose::Header>
+    `,
+    context: {
+      'navigation-dropdown-label': text('navigation-dropdown-label', 'Org Name'),
+      'navigation-dropdown-link-label': text('navigation-dropdown-link-label', 'Menu Item'),
+      'navigation-dropdown-button-label': text('navigation-dropdown-button-label', 'Menu Item'),
+      'navigation-link-label': text('navigation-link-label', 'Section'),
+    },
+  }}</Story>
+</Preview>

addons/rose/addon/components/rose/header/brand.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/header/brand';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/header/dropdown.js

@@ -0,0 +1,16 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/header/dropdown';
+import { action } from '@ember/object';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+
+  // Uses details widget state to close dropdown
+  @action
+  close(element) {
+    if (element.open) {
+      element.open = false;
+    }
+  },
+});

addons/rose/addon/components/rose/header/dropdown/content.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/header/dropdown/content';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/header/dropdown/content/button.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../../templates/components/rose/header/dropdown/content/button';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/header/dropdown/trigger.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../../templates/components/rose/header/dropdown/trigger';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/header/navigation.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/header/navigation';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/components/rose/header/utilities.js

@@ -0,0 +1,7 @@
+import Component from '@ember/component';
+import layout from '../../../templates/components/rose/header/utilities';
+
+export default Component.extend({
+  layout,
+  tagName: '',
+});

addons/rose/addon/modifiers/on-click-outside.js

@@ -0,0 +1,15 @@
+import { modifier } from 'ember-modifier';
+
+export default modifier((element, [callback]) => {
+  function handleClick(event) {
+    if (!element.contains(event.target)) {
+      callback(element, event);
+    }
+  }
+
+  document.addEventListener('click', handleClick, false);
+
+  return () => {
+    document.removeEventListener('click', handleClick, false);
+  };
+});

addons/rose/addon/styles/rose/components/_header.scss

@@ -0,0 +1,168 @@
+@use '../variables/sizing';
+@use '../variables/media';
+@use '../utilities/type';
+
+$brand-hashicorp: "data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 106.86 113.14' fill='%23ffffff'><g id='Layer_2' data-name='Layer 2'><g id='Logo'><polygon points='44.54 0 0 25.69 0 25.71 0 87.41 16.73 97.07 16.73 35.35 44.54 19.3 44.54 0'/><polygon points='62.32 0 62.32 49.15 44.54 49.15 44.54 30.81 27.8 40.47 27.8 103.44 44.54 113.12 44.54 64.11 62.32 64.11 62.32 82.33 79.05 72.67 79.05 9.66 62.32 0'/><polygon points='62.32 113.14 106.86 87.45 106.86 87.43 106.86 25.73 90.12 16.07 90.12 77.79 62.32 93.84 62.32 113.14'/></g></g></svg>";
+
+$dropdown-chevron: (
+  'default':
+    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
+  'open':
+    "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231f2124' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>",
+);
+
+.rose-header {
+  @include type.type(s, semibold);
+  display: grid;
+  grid-template-areas: 'brand navigation utilities';
+  grid-template-columns: 0.01fr auto 1fr;
+  grid-gap: sizing.rems(xxxs);
+  background: var(--black);
+  color: var(--white);
+
+  .rose-header-brand {
+    grid-area: brand;
+    width: sizing.rems(l);
+    height: sizing.rems(l);
+    background-image: url($brand-hashicorp);
+    background-repeat: no-repeat;
+    margin: sizing.rems(xxs);
+  }
+
+  .rose-header-navigation {
+    grid-area: navigation;
+
+    .rose-header-navigation-flex {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    .rose-header-navigation-link {
+      text-decoration: none;
+      display: block;
+      color: var(--white);
+      border: 1px solid var(--stark);
+      border-radius: sizing.rems(xxs);
+      text-align: center;
+      padding: sizing.rems(xxs) sizing.rems(s);
+      position: relative;
+      top: sizing.rems(xxxs);
+      cursor: pointer;
+      margin: 0 sizing.rems(xs);
+
+      &:hover {
+        background: var(--ui-gray-starker-3);
+      }
+
+      &:active {
+        background: var(--ui-gray-starker-2);
+      }
+    }
+  }
+
+  .rose-header-utilities {
+    grid-area: utilities;
+
+    .rose-header-utilities-flex {
+      margin-right: sizing.rems(s);
+      display: flex;
+      flex-wrap: wrap;
+      flex-direction: row-reverse;
+    }
+  }
+
+  .rose-header-navigation,
+  .rose-header-utilities {
+    .rose-header-dropdown {
+      &[open] {
+        .rose-header-dropdown-trigger {
+          background: var(--white);
+          color: var(--ui-gray-starker-4);
+
+          .rose-header-dropdown-chevron {
+            background-image: url(map-get($dropdown-chevron, 'open'));
+          }
+        }
+      }
+
+      .rose-header-dropdown-trigger {
+        padding: sizing.rems(xxs) sizing.rems(s);
+        border-radius: sizing.rems(xxxs);
+        color: var(--white);
+        position: relative;
+        top: sizing.rems(xxxs);
+        cursor: pointer;
+        &::-webkit-details-marker {
+          display: none;
+        }
+
+        .rose-header-dropdown-chevron {
+          background-image: url(map-get($dropdown-chevron, 'default'));
+          width: sizing.rems(m);
+          height: sizing.rems(m);
+          background-repeat: no-repeat;
+          display: inline-block;
+          vertical-align: middle;
+        }
+      }
+
+      .rose-header-dropdown-content {
+        position: absolute;
+        background-color: var(--white);
+        border-radius: sizing.rems(xxxs);
+        border: 1px solid var(--ui-gray-subtler-2);
+        padding-right: sizing.rems(xl);
+        margin-top: sizing.rems(xxxs);
+
+        &.rose-header-dropdown-content-right {
+          right: sizing.rems(s);
+        }
+
+        .rose-header-dropdown-content-link {
+          padding: sizing.rems(xs) sizing.rems(s);
+          text-decoration: none;
+          display: block;
+          color: var(--ui-gray-starker-4);
+          height: sizing.rems(l);
+        }
+
+        .rose-header-dropdown-content-button {
+          button {
+            cursor: pointer;
+            padding: sizing.rems(xs) sizing.rems(s);
+            color: var(--ui-gray-starker-4);
+            display: inline-block;
+            border: none;
+            text-decoration: none;
+            font-size: inherit;
+            font-weight: inherit;
+            -webkit-appearance: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: media.width(small)) {
+  .rose-header {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      'brand utilities'
+      'navigation navigation';
+    padding-bottom: 0;
+
+    .rose-header-navigation {
+      background: var(--ui-header-subtler);
+      padding: sizing.rems(xs) sizing.rems(s);
+
+      .rose-header-navigation-link {
+        border: 1px solid var(--ui-gray-subtler);
+
+        &:hover {
+          background: var(--ui-gray-starker-3);
+        }
+      }
+    }
+  }
+}

addons/rose/addon/styles/rose/components/_index.scss

@@ -1,2 +1,3 @@
 @import 'button';
 @import 'form';
+@import 'header';

addons/rose/addon/styles/rose/variables/_index.scss

@@ -2,3 +2,4 @@
 @import 'typography';
 @import 'color';
 @import 'opacity';
+@import 'media';

addons/rose/addon/styles/rose/variables/_media.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+
+/**
+ * SASS variables various media query sizes
+ */
+
+$width-breakpoints: (
+  xxlarge: 1440px,
+  xlarge: 1200px,
+  large: 1024px,
+  medium: 768px,
+  small: 480px,
+  xsmall: 320px,
+);
+
+/**
+ * Returns a media width variable.
+ */
+@function width($name) {
+  @return map.get($width-breakpoints, $name);
+}

addons/rose/addon/styles/rose/variables/color/_css.scss

@@ -74,6 +74,8 @@
   --ui-gray-starker-2: #{color(ui-gray, 700)};
   --ui-gray-starker-3: #{color(ui-gray, 800)};
   --ui-gray-starker-4: #{color(ui-gray, 900)};
+
+  --ui-header-subtler: #{color(ui-cool-gray, 700)};
 }
 
 // Dark Mode
@@ -131,5 +133,7 @@
     --ui-gray-starker-2: #{color(ui-gray, 100)};
     --ui-gray-starker-3: #{color(ui-gray, 050)};
     --ui-gray-starker-4: #{color(ui-gray, 010)};
+
+    --ui-header-subtler: #{color(ui-cool-gray, 100)};
   }
 }

addons/rose/addon/templates/components/rose/header.hbs

@@ -0,0 +1,8 @@
+<div ...attributes
+ class="rose-header" >
+  {{yield (hash
+    brand=(component 'rose/header/brand')
+    utilities=(component 'rose/header/utilities')
+    navigation=(component 'rose/header/navigation')
+  )}}
+</div>

addons/rose/addon/templates/components/rose/header/brand.hbs

@@ -0,0 +1 @@
+<span class="rose-header-brand" />

addons/rose/addon/templates/components/rose/header/dropdown.hbs

@@ -0,0 +1,8 @@
+<details class="rose-header-dropdown" ...attributes
+  {{on-click-outside this.close}}>
+
+  {{yield (hash
+    trigger=(component 'rose/header/dropdown/trigger')
+    content=(component 'rose/header/dropdown/content' alignRight=@alignRight)
+  )}}
+</details>

addons/rose/addon/templates/components/rose/header/dropdown/content.hbs

@@ -0,0 +1,6 @@
+<span class="rose-header-dropdown-content {{if @alignRight "rose-header-dropdown-content-right"}}" ...attributes>
+  {{yield (hash
+    link=(component 'link-to' class="rose-header-dropdown-content-link")
+    button=(component 'rose/header/dropdown/content/button')
+  )}}
+</span>

addons/rose/addon/templates/components/rose/header/dropdown/content/button.hbs

@@ -0,0 +1,3 @@
+<span class="rose-header-dropdown-content-button">
+  <button type="button" ...attributes>{{yield}}</button>
+</span>

addons/rose/addon/templates/components/rose/header/dropdown/trigger.hbs

@@ -0,0 +1,4 @@
+<summary class="rose-header-dropdown-trigger" ...attributes>
+  {{yield}}
+  <span class="rose-header-dropdown-chevron" />
+</summary>

addons/rose/addon/templates/components/rose/header/navigation.hbs

@@ -0,0 +1,8 @@
+<span class="rose-header-navigation">
+  <span class="rose-header-navigation-flex">
+    {{yield (hash
+      link=(component 'link-to' class="rose-header-navigation-link")
+      dropdown=(component 'rose/header/dropdown')
+    )}}
+  </span>
+</span>

addons/rose/addon/templates/components/rose/header/utilities.hbs

@@ -0,0 +1,7 @@
+<span class="rose-header-utilities">
+  <span class="rose-header-utilities-flex">
+    {{yield (hash
+      dropdown=(component 'rose/header/dropdown' position="true")
+    )}}
+  </span>
+</span>

addons/rose/app/components/rose/header.js

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

addons/rose/app/components/rose/header/brand.js

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

addons/rose/app/components/rose/header/dropdown.js

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

addons/rose/app/components/rose/header/dropdown/content.js

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

addons/rose/app/components/rose/header/dropdown/content/button.js

@@ -0,0 +1 @@
+export { default } from 'rose/components/rose/header/dropdown/content/button';

addons/rose/app/components/rose/header/dropdown/trigger.js

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

addons/rose/app/components/rose/header/navigation.js

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

addons/rose/app/components/rose/header/utilities.js

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

addons/rose/app/modifiers/on-click-outside.js

@@ -0,0 +1 @@
+export { default } from 'rose/modifiers/on-click-outside';

addons/rose/package.json

@@ -57,6 +57,7 @@
     "ember-inline-svg": "^1.0.0",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-modifier": "^1.0.3",
     "ember-qunit": "^4.6.0",
     "ember-radio-button": "^2.0.1",
     "ember-resolver": "^7.0.0",

addons/rose/tests/dummy/app/router.js

@@ -6,4 +6,6 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {});
+Router.map(function () {
+  this.route('about');
+});

addons/rose/tests/dummy/app/templates/index.hbs

@@ -1,3 +1,29 @@
+<Rose::Header name="main header" as |header|>
+  <header.brand />
+
+  <header.navigation as |nav|>
+    <nav.dropdown as |dropdown|>
+      <dropdown.trigger>Org name</dropdown.trigger>
+      <dropdown.content as |content|>
+        <content.link @route="about">link</content.link>
+        <content.button>button</content.button>
+      </dropdown.content>
+    </nav.dropdown>
+    <nav.link @route="about">Section</nav.link>
+  </header.navigation>
+
+  <header.utilities as |utilities|>
+    <utilities.dropdown @alignRight={{true}} as |dropdown|>
+      <dropdown.trigger><Rose::Icon @name="user-square-outline" /></dropdown.trigger>
+      <dropdown.content as |content|>
+        <content.link @route="about">link</content.link>
+        <content.button>button</content.button>
+      </dropdown.content>
+    </utilities.dropdown>
+  </header.utilities>
+</Rose::Header>
+
+
 Dummy app index template
 
 <h2>Icon</h2>

addons/rose/tests/integration/components/rose/header-test.js

@@ -0,0 +1,58 @@
+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/header', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header />`);
+    assert.ok(find('.rose-header'));
+  });
+
+  test('it renders with brand', async function (assert) {
+    await render(hbs`<Rose::Header as |header| >
+      <header.brand></header.brand>
+    </Rose::Header>`);
+    assert.ok(find('.rose-header-brand'));
+    assert.notOk(find('.rose-header-navigation'));
+    assert.notOk(find('.rose-header-utilities'));
+  });
+
+  test('it renders with navigation', async function (assert) {
+    await render(hbs`<Rose::Header as |header| >
+      <header.navigation />
+    </Rose::Header>`);
+    assert.ok(find('.rose-header-navigation'));
+    assert.notOk(find('.rose-header-brand'));
+    assert.notOk(find('.rose-header-utilities'));
+  });
+
+  test('it renders with navigation elements', async function (assert) {
+    await render(hbs`<Rose::Header as |header| >
+      <header.navigation as |nav|>
+        <nav.link @route="about"/>
+      </header.navigation>
+    </Rose::Header>`);
+    assert.ok(find('.rose-header-navigation-link'));
+  });
+
+  test('it renders with utilities', async function (assert) {
+    await render(hbs`<Rose::Header as |header| >
+      <header.utilities />
+    </Rose::Header>`);
+    assert.notOk(find('.rose-header-brand'));
+    assert.notOk(find('.rose-header-navigation'));
+    assert.ok(find('.rose-header-utilities'));
+  });
+
+  test('it renders with utility elements', async function (assert) {
+    await render(hbs`<Rose::Header as |header| >
+      <header.utilities as |utility| >
+        <utility.dropdown />
+      </header.utilities>
+    </Rose::Header>`);
+    assert.ok(find('.rose-header-dropdown'));
+  });
+});

addons/rose/tests/integration/components/rose/header/brand-test.js

@@ -0,0 +1,13 @@
+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/header/brand', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header::Brand />`);
+    assert.ok(find('.rose-header-brand'));
+  });
+});

addons/rose/tests/integration/components/rose/header/dropdown-test.js

@@ -0,0 +1,78 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click, find, findAll } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/header/dropdown', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown />`);
+    assert.ok(find('.rose-header-dropdown'));
+  });
+
+  test('it renders with html attributes', async function (assert) {
+    await render(
+      hbs`<Rose::Header::Dropdown id="custom-id" class="custom-class"/>`
+    );
+    assert.ok(find('#custom-id'));
+    assert.ok(find('.custom-class'));
+  });
+
+  test('it renders with trigger', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown as |dropdown|>
+      <dropdown.trigger>Click me</dropdown.trigger>
+    </Rose::Header::Dropdown>`);
+    assert.ok(find('.rose-header-dropdown-trigger'));
+    assert.equal(
+      find('.rose-header-dropdown-trigger').textContent.trim(),
+      'Click me'
+    );
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown as |dropdown|>
+      <dropdown.content as |content|>
+        <content.link @route="about"/>
+        <content.link @route="about"/>
+        <content.button />
+        <content.button />
+        <content.button />
+      </dropdown.content>
+    </Rose::Header::Dropdown>`);
+    assert.ok(find('.rose-header-dropdown-content'));
+    assert.equal(findAll('a').length, 2);
+    assert.equal(findAll('button').length, 3);
+  });
+
+  test('it is toggled on click on trigger content', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown id="dropdown" as |dropdown|>
+      <dropdown.trigger id="trigger">Click me</dropdown.trigger>
+      <dropdown.content as |content|>
+        <content.button />
+      </dropdown.content>
+    </Rose::Header::Dropdown>`);
+    assert.notOk(find('#dropdown').open);
+
+    await click('#trigger');
+    assert.ok(find('#dropdown').open);
+
+    await click('#trigger');
+    assert.notOk(find('#dropdown').open);
+  });
+
+  test('it is closed with outside click is triggered', async function (assert) {
+    await render(hbs`<div id="wrapper"><Rose::Header::Dropdown id="dropdown" as |dropdown|>
+      <dropdown.trigger id="trigger">Click me</dropdown.trigger>
+      <dropdown.content as |content|>
+        <content.button />
+      </dropdown.content>
+    </Rose::Header::Dropdown></div>`);
+
+    await click('#trigger');
+    assert.ok(find('#dropdown').open);
+
+    await click('#wrapper');
+    assert.notOk(find('#dropdown').open);
+  });
+});

addons/rose/tests/integration/components/rose/header/dropdown/content-test.js

@@ -0,0 +1,75 @@
+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/header/dropdown/content', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Content />`);
+    assert.ok(find('.rose-header-dropdown-content'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Content>
+      content
+    </Rose::Header::Dropdown::Content>`);
+    assert.equal(
+      find('.rose-header-dropdown-content').textContent.trim(),
+      'content'
+    );
+  });
+
+  test('it renders with html attributes', async function (assert) {
+    await render(
+      hbs`<Rose::Header::Dropdown::Content id="dropdown-content" class="universe" />`
+    );
+    assert.equal(find('.rose-header-dropdown-content').id, 'dropdown-content');
+    assert.ok(
+      find('.rose-header-dropdown-content').className.match('universe')
+    );
+  });
+
+  test('it is positioned right when @alignRight={{true}}', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Content />`);
+    assert.notOk(find('.rose-header-dropdown-content-right'));
+
+    await render(
+      hbs`<Rose::Header::Dropdown::Content @alignRight="{{true}}"/>`
+    );
+    assert.ok(find('.rose-header-dropdown-content-right'));
+  });
+
+  test('it render link element', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Content as |content|>
+      <content.link @route="about" />
+    </Rose::Header::Dropdown::Content>`);
+    assert.ok(find('a'));
+    assert.ok(find('.rose-header-dropdown-content-link'));
+  });
+
+  test('it render link element with content', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Content as |content|>
+      <content.link @route="about">linkify</content.link>
+    </Rose::Header::Dropdown::Content>`);
+    assert.equal(find('a').textContent.trim(), 'linkify');
+  });
+
+  test('it render button element', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Content as |content|>
+      <content.button />
+    </Rose::Header::Dropdown::Content>`);
+    assert.ok(find('button'));
+    assert.ok(find('.rose-header-dropdown-content-button'));
+  });
+
+  test('it render button element with content', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Content as |content|>
+      <content.button>dropdown button</content.button>
+    </Rose::Header::Dropdown::Content>`);
+    assert.equal(find('button').textContent.trim(), 'dropdown button');
+  });
+});

addons/rose/tests/integration/components/rose/header/dropdown/content/button-test.js

@@ -0,0 +1,32 @@
+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/header/dropdown/content/button',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('it renders', async function (assert) {
+      await render(hbs`<Rose::Header::Dropdown::Content::Button />`);
+      assert.ok(find('.rose-header-dropdown-content-button'));
+    });
+
+    test('it renders with content', async function (assert) {
+      await render(
+        hbs`<Rose::Header::Dropdown::Content::Button>Button content</Rose::Header::Dropdown::Content::Button>`
+      );
+      assert.equal(
+        find('.rose-header-dropdown-content-button').textContent.trim(),
+        'Button content'
+      );
+    });
+
+    test('it render button element', async function (assert) {
+      await render(hbs`<Rose::Header::Dropdown::Content::Button />`);
+      assert.ok(find('button'));
+      assert.equal(find('button').type, 'button');
+    });
+  }
+);

addons/rose/tests/integration/components/rose/header/dropdown/trigger-test.js

@@ -0,0 +1,41 @@
+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/header/dropdown/trigger', function (
+  hooks
+) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Trigger />`);
+    assert.ok(find('.rose-header-dropdown-trigger'));
+    assert.notOk(find('.rose-header-dropdown-open'));
+  });
+
+  test('it renders with content', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Trigger>
+      trigger content
+    </Rose::Header::Dropdown::Trigger>`);
+    assert.equal(
+      find('.rose-header-dropdown-trigger').textContent.trim(),
+      'trigger content'
+    );
+  });
+
+  test('it renders with html attributes', async function (assert) {
+    await render(
+      hbs`<Rose::Header::Dropdown::Trigger id="trigger" class="dropdown-trigger" />`
+    );
+    assert.equal(find('.rose-header-dropdown-trigger').id, 'trigger');
+    assert.ok(
+      find('.rose-header-dropdown-trigger').className.match('dropdown-trigger')
+    );
+  });
+
+  test('it renders chevron', async function (assert) {
+    await render(hbs`<Rose::Header::Dropdown::Trigger />`);
+    assert.ok(find('.rose-header-dropdown-chevron'));
+  });
+});

addons/rose/tests/integration/components/rose/header/navigation-test.js

@@ -0,0 +1,29 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/header/navigation', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header::Navigation />`);
+    assert.ok(find('.rose-header-navigation'));
+  });
+
+  test('it renders navigation link elements', async function (assert) {
+    await render(hbs`<Rose::Header::Navigation as |navigation| >
+      <navigation.link @route="about"/>
+      <navigation.link @route="about"/>
+    </Rose::Header::Navigation>`);
+    assert.equal(findAll('a').length, 2);
+  });
+
+  test('it renders navigation dropdown elements', async function (assert) {
+    await render(hbs`<Rose::Header::Navigation as |navigation| >
+      <navigation.dropdown />
+      <navigation.dropdown />
+    </Rose::Header::Navigation>`);
+    assert.equal(findAll('.rose-header-dropdown').length, 2);
+  });
+});

addons/rose/tests/integration/components/rose/header/utilities-test.js

@@ -0,0 +1,21 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, find, findAll } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | rose/header/utilities', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header::Utilities />`);
+    assert.ok(find('.rose-header-utilities'));
+  });
+
+  test('it renders navigation dropdown elements', async function (assert) {
+    await render(hbs`<Rose::Header::Utilities as |navigation| >
+      <navigation.dropdown />
+      <navigation.dropdown />
+    </Rose::Header::Utilities>`);
+    assert.equal(findAll('.rose-header-dropdown').length, 2);
+  });
+});

addons/rose/tests/integration/modifiers/on-click-outside-test.js

@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Modifier | on-click-outside', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it fires event when an outside element is clicked', async function (assert) {
+    this.set('clickedOutside', (element, event) => {
+      assert.ok(element);
+      assert.equal(event.target.id, 'outside');
+    });
+
+    await render(hbs`<div id="outside"></div>
+    <div id="inside" {{on-click-outside this.clickedOutside}}></div>`);
+
+    await click('#outside');
+  });
+
+  test('it does not fire event when element is clicked', async function (assert) {
+    assert.expect(1);
+    this.set('clickedOutside', () => {
+      assert.ok(true);
+    });
+
+    await render(hbs`<div id="outside"></div>
+    <div id="inside" {{on-click-outside this.clickedOutside}}>
+      <div id="item" />
+    </div>`);
+
+    await click('#inside');
+    await click('#item');
+    await click('#outside');
+  });
+});