@tui/design-system 5.0.0-beta.1 → 5.0.0-beta.4

package/scss/lib/ratings-reviews/percentage/_mixins.scss

@@ -0,0 +1,74 @@
+// rating percentage / _mixins
+@use '../../utility/mixins' as *;
+
+// Builds rating percentage
+@mixin uilib-ratings-percentage() {
+	.uilib-ratings-percentage {
+		display: inline-flex;
+		flex-flow: row wrap;
+		gap: var(--uilib-spacing-200) var(--uilib-spacing-100);
+		align-items: baseline;
+
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-body-medium);
+
+		&::before {
+			content: '';
+
+			display: inline-block;
+			flex-shrink: 0;
+			align-self: center;
+
+			width: var(--uilib-icon-size-xsmall);
+			aspect-ratio: var(--uilib-aspect-ratio-1x1-square);
+
+			background: var(--uilib-color-text-strong);
+			-webkit-mask-repeat: no-repeat;
+			mask-repeat: no-repeat;
+			-webkit-mask-position: center;
+			mask-position: center;
+			-webkit-mask-size: cover;
+			mask-size: cover;
+			-webkit-mask-image: var(--uilib-ratings-percentage-leading-icon);
+			mask-image: var(--uilib-ratings-percentage-leading-icon);
+		}
+
+		&__rating {
+			display: inline-flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-100);
+
+			font: var(--uilib-typography-label-medium);
+
+			&:has(+ .uilib-ratings-percentage__reviews)::after {
+				content: '';
+
+				display: inline-block;
+
+				border-right: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-text-strong);
+			}
+		}
+
+		&__reviews,
+		&__reviews.uilib-link {
+			color: var(--uilib-color-strong);
+			text-decoration-color: var(--uilib-color-strong);
+		}
+
+		&__logo {
+			display: inline-block;
+			align-self: flex-end;
+
+			height: 1.625rem; /* 26 / 16 */
+
+			&--holidaycheck {
+				height: 1.125rem; /* 18 / 16 */
+				margin-bottom: calc(var(--uilib-spacing-050) * -1);
+			}
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden();
+		}
+	}
+}

package/scss/lib/ratings-reviews/percentage/_variables.scss

@@ -0,0 +1,6 @@
+@use '../../../variables/env-variables' as *;
+
+// Percentage rating specific variables to allow theming
+$uilib-ratings-percentage-variables: (
+	leading-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/thumbs-up.svg'),
+) !default;

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

@@ -0,0 +1,3 @@
+// rating range icons / index
+@use 'mixins' as *;
+@include uilib-ratings-range-bar;

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

