diff --git a/src/frontend/apps/desk/src/assets/icons/icon-devise.svg b/src/frontend/apps/desk/src/assets/icons/icon-devise.svg new file mode 100644 index 0000000..5834b97 --- /dev/null +++ b/src/frontend/apps/desk/src/assets/icons/icon-devise.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/src/frontend/apps/desk/src/assets/icons/icon-gouv.svg b/src/frontend/apps/desk/src/assets/icons/icon-gouv.svg deleted file mode 100644 index 5cce8b5..0000000 --- a/src/frontend/apps/desk/src/assets/icons/icon-gouv.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - diff --git a/src/frontend/apps/desk/src/components/LogoGouv.tsx b/src/frontend/apps/desk/src/components/LogoGouv.tsx new file mode 100644 index 0000000..d196c03 --- /dev/null +++ b/src/frontend/apps/desk/src/components/LogoGouv.tsx @@ -0,0 +1,44 @@ +import Image from 'next/image'; +import React, { PropsWithChildren } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { default as IconDevise } from '@/assets/icons/icon-devise.svg?url'; +import { default as IconMarianne } from '@/assets/icons/icon-marianne.svg?url'; + +import { Box } from './Box'; +import { Text, TextType } from './Text'; + +interface LogoGouvProps { + imagesWidth?: number; + textProps?: TextType; +} + +export const LogoGouv = ({ + imagesWidth, + children, + textProps, +}: PropsWithChildren) => { + const { t } = useTranslation(); + + return ( + + + {t('Marianne + + + {children} + + {t('Freedom + + ); +}; diff --git a/src/frontend/apps/desk/src/components/index.ts b/src/frontend/apps/desk/src/components/index.ts index fa6ac7b..78a4b43 100644 --- a/src/frontend/apps/desk/src/components/index.ts +++ b/src/frontend/apps/desk/src/components/index.ts @@ -4,5 +4,6 @@ export * from './Card'; export * from './DropButton'; export * from './IconOptions'; export * from './Link'; +export * from './LogoGouv'; export * from './Text'; export * from './TextErrors'; diff --git a/src/frontend/apps/desk/src/features/footer/Footer.tsx b/src/frontend/apps/desk/src/features/footer/Footer.tsx index b1e1022..ee9a229 100644 --- a/src/frontend/apps/desk/src/features/footer/Footer.tsx +++ b/src/frontend/apps/desk/src/features/footer/Footer.tsx @@ -1,11 +1,8 @@ -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 { Box, LogoGouv, StyledLink, Text } from '@/components'; import IconLink from './assets/external-link.svg'; @@ -24,14 +21,6 @@ export const Footer = () => { - - {t('Marianne - { $css="flex-wrap: wrap;" > - - {t('Freedom - + + République Française + { $css="box-shadow: 0 1px 4px #00000040;" > - - {t('Marianne - { $direction="row" > - {t('Freedom + + République Française + {t('Equipes diff --git a/src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts index 56c0b53..388d6a4 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts @@ -13,6 +13,8 @@ test.describe('Footer', () => { await expect(footer.getByAltText('Marianne Logo')).toBeVisible(); + await expect(footer.getByText(/République Française/i)).toBeVisible(); + await expect( footer.getByAltText('Freedom Equality Fraternity Logo'), ).toBeVisible(); 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 ccb851a..d160e5c 100644 --- a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts @@ -13,6 +13,8 @@ test.describe('Header', () => { await expect(header.getByAltText('Marianne Logo')).toBeVisible(); + await expect(header.getByText(/République Française/i)).toBeVisible(); + await expect( header.getByAltText('Freedom Equality Fraternity Logo'), ).toBeVisible();