libreria-astro-lefebvre/src/carbins/Contenido_2026_Michigan.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_Michigan',
  category: 'Contenido con listas',
  name: 'Listado de artículos con texto, imagen y modal LF2 con botones globales 2026',
  description: 'Listado vertical de artículos renderizados con Formulario_2025_Teruel, donde imagen lateral y orientación son globales (se aplican a todos los ítems por igual). El botón primario y su URL también son globales (todos los artículos comparten texto y enlace), pero el contenido del modal LF2 (imagen, título, subtítulo, descripción, nombre del formulario) es específico por ítem. Todos los artículos llevan borde inferior separador salvo el último',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'texto', 'imagen', 'modal', 'formulario', 'lf2', 'cta', 'listado'],
   fields: [
    {
      name: 'orientation',
      type: 'select',
      help: 'Posición de la imagen respecto al texto en CADA artículo. "Izquierda" coloca la imagen a la izquierda en todos los artículos; "Derecha" a la derecha. Esta orientación es GLOBAL — se aplica a todos los ítems por igual',
      label: 'Alineación del contenido',
      options: ['left', 'right'],
      options_labels: ['Izquierda', 'Derecha'],
      example_value: 'left'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa o desactiva el botón primario en TODOS los artículos. Los botones primarios son globales: todos los artículos comparten el mismo texto y enlace. Recuerda: también requiere "Enlace del botón" relleno',
      label: 'Mostrar botón',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'txtBtn',
      type: 'text',
      help: 'Texto del botón primario (global para todos los artículos). Solo se muestra si "Mostrar botón" está activado Y "Enlace del botón" tiene valor',
      label: 'Texto del botón',
      mandatory: false,
      example_value: 'Saber más'
    },
    {
      name: 'linkBtn',
      type: 'text',
      help: 'URL de destino del botón primario (global para todos los artículos). Si se deja vacío, el botón NO aparece aunque "Mostrar botón" esté activado',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/saber-mas'
    },
    {
      name: 'showBtnModal',
      type: 'boolean',
      help: 'Activa o desactiva el botón que abre el modal en TODOS los artículos. El modal se rellena con los datos específicos de cada ítem (imagen/título/descripción del modal)',
      label: 'Mostrar botón Modal',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'txtBtnModal',
      type: 'text',
      help: 'Texto del botón que abre el modal (global para todos los artículos). Se muestra solo si "Mostrar botón Modal" está activado',
      label: 'Texto del botón modal',
      mandatory: false,
      example_value: 'Descargar guía en pdf'
    },
    {
      name: 'items',
      type: 'list',
      help: 'Listado de artículos. Cada artículo se renderiza con el componente Formulario_2025_Teruel. Todos los artículos llevan borde inferior separador EXCEPTO el último. Los datos del modal son específicos por ítem',
      label: 'Listado de artículos',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
            { name: 'title', type: 'text', help: 'Título del artículo. Se renderiza siempre; si se deja vacío, aparece el título vacío', label: 'Título', example_value: 'Automatización de contratos con IA' },
            { name: 'description', type: 'textArea', help: 'Descripción del artículo. Admite HTML. Se renderiza siempre; si se deja vacía, aparece el párrafo vacío', label: 'Descripción', example_value: 'Redacta borradores de contratos en segundos a partir de plantillas personalizables, con revisión automática de cláusulas y sugerencias basadas en jurisprudencia' },
            { name: 'image', type: 'image', help: 'Imagen principal del artículo. Se muestra al lado del texto según la orientación global', label: 'Imagen', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
            { name: 'imageModal', type: 'image', help: 'Imagen que se muestra dentro del modal al abrirlo. Solo se usa si "Mostrar botón Modal" está activado', label: 'Imagen del modal', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png' },
            { name: 'titleModal', type: 'text', help: 'Título que aparece dentro del modal. Solo se usa si "Mostrar botón Modal" está activado', label: 'Título del modal', example_value: 'Guía completa de automatización jurídica' },
            { name: 'subtitleModal', type: 'text', help: 'Subtítulo que aparece dentro del modal, debajo del título. Solo se usa si "Mostrar botón Modal" está activado', label: 'Subtítulo del modal', example_value: 'Descarga el whitepaper de 40 páginas' },
            { name: 'descriptionModal', type: 'textArea', help: 'Descripción que aparece dentro del modal. Admite HTML. Solo se usa si "Mostrar botón Modal" está activado', label: 'Descripción del modal', example_value: 'Descubre cómo reducir el tiempo de redacción de contratos en un 70% con técnicas de IA aplicadas al ámbito jurídico' },
            { name: 'altModal', type: 'text', help: 'Texto alternativo de la imagen del modal para accesibilidad. Solo aplica si el modal tiene imagen', label: 'Alt de la imagen del modal', example_value: 'Portada de la guía de automatización jurídica con IA' },
            { name: 'lf2FormTitle', type: 'text', help: 'Nombre del formulario de LF2 asociado al modal (para integraciones internas). Dejar vacío si no hay formulario', label: 'Nombre del formulario LF2', example_value: 'formulario-descarga-guia-automatizacion' }
        ]
      }
    }
   ]
};