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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Contenido_2025_Malaga',
  category: 'Contenido de Imagen',
  name: 'Sección hiper-configurable con texto, imagen lateral, botón y modal LF2 2025',
  description: 'Sección de contenido altamente configurable con más de 20 campos: título pequeño tipo badge, subtítulo h2 con tamaño conmutable (56px/46px/40px), descripción HTML, imagen lateral opcional (posicionable a izquierda o derecha), botón primario y botón secundario que abre un modal con formulario LF2 inyectado dinámicamente. Ofrece controles finos de alineación vertical, tamaño de fuente del texto, padding horizontal, ancho del contenedor (full/3-5/7xl) y variantes de orientación icono-texto',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'imagen', 'icono', 'texto', 'modal', 'formulario', 'lf2', 'cta', 'boton'],
   fields: [
    {
      name: 'showIco',
      type: 'boolean',
      help: 'Si está activado, muestra un icono SVG circular (un "+" dentro de un círculo) junto al texto. Si está desactivado, el bloque se renderiza sin icono (con un layout de padding distinto)',
      label: 'Mostrar icono',
      mandatory: false,
      options: ['false','true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'title',
      type: 'text',
      help: 'Título superior (pequeña etiqueta con fondo gris). Admite HTML. Si se deja vacío, NO se muestra',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Certificación ISO 27001'
    },
    {
      name: 'subtitle',
      type: 'text',
      help: 'Subtítulo principal del bloque (h2). Admite HTML. Su tamaño lo controla el campo "Tamaño del h2"',
      label: 'Texto del subtítulo',
      mandatory: false,
      example_value: 'Gestión de la seguridad de la información conforme a estándares internacionales'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del subtítulo. Admite HTML. Su tamaño de fuente lo controla el campo "Tamaño de fuente del texto"',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'Automatiza la gestión de riesgos, documenta controles y audita el cumplimiento normativo desde una única plataforma'
    },
    {
      name: 'paddingLeft',
      type: 'text',
      help: 'Padding horizontal (en píxeles) entre el icono y el texto. Se aplica a la izquierda si "Alineación del contenido" es "Izquierda", o a la derecha si es "Derecha". Si se deja vacío, no se aplica padding',
      label: 'Padding del texto (en px)',
      mandatory: false,
      example_value: '24'
    },
    {
      name: 'fontSize',
      type: 'select',
      help: 'Tamaño de fuente del bloque de descripción (no afecta al título ni al subtítulo)',
      label: 'Tamaño de fuente del texto',
      options: ['sm', 'base', 'lg', 'xl'],
      options_labels: ['Pequeño', 'Base', 'Grande', 'Extra grande'],
      example_value: 'base'
    },
    {
      name: 'alignItems',
      type: 'select',
      help: 'Alineación vertical del contenedor principal. "Centro" alinea texto e imagen al centro vertical; "Inicio" los alinea arriba; "Fin" los alinea abajo',
      label: 'Alineación vertical de los elementos',
      options: ['center', 'start', 'end'],
      options_labels: ['Centro', 'Inicio', 'Fin'],
      example_value: 'center'
    },
    {
      name: 'h2Size',
      type: 'select',
      help: 'Tamaño del subtítulo h2 en desktop. "Por defecto" = 56px (o 46px si "Mostrar icono" + "Mostrar imagen" están ambos activados). "40px" = 40px fijo. En móvil siempre 36px',
      label: 'Tamaño del h2',
      options: ['default', '40px'],
      options_labels: ['Por defecto', '40px'],
      example_value: 'default'
    },
    {
      name: 'flexOrientation',
      type: 'select',
      help: 'Orientación del icono respecto al texto dentro del bloque. "Fila" coloca el icono al lado del texto; "Columna" apila el icono encima del texto. Solo aplica si "Mostrar icono" está activado',
      label: 'Orientación del contenido',
      options: ['row', 'col'],
      options_labels: ['Fila', 'Columna'],
      example_value: 'row'
    },
    {
      name: 'orientation',
      type: 'select',
      help: 'Posición de la imagen respecto al texto. "Izquierda" coloca la imagen a la izquierda y aplica padding-left al texto; "Derecha" coloca la imagen a la derecha (flex invertido) y aplica padding-right al texto',
      label: 'Alineación del contenido',
      options: ['left', 'right'],
      options_labels: ['Izquierda', 'Derecha'],
      example_value: 'left'
    },
    {
      name: 'width',
      type: 'select',
      help: 'Ancho del bloque de contenido. "Ancho completo" ocupa el 100% del contenedor padre; "3/5" ocupa el 60%; "7xl" aplica max-width de 7xl de Tailwind (1280px)',
      label: 'Ancho del contenido',
      options: ['full', '3/5', '7xl'],
      options_labels: ['Ancho completo', 'Ancho 3/5', 'Ancho 7xl'],
      example_value: 'full'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa o desactiva la visualización del botón primario. Recuerda: también requiere "Enlace del botón" relleno; si está vacío el botón no aparece',
      label: 'Mostrar botón',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'linkBtn',
      type: 'text',
      help: 'URL de destino del botón primario. 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/demo'
    },
    {
      name: 'txtBtn',
      type: 'text',
      help: 'Texto del botón primario. 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: 'Solicitar demo'
    },
    {
      name: 'showImage',
      type: 'boolean',
      help: 'Si está activado, se renderiza el layout con imagen (texto + imagen). Si está desactivado, se renderiza un layout alternativo solo con texto (con más padding)',
      label: 'Mostrar imagen',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: true
    },
    {
      name: 'image',
      type: 'image',
      help: 'URL de la imagen principal. Solo se renderiza si "Mostrar imagen" está activado',
      label: 'Src de la imagen',
      mandatory: false,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png',
    },
    {
      name: 'loading',
      type: 'select',
      help: 'Tipo de carga de la imagen principal. "eager" si el componente está above-the-fold; "lazy" si se renderiza fuera del viewport inicial',
      label: 'Carga de la imagen',
      options: ['lazy', 'eager'],
      options_labels: ['Diferida', 'Inmediata'],
      example_value: 'lazy'
    },
    {
      name: 'showBtnModal',
      type: 'boolean',
      help: 'Si está activado, muestra un segundo botón que abre un modal con información adicional. Se puede combinar con el botón primario o usarse en su lugar',
      label: 'Mostrar botón de modal',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['Falso', 'Verdadero'],
      example_value: false
    },
    {
      name: 'txtBtnModal',
      type: 'text',
      help: 'Texto del botón que abre el modal. Solo se muestra si "Mostrar botón de modal" está activado',
      label: 'Texto del botón de modal',
      mandatory: false,
      example_value: 'Más información'
    },
    {
      name: 'imageModal',
      type: 'image',
      help: 'URL de la imagen que se muestra dentro del modal al abrirlo. Solo se usa si "Mostrar botón de modal" está activado',
      label: 'Imagen del modal',
      mandatory: false,
      example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-w-4-3.png'
    },
    {
      name: 'altModal',
      type: 'text',
      help: 'Texto alternativo de la imagen del modal para accesibilidad. Solo se usa si el modal tiene imagen',
      label: 'Alt de la imagen del modal',
      mandatory: false,
      example_value: 'Captura de la interfaz de GenIA-L mostrando el panel de cumplimiento normativo'
    },
    {
      name: 'titleModal',
      type: 'text',
      help: 'Título que aparece dentro del modal',
      label: 'Título del modal',
      mandatory: false,
      example_value: 'Cumplimiento normativo ISO 27001'
    },
    {
      name: 'descriptionModal',
      type: 'text',
      help: 'Descripción que aparece dentro del modal. Admite HTML',
      label: 'Descripción del modal',
      mandatory: false,
      example_value: 'Descubre cómo GenIA-L te ayuda a automatizar auditorías, documentar controles y mantener el cumplimiento de la norma ISO 27001'
    },
    {
      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',
      mandatory: false,
      example_value: 'formulario-contacto-iso27001'
    }
   ]
};