@tui/design-system 1.9.0 → 1.11.0

package/scss/themes/crystalski/index.scss

@@ -83,6 +83,12 @@
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-crystalski-card-icon-variables);
 
+	// Card - product
+	@include util.uilib-build-css-vars('card-product', $uilib-crystalski-card-product-variables);
+
+	// Card - promotion
+	@include util.uilib-build-css-vars('card-promotion', $uilib-crystalski-card-promotion-variables);
+
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-crystalski-card-search-variables);
 
@@ -119,12 +125,12 @@
 	// Form input select
 	@include util.uilib-build-css-vars('input-select', $uilib-crystalski-input-select-variables);
 
-	// Form input stepper
-	@include util.uilib-build-css-vars('input-stepper', $uilib-crystalski-input-stepper-variables);
-
 	// Form input slider
 	@include util.uilib-build-css-vars('input-slider', $uilib-input-slider-variables);
 
+	// Form input stepper
+	@include util.uilib-build-css-vars('input-stepper', $uilib-crystalski-input-stepper-variables);
+
 	// Form input switch
 	@include util.uilib-build-css-vars('input-switch', $uilib-input-switch-variables);
 
@@ -167,9 +173,6 @@
 	// Price
 	@include util.uilib-build-css-vars('price', $uilib-price-variables);
 
-	// Promo banner
-	@include util.uilib-build-css-vars('card-promotion', $uilib-crystalski-card-promotion-variables);
-
 	// Promo tag
 	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-variables);
 
@@ -179,12 +182,12 @@
 	// Ratings and Reviews - Percentage
 	@include util.uilib-build-css-vars('ratings-percentage', $uilib-crystalski-ratings-percentage-variables);
 
-	// Ratings and Reviews - Range Icons
-	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-crystalski-ratings-range-icons-variables);
-
 	// Ratings and Reviews - Range bar
 	@include util.uilib-build-css-vars('ratings-range-bar', $uilib-ratings-range-bar-variables);
 
+	// Ratings and Reviews - Range Icons
+	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-crystalski-ratings-range-icons-variables);
+
 	// Scroller
 	@include util.uilib-build-css-vars('scroller', $uilib-scroller-variables);
 
@@ -192,7 +195,7 @@
 	@include util.uilib-build-css-vars('show-more-less', $uilib-crystalski-show-more-less-variables);
 
 	// Skeleton
-	@include util.uilib-build-css-vars('skeleton', $uilib-crystalski-skeleton-variables);
+	@include util.uilib-build-css-vars('skeleton', $uilib-skeleton-variables);
 
 	// Social proofing
 	@include util.uilib-build-css-vars('social-proofing', $uilib-crystalski-social-proofing-variables);

package/scss/themes/firstchoice/_overrides.scss

@@ -195,6 +195,23 @@ $uilib-firstchoice-card-icon-variables: map.merge(
 	)
 );
 
+// Card - product
+$uilib-firstchoice-card-product-variables: map.merge(
+	$uilib-card-product-variables,
+	(
+		highlights-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-down.svg'),
+	)
+);
+
+// Card - promotion
+$uilib-firstchoice-card-promotion-variables: map.merge(
+	$uilib-card-promotion-variables,
+	(
+		cta-copy-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/copy.svg'),
+		cta-copied-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/checkmark-circled-filled.svg'),
+	)
+);
+
 // Card - selectable
 $uilib-firstchoice-card-selectable-variables: map.merge(
 	$uilib-card-selectable-variables,
@@ -208,8 +225,6 @@ $uilib-firstchoice-card-selectable-variables: map.merge(
 $uilib-firstchoice-card-search-variables: map.merge(
 	$uilib-card-search-variables,
 	(
-		radius: var(--uilib-border-radius-200),
-		radius-spacing: var(--uilib-spacing-200),
 		highlights-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-down.svg'),
 	)
 );
@@ -402,15 +417,6 @@ $uilib-firstchoice-price-variables: map.merge(
 	)
 );
 
-// Promo banner
-$uilib-firstchoice-card-promotion-variables: map.merge(
-	$uilib-card-promotion-variables,
-	(
-		cta-copy-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/copy.svg'),
-		cta-copied-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/checkmark-circled-filled.svg'),
-	)
-);
-
 // Ratings and Reviews - Numerical
 $uilib-firstchoice-ratings-numerical-variables: map.merge(
 	$uilib-ratings-numerical-variables,
@@ -446,6 +452,22 @@ $uilib-firstchoice-show-more-less-variables: map.merge(
 	)
 );
 
+// Skeleton
+$uilib-firstchoice-skeleton-variables: map.merge(
+	$uilib-skeleton-variables,
+	(
+		shimmer-color: var(--uilib-color-canvas-default),
+	)
+);
+
+// Social proofing
+$uilib-firstchoice-social-proofing-variables: map.merge(
+	$uilib-social-proofing-variables,
+	(
+		close-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/cross.svg'),
+	)
+);
+
 // Tabs - in-page
 $uilib-firstchoice-tabs-in-page-variables: map.merge(
 	$uilib-tabs-in-page-variables,
@@ -463,20 +485,3 @@ $uilib-firstchoice-tabs-anchor-variables: map.merge(
 		scroll-right-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-right.svg'),
 	)
 );
-
-// Skeleton
-$uilib-firstchoice-skeleton-variables: map.merge(
-	$uilib-skeleton-variables,
-	(
-		color: map.get($uilib-color-semantic-firstchoice, 'other-skeleton-loading'),
-		shimmer-color: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
-	)
-);
-
-// Social proofing
-$uilib-firstchoice-social-proofing-variables: map.merge(
-	$uilib-social-proofing-variables,
-	(
-		close-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/cross.svg'),
-	)
-);

package/scss/themes/firstchoice/index.scss

@@ -83,6 +83,12 @@
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-firstchoice-card-icon-variables);
 
