libreria-astro-lefebvre/src/carbins/Contenido_2026_Mallorca.ts

Librería de componentes Astro, React y Vue para Lefebvre

import type { ComponentMetadata } from '../interfaces/types';

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2026_Mallorca',
  category: 'Contenido con listas',
  name: 'Wrapper de ítems con icono grande de certificación y botón CTA 2026',
  description: 'Contenedor que itera un listado de bloques tipo certificación/hito: cada ítem combina un icono grande (5 variantes: IA, ISO1, ISO2, GDPR, ISO3) con título de etiqueta HTML configurable y descripción. Ofrece controles de alineación vertical, orientación icono-texto intra-ítem y entre ítems (fila/columna), más un botón CTA opcional al final. Cada ítem se renderiza con Contenido_2025_Cordoba',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'icono', 'boton', 'cta'],
  fields: [
   
    {
      name: 'positionFlex',
      type: 'select',
      help: 'Alineación vertical del contenedor principal. "Centrado" centra verticalmente los items; "Principio" los alinea arriba',
      label: 'Posición del item',
      options: ['items-start', 'items-center'],
      options_labels: ['Principio', 'Centrado'],
      example_value: 'items-start'
    },
    {
      name: 'positionBtnFlex',
      type: 'select',
      help: 'Alineación horizontal del botón CTA inferior. "Centrado" sitúa el botón en el centro; "Principio" lo alinea a la izquierda. Solo aplica si "Mostrar botón" está activado',
      label: 'Posición del botón',
      options: ['justify-center', 'justify-start'],
      options_labels: ['Centrado', 'Principio'],
      example_value: 'justify-center'
    },
    {
      name: 'flexOrientationIcoText',
      type: 'select',
      help: 'Orientación del icono grande respecto al texto DENTRO de cada item. "Horizontal" coloca el icono al lado del texto; "Vertical" apila el icono encima',
      label: 'Flex del icono del item',
      options: ['flex-row', 'flex-col'],
      options_labels: ['Horizontal', 'Vertical'],
      example_value: 'flex-row'
    },
    {
      name: 'flexOrientationBlockIcoText',
      type: 'select',
      help: 'Orientación del conjunto de items entre sí. "Horizontal" coloca los items en fila (con flex-wrap); "Vertical" los apila en columna',
      label: 'Flex del item',
      options: ['flex-row', 'flex-col'],
      options_labels: ['Horizontal', 'Vertical'],
      example_value: 'flex-row'
    },
    {
      name: 'headingType',
      type: 'select',
      help: 'Etiqueta HTML y estilo del título de cada item. "h1" 56px izquierda, "h2" 40px izquierda, "h3" 2xl semibold izquierda, "h3-center" 2xl semibold centrado, "h4" 2xl semibold izquierda, "h5"/"h6" sin estilos, "span" texto gris sin formato',
      label: 'Etiqueta del título',
      options: ['h1', 'h2', 'h3', 'h3-center', 'h4', 'h5', 'h6', 'span'],
      options_labels: ['H1', 'H2', 'H3', 'H3 centrado', 'H4', 'H5', 'H6', 'Span'],
      example_value: 'h2'
    },
    {
      name: 'btnLabel',
      type: 'text',
      help: 'Texto del botón CTA inferior. Solo se muestra si "Mostrar botón" está activado',
      label: 'Label del botón',
      mandatory: false,
      example_value: 'Ver todas las certificaciones'
    },
    {
      name: 'buttonUrl',
      type: 'text',
      help: 'URL de destino del botón CTA. ATENCIÓN: si "Mostrar botón" está activado pero esta URL está vacía, el botón se muestra igualmente con un href inválido. Rellena siempre esta URL si activas el botón',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/certificaciones'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa o desactiva la visualización del botón CTA inferior. ATENCIÓN: no valida que "Enlace del botón" tenga valor — si activas el botón con URL vacía, el enlace será inválido',
      label: 'Mostrar botón',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'items',
      type: 'list',
      help: 'Listado de items de contenido con icono grande, título y descripción. Cada item se renderiza con el componente Contenido_2025_Cordoba',
      label: 'Items de contenido',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
          { name: 'title', type: 'text', help: 'Título del item. Se renderiza con la etiqueta HTML seleccionada en "Etiqueta del título". No admite HTML', label: 'Título', example_value: 'Certificación ISO 27001' },
          { name: 'description', type: 'textArea', help: 'Descripción del item. Se muestra debajo del título centrada y como texto plano (no admite HTML)', label: 'Descripción', example_value: 'Gestión de la seguridad de la información conforme a estándares internacionales' },
          { name: 'showBigIco', type: 'boolean', help: 'Si está activado, muestra el icono grande seleccionado junto al contenido del item. Si está desactivado, NO se muestra icono (el hueco queda vacío)', label: 'Mostrar icono grande', options: ['false', 'true'], options_labels: ['Falso', 'Verdadero'], example_value: true },
          { name: 'bigIcon', type: 'select', help: 'Icono grande que se muestra junto al item (solo si "Mostrar icono grande" está activado). Si se elige un valor fuera de la lista, no aparece ningún icono', label: 'Icono grande', options: ['bigIA', 'bigIso1', 'bigIso2', 'bigGDPR', 'bigIso3'], options_labels: ['IA', 'Iso1', 'Iso2', 'GDPR', 'Iso3'], example_value: 'bigIso2' },
          { name: 'bigIconUrl', type: 'text', help: 'URL de descarga del icono. Si se rellena, el icono se convierte en un enlace de descarga (atributo download). Si se deja vacío, el icono se muestra sin enlace. ATENCIÓN: el navegador solo fuerza la descarga si el archivo es del mismo origen', label: 'Enlace de descarga del icono', mandatory: false }
        ]
      }
    }
   ]
};