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

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

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

export const metadata: ComponentMetadata = {
  component_name: 'Texto_2026_Castellon',
  category: 'Contenido de Texto',
  name: 'Texto básico con pretítulo, título configurable, descripción y botón opcional 2026',
  description: 'Bloque de texto sencillo y responsive sin padding ni margen lateral propio (el contenedor padre controla el ancho útil). Contiene: pretítulo opcional (span pequeño, no es heading), título principal con etiqueta HTML elegible (h1, h1-40, h2-h6) y alineación configurable (izquierda/centro/derecha), descripción opcional a ancho completo (admite HTML), y botón CTA opcional con texto y URL. Pensado como componente "básico" de texto.',
  framework: 'Astro',
  priority: 1,
  tags: ['basico', 'texto', 'titulo', 'cta'],
  fields: [
    {
      name: 'pretitle',
      type: 'text',
      help: 'Pretítulo opcional que aparece encima del título. NO es un heading (se renderiza como <span>). Admite HTML. Solo se muestra si tiene valor. Hereda la alineación del título.',
      label: 'Pretítulo',
      mandatory: false,
      example_value: 'Novedad 2026'
    },
    {
      name: 'title',
      type: 'text',
      help: 'Título principal. Admite HTML. La etiqueta HTML y su estilo visual se eligen en el campo "Etiqueta del título" (cada variante tiene su propio tamaño, leading y márgenes).',
      label: 'Texto del título',
      mandatory: true,
      example_value: 'Inteligencia artificial al servicio del Derecho'
    },
    {
      name: 'titleTag',
      type: 'select',
      help: 'Etiqueta HTML y estilo visual del título. Variantes: "h1" 36-56px con padding lateral; "h1-40" 40px con mb-8; "h2" 36-40px; "h3" 2xl semibold; "h4" 20px semibold; "h5" y "h6" sin estilos complejos. La alineación horizontal se controla con el campo "Alineación".',
      label: 'Etiqueta del título',
      options: ['h1', 'h1-40', 'h2', 'h3', 'h4', 'h5', 'h6'],
      options_labels: ['H1 (36-56px)', 'H1 40px', 'H2 (36-40px)', 'H3 (2xl semibold)', 'H4 (20px semibold)', 'H5', 'H6'],
      example_value: 'h2'
    },
    {
      name: 'titleAlign',
      type: 'select',
      help: 'Alineación horizontal del pretítulo, del título, de la descripción y del botón. La descripción mantiene siempre ancho completo (w-full); solo cambia la alineación de su texto interno.',
      label: 'Alineación del título',
      options: ['left', 'center', 'right'],
      options_labels: ['Izquierda', 'Centro', 'Derecha'],
      example_value: 'left'
    },
    {
      name: 'description',
      type: 'textArea',
      help: 'Descripción a ancho completo del contenedor padre. Admite HTML (editor enriquecido). La alineación del texto interno sigue el campo "Alineación del título". Solo se muestra si tiene valor.',
      label: 'Descripción',
      mandatory: false,
      example_value: '<p>Descubre cómo la IA jurídica transforma el trabajo diario de los despachos de abogados.</p>'
    },
    {
      name: 'showBtn',
      type: 'boolean',
      help: 'Si está activado, muestra el botón CTA al final del bloque. Su posición horizontal sigue la alineación del título.',
      label: 'Mostrar botón',
      mandatory: false,
      options: ['false', 'true'],
      options_labels: ['No', 'Sí'],
      example_value: false
    },
    {
      name: 'btnLabel',
      type: 'text',
      help: 'Texto visible del botón. Solo se renderiza si "Mostrar botón" está activado.',
      label: 'Texto del botón',
      mandatory: false,
      example_value: 'Más información'
    },
    {
      name: 'btnSrc',
      type: 'text',
      help: 'URL de destino del botón (atributo href del <a>). Solo se usa si "Mostrar botón" está activado.',
      label: 'Enlace del botón',
      mandatory: false,
      example_value: 'https://www.lefebvre.es'
    }
  ]
};