feat(portal): configurable hover effects and text links style

Dockerfile

@@ -60,6 +60,7 @@ ADD /api/src/ui-config.ts api/src/ui-config.ts
 ADD /ui ui
 ADD /shared/markdown shared/markdown
 ADD /portal/app/components portal/app/components
+ADD /portal/app/utils portal/app/utils
 ADD /portal/app/composables/agent portal/app/composables/agent
 COPY --from=types /app/ui/src/components/vjsf ui/src/components/vjsf
 RUN npm -w ui run build

api/types/common-application-card/schema.js

@@ -14,6 +14,7 @@ export default {
         { cols: { md: 6 }, key: 'actionsStyle' },
         { cols: { md: 6 }, key: 'elevation' },
         { cols: { md: 6 }, key: 'rounded' },
+        { cols: { md: 6 }, key: 'hover' },
         { cols: { md: 6 }, key: 'titleLinesCount' },
         { cols: { md: 6 }, key: 'openInFullPage' },
         { cols: { md: 6 }, key: 'showSummary' },
@@ -57,6 +58,10 @@ export default {
       title: 'Arrondi de la carte',
       layout: { cols: { md: 4 } }
     },
+    hover: {
+      $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/hoverConfig',
+      title: 'Effets au survol de la carte'
+    },
     titleLinesCount: {
       type: 'number',
       title: 'Nombre de lignes pour le titre',

api/types/common-dataset-card/schema.js

@@ -15,6 +15,7 @@ export default {
           'actionsStyle',
           'elevation',
           'rounded',
+          'hover',
           'titleLinesCount',
           'showSummary',
           'showDepartment'
@@ -58,6 +59,10 @@ export default {
       title: 'Arrondi de la carte',
       layout: { cols: { md: 6 } }
     },
+    hover: {
+      $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/hoverConfig',
+      title: 'Effets au survol de la carte'
+    },
     titleLinesCount: {
       type: 'number',
       title: 'Nombre de lignes pour le titre',

api/types/common-defs/schema.js

@@ -54,6 +54,53 @@ export default {
       ]
     },
 
+    hoverConfig: {
+      type: 'object',
+      title: 'Hover effects',
+      'x-i18n-title': { fr: 'Effets au survol' },
+      properties: {
+        effects: {
+          type: 'array',
+          title: 'Effects',
+          'x-i18n-title': { fr: 'Effets' },
+          description: 'If nothing is selected here nor in the portal defaults, the standard darken effect is applied. An explicitly emptied selection disables any effect.',
+          'x-i18n-description': { fr: "Si rien n'est sélectionné ici ni dans le style par défaut du portail, l'assombrissement standard est appliqué. Une sélection explicitement vidée désactive tout effet." },
+          uniqueItems: true,
+          layout: {
+            switch: [
+              { if: "parent.data?.effects?.some(e => ['background', 'border', 'titleColor'].includes(e))", cols: { md: 8 } }
+            ]
+          },
+          items: {
+            type: 'string',
+            oneOf: [
+              { const: 'darken', title: 'Darken', 'x-i18n-title': { fr: 'Assombrissement' } },
+              { const: 'elevate', title: 'Elevate', 'x-i18n-title': { fr: 'Élévation' } },
+              { const: 'background', title: 'Background color', 'x-i18n-title': { fr: 'Colorer le fond' } },
+              { const: 'border', title: 'Border color', 'x-i18n-title': { fr: 'Colorer le bord' } },
+              { const: 'titleColor', title: 'Title color', 'x-i18n-title': { fr: 'Colorer le titre' } },
+              { const: 'titleUnderline', title: 'Underline title', 'x-i18n-title': { fr: 'Souligner le titre' } },
+              { const: 'imageZoom', title: 'Image zoom', 'x-i18n-title': { fr: "Zoom de l'image" } },
+              { const: 'grow', title: 'Grow slightly', 'x-i18n-title': { fr: 'Grossir légèrement' } }
+            ]
+          }
+        },
+        color: {
+          $ref: '#/$defs/color',
+          title: 'Hover color',
+          'x-i18n-title': { fr: 'Couleur de survol' },
+          layout: {
+            if: "parent.data?.effects?.some(e => ['background', 'border', 'titleColor'].includes(e))",
+            slots: {
+              item: { name: 'color-select-item' },
+              selection: { name: 'color-select-selection' }
+            },
+            cols: { md: 4 }
+          }
+        }
+      }
+    },
+
     icon: {
       type: 'object',
       title: 'Icon configuration',
@@ -245,6 +292,37 @@ export default {
           $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/variant',
           layout: { cols: { md: 4 } }
         },
+        hoverEffects: {
+          type: 'array',
+          title: 'Hover effects',
+          'x-i18n-title': { fr: 'Effets au survol' },
+          description: 'If nothing is selected, the standard darken effect is applied, plus the hover color if defined. An explicit selection replaces this behavior.',
+          'x-i18n-description': { fr: "Sans sélection, l'assombrissement standard s'applique, complété par la couleur de survol si elle est définie. Une sélection explicite remplace ce comportement." },
+          uniqueItems: true,
+          layout: { cols: { md: 8 } },
+          items: {
+            type: 'string',
+            oneOf: [
+              { const: 'darken', title: 'Darken', 'x-i18n-title': { fr: 'Assombrissement' } },
+              { const: 'elevate', title: 'Elevate', 'x-i18n-title': { fr: 'Élévation' } },
+              { const: 'color', title: 'Color', 'x-i18n-title': { fr: 'Coloration (selon la variante)' } },
+              { const: 'grow', title: 'Grow slightly', 'x-i18n-title': { fr: 'Grossir légèrement' } }
+            ]
+          }
+        },
+        hoverColor: {
+          $ref: '#/$defs/color',
+          title: 'Hover color',
+          'x-i18n-title': { fr: 'Couleur au survol' },
+          layout: {
+            if: "!parent.data?.hoverEffects || parent.data?.hoverEffects?.includes('color')",
+            slots: {
+              item: { name: 'color-select-item' },
+              selection: { name: 'color-select-selection' }
+            },
+            cols: { md: 4 }
+          }
+        },
         showIcon: {
           type: 'boolean',
           title: "Afficher l'icône",

api/types/common-event-card/schema.js

@@ -13,6 +13,7 @@ export default {
         children: [
           { cols: { md: 6 }, key: 'elevation' },
           { cols: { md: 6 }, key: 'rounded' },
+          { cols: { md: 6 }, key: 'hover' },
           { cols: { md: 6 }, key: 'titleLinesCount' },
           { cols: { md: 6 }, key: 'showDescription' }
         ]
@@ -37,6 +38,10 @@ export default {
       },
       layout: { cols: { md: 6 } }
     },
+    hover: {
+      $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/hoverConfig',
+      title: 'Effets au survol de la carte'
+    },
     titleLinesCount: {
       type: 'number',
       title: 'Nombre de lignes pour le titre',

api/types/common-news-card/schema.js

@@ -13,6 +13,7 @@ export default {
         children: [
           { cols: { md: 6 }, key: 'elevation' },
           { cols: { md: 6 }, key: 'rounded' },
+          { cols: { md: 6 }, key: 'hover' },
           { cols: { md: 6 }, key: 'titleLinesCount' },
           { cols: { md: 6 }, key: 'showDescription' }
         ]
@@ -37,6 +38,10 @@ export default {
       },
       layout: { cols: { md: 6 } }
     },
+    hover: {
+      $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/hoverConfig',
+      title: 'Effets au survol de la carte'
+    },
     titleLinesCount: {
       type: 'number',
       title: 'Nombre de lignes pour le titre',

api/types/common-reuse-card/schema.js

@@ -13,6 +13,7 @@ export default {
         children: [
           { cols: { md: 6 }, key: 'elevation' },
           { cols: { md: 6 }, key: 'rounded' },
+          { cols: { md: 6 }, key: 'hover' },
           { cols: { md: 6 }, key: 'titleLinesCount' },
           { cols: { md: 6 }, key: 'showSummary' },
           { cols: { md: 6 }, key: 'showAuthor' }
@@ -38,6 +39,10 @@ export default {
       },
       layout: { cols: { md: 6 } }
     },
+    hover: {
+      $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/hoverConfig',
+      title: 'Effets au survol de la carte'
+    },
     titleLinesCount: {
       type: 'number',
       title: 'Nombre de lignes pour le titre',

api/types/page-element-basics/schema.js

@@ -88,6 +88,14 @@ export default {
                 },
                 props: { background: true }
               }
+            },
+            growOnHover: {
+              type: 'boolean',
+              title: 'Grow on hover',
+              'x-i18n-title': { fr: 'Grandit au survol' },
+              description: 'Only applies when the title has a link.',
+              'x-i18n-description': { fr: "S'applique uniquement lorsque le titre porte un lien." },
+              layout: { if: "parent.data?.position === 'bottom-small'" }
             }
           }
         },
@@ -96,6 +104,35 @@ export default {
           title: 'Configuration du lien',
           layout: { comp: 'card' }
         },
+        hover: {
+          type: 'object',
+          title: 'Effets au survol du lien',
+          layout: { comp: 'card', if: "parent.data?.link && parent.data?.link?.type !== 'none'" },
+          properties: {
+            effects: {
+              type: 'array',
+              title: 'Effets',
+              uniqueItems: true,
+              items: {
+                type: 'string',
+                oneOf: [
+                  { const: 'titleColor', title: 'Colorer au survol' }
+                ]
+              }
+            },
+            color: {
+              $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/color',
+              title: 'Couleur de survol',
+              layout: {
+                if: "parent.data?.effects?.includes('titleColor')",
+                slots: {
+                  item: { name: 'color-select-item' },
+                  selection: { name: 'color-select-selection' }
+                }
+              }
+            }
+          }
+        },
         anchor: {
           type: 'object',
           title: 'Anchor & table of contents',

api/types/page-element-functional/schema.js

@@ -201,6 +201,38 @@ export default {
         elevation: { $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/elevation' },
         density: { $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/density' },
         rounded: { $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/rounded' },
+        hover: {
+          type: 'object',
+          title: 'Effets au survol',
+          properties: {
+            effects: {
+              type: 'array',
+              title: 'Effets',
+              description: 'Appliqués quand les thématiques sont cliquables. Vide : hérite du style par défaut du portail.',
+              uniqueItems: true,
+              items: {
+                type: 'string',
+                oneOf: [
+                  { const: 'darken', title: 'Assombrissement' },
+                  { const: 'elevate', title: 'Élévation' },
+                  { const: 'background', title: 'Couleur de fond' },
+                  { const: 'border', title: 'Colorer le bord' }
+                ]
+              }
+            },
+            color: {
+              $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/color',
+              title: 'Couleur de survol',
+              layout: {
+                if: "parent.data?.effects?.some(e => ['background', 'border'].includes(e))",
+                slots: {
+                  item: { name: 'color-select-item' },
+                  selection: { name: 'color-select-selection' }
+                }
+              }
+            }
+          }
+        },
         variant: {
           $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/variant',
           layout: { if: 'parent.data?.redirectPage && (!Array.isArray(parent.data?.mode) || parent.data?.mode.length <= 1)' }

api/types/page-element-layout/schema.js

@@ -247,6 +247,11 @@ export default {
           type: 'boolean',
           default: true
         },
+        hover: {
+          $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/hoverConfig',
+          title: 'Effets au survol',
+          layout: { comp: 'card' }
+        },
         thumbnail: {
           type: 'object',
           title: "Configuration de l'image",

api/types/portal-config-footer/schema.js

@@ -35,7 +35,7 @@ export default {
         comp: 'card',
         title: 'Liens importants',
         subtitle: 'Les liens importants sont affichés sous forme de boutons, ce qui les rend plus visibles que de simples liens.',
-        children: ['importantLinks']
+        children: ['importantLinks', 'importantLinksConfig']
       },
       { comp: 'card', title: 'Liste de logos', children: ['extraLogos'] }
     ]
@@ -322,6 +322,10 @@ export default {
       },
       items: { $ref: 'https://github.com/data-fair/portals/common-links#/$defs/linkItem' },
       default: []
+    },
+    importantLinksConfig: {
+      $ref: 'https://github.com/data-fair/portals/common-defs#/$defs/buttonConfig',
+      title: 'Rendu des liens importants'
     }
   }
 }