[FEATURE] Ajouter le pied de page avec les mentions légales et les me…

…ntions de protection des données des élèves sur Pix Junior (PIX-13137).

 #9464

junior/app/components/footer/template.hbs

@@ -0,0 +1,26 @@
+<footer id="footer" class="footer">
+  <nav class="footer__navigation" role="navigation" aria-label={{t "navigation.footer.label"}}>
+    <ul class="footer-navigation__list">
+      <li>
+        <a
+          href="{{t 'navigation.footer.legal-notice-url'}}"
+          target="_blank"
+          class="footer-navigation__item"
+          rel="noopener noreferrer"
+        >
+          {{t "navigation.footer.legal-notice"}}
+        </a>
+      </li>
+      <li>
+        <a
+          href="{{t 'navigation.footer.student-data-protection-policy-url'}}"
+          target="_blank"
+          class="footer-navigation__item"
+          rel="noopener noreferrer"
+        >
+          {{t "navigation.footer.student-data-protection-policy"}}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</footer>

junior/app/styles/app.scss

@@ -18,6 +18,7 @@
 @import 'components/challenge/challenge-item-proposals';
 @import 'components/mission-card/card';
 @import 'components/bubble';
+@import 'components/footer';
 @import 'components/issue';
 @import 'components/robot-dialog';
 
@@ -28,7 +29,6 @@
 @import 'pages/organization-code.scss';
 @import 'pages/school.scss';
 
-
 body {
   color: var(--pix-neutral-900);
   font-weight: 600;
@@ -55,5 +55,12 @@ b {
   @include device-is('large-screen') {
     margin: 32px auto;
   }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    min-height: 95vh;
+  }
 }
 
+

junior/app/styles/components/footer.scss

@@ -0,0 +1,31 @@
+#footer {
+  margin:auto 20px 20px 20px;
+}
+
+.footer-navigation {
+  &__list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  &__item {
+    display: inline-block;
+    padding: 0 12px 6px 0;
+    color: $pix-neutral-60;
+    font-size: 0.8125rem;
+    font-family: $font-roboto;
+    line-height: 1.375rem;
+    letter-spacing: 0.009rem;
+
+    &:focus {
+      color: $pix-neutral-50;
+      text-decoration: none;
+    }
+
+    &:hover {
+      color: $pix-primary-70;
+      text-decoration: none;
+      cursor: pointer;
+    }
+  }
+}

junior/app/templates/organization-code.hbs

@@ -20,4 +20,5 @@
   <PixButton class="pix1d-button" @type="submit" @shape="rounded" @size="large">
     {{t "pages.home.go-to-school"}}
   </PixButton>
-</form>
+</form>
+<Footer />

junior/app/templates/school/divisions.hbs

@@ -8,4 +8,5 @@
       <p class="item__title">{{division}}</p>
     </LinkTo>
   {{/each}}
-</div>
+</div>
+<Footer />