fix: nav menu implementation (#99)

denali-design · Oct 15, 2021 · f2408cc · f2408cc
1 parent 3786fa2
commit f2408cc
Show file tree

Hide file tree

Showing 22 changed files with 222 additions and 144 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -3,4 +3,12 @@
 module.exports = {
   singleQuote: true,
   printWidth: 120,
+  overrides: [
+    {
+      files: '*.hbs',
+      options: {
+        singleQuote: false,
+      },
+    },
+  ],
 };
diff --git a/.template-lintrc.js b/.template-lintrc.js
@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended',
+  extends: 'stylistic',
 };
diff --git a/addon/components/denali-alert-inline.hbs b/addon/components/denali-alert-inline.hbs
@@ -1,11 +1,11 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-<div class='alert is-inline {{this.styleClass}}' ...attributes>
+<div class="alert is-inline {{this.styleClass}}" ...attributes>
   <p>
     {{#if (has-block)}}
-      {{yield (hash Title=(component 'denali-span' class='is-bold'))}}
-      {{yield (hash Context=(component 'denali-span'))}}
+      {{yield (hash Title=(component "denali-span" class="is-bold"))}}
+      {{yield (hash Context=(component "denali-span"))}}
     {{else}}
-      <DenaliSpan @class='is-bold'>
+      <DenaliSpan @class="is-bold">
         {{this.title}}
       </DenaliSpan>
       {{! template-lint-disable simple-unless }}

diff --git a/addon/components/denali-alert.hbs b/addon/components/denali-alert.hbs
@@ -1,10 +1,10 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-<div class='alert {{this.typeClass}} {{this.isBlockClass}}' ...attributes>
-  <span class='d-icon {{this.iconClass}}'></span>
+<div class="alert {{this.typeClass}} {{this.isBlockClass}}" ...attributes>
+  <span class="d-icon {{this.iconClass}}"></span>
   <div>
     {{#if (has-block)}}
-      {{yield (hash Title=(component 'denali-alert/title'))}}
-      {{yield (hash Context=(component 'denali-alert/context'))}}
+      {{yield (hash Title=(component "denali-alert/title"))}}
+      {{yield (hash Context=(component "denali-alert/context"))}}
     {{else}}
       <h5>{{this.title}}</h5>
       {{! template-lint-disable simple-unless }}
@@ -14,8 +14,8 @@
     {{/if}}
   </div>
   {{#if this.onClose}}
-    <span class='link close is-secondary' role='button' {{on 'click' this.onClose}}>
-      <span class='d-icon d-close is-sub'></span>
+    <span class="link close is-secondary" role="button" {{on "click" this.onClose}}>
+      <span class="d-icon d-close is-sub"></span>
     </span>
   {{/if}}
 </div>
diff --git a/addon/components/denali-menu.hbs b/addon/components/denali-menu.hbs
@@ -1,12 +1,12 @@
 {{! Copyright 2021, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
 <div
-  class='menu {{this.alignContentClass}} {{this.isActiveClass}} {{this.class}}'
+  class="menu {{this.alignContentClass}} {{this.isActiveClass}} {{this.class}}"
   ...attributes
-  {{on 'mouseenter' this.toggleIsActive}}
-  {{on 'mouseleave' this.toggleIsActive}}
+  {{on "mouseenter" this.toggleIsActive}}
+  {{on "mouseleave" this.toggleIsActive}}
 >
-  {{yield (hash Trigger=(component 'denali-menu/trigger' triggerClass=this.triggerClass))}}
+  {{yield (hash Trigger=(component "denali-menu/trigger" class=this.triggerClass))}}
   {{#if this.isActive}}
-    {{yield (hash Content=(component 'denali-menu/content'))}}
+    {{yield (hash Content=(component "denali-menu/content" class=this.contentClass))}}
   {{/if}}
 </div>
diff --git a/addon/components/denali-menu.js b/addon/components/denali-menu.js
@@ -12,7 +12,9 @@ import { action } from '@ember/object';
 export default class DenaliMenuComponent extends Component {
   @tracked isActive = false;
 
+  @arg(string) class = '';
   @arg(string) triggerClass = '';
+  @arg(string) contentClass = '';
 
   @arg(oneOf(ALIGNMENTS)) alignContent;
 

diff --git a/addon/components/denali-menu/content.hbs b/addon/components/denali-menu/content.hbs
@@ -1,4 +1,4 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-<div class="menu-content" ...attributes>
+<div class="menu-content {{this.class}}" ...attributes>
   {{yield}}
 </div>
diff --git a/addon/components/denali-menu/content.js b/addon/components/denali-menu/content.js
@@ -0,0 +1,11 @@
+/**
+ * Copyright 2021, Yahoo
+ * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
+ */
+import Component from '@glimmer/component';
+import { arg } from 'ember-arg-types';
+import { string } from 'prop-types';
+
+export default class DenaliMenuTriggerComponent extends Component {
+  @arg(string) class = '';
+}
diff --git a/addon/components/denali-menu/trigger.hbs b/addon/components/denali-menu/trigger.hbs
@@ -1,5 +1,4 @@
 {{! Copyright 2021, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-{{! template-lint-disable link-href-attributes}}
-<span class='menu-trigger link {{this.triggerClass}}' ...attributes>
+<div class="menu-trigger {{this.class}}" ...attributes>
   {{yield}}
-</span>
+</div>
diff --git a/addon/components/denali-menu/trigger.js b/addon/components/denali-menu/trigger.js
@@ -1,11 +1,11 @@
 /**
- * Copyright 2020, Verizon Media
+ * Copyright 2020, Yahoo
  * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
  */
 import Component from '@glimmer/component';
 import { arg } from 'ember-arg-types';
 import { string } from 'prop-types';
 
 export default class DenaliMenuTriggerComponent extends Component {
-  @arg(string) triggerClass = '';
+  @arg(string) class = '';
 }
diff --git a/addon/components/denali-navbar/icon.hbs b/addon/components/denali-navbar/icon.hbs
@@ -1,5 +1,5 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-<span class="nav-icon" ...attributes>
+<span class="nav-item" ...attributes>
   <DenaliIcon @icon={{@icon}} />
   {{#if @name}}
     <span class="icon-name">{{@name}}</span>

diff --git a/addon/components/denali-navbar/section.hbs b/addon/components/denali-navbar/section.hbs
@@ -2,13 +2,13 @@
 <div class={{@class}} ...attributes>
   {{yield
     (hash
-      Logo=(component 'denali-navbar/logo')
-      Item=(component 'denali-navbar/item')
-      Icon=(component 'denali-navbar/icon')
-      Control=(component 'denali-navbar/control')
-      LinkTo=(component 'denali-link-to' classNames='nav-item')
-      Link=(component 'denali-link' class='nav-item')
-      Menu=(component 'denali-menu' class='nav-menu' triggerClass='menu--nav is-right')
+      Logo=(component "denali-navbar/logo")
+      Item=(component "denali-navbar/item")
+      Icon=(component "denali-navbar/icon")
+      Control=(component "denali-navbar/control")
+      LinkTo=(component "denali-link-to" classNames="nav-item")
+      Link=(component "denali-link" class="nav-item")
+      Menu=(component "denali-menu" class="menu--nav is-right" triggerClass="nav-item")
     )
   }}
 </div>
diff --git a/addon/components/denali-progress.hbs b/addon/components/denali-progress.hbs
@@ -1,8 +1,8 @@
 {{! Copyright 2021, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
-<div class='d-progress {{this.hasLoaderClass}} {{this.sizeClass}}' ...attributes>
+<div class="d-progress {{this.hasLoaderClass}} {{this.sizeClass}}" ...attributes>
   {{#unless this.hasLoaderClass}}
     {{#if (has-block)}}
-      {{yield (hash Bar=(component 'denali-progress/bar' value=@value color=@color shade=@shade))}}
+      {{yield (hash Bar=(component "denali-progress/bar" value=@value color=@color shade=@shade))}}
     {{else}}
       <DenaliProgress::Bar @value={{@value}} @color={{@color}} @shade={{@shade}} />
     {{/if}}

diff --git a/addon/components/denali-tag.hbs b/addon/components/denali-tag.hbs
@@ -1,30 +1,30 @@
 {{! Copyright 2020, Verizon Media. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. }}
 <span
-  class='tag
+  class="tag
     {{this.isActiveClass}}
     {{this.isDisabledClass}}
     {{this.isOutlinedClass}}
     {{this.isSmallClass}}
     {{this.hasIconFront}}
-    {{this.hasIconBack}}'
+    {{this.hasIconBack}}"
   ...attributes
 >
   {{#if this.iconFront}}
     {{! template-lint-disable no-invalid-interactive }}
     <i
-      class='d-icon d-{{this.iconFront}} {{this.iconFrontClass}}'
-      role={{if @onIconFrontClick 'button'}}
-      {{on 'click' this.onIconFrontClick}}
+      class="d-icon d-{{this.iconFront}} {{this.iconFrontClass}}"
+      role={{if @onIconFrontClick "button"}}
+      {{on "click" this.onIconFrontClick}}
     ></i>
   {{/if}}
 
   {{yield}}
 
   {{#if this.iconBack}}
     <i
-      class='d-icon d-{{this.iconBack}} {{this.iconBackClass}}'
-      role={{if @onIconBackClick 'button'}}
-      {{on 'click' this.onIconBackClick}}
+      class="d-icon d-{{this.iconBack}} {{this.iconBackClass}}"
+      role={{if @onIconBackClick "button"}}
+      {{on "click" this.onIconBackClick}}
     ></i>
   {{/if}}
 </span>
diff --git a/package.json b/package.json
@@ -78,24 +78,27 @@
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.28.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^3.6.0",
+    "ember-template-lint": "^3.10.0",
     "ember-try": "^1.4.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-ember": "^10.5.4",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-qunit": "^6.2.0",
     "husky": "^4.2.5",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
-    "pretty-quick": "^2.0.1",
+    "prettier": "^2.4.1",
+    "pretty-quick": "^3.1.1",
     "qunit": "^2.16.0",
     "qunit-dom": "^1.6.0",
     "sass": "^1.25.0",
     "semantic-release": "^17.4.2"
   },
+  "resolutions": {
+    "socket.io": "2.4.1"
+  },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged",

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -1,11 +1,23 @@
 <DenaliNavbar @isResponsive={{true}} as |Nav|>
   <Nav.Left as |Left|>
-    <Left.Logo @src='https://denali.design/assets/images/denali-logo.png' />
+    <Left.Logo @src="https://denali.design/images/denali-logo-white-solid.png" />
   </Nav.Left>
   <Nav.Right as |Right|>
-    <a href='https://github.com/denali-design/denali-ember'>
-      <Right.Icon @icon='github' @name='GitHub' />
-    </a>
+    <Right.Menu as |Menu|>
+      <Menu.Trigger>
+        Menu
+        <DenaliIcon @size="small" @icon="arrowhead-down" />
+      </Menu.Trigger>
+
+      <Menu.Content>
+        <DenaliLink href="https://denali-design.github.io/denali-ember/">Denali Ember Storybook</DenaliLink>
+        <DenaliLink href="https://denali-design.github.io/denali-css/">Denali CSS Storybook</DenaliLink>
+      </Menu.Content>
+    </Right.Menu>
+
+    <DenaliLink href="https://github.com/denali-design/denali-ember">
+      <Right.Icon @icon="github" @name="GitHub" />
+    </DenaliLink>
   </Nav.Right>
 </DenaliNavbar>
 {{outlet}}
diff --git a/tests/integration/components/denali-menu-test.js b/tests/integration/components/denali-menu-test.js
@@ -8,7 +8,13 @@ module('Integration | Component | denali-menu', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`
-      <DenaliMenu class="test-menu" as |Menu|>
+      <DenaliMenu
+        @class="class-arg"
+        @triggerClass="trigger-class-arg"
+        @contentClass="content-class-arg"
+        class="test-menu"
+        as |Menu|
+      >
         <Menu.Trigger>Hover</Menu.Trigger>
         <Menu.Content>
           <ul>
@@ -21,13 +27,16 @@ module('Integration | Component | denali-menu', function (hooks) {
     `);
 
     assert.dom('.test-menu').exists('The test menu is rendered');
+    assert.dom('.test-menu').hasClass('class-arg', 'The menu class is present');
 
+    assert.dom('.test-menu .menu-trigger').hasClass('trigger-class-arg', 'The menu trigger class is present');
     assert.dom('.test-menu .menu-trigger').hasText('Hover', 'The trigger has the appropriate text');
 
     assert.dom('.test-menu .menu-content').doesNotExist('menu content is not rendered when menu is not active');
 
     await triggerEvent('.test-menu', 'mouseenter');
 
+    assert.dom('.test-menu .menu-content').hasClass('content-class-arg', 'The menu content class is present');
     assert
       .dom('.test-menu .menu-content li')
       .exists({ count: 3 }, 'Three li elements are rendered in the menu content');

diff --git a/tests/integration/components/denali-menu/content-test.js b/tests/integration/components/denali-menu/content-test.js
@@ -8,11 +8,12 @@ module('Integration | Component | denali-menu/content', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`
-      <DenaliMenu::Content>
+      <DenaliMenu::Content @class="class-arg">
         Inner Content
       </DenaliMenu::Content>
     `);
 
+    assert.dom('div.menu-content').hasClass('class-arg', 'The content class is present');
     assert.dom('div.menu-content').hasText('Inner Content', 'Menu content div is rendered');
   });
 });
diff --git a/tests/integration/components/denali-menu/trigger-test.js b/tests/integration/components/denali-menu/trigger-test.js
@@ -7,14 +7,13 @@ module('Integration | Component | denali-menu/trigger', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders', async function (assert) {
-    assert.expect(1);
-
     await render(hbs`
-      <DenaliMenu::Trigger>
+      <DenaliMenu::Trigger @class="class-arg">
         Trigger
       </DenaliMenu::Trigger>
     `);
 
-    assert.dom('span.menu-trigger').hasText('Trigger', 'The trigger renders the text within an anchor tag');
+    assert.dom('div.menu-trigger').hasClass('class-arg', 'The trigger class is present');
+    assert.dom('div.menu-trigger').hasText('Trigger', 'The trigger renders the text within an anchor tag');
   });
 });