@tui/design-system 1.1.1 → 1.3.0

package/scss/lib/travel-aware-banner/_variables.scss

@@ -0,0 +1,4 @@
+// Travel Aware Banner specific variables to allow theming
+$uilib-travel-aware-banner-variables: (
+	radius: var(--uilib-border-radius-400),
+) !default;

package/scss/lib/utility/_mixins.scss

@@ -18,6 +18,7 @@
 // Visually hidden (accessible for screen readers but hidden visually)
 @mixin uilib-visually-hidden {
 	position: absolute;
+	inset: 0;
 
 	width: 1px;
 	height: 1px;

package/scss/mixins.scss

@@ -18,6 +18,7 @@
 @forward 'lib/forms/input-chip/mixins';
 @forward 'lib/forms/input-count/mixins';
 @forward 'lib/forms/input-radio/mixins';
+@forward 'lib/forms/input-radio-scroll/mixins';
 @forward 'lib/forms/input-select/mixins';
 @forward 'lib/forms/input-slider/mixins';
 @forward 'lib/forms/input-switch/mixins';
@@ -47,5 +48,6 @@
 @forward 'lib/tabs/in-page/mixins';
 @forward 'lib/tabs/anchor/mixins';
 @forward 'lib/tooltip/mixins';
+@forward 'lib/travel-aware-banner/mixins';
 @forward 'lib/typography/mixins';
 @forward 'lib/utility/mixins';

package/scss/themes/crystalski/_overrides.scss

@@ -186,6 +186,15 @@ $uilib-crystalski-input-radio-variables: map.merge(
 	)
 );
 
+// Form input radio scroll
+$uilib-crystalski-input-radio-scroll-variables: map.merge(
+	$uilib-input-radio-scroll-variables,
+	(
+		previous-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-left.svg'),
+		next-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/chevron-right.svg'),
+	)
+);
+
 // Form input select
 $uilib-crystalski-input-select-variables: map.merge(
 	$uilib-input-select-variables,

package/scss/themes/crystalski/index.scss

@@ -110,6 +110,9 @@
 	// Form input radio
 	@include util.uilib-build-css-vars('input-radio', $uilib-crystalski-input-radio-variables);
 
+	// Form input radio scroll
+	@include util.uilib-build-css-vars('input-radio-scroll', $uilib-crystalski-input-radio-scroll-variables);
+
 	// Form input select
 	@include util.uilib-build-css-vars('input-select', $uilib-crystalski-input-select-variables);
 
@@ -190,4 +193,7 @@
 
 	// Tooltip
 	@include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
+
+	// Travel Aware Banner
+	@include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
 }

package/scss/themes/firstchoice/_overrides.scss

@@ -248,6 +248,15 @@ $uilib-firstchoice-input-checkbox-variables: map.merge(
 	)
 );
 
+// Form input radio scroll
+$uilib-firstchoice-input-radio-scroll-variables: map.merge(
+	$uilib-input-radio-scroll-variables,
+	(
+		previous-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-left.svg'),
+		next-icon: url('#{$uilib-assets-base-url}v3/icons/firstchoice/standard/chevron-right.svg'),
+	)
+);
+
 // Form input select
 $uilib-firstchoice-input-select-variables: map.merge(
 	$uilib-input-select-variables,

package/scss/themes/firstchoice/index.scss

@@ -110,6 +110,9 @@
 	// Form input radio
 	@include util.uilib-build-css-vars('input-radio', $uilib-input-radio-variables);
 
+	// Form input radio scroll
+	@include util.uilib-build-css-vars('input-radio-scroll', $uilib-firstchoice-input-radio-scroll-variables);
+
 	// Form input select
 	@include util.uilib-build-css-vars('input-select', $uilib-firstchoice-input-select-variables);
 
@@ -190,4 +193,7 @@
 
 	// Tooltip
 	@include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
+
+	// Travel Aware Banner
+	@include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
 }

package/scss/themes/tui/index.scss

@@ -110,6 +110,9 @@
 	// Form input radio
 	@include util.uilib-build-css-vars('input-radio', $uilib-input-radio-variables);
 
