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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Enlace_2025_Venecia',
  category: 'Contenido de Texto',
  name: 'Enlace azul con icono de flecha o play y target configurable 2025',
  description: 'Enlace estilizado en color azul corporativo con dos variantes de icono: "Flecha" a la derecha del texto (estilo "saber más") o "Play" a la izquierda con subrayado permanente en el texto (estilo "ver vídeo"). Soporta target configurable (_self o _blank, con rel="noopener noreferrer" automático al abrir en nueva pestaña) y aria-label heredado del texto para accesibilidad',
  framework: 'Astro',
  priority: 1,
  tags: ['enlace', 'link', 'texto', 'icono'],
  fields: [
    {
      name: 'text',
      type: 'text',
      help: 'Texto visible del enlace. También se usa como aria-label para accesibilidad. Si se deja vacío, el enlace queda sin texto ni etiqueta accesible',
      label: 'Texto del enlace',
      mandatory: false,
      example_value: 'Ver todos los casos de uso'
    },
    {
      name: 'url',
      type: 'text',
      help: 'URL de destino del enlace. Si se deja vacío, por defecto apunta a "#" (no navega)',
      label: 'URL de destino',
      mandatory: false,
      example_value: '/genia-l/casos-reales'
    },
    {
      name: 'target',
      type: 'select',
      help: 'Cómo se abre el enlace. "Misma pestaña" abre en la misma ventana; "Nueva pestaña" abre en otra pestaña y además añade automáticamente rel="noopener noreferrer" por seguridad',
      label: 'Destino del enlace',
      options: ['_self', '_blank'],
      options_labels: ['Misma pestaña', 'Nueva pestaña'],
      mandatory: false,
      example_value: '_blank'
    },
    {
      name: 'icon',
      type: 'select',
      help: 'Icono que acompaña al texto del enlace. "Flecha" coloca un icono de flecha a la DERECHA del texto (estilo "saber más"). "Play" coloca un icono de play a la IZQUIERDA del texto y además aplica subrayado permanente al texto (estilo "ver vídeo")',
      label: 'Icono del enlace',
      options: ['arrow', 'play'],
      options_labels: ['Flecha (derecha)', 'Play (izquierda)'],
      mandatory: false,
      example_value: 'arrow'
    }
   ]
};