feat: add some parameters for navigation component

1024pix · Feb 28, 2025 · 6e50fa9 · 6e50fa9
1 parent a6d4314
commit 6e50fa9
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 8 deletions.
diff --git a/addon/components/pix-navigation.hbs b/addon/components/pix-navigation.hbs
@@ -8,7 +8,13 @@
         aria-expanded={{this.navigationMenuOpened}}
         @iconBefore={{if this.navigationMenuOpened "close" "menu"}}
         @triggerAction={{this.toggleNavigationMenu}}
-      >{{@menuLabel}}</PixButton>
+      >
+        {{#if this.navigationMenuOpened}}
+          {{@closeLabel}}
+        {{else}}
+          {{@openLabel}}
+        {{/if}}
+      </PixButton>
     </div>
   </header>
   <nav

diff --git a/app/stories/pix-app-layout.stories.js b/app/stories/pix-app-layout.stories.js
@@ -21,7 +21,11 @@ export const AppLayout = (args) => {
   return {
     template: hbs`<PixAppLayout @variant={{this.variant}}>
   <:navigation>
-    <PixNavigation @navigationAriaLabel={{this.navigationAriaLabel}} @menuLabel='Menu'>
+    <PixNavigation
+      @navigationAriaLabel={{this.navigationAriaLabel}}
+      @openLabel='Ouvrir le menu'
+      @closeLabel='Fermer le menu'
+    >
       <:brand>
         <a href='/'>
           <img src='/pix-orga.svg' alt='pix orga' />

diff --git a/app/stories/pix-navigation.mdx b/app/stories/pix-navigation.mdx
@@ -14,14 +14,14 @@ Le composant `<PixNavigation/>` comporte 3 placeholders
 Ce composant doit être utilisé avec le composant `<PixAppLayout>` afin de pouvoir occuper tout la hauteur de la page et être toujours visible.
 
 En complément, les composants `<PixNavigationButton/>` et `<PixNavigationSeparator/>` permettent de composer la navigation souhaitée.
-Il est possible de definir le label ARIA de la navigation principale avec l'attribut `@navigationAriaLabel` et le label du Menu avec `@menuLabel`.
+Il est possible de definir le label ARIA de la navigation principale avec l'attribut `@navigationAriaLabel`, le label du Menu fermé avec `@closeLabel` et le label du menu ouvert avec `@openLabel`.
 
 ## Usage
 
 ```html
 <PixAppLayout @variant="orga">
   <:navigation>
-    <PixNavigation @navigationAriaLabel="navigation principale" @menuLabel="Menu">
+    <PixNavigation @navigationAriaLabel="navigation principale" @openLabel="Ouvrir le menu" @closeLabel="Fermer le menu">
       <:brand>
           <!-- Affichage du bloc identité -->
           <a href="/">

diff --git a/app/stories/pix-navigation.stories.js b/app/stories/pix-navigation.stories.js
@@ -10,14 +10,19 @@ export default {
   },
   args: {
     navigationAriaLabel: 'Navigation Principale',
-    menuLabel: 'Menu',
+    openLabel: 'Ouvrir le menu',
+    closeLabel: 'Fermer le menu',
   },
 };
 
 export const Navigation = (args) => {
   return {
     template: hbs`<PixAppLayout @variant='primary'>
-  <PixNavigation @navigationAriaLabel={{this.navigationAriaLabel}} @menuLabel={{this.menuLabel}}>
+  <PixNavigation
+    @navigationAriaLabel={{this.navigationAriaLabel}}
+    @openLabel={{this.openLabel}}
+    @closeLabel={{this.closeLabel}}
+  >
     <:brand>
       <a href='/'>
         <img src='/pix-orga.svg' alt='pix orga' />

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -2,7 +2,11 @@
 
 <PixAppLayout @variant="orga">
   <:navigation>
-    <PixNavigation @menuLabel="Menu" @navigationAriaLabel="navigation principale">
+    <PixNavigation
+      @openLabel="Ouvrir le menu"
+      @closeLabel="Fermer le menu"
+      @navigationAriaLabel="navigation principale"
+    >
       <:brand>
         <a href="/">
           <img src="/pix-orga.svg" alt="pix orga" />

diff --git a/tests/integration/components/pix-navigation-test.js b/tests/integration/components/pix-navigation-test.js
@@ -58,7 +58,7 @@ module('Integration | Component | pix-navigation', function (hooks) {
     test('it hides the burger menu', async function (assert) {
       // when
       const screen = await render(
-        hbs`<PixNavigation @navigationAriaLabel='label' @menuLabel='menu' />`,
+        hbs`<PixNavigation @navigationAriaLabel='label' @openLabel='open' @closeLabel='close' />`,
       );
       assert.notOk(screen.queryByRole('button', { name: 'menu' }));
     });