+	// Form input radio scroll
+	@include util.uilib-build-css-vars('input-radio-scroll', $uilib-input-radio-scroll-variables);
+
 	// Form input select
 	@include util.uilib-build-css-vars('input-select', $uilib-input-select-variables);
 
@@ -190,4 +193,7 @@
 
 	// Tooltip
 	@include util.uilib-build-css-vars('tooltip', $uilib-tooltip-variables);
+
+	// Travel Aware Banner
+	@include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
 }

package/scss/variables/_border-radius.scss

@@ -5,6 +5,8 @@ $uilib-radius: (
 	'100': 0.25rem,
 	// 8px
 	'200': 0.5rem,
+	// 12px
+	'300': 0.75rem,
 	// 16px
 	'400': 1rem,
 	// 24px

package/scss/variables/base-theme.json

@@ -291,15 +291,19 @@
 			},
 			"border-radius-100": {
 				"title": "Border radius 100",
-				"useWith": ["Alert", "Accordion", "Image counter", "Pagination"]
+				"useWith": ["Alert", "Accordion"]
 			},
 			"border-radius-200": {
 				"title": "Border radius 200",
 				"useWith": ["Card"]
 			},
+			"border-radius-300": {
+				"title": "Border radius 300",
+				"useWith": ["Card"]
+			},
 			"border-radius-400": {
 				"title": "Border radius 400",
-				"useWith": ["Eye catcher"]
+				"useWith": []
 			},
 			"border-radius-600": {
 				"title": "Border radius 600",
@@ -1648,6 +1652,21 @@
 			}
 		}
 	},
+	"input-radio-scroll": {
+		"displayType": "image",
+		"tokens": {
+			"input-radio-scroll-previous-icon": {
+				"title": "Previous button icon",
+				"description": "Previous button icon",
+				"longValue": true
+			},
+			"input-radio-scroll-next-icon": {
+				"title": "Next button icon",
+				"description": "Next button icon",
+				"longValue": true
+			}
+		}
+	},
 	"input-select": {
 		"tokens": {
 			"input-select-icon": {
@@ -2181,6 +2200,12 @@
 				"description": "Tui-t rating single tile background-image",
 				"longValue": true
 			},
+			"ratings-range-icons-tui-t-plus-color": {
+				"title": "TUI-T Plus color",
+				"description": "TUI-T Plus color",
+				"displayType": "color",
+				"primitive": "color-blue-100"
+			},
 			"ratings-range-icons-star-rating-checked-icon": {
 				"title": "Star rating checked icon",
 				"description": "Star rating checked single tile background-image",
@@ -2201,41 +2226,71 @@
 				"description": "Sun rating unchecked single tile background-image",
 				"longValue": true
 			},
+			"ratings-range-icons-customer-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-brand",
+				"title": "Customer icon colour",
+				"description": "TripAdvisor icon colour"
+			},
+			"ratings-range-icons-customer-inverse-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-core-brand",
+				"title": "Customer inverse icon colour",
+				"description": "TripAdvisor inverse icon colour"
+			},
+			"ratings-range-icons-customer-rating-icon": {
+				"title": "Customer unchecked rating icon",
+				"description": "Customer unchecked rating single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-customer-rating-checked-icon": {
+				"title": "Customer checked rating icon",
+				"description": "Customer checked rating single tile background-image",
+				"longValue": true
+			},
+			"ratings-range-icons-tripadvisor-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-brand-tripadvisor",
+				"title": "TripAdvisor icon colour",
+				"description": "TripAdvisor icon colour"
+			},
+			"ratings-range-icons-tripadvisor-inverse-color": {
+				"displayType": "color",
+				"primitive": "uilib-color-brand-tripadvisor-inverse",
+				"title": "TripAdvisor inverse icon colour",
+				"description": "TripAdvisor inverse icon colour"
+			},
 			"ratings-range-icons-tripadvisor-rating-icon": {
-				"title": "Tripadvisor unchecked rating icon",
-				"description": "Tripadvisor unchecked rating single tile background-image",
+				"title": "TripAdvisor unchecked rating icon",
+				"description": "TripAdvisor unchecked rating single tile background-image",
 				"longValue": true
 			},
 			"ratings-range-icons-tripadvisor-rating-checked-icon": {
-				"title": "Tripadvisor checked rating icon",
-				"description": "Tripadvisor checked rating single tile background-image",
+				"title": "TripAdvisor checked rating icon",
+				"description": "TripAdvisor checked rating single tile background-image",
 				"longValue": true
 			},
 			"ratings-range-icons-tripadvisor-logo": {
-				"title": "Tripadvisor logo",
-				"description": "Tripadvisor logo as leading image on ratings",
+				"title": "TripAdvisor logo",
+				"description": "TripAdvisor logo as leading image on ratings",
 				"longValue": true,
 				"displayType": "image"
 			},
