diff --git a/src/ui/flights/FlightCard.tsx b/src/ui/flights/FlightCard.tsx index a62642be..c4770b97 100644 --- a/src/ui/flights/FlightCard.tsx +++ b/src/ui/flights/FlightCard.tsx @@ -11,6 +11,7 @@ import { StationDisplay } from "./StationDisplay.js"; import { TimeGroup } from "./TimeGroup.js"; import { FlightStatus } from "./FlightStatus.js"; import { OperatorLogo } from "./OperatorLogo.js"; +import { IFlyWarning } from "./IFlyWarning.js"; import "./FlightCard.scss"; export interface FlightCardProps { @@ -314,12 +315,20 @@ export const FlightCard: FC = ({ className="flight-card__expanded flight-card__expanded--custom" data-testid="flight-card-expanded" > + {renderExpandedBody(flight)} )} {expandable && expanded && !renderExpandedBody && (
+
{t("SHARED.TIME")}
diff --git a/src/ui/flights/IFlyWarning.scss b/src/ui/flights/IFlyWarning.scss index 0fe7a5c3..6fdc94f1 100644 --- a/src/ui/flights/IFlyWarning.scss +++ b/src/ui/flights/IFlyWarning.scss @@ -28,4 +28,14 @@ font-weight: fonts.$font-bold; color: colors.$orange--hover; } + + // Inline variant used inside flight list rows. Mirrors Angular + // `warning-ifly-carrier-small`: span with padded inner text, no + // vertical bar, no link. + &--small { + display: block; + padding: vars.$space-l vars.$space-xl; + font-size: fonts.$font-size-s; + line-height: 1.5; + } } diff --git a/src/ui/flights/IFlyWarning.tsx b/src/ui/flights/IFlyWarning.tsx index 8b8249f3..e42122b3 100644 --- a/src/ui/flights/IFlyWarning.tsx +++ b/src/ui/flights/IFlyWarning.tsx @@ -4,6 +4,15 @@ import "./IFlyWarning.scss"; export interface IFlyWarningProps { flightNumber: string | number; + /** + * "detail" (default) mirrors `warning-ifly-carrier-detail` — a + * boxed block with vertical orange bar, highlighted caption and + * a link. Use on details pages. + * + * "small" mirrors `warning-ifly-carrier-small` — an inline + * caption + body line, no bar, no link. Use inside flight rows. + */ + variant?: "detail" | "small"; } function isIFlyRange(num: string | number): boolean { @@ -12,9 +21,19 @@ function isIFlyRange(num: string | number): boolean { return n > 5800 && n < 5949; } -export const IFlyWarning: FC = ({ flightNumber }) => { +export const IFlyWarning: FC = ({ flightNumber, variant = "detail" }) => { const { t } = useTranslation(); if (!isIFlyRange(flightNumber)) return null; + if (variant === "small") { + return ( + + + {t("WARNING.IFLY_HIGHLIGHT")} + {" "} + {t("WARNING.IFLY_BODY")} + + ); + } return (