+	// Card - product
+	@include util.uilib-build-css-vars('card-product', $uilib-firstchoice-card-product-variables);
+
+	// Card - promotion
+	@include util.uilib-build-css-vars('card-promotion', $uilib-firstchoice-card-promotion-variables);
+
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-firstchoice-card-search-variables);
 
@@ -167,9 +173,6 @@
 	// Price
 	@include util.uilib-build-css-vars('price', $uilib-firstchoice-price-variables);
 
-	// Promo banner
-	@include util.uilib-build-css-vars('card-promotion', $uilib-firstchoice-card-promotion-variables);
-
 	// Promo tag
 	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-variables);
 
@@ -179,12 +182,12 @@
 	// Ratings and Reviews - Percentage
 	@include util.uilib-build-css-vars('ratings-percentage', $uilib-firstchoice-ratings-percentage-variables);
 
-	// Ratings and Reviews - Range Icons
-	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-firstchoice-ratings-range-icons-variables);
-
 	// Ratings and Reviews - Range bar
 	@include util.uilib-build-css-vars('ratings-range-bar', $uilib-ratings-range-bar-variables);
 
+	// Ratings and Reviews - Range Icons
+	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-firstchoice-ratings-range-icons-variables);
+
 	// Scroller
 	@include util.uilib-build-css-vars('scroller', $uilib-scroller-variables);
 

package/scss/themes/firstchoice/theme.json

@@ -359,5 +359,12 @@
 				"primitive": "uilib-border-radius-100"
 			}
 		}
+	},
+	"skeleton": {
+		"tokens": {
+			"skeleton-shimmer-color": {
+				"primitive": "uilib-color-canvas-default"
+			}
+		}
 	}
 }

package/scss/themes/tui/_overrides.scss

@@ -14,6 +14,14 @@ $uilib-tui-font-families: map.merge(
 	)
 );
 
+// Card - product
+$uilib-tui-card-product-variables: map.merge(
+	$uilib-card-product-variables,
+	(
+		flagship-color: var(--uilib-color-brand-tui-blue),
+	)
+);
+
 // Card - search
 $uilib-tui-card-search-variables: map.merge(
 	$uilib-card-search-variables,
@@ -48,6 +56,3 @@ $uilib-tui-ratings-numerical-variables: map.merge(
 		alt-icon-color: var(--uilib-color-brand-musement),
 	)
 );
-
-// Skeleton
-$uilib-tui-skeleton-variables: $uilib-skeleton-variables;

package/scss/themes/tui/index.scss

@@ -83,6 +83,12 @@
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-card-icon-variables);
 
+	// Card - product
+	@include util.uilib-build-css-vars('card-product', $uilib-tui-card-product-variables);
+
+	// Card - promotion
+	@include util.uilib-build-css-vars('card-promotion', $uilib-card-promotion-variables);
+
 	// Card - search
 	@include util.uilib-build-css-vars('card-search', $uilib-tui-card-search-variables);
 
@@ -134,6 +140,9 @@
 	// Hero
 	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
 
+	// Highlight panel
+	@include util.uilib-build-css-vars('highlight-panel', $uilib-tui-highlight-panel-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-icon-button-variables);
 
@@ -164,9 +173,6 @@
 	// Price
 	@include util.uilib-build-css-vars('price', $uilib-price-variables);
 
-	// Promo banner
-	@include util.uilib-build-css-vars('card-promotion', $uilib-card-promotion-variables);
-
 	// Promo tag
 	@include util.uilib-build-css-vars('promo-tag', $uilib-promo-tag-variables);
 
@@ -176,12 +182,12 @@
 	// Ratings and Reviews - Percentage
 	@include util.uilib-build-css-vars('ratings-percentage', $uilib-ratings-percentage-variables);
 
-	// Ratings and Reviews - Range Icons
-	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-ratings-range-icons-variables);
-
 	// Ratings and Reviews - Range bar
 	@include util.uilib-build-css-vars('ratings-range-bar', $uilib-ratings-range-bar-variables);
 
+	// Ratings and Reviews - Range Icons
+	@include util.uilib-build-css-vars('ratings-range-icons', $uilib-ratings-range-icons-variables);
+
 	// Scroller
 	@include util.uilib-build-css-vars('scroller', $uilib-scroller-variables);
 
