@tui/design-system 1.6.0 → 1.8.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/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/lib/skeleton/_variables.scss

@@ -1,8 +1,4 @@
-@use 'sass:map';
-@use '../../variables/colors' as *;
-@use '../../variables/primitives' as *;
-
 $uilib-skeleton-variables: (
-	color: map.get($uilib-color-semantic, 'other-skeleton-loading'),
-	shimmer-color: map.get($uilib-primitives, 'color-neutral-20'),
+	color: var(--uilib-color-other-skeleton-loading),
+	shimmer-color: var(--uilib-color-canvas-contrast),
 ) !default;

package/scss/lib/tabs/_mixins.scss

@@ -1,39 +1,44 @@
 // Shared tab styles used by in-page and tabs-anchor.
 // $prefix: the BEM block name, e.g. 'uilib-tabs-in-page' or 'uilib-tabs-anchor'
+
+@mixin uilib-tablist-base() {
+	--left-fade: 0rem;
+	--right-fade: 0rem;
+
+	$fade-mask: linear-gradient(to right, transparent 0, black var(--left-fade), black calc(100% - var(--right-fade)), transparent 100%);
+
+	scroll-padding-inline: var(--left-fade) var(--right-fade);
+
+	margin: calc(-1 * var(--uilib-spacing-200));
+	padding: var(--uilib-spacing-200);
+
+	overflow-x: auto;
+	scroll-behavior: smooth;
+	scrollbar-width: none;
+	-webkit-mask-image: #{$fade-mask};
+	mask-image: #{$fade-mask};
+	mask-origin: padding-box;
+	mask-clip: padding-box;
+}
+
 @mixin uilib-tab-base($prefix) {
 	position: relative;
 
-	display: flex;
-	flex-shrink: 0;
-	gap: var(--uilib-spacing-200);
-	align-items: center;
-
 	max-width: 12.5rem;
 	padding: var(--uilib-spacing-300) var(--uilib-spacing-500);
 
 	color: var(--#{$prefix}-text-color);
 	font-weight: var(--uilib-font-weight-semibold);
 	font-family: var(--uilib-font-family-lead);
+	white-space: normal;
 	text-decoration: none;
 
-	border-radius: var(--uilib-border-radius-200);
-
 	background: transparent;
 
 	cursor: pointer;
 }
 
 @mixin uilib-tabs-shared($prefix) {
-	.#{$prefix}__scroll-button--left .uilib-icon {
-		-webkit-mask-image: var(--#{$prefix}-scroll-left-icon);
-		mask-image: var(--#{$prefix}-scroll-left-icon);
-	}
-
-	.#{$prefix}__scroll-button--right .uilib-icon {
-		-webkit-mask-image: var(--#{$prefix}-scroll-right-icon);
-		mask-image: var(--#{$prefix}-scroll-right-icon);
-	}
-
 	.#{$prefix} {
 		// .uilib-icon-button selector is chained to raise specificity above uilib-icon-button's
 		// `display: inline-flex`, which appears later due to alphabetical @include sorting in storybook
@@ -42,6 +47,16 @@
 			display: none;
 		}
 
+		&__scroll-button--left .uilib-icon {
+			-webkit-mask-image: var(--#{$prefix}-scroll-left-icon);
+			mask-image: var(--#{$prefix}-scroll-left-icon);
+		}
+
+		&__scroll-button--right .uilib-icon {
+			-webkit-mask-image: var(--#{$prefix}-scroll-right-icon);
+			mask-image: var(--#{$prefix}-scroll-right-icon);
+		}
+
 		&__scroll-wrapper {
 			position: relative;
 		}
@@ -71,55 +86,19 @@
 			right: 0;
 		}
 
-		&__tablist {
-			--left-fade: 0;
-			--right-fade: 0;
-
-			$fade-mask: linear-gradient(to right, transparent 0, black var(--left-fade), black calc(100% - var(--right-fade)), transparent 100%);
-
-			scroll-padding-inline: var(--left-fade) var(--right-fade);
-
-			display: flex;
-			flex-direction: row;
-			align-items: end;
-
-			margin: calc(-1 * var(--uilib-spacing-200));
-			padding: var(--uilib-spacing-200);
-
-			overflow-x: auto;
-			scroll-behavior: smooth;
-			scrollbar-width: none;
-			-webkit-mask-image: #{$fade-mask};
-			mask-image: #{$fade-mask};
-			mask-origin: padding-box;
-			mask-clip: padding-box;
-		}
-
-		&__scroll-wrapper:has(&__scroll-button--left:not(.#{$prefix}--hidden)) &__tablist {
-			--left-fade: var(--#{$prefix}-scroll-fade-width);
-		}
-
-		&__scroll-wrapper:has(&__scroll-button--right:not(.#{$prefix}--hidden)) &__tablist {
-			--right-fade: var(--#{$prefix}-scroll-fade-width);
-		}
-
 		&__tab {
+			@include uilib-tab-base($prefix);
+
+			/* stylelint-disable-next-line order/order */
 			&--active {
 				color: var(--#{$prefix}-active-color);
-			}
-
-			&--active::after {
-				position: absolute;
-				left: 0;
-				bottom: 0;
-				content: '';
-
-				width: 100%;
 
-				border-bottom: var(--uilib-stroke-size-075) var(--uilib-stroke-style-solid) var(--#{$prefix}-active-color);
+				box-shadow: inset 0 calc(var(--uilib-stroke-size-075) * -1) 0 0 var(--#{$prefix}-active-color);
 			}
 
-			@include uilib-tab-base($prefix);
+			&::before {
+				border-radius: var(--uilib-border-radius-100);
+			}
 
 			&:hover {
 				color: var(--#{$prefix}-active-color);
@@ -151,6 +130,84 @@
 					max-height: unset;
 				}
 			}
+
+			&-inner {
+				display: flex;
+				flex-flow: row nowrap;
+				gap: var(--uilib-spacing-200);
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+
+	// ─── V1: flex on tablist and tab ───
+	[version='1'].#{$prefix} {
+		.#{$prefix}__tablist {
+			@include uilib-tablist-base;
+
+			/* stylelint-disable-next-line order/order */
+			display: flex;
+			flex-direction: row;
+			align-items: end;
+		}
+
+		.#{$prefix}__tab {
+			display: inline-flex;
+			flex-shrink: 0;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+		}
+	}
+
+	// ─── V2: table layout on tablist, scrolling on wrapper ───
+	[version='2'].#{$prefix} {
+		.#{$prefix}__tablist-wrapper {
+			@include uilib-tablist-base;
+		}
+
+		.#{$prefix}__tablist {
+			display: table;
+
+			table-layout: fixed;
+		}
+
+		.#{$prefix}__tab-outer {
+			display: table-cell;
+
+			vertical-align: bottom;
+		}
+
+		.#{$prefix}__tab {
+			width: max-content;
+		}
+
+		.#{$prefix}__tab-inner {
+			display: flex;
+			flex-flow: row nowrap;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+		}
+	}
+
+	// ─── Scroll fade triggers ───
+	[version='1'].#{$prefix} {
+		&:has(.#{$prefix}__scroll-button--left:not(.#{$prefix}--hidden)) .#{$prefix}__tablist {
+			--left-fade: var(--#{$prefix}-scroll-fade-width);
+		}
+
+		&:has(.#{$prefix}__scroll-button--right:not(.#{$prefix}--hidden)) .#{$prefix}__tablist {
+			--right-fade: var(--#{$prefix}-scroll-fade-width);
+		}
+	}
+
+	[version='2'].#{$prefix} .#{$prefix}__scroll-wrapper {
+		&:has(.#{$prefix}__scroll-button--left:not(.#{$prefix}--hidden)) .#{$prefix}__tablist-wrapper {
+			--left-fade: var(--#{$prefix}-scroll-fade-width);
+		}
+
+		&:has(.#{$prefix}__scroll-button--right:not(.#{$prefix}--hidden)) .#{$prefix}__tablist-wrapper {
+			--right-fade: var(--#{$prefix}-scroll-fade-width);
 		}
 	}
 }

package/scss/lib/tabs/anchor/_mixins.scss

@@ -25,6 +25,15 @@ $uilib-tabs-anchor-included: false !default;
 		display: inline-flex;
 
 		@include uilib-tab-base($prefix);
+
+		/* stylelint-disable-next-line order/order */
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		.uilib-icon {
+			flex-shrink: 0;
+		}
 	}
 }
 
@@ -33,9 +42,24 @@ $uilib-tabs-anchor-included: false !default;
 
 	@include uilib-tabs-shared($prefix);
 
+	.#{$prefix}__tab {
+		display: flex;
+		flex-flow: row nowrap;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		&-label {
+			text-align: center;
+		}
+	}
+
 	.#{$prefix}-wrapper {
 		display: flex;
 		flex-direction: column;
+
+		& > section:focus-visible::before {
+			border-radius: var(--uilib-border-radius-100);
+		}
 	}
 
 	// No-JS fallback
@@ -62,6 +86,18 @@ $uilib-tabs-anchor-included: false !default;
 				& .#{$prefix}__scroll-wrapper {
 					border-bottom: none;
 				}
+
+				.uilib-tabs-anchor__scroll-button {
+					top: calc(50% - var(--uilib-spacing-100));
+
+					&--left {
+						left: calc(-1 * var(--uilib-spacing-100));
+					}
+
+					&--right {
+						right: calc(-1 * var(--uilib-spacing-100));
+					}
+				}
 			}
 
 			@media (prefers-reduced-motion: no-preference) {