diff --git a/mon-pix/app/components/authentication-layout/footer.gjs b/mon-pix/app/components/authentication-layout/footer.gjs
index 7e83b6b741a..a4add23f485 100644
--- 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}}
{{/if}}
-
+
}
diff --git a/mon-pix/app/components/authentication-layout/index.scss b/mon-pix/app/components/authentication-layout/index.scss
index 5cb81b14479..87a9a6329e5 100644
--- 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
index 094de7faa13..cb770142e9b 100644
--- 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 {
}
diff --git a/mon-pix/app/styles/components/_footer.scss b/mon-pix/app/styles/components/_footer.scss
index d1e98126b2d..638fca5fd9d 100644
--- 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
index f4fc2a49d77..0a2a924fdc6 100644
--- 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`}`);
+ const screen = await render(hbs`}`);
// 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`}`);
+ const screen = await render(hbs`}`);
// 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`}`);
+
+ // 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`}`);
+
+ // 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`}`);
+
+ // 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`}`);
+
+ // then
+ assert.dom(screen.getByRole('list')).hasClass(/--align-right/);
+ });
+ });
+ });
});