diff --git a/CHANGELOG.md b/CHANGELOG.md index 9ffa8923..ba72fa1a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to - ✨(frontend) Versioning #147 - ✨Export docx (word) #161 - 🌐 Internationalize invitation email #167 +- ✨(frontend) White branding #164 ## Fixed diff --git a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts index ddb201a3..4ec1243e 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/doc-export.spec.ts @@ -111,7 +111,6 @@ test.describe('Doc Export', () => { await page.locator('button[data-test="alignTextCenter"]').click(); // Change the background color - await page.getByText('Break').dblclick(); await page.locator('button[data-test="colors"]').click(); await page.locator('button[data-test="background-color-brown"]').click(); diff --git a/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts index 3496d3b0..cd8763f3 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/footer.spec.ts @@ -8,11 +8,7 @@ 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.getByAltText('Gouvernement Logo')).toBeVisible(); await expect( footer.getByRole('link', { name: 'legifrance.gouv.fr' }), diff --git a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts index 4555e139..a451f560 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts @@ -10,11 +10,7 @@ test.describe('Header', () => { test('checks all the elements are visible', async ({ page }) => { const header = page.locator('header').first(); - await expect(header.getByAltText('Marianne Logo')).toBeVisible(); - - await expect( - header.getByAltText('Freedom Equality Fraternity Logo'), - ).toBeVisible(); + await expect(header.getByAltText('Gouvernement Logo')).toBeVisible(); await expect(header.getByAltText('Docs Logo')).toBeVisible(); await expect(header.locator('h2').getByText('Docs')).toHaveCSS( diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index 04f4739a..e632565d 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -39,6 +39,12 @@ const config = { xxs: '320px', xs: '480px', }, + logo: { + src: '', + widthHeader: '', + widthFooter: '', + alt: '', + }, }, components: { datagrid: { @@ -268,6 +274,12 @@ const config = { base: 'Marianne', }, }, + logo: { + src: '/assets/logo-gouv.svg', + widthHeader: '110px', + widthFooter: '220px', + alt: 'Gouvernement Logo', + }, }, components: { alert: { diff --git a/src/frontend/apps/impress/public/assets/logo-gouv.svg b/src/frontend/apps/impress/public/assets/logo-gouv.svg new file mode 100644 index 00000000..583adb17 --- /dev/null +++ b/src/frontend/apps/impress/public/assets/logo-gouv.svg @@ -0,0 +1,241 @@ + + + + + + + + + + + + + + diff --git a/src/frontend/apps/impress/src/assets/icons/icon-devise.svg b/src/frontend/apps/impress/src/assets/icons/icon-devise.svg deleted file mode 100644 index 5834b975..00000000 --- a/src/frontend/apps/impress/src/assets/icons/icon-devise.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/src/frontend/apps/impress/src/assets/icons/icon-marianne.svg b/src/frontend/apps/impress/src/assets/icons/icon-marianne.svg deleted file mode 100644 index 3b0136e6..00000000 --- a/src/frontend/apps/impress/src/assets/icons/icon-marianne.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - diff --git a/src/frontend/apps/impress/src/components/LogoGouv.tsx b/src/frontend/apps/impress/src/components/LogoGouv.tsx deleted file mode 100644 index e7264cea..00000000 --- a/src/frontend/apps/impress/src/components/LogoGouv.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import Image from 'next/image'; -import React 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; -} - -const LogoGouv = ({ imagesWidth, textProps }: LogoGouvProps) => { - const { t } = useTranslation(); - - return ( - - - {t('Marianne - - - Gouvernement - - {t('Freedom - - ); -}; - -export default LogoGouv; diff --git a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx index 1d8fc26e..f6a32fff 100644 --- a/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx +++ b/src/frontend/apps/impress/src/cunningham/__tests__/useCunninghamTheme.spec.tsx @@ -6,4 +6,13 @@ describe('', () => { expect(theme).toBe('test-theme'); }); + + it('has the dsfr logo correctly set', () => { + const { themeTokens, setTheme } = useCunninghamTheme.getState(); + setTheme('dsfr'); + const logo = themeTokens().logo; + expect(logo?.src).toBe('/assets/logo-gouv.svg'); + expect(logo?.widthHeader).toBe('110px'); + expect(logo?.widthFooter).toBe('220px'); + }); }); diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css index 84f8fcdf..986f476a 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css @@ -125,6 +125,10 @@ --c--theme--breakpoints--xl: 1200px; --c--theme--breakpoints--xxl: 1400px; --c--theme--breakpoints--xxs: 320px; + --c--theme--logo--src: ; + --c--theme--logo--widthheader: ; + --c--theme--logo--widthfooter: ; + --c--theme--logo--alt: ; --c--components--datagrid--header--weight: var( --c--theme--font--weights--extrabold ); @@ -406,6 +410,10 @@ --c--theme--colors--danger-900: #3a1c1c; --c--theme--font--families--accent: marianne; --c--theme--font--families--base: marianne; + --c--theme--logo--src: /assets/logo-gouv.svg; + --c--theme--logo--widthHeader: 110px; + --c--theme--logo--widthFooter: 220px; + --c--theme--logo--alt: gouvernement logo; --c--components--alert--border-radius: 0; --c--components--button--medium-height: 48px; --c--components--button--border-radius: 4px; diff --git a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts index 0dd231a3..f501547b 100644 --- a/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts +++ b/src/frontend/apps/impress/src/cunningham/cunningham-tokens.ts @@ -146,6 +146,7 @@ export const tokens = { xxl: '1400px', xxs: '320px', }, + logo: { src: '', widthHeader: '', widthFooter: '', alt: '' }, }, components: { datagrid: { @@ -407,6 +408,12 @@ export const tokens = { 'danger-900': '#3a1c1c', }, font: { families: { accent: 'Marianne', base: 'Marianne' } }, + logo: { + src: '/assets/logo-gouv.svg', + widthHeader: '110px', + widthFooter: '220px', + alt: 'Gouvernement Logo', + }, }, components: { alert: { 'border-radius': '0' }, diff --git a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx index 26feaf8c..a951a830 100644 --- a/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx +++ b/src/frontend/apps/impress/src/cunningham/useCunninghamTheme.tsx @@ -11,6 +11,7 @@ type Theme = 'default' | 'dsfr'; interface AuthStore { theme: Theme; setTheme: (theme: Theme) => void; + themeTokens: () => Partial; colorsTokens: () => Partial; componentTokens: () => ComponentTokens; } @@ -21,6 +22,7 @@ const useCunninghamTheme = create((set, get) => { return { theme: (process.env.NEXT_PUBLIC_THEME as Theme) || 'dsfr', + themeTokens: () => currentTheme().theme, colorsTokens: () => currentTheme().theme.colors, componentTokens: () => currentTheme().components, setTheme: (theme: Theme) => { diff --git a/src/frontend/apps/impress/src/features/footer/Footer.tsx b/src/frontend/apps/impress/src/features/footer/Footer.tsx index a6fc098a..acc9c970 100644 --- a/src/frontend/apps/impress/src/features/footer/Footer.tsx +++ b/src/frontend/apps/impress/src/features/footer/Footer.tsx @@ -1,9 +1,10 @@ +import Image from 'next/image'; import React from 'react'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; import { Box, StyledLink, Text } from '@/components/'; -import LogoGouv from '@/components/LogoGouv'; +import { useCunninghamTheme } from '@/cunningham'; import IconLink from './assets/external-link.svg'; @@ -17,6 +18,8 @@ const BlueStripe = styled.div` export const Footer = () => { const { t } = useTranslation(); + const { themeTokens } = useCunninghamTheme(); + const logo = themeTokens().logo; return ( @@ -31,12 +34,16 @@ export const Footer = () => { > - + {logo && ( + {logo.alt} + )} { const { t } = useTranslation(); + const { themeTokens } = useCunninghamTheme(); + const logo = themeTokens().logo; return ( { $direction="row" > - + {logo && ( + {logo.alt} + )} {t('Docs { $position="absolute" $radius="5px" $css={` - top: 9px; + bottom: 21px; right: -21px; `} >