libreria-astro-lefebvre/src/carbins/Contenido_2026_Tokyo.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_Tokyo',
  category: 'Contenido con listas',
  name: 'Bloque con imagen de escudo de fondo y grid lateral de logos clicables 2026',
  description: 'Bloque de contenido con una imagen de escudo como background, título h2, descripción HTML, botón tipo enlace con flecha a la derecha y un grid lateral de logos/imágenes clicables (renderizados con Imagen_2025_Fukushima). El ancho del bloque de texto se adapta automáticamente al número de logos: 1→texto a 2/3, 2→texto a 1/2, 3 o más→texto a 1/3',
  framework: 'Astro',
  priority: 1,
  tags: ['contenido', 'imagen', 'grid', 'logos', 'cta', 'enlace'],
  fields: [
    {
      name: 'title',
      type: 'text',
      help: 'Título principal del bloque (h2). Se renderiza siempre; si se deja vacío, aparece el h2 vacío. No admite HTML',
      label: 'Texto del título',
      mandatory: false,
      example_value: 'Plataforma certificada y segura'
    },
    {
      name: 'description',
      type: 'text',
      help: 'Descripción que aparece debajo del título. Admite HTML. Se renderiza siempre; si se deja vacía, aparece el párrafo vacío',
      label: 'Texto de la descripción',
      mandatory: false,
      example_value: 'GenIA-L cumple con las principales certificaciones de seguridad y protección de datos del sector'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Activa o desactiva el botón tipo enlace (texto + flecha). 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: 'buttonText',
      type: 'text',
      help: 'Texto del botón tipo enlace. Aparece seguido de una flecha SVG. 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. Rellena siempre esta URL si activas "Mostrar botón" (el componente no valida esta dependencia)',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: '/genia-l/certificaciones'
    },
    {
      name: 'subdirectory',
      type: 'text',
      help: 'Ruta base del sitio (p. ej. "/genia-l") que se concatena a la URL de la imagen de fondo del bloque (el escudo). Si se deja vacío, la imagen de fondo se carga desde la raíz del sitio: "/images/genial/ico-shield.webp"',
      label: 'Subdirectorio',
      mandatory: false,
      example_value: '/genia-l'
    },
    {
      name: 'items',
      type: 'list',
      help: 'Listado de logos/imágenes que se muestran en el grid lateral del bloque. Cada ítem se renderiza con el componente Imagen_2025_Fukushima. El ancho del bloque de texto se adapta automáticamente al número de ítems: 1 ítem → texto a 2/3, 2 ítems → texto a 1/2, 3 o más → texto a 1/3',
      label: 'Items del grid',
      mandatory: false,
      items: {
        type: 'object',
        fields: [
          { name: 'link', type: 'text', help: 'URL de destino al hacer click en el logo/imagen. Si se deja vacío, la imagen no es clicable', label: 'Enlace', example_value: '/genia-l/certificaciones/iso-27001' },
          { name: 'image', type: 'image', help: 'URL de la imagen/logo del ítem. Si se deja vacía aparece imagen rota', label: 'Imagen', example_value: 'https://assets.lefebvre.es/media/img/preview-comp/comp-16-9.png' },
          { name: 'altImage', type: 'text', help: 'Texto alternativo de la imagen para accesibilidad', label: 'Alt Imagen', example_value: 'Logo de certificación ISO 27001' },
          { name: 'descriptionImage', type: 'textArea', help: 'Descripción que aparece debajo de la imagen. Admite HTML', label: 'Descripción de la imagen', example_value: 'Certificación ISO 27001 de seguridad de la información' }
        ]
      }
    }
   ]
};