🍱(frontend) Docs icon overridable from theme

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.

Author: AntoLC

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=<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.
 
 ----
 

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: '',
           },
         },

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',

src/frontend/apps/impress/public/assets/icon-docs-dsfr.svg

@@ -1080,6 +1080,9 @@
   --c--components--logo--widthfooter: ;
   --c--components--la-gaufre: false;
   --c--components--home-proconnect: false;
+  --c--components--icon--src: /assets/icon-docs.svg;
+  --c--components--icon--width: 32px;
+  --c--components--icon--height: auto;
   --c--components--favicon--png-light: /assets/favicon-light.png;
   --c--components--favicon--png-dark: /assets/favicon-dark.png;
 }
@@ -2061,6 +2064,9 @@
   --c--components--logo--alt: gouvernement logo;
   --c--components--la-gaufre: true;
   --c--components--home-proconnect: true;
+  --c--components--icon--src: /assets/icon-docs-dsfr.svg;
+  --c--components--icon--width: 32px;
+  --c--components--icon--height: auto;
   --c--components--favicon--ico: /assets/favicon-dsfr.ico;
   --c--components--favicon--png-light: /assets/favicon-dsfr.png;
   --c--components--favicon--png-dark: /assets/favicon-dark-dsfr.png;

src/frontend/apps/impress/public/assets/icon-docs.svg

@@ -801,6 +801,7 @@ export const tokens = {
         logo: { src: '', alt: '', widthHeader: '', widthFooter: '' },
         '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',
@@ -1549,6 +1550,11 @@ export const tokens = {
         },
         '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',

src/frontend/apps/impress/src/assets/icons/icon-docs.svg

@@ -18,10 +18,11 @@ import { Title } from './Title';
 export const Header = () => {
   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 (
     <Box
@@ -65,15 +66,14 @@ export const Header = () => {
           $margin={{ top: 'auto' }}
         >
           <Image
-            className="c__image-system-filter"
             data-testid="header-icon-docs"
-            src={logo?.src || '/assets/icon-docs.svg'}
+            src={icon.src || ''}
             alt=""
             width={0}
             height={0}
             style={{
-              width: logo?.width || 32,
-              height: logo?.height || 'auto',
+              width: icon.width,
+              height: icon.height,
             }}
             priority
           />

src/frontend/apps/impress/src/cunningham/cunningham-tokens.css

@@ -1,5 +1,5 @@
 export interface HeaderType {
-  logo?: {
+  icon?: {
     src?: string;
     width?: string;
     height?: string;