-			"ratings-range-icons-tui-t-plus-color": {
-				"title": "Tui T Plus color",
-				"description": "Tui T Plus color",
-				"displayType": "color"
+			"ratings-range-icons-tripadvisor-logo-inverse": {
+				"title": "TripAdvisor logo inverse",
+				"description": "TripAdvisor logo as leading image on ratings (inverse)",
+				"longValue": true,
+				"displayType": "image"
 			}
 		}
 	},
 	"ratings-range-bar": {
 		"displayType": "color",
 		"tokens": {
-			"ratings-range-bar-icon-color": {
-				"title": "Icon colour",
-				"description": "Colour of the icon before label",
-				"primitive": "--uilib-color-status-info-icon"
-			},
 			"ratings-range-bar-bar-width": {
 				"title": "Range bar width",
 				"description": "Default range bar width",
-				"displayType": "size"
+				"displayType": "empty"
 			},
 			"ratings-range-bar-bar-color": {
 				"title": "Range bar colour",
@@ -2247,19 +2302,14 @@
 				"description": "Default range bar background colour",
 				"primitive": "--uilib-color-core-surface"
 			},
-			"ratings-range-bar-tripadvisor-bar-width": {
-				"title": "Tripadvisor range bar width",
-				"description": "Tripadvisor range bar width",
-				"displayType": "size"
-			},
 			"ratings-range-bar-tripadvisor-bar-color": {
-				"title": "Tripadvisor range bar colour",
-				"description": "Tripadvisor range bar colour",
+				"title": "TripAdvisor range bar colour",
+				"description": "TripAdvisor range bar colour",
 				"primitive": "--uilib-color-brand-tripadvisor"
 			},
 			"ratings-range-bar-tripadvisor-bar-bg-color": {
-				"title": "Tripadvisor range bar background",
-				"description": "Tripadvisor range bar background colour",
+				"title": "TripAdvisor range bar background",
+				"description": "TripAdvisor range bar background colour",
 				"primitive": "--uilib-color-other-disabled-soft"
 			}
 		}
@@ -2445,5 +2495,16 @@
 				"description": "Tooltip overlay text colour"
 			}
 		}
+	},
+	"travel-aware-banner": {
+		"displayType": "color",
+		"tokens": {
+			"travel-aware-banner-radius": {
+				"displayType": "radius",
+				"primitive": "uilib-border-radius-400",
+				"title": "Travel Aware banner border radius",
+				"description": "Travel Aware banner border radius"
+			}
+		}
 	}
 }

package/scss/variables.scss

@@ -36,6 +36,7 @@
 @forward 'lib/forms/input-chip/variables';
 @forward 'lib/forms/input-count/variables';
 @forward 'lib/forms/input-radio/variables';
+@forward 'lib/forms/input-radio-scroll/variables';
 @forward 'lib/forms/input-select/variables';
 @forward 'lib/forms/input-stepper/variables';
 @forward 'lib/forms/input-slider/variables';
@@ -65,4 +66,5 @@
 @forward 'lib/tabs/in-page/variables';
 @forward 'lib/tabs/anchor/variables';
 @forward 'lib/tooltip/variables';
+@forward 'lib/travel-aware-banner/variables';
 @forward 'lib/typography/variables';