@@ -194,9 +200,6 @@
 	// Social proofing
 	@include util.uilib-build-css-vars('social-proofing', $uilib-social-proofing-variables);
 
-	// Highlight panel
-	@include util.uilib-build-css-vars('highlight-panel', $uilib-tui-highlight-panel-variables);
-
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-tabs-in-page-variables);
 

package/scss/variables/base-theme.json

@@ -1093,14 +1093,8 @@
 	},
 	"card-search": {
 		"tokens": {
-			"card-search-radius": {
-				"primitive": "uilib-border-radius-400",
-				"displayType": "radius",
-				"title": "Card radius",
-				"description": "Card radius"
-			},
 			"card-search-radius-spacing": {
-				"primitive": "uilib-border-spacing-400",
+				"primitive": "uilib-card-radius",
 				"displayType": "size",
 				"title": "Spacing required for card radius",
 				"description": "Spacing required for card radius"
@@ -1125,6 +1119,34 @@
 			}
 		}
 	},
+	"card-product": {
+		"tokens": {
+			"card-product-radius-spacing": {
+				"primitive": "uilib-card-radius",
+				"displayType": "size",
+				"title": "Spacing required for card radius",
+				"description": "Spacing required for card radius"
+			},
+			"card-product-flagship-color": {
+				"primitive": "uilib-color-core-brand-strong",
+				"displayType": "color",
+				"title": "Background for flagship wrapper",
+				"description": "Background for flagship wrapper"
+			},
+			"card-product-flagship-text-color": {
+				"primitive": "uilib-color-text-inverse",
+				"displayType": "color",
+				"title": "Text colour for flagship wrapper",
+				"description": "Text colour for flagship wrapper"
+			},
+			"card-product-highlights-icon": {
+				"displayType": "icon",
+				"title": "Icon for show/hide within highlight section",
+				"description": "Icon for show/hide within highlight section",
+				"longValue": true
+			}
+		}
+	},
 	"datepicker": {
 		"displayType": "color",
 		"tokens": {
@@ -2610,7 +2632,7 @@
 				"description": "Skeleton loading colour"
 			},
 			"skeleton-shimmer-color": {
-				"primitive": "color-neutral-20",
+				"primitive": "uilib-color-canvas-contrast",
 				"title": "Skeleton shimmer colour",
 				"description": "Skeleton shimmer colour"
 			}

package/scss/variables.scss

@@ -22,11 +22,14 @@
 @forward 'lib/breadcrumb/variables';
 @forward 'lib/alert/variables';
 @forward 'lib/button/variables';
-@forward 'lib/cards/card/variables';
 @forward 'lib/cards/article/variables';
+@forward 'lib/cards/card/variables';
 @forward 'lib/cards/carousel/variables';
 @forward 'lib/cards/icon/variables';
+@forward 'lib/cards/promotion/variables';
 @forward 'lib/cards/search/variables';
+@forward 'lib/cards/product/variables';
+@forward 'lib/cards/promotion/variables';
 @forward 'lib/cards/selectable/variables';
 @forward 'lib/divider/variables';
 @forward 'lib/flight-details/variables';
@@ -57,7 +60,6 @@
 @forward 'lib/modal/variables';
 @forward 'lib/pagination/variables';
 @forward 'lib/price/variables';
-@forward 'lib/cards/promotion/variables';
 @forward 'lib/promo-tag/variables';
 @forward 'lib/ratings-reviews/numerical/variables';
 @forward 'lib/ratings-reviews/percentage/variables';
@@ -75,5 +77,6 @@
 
 // Pattern variables
 @forward 'lib/patterns/edit-search/variables';
+@forward 'lib/patterns/reasons-to-book/variables';
 @forward 'lib/patterns/review-card/variables';
 @forward 'lib/patterns/review-summary/variables';

package/types/components.ts

@@ -20,7 +20,7 @@ export interface AccordionProps {
 }
 
 export interface AccordionGroupProps extends AccordionProps {
-	group?: 'none' | 'default' | 'divider';
+	group?: 'none' | 'default' | 'divider' | 'timeline';
 	groupLength?: number;
 	intro?: string;
 	toggleOpen?: string;
@@ -132,6 +132,7 @@ export interface CardSelectableProps {
 	selectedIndex?: number;
 	clickableArea?: 'input' | 'card';
 	includeImage?: boolean;
+	includeTag?: boolean;
 }
 
 // ─── Datepicker ────────────────────────────────────────
@@ -652,6 +653,18 @@ export interface SearchCardProps {
 	toggleClose?: string;
 }
 
+// ─── Product Card ──────────────────────────────────────
+export interface ProductCardProps {
+	flagship?: boolean;
+	productLabel?: boolean;
+	gallery?: boolean;
+	quickview?: boolean;
+	promoArea?: boolean;
+	highlightsArea?: boolean;
+	toggleOpen?: string;
+	toggleClose?: string;
+}
+
 // ─── Show More Or Less ──────────────────────────────────
 export interface ShowMoreOrLessProps {
 	isOpen?: boolean;