@@ -0,0 +1,88 @@
+@use '../../utility/mixins' as *;
+@use './variables' as *;
+
+// Builds rating range bar
+@mixin uilib-ratings-range-bar() {
+	.uilib-ratings-range-bar {
+		/* Defaults (override per variant) */
+		--percentage: 0;
+
+		display: inline-flex;
+		flex-direction: column;
+
+		/* Visually hidden helper */
+		&--hidden {
+			@include uilib-visually-hidden;
+		}
+
+		// /* Variant-specific configurations */
+		&--tripadvisor {
+			flex-direction: row;
+			gap: var(--uilib-spacing-600);
+		}
+
+		&--tripadvisor &__bar {
+			width: calc(var(--uilib-ratings-range-bar-tripadvisor-bar-width));
+
+			background: var(--uilib-ratings-range-bar-tripadvisor-bar-background);
+
+			&::before {
+				background-color: var(--uilib-ratings-range-bar-tripadvisor-bar-color);
+			}
+		}
+
+		&--tripadvisor &__content {
+			gap: var(--uilib-spacing-200);
+		}
+
+		&-group {
+			display: flex;
+			flex-direction: column;
+			gap: var(--uilib-spacing-300);
+
+			&:has(.uilib-ratings-range-bar--tripadvisor) {
+				gap: var(--uilib-spacing-100);
+			}
+		}
+
+		&__label {
+			display: inline-flex;
+			gap: var(--uilib-spacing-200);
+			align-items: center;
+
+			font-size: 0.875rem;
+		}
+
+		&__icon {
+			color: var(--uilib-ratings-range-bar-icon-color);
+		}
+
+		&__content {
+			display: flex;
+			gap: var(--uilib-spacing-300);
+			align-items: center;
+		}
+
+		&__bar {
+			width: var(--uilib-ratings-range-bar-bar-width);
+			height: 14px;
+
+			border-radius: var(--uilib-border-radius-100);
+
+			background: var(--uilib-ratings-range-bar-bar-background);
+
+			overflow: hidden;
+
+			&::before {
+				content: '';
+
+				display: block;
+
+				width: calc(var(--percentage) * 1%);
+				height: 100%;
+
+				background: var(--uilib-ratings-range-bar-bar-color);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,16 @@
+@use '../../../variables/env-variables' as *;
+@use '../../../variables/primitives' as *;
+@use 'sass:map';
+
+// Range icons rating specific variables to allow theming
+$uilib-ratings-range-bar-variables: (
+	bar-width: 11.5rem,
+	// 184px / 16
+	bar-color: var(--uilib-color-core-brand),
+	bar-background: var(--uilib-color-core-surface),
+	tripadvisor-bar-width: 6.5625rem,
+	// 105px / 16
+	tripadvisor-bar-color: var(--uilib-color-brand-trip-advisor),
+	tripadvisor-bar-background: var(--uilib-color-other-disabled-soft),
+	icon-color: var(--uilib-color-status-info-icon),
+) !default;

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

@@ -0,0 +1,3 @@
+// rating range icons / index
+@use 'mixins' as *;
+@include uilib-ratings-range-icons;

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

@@ -0,0 +1,200 @@
+@use '../../utility/mixins' as *;
+@use './variables' as *;
+@use 'sass:math';
+
+// Builds rating (range icons) with GAP IN SVG TILE
+@mixin uilib-ratings-range-icons() {
+	/* Score value modifiers */
+	@each $score-key, $score-value in $uilib-rating-scores {
+		@if $score-key <= 5 {
+			.uilib-ratings-range-icons--star,
+			.uilib-ratings-range-icons--sun,
+			.uilib-ratings-range-icons--tripadvisor {
+				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
+					&::after {
+						inline-size: calc(var(--icon-size) * #{$score-key});
+					}
+				}
+			}
+		}
+
+		// For tui-t variant, only generate whole number scores (no decimals)
+		@if math.floor($score-key) == $score-key and $score-key <= 5 {
+			.uilib-ratings-range-icons--tui-t {
+				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
+					&::before {
+						inline-size: calc(var(--icon-size) * #{$score-key});
+					}
+				}
+			}
+		}
+
+		@if $score-key > 5 {
+			.uilib-ratings-range-icons--sun {
+				.uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
+					&::after {
+						inline-size: calc(var(--icon-size) * #{$score-key});
+					}
+				}
+			}
+		}
+	}
+
+	.uilib-ratings-range-icons {
+		/* Defaults (override per variant) */
+		--rating-max: 5; /* star count */
+		--icon-size: var(--uilib-icon-size-xsmall);
+		--tile-bg-icon: var(--uilib-ratings-range-icons-star-rating-icon);
+		--tile-bg-icon-checked: var(--uilib-ratings-range-icons-star-rating-icon-checked);
+
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+
+		/* Visually hidden helper */
+		&--hidden {
+			@include uilib-visually-hidden;
+		}
+
+		/* Size modifier */
+		&--large {
+			--icon-size: var(--uilib-icon-size-medium);
+			min-height: var(--icon-size);
+		}
+
+		/* Variant-specific configurations */
+		&--star {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-star-rating-icon);
+			--tile-bg-icon-checked: var(--uilib-ratings-range-icons-star-rating-icon-checked);
+			--rating-max: 5;
+		}
+
+		&--sun {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-sun-rating-icon);
+			--tile-bg-icon-checked: var(--uilib-ratings-range-icons-sun-rating-icon-checked);
+			--rating-max: 6;
+		}
+
+		&--tripadvisor {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-tripadvisor-rating-icon);
+			--tile-bg-icon-checked: var(--uilib-ratings-range-icons-tripadvisor-rating-icon-checked);
+			--rating-max: 5;
+		}
+
+		&--tui-t {
+			--tile-bg-icon: var(--uilib-ratings-range-icons-tui-t-rating-icon);
+			--rating-max: 5;
+			padding-left: 0;
+
+			.uilib-ratings-range-icons__score {
+				padding-left: 0;
+
+				&::before {
+					position: relative;
+					inset: auto;
+
+					block-size: var(--icon-size);
+
+					background-image: var(--uilib-ratings-range-icons-tui-t-rating-icon);
+					background-repeat: repeat-x;
+				}
+
+				&::after {
+					display: none;
+				}
+			}
+
+			.uilib-ratings-range-icons__caption {
+				margin-left: var(--uilib-spacing-050);
+			}
+
+			/* Plus label */
+			.uilib-ratings-range-icons__plus {
+				position: relative;
+
+				display: inline-flex;
+				align-items: center;
+
+				inline-size: auto;
+				margin: 0 var(--uilib-spacing-050) 0 var(--uilib-spacing-100);
+
+				color: var(--uilib-ratings-range-icons-tui-t-plus-color);
+				font-weight: var(--uilib-font-weight-bold);
+				font-size: 0.75rem;
+
+				background: none;
+			}
+
+			&.uilib-ratings-range-icons--inverse {
+				.uilib-ratings-range-icons__plus,
+				.uilib-ratings-range-icons__label {
+					color: var(--uilib-color-text-inverse);
+				}
+			}
+		}
+
+		&__details {
+			display: flex;
+			flex-wrap: wrap;
+			gap: var(--uilib-spacing-100);
+			align-items: baseline;
+		}
+
+		&__label {
+			margin-left: var(--uilib-spacing-050);
+		}
+
+		/* Score element styling */
+		&__score {
+			position: relative;
+
+			display: inline-flex;
+			align-items: center;
+
+			min-height: calc(var(--icon-size) * var(--uilib-line-height-body));
+
+			/* Space to the left for the mask strip if label/caption sits inline */
+			padding-left: calc(var(--icon-size) * var(--rating-max) + var(--uilib-spacing-100));
+
+			/* Base strip (::before) and filled overlay (::after) */
+			&::before,
+			&::after {
+				position: absolute;
+				inset-block: 0;
+				inset-inline-start: 0;
+				top: 0;
+				left: 0;
+				content: '';
+
+				width: calc(var(--icon-size) * var(--rating-max));
+				height: calc(var(--icon-size) * var(--uilib-line-height-body));
+
+				background-color: transparent;
+				background-image: var(--tile-bg-icon);
+				background-repeat: repeat-x;
+				background-position: left center;
+				background-size: var(--icon-size) 100%;
+			}
+
+			/* Filled row color — WIDTH set by score modifiers below */
+			&::after {
+				width: 0;
+
+				background-image: var(--tile-bg-icon-checked);
+			}
+		}
+
+		/* Leading image */
+		&__leading-image {
+			display: inline-block;
+
+			width: var(--uilib-icon-size-medium);
+			height: calc(var(--uilib-font-size-root) * var(--uilib-line-height-body));
+			margin-right: var(--uilib-spacing-100);
+
+			background-image: var(--uilib-ratings-range-icons-tripadvisor-logo);
+			background-repeat: no-repeat;
+			background-position: center;
+		}
+	}
+}

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

@@ -0,0 +1,31 @@
+@use '../../../variables/env-variables' as *;
+@use '../../../variables/primitives' as *;
+@use 'sass:map';
+
+// Range icons rating specific variables to allow theming
+$uilib-ratings-range-icons-variables: (
+	tripadvisor-logo: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-logo-small.svg'),
+	tripadvisor-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-unchecked.svg'),
+	tripadvisor-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-checked.svg'),
+	sun-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-unchecked.svg'),
+	sun-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-checked.svg'),
+	star-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-unchecked.svg'),
+	star-rating-icon-checked: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-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'),
+) !default;
+$uilib-rating-scores: (
+	0: '00',
+	0.5: '05',
+	1: '10',
+	1.5: '15',
+	2: '20',
+	2.5: '25',
+	3: '30',
+	3.5: '35',
+	4: '40',
+	4.5: '45',
+	5: '50',
+	5.5: '55',
+	6: '60',
+) !default;

package/scss/lib/ratings-reviews/range-icons-group/_index.scss

@@ -0,0 +1,3 @@
+// rating range icons group / index
+@use 'mixins' as *;
+@include uilib-ratings-range-icons-group;

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

@@ -0,0 +1,26 @@
+@use '../../utility/mixins' as *;
+
+@mixin uilib-ratings-range-icons-group() {
+	.uilib-ratings-range-icons-group {
+		display: flex;
+		flex-direction: column;
+		gap: var(--uilib-spacing-100);
+
+		max-width: max-content;
+
+		&__category {
+			@include uilib-text-truncate;
+		}
+
+		&__item {
+			display: flex;
+			gap: var(--uilib-spacing-600);
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		.uilib-ratings-range-icons {
+			margin: 0;
+		}
+	}
+}

package/scss/lib/richtext/_index.scss

@@ -0,0 +1,3 @@
+// rich text / index
+@use 'mixins' as *;
+@include uilib-richtext;

package/scss/lib/richtext/_mixins.scss

@@ -0,0 +1,136 @@
+// rich text / _mixins
+@use '../divider/mixins' as *;
+@use '../link/mixins' as *;
+@use '../list/mixins' as *;
+
+// Builds rich text
+@mixin uilib-richtext() {
+	.uilib-richtext {
+		color: var(--uilib-color-text-body);
+
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin: 0 0 var(--uilib-spacing-200);
+
+			color: var(--uilib-color-text-strong);
+		}
+
+		h2 {
+			font: var(--uilib-typography-heading-xxlarge);
+		}
+
+		h3 {
+			font: var(--uilib-typography-heading-xlarge);
+		}
+
+		h4 {
+			font: var(--uilib-typography-heading-large);
+		}
+
+		h5 {
+			font: var(--uilib-typography-heading-medium);
+		}
+
+		h6 {
+			font: var(--uilib-typography-heading-small);
+		}
+
+		p {
+			margin: 0 0 var(--uilib-spacing-400);
+
+			color: var(--uilib-color-text-body);
+			font: var(--uilib-typography-body-large);
+		}
+
+		*:not(hr) + h2,
+		*:not(hr) + h3,
+		*:not(hr) + h4,
+		*:not(hr) + h5,
+		*:not(hr) + h6 {
+			margin-top: var(--uilib-spacing-600);
+		}
+
+		hr {
+			margin: var(--uilib-spacing-200) 0;
+
+			@include uilib-divider-basic;
+		}
+
+		p + hr {
+			margin-top: calc(var(--uilib-spacing-200) * -1);
+		}
+
+		& > :last-child {
+			margin-bottom: 0;
+		}
+
+		a {
+			@include uilib-link-base;
+		}
+
+		ul,
+		ol {
+			@include uilib-list-base;
+		}
+
+		ol {
+			@include uilib-list-ordered;
+		}
+	}
+
+	.uilib-richtext--component {
+		h2 {
+			font: var(--uilib-typography-component-heading-xlarge);
+		}
+
+		h3 {
+			font: var(--uilib-typography-component-heading-large);
+		}
+
+		h4 {
+			font: var(--uilib-typography-component-heading-medium);
+		}
+
+		h5,
+		h6 {
+			font: var(--uilib-typography-component-heading-small);
+		}
+
+		p {
+			font: var(--uilib-typography-body-medium);
+		}
+	}
+
+	.uilib-richtext--inverse {
+		color: var(--uilib-color-text-inverse);
+
+		h2,
+		h3,
+		h4,
+		h5,
+		h6,
+		p {
+			color: var(--uilib-color-text-inverse);
+		}
+
+		hr {
+			@include uilib-divider-basic(true);
+		}
+
+		a {
+			@include uilib-link-inverse;
+		}
+
+		ul,
+		ol {
+			@include uilib-list-inverse;
+		}
+
+		ol {
+			@include uilib-list-ordered-inverse;
+		}
+	}
+}

package/scss/lib/scroller/_index.scss

@@ -0,0 +1,4 @@
+// scroller / index
+@use 'variables' as *;
+@use 'mixins' as *;
+@include uilib-scroller;