feat: add a PixAppLayout component

Co-authored-by: mache <[email protected]> Co-authored-by: lionelb <[email protected]>
1024pix · Nov 13, 2024 · 5b0d2af · 5b0d2af
1 parent 9569316
commit 5b0d2af
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 112 deletions.
diff --git a/addon/components/pix-app-layout.hbs b/addon/components/pix-app-layout.hbs
@@ -0,0 +1,3 @@
+<div class="pix-app-layout">
+  {{yield}}
+</div>
diff --git a/addon/styles/_pix-app-layout.scss b/addon/styles/_pix-app-layout.scss
@@ -0,0 +1,6 @@
+.pix-app-layout{
+  display: grid;
+  grid-template-columns: minmax(214px, auto) 1fr;
+  gap: var(--pix-spacing-6x);
+  padding: var(--pix-spacing-6x);
+}
diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss
@@ -36,6 +36,7 @@
 @import 'trap-focus';
 @import 'pix-search-input';
 @import 'pix-navigation';
+@import 'pix-app-layout';
 
 
 // at the end so it can override it's children scss

diff --git a/app/components/pix-app-layout.js b/app/components/pix-app-layout.js
@@ -0,0 +1 @@
+export { default } from '@1024pix/pix-ui/components/pix-app-layout';
diff --git a/app/stories/pix-navigation.mdx b/app/stories/pix-navigation.mdx
@@ -7,48 +7,56 @@ import * as ComponentStories from './pix-navigation.stories';
 
 Le composant `<PixNavigation/>` comporte 3 placeholders
 
-- `<:brand>` permet d'afficher le block marque
+- `<:brand>` permet d'afficher l'identité de l'application (logo)
 - `<:navElements>` permet d'afficher les boutons de navigation
 - `<:footer>` permet d'afficher des infos et d'autres boutons (selecteur d'orga, déconnexion)
 
-En complément, les composants `<PixNavigationButton/>` et `<PixNavigationSeparator/>` permette de composer la navigation souhaitée.
+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.
 
 ## Usage
 
 ```html
-<PixNavigation @variant="orga" @navigationAriaLabel="navigation principale">
-   <:brand>
-      <!-- Affichage du block indentité -->
-      <a href="/">
-        <img src="/pix-orga.svg" alt="pix orga" />
-      </a>
-    </:brand>
-    <:navElements>
-      <!-- Affichage du block de navigation -->
-      <PixNavigationButton
-        @route="navigation-sidebar-page"
-        @icon="conversionPath"
-      >Campagnes</PixNavigationButton>
-      <PixNavigationButton @href="https://pix.fr" @icon="book">Documentation</PixNavigationButton>
-      <PixNavigationButton
-        @href="https://pix.fr"
-        @title="Pix.fr"
-        @target="_blank"
-        @icon="help"
-        @newWindowLabel="ouvre une nouvelle fenêtre"
-      >Centre d'aide</PixNavigationButton>
-    </:navElements>
-    <:footer>
-      <!-- Affichage du block indentité -->
-      <p>
-        1 000 places disponibles
-      </p>
-      <PixNavigationSeparator />
-      <p>
-        Martin Dupond
-      </p>
-    </:footer>
-</PixNavigation>
+<PixAppLayout>
+  <PixNavigation @variant="orga" @navigationAriaLabel="navigation principale">
+    <:brand>
+        <!-- Affichage du bloc identité -->
+        <a href="/">
+          <img src="/pix-orga.svg" alt="pix orga" />
+        </a>
+      </:brand>
+      <:navElements>
+        <!-- Affichage du bloc de navigation -->
+        <PixNavigationButton
+          @route="navigation-sidebar-page"
+          @icon="conversionPath"
+        >Campagnes</PixNavigationButton>
+        <PixNavigationButton @href="https://pix.fr" @icon="book">Documentation</PixNavigationButton>
+        <PixNavigationButton
+          @href="https://pix.fr"
+          @title="Pix.fr"
+          @target="_blank"
+          @icon="help"
+          @newWindowLabel="ouvre une nouvelle fenêtre"
+        >Centre d'aide</PixNavigationButton>
+      </:navElements>
+      <:footer>
+        <!-- Affichage du bloc de pied de page de la navigation -->
+        <p>
+          1 000 places disponibles
+        </p>
+        <PixNavigationSeparator />
+        <p>
+          Martin Dupond
+        </p>
+      </:footer>
+  </PixNavigation>
+  <div>
+    <!-- Placeholder pour afficher le contenus des routes  -->
+    {{yield}}
+  </div>
+</PixAppLayout>
 ```
 
 ## Arguments

diff --git a/app/stories/pix-navigation.stories.js b/app/stories/pix-navigation.stories.js
@@ -1,7 +1,7 @@
 import { hbs } from 'ember-cli-htmlbars';
 
 export default {
-  title: 'Layout/PixNavigation',
+  title: 'Layout/Navigation',
   argTypes: {
     variant: {
       description: 'Variante de la navigation',
@@ -19,96 +19,95 @@ export default {
   },
 };
 
-export const AppNavigation = (args) => {
+export const Navigation = (args) => {
   return {
-    template: hbs`
-<PixAppLayout>
-    <PixNavigation @variant={{this.variant}} @navigationAriaLabel={{this.navigationAriaLabel}} >
-  <:brand>
-    <a href='/'>
-      <img src='/pix-orga.svg' alt='pix orga' />
-    </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'
-      @href='https://pix.fr'
-      title='Pix.fr'
-      target='_blank'
-      @newWindowLabel='ouvre une nouvelle fenêtre'
-    ><PixIcon @name='help' @ariaHidden={{true}} />Centre d'aide</PixButtonLink>
-  </:navElements>
-  <:footer>
-    <p>
-      <b>1 000 places disponibles</b>
-    </p>
-    <p>
-      <b>Martin Dupond</b>
-      <br />
-      <span>
-        Organisation Test Pix (UAI003)
-      </span>
-    </p>
-    <PixButton @variant='primary' @iconBefore='codeNumber' @size='small'>
-      J'ai un code
-    </PixButton>
-    <PixButton @variant='secondary' @size='small'>
-      Changer d'organization
-    </PixButton>
-    <PixButton @variant='tertiary' @size='small' @triggerAction={{this.onDisconnect}}>
-      Se déconnecter
-    </PixButton>
-  </:footer>
-</PixNavigation>
-<div>
-    <svg class="svg" width="600px" height="400px" xmlns="http://www.w3.org/2000/svg">
-      <rect width="600px" height="400px" fill="IndianRed" />
+    template: hbs`<PixAppLayout>
+  <PixNavigation @variant={{this.variant}} @navigationAriaLabel={{this.navigationAriaLabel}}>
+    <:brand>
+      <a href='/'>
+        <img src='/pix-orga.svg' alt='pix orga' />
+      </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'
+        @href='https://pix.fr'
+        title='Pix.fr'
+        target='_blank'
+        @newWindowLabel='ouvre une nouvelle fenêtre'
+      ><PixIcon @name='help' @ariaHidden={{true}} />Centre d'aide</PixButtonLink>
+    </:navElements>
+    <:footer>
+      <p>
+        <b>1 000 places disponibles</b>
+      </p>
+      <p>
+        <b>Martin Dupond</b>
+        <br />
+        <span>
+          Organisation Test Pix (UAI003)
+        </span>
+      </p>
+      <PixButton @variant='primary' @iconBefore='codeNumber' @size='small'>
+        J'ai un code
+      </PixButton>
+      <PixButton @variant='secondary' @size='small'>
+        Changer d'organisation
+      </PixButton>
+      <PixButton @variant='tertiary' @size='small' @triggerAction={{this.onDisconnect}}>
+        Se déconnecter
+      </PixButton>
+    </:footer>
+  </PixNavigation>
+  <div>
+    <svg class='svg' width='600px' height='400px' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='600px' height='400px' fill='IndianRed' />
     </svg>
 
-    <svg width="90%" height="400px" xmlns="http://www.w3.org/2000/svg">
-      <rect width="600px" height="400px" fill="DeepPink" />
+    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='600px' height='400px' fill='DeepPink' />
     </svg>
 
-    <svg width="90%" height="400px" xmlns="http://www.w3.org/2000/svg">
-      <rect width="600px" height="400px" fill="Khaki" />
+    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='600px' height='400px' fill='Khaki' />
     </svg>
 
-    <svg width="90%" height="400px" xmlns="http://www.w3.org/2000/svg">
-      <rect width="600px" height="400px" fill="RebeccaPurple" />
+    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='600px' height='400px' fill='RebeccaPurple' />
     </svg>
 
-    <svg width="90%" height="400px" xmlns="http://www.w3.org/2000/svg">
-      <rect width="600px" height="400px" fill="YellowGreen" />
+    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='600px' height='400px' fill='YellowGreen' />
     </svg>
 
-    <svg width="90%" height="400px" xmlns="http://www.w3.org/2000/svg">
-      <rect width="600px" height="400px" fill="LightCoral" />
+    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='600px' height='400px' fill='LightCoral' />
     </svg>
 
-    <svg width="90%" height="400px" xmlns="http://www.w3.org/2000/svg">
-      <rect width="600px" height="400px" fill="PowderBlue" />
+    <svg width='90%' height='400px' xmlns='http://www.w3.org/2000/svg'>
+      <rect width='600px' height='400px' fill='PowderBlue' />
     </svg>
-</div>
+  </div>
 </PixAppLayout>`,
     context: args,
   };

diff --git a/app/styles/global.css b/app/styles/global.css
@@ -22,3 +22,8 @@
   color:var(--pix-neutral-800);
   font-size: .75rem
 }
+
+#storybook-root.ember-application:has(.pix-app-layout) {
+  /* remove padding for the pix-navigation story to mimic in-app behaviour */
+  padding: 0
+}