Benvingut al Design System

Aquesta col·lecció de demos us permet explorar tots els components del Fluight Design System. Cada demo inclou variants, funcionalitats i suport per al canvi de tema clar/fosc.

Components amb demo

100%

Suport tema fosc

A11y

Accessibilitat completa

Components Base

Components fonamentals del sistema de disseny.

Buttons

Botons amb variants, mides, estats i suport per al tema fosc

✅ CompletVeure demo →

/demo/buttons

ThemeSelector

Selector de temes entre clar, fosc i Iberia amb previsualització en temps real

✅ CompletVeure demo →

/demo/theme-selector

Navigation Menu

Menú hamburguesa amb selecció de temes, persistència i interfície responsive

✅ NouVeure demo →

/demo/navigation-menu

Components Específics

Components especialitzats per al domini de l'aplicació.

CarrierLogo

Logos d'aerolínies amb variants, fallback i galeria completa

✅ CompletVeure demo →

/demo/carrier-logo

JourneyBreakdownItem

Component de detall del viatge amb informació de vol, aeroports, duració i tarifes

✅ CompletVeure demo →

/demo/journey-breakdown-item

FlightLayoverBanner

Banner informatiu per mostrar la duració i ciutat dels layovers entre vols

✅ CompletVeure demo →

/demo/flight-layover-banner

EmissionsBreakdownTable

Taula de comparació d'emissions de CO₂ amb dades actuals vs mitjana de ruta

✅ CompletVeure demo →

/demo/emissions-breakdown-table

Components Interactius

Components amb funcionalitats d'interacció complexes.

LocationPicker

Selector de ubicacions amb cerca, validació i accessibilitat

✅ CompletVeure demo →

/demo/location-picker

PassengersFilter

Selector de passatgers amb variants, límits i validació

✅ CompletVeure demo →

/demo/passengers-filter

DatePicker

Selector de data natiu HTML5 amb suport per tema fosc i accessibilitat

✅ CompletVeure demo →

/demo/datepicker

TimePicker

Selector d'hora natiu HTML5 amb suport per tema fosc i accessibilitat

✅ CompletVeure demo →

/demo/timepicker

SegmentData

Component per seleccionar dades d'un segment de vol (origen, destinació, data i hora)

✅ CompletVeure demo →

/demo/segmentdata

SegmentFilter

Component per gestionar un segment individual amb opció d'eliminació

✅ CompletVeure demo →

/demo/segmentfilter

SegmentsFilter

Component per gestionar múltiples segments amb opcions d'afegir i eliminar

✅ CompletVeure demo →

/demo/segmentsfilter

CarriersFilter

Selector d'aerolínies amb cerca, filtres (Preferred/Exclude/Only/All) i límit configurable

✅ CompletVeure demo →

/demo/carriersfilter

SegmentsTabs

Navegació per segmentos de vol amb suport completo para temas, accesibilidad y responsive design

✅ CompletVeure demo →

/demo/segments-tabs

FlightCard Components

Sub-components FlightCardFlightInformation i FlightCardFlightFares migrats al Design System

✅ CompletVeure demo →

/demo/flight-card-components

FlightCard Width

Demo d'amplada fixa del FlightCard per assegurar visibilitat completa del contingut

✅ CompletVeure demo →

/demo/flight-card-width

FlightList

Component per mostrar llistes de vols amb selecció, ordenació i compatibilitat legacy

✅ CompletVeure demo →

/demo/flight-list

MainFaresTable

Taula de tarifes amb informació detallada, emissions de CO₂ i propietats de tarifa

✅ CompletVeure demo →

/demo/main-fares-table

Components Legacy

Components existents integrats amb el Design System.

FlightCard

Targetes de vol integrades amb Design System (component complex)

✅ CompletVeure demo →

/demo/flight-card

Components Sistema

Components de funcionalitat del sistema.

Enhanced Theme System

Sistema de temes millorat amb menú hamburguesa, persistència i selecció light/dark simple

✅ NouVeure demo →

/demo/enhanced-theme

ThemeToggle

Canvi entre tema clar i fosc amb animacions i accessibilitat

✅ CompletVeure demo →

/demo/theme-toggle

Com utilitzar les demos

Cada demo està dissenyada per mostrar les capacitats completes dels components.

Característiques de cada demo:

ThemeToggle integrat: Prova el canvi entre tema clar i fosc
Variants completes: Totes les variants i configuracions disponibles
Accessibilitat: Navegació per teclat i tecnologies assistives
Funcionalitats interactives: Proves en temps real
Documentació visual: Descripcions i casos d'ús
Responsive design: Adaptació a diferents mides de pantalla

💡 Consell: Utilitza el ThemeToggle a cada demo per veure com els components s'adapten automàticament al tema fosc.

Pròxims components

Components que s'afegiran al Design System en futures iteracions.

🚧 En desenvolupament

Més components del Design System s'afegiran progressivament