From 01d72466a68d51d6e5cfde0ab72fb3628e47489d Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Fri, 3 May 2024 10:28:27 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-desk)=20add=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add footer to the desk app.
---
 .../assets => assets/icons}/icon-gouv.svg     |   0
 .../assets => assets/icons}/icon-marianne.svg |   0
 src/frontend/apps/desk/src/components/Box.tsx |   2 +
 .../apps/desk/src/components/Link.tsx         |   7 +-
 .../apps/desk/src/core/MainLayout.tsx         |  20 ++-
 .../apps/desk/src/features/footer/Footer.tsx  | 122 ++++++++++++++++++
 .../features/footer/assets/external-link.svg  |   5 +
 src/frontend/apps/desk/src/pages/globals.css  |   8 +-
 .../e2e/__tests__/app-desk/footer.spec.ts     |  42 ++++++
 9 files changed, 195 insertions(+), 11 deletions(-)
 rename src/frontend/apps/desk/src/{features/header/assets => assets/icons}/icon-gouv.svg (100%)
 rename src/frontend/apps/desk/src/{features/header/assets => assets/icons}/icon-marianne.svg (100%)
 create mode 100644 src/frontend/apps/desk/src/features/footer/Footer.tsx
 create mode 100644 src/frontend/apps/desk/src/features/footer/assets/external-link.svg
 create mode 100644 src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts

diff --git a/src/frontend/apps/desk/src/features/header/assets/icon-gouv.svg b/src/frontend/apps/desk/src/assets/icons/icon-gouv.svg
similarity index 100%
rename from src/frontend/apps/desk/src/features/header/assets/icon-gouv.svg
rename to src/frontend/apps/desk/src/assets/icons/icon-gouv.svg
diff --git a/src/frontend/apps/desk/src/features/header/assets/icon-marianne.svg b/src/frontend/apps/desk/src/assets/icons/icon-marianne.svg
similarity index 100%
rename from src/frontend/apps/desk/src/features/header/assets/icon-marianne.svg
rename to src/frontend/apps/desk/src/assets/icons/icon-marianne.svg
diff --git a/src/frontend/apps/desk/src/components/Box.tsx b/src/frontend/apps/desk/src/components/Box.tsx
index 2dd8562..a4ab116 100644
--- a/src/frontend/apps/desk/src/components/Box.tsx
+++ b/src/frontend/apps/desk/src/components/Box.tsx
@@ -28,6 +28,7 @@ export interface BoxProps {
   $position?: CSSProperties['position'];
   $radius?: CSSProperties['borderRadius'];
   $width?: CSSProperties['width'];
+  $zIndex?: CSSProperties['zIndex'];
 }
 
 export type BoxType = ComponentPropsWithRef<typeof Box>;
@@ -53,4 +54,5 @@ export const Box = styled('div')<BoxProps>`
   ${({ $maxWidth }) => $maxWidth && `max-width: ${$maxWidth};`}
   ${({ $minWidth }) => $minWidth && `min-width: ${$minWidth};`}
   ${({ $css }) => $css && `${$css};`}
+  ${({ $zIndex }) => $zIndex && `z-index: ${$zIndex};`}
 `;
diff --git a/src/frontend/apps/desk/src/components/Link.tsx b/src/frontend/apps/desk/src/components/Link.tsx
index 8081db2..b84de0d 100644
--- a/src/frontend/apps/desk/src/components/Link.tsx
+++ b/src/frontend/apps/desk/src/components/Link.tsx
@@ -1,11 +1,16 @@
 import Link from 'next/link';
 import styled from 'styled-components';
 
-export const StyledLink = styled(Link)`
+export interface LinkProps {
+  $css?: string;
+}
+
+export const StyledLink = styled(Link)<LinkProps>`
   text-decoration: none;
   color: #ffffff33;
   &[aria-current='page'] {
     color: #ffffff;
   }
   display: flex;
