@designcrowd/library.brand-page 5.14.11 → 5.14.12

package/src/brand-page/components/text-media-section/TextMediaSection.vue

@@ -6,7 +6,7 @@
         'tw-pl-0 tw-pr-0': hasNoPadding || !hasBrandSitePadding,
         'tw-rounded-md': hasRoundedCorners,
       }"
-      :style="viewModel.backgroundStyle"
+      :style="viewModel.backgroundStyle as any"
     >
       <div
         :class="[
@@ -63,7 +63,9 @@
               'c_text-media--shape': isCardCenteredWithShapes,
             }"
             :style="
-              isCardCenteredAlign && item.imageUrl ? viewModel.cardStyle : {}
+              isCardCenteredAlign && item.imageUrl
+                ? (viewModel.cardStyle as any)
+                : {}
             "
           >
             <div
@@ -112,6 +114,17 @@
                 element="p"
                 data-test-tag-image-paragraph
               />
+              <div
+                v-if="item.buttonViewModel"
+                class="tw-w-full tw-flex"
+                :class="buttonAlignClass"
+              >
+                <Button
+                  :view-model="getbuttonViewModel(item)"
+                  :context="context"
+                  class="tw-w-fit"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -119,13 +132,159 @@
     </div>
   </section>
 </template>
-<script>
-import TextMediaSectionMixin from './TextMediaSection.mixin.ts';
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { computed } from 'vue';
 import TextWrapper from '../text-wrapper/TextWrapper.vue';
+import Button from '../button/Button.vue';
+import type {
+  TextImageSectionViewModel,
+  ButtonViewModel,
+} from '../../view-models';
+import type { BrandPageContext } from '../../models';
+import type { TextMediaItem } from '../../models';
+import {
+  ALIGN_CARD_CENTER_IMAGE,
+  ALIGN_CENTERED,
+  ALIGN_LEFT_ALIGNED,
+  ALIGN_RIGHT_ALIGNED,
+  ALTERNATE_IMAGE,
+  MEDIA_ONLY,
+} from '../../constants';
+import { isHexTransparent } from '../../utils/color.util';
+import { escapeContentText, getRenderText } from '../../utils';
 
