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" }