+  ${({ $css }) => $css && `${$css};`}
 `;
diff --git a/src/frontend/apps/desk/src/core/MainLayout.tsx b/src/frontend/apps/desk/src/core/MainLayout.tsx
index 77bdc54..617e004 100644
--- a/src/frontend/apps/desk/src/core/MainLayout.tsx
+++ b/src/frontend/apps/desk/src/core/MainLayout.tsx
@@ -1,19 +1,27 @@
 import { PropsWithChildren } from 'react';
 
 import { Box } from '@/components';
+import { Footer } from '@/features/footer/Footer';
 import { HEADER_HEIGHT, Header } from '@/features/header';
 import { Menu } from '@/features/menu';
 
 export function MainLayout({ children }: PropsWithChildren) {
   return (
-    <Box $height="100vh" $css="overflow:hidden;">
-      <Header />
-      <Box $css="flex: 1;" $direction="row">
-        <Menu />
-        <Box as="main" $height={`calc(100vh - ${HEADER_HEIGHT})`} $width="100%">
-          {children}
+    <Box>
+      <Box $height="100vh">
+        <Header />
+        <Box $css="flex: 1;" $direction="row">
+          <Menu />
+          <Box
+            as="main"
+            $height={`calc(100vh - ${HEADER_HEIGHT})`}
+            $width="100%"
+          >
+            {children}
+          </Box>
         </Box>
       </Box>
+      <Footer />
     </Box>
   );
 }
diff --git a/src/frontend/apps/desk/src/features/footer/Footer.tsx b/src/frontend/apps/desk/src/features/footer/Footer.tsx
new file mode 100644
index 0000000..d887c1a
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/footer/Footer.tsx
@@ -0,0 +1,122 @@
+import Image from 'next/image';
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import styled from 'styled-components';
+
+import { default as IconGouv } from '@/assets/icons/icon-gouv.svg?url';
+import { default as IconMarianne } from '@/assets/icons/icon-marianne.svg?url';
+import { Box, StyledLink, Text } from '@/components/';
+
+import IconLink from './assets/external-link.svg';
+
+const BlueStripe = styled.div`
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  background: var(--c--theme--colors--primary-600);
+  top: 0;
+`;
+
+export const Footer = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box $position="relative" as="footer">
+      <BlueStripe />
+      <Box $padding={{ top: 'large', horizontal: 'big', bottom: 'small' }}>
+        <Box>
+          <Image
+            priority
+            src={IconMarianne}
+            alt={t('Marianne Logo')}
+            width={70}
+          />
+        </Box>
+        <Box
+          $direction="row"
+          $gap="1.5rem"
+          $align="center"
+          $justify="space-between"
+        >
+          <Box>
+            <Box $align="center" $gap="6rem" $direction="row">
+              <Image
+                width={100}
+                priority
+                src={IconGouv}
+                alt={t('Freedom Equality Fraternity Logo')}
+              />
+            </Box>
+          </Box>
+          <Box
+            $direction="row"
+            $justify="flex-end"
+            $css={`
+              column-gap: 1.5rem;
+              row-gap: .5rem;
+              flex-wrap: wrap;
+            `}
+          >
+            {[
+              {
+                label: 'legifrance.gouv.fr',
+                href: 'https://legifrance.gouv.fr/',
+              },
+              {
+                label: 'info.gouv.fr',
+                href: 'https://info.gouv.fr/',
+              },
+              {
+                label: 'service-public.fr',
+                href: 'https://service-public.fr/',
+              },
+              {
+                label: 'data.gouv.fr',
+                href: 'https://data.gouv.fr/',
+              },
+            ].map(({ label, href }) => (
+              <StyledLink
+                key={label}
+                href={href}
+                target="__blank"
+                $css={`
+                  gap:0.2rem;
+                  transition: box-shadow 0.3s;
+                  &:hover {
+                    box-shadow: 0px 2px 0 0 var(--c--theme--colors--greyscale-text);
+                  }
+                `}
+              >
+                <Text $weight="bold">{label}</Text>
+                <IconLink width={18} />
+              </StyledLink>
+            ))}
+          </Box>
+        </Box>
+        <Text
+          as="p"
+          $size="m"
+          $margin={{ top: 'big' }}
+          $variation="600"
+          $display="inline"
+        >
+          <Trans>
+            Unless otherwise stated, all content on this site is under
+            <StyledLink
+              href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
+              target="__blank"
+              $css={`
+                display:inline-flex;
+                box-shadow: 0px 1px 0 0 var(--c--theme--colors--greyscale-text);
+                margin-left: 0.3rem;
+              `}
+            >
+              <Text $variation="600">licence etalab-2.0</Text>
+              <IconLink width={18} />
+            </StyledLink>
+          </Trans>
+        </Text>
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/frontend/apps/desk/src/features/footer/assets/external-link.svg b/src/frontend/apps/desk/src/features/footer/assets/external-link.svg
new file mode 100644
index 0000000..25093d1
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/footer/assets/external-link.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6Zm11-3v8h-2V6.413l-7.793 7.794-1.414-1.414L17.585 5H13V3h8Z"
+  />
+</svg>
diff --git a/src/frontend/apps/desk/src/pages/globals.css b/src/frontend/apps/desk/src/pages/globals.css
index 7d81925..b033f2c 100644
--- a/src/frontend/apps/desk/src/pages/globals.css
+++ b/src/frontend/apps/desk/src/pages/globals.css
@@ -9,21 +9,21 @@ body {
   box-sizing: border-box;
 }
 
-::-webkit-scrollbar {
+main ::-webkit-scrollbar {
   width: 20px;
 }
 
-::-webkit-scrollbar-track {
+main ::-webkit-scrollbar-track {
   background-color: transparent;
 }
 
-::-webkit-scrollbar-thumb {
+main ::-webkit-scrollbar-thumb {
   background-color: #d6dee1;
   border-radius: 20px;
   border: 6px solid transparent;
   background-clip: content-box;
 }
 
-::-webkit-scrollbar-thumb:hover {
+main ::-webkit-scrollbar-thumb:hover {
   background-color: #a8bbbf;
 }
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts
new file mode 100644
index 0000000..45e188c
--- /dev/null
+++ b/src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts
@@ -0,0 +1,42 @@
+import { expect, test } from '@playwright/test';
+
+import { keyCloakSignIn } from './common';
+
+test.beforeEach(async ({ page, browserName }) => {
+  await page.goto('/');
+  await keyCloakSignIn(page, browserName);
+});
+
+test.describe('Footer', () => {
+  test('checks all the elements are visible', async ({ page }) => {
+    const footer = page.locator('footer').first();
+
+    await expect(footer.getByAltText('Marianne Logo')).toBeVisible();
+
+    await expect(
+      footer.getByAltText('Freedom Equality Fraternity Logo'),
+    ).toBeVisible();
+
+    await expect(
+      footer.getByRole('link', { name: 'legifrance.gouv.fr' }),
+    ).toBeVisible();
+
+    await expect(
+      footer.getByRole('link', { name: 'info.gouv.fr' }),
+    ).toBeVisible();
+
+    await expect(
+      footer.getByRole('link', { name: 'service-public.fr' }),
+    ).toBeVisible();
+
+    await expect(
+      footer.getByRole('link', { name: 'data.gouv.fr' }),
+    ).toBeVisible();
+
+    await expect(
+      footer.getByText(
+        'Unless otherwise stated, all content on this site is under',
+      ),
+    ).toBeVisible();
+  });
+});