From 38997fef6a0ea37a24bc79a77a103b775f035092 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Thu, 18 Jan 2024 14:07:43 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(app-desk)=20design=20static=20Languag?=
 =?UTF-8?q?ePicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Design static LanguagePicker, we will add the interactivity later.
---
 .../apps/desk/src/app/Header/Header.tsx       |  3 +
 .../desk/src/app/Language/LanguagePicker.tsx  | 79 +++++++++++++++++++
 .../src/app/Language/assets/icon-language.svg |  3 +
 .../apps/desk/src/app/Language/index.ts       |  1 +
 .../e2e/__tests__/app-desk/header.spec.ts     |  2 +
 .../e2e/__tests__/app-desk/language.spec.ts   | 21 +++++
 6 files changed, 109 insertions(+)
 create mode 100644 src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx
 create mode 100644 src/frontend/apps/desk/src/app/Language/assets/icon-language.svg
 create mode 100644 src/frontend/apps/desk/src/app/Language/index.ts
 create mode 100644 src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts

diff --git a/src/frontend/apps/desk/src/app/Header/Header.tsx b/src/frontend/apps/desk/src/app/Header/Header.tsx
index a049632..50db7d6 100644
--- a/src/frontend/apps/desk/src/app/Header/Header.tsx
+++ b/src/frontend/apps/desk/src/app/Header/Header.tsx
@@ -5,6 +5,8 @@ import styled from 'styled-components';
 
 import { Box, Text } from '@/components/';
 
+import { LanguagePicker } from '../Language/';
+
 import { default as IconCells } from './assets/icon-cells.svg';
 import { default as IconDesk } from './assets/icon-desk.svg';
 import { default as IconFAQ } from './assets/icon-faq.svg';
@@ -66,6 +68,7 @@ const Header = () => {
             >
               FAQ
             </Button>
+            <LanguagePicker />
           </Box>
           <Button
             aria-label="Access to the cells menu"
diff --git a/src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx b/src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx
new file mode 100644
index 0000000..a7c2e18
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Language/LanguagePicker.tsx
@@ -0,0 +1,79 @@
+import { Select } from '@openfun/cunningham-react';
+import Image from 'next/image';
+import styled from 'styled-components';
+
+import { Box, Text } from '@/components/';
+
+import { default as IconLanguage } from './assets/icon-language.svg';
+
+const SelectStyled = styled(Select)<{ $isSmall?: boolean }>`
+  flex-shrink: 0;
+  width: 5.5rem;
+
+  .c__select__wrapper {
+    min-height: 2rem;
+    height: auto;
+    border-color: #ddd;
+    padding: 0 0.15rem 0 0.45rem;
+    border-radius: 1px;
+
+    .labelled-box .labelled-box__children {
+      padding-right: 2rem;
+
+      .c_select__render .typo-text {
+        ${({ $isSmall }) => $isSmall && `display: none;`}
+      }
+    }
+
+    &:hover {
+      border-color: var(--c--theme--colors--primary-500);
+    }
+  }
+`;
+
+const optionsPicker = [
+  {
+    value: 'FR',
+    label: 'FR',
+    render: () => (
+      <Box
+        className="c_select__render"
+        $direction="row"
+        $gap="0.7rem"
+        $align="center"
+      >
+        <Image priority src={IconLanguage} alt="Language Icon" />
+        <Text>FR</Text>
+      </Box>
+    ),
+  },
+  {
+    value: 'EN',
+    label: 'EN',
+    render: () => (
+      <Box
+        className="c_select__render"
+        $direction="row"
+        $gap="0.7rem"
+        $align="center"
+      >
+        <Image priority src={IconLanguage} alt="Language Icon" />
+        <Text>EN</Text>
+      </Box>
+    ),
+  },
+];
+
+export const LanguagePicker = () => {
+  return (
+    <SelectStyled
+      label="Langue"
+      showLabelWhenSelected={false}
+      clearable={false}
+      hideLabel
+      defaultValue="FR"
+      className="c_select__no_bg"
+      options={optionsPicker}
+    />
+  );
+};
diff --git a/src/frontend/apps/desk/src/app/Language/assets/icon-language.svg b/src/frontend/apps/desk/src/app/Language/assets/icon-language.svg
new file mode 100644
index 0000000..c9fac06
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Language/assets/icon-language.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.334 6.66683L15.2673 14.0002H13.8307L13.03 12.0002H10.3033L9.50398 14.0002H8.06798L11.0007 6.66683H12.334ZM6.66732 1.3335V2.66683H10.6673V4.00016H9.35532C8.84106 5.54821 8.0203 6.97684 6.94198 8.20083C7.42285 8.6299 7.94444 9.01104 8.49932 9.33883L7.99865 10.5908C7.28233 10.1846 6.61238 9.70149 6.00065 9.15016C4.80971 10.228 3.39934 11.035 1.86665 11.5155L1.50932 10.2295C2.82254 9.81077 4.03266 9.11972 5.06065 8.2015C4.29978 7.34012 3.66603 6.37434 3.17865 5.3335H4.67198C5.04355 6.0194 5.4891 6.66257 6.00065 7.2515C6.83406 6.2909 7.49085 5.19037 7.94065 4.00083L1.33398 4.00016V2.66683H5.33398V1.3335H6.66732ZM11.6673 8.59016L10.836 10.6668H12.4973L11.6673 8.59016Z" fill="#000091"/>
+</svg>
diff --git a/src/frontend/apps/desk/src/app/Language/index.ts b/src/frontend/apps/desk/src/app/Language/index.ts
new file mode 100644
index 0000000..b5818aa
--- /dev/null
+++ b/src/frontend/apps/desk/src/app/Language/index.ts
@@ -0,0 +1 @@
+export * from './LanguagePicker';
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
index f0c3464..d531b41 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
+++ b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
@@ -34,5 +34,7 @@ test.describe("Header", () => {
     await expect(header.getByText("FAQ")).toBeVisible();
 
     await expect(header.getByAltText("Cells icon")).toBeVisible();
+
+    await expect(header.getByAltText("Language Icon")).toBeVisible();
   });
 });
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts
new file mode 100644
index 0000000..21a1937
--- /dev/null
+++ b/src/frontend/apps/e2e/__tests__/app-desk/language.spec.ts
@@ -0,0 +1,21 @@
+import { expect, test } from "@playwright/test";
+
+import { keyCloakSignIn } from "./common";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/");
+  await keyCloakSignIn(page);
+});
+
+test.describe("Language", () => {
+  test("checks the language picker", async ({ page }) => {
+    const header = page.locator("header").first();
+
+    await header.getByRole("combobox").getByText("FR").click();
+    await expect(
+      header.getByRole("option", { name: "Language Icon FR" }),
+    ).toHaveAttribute("aria-selected", "true");
+    await header.getByRole("option", { name: "Language Icon EN" }).click();
+    await expect(header.getByRole("combobox").getByText("EN")).toBeVisible();
+  });
+});