From e6f130a84d0154e3e703b6a828f320220c00c839 Mon Sep 17 00:00:00 2001
From: LionelB <lionel@lumographe.fr>
Date: Wed, 6 Nov 2024 21:12:47 +0100
Subject: [PATCH] feat: add PixNavigationButton and PixNavigationSeparator

---
 addon/components/pix-navigation-button.hbs    | 35 ++++++++
 addon/components/pix-navigation-button.js     | 10 +++
 addon/components/pix-navigation-separator.hbs |  1 +
 addon/styles/_pix-navigation-button.scss      | 59 +++++++++++++
 addon/styles/_pix-navigation-separator.scss   | 13 +++
 addon/styles/addon.scss                       |  2 +
 app/components/pix-navigation-button.js       |  1 +
 app/components/pix-navigation-separator.js    |  1 +
 app/stories/pix-navigation.stories.js         | 36 +++-----
 .../components/pix-navigation-button-test.js  | 85 +++++++++++++++++++
 10 files changed, 220 insertions(+), 23 deletions(-)
 create mode 100644 addon/components/pix-navigation-button.hbs
 create mode 100644 addon/components/pix-navigation-button.js
 create mode 100644 addon/components/pix-navigation-separator.hbs
 create mode 100644 addon/styles/_pix-navigation-button.scss
 create mode 100644 addon/styles/_pix-navigation-separator.scss
 create mode 100644 app/components/pix-navigation-button.js
 create mode 100644 app/components/pix-navigation-separator.js
 create mode 100644 tests/integration/components/pix-navigation-button-test.js

diff --git a/addon/components/pix-navigation-button.hbs b/addon/components/pix-navigation-button.hbs
new file mode 100644
index 000000000..a9eea385b
--- /dev/null
+++ b/addon/components/pix-navigation-button.hbs
@@ -0,0 +1,35 @@
+{{#if @route}}
+  <LinkTo
+    @route={{@route}}
+    @models={{if @model (array @model) this.defaultModel}}
+    @query={{if @query @query this.defaultParams}}
+    class="pix-navigation-button"
+    ...attributes
+  >
+    {{#if @icon}}
+      <PixIcon
+        class="pix-navigation-button__icon"
+        @ariaHidden={{true}}
+        @name={{@icon}}
+        @plainIcon={{@iconPlain}}
+      />
+    {{/if}}
+    {{yield}}
+  </LinkTo>
+{{else}}
+  {{! template-lint-disable link-href-attributes }}
+  <a ...attributes class="pix-navigation-button" target={{if this.isLinkOpenInANewWindow "_blank"}}>
+    {{#if @icon}}
+      <PixIcon
+        class="pix-navigation-button__icon"
+        @ariaHidden={{true}}
+        @name={{@icon}}
+        @plainIcon={{@iconPlain}}
+      />
+    {{/if}}
+    {{yield}}
+    {{#if this.isLinkOpenInANewWindow}}
+      <PixIcon class="pix-navigation-button__external-icon" @ariaHidden={{true}} @name="openNew" />
+    {{/if}}
+  </a>
+{{/if}}
\ No newline at end of file
diff --git a/addon/components/pix-navigation-button.js b/addon/components/pix-navigation-button.js
new file mode 100644
index 000000000..ee15da372
--- /dev/null
+++ b/addon/components/pix-navigation-button.js
@@ -0,0 +1,10 @@
+import Component from '@glimmer/component';
+
+export default class PixNavigationButton extends Component {
+  defaultParams = {};
+  defaultModel = [];
+
+  get isLinkOpenInANewWindow() {
+    return this.args?.target === '_blank';
+  }
+}
diff --git a/addon/components/pix-navigation-separator.hbs b/addon/components/pix-navigation-separator.hbs
new file mode 100644
index 000000000..130c890a4
--- /dev/null
+++ b/addon/components/pix-navigation-separator.hbs
@@ -0,0 +1 @@
+<hr class="pix-navigation-separator" />
\ No newline at end of file
diff --git a/addon/styles/_pix-navigation-button.scss b/addon/styles/_pix-navigation-button.scss
new file mode 100644
index 000000000..370982f3f
--- /dev/null
+++ b/addon/styles/_pix-navigation-button.scss
@@ -0,0 +1,59 @@
+.pix-navigation-button {
+  @extend %pix-body-s;
+
+  --pix-navigation-button-bgcolor: var(--pix-neutral-100);
+
+  position: relative;
+  display: flex;
+  gap: var(--pix-spacing-2x);
+  align-items: center;
+  width: max-content;
+  width: 100%;
+  padding: var(--pix-spacing-2x) var(--pix-spacing-3x);
+  fill: var(--pix-navigation-button-bgcolor);
+
+  &:focus::before,
+  &:focus-visible::before,
+  &.active::before,
+  &:hover::before {
+    position: absolute;
+    top:0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    background-color: currentcolor;
+    border-radius: var(--pix-spacing-2x);
+    content: '';
+  }
+
+  &:hover::before {
+    opacity: .3;
+  }
+
+  &:focus, &:focus-visible {
+    border-radius: var(--pix-spacing-2x);
+    outline: 1px solid currentcolor ;
+
+    &::before{
+      opacity: .3;
+    }
+  }
+
+  &:active::before {
+    opacity: .5;
+  }
+
+  &.active::before {
+    opacity: .2;
+  }
+
+  &.active {
+    font-weight: var(--pix-font-bold);
+  }
+
+}
+
+.pix-navigation-button__external-icon {
+  width: 1rem;
+}
diff --git a/addon/styles/_pix-navigation-separator.scss b/addon/styles/_pix-navigation-separator.scss
new file mode 100644
index 000000000..ee568ddb8
--- /dev/null
+++ b/addon/styles/_pix-navigation-separator.scss
@@ -0,0 +1,13 @@
+.pix-navigation-separator {
+  @extend %pix-body-l;
+
+  margin: 0;
+  height: 1.25rem;
+  color: inherit;
+  border: none;
+  line-height: 1.25rem;
+  &::after {
+    content: '–';
+    font-weight: var(--pix-font-medium);
+  }
+}
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
index 5aeeb9e47..a594aa589 100644
--- a/addon/styles/addon.scss
+++ b/addon/styles/addon.scss
@@ -36,6 +36,8 @@
 @import 'trap-focus';
 @import 'pix-search-input';
 @import 'pix-navigation';
+@import 'pix-navigation-button';
+@import 'pix-navigation-separator';
 @import 'pix-app-layout';
 
 
diff --git a/app/components/pix-navigation-button.js b/app/components/pix-navigation-button.js
new file mode 100644
index 000000000..4899e5668
--- /dev/null
+++ b/app/components/pix-navigation-button.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-navigation-button';
diff --git a/app/components/pix-navigation-separator.js b/app/components/pix-navigation-separator.js
new file mode 100644
index 000000000..eedba8f22
--- /dev/null
+++ b/app/components/pix-navigation-separator.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-navigation-separator';
diff --git a/app/stories/pix-navigation.stories.js b/app/stories/pix-navigation.stories.js
index 2a7bb97f8..6d3646c5c 100644
--- a/app/stories/pix-navigation.stories.js
+++ b/app/stories/pix-navigation.stories.js
@@ -29,33 +29,22 @@ export const AppNavigation = (args) => {
       </a>
     </:brand>
     <:navElements>
-      <PixButtonLink @variant='tertiary' @route='hello' class='active'><PixIcon
-          @name='conversionPath'
-          @ariaHidden={{true}}
-        />Campagnes</PixButtonLink>
-      <PixButtonLink @variant='tertiary' @route='hello'><PixIcon
-          @name='infoUser'
-          @ariaHidden={{true}}
-        />Participants</PixButtonLink>
-      <PixButtonLink @variant='tertiary' @route='hello'><PixIcon
-          @name='users'
-          @ariaHidden={{true}}
-        />Équipe</PixButtonLink>
-      <PixButtonLink @variant='tertiary' @route='hello'><PixIcon
-          @name='seat'
-          @ariaHidden={{true}}
-        />Places</PixButtonLink>
-      <PixButtonLink @variant='tertiary' @href='https://pix.fr'><PixIcon
-          @name='book'
-          @ariaHidden={{true}}
-        />Documentation</PixButtonLink>
-      <PixButtonLink
-        @variant='tertiary'
+      <PixNavigationButton
+        @route='hello'
+        @icon='conversionPath'
+        class='active'
+      >Campagnes</PixNavigationButton>
+      <PixNavigationButton @route='hello' @icon='infoUser'>Participants</PixNavigationButton>
+      <PixNavigationButton @route='hello' @icon='users'>Équipe</PixNavigationButton>
+      <PixNavigationButton @route='hello' @icon='seat'> Places</PixNavigationButton>
+      <PixNavigationButton @href='https://pix.fr' @icon='book'> Documentation</PixNavigationButton>
+      <PixNavigationButton
         @href='https://pix.fr'
+        @icon='help'
         title='Pix.fr'
         target='_blank'
         @newWindowLabel='ouvre une nouvelle fenêtre'
-      ><PixIcon @name='help' @ariaHidden={{true}} />Centre d'aide</PixButtonLink>
+      >Centre d'aide</PixNavigationButton>
     </:navElements>
     <:footer>
       <p>
@@ -68,6 +57,7 @@ export const AppNavigation = (args) => {
           Organisation Test Pix (UAI003)
         </span>
       </p>
+      <PixNavigationSeparator />
       <PixButton @variant='primary' @iconBefore='codeNumber' @size='small'>
         J'ai un code
       </PixButton>
diff --git a/tests/integration/components/pix-navigation-button-test.js b/tests/integration/components/pix-navigation-button-test.js
new file mode 100644
index 000000000..e1fab5ee8
--- /dev/null
+++ b/tests/integration/components/pix-navigation-button-test.js
@@ -0,0 +1,85 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, within } from '@1024pix/ember-testing-library';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | pix-navigation-button', function (hooks) {
+  setupRenderingTest(hooks);
+  hooks.beforeEach(function () {
+    this.owner.setupRouter();
+  });
+  test('it renders an HTML link', async function (assert) {
+    // when
+    const screen = await render(
+      hbs`<PixNavigationButton @href='https://pix.fr'>content</PixNavigationButton>`,
+    );
+
+    // then
+    const link = screen.getByRole('link', { name: 'content' });
+    assert.strictEqual(link.getAttribute('href'), 'https://pix.fr');
+  });
+
+  test('it renders an HTML link in a new window', async function (assert) {
+    // when
+    const screen = await render(
+      hbs`<PixNavigationButton
+  @href='https://pix.fr'
+  @title='pix.fr'
+  @target='_blank'
+  @newWindowLabel='nouvelle fenêtre'
+>content</PixNavigationButton>`,
+    );
+
+    // then
+    const link = screen.getByRole('link', { name: 'content' });
+    assert.strictEqual(link.getAttribute('title'), 'pix.fr - nouvelle fenêtre');
+  });
+
+  test('it renders an EmberJS link', async function (assert) {
+    // when
+    const screen = await render(
+      hbs`<PixNavigationButton @route='hello'>content</PixNavigationButton>`,
+    );
+
+    // then
+    const link = screen.getByRole('link', { name: 'content' });
+    assert.strictEqual(link.getAttribute('href'), '/hello-world');
+  });
+
+  test('it renders an EmberJS link  with model', async function (assert) {
+    // when
+    const screen = await render(
+      hbs`<PixNavigationButton @route='bye' @model='bye'>content</PixNavigationButton>`,
+    );
+
+    // then
+    const link = screen.getByRole('link', { name: 'content' });
+    assert.strictEqual(link.getAttribute('href'), '/bye/bye');
+  });
+
+  test('it renders an EmberJS link  with model and query params', async function (assert) {
+    // when
+    const screen = await render(
+      hbs`<PixNavigationButton
+  @route='bye'
+  @model='bye'
+  @query={{hash page=3 per_page=20}}
+>content</PixNavigationButton>`,
+    );
+
+    // then
+    const link = screen.getByRole('link', { name: 'content' });
+    assert.strictEqual(link.getAttribute('href'), '/bye/bye?page=3&per_page=20');
+  });
+
+  test('it renders an icon', async function (assert) {
+    // when
+    const screen = await render(
+      hbs`<PixNavigationButton @route='hello' @icon='coversionPath'>content</PixNavigationButton>`,
+    );
+
+    // then
+    const link = screen.getByRole('link', { name: 'content' });
+    assert.ok(within(link).getByRole('img', { hidden: true }));
+  });
+});