[TECH] Améliorer la composition de FooterLinks (PIX-15477).

#10656
1024pix · Nov 27, 2024 · 96afecd · 96afecd
2 parents ef5c50b + ad7e9d8
commit 96afecd
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 44 deletions.
diff --git a/mon-pix/app/components/authentication-layout/footer.gjs b/mon-pix/app/components/authentication-layout/footer.gjs
@@ -30,7 +30,7 @@ export default class Footer extends Component {
       {{#if this.isInternationalDomain}}
         <LanguageSwitcher @selectedLanguage={{this.selectedLanguage}} @onLanguageChange={{this.onLanguageChange}} />
       {{/if}}
-      <FooterLinks />
+      <FooterLinks @size="extra-small" />
     </footer>
   </template>
 }
diff --git a/mon-pix/app/components/authentication-layout/index.scss b/mon-pix/app/components/authentication-layout/index.scss
@@ -83,30 +83,8 @@
   width: 100%;
   margin-top: var(--pix-spacing-12x);
 
-  nav {
-    @extend %pix-body-xs;
-
-    margin-top: var(--pix-spacing-4x);
-    margin-left: 0;
-
-    ul {
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--pix-spacing-2x) var(--pix-spacing-3x);
-    }
-
-    a {
-      color: var(--pix-neutral-500);
-      text-decoration: underline;
-
-      &:hover, &:focus {
-        color: var(--pix-primary-500);
-      }
-    }
-
-    .footer-navigation__item {
-      margin: 0 var(--pix-spacing-3x) 0 0;
-    }
+  .language-switcher {
+    margin-bottom: var(--pix-spacing-4x);
   }
 }
 
diff --git a/mon-pix/app/components/footer/footer-links.gjs b/mon-pix/app/components/footer/footer-links.gjs
@@ -2,6 +2,7 @@ import { LinkTo } from '@ember/routing';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { t } from 'ember-intl';
+import { eq } from 'ember-truth-helpers';
 
 export default class FooterLinks extends Component {
   @service url;
@@ -38,7 +39,11 @@ export default class FooterLinks extends Component {
 
   <template>
     <nav class="footer__links" role="navigation" aria-label={{t "navigation.footer.label"}}>
-      <ul class="footer-links__list">
+      <ul
+        class="footer-links__list
+          {{if (eq @size 'extra-small') 'footer-links__list--extra-small' 'footer-links__list--small'}}
+          {{if (eq @textAlign 'right') 'footer-links__list--align-right'}}"
+      >
         <li>
           <a href="{{this.supportHomeUrl}}" target="_blank" rel="noopener noreferrer">
             {{t "navigation.footer.help-center"}}

diff --git a/mon-pix/app/components/footer/index.gjs b/mon-pix/app/components/footer/index.gjs
@@ -23,7 +23,7 @@ export default class Footer extends Component {
           <span>{{t "navigation.copyrights"}} {{this.currentYear}} {{t "navigation.pix"}}</span>
         </div>
       </div>
-      <FooterLinks />
+      <FooterLinks @textAlign="right" />
     </footer>
   </template>
 }
diff --git a/mon-pix/app/styles/components/_footer.scss b/mon-pix/app/styles/components/_footer.scss
@@ -32,32 +32,34 @@
 }
 
 // Footer links
-#footer .footer-links__list {
-  text-align: right;
-  text-wrap: pretty;
+.footer-links__list {
+  &--small {
+    @extend %pix-body-s;
+  }
 
-  @include device-is('mobile') {
-    text-align: left;
+  &--extra-small {
+    @extend %pix-body-xs;
+
+    a {
+      text-decoration: underline;
+    }
   }
 
   li {
     display: inline-block;
     padding-block: 0.25em;
-
-    @include device-is('mobile') {
-      margin-right: 2ch;
-    }
-
-    @include device-is('tablet') {
-      margin-left: 2ch;
-    }
+    margin-inline: 0 2ch;
   }
 
   a {
-    @extend %pix-body-s;
-
     &:hover, &:focus {
       color: var(--pix-primary-500);
     }
   }
 }
+
+.footer-links__list--align-right {
+  @include device-is('tablet') {
+    text-align: right;
+  }
+}
diff --git a/mon-pix/tests/integration/components/footer/footer-links-test.js b/mon-pix/tests/integration/components/footer/footer-links-test.js
@@ -55,7 +55,7 @@ module('Integration | Component | Footer', function (hooks) {
 
     test('does not display the student data policy', async function (assert) {
       // when
-      const screen = await render(hbs`<Footer />}`);
+      const screen = await render(hbs`<Footer::FooterLinks />}`);
 
       // then
       assert
@@ -77,10 +77,54 @@ module('Integration | Component | Footer', function (hooks) {
 
     test('displays the student data policy', async function (assert) {
       // when
-      const screen = await render(hbs`<Footer />}`);
+      const screen = await render(hbs`<Footer::FooterLinks />}`);
 
       // then
       assert.dom(screen.getByRole('link', { name: t('navigation.footer.student-data-protection-policy') })).exists();
     });
   });
+
+  module('component sizes', function () {
+    module('when @size prop is not defined', function () {
+      test('default size is small', async function (assert) {
+        // when
+        const screen = await render(hbs`<Footer::FooterLinks />}`);
+
+        // then
+        assert.dom(screen.getByRole('list')).hasClass(/--small/);
+      });
+    });
+
+    module('when @size prop is "extra-small"', function () {
+      test('size is "extra-small"', async function (assert) {
+        // when
+        const screen = await render(hbs`<Footer::FooterLinks @size='extra-small' />}`);
+
+        // then
+        assert.dom(screen.getByRole('list')).hasClass(/--extra-small/);
+      });
+    });
+  });
+
+  module('component text align', function () {
+    module('when @textAlign prop is not defined', function () {
+      test('there is no text align variant', async function (assert) {
+        // when
+        const screen = await render(hbs`<Footer::FooterLinks />}`);
+
+        // then
+        assert.dom(screen.getByRole('list')).hasNoClass(/--align/);
+      });
+    });
+
+    module('when @textAlign prop is "right"', function () {
+      test('text align is "right"', async function (assert) {
+        // when
+        const screen = await render(hbs`<Footer::FooterLinks @textAlign='right' />}`);
+
+        // then
+        assert.dom(screen.getByRole('list')).hasClass(/--align-right/);
+      });
+    });
+  });
 });