feat: add CTA to HeroBloc (#882)

- Require opendatateam/udata#3630

---------

Co-authored-by: Nicolas KEMPF <[email protected]>

Author: ThibaudDauce

components/Pages/BrandedButtonEditor.vue

@@ -23,16 +23,15 @@
         role="textbox"
         class="outline-none min-w-[10ch] focus:ring-2 focus:ring-blue-300 rounded-sm"
         :aria-label="$t('Titre du bouton')"
-        @blur="$emit('update:title', ($event.target as HTMLElement).textContent || '')"
+        @blur="title = ($event.target as HTMLElement).textContent || ''"
       >{{ title || $t('Titre du bouton') }}</span>
     </div>
     <input
-      :value="href"
+      v-model="href"
       type="text"
       class="block text-sm text-gray-500 border rounded px-2 py-1 w-full max-w-xs"
       :placeholder="$t('URL du bouton')"
       :aria-label="$t('URL du bouton')"
-      @input="$emit('update:href', ($event.target as HTMLInputElement).value)"
     >
   </div>
 
@@ -54,15 +53,20 @@ import { RiDeleteBinLine } from '@remixicon/vue'
 
 const props = withDefaults(defineProps<{
   edit: boolean
-  title?: string | null
-  href?: string | null
   color?: ComponentProps<typeof BrandedButton>['color']
   class?: string
 }>(), {
   color: 'primary',
   class: '',
 })
 
+const title = defineModel<string | null>('title')
+const href = defineModel<string | null>('href')
+
+defineEmits<{
+  clear: []
+}>()
+
 const buttonColors = computed(() => {
   const colors: Record<string, string> = {
     'primary': 'text-white bg-new-primary !border-new-primary',
@@ -75,10 +79,4 @@ const buttonColors = computed(() => {
   }
   return colors[props.color] || colors.primary
 })
-
-defineEmits<{
-  'update:title': [value: string]
-  'update:href': [value: string]
-  'clear': []
-}>()
 </script>

components/Pages/HeroBloc.vue

@@ -36,6 +36,15 @@
         + {{ $t('Ajouter une description') }}
       </button>
 
+      <BrandedButtonEditor
+        v-model:title="bloc.main_link_title"
+        v-model:href="bloc.main_link_url"
+        :edit
+        color="secondary"
+        class="mt-4"
+        @clear="bloc.main_link_title = null; bloc.main_link_url = null"
+      />
+
       <div
         v-if="edit"
         class="flex items-center gap-2 pt-4"
@@ -60,6 +69,7 @@
 
 <script setup lang="ts">
 import EditableText from './EditableText.vue'
+import BrandedButtonEditor from './BrandedButtonEditor.vue'
 import type { HeroBloc } from '~/types/pages'
 
 defineProps<{

components/Pages/LinksListBloc.vue

@@ -37,13 +37,11 @@
 
         <!-- Main link (in the left column when paragraph is present) -->
         <BrandedButtonEditor
+          v-model:title="bloc.main_link_title"
+          v-model:href="bloc.main_link_url"
           :edit
-          :title="bloc.main_link_title"
-          :href="bloc.main_link_url"
           :color="mainColor"
           class="mt-12"
-          @update:title="bloc.main_link_title = $event"
-          @update:href="bloc.main_link_url = $event"
           @clear="bloc.main_link_title = ''; bloc.main_link_url = ''"
         />
       </div>
@@ -137,13 +135,11 @@
         <!-- Main button (in the right column when no paragraph) -->
         <BrandedButtonEditor
           v-if="!bloc.paragraph"
+          v-model:title="bloc.main_link_title"
+          v-model:href="bloc.main_link_url"
           :edit
-          :title="bloc.main_link_title"
-          :href="bloc.main_link_url"
           :color="mainColor"
           class="mt-4"
-          @update:title="bloc.main_link_title = $event"
-          @update:href="bloc.main_link_url = $event"
           @clear="bloc.main_link_title = ''; bloc.main_link_url = ''"
         />
       </div>

tests/edito/pages-editor.spec.ts

@@ -61,6 +61,14 @@ test('can edit edito page with all bloc types', async ({ page }) => {
   await page.locator('.bg-new-green-illustration.size-8').click()
   await page.waitForTimeout(200)
 
+  // Add a CTA button
+  const heroCTATitle = page.locator('.bg-new-green-illustration [aria-label="Titre du bouton"]')
+  await heroCTATitle.click()
+  await heroCTATitle.fill('Découvrir les données')
+  await page.mouse.click(1, 1)
+  const heroCTAUrl = page.locator('.bg-new-green-illustration [aria-label="URL du bouton"]')
+  await heroCTAUrl.fill('https://www.data.gouv.fr/fr/datasets/')
+
   // Debug screenshot: after adding hero bloc
   await page.screenshot({ path: 'tests/edito/screenshots/01c-hero-bloc.png', fullPage: true })
 

tests/edito/pages-editor.spec.ts-snapshots/edito-page-final-chromium-linux.png

@@ -61,6 +61,8 @@ export type HeroBloc = {
   title: string
   description: string | null
   color: 'primary' | 'green' | 'purple'
+  main_link_title: string | null
+  main_link_url: string | null
 } & { id: string }
 
 export type PageBloc = ContentBloc | AccordionListBloc | HeroBloc

tests/edito/pages-editor.spec.ts-snapshots/edito-page-final-firefox-linux.png

@@ -69,7 +69,7 @@ export function useBlocsTypes() {
       description: t('Bandeau d\'en-tête avec titre et description'),
       component: HeroBlocComponent,
       fullWidth: true,
-      default: (): Omit<HeroBloc, 'id'> => ({ class: 'HeroBloc', title: 'Titre', description: null, color: 'primary' }),
+      default: (): Omit<HeroBloc, 'id'> => ({ class: 'HeroBloc', title: 'Titre', description: null, color: 'primary', main_link_title: null, main_link_url: null }),
     },
   }
 }