-export default {
-  components: { TextWrapper },
-  mixins: [TextMediaSectionMixin],
+const props = defineProps({
+  viewModel: {
+    type: Object as PropType<TextImageSectionViewModel>,
+    required: true,
+  },
+  context: {
+    type: Object as PropType<BrandPageContext>,
+    required: true,
+  },
+  isPreview: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  isMobileDevice: {
+    type: Boolean,
+    required: false,
+    default: undefined,
+  },
+});
+
+const items = computed(() => props.viewModel.items);
+
+const shouldDisplayText = computed(
+  () => props.viewModel.displayStyle !== MEDIA_ONLY,
+);
+
+const isFullWidth = computed(
+  () => props.context.isBrandSite && props.viewModel.areImagesFullWidth,
+);
+
+const hasTitle = computed(() => {
+  const sanitizedTitle = escapeContentText(props.viewModel.title) || '';
+  return sanitizedTitle.length > 0;
+});
+
+const shouldHorizontalAlign = computed(() => {
+  return (
+    props.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
+    props.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED
+  );
+});
+
+const shouldCenterAlign = computed(() => {
+  return (
+    props.viewModel.displayStyle === ALIGN_CENTERED ||
+    props.viewModel.displayStyle === MEDIA_ONLY ||
+    props.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE
+  );
+});
+
+const isCardCenteredAlign = computed(
+  () => props.viewModel.displayStyle === ALIGN_CARD_CENTER_IMAGE,
+);
+
+const isCardCenteredWithShapes = computed(() => {
+  return (
+    isCardCenteredAlign.value &&
+    props.viewModel.role === 'shapes-section' &&
+    !props.context.isTemplate &&
+    !props.context.isBrandSite
+  );
+});
+
+const isAlternateRow = computed(
+  () => props.viewModel.displayStyle === ALTERNATE_IMAGE,
+);
+
+const hasBackground = computed((): boolean => {
+  if (!props.viewModel.backgroundStyle.backgroundColor) {
+    return false;
+  }
+  return !isHexTransparent(props.viewModel.backgroundStyle.backgroundColor);
+});
+
+const hasNoPadding = computed(() => {
+  if (props.context.isBrandPageOrIsBrandContact) {
+    return !hasBackground.value;
+  }
+  return props.viewModel.areImagesFullWidth;
+});
+
+const hasBrandSitePadding = computed(
+  () => props.context.isBrandSite && !props.viewModel.areImagesFullWidth,
+);
+
+const buttonAlignClass = computed(() => {
+  return props.viewModel.displayStyle === ALIGN_LEFT_ALIGNED ||
+    props.viewModel.displayStyle === ALIGN_RIGHT_ALIGNED ||
+    props.viewModel.displayStyle === ALTERNATE_IMAGE
+    ? 'tw-justify-start'
+    : 'tw-justify-center';
+});
+
+const hasRoundedCorners = computed(() => {
+  if (props.context.isBrandPageOrIsBrandContact) {
+    return !props.viewModel.areImagesFullWidth;
+  }
+  return !hasNoPadding.value;
+});
+
+const shouldDisplayOnFullWidth = computed(() => !props.context.isMobile);
+
+const hasDescription = computed(() => {
+  const sanitizedDescription =
+    escapeContentText(props.viewModel.description) || '';
+
+  return sanitizedDescription.length > 0;
+});
+
+const renderText = (paragraph: any): string => {
+  if (!paragraph) {
+    return '';
+  }
+  return getRenderText(paragraph);
+};
+
+const getbuttonViewModel = (
+  item: TextMediaItem & { buttonViewModel?: ButtonViewModel },
+): ButtonViewModel => {
+  if (!item.buttonViewModel) {
+    return {} as ButtonViewModel;
+  }
+
+  const buttonViewModel = { ...item.buttonViewModel };
+
+  buttonViewModel.buttonLinkType = item.buttonLinkType || 'url';
+  buttonViewModel.pageSlug = item.pageSlug || '';
+  buttonViewModel.url = item.url || '';
+
+  return buttonViewModel;
 };
 </script>
 

package/src/brand-page/models/index.ts

@@ -236,7 +236,7 @@ export interface ImageItem {
   mediaType?: MediaType;
   colorReplacements?: ColorReplacement[];
   size?: string;
-  imageLink: string;
+  imageLink: string | false;
 
   // overrides for personalisation
   imageUrlOverride?: string;
@@ -425,9 +425,15 @@ export type MediaType = keyof typeof MEDIA_TYPES;
 export interface TextMediaItem extends ImageItem {
   title: string;
   paragraph: string;
-  imageLink: string;
   itemsId: number;
 
+  buttonText?: string | false;
+  pageSlug?: string;
+  buttonLinkType?: ButtonLinkType;
+  url?: string;
+  email?: string;
+  tel?: string;
+
   // overrides for personalisation
   titleOverride?: string;
   paragraphOverride?: string;
@@ -485,6 +491,7 @@ export interface ImagesSectionContent extends Content, MediaSection {
   aspectRatio: AspectRatio;
   areImagesFullWidth: boolean;
   cardStyle: BrandPageCssStyle;
+  enablePopup: boolean;
 }
 
 export interface MediaSection extends Content {
@@ -497,6 +504,7 @@ export interface MediaSection extends Content {
   headingStyle: TextStyleDeclaration;
   paragraphStyle: TextStyleDeclaration;
   backgroundStyle: BrandPageCssStyle;
+  buttonTextStyle?: TextStyleDeclaration;
 }
 
 export interface ColorReplacement {

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -426,7 +426,7 @@ BrandPageModel {
       },
     },
   },
-  "v": 5.2,
+  "v": 6,
 }
 `;
 
@@ -839,7 +839,7 @@ BrandPageModel {
       },
     },
   },
-  "v": 5.2,
+  "v": 6,
 }
 `;
 
@@ -1259,6 +1259,6 @@ BrandPageModel {
       },
     },
   },
