From 19bc09a83bcbfe7d00796c5919b604c1d925dcd3 Mon Sep 17 00:00:00 2001 From: pix-service-auto-merge <69905988+pix-service-auto-merge@users.noreply.github.com> Date: Fri, 13 Dec 2024 15:42:54 +0100 Subject: [PATCH] =?UTF-8?q?[BREAKING]:=20Utilisation=20de=20yield=20nomm?= =?UTF-8?q?=C3=A9s=20dans=20le=20PixAppLayout=20(pix-15665)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #787 --- addon/components/pix-app-layout.hbs | 4 +- addon/styles/_pix-app-layout.scss | 17 ++ app/stories/pix-app-layout.mdx | 32 +++- app/stories/pix-app-layout.stories.js | 174 +++++++++++------- app/stories/pix-navigation.mdx | 93 ++++++---- tests/dummy/app/templates/application.hbs | 110 +++++++---- .../components/pix-app-layout-test.js | 2 +- 7 files changed, 282 insertions(+), 150 deletions(-) diff --git a/addon/components/pix-app-layout.hbs b/addon/components/pix-app-layout.hbs index b18d553d5..d89b21f46 100644 --- a/addon/components/pix-app-layout.hbs +++ b/addon/components/pix-app-layout.hbs @@ -1,3 +1,5 @@
- {{yield}} + {{yield to="navigation"}} + {{yield to="main"}} + {{yield to="footer"}}
\ No newline at end of file diff --git a/addon/styles/_pix-app-layout.scss b/addon/styles/_pix-app-layout.scss index ca5d370dd..828912e83 100644 --- 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 index 4b6069ab8..102a32e63 100644 --- 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 `` 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 `` comporte 3 placeholders + +- `<:navigation>` dans lequel on mettra la composant `` +- `<:main>` qui accueillera une balise et l'instruction `{{outlet}}` +- `<:footer>` dans lequel on ```html - -
{{outlet}}
+ <:navigation> + + + <:main> +
{{outlet}}
+ + <:footer> + + ``` diff --git a/app/stories/pix-app-layout.stories.js b/app/stories/pix-app-layout.stories.js index b975f3dc7..eaea8fe58 100644 --- 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` - - <:brand> - - pix orga - - - <:navElements> - Campagnes - Participants - Équipe - Places - Documentation - Centre - d'aide - - <:burgerMenu> - Menu - - <:footer> -

- 1 000 places disponibles -

-

- Martin Dupond -
- - Organisation Test Pix (UAI003) - -

- - - J'ai un code - - - - Se déconnecter - - - -
- - - + <:navigation> + + <:brand> + + pix orga + + + <:navElements> + Campagnes + Participants + Équipe + Places + Documentation + Centre d'aide + + <:burgerMenu> + Menu + + <:footer> +

+ 1 000 places disponibles +

+

+ Martin Dupond +
+ + Organisation Test Pix (UAI003) + +

+ + + J'ai un code + + + + Se déconnecter + + + - - - + + <:main> +
+ + + - - - + + + - - - + + + - - - + + + - - - + + + - - - -
+ + + + + + + + + + <:footer> + + `, context: { ...args, diff --git a/app/stories/pix-navigation.mdx b/app/stories/pix-navigation.mdx index 48fa562fb..6b2dcee30 100644 --- 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 - - <:brand> - - - pix orga - - - <:navElements> - - Campagnes - Documentation - Centre d'aide - - <:footer> - -

- 1 000 places disponibles -

- -

- Martin Dupond -

- - -
+ <:navigation> + + <:brand> + + + pix orga + + + <:navElements> + + Campagnes + Documentation + Centre d'aide + + <:footer> + +

+ 1 000 places disponibles +

+ +

+ Martin Dupond +

+ + + + <:main> +
- {{yield}} -
+ {{outlet}} + + + <:footer> + + ``` diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs index 7176505f3..7bc1e519d 100644 --- a/tests/dummy/app/templates/application.hbs +++ b/tests/dummy/app/templates/application.hbs @@ -1,44 +1,74 @@ {{page-title "Dummy"}} - - <:brand> - - pix orga - - - <:navElements> - - Modal - - select - Sidebar - tooltip - Table - - Documentation - Centre - d'aide - - <:footer> -

- 1 000 places disponibles -

- -

- Martin Dupond -

-

{{this.structure.label}}

- - Se déconnecter - - -
- {{outlet}} -
+ <:navigation> + + <:brand> + + pix orga + + + <:navElements> + + Modal + + select + Sidebar + tooltip + Table + Documentation + Centre d'aide + + <:footer> +

+ 1 000 places disponibles +

+ +

+ Martin Dupond +

+

{{this.structure.label}}

+ + Se déconnecter + + + + <:main> +
+ {{outlet}} +
+ + <:footer> + + \ No newline at end of file diff --git a/tests/integration/components/pix-app-layout-test.js b/tests/integration/components/pix-app-layout-test.js index 085040db9..1fb41ecca 100644 --- a/tests/integration/components/pix-app-layout-test.js +++ b/tests/integration/components/pix-app-layout-test.js @@ -10,7 +10,7 @@ module('Integration | Component | pix-app-layout', function (hooks) { // when this.variant = variant; const screen = await render( - hbs`Hello`, + hbs`<:main>Hello`, ); // then assert.strictEqual(