studio/people
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚧(frontend) add applications menu PoC

Browse Source 
Based on works from @manuhabitela, introduce a PoC of the future component.
ApplicationsMenu component is still under construction.

This code was committed for the Wednesday 26th demo, to showcase our future
works. This Next.js integration could be improved, and will for sure!
Don't blame me.
This commit is contained in:
Lebaud Antoine
2024-03-26 19:16:51 +01:00
committed by aleb_the_flash
parent a1065031ee
commit cc35757c9e
3 changed files with 44 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/frontend/apps/desk/src/features/header/ApplicationsMenu.tsx Normal file
View File

@@ -0,0 +1,37 @@
import Head from 'next/head';
import Script from 'next/script';
import React from 'react';
/**
* ApplicationsMenu Component
*
* This component is a work in progress (WIP) and serves as a proof of concept (POC) to showcase a future advanced feature.
* The purpose of this component is to render an applications menu for La Suite, allowing users to switch between different La Suite apps seamlessly.
* To ensure synchronized content across applications, it utilizes an iframe hosted on Scalingo.
*
* This PoC has been created by @manuhabitela.
*
* It includes external CSS and JavaScript files for styling and functionality.
*/
export const ApplicationsMenu = () => (
<>
<Head>
<link
rel="stylesheet"
href="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/styles/gaufre-vanilla.css"
/>
</Head>
<Script
src="https://suite-numerique-gaufre.osc-fr1.scalingo.io/public/widget.js"
strategy="lazyOnload"
/>
<button
style={{ marginLeft: '1.5rem', verticalAlign: 'center' }}
type="button"
className="lasuitenumerique-gaufre-btn lasuitenumerique-gaufre-btn--vanilla"
title="Les applications de La Suite numérique"
>
Les applications de La Suite numérique
</button>
</>
);

10
src/frontend/apps/desk/src/features/header/Header.tsx
View File

@@ -3,11 +3,11 @@ import React from 'react';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import { Box, BoxButton, Text } from '@/components/';
import { Box, Text } from '@/components/';
import { ApplicationsMenu } from '@/features/header/ApplicationsMenu';
import { LanguagePicker } from '../language/';
import { default as IconCells } from './assets/icon-cells.svg?url';
import { default as IconDesk } from './assets/icon-desk.svg?url';
import { default as IconGouv } from './assets/icon-gouv.svg?url';
import { default as IconMarianne } from './assets/icon-marianne.svg?url';
@@ -76,7 +76,7 @@ export const Header = () => {
<Box $align="center" $direction="row">
<LanguagePicker />
</Box>
<Box $direction="row">
<Box $direction="row" $align="center">
<Box $direction="row" $align="center" $gap="1rem">
<Text $weight="bold" $theme="primary">
John Doe
@@ -89,9 +89,7 @@ export const Header = () => {
alt={t(`Profile picture`)}
/>
</Box>
<BoxButton aria-label={t('Access to the cells menu')}>
<Image priority src={IconCells} alt={t('Cells icon')} />
</BoxButton>
<ApplicationsMenu />
</Box>
</Box>
</Box>

4
src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
View File

@@ -27,7 +27,9 @@ test.describe('Header', () => {
/Marianne/i,
);
await expect(header.getByAltText('Cells icon')).toBeVisible();
await expect(
header.getByText('Les applications de La Suite numérique'),
).toBeVisible();
await expect(header.getByAltText('Language Icon')).toBeVisible();