chore: 🤖 refactor header nav and nav link

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

@@ -7,13 +7,13 @@ import { text, boolean } from '@storybook/addon-knobs';
 
 # Header
 
-A header component that allows three distinct sections to be configured: brand, navigation, and utilities.
+A header component that allows three distinct sections to be configured: brand, nav, and utilities.
 
 ```htmlbars
-<Rose::Header name="main header" as |header|>
+<Rose::Header as |header|>
   <header.brand @logo="logo" @text="Product Name" />
 
-  <header.navigation as |nav|>
+  <header.nav as |nav|>
     <nav.dropdown as |dropdown|>
       <dropdown.trigger>Org name</dropdown.trigger>
       <dropdown.content as |content|>
@@ -22,7 +22,7 @@ A header component that allows three distinct sections to be configured: brand,
       </dropdown.content>
     </nav.dropdown>
     <nav.link @route="about">Section</nav.link>
-  </header.navigation>
+  </header.nav>
 
   <header.utilities as |utilities|>
     <utilities.dropdown as |dropdown|>
@@ -39,18 +39,18 @@ A header component that allows three distinct sections to be configured: brand,
 <Preview>
   <Story name="Basic">{{
     template: hbs`
-    <Rose::Header name="main header" as |header|>
+    <Rose::Header as |header|>
       <header.brand @logo="logo" @text="Product Name" />
-      <header.navigation as |nav|>
+      <header.nav as |nav|>
         <nav.dropdown as |dropdown|>
-          <dropdown.trigger>{{navigation-dropdown-label}}</dropdown.trigger>
+          <dropdown.trigger>{{nav-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>
+            <content.link @route="about">{{nav-dropdown-link-label}}</content.link>
+            <content.button>{{nav-dropdown-button-label}}</content.button>
           </dropdown.content>
         </nav.dropdown>
-        <nav.link @route="about">{{navigation-link-label}}</nav.link>
-      </header.navigation>
+        <nav.link @route="about">{{nav-link-label}}</nav.link>
+      </header.nav>
       <header.utilities as |utilities|>
         <utilities.dropdown @alignRight={{true}} as |dropdown|>
           <dropdown.trigger><Rose::Icon @name="user-square-outline" /></dropdown.trigger>
@@ -63,10 +63,10 @@ A header component that allows three distinct sections to be configured: brand,
     </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'),
+      'nav-dropdown-label': text('nav-dropdown-label', 'Org Name'),
+      'nav-dropdown-link-label': text('nav-dropdown-link-label', 'Menu Item'),
+      'nav-dropdown-button-label': text('nav-dropdown-button-label', 'Menu Item'),
+      'nav-link-label': text('nav-link-label', 'Section'),
     },
   }}</Story>
 </Preview>

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

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import layout from '../../../templates/components/rose/header/navigation';
+import layout from '../../../templates/components/rose/header/nav';
 
 export default Component.extend({
   layout,

addons/rose/addon/styles/rose/components/header/_catchall.scss

@@ -1,12 +1,12 @@
-.rose-header-navigation {
-  grid-area: navigation;
+.rose-header-nav {
+  grid-area: nav;
 
-  .rose-header-navigation-flex {
+  .rose-header-nav-flex {
     display: flex;
     flex-wrap: wrap;
   }
 
-  .rose-header-navigation-link {
+  .rose-header-nav-link {
     text-decoration: none;
     display: block;
     color: var(--white);
@@ -40,7 +40,7 @@
   }
 }
 
-.rose-header-navigation,
+.rose-header-nav,
 .rose-header-utilities {
   .rose-header-dropdown {
     &[open] {
@@ -117,14 +117,14 @@
     grid-template-columns: 1fr 3fr;
     grid-template-areas:
       'brand utilities'
-      'navigation navigation';
+      'nav nav';
     padding-bottom: 0;
 
-    .rose-header-navigation {
+    .rose-header-nav {
       background: var(--ui-header-subtler);
       padding: sizing.rems(xs) sizing.rems(s);
 
-      .rose-header-navigation-link {
+      .rose-header-nav-link {
         border: 1px solid var(--ui-gray-subtler);
 
         &:hover {

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

@@ -3,6 +3,7 @@
 @use '../../utilities/type';
 
 @import 'brand';
+@import 'nav';
 
 $dropdown-chevron: (
   'default':
@@ -13,7 +14,17 @@ $dropdown-chevron: (
 
 .rose-header {
   display: grid;
-  grid-template-areas: 'brand navigation utilities';
+  grid-template-areas: 'brand nav utilities';
   grid-template-columns: 0.01fr auto 1fr;
   background: var(--black) linear-gradient(90deg, #191a1c 0%, #1b212d 100%);
 }
+
+@media (max-width: media.width(small)) {
+  .rose-header {
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas:
+      'brand utilities'
+      'nav nav';
+    padding-bottom: 0;
+  }
+}

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

@@ -0,0 +1,18 @@
+@use '../../../variables/media';
+
+@import 'link';
+
+.rose-header-nav {
+  grid-area: nav;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 10px 0;
+}
+
+@media (max-width: media.width(small)) {
+  .rose-header-nav {
+    padding: 10px 20px;
+    background: var(--ui-header-subtler);
+  }
+}

addons/rose/addon/styles/rose/components/header/nav/_link.scss

@@ -0,0 +1,28 @@
+@use '../../../variables/sizing';
+@use '../../../utilities/type';
+
+.rose-header-nav-link {
+  @include type.type(s, semibold);
+
+  // target line height is 16, which is not a standard line height
+  $lineHeight: 16 / 14;
+  line-height: $lineHeight;
+  text-decoration: none;
+
+  color: var(--white);
+  opacity: 0.5;
+
+  // again, nonstandard sizing for header stuff
+  padding: 6px 12px;
+  border-radius: 4px;
+
+  &.active {
+    opacity: 1;
+    background: #{color(ui-gray, 800)};
+  }
+
+  &:hover {
+    opacity: 1;
+    text-decoration: underline;
+  }
+}

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

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

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

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

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

@@ -1,8 +0,0 @@
-<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/app/components/rose/header/nav.js

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

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

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

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

@@ -1,9 +1,14 @@
-<Rose::Header name="main header" as |header|>
+<Rose::Header as |header|>
 
   <header.brand @logo="logo" @text="Product Name" />
 
+  <header.nav as |nav|>
+    <nav.link @route="index">Section</nav.link>
+    <nav.link @route="about">Section</nav.link>
+  </header.nav>
+
   {{!--
-  <header.navigation as |nav|>
+  <header.nav as |nav|>
     <nav.dropdown as |dropdown|>
       <dropdown.trigger>Org name</dropdown.trigger>
       <dropdown.content as |content|>
@@ -12,7 +17,7 @@
       </dropdown.content>
     </nav.dropdown>
     <nav.link @route="about">Section</nav.link>
-  </header.navigation>
+  </header.nav>
 
   <header.utilities as |utilities|>
     <utilities.dropdown @alignRight={{true}} as |dropdown|>

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

@@ -16,26 +16,26 @@ module('Integration | Component | rose/header', function (hooks) {
       <header.brand></header.brand>
     </Rose::Header>`);
     assert.ok(find('.rose-header-brand'));
-    assert.notOk(find('.rose-header-navigation'));
+    assert.notOk(find('.rose-header-nav'));
     assert.notOk(find('.rose-header-utilities'));
   });
 
-  test('it renders with navigation', async function (assert) {
+  test('it renders with nav', async function (assert) {
     await render(hbs`<Rose::Header as |header| >
-      <header.navigation />
+      <header.nav />
     </Rose::Header>`);
-    assert.ok(find('.rose-header-navigation'));
+    assert.ok(find('.rose-header-nav'));
     assert.notOk(find('.rose-header-brand'));
     assert.notOk(find('.rose-header-utilities'));
   });
 
-  test('it renders with navigation elements', async function (assert) {
+  test('it renders with nav elements', async function (assert) {
     await render(hbs`<Rose::Header as |header| >
-      <header.navigation as |nav|>
+      <header.nav as |nav|>
         <nav.link @route="about"/>
-      </header.navigation>
+      </header.nav>
     </Rose::Header>`);
-    assert.ok(find('.rose-header-navigation-link'));
+    assert.ok(find('.rose-header-nav-link'));
   });
 
   test('it renders with utilities', async function (assert) {
@@ -43,7 +43,7 @@ module('Integration | Component | rose/header', function (hooks) {
       <header.utilities />
     </Rose::Header>`);
     assert.notOk(find('.rose-header-brand'));
-    assert.notOk(find('.rose-header-navigation'));
+    assert.notOk(find('.rose-header-nav'));
     assert.ok(find('.rose-header-utilities'));
   });
 

addons/rose/tests/integration/components/rose/header/nav-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/nav', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    await render(hbs`<Rose::Header::nav />`);
+    assert.ok(find('.rose-header-nav'));
+  });
+
+  test('it renders nav link elements', async function (assert) {
+    await render(hbs`<Rose::Header::nav as |nav| >
+      <nav.link @route="index"/>
+      <nav.link @route="about"/>
+    </Rose::Header::nav>`);
+    assert.equal(findAll('a').length, 2);
+  });
+
+  test('it renders nav dropdown elements', async function (assert) {
+    await render(hbs`<Rose::Header::nav as |nav| >
+      <nav.dropdown />
+      <nav.dropdown />
+    </Rose::Header::nav>`);
+    assert.equal(findAll('.rose-header-dropdown').length, 2);
+  });
+});

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

@@ -1,29 +0,0 @@
-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

@@ -11,10 +11,10 @@ module('Integration | Component | rose/header/utilities', function (hooks) {
     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 />
+  test('it renders nav dropdown elements', async function (assert) {
+    await render(hbs`<Rose::Header::Utilities as |nav| >
+      <nav.dropdown />
+      <nav.dropdown />
     </Rose::Header::Utilities>`);
     assert.equal(findAll('.rose-header-dropdown').length, 2);
   });