✨(app-desk) design static LanguagePicker

Design static LanguagePicker, we will add the interactivity later.

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"

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}
+    />
+  );
+};

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>

src/frontend/apps/desk/src/app/Language/index.ts

@@ -0,0 +1 @@
+export * from './LanguagePicker';

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();
   });
 });

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();
+  });
+});