From 7dae3a3c024a05a3616f545b3b36e61bf31e087e Mon Sep 17 00:00:00 2001 From: Anthony LC Date: Mon, 24 Nov 2025 16:09:30 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=B1(frontend)=20Docs=20icon=20overrida?= =?UTF-8?q?ble=20from=20theme?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Depend the theme, you can have different Docs icons in the header. A customization was already possible from the theme customization file, but now it is as well possible to override the icon from the theme itself, making it easier to manage different themes with different icons. We change the theme customization variable name to "icon" instead of "logo", "logo" was already used for the main logo of the application inside the theme configuration. --- docs/theming.md | 8 +++--- .../e2e/__tests__/app-impress/header.spec.ts | 3 ++- src/frontend/apps/impress/cunningham.ts | 10 +++++++ .../impress/public/assets/icon-docs-dsfr.svg | 12 +++++++++ .../apps/impress/public/assets/icon-docs.svg | 14 +++------- .../impress/src/assets/icons/icon-docs.svg | 2 +- .../src/cunningham/cunningham-tokens.css | 6 +++++ .../src/cunningham/cunningham-tokens.ts | 6 +++++ .../src/features/header/components/Header.tsx | 12 ++++----- .../apps/impress/src/features/header/types.ts | 2 +- .../features/home/components/HomeHeader.tsx | 26 ++++++++++++------- .../env.d/dev/configuration/theme/demo.json | 2 +- 12 files changed, 69 insertions(+), 34 deletions(-) create mode 100644 src/frontend/apps/impress/public/assets/icon-docs-dsfr.svg diff --git a/docs/theming.md b/docs/theming.md index 457bbf12..51f56a89 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -32,9 +32,9 @@ Then, set the `FRONTEND_CSS_URL` environment variable to the URL of your custom ---- -# **Your logo** 📝 +# **Your Docs icon** 📝 -You can add your own logo in the header from the theme customization file. +You can add your own Docs icon in the header from the theme customization file. ### Settings 🔧 @@ -44,9 +44,9 @@ THEME_CUSTOMIZATION_FILE_PATH= ### Example of JSON -You can activate it with the `header.logo` configuration: https://github.com/suitenumerique/docs/blob/main/src/helm/env.d/dev/configuration/theme/demo.json +You can activate it with the `header.icon` configuration: https://github.com/suitenumerique/docs/blob/main/src/helm/env.d/dev/configuration/theme/demo.json -This configuration is optional. If not set, the default logo will be used. +This configuration is optional. If not set, the default icon will be used. ---- 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 349af4e1..88f6a65e 100644 --- a/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-impress/header.spec.ts @@ -156,9 +156,10 @@ test.describe('Header: Override configuration', () => { FRONTEND_THEME: 'dsfr', theme_customization: { header: { - logo: { + icon: { src: '/assets/logo-gouv.svg', width: '220px', + height: 'auto', alt: '', }, }, diff --git a/src/frontend/apps/impress/cunningham.ts b/src/frontend/apps/impress/cunningham.ts index 417134cc..48aca517 100644 --- a/src/frontend/apps/impress/cunningham.ts +++ b/src/frontend/apps/impress/cunningham.ts @@ -39,6 +39,11 @@ tokens.themes.default.components = { }, 'la-gaufre': false, 'home-proconnect': false, + icon: { + src: '/assets/icon-docs.svg', + width: '32px', + height: 'auto', + }, favicon: { 'png-light': '/assets/favicon-light.png', 'png-dark': '/assets/favicon-dark.png', @@ -65,6 +70,11 @@ const dsfrTheme = { }, 'la-gaufre': true, 'home-proconnect': true, + icon: { + src: '/assets/icon-docs-dsfr.svg', + width: '32px', + height: 'auto', + }, favicon: { ico: '/assets/favicon-dsfr.ico', 'png-light': '/assets/favicon-dsfr.png', diff --git a/src/frontend/apps/impress/public/assets/icon-docs-dsfr.svg b/src/frontend/apps/impress/public/assets/icon-docs-dsfr.svg new file mode 100644 index 00000000..4d9dc170 --- /dev/null +++ b/src/frontend/apps/impress/public/assets/icon-docs-dsfr.svg @@ -0,0 +1,12 @@ + + + + diff --git a/src/frontend/apps/impress/public/assets/icon-docs.svg b/src/frontend/apps/impress/public/assets/icon-docs.svg index 05cf0436..10af0f98 100644 --- a/src/frontend/apps/impress/public/assets/icon-docs.svg +++ b/src/frontend/apps/impress/public/assets/icon-docs.svg @@ -1,12 +1,4 @@ - - - + + + diff --git a/src/frontend/apps/impress/src/assets/icons/icon-docs.svg b/src/frontend/apps/impress/src/assets/icons/icon-docs.svg index 882e92ef..fb3dc35e 100644 --- a/src/frontend/apps/impress/src/assets/icons/icon-docs.svg +++ b/src/frontend/apps/impress/src/assets/icons/icon-docs.svg @@ -1,7 +1,7 @@ { const { t } = useTranslation(); const { data: config } = useConfig(); - const { spacingsTokens } = useCunninghamTheme(); + const { spacingsTokens, componentTokens } = useCunninghamTheme(); const { isDesktop } = useResponsiveStore(); - const logo = config?.theme_customization?.header?.logo; + const icon = + config?.theme_customization?.header?.icon || componentTokens.icon; return ( { $margin={{ top: 'auto' }} > diff --git a/src/frontend/apps/impress/src/features/header/types.ts b/src/frontend/apps/impress/src/features/header/types.ts index a9b726ed..61184f6a 100644 --- a/src/frontend/apps/impress/src/features/header/types.ts +++ b/src/frontend/apps/impress/src/features/header/types.ts @@ -1,5 +1,5 @@ export interface HeaderType { - logo?: { + icon?: { src?: string; width?: string; height?: string; diff --git a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx index 29bec738..87a0d023 100644 --- a/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx +++ b/src/frontend/apps/impress/src/features/home/components/HomeHeader.tsx @@ -1,8 +1,7 @@ import Image from 'next/image'; -import { useTranslation } from 'react-i18next'; -import IconDocs from '@/assets/icons/icon-docs.svg'; import { Box } from '@/components'; +import { useConfig } from '@/core'; import { useCunninghamTheme } from '@/cunningham'; import { ButtonTogglePanel, Title } from '@/features/header/'; import { LaGaufre } from '@/features/header/components/LaGaufre'; @@ -16,10 +15,13 @@ export const getHeaderHeight = (isSmallMobile: boolean) => isSmallMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT; export const HomeHeader = () => { - const { t } = useTranslation(); - const { themeTokens, spacingsTokens, colorsTokens } = useCunninghamTheme(); - const logo = themeTokens.logo; + const { spacingsTokens, componentTokens } = useCunninghamTheme(); + const logo = componentTokens.logo; const { isSmallMobile } = useResponsiveStore(); + const { data: config } = useConfig(); + + const icon = + config?.theme_customization?.header?.icon || componentTokens.icon; return ( { $position="relative" $height="fit-content" > - diff --git a/src/helm/env.d/dev/configuration/theme/demo.json b/src/helm/env.d/dev/configuration/theme/demo.json index fa509303..c15f5a40 100644 --- a/src/helm/env.d/dev/configuration/theme/demo.json +++ b/src/helm/env.d/dev/configuration/theme/demo.json @@ -135,7 +135,7 @@ } }, "header": { - "logo": { + "icon": { "src": "/assets/icon-docs.svg", "width": "32px" }