libreria-astro-lefebvre/src/carbins/Contenido_2026_Menorca.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_Menorca',
  category: 'Contenido con listas',
  name: 'Wrapper de ítems con icono pequeño en recuadro gris y botón CTA 2026',
  description: 'Contenedor que itera bloques de contenido con icono pequeño sobre fondo gris claro (23 variantes predefinidas: más, tienda, correcto, formación, caso, medalla, IA, balanza, compliance, librería, etc.), título con etiqueta HTML configurable y descripción HTML. Permite controlar orientación intra-ítem y entre ítems, ancho por ítem (1/4 o 1/3 en vertical) y añadir un botón CTA opcional al final. Cada ítem se renderiza con Contenido_2025_Granada',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'icono', 'wrapper', 'cta', 'boton', 'item'],
  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 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"/"h4" 2xl semibold izquierda, "h5"/"h6" sin estilos, "span" texto gris sin formato',
      label: 'Etiqueta del título',
      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'],
      options_labels: ['H1', 'H2', 'H3', '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 funcionalidades'
    },
    {
      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/funcionalidades'
    },
    {
      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: 'widthArticle',
      type: 'select',
      help: 'Ancho del contenedor principal. Actualmente solo está soportado "w-full" (100%)',
      label: 'Ancho del Article',
      options: ['w-full'],
      options_labels: ['Ancho completo'],
      example_value: 'w-full'
    },
    {
      name: 'items',
      type: 'list',
      help: 'Listado de items de contenido con icono pequeño, título y descripción. Cada item se renderiza con el componente Contenido_2025_Granada',
      label: 'Listado de items',
      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: 'Búsqueda semántica' },
          { name: 'description', type: 'textArea', help: 'Descripción del item. Se muestra debajo del título y admite HTML', label: 'Descripción', example_value: 'Encuentra jurisprudencia y doctrina relevante con consultas en lenguaje natural' },
          { name: 'showIco', type: 'boolean', help: 'Si está activado, muestra el icono seleccionado con fondo gris claro. Si está desactivado, no se renderiza el bloque del icono', label: '¿Mostrar icono?', options: ['false', 'true'], options_labels: ['Falso', 'Verdadero'], example_value: true },
          { name: 'icon', type: 'select', help: 'Icono que se muestra junto al item (solo si "Mostrar icono" está activado). Si se elige un valor fuera de la lista, no aparece ningún icono', label: 'Icono', options: ['more', 'shop', 'correct', 'formation', 'case', 'medal', 'medal2', 'search-text', 'checklist', 'certificate', 'ico-ok', 'shield', 'edit', 'ia', 'users', 'graphic', 'balance', 'calendar-check', 'documents', 'compliance', 'library', 'support', 'defendant'], options_labels: ['Más', 'Tienda', 'Correcto', 'Formación', 'Caso', 'Medalla', 'Medalla 2', 'Buscar texto', 'Checklist', 'Certificado', 'OK', 'Escudo', 'Editar', 'IA', 'Usuarios', 'Gráfico', 'Balanza', 'Calendario check', 'Documentos', 'Compliance', 'Librería', 'Soporte', 'Demandado'], example_value: 'search-text' },
          { name: 'widthBlock', type: 'select', help: 'Ancho del item cuando se usa orientación vertical en "Flex del item" (Vertical). "1/4" = 50% tablet / 25% desktop. "1/3" = 33% desktop. En orientación horizontal este campo se ignora', label: 'Ancho del bloque (solo en orientación Vertical)', options: ['lg:w-1/4 md:w-2/4', 'lg:w-1/3'], options_labels: ['1/4', '1/3'], example_value: 'lg:w-1/4 md:w-2/4' },
        ]
      }

    }
   ]
};