@tui/design-system 1.7.0 → 1.9.0

package/scss/lib/patterns/review-card/_mixins.scss

@@ -0,0 +1,283 @@
+// Review card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../../cards/card/mixins' as *;
+@use '../../divider/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../ratings-reviews/range-icons/mixins' as *;
+@use '../../ratings-reviews/range-icons-group/mixins' as *;
+
+$uilib-review-card-included: false !default;
+
+@mixin uilib-review-card() {
+	@if not $uilib-review-card-included {
+		$uilib-review-card-included: true !global;
+
+		@include uilib-card;
+		@include uilib-divider;
+		@include uilib-link;
+		@include uilib-ratings-range-icons;
+		@include uilib-ratings-range-icons-group;
+		@include uilib-review-card-master;
+	}
+}
+
+@mixin uilib-review-card-master() {
+	.uilib-review-card {
+		container-name: uilib-review-card;
+		container-type: inline-size;
+
+		&__review {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-400);
+			align-items: flex-start;
+
+			width: 100%;
+		}
+
+		&__logo {
+			flex: 0 0 auto;
+
+			height: 1.125rem; /* 18 / 16 */
+		}
+
+		&__overall-rating {
+			display: flex;
+		}
+
+		&__divider {
+			width: 100%;
+			margin: 0;
+		}
+
+		.uilib-ratings-range-icons-group {
+			width: 100%;
+			max-width: min(100%, 20rem);
+			margin: 0;
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		&--dual,
+		&--compact {
+			.uilib-review-card {
+				&__review {
+					display: flex;
+					flex-flow: row wrap;
+					gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+					justify-content: space-between;
+					align-items: flex-end;
+
+					&::before {
+						content: '';
+
+						order: 2;
+
+						display: block;
+						flex-basis: 100%;
+					}
+				}
+
+				&__logo {
+					order: 1;
+				}
+
+				&__overall-rating,
+				&__link {
+					order: 3;
+				}
+
+				&__link {
+					margin-top: var(--uilib-spacing-100);
+				}
+
+				&__overall-rating {
+					flex: 1 1 0;
+				}
+
+				&__divider {
+					display: none;
+				}
+			}
+
+			.uilib-ratings-range-icons__details {
+				flex-basis: 100%;
+			}
+
+			.uilib-ratings-range-icons-group {
+				display: none;
+			}
+
+			.uilib-ratings-range-icons__description {
+				order: -1;
+
+				flex-basis: 100%;
+			}
+		}
+
+		&--compact {
+			.uilib-ratings-range-icons__value {
+				font: var(--uilib-typography-component-heading-medium-strong);
+			}
+		}
+
+		&--dual {
+			.uilib-review-card__overall-rating {
+				display: grid;
+				grid-template-columns: auto 1fr;
+			}
+
+			.uilib-ratings-range-icons__value,
+			.uilib-ratings-range-icons__score {
+				grid-row: 1;
+			}
+
+			.uilib-ratings-range-icons__details {
+				grid-column: 1 / -1;
+			}
+
+			.uilib-card__content-container {
+				display: flex;
+				flex-flow: column;
+				gap: var(--uilib-spacing-400);
+				align-items: flex-start;
+
+				&::before {
+					content: '';
+
+					order: 2;
+
+					align-self: stretch;
+
+					border: 0 var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+					border-top-width: var(--uilib-stroke-size-025);
+				}
+
+				.uilib-review-card {
+					&__review {
+						order: 3;
+					}
+
+					&__review:first-child {
+						order: 1;
+					}
+				}
+			}
+
+			.uilib-ratings-range-icons__description {
+				display: none;
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container uilib-review-card (min-width: 20rem) {
+				.uilib-card__content-container {
+					flex-flow: row nowrap;
+
+					&::before {
+						align-self: stretch;
+
+						border-top-width: 0;
+						border-left-width: var(--uilib-stroke-size-025);
+					}
+				}
+			}
+		}
+
+		&:not(&--dual, &--compact) {
+			@include uilib-review-card-default;
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-review-card style(--uilib-review-card-layout: default) {
+			@include uilib-review-card-default;
+
+			.uilib-review-card {
+				&__review {
+					flex-flow: column;
+					gap: var(--uilib-spacing-400);
+					align-items: flex-start;
+
+					&::before {
+						display: none;
+					}
+
+					&:not(:first-child) {
+						display: none;
+					}
+				}
+
+				&__logo,
+				&__overall-rating,
+				&__link {
+					order: unset;
+				}
+
+				&__overall-rating {
+					grid-template-columns: auto 1fr;
+				}
+
+				&__divider {
+					display: block;
+				}
+			}
+
+			.uilib-ratings-range-icons__value {
+				grid-row: 1 / span 3;
+			}
+
+			.uilib-ratings-range-icons__score {
+				grid-row: unset;
+			}
+
+			.uilib-ratings-range-icons__details {
+				grid-column: unset;
+			}
+
+			.uilib-card__content-container {
+				display: block;
+
+				&::before {
+					display: none;
+				}
+			}
+
+			.uilib-ratings-range-icons__details {
+				flex-basis: unset;
+			}
+
+			.uilib-ratings-range-icons-group {
+				display: none;
+			}
+
+			.uilib-ratings-range-icons__description {
+				order: unset;
+
+				display: block;
+				flex-basis: unset;
+			}
+
+			.uilib-ratings-range-icons-group {
+				display: flex;
+			}
+		}
+	}
+}
+
+@mixin uilib-review-card-default() {
+	.uilib-review-card__overall-rating {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+		align-items: start;
+
+		.uilib-ratings-range-icons__value {
+			grid-row: 1 / span 3;
+
+			font: var(--uilib-typography-heading-xxlarge);
+		}
+	}
+}

package/scss/lib/patterns/review-card/_variables.scss

@@ -0,0 +1,3 @@
+// Review card / _variables
+
+$uilib-review-card-variables: () !default;

package/scss/lib/patterns/review-summary/_index.scss

@@ -0,0 +1,3 @@
+// Review summary / index
+@use 'mixins' as *;
+@include uilib-review-summary;

package/scss/lib/patterns/review-summary/_mixins.scss

@@ -0,0 +1,156 @@
+// Review summary / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+@use '../../divider/mixins' as *;
+@use '../../link/mixins' as *;
+@use '../../ratings-reviews/range-bar/mixins' as *;
+@use '../../ratings-reviews/range-icons/mixins' as *;
+@use '../../ratings-reviews/range-icons-group/mixins' as *;
+
+$uilib-review-summary-included: false !default;
+
+@mixin uilib-review-summary() {
+	@if not $uilib-review-summary-included {
+		$uilib-review-summary-included: true !global;
+
+		@include uilib-divider;
+		@include uilib-link;
+		@include uilib-ratings-range-bar;
+		@include uilib-ratings-range-icons;
+		@include uilib-ratings-range-icons-group;
+		@include uilib-review-summary-master;
+	}
+}
+
+@mixin uilib-review-summary-master() {
+	.uilib-review-summary {
+		container-name: uilib-review-summary;
+		container-type: inline-size;
+
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: var(--uilib-spacing-400) var(--uilib-spacing-200);
+		align-items: center;
+
+		&__title {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-heading-small);
+		}
+
+		&__logo {
+			height: 1.125rem; /* 18 / 16 */
+		}
+
+		&__overall-rating,
+		&__divider,
+		&__breakdown,
+		&__link {
+			grid-column: 1 / -1;
+		}
+
+		&__overall-rating {
+			display: grid;
+			grid-template-columns: auto 1fr;
+			gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+			align-items: start;
+
+			max-width: max-content;
+
+			.uilib-ratings-range-icons__value {
+				grid-row: 1 / span 3;
+
+				font: var(--uilib-typography-heading-xxlarge);
+			}
+
+			.uilib-ratings-range-icons__score {
+				grid-row: unset;
+			}
+
+			.uilib-ratings-range-icons__details {
+				grid-column: unset;
+			}
+		}
+
+		&__divider {
+			width: 100%;
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&__breakdown {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-800) var(--uilib-spacing-1600);
+			align-items: flex-start;
+
+			width: 100%;
+
+			.uilib-ratings-range-bar-group,
+			.uilib-ratings-range-icons-group {
+				width: 100%;
+				max-width: 20rem; /* 320 / 16 */
+				margin: 0;
+			}
+		}
+
+		&__link {
+			margin-top: var(--uilib-spacing-200);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-review-summary (min-width: 22rem) {
+			&__overall-rating {
+				.uilib-ratings-range-icons__value {
+					min-width: 3ex; /* 52px / 16 */
+				}
+			}
+
+			&__breakdown {
+				display: grid;
+				grid-template-columns: auto 1fr;
+				gap: var(--uilib-spacing-800) var(--uilib-spacing-400);
+				align-items: start;
+
+				&::before {
+					grid-row: 1 / span 2;
+					grid-column: 1;
+
+					content: '';
+
+					display: block;
+
+					width: 3ex; /* 52px / 16 */
+					height: 100%;
+
+					font: var(--uilib-typography-heading-xxlarge);
+				}
+
+				.uilib-ratings-range-bar-group,
+				.uilib-ratings-range-icons-group {
+					grid-column: 2;
+				}
+			}
+		}
+
+		@container uilib-review-summary (min-width: 42rem) {
+			&__breakdown {
+				grid-template-columns: auto 1fr 1fr;
+				gap: var(--uilib-spacing-1600);
+
+				max-width: 44.5rem;
+
+				&::before {
+					grid-row: 1 / span 1;
+
+					margin-right: calc(var(--uilib-spacing-1200) * -1);
+				}
+
+				.uilib-ratings-range-icons-group {
+					grid-column: 3;
+				}
+			}
+		}
+	}
+}

package/scss/lib/patterns/review-summary/_variables.scss

@@ -0,0 +1,3 @@
+// Review summary / _variables
+
+$uilib-review-summary-variables: () !default;

package/scss/lib/ratings-reviews/range-bar/_mixins.scss

@@ -133,9 +133,10 @@ $uilib-ratings-range-bar-included: false !default;
 		}
 
 		&__bar {
+			$margin: calc((1rem * var(--uilib-line-height-body)) - 1rem);
 			width: var(--uilib-ratings-range-bar-bar-width);
-			height: calc(1rem - var(--uilib-stroke-size-050));
-			margin-top: var(--uilib-spacing-050);
+			height: 1rem;
+			margin: calc(#{$margin} / 2) 0;
 
 			border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-ratings-range-bar-bar-color);
 			border-radius: var(--uilib-border-radius-pill);

package/scss/lib/ratings-reviews/range-icons/_mixins.scss

@@ -22,7 +22,8 @@ $uilib-ratings-range-icons-included: false !default;
 			.uilib-ratings-range-icons--star,
 			.uilib-ratings-range-icons--sun,
 			.uilib-ratings-range-icons--customer,
-			.uilib-ratings-range-icons--tripadvisor {
+			.uilib-ratings-range-icons--tripadvisor,
+			.uilib-ratings-range-icons--holidaycheck {
 				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
 					&::after {
 						inline-size: calc(var(--icon-size) * #{$score-key});
@@ -43,7 +44,8 @@ $uilib-ratings-range-icons-included: false !default;
 		}
 
 		@if $score-key > 5 {
-			.uilib-ratings-range-icons--sun {
+			.uilib-ratings-range-icons--sun,
+			.uilib-ratings-range-icons--holidaycheck {
 				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
 					&::after {
 						inline-size: calc(var(--icon-size) * #{$score-key});
@@ -106,6 +108,12 @@ $uilib-ratings-range-icons-included: false !default;
 			--rating-max: 5;
 		}
 
+		&--holidaycheck {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-holidaycheck-rating-icon);
+			--tile-bg-checked-icon: var(--uilib-ratings-range-icons-holidaycheck-rating-checked-icon);
+			--rating-max: 6;
+		}
+
 		&--tui-t {
 			--tile-bg-icon: var(--uilib-ratings-range-icons-tui-t-rating-icon);
 			--rating-max: 5;
@@ -149,6 +157,7 @@ $uilib-ratings-range-icons-included: false !default;
 
 		&--inverse {
 			.uilib-ratings-range-icons__value,
+			.uilib-ratings-range-icons__description,
 			.uilib-ratings-range-icons__plus,
 			.uilib-ratings-range-icons__label {
 				color: var(--uilib-color-text-inverse);
@@ -189,6 +198,11 @@ $uilib-ratings-range-icons-included: false !default;
 			}
 		}
 
+		&__description {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-small-strong);
+		}
+
 		&__value {
 			color: var(--uilib-color-text-strong);
 			font: var(--uilib-typography-label-small-strong);

package/scss/lib/ratings-reviews/range-icons/_variables.scss

@@ -20,6 +20,8 @@ $uilib-ratings-range-icons-variables: (
 	customer-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/customer-checked.svg'),
 	tui-t-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-t.svg'),
 	tui-t-plus-color: map.get($uilib-primitives, 'color-blue-100'),
+	holidaycheck-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/holidaycheck-unchecked.svg'),
+	holidaycheck-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/holidaycheck-checked.svg'),
 ) !default;
 $uilib-rating-scores: (
 	0: '00',

package/scss/mixins.scss

@@ -6,6 +6,7 @@
 @forward 'lib/button/mixins';
 @forward 'lib/cards/card/mixins';
 @forward 'lib/cards/article/mixins';
+@forward 'lib/cards/carousel/mixins';
 @forward 'lib/cards/icon/mixins';
 @forward 'lib/cards/search/mixins';
 @forward 'lib/cards/selectable/mixins';
@@ -25,6 +26,7 @@
 @forward 'lib/forms/input-text/mixins';
 @forward 'lib/grid/mixins';
 @forward 'lib/hero/mixins';
+@forward 'lib/highlight-panel/mixins';
 @forward 'lib/icon/mixins';
 @forward 'lib/icon-button/mixins';
 @forward 'lib/image/mixins';
@@ -55,3 +57,8 @@
 @forward 'lib/travel-aware-banner/mixins';
 @forward 'lib/typography/mixins';
 @forward 'lib/utility/mixins';
+
+// Pattern mixins
+@forward 'lib/patterns/edit-search/mixins';
+@forward 'lib/patterns/review-card/mixins';
+@forward 'lib/patterns/review-summary/mixins';

package/scss/themes/crystalski/_overrides.scss

@@ -109,6 +109,15 @@ $uilib-crystalski-card-article-variables: map.merge(
 	)
 );
 
+// Card - carousel
+$uilib-crystalski-carousel-variables: map.merge(
+	$uilib-carousel-variables,
+	(
+		prev-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'),
+	)
+);
+
 // Card - icon
 $uilib-crystalski-card-icon-variables: map.merge(
 	$uilib-card-icon-variables,
@@ -223,6 +232,14 @@ $uilib-crystalski-input-text-variables: map.merge(
 	)
 );
 
+// Highlight panel
+$uilib-crystalski-highlight-panel-variables: map.merge(
+	$uilib-highlight-panel-variables,
+	(
+		header-font-color-brand: var(--uilib-color-text-body),
+	)
+);
+
 // Icon button
 $uilib-crystalski-icon-button-variables: map.merge(
 	$uilib-icon-button-variables,

package/scss/themes/crystalski/index.scss

@@ -77,6 +77,9 @@
 	// Card - article
 	@include util.uilib-build-css-vars('card-article', $uilib-crystalski-card-article-variables);
 
+	// Card - carousel
+	@include util.uilib-build-css-vars('carousel', $uilib-crystalski-carousel-variables);
+
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-crystalski-card-icon-variables);
 
@@ -131,6 +134,9 @@
 	// Hero
 	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
 
+	// Highlight panel
+	@include util.uilib-build-css-vars('highlight-panel', $uilib-crystalski-highlight-panel-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-crystalski-icon-button-variables);
 
@@ -202,4 +208,8 @@
 
 	// Travel Aware Banner
 	@include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
+
+	// Patterns
+	// Edit search
+	@include util.uilib-build-css-vars('edit-search', $uilib-edit-search-variables);
 }

package/scss/themes/crystalski/theme.json

@@ -203,6 +203,13 @@
 			}
 		}
 	},
+	"highlight-panel": {
+		"tokens": {
+			"highlight-panel-header-font-color-brand": {
+				"primitive": "uilib-color-text-body"
+			}
+		}
+	},
 	"input-checkbox": {
 		"tokens": {
 			"input-checkbox-text-color-strong": {

package/scss/themes/firstchoice/_overrides.scss

@@ -176,6 +176,15 @@ $uilib-firstchoice-card-article-variables: map.merge(
 	)
 );
 
+// Card - carousel
+$uilib-firstchoice-carousel-variables: map.merge(
+	$uilib-carousel-variables,
+	(
+		prev-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'),
+	)
+);
+
 // Card - icon
 $uilib-firstchoice-card-icon-variables: map.merge(
 	$uilib-card-icon-variables,
@@ -293,6 +302,16 @@ $uilib-firstchoice-input-text-variables: map.merge(
 	)
 );
 
+// Highlight panel
+$uilib-firstchoice-highlight-panel-variables: map.merge(
+	$uilib-highlight-panel-variables,
+	(
+		radius: var(--uilib-border-radius-200),
+		header-font-color-brand: var(--uilib-color-text-strong),
+		header-icon-color-brand: var(--uilib-color-text-strong),
+	)
+);
+
 // Icon button
 $uilib-firstchoice-icon-button-variables: map.merge(
 	$uilib-icon-button-variables,

package/scss/themes/firstchoice/index.scss

@@ -77,6 +77,9 @@
 	// Card - article
 	@include util.uilib-build-css-vars('card-article', $uilib-firstchoice-card-article-variables);
 
+	// Card - carousel
+	@include util.uilib-build-css-vars('carousel', $uilib-firstchoice-carousel-variables);
+
 	// Card - icon
 	@include util.uilib-build-css-vars('card-icon', $uilib-firstchoice-card-icon-variables);
 
@@ -131,6 +134,9 @@
 	// Hero
 	@include util.uilib-build-css-vars('hero', $uilib-hero-variables);
 
+	// Highlight panel
+	@include util.uilib-build-css-vars('highlight-panel', $uilib-firstchoice-highlight-panel-variables);
+
 	// Icon button
 	@include util.uilib-build-css-vars('icon-button', $uilib-firstchoice-icon-button-variables);
 
@@ -202,4 +208,8 @@
 
 	// Travel Aware Banner
 	@include util.uilib-build-css-vars('travel-aware-banner', $uilib-travel-aware-banner-variables);
+
+	// Patterns
+	// Edit search
+	@include util.uilib-build-css-vars('edit-search', $uilib-edit-search-variables);
 }