-  "v": 5.2,
+  "v": 6,
 }
 `;

package/src/brand-page/utils/migration/migration-06.ts

@@ -0,0 +1,64 @@
+import {
+  type BrandPageModel,
+  type ImagesSectionContent,
+  type TextMediaItem,
+} from '../..';
+import { isImagesContent } from '../model.util';
+
+export const migration06 = (brandPageModel: BrandPageModel): BrandPageModel => {
+  brandPageModel.pages.forEach((page) => {
+    page.contents.forEach((content) => {
+      // Migration for ImagesSection content
+      if (isImagesContent(content)) {
+        const imagesSectionContent = content as ImagesSectionContent;
+
+        // Add content-level buttonTextStyle if it doesn't exist
+        if (imagesSectionContent.buttonTextStyle === undefined) {
+          imagesSectionContent.buttonTextStyle = {};
+        }
+
+        // Add content-level buttonTextStyle if it doesn't exist
+        if (imagesSectionContent.enablePopup === undefined) {
+          imagesSectionContent.enablePopup = true;
+        }
+
+        imagesSectionContent.items?.forEach((item) => {
+          const mediaItem = item as TextMediaItem;
+
+          // Add buttonText if it doesn't exist
+          if (mediaItem.buttonText === undefined) {
+            mediaItem.buttonText = false;
+          }
+
+          // Remove item-level buttonTextStyle as it's now at content level
+          if ((mediaItem as any).buttonTextStyle !== undefined) {
+            delete (mediaItem as any).buttonTextStyle;
+          }
+
+          // Add button link properties if they don't exist
+          if (mediaItem.buttonLinkType === undefined) {
+            mediaItem.buttonLinkType = 'url';
+          }
+
+          if (mediaItem.url === undefined) {
+            mediaItem.url = '';
+          }
+
+          if (mediaItem.email === undefined) {
+            mediaItem.email = '';
+          }
+
+          if (mediaItem.tel === undefined) {
+            mediaItem.tel = '';
+          }
+
+          if (mediaItem.pageSlug === undefined) {
+            mediaItem.pageSlug = '';
+          }
+        });
+      }
+    });
+  });
+
+  return brandPageModel;
+};

package/src/brand-page/utils/migration.util.ts

@@ -7,6 +7,7 @@ import { migration04 } from './migration/migration-04';
 import { migration05 } from './migration/migration-05';
 import { migration05_1 } from './migration/migration-05_1';
 import { migration05_2 } from './migration/migration-05_2';
+import { migration06 } from './migration/migration-06';
 
 interface MigrationTableItem {
   version: number;
@@ -64,6 +65,11 @@ const MIGRATION_TABLE = [
     migrateFn: migration05_2,
     description: 'Migrating twitter content to x content',
   },
+  {
+    version: 6,
+    migrateFn: migration06,
+    description: 'Migrating new fields for images section',
+  },
 ] as MigrationTableItem[];
 
 export const GetLatestModelVersion = () =>

package/src/brand-page/utils/view-model.util.ts

@@ -37,6 +37,7 @@ import type {
   ShopContent,
   SensitiveContent,
   BookingSectionContent,
+  TextShapeItem,
 } from '../models';
 import { ButtonStyles, SENSITIVE_CONTENT_TYPES, VIEWPORTS } from '../models';
 import {
@@ -393,10 +394,24 @@ const mapToButtonViewModel = (
     selectedButtonStyleId: styles.buttonStyles.selectedButtonStyleId,
   };
 
+  // Extract only text-related properties from titleStyle, excluding button styling properties
+  const textOnlyProperties = {
+    color: options.titleStyle.color,
+    fontFamily: options.titleStyle.fontFamily,
+    fontSize: options.titleStyle.fontSize,
+    fontWeight: options.titleStyle.fontWeight,
+    textAlign: options.titleStyle.textAlign,
+    letterSpacing: options.titleStyle.letterSpacing,
+    lineHeight: options.titleStyle.lineHeight || LINE_HEIGHT_HEADINGS,
+    textStyleType: options.titleStyle.textStyleType,
+    applyAutoScale: options.titleStyle.applyAutoScale,
+    textDecoration: options.titleStyle.textDecoration,
+    fontStyle: options.titleStyle.fontStyle,
+  };
+
   /* For text content text style backward compatibility */
   const titleStyle: TextStyleDeclaration = {
-    lineHeight: LINE_HEIGHT_HEADINGS,
-    ...options.titleStyle,
+    ...textOnlyProperties,
   };
 
   return applyViewModelTextStyles(
@@ -707,27 +722,55 @@ export const mapToImagesSectionViewModel = (
   styles: PageStyles,
   brandPageType: BrandPageType,
 ): TextImageSectionViewModel => {
+  const processedItems = content.items
+    .map((item, index) => ({
+      ...item,
+      itemsId: index,
+    }))
+    .filter((item) =>
+      content.displayStyle === ALIGN_LEFT_ALIGNED ||
+      content.displayStyle === ALIGN_RIGHT_ALIGNED
+        ? item.itemsId < MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH
+        : true,
+    )
+    .map((item) => ({
+      ...item,
+      buttonViewModel:
+        item.buttonText && typeof item.buttonText === 'string'
+          ? mapToButtonViewModel(
+              {
+                ...content,
+                clickActionField: 'url',
+                iconUrl: '',
+                modalImageUrl: '',
+                url: item.url,
+                title: item.buttonText || '',
+                page: item.pageSlug || '',
+                colorReplacements: [],
+                titleStyle:
+                  content.buttonTextStyle || styles.buttonStyles.style,
+              },
+              styles,
+              {
+                titleStyle:
+                  content.buttonTextStyle || styles.buttonStyles.style,
+              },
+            )
+          : undefined,
+    }));
+
   return applyViewModelTextStyles(
     {
       ...content,
       role: content.type,
       type: 'images-section',
+      buttonTextStyle: styles.buttonStyles.style,
       isFullWidth:
         brandPageType === BRAND_PAGE_TYPES.brandSite ||
         ((brandPageType === BRAND_PAGE_TYPES.default ||
           brandPageType === BRAND_PAGE_TYPES.brandContact) &&
           content.areImagesFullWidth),
-      items: content.items
-        .map((item, index) => ({
-          ...item,
-          itemsId: index,
-        }))
-        .filter((item) =>
-          content.displayStyle === ALIGN_LEFT_ALIGNED ||
-          content.displayStyle === ALIGN_RIGHT_ALIGNED
-            ? item.itemsId < MAX_IMAGES_SECTION_ALIGNMENT_ITEMS_LENGTH
-            : true,
-        ),
+      items: processedItems,
     },
     styles,
   );
@@ -738,12 +781,18 @@ const mapToShapesSectionViewModel = (
   styles: PageStyles,
   brandPageType: BrandPageType,
 ): ShapesSectionViewModel => {
+  const processedItems: TextShapeItem[] = content.items.map((item, index) => ({
+    ...item,
+    itemsId: index,
+  }));
+
   return applyViewModelTextStyles(
     {
       ...content,
       role: content.type,
       type: 'shapes-section',
       isFullWidth: brandPageType === BRAND_PAGE_TYPES.brandSite,
+      items: processedItems,
     },
     styles,
   );

package/src/brand-page/view-models.ts

@@ -29,6 +29,7 @@ import type {
   PageFooterMobile,
   PageFooterDesktop,
   TextMediaItem,
+  TextShapeItem,
   TextStyleDeclaration,
   AspectRatio,
   LogoVariation,
@@ -113,7 +114,8 @@ export interface ProfileViewModel
 
 export interface ShapesSectionViewModel
   extends ContentViewModel,
-    Omit<ShapesSectionContent, 'type'> {
+    Omit<ShapesSectionContent, 'type' | 'items'> {
+  items: TextShapeItem[];
   isFullWidth: boolean;
 }
 
@@ -175,15 +177,19 @@ export interface TextImageSectionViewModel {
   type: 'images-section';
   role: ContentType;
   title: string;
+  description: string;
   displayStyle: ImagesSectionContentDisplayStyle;
   aspectRatio: AspectRatio;
   areImagesFullWidth: boolean;
-  items: TextMediaItem[];
+  enablePopup: boolean;
+  items: (TextMediaItem & { buttonViewModel?: ButtonViewModel })[];
   backgroundStyle: BrandPageCssStyle;
   titleStyle: TextStyleDeclaration;
+  descriptionStyle: TextStyleDeclaration;
   headingStyle: TextStyleDeclaration;
   paragraphStyle: TextStyleDeclaration;
   cardStyle: BrandPageCssStyle;
+  buttonTextStyle?: TextStyleDeclaration;
   isFullWidth: boolean;
 }
 

package/src/brand-page-maker/constants/config-settings-constant.ts

@@ -127,7 +127,6 @@ import {
   colorReplacementProfileVisibilityTypeAssessor,
   colorReplacementIconVisibilityTypeAssessor,
   imagesSectionCardStyleVisibilityAssessor,
-  contactBackgroundDisplayTypeVisibilityAssessor,
   contactCardDisplayTypeVisibilityAssessor,
   imageUrlVisibilityAssessor,
   displayTypeVisibilityAssessor,
@@ -2569,6 +2568,12 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
             ? VARIANT_DISPLAY_MODES.custom
             : VARIANT_DISPLAY_MODES.none,
       },
+      enablePopup: {
+        type: 'toggle',
+        label: contentSettingsTr(`enablePopupLabel`),
+        defaultValue: true,
+        groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,
+      },
       areImagesFullWidth: {
         type: 'toggle',
         label: contentSettingsTr(`fullWidthLabel`),
@@ -2587,6 +2592,7 @@ export const IMAGES_SECTION_SETTINGS_CONFIG =
       descriptionStyle: TEXT_MEDIA_DESCRIPTION_STYLE_FIELD(),
       headingStyle: TEXT_MEDIA_HEADING_STYLE_FIELD(),
       paragraphStyle: TEXT_MEDIA_PARAGRAPH_STYLE_FIELD(),
+      buttonTextStyle: DEFAULT_BUTTON_TEXT_STYLE_FIELD(),
       cardStyle: {
         type: 'color',
         groupId: SETTINGS_STYLE_FIELD_GROUP_IDS.style,

package/src/brand-page-maker/models/content-settings.ts

@@ -560,6 +560,7 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
     displayStyle: 'centered',
     aspectRatio: 'Default',
     areImagesFullWidth: false,
+    enablePopup: true,
     items: [
       {
         height: -1,
@@ -569,7 +570,7 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
         paragraph: '',
         title: '',
         width: -1,
-        imageLink: '',
+        imageLink: false,
         itemsId: -1,
       },
     ],
@@ -595,6 +596,11 @@ export const createInitialImagesSectionContent: CreateInitialContentFunction<
       textStyleType: TEXT_STYLE_TYPES.paragraphs,
       textAlign: 'center',
     },
+    buttonTextStyle: {
+      applyAutoScale: options?.brandPageType === BRAND_PAGE_TYPES.brandSite,
+      textStyleType: TEXT_STYLE_TYPES.buttons,
+      textAlign: 'center',
+    },
   };
 };
 

package/src/bundles/bundled-translations.de-DE.json

@@ -528,6 +528,7 @@
     "sendPlaceholder": "Senden",
     "formSuccessMessage": "Vielen Dank! Wir werden uns so schnell wie möglich mit Ihnen in Verbindung setzen.",
     "fullWidthLabel": "Volle Breite",
+    "enablePopupLabel": "Bilder in einem Pop-up öffnen",
     "autoplayLabel": "Autoplay",
     "muteLabel": "Stumm",
     "headingStyleLabel": "Überschriftstil",
@@ -643,14 +644,29 @@
     "shapeColor": "Formfarbe",
     "imageCaptionPlaceholder": "Bildunterschrift hinzufügen",
     "imageLink": "Bildlink",
-    "imageCaption": "Bildunterschrift",
+    "imageCaption": "Bild-Popup-Beschriftung",
+    "imageCaptionSub": "Diese Bildunterschrift erscheint nur im Bild-Pop-up",
     "addTitlePlaceholder": "Titel hinzufügen",
     "title": "Titel",
     "addParagraphPlaceholder": "Absatz hinzufügen",
     "paragraph": "Absatz",
     "addItemLabel": "Artikel hinzufügen",
     "image": "Bild",
-    "shape": "Form"
+    "shape": "Form",
+    "none": "Keine",
+    "popup": "Pop-up",
+    "openLink": "Link öffnen",
+    "imageBehaviour": "Bildverhalten",
+    "button": "Schaltfläche",
+    "buttonText": "Schaltflächentext",
+    "getStarted": "Los geht’s",
+    "buttonLink": "Schaltflächen-Link",
+    "url": "URL",
+    "email": "E-Mail-Adresse",
+    "telephone": "Telefonnummer",
+    "buttonTextStyleLabel": "Schaltflächentextstil",
+    "selectPage": "Eine Seite auswählen",
+    "page": "Seite"
   },
   "textItemsField": {
     "fontSettings": "Schriftart-Einstellungen",

package/src/bundles/bundled-translations.es-ES.json

@@ -528,6 +528,7 @@
     "sendPlaceholder": "Enviar",
     "formSuccessMessage": "¡Gracias! Nos pondremos en contacto contigo lo antes posible.",
     "fullWidthLabel": "Ancho total",
+    "enablePopupLabel": "Abre imágenes en una ventana emergente",
     "autoplayLabel": "Reproducción automática",
     "muteLabel": "Silenciar",
     "headingStyleLabel": "Estilo de encabezado",
@@ -643,14 +644,29 @@
     "shapeColor": "Color de forma",
     "imageCaptionPlaceholder": "Añade pie de foto",
     "imageLink": "Enlace de imagen",
-    "imageCaption": "Pie de imagen",
+    "imageCaption": "Pie de foto en ventana emergente",
+    "imageCaptionSub": "Este pie de foto solo aparece en la ventana emergente de la imagen",
     "addTitlePlaceholder": "Añadir título",
     "title": "Título",
     "addParagraphPlaceholder": "Añadir párrafo",
     "paragraph": "Párrafo",
     "addItemLabel": "Añadir artículo",
     "image": "Imagen",
-    "shape": "Forma"
+    "shape": "Forma",
+    "none": "Ninguno",
+    "popup": "Ventana emergente",
+    "openLink": "Abrir enlace",
+    "imageBehaviour": "Comportamiento de la imagen",
+    "button": "Botón",
+    "buttonText": "Texto del botón",
+    "getStarted": "Comienza",
+    "buttonLink": "Enlace de botón",
+    "url": "URL",
+    "email": "Dirección de correo electrónico",
+    "telephone": "Número de teléfono",
+    "buttonTextStyleLabel": "Estilo del texto del botón",
+    "selectPage": "Selecciona una página",
+    "page": "Página"
   },
   "textItemsField": {
     "fontSettings": "Configuración de fuentes",

package/src/bundles/bundled-translations.fr-CA.json

@@ -528,6 +528,7 @@
     "sendPlaceholder": "Envoyer",
     "formSuccessMessage": "Merci ! Nous vous contacterons dès que possible.",
     "fullWidthLabel": "Pleine largeur",
+    "enablePopupLabel": "Ouvrir des images dans une fenêtre contextuelle",
     "autoplayLabel": "Lecture automatique",
     "muteLabel": "Muet",
     "headingStyleLabel": "Style de titre",
@@ -643,14 +644,29 @@
     "shapeColor": "Couleur de forme",
     "imageCaptionPlaceholder": "Ajouter une légende d'image",
     "imageLink": "Lien d'image",
-    "imageCaption": "Légende d'image",
+    "imageCaption": "Légende de l’image contextuelle",
+    "imageCaptionSub": "Cette légende n'apparaît que dans la fenêtre contextuelle de l'image",
     "addTitlePlaceholder": "Ajouter un titre",
     "title": "Titre",
     "addParagraphPlaceholder": "Ajouter un paragraphe",
     "paragraph": "Paragraphe",
     "addItemLabel": "Ajouter un élément",
     "image": "Image",
-    "shape": "Forme"
+    "shape": "Forme",
+    "none": "Aucune",
+    "popup": "Fenêtre contextuelle",
+    "openLink": "Ouvrir le lien",
+    "imageBehaviour": "Comportement de l’image",
+    "button": "Bouton",
+    "buttonText": "Texte du bouton",
+    "getStarted": "Commencez",
+    "buttonLink": "Lien de bouton",
+    "url": "Url",
+    "email": "Adresse courriel",
+    "telephone": "Numéro de téléphone",
+    "buttonTextStyleLabel": "Style de texte des boutons",
+    "selectPage": "Sélectionnez une page",
+    "page": "Page"
   },
   "textItemsField": {
     "fontSettings": "Paramètres de police",