From 066f8676a8395ceffd2657dc9906d9df6036a4f6 Mon Sep 17 00:00:00 2001
From: Jonas Cosandey <jonas.cosandey@adfinis.com>
Date: Thu, 25 Jun 2020 13:04:54 +0200
Subject: [PATCH] feat(nav): add nav components

---
 addon/components/nav.hbs                      |  5 ++++
 addon/components/nav/item.hbs                 |  5 ++++
 addon/components/nav/item.js                  | 10 +++++++
 app/components/nav.js                         |  1 +
 app/components/nav/item.js                    |  1 +
 tests/integration/components/nav-test.js      | 19 +++++++++++++
 tests/integration/components/nav/item-test.js | 28 +++++++++++++++++++
 7 files changed, 69 insertions(+)
 create mode 100644 addon/components/nav.hbs
 create mode 100644 addon/components/nav/item.hbs
 create mode 100644 addon/components/nav/item.js
 create mode 100644 app/components/nav.js
 create mode 100644 app/components/nav/item.js
 create mode 100644 tests/integration/components/nav-test.js
 create mode 100644 tests/integration/components/nav/item-test.js

diff --git a/addon/components/nav.hbs b/addon/components/nav.hbs
new file mode 100644
index 00000000..2e855cf5
--- /dev/null
+++ b/addon/components/nav.hbs
@@ -0,0 +1,5 @@
+<ul
+  class="uk-subnav uk-subnav-divider uk-subnav-pill uk-width-1 uk-child-width-1-4 uk-text-center uk-padding-small uk-padding-remove-horizontal"
+>
+  {{yield}}
+</ul>
diff --git a/addon/components/nav/item.hbs b/addon/components/nav/item.hbs
new file mode 100644
index 00000000..144314f7
--- /dev/null
+++ b/addon/components/nav/item.hbs
@@ -0,0 +1,5 @@
+<li class="uk-child-width-1-1 {{if this.isActive 'uk-active'}}" ...attributes>
+  <LinkTo @route={{@route}}>
+    {{yield}}
+  </LinkTo>
+</li>
diff --git a/addon/components/nav/item.js b/addon/components/nav/item.js
new file mode 100644
index 00000000..3c3a97eb
--- /dev/null
+++ b/addon/components/nav/item.js
@@ -0,0 +1,10 @@
+import { inject as service } from "@ember/service";
+import Component from "@glimmer/component";
+
+export default class NavItemComponent extends Component {
+  @service router;
+
+  get isActive() {
+    return this.router.currentRoute.name.includes(this.args.route);
+  }
+}
diff --git a/app/components/nav.js b/app/components/nav.js
new file mode 100644
index 00000000..fb1e709a
--- /dev/null
+++ b/app/components/nav.js
@@ -0,0 +1 @@
+export { default } from "ember-emeis/components/nav";
diff --git a/app/components/nav/item.js b/app/components/nav/item.js
new file mode 100644
index 00000000..93e6b8d2
--- /dev/null
+++ b/app/components/nav/item.js
@@ -0,0 +1 @@
+export { default } from "ember-emeis/components/nav/item";
diff --git a/tests/integration/components/nav-test.js b/tests/integration/components/nav-test.js
new file mode 100644
index 00000000..63d5144d
--- /dev/null
+++ b/tests/integration/components/nav-test.js
@@ -0,0 +1,19 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | nav", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    await render(hbs`
+      <Nav>
+        <li>Nav 1</li>
+        <li>Nav 2</li>
+      </Nav>
+    `);
+
+    assert.dom("ul li").exists({ count: 2 });
+  });
+});
diff --git a/tests/integration/components/nav/item-test.js b/tests/integration/components/nav/item-test.js
new file mode 100644
index 00000000..d42e687a
--- /dev/null
+++ b/tests/integration/components/nav/item-test.js
@@ -0,0 +1,28 @@
+import { render } from "@ember/test-helpers";
+import { hbs } from "ember-cli-htmlbars";
+import { setupRenderingTest } from "ember-qunit";
+import { module, test } from "qunit";
+
+module("Integration | Component | nav/item", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("it renders", async function (assert) {
+    this.set("route", "test");
+
+    this.set("router", this.owner.lookup("router:main"));
+    this.set("router.currentRoute", { name: "someotherroute" });
+
+    await render(hbs`
+      <Nav::Item @route={{this.route}}>
+        Test
+      </Nav::Item>
+    `);
+
+    assert.dom("li").doesNotHaveClass("uk-active");
+    assert.dom("li a").hasText("Test");
+
+    this.set("router.currentRoute", { name: "some.test" });
+
+    assert.dom("li").hasClass("uk-active");
+  });
+});