feat(AppLayout): use grid area to support footer

1024pix · Dec 13, 2024 · 0fedcce · 0fedcce
1 parent d907cb7
commit 0fedcce
Show file tree

Hide file tree

Showing 7 changed files with 282 additions and 150 deletions.
diff --git a/addon/components/pix-app-layout.hbs b/addon/components/pix-app-layout.hbs
@@ -1,3 +1,5 @@
 <div class={{this.classNames}} ...attributes>
-  {{yield}}
+  {{yield to="navigation"}}
+  {{yield to="main"}}
+  {{yield to="footer"}}
 </div>
diff --git a/addon/styles/_pix-app-layout.scss b/addon/styles/_pix-app-layout.scss
@@ -1,9 +1,26 @@
 .pix-app-layout {
   display: grid;
+  grid-template-areas:
+  "navigation main main"
+  "navigation footer  footer";
+  grid-template-rows: 1fr min-content;
   grid-template-columns: min-content 1fr;
   gap: var(--pix-spacing-6x);
+  min-height: 100dvh;
   padding: var(--pix-spacing-6x);
 
+  & > *:first-child {
+    grid-area: navigation;
+  }
+
+  & > *:nth-child(2) {
+    grid-area: main;
+  }
+
+  & > *:nth-child(3) {
+    grid-area: footer;
+  }
+
   @include device-is('mobile') {
     display: block
   }

diff --git a/app/stories/pix-app-layout.mdx b/app/stories/pix-app-layout.mdx
@@ -7,11 +7,39 @@ import * as ComponentStories from './pix-app-layout.stories';
 
 Le composant `<PixAppLayout @variant="orga" />` permet d'afficher correctement la navigation principale d'une application.
 C'est ce composant qui va porter la variante de couleur (orga, certif, primary) et qui permettra de mettre à jour les couleurs de la navigation.
+Le composant `<PixAppLayout/>` comporte 3 placeholders
+
+- `<:navigation>` dans lequel on mettra la composant `<PixNavigation />`
+- `<:main>` qui accueillera une balise et l'instruction `{{outlet}}`
+- `<:footer>` dans lequel on
 
 ```html
 <PixAppLayout @variant="orga">
-  <PixNavigation @navigationAriaLabel="navigation principale"> </PixNavigation>
-  <main>{{outlet}}</main>
+  <:navigation>
+    <PixNavigation @navigationAriaLabel="navigation principale"> </PixNavigation>
+  </:navigation>
+  <:main>
+    <main>{{outlet}}</main>
+  </:main>
+  <:footer>
+    <footer>
+      <ul>
+        <li>
+          <a href="https://pix.fr/mentions-legales" target="_blank" rel="noopener noreferrer">
+            Mentions légales
+          </a>
+        </li>
+        <li>
+          <a href="https://pix.fr/accessibilite-pix-certif" target="_blank" rel="noopener noreferrer">
+            Accessibilité : partiellement conforme
+          </a>
+        </li>
+      </ul>
+      <div>
+        <span>© 2024 Pix</span>
+      </div>
+    </footer>
+  </:footer>
 </PixAppLayout>
 ```
 

diff --git a/app/stories/pix-app-layout.stories.js b/app/stories/pix-app-layout.stories.js
@@ -20,83 +20,115 @@ export default {
 export const AppLayout = (args) => {
   return {
     template: hbs`<PixAppLayout @variant={{this.variant}}>
-  <PixNavigation @navigationAriaLabel={{this.navigationAriaLabel}} @menuLabel='Menu'>
-    <:brand>
-      <a href='/'>
-        <img src='/pix-orga.svg' alt='pix orga' />
-      </a>
-    </:brand>
-    <:navElements>
-      <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 @icon='help' @target='_blank' href='https://pix.fr' title='Pix.fr'>Centre
-        d'aide</PixNavigationButton>
-    </:navElements>
-    <:burgerMenu>
-      <PixNavigationButton @route='hello' @icon='infoUser'>Menu</PixNavigationButton>
-    </:burgerMenu>
-    <:footer>
-      <p>
-        <b>1 000 places disponibles</b>
-      </p>
-      <p>
-        <b>Martin Dupond</b>
-        <br />
-        <span>
-          Organisation Test Pix (UAI003)
-        </span>
-      </p>
-      <PixNavigationSeparator />
-      <PixButton @variant='primary' @iconBefore='codeNumber' @size='small'>
-        J'ai un code
-      </PixButton>
-      <PixStructureSwitcher
-        @label='Changer de structure'
-        @structures={{this.structures}}
-        @value={{this.selectedStructure.value}}
-        @onChange={{this.onChange}}
-      />
-      <PixButton @variant='tertiary' @size='small' @triggerAction={{this.onDisconnect}}>
-        Se déconnecter
-      </PixButton>
-    </:footer>
-  </PixNavigation>
-  <div>
-    <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='600' height='400' fill='IndianRed' />
-    </svg>
+  <:navigation>
+    <PixNavigation @navigationAriaLabel={{this.navigationAriaLabel}} @menuLabel='Menu'>
+      <:brand>
+        <a href='/'>
+          <img src='/pix-orga.svg' alt='pix orga' />
+        </a>
+      </:brand>
+      <:navElements>
+        <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
+          @icon='help'
+          @target='_blank'
+          href='https://pix.fr'
+          title='Pix.fr'
+        >Centre d'aide</PixNavigationButton>
+      </:navElements>
+      <:burgerMenu>
+        <PixNavigationButton @route='hello' @icon='infoUser'>Menu</PixNavigationButton>
+      </:burgerMenu>
+      <:footer>
+        <p>
+          <b>1 000 places disponibles</b>
+        </p>
+        <p>
+          <b>Martin Dupond</b>
+          <br />
+          <span>
+            Organisation Test Pix (UAI003)
+          </span>
+        </p>
+        <PixNavigationSeparator />
+        <PixButton @variant='primary' @iconBefore='codeNumber' @size='small'>
+          J'ai un code
+        </PixButton>
+        <PixStructureSwitcher
+          @label='Changer de structure'
+          @structures={{this.structures}}
+          @value={{this.selectedStructure.value}}
+          @onChange={{this.onChange}}
+        />
+        <PixButton @variant='tertiary' @size='small' @triggerAction={{this.onDisconnect}}>
+          Se déconnecter
+        </PixButton>
+      </:footer>
+    </PixNavigation>
 
-    <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='600' height='400' fill='DeepPink' />
-    </svg>
+  </:navigation>
+  <:main>
+    <main>
+      <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
+        <rect width='600' height='400' fill='IndianRed' />
+      </svg>
 
-    <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='600' height='400' fill='Khaki' />
-    </svg>
+      <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
+        <rect width='600' height='400' fill='DeepPink' />
+      </svg>
 
-    <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='600' height='400' fill='RebeccaPurple' />
-    </svg>
+      <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
+        <rect width='600' height='400' fill='Khaki' />
+      </svg>
 
-    <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='600' height='400' fill='YellowGreen' />
-    </svg>
+      <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
+        <rect width='600' height='400' fill='RebeccaPurple' />
+      </svg>
 
-    <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='600' height='400' fill='LightCoral' />
-    </svg>
+      <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
+        <rect width='600' height='400' fill='YellowGreen' />
+      </svg>
 
-    <svg viewbox='0 0 600 400' width='100%' xmlns='http://www.w3.org/2000/svg'>
-      <rect width='600' height='400' fill='PowderBlue' />
-    </svg>
-  </div>
+      <svg viewbox='0 0 600 400' width='100%' height='400' xmlns='http://www.w3.org/2000/svg'>
+        <rect width='600' height='400' fill='LightCoral' />
+      </svg>
+
+      <svg viewbox='0 0 600 400' width='100%' xmlns='http://www.w3.org/2000/svg'>
+        <rect width='600' height='400' fill='PowderBlue' />
+      </svg>
+    </main>
+  </:main>
+  <:footer>
+    <footer>
+      <ul>
+        <li>
+          <a href='https://pix.fr/mentions-legales' target='_blank' rel='noopener noreferrer'>
+            Mentions légales
+          </a>
+        </li>
+        <li>
+          <a
+            href='https://pix.fr/accessibilite-pix-certif'
+            target='_blank'
+            rel='noopener noreferrer'
+          >
+            Accessibilité : partiellement conforme
+          </a>
+        </li>
+      </ul>
+      <div>
+        <span>© 2024 Pix</span>
+      </div>
+    </footer>
+  </:footer>
 </PixAppLayout>`,
     context: {
       ...args,

diff --git a/app/stories/pix-navigation.mdx b/app/stories/pix-navigation.mdx
@@ -20,42 +20,65 @@ Il est possible de definir le label ARIA de la navigation principale avec l'attr
 
 ```html
 <PixAppLayout @variant="orga">
-  <PixNavigation @navigationAriaLabel="navigation principale" @menuLabel="Menu">
-    <: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"
-        >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>
+  <:navigation>
+    <PixNavigation @navigationAriaLabel="navigation principale" @menuLabel="Menu">
+      <: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"
+          >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>
+  </:navigation>
+  <:main>
+  <main>
     <!-- Placeholder pour afficher le contenus des routes  -->
-    {{yield}}
-  </div>
+    {{outlet}}
+  </main>
+  </:main>
+  <:footer>
+    <footer>
+      <ul>
+        <li>
+          <a href="https://pix.fr/mentions-legales" target="_blank" rel="noopener noreferrer">
+            Mentions légales
+          </a>
+        </li>
+        <li>
+          <a href="https://pix.fr/accessibilite-pix-certif" target="_blank" rel="noopener noreferrer">
+            Accessibilité : partiellement conforme
+          </a>
+        </li>
+      </ul>
+      <div>
+        <span>© 2024 Pix</span>
+      </div>
+    </footer>
+  </:footer>
 </PixAppLayout>
 ```