feat: add hero bloc (#855)

ThibaudDauce · web-flow · commit 4a1bc014dab2 · 2026-01-12T13:58:06.000+01:00
- Require opendatateam/udata#3609
diff --git a/components/Pages/AddBlocDropdown.vue b/components/Pages/AddBlocDropdown.vue
@@ -65,6 +65,7 @@ const { t } = useTranslation()
 const blocsTypes = useBlocsTypes()
 
 const newBlocsTypes: Array<{ name: string, blocsTypes: Array<keyof typeof blocsTypes> }> = [
+  { name: t('Mise en page'), blocsTypes: ['HeroBloc'] },
   { name: t('Contenus à la une'), blocsTypes: ['DatasetsListBloc', 'ReusesListBloc', 'DataservicesListBloc', 'LinksListBloc'] },
 ]
 </script>
diff --git a/components/Pages/HeroBloc.vue b/components/Pages/HeroBloc.vue
@@ -0,0 +1,86 @@
+<template>
+  <div
+    class="py-16"
+    :class="heroBgColor(bloc.color)"
+  >
+    <div class="container space-y-5">
+      <EditableText
+        v-if="edit"
+        v-model="bloc.title"
+        class="text-white font-extrabold text-5xl mb-0"
+      />
+      <h1
+        v-else
+        class="text-white font-extrabold text-5xl mb-0"
+      >
+        {{ bloc.title }}
+      </h1>
+
+      <EditableText
+        v-if="edit && bloc.description"
+        :model-value="bloc.description ?? ''"
+        class="italic font-spectral text-2xl text-white mb-0"
+        @update:model-value="bloc.description = $event"
+      />
+      <p
+        v-else-if="bloc.description"
+        class="italic font-spectral text-2xl text-white mb-0"
+      >
+        {{ bloc.description }}
+      </p>
+      <button
+        v-else-if="edit"
+        class="text-white/70 hover:text-white text-sm"
+        @click="bloc.description = $t('Description')"
+      >
+        + {{ $t('Ajouter une description') }}
+      </button>
+
+      <div
+        v-if="edit"
+        class="flex items-center gap-2 pt-4"
+      >
+        <span class="text-white text-sm">{{ $t('Couleur') }} :</span>
+        <button
+          v-for="color in heroColors"
+          :key="color.value"
+          type="button"
+          class="size-8 rounded-full border-2 transition-transform"
+          :class="[
+            heroBgColor(color.value),
+            bloc.color === color.value ? 'border-white scale-110' : 'border-transparent opacity-70 hover:opacity-100',
+          ]"
+          :title="color.label"
+          @click="bloc.color = color.value"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import EditableText from './EditableText.vue'
+import type { HeroBloc } from '~/types/pages'
+
+defineProps<{
+  edit: boolean
+}>()
+
+const bloc = defineModel<HeroBloc>({ required: true })
+
+const { t } = useTranslation()
+
+const heroColors = [
+  { label: t('Bleu'), value: 'primary' as const },
+  { label: t('Vert'), value: 'green' as const },
+  { label: t('Violet'), value: 'purple' as const },
+]
+
+function heroBgColor(color: 'primary' | 'green' | 'purple') {
+  return {
+    primary: 'bg-new-blue-illustration',
+    green: 'bg-new-green-illustration',
+    purple: 'bg-new-brown-illustration',
+  }[color]
+}
+</script>
diff --git a/components/Pages/PageShow.vue b/components/Pages/PageShow.vue
@@ -3,7 +3,8 @@
     <div
       v-for="(bloc, index) in workingPage.blocs"
       :key="bloc.id"
-      class="py-24 odd:bg-gray-some even:bg-white relative"
+      class="relative"
+      :class="bloc.class !== 'HeroBloc' && 'py-24 odd:bg-gray-some even:bg-white'"
     >
       <!-- Add button above the bloc (absolute positioned) -->
       <div
@@ -48,7 +49,18 @@
         />
       </div>
 
-      <div class="container space-y-6">
+      <!-- HeroBloc has its own full-width layout -->
+      <HeroBloc
+        v-if="bloc.class === 'HeroBloc'"
+        v-model="(workingPage.blocs[index] as HeroBlocType)"
+        :edit
+      />
+
+      <!-- Other blocs use container layout with title/subtitle -->
+      <div
+        v-else
+        class="container space-y-6"
+      >
         <div class="space-y-2.5">
           <!-- Editable title -->
           <EditableText
@@ -173,12 +185,14 @@ import DatasetsListBloc from './DatasetsListBloc.vue'
 import DataservicesListBloc from './DataservicesListBloc.vue'
 import ReusesListBloc from './ReusesListBloc.vue'
 import LinksListBloc from './LinksListBloc.vue'
+import HeroBloc from './HeroBloc.vue'
 import type {
   Page,
   DatasetsListBloc as DatasetsListBlocType,
   DataservicesListBloc as DataservicesListBlocType,
   ReusesListBloc as ReusesListBlocType,
   LinksListBloc as LinksListBlocType,
+  HeroBloc as HeroBlocType,
 } from '~/types/pages'
 
 const props = withDefaults(defineProps<{
diff --git a/tests/edito/pages-editor.spec.ts b/tests/edito/pages-editor.spec.ts
@@ -21,20 +21,46 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Debug screenshot: after deleting all blocs
   await page.screenshot({ path: 'tests/edito/screenshots/01b-empty-page.png', fullPage: true })
 
-  // === Step 1: Add a DatasetsListBloc with multiple datasets ===
+  // === Step 1: Add a HeroBloc ===
   await page.getByRole('button', { name: 'Ajouter un bloc' }).first().click()
+  await page.getByText('Hero').click()
+  await page.waitForTimeout(300)
+
+  // Edit the hero title (it has a default "Titre")
+  const heroTitle = page.locator('.bg-new-blue-illustration [contenteditable="true"]').first()
+  await heroTitle.click()
+  await heroTitle.fill('Bienvenue sur data.gouv.fr')
+  await page.mouse.click(1, 1)
+
+  // Add a description
+  await page.getByText('Ajouter une description').click()
+  await page.waitForTimeout(200)
+  const heroDescription = page.locator('.bg-new-blue-illustration [contenteditable="true"]').nth(1)
+  await heroDescription.click()
+  await heroDescription.fill('La plateforme ouverte des données publiques françaises')
+  await page.mouse.click(1, 1)
+
+  // Change the color to green
+  await page.locator('.bg-new-green-illustration.size-8').click()
+  await page.waitForTimeout(200)
+
+  // Debug screenshot: after adding hero bloc
+  await page.screenshot({ path: 'tests/edito/screenshots/01c-hero-bloc.png', fullPage: true })
+
+  // === Step 2: Add a DatasetsListBloc with multiple datasets ===
+  await page.getByRole('button', { name: 'Ajouter un bloc' }).last().click()
   await page.getByText('Données à la une').click()
   await page.waitForTimeout(300)
 
-  // Edit the title
-  const datasetsBlocTitle = page.locator('[contenteditable="true"]').first()
+  // Edit the title (use container to avoid hero bloc)
+  const datasetsBlocTitle = page.locator('.container [contenteditable="true"]').first()
   await datasetsBlocTitle.click()
   await datasetsBlocTitle.fill('Nos jeux de données phares')
   await page.mouse.click(1, 1)
 
   // Add subtitle
   await page.getByText('Ajouter un sous-titre').first().click()
-  const datasetsSubtitle = page.locator('[contenteditable="true"]').nth(1)
+  const datasetsSubtitle = page.locator('.container [contenteditable="true"]').nth(1)
   await datasetsSubtitle.click()
   await datasetsSubtitle.fill('Découvrez les données les plus consultées')
   await page.mouse.click(1, 1)
@@ -65,7 +91,7 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Debug screenshot: after adding datasets
   await page.screenshot({ path: 'tests/edito/screenshots/02-datasets-bloc.png', fullPage: true })
 
-  // === Step 2: Add a ReusesListBloc with multiple reuses ===
+  // === Step 3: Add a ReusesListBloc with multiple reuses ===
   await page.getByRole('button', { name: 'Ajouter un bloc' }).last().click()
   await page.getByText('Réutilisations à la une').click()
   await page.waitForTimeout(300)
@@ -102,7 +128,7 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Debug screenshot: after adding reuses
   await page.screenshot({ path: 'tests/edito/screenshots/03-reuses-bloc.png', fullPage: true })
 
-  // === Step 3: Add a DataservicesListBloc with multiple APIs ===
+  // === Step 4: Add a DataservicesListBloc with multiple APIs ===
   await page.getByRole('button', { name: 'Ajouter un bloc' }).last().click()
   await page.getByText('APIs à la une').click()
   await page.waitForTimeout(300)
@@ -139,7 +165,7 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Debug screenshot: after adding dataservices
   await page.screenshot({ path: 'tests/edito/screenshots/04-dataservices-bloc.png', fullPage: true })
 
-  // === Step 4: Add a LinksListBloc WITH paragraph ===
+  // === Step 5: Add a LinksListBloc WITH paragraph ===
   await page.getByRole('button', { name: 'Ajouter un bloc' }).last().click()
   await page.getByText('Liens à la une').click()
   await page.waitForTimeout(300)
@@ -188,7 +214,7 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Debug screenshot: after adding links bloc with paragraph
   await page.screenshot({ path: 'tests/edito/screenshots/05-links-bloc-with-paragraph.png', fullPage: true })
 
-  // === Step 5: Add a LinksListBloc WITHOUT paragraph ===
+  // === Step 6: Add a LinksListBloc WITHOUT paragraph ===
   await page.getByRole('button', { name: 'Ajouter un bloc' }).last().click()
   await page.getByText('Liens à la une').click()
   await page.waitForTimeout(300)
@@ -228,7 +254,7 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Debug screenshot: after adding links bloc without paragraph
   await page.screenshot({ path: 'tests/edito/screenshots/06-links-bloc-without-paragraph.png', fullPage: true })
 
-  // === Step 6: Test bloc manipulation ===
+  // === Step 7: Test bloc manipulation ===
   // Move the first bloc down
   await page.locator('[title="Descendre"]').first().click()
   await page.waitForTimeout(300)
@@ -278,7 +304,7 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Debug screenshot: after re-adding reuses bloc
   await page.screenshot({ path: 'tests/edito/screenshots/09-reuses-bloc-readded.png', fullPage: true })
 
-  // === Step 7: Save the page ===
+  // === Step 8: Save the page ===
   await page.getByRole('button', { name: 'Sauvegarder' }).click()
   await page.waitForTimeout(1000)
 
@@ -288,7 +314,7 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   // Wait for the toast to confirm save
   await expect(page.getByText('Page créée').or(page.getByText('Page sauvegardée'))).toBeVisible()
 
-  // === Step 8: Final screenshot for visual regression ===
+  // === Step 9: Final screenshot for visual regression ===
   await page.waitForLoadState('networkidle')
   await page.waitForTimeout(500)
 
diff --git a/tests/edito/pages-editor.spec.ts-snapshots/edito-page-final-chromium-linux.png b/tests/edito/pages-editor.spec.ts-snapshots/edito-page-final-chromium-linux.png
diff --git a/tests/edito/pages-editor.spec.ts-snapshots/edito-page-final-firefox-linux.png b/tests/edito/pages-editor.spec.ts-snapshots/edito-page-final-firefox-linux.png
diff --git a/types/pages.ts b/types/pages.ts
@@ -37,4 +37,11 @@ export type LinksListBloc = {
   links: Array<LinkInBloc>
 } & BlocWithTitle & { id: string }
 
-export type PageBloc = DatasetsListBloc | DataservicesListBloc | ReusesListBloc | LinksListBloc
+export type HeroBloc = {
+  class: 'HeroBloc'
+  title: string
+  description: string | null
+  color: 'primary' | 'green' | 'purple'
+} & { id: string }
+
+export type PageBloc = DatasetsListBloc | DataservicesListBloc | ReusesListBloc | LinksListBloc | HeroBloc
diff --git a/utils/pages.ts b/utils/pages.ts
@@ -1,5 +1,5 @@
-import { RiDatabase2Line, RiLineChartLine, RiLink, RiRobot2Line } from '@remixicon/vue'
-import type { DataservicesListBloc, DatasetsListBloc, LinksListBloc, ReusesListBloc } from '~/types/pages'
+import { RiDatabase2Line, RiLineChartLine, RiLink, RiRobot2Line, RiWindow2Line } from '@remixicon/vue'
+import type { DataservicesListBloc, DatasetsListBloc, HeroBloc, LinksListBloc, ReusesListBloc } from '~/types/pages'
 
 export function useBlocsTypes() {
   const { t } = useTranslation()
@@ -29,5 +29,11 @@ export function useBlocsTypes() {
       description: t('Mettre en avant jusqu\'à 4 liens'),
       default: (): Omit<LinksListBloc, 'id'> => ({ class: 'LinksListBloc', title: 'Mes liens', subtitle: '', paragraph: '', main_link_title: '', main_link_url: '', links: [] }),
     },
+    HeroBloc: {
+      icon: RiWindow2Line,
+      name: t('Hero'),
+      description: t('Bandeau d\'en-tête avec titre et description'),
+      default: (): Omit<HeroBloc, 'id'> => ({ class: 'HeroBloc', title: 'Titre', description: null, color: 'primary' }),
+    },
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ const { t } = useTranslation()`
`65`	`65`	`const blocsTypes = useBlocsTypes()`
`66`	`66`
`67`	`67`	`const newBlocsTypes: Array<{ name: string, blocsTypes: Array<keyof typeof blocsTypes> }> = [`
	`68`	`+ { name: t('Mise en page'), blocsTypes: ['HeroBloc'] },`
`68`	`69`	`{ name: t('Contenus à la une'), blocsTypes: ['DatasetsListBloc', 'ReusesListBloc', 'DataservicesListBloc', 'LinksListBloc'] },`
`69`	`70`	`]`
`70`	`71`	`</script>`