feat: add PixNavigationButton and PixNavigationSeparator

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}}

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';
+  }
+}

addon/components/pix-navigation-separator.hbs

@@ -0,0 +1 @@
+<hr class="pix-navigation-separator" />

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;
+}

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);
+  }
+}

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';
 
 

app/components/pix-navigation-button.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-navigation-button';

app/components/pix-navigation-separator.js

@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-navigation-separator';

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>

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 }));
+  });
+});