@tui/design-system 1.2.0 → 1.4.0

package/scss/lib/forms/input-radio-scroll/_variables.scss

@@ -0,0 +1,7 @@
+@use '../../../variables/env-variables' as *;
+
+// Input radio scroll specific variables to allow theming
+$uilib-input-radio-scroll-variables: (
+	previous-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-left.svg'),
+	next-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-right.svg'),
+) !default;

package/scss/lib/ratings-reviews/customer-review/_index.scss

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

package/scss/lib/ratings-reviews/customer-review/_mixins.scss

@@ -0,0 +1,152 @@
+// rating customer review / _mixins
+@use '../../utility/mixins' as *;
+@use '../../info-tag/mixins' as *;
+@use '../range-icons-group/mixins' as *;
+@use '../../show-more-less/mixins' as *;
+
+$uilib-ratings-customer-review-included: false !default;
+
+// Builds rating customer-review
+@mixin uilib-ratings-customer-review() {
+	@if not $uilib-ratings-customer-review-included {
+		$uilib-ratings-customer-review-included: true !global;
+
+		@include uilib-info-tag;
+		@include uilib-ratings-range-icons-group;
+		@include uilib-show-more-less;
+		@include uilib-ratings-customer-review-master;
+	}
+}
+
+@mixin uilib-ratings-customer-review-master() {
+	.uilib-ratings-customer-review {
+		container-name: uilib-ratings-customer-review;
+		container-type: inline-size;
+
+		display: grid;
+		grid-template-columns: 25% 1fr;
+		gap: 0 var(--uilib-spacing-400);
+
+		width: 100%;
+		margin: var(--uilib-spacing-400) 0;
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&__details {
+			grid-column: 1 / -1;
+
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-100) var(--uilib-spacing-200);
+			justify-content: flex-start;
+			align-items: center;
+
+			margin-bottom: var(--uilib-spacing-400);
+
+			&::after {
+				content: '';
+
+				order: 1;
+
+				display: inline-block;
+
+				height: 1em;
+
+				font: var(--uilib-typography-body-medium-strong);
+
+				border-right: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
+			}
+		}
+
+		&-standard-rating {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-heading-large);
+
+			&__value {
+				font: var(--uilib-typography-heading-xxlarge);
+			}
+		}
+
+		&__author {
+			font: var(--uilib-typography-body-medium-strong);
+		}
+
+		&__date {
+			order: 2;
+
+			font: var(--uilib-typography-body-medium);
+		}
+
+		&__tag {
+			grid-column: 1 / -1;
+
+			margin-bottom: var(--uilib-spacing-300);
+		}
+
+		&__heading {
+			grid-column: 1 / -1;
+
+			margin-bottom: var(--uilib-spacing-300);
+
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-heading-large);
+		}
+
+		&__content {
+			grid-column: 1 / -1;
+
+			.uilib-show-more-less {
+				margin: 0;
+
+				&[text-only] .uilib-ratings-range-icons-group:last-child {
+					display: flex;
+				}
+
+				&[text-only][is-open] .uilib-ratings-range-icons-group {
+					margin-bottom: var(--uilib-spacing-400);
+				}
+			}
+
+			p {
+				margin-bottom: var(--uilib-spacing-400);
+			}
+
+			.uilib-ratings-range-icons-group {
+				margin-top: var(--uilib-spacing-400);
+			}
+		}
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@container uilib-ratings-customer-review (min-width: 40rem) {
+		.uilib-ratings-customer-review {
+			&__details {
+				grid-row: 1 / span 99;
+				grid-column: 1;
+
+				flex-flow: column;
+				gap: 0;
+				justify-content: flex-start;
+				align-items: flex-start;
+
+				margin: 0;
+
+				&::after {
+					display: none;
+				}
+			}
+
+			&__rating {
+				margin-bottom: var(--uilib-spacing-200);
+			}
+
+			&__tag,
+			&__heading,
+			&__content {
+				grid-column: 2;
+			}
+		}
+	}
+}

package/scss/lib/scroller/_mixins.scss

@@ -49,10 +49,10 @@ $uilib-scroller-included: false !default;
 	}
 
 	.uilib-scroller {
-		$mask-vertical:
+		$uilib-scroller-mask-vertical:
 			linear-gradient(to bottom, #0000, #ffff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
 			linear-gradient(to right, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
-		$mask-horizontal:
+		$uilib-scroller-mask-horizontal:
 			linear-gradient(to right, #0000, #fff var(--uilib-scroller-start-fade) calc(100% - var(--uilib-scroller-end-fade)), #0000),
 			linear-gradient(to bottom, transparent 0% calc(100% - var(--uilib-scroller-bar-size)), #fff calc(100% - var(--uilib-scroller-bar-size)), #fff);
 
@@ -83,9 +83,10 @@ $uilib-scroller-included: false !default;
 			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
 			overflow-y: auto;
 
+			-webkit-mask: #{$uilib-scroller-mask-vertical};
+			mask: #{$uilib-scroller-mask-vertical};
+
 			animation: uilib-scrollfade;
-			-webkit-mask: #{$mask-vertical};
-			mask: #{$mask-vertical};
 			animation-timeline: --uilib-scrollfade;
 			scroll-timeline: --uilib-scrollfade y;
 
@@ -131,8 +132,8 @@ $uilib-scroller-included: false !default;
 			overflow-x: auto;
 			/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
 			overflow-y: hidden;
-			-webkit-mask: #{$mask-horizontal};
-			mask: #{$mask-horizontal};
+			-webkit-mask: #{$uilib-scroller-mask-horizontal};
+			mask: #{$uilib-scroller-mask-horizontal};
 
 			scroll-timeline: --uilib-scrollfade x;
 		}

package/scss/lib/show-more-less/_mixins.scss

@@ -20,86 +20,75 @@ $uilib-show-more-less-included: false !default;
 		display: block;
 
 		margin: var(--uilib-spacing-200) 0 var(--uilib-spacing-600);
-	}
 
-	.uilib-show-more-less__intro,
-	.uilib-show-more-less__content {
-		& > *:first-child {
-			margin-top: 0;
-		}
+		&__intro,
+		&__content {
+			& > *:first-child {
+				margin-top: 0;
+			}
 
-		& > *:last-child {
-			margin-bottom: 0;
+			& > *:last-child {
+				margin-bottom: 0;
+			}
 		}
-	}
 
-	.uilib-show-more-less[text-only] .uilib-show-more-less__content {
-		display: inline;
+		&:not([text-only]) {
+			.uilib-show-more-less__content {
+				margin-top: var(--uilib-spacing-400);
+				margin-bottom: 0;
+			}
 
-		margin-right: var(--uilib-spacing-100);
-
-		& > *:last-child {
-			display: inline;
-		}
-	}
+			&[is-hydrated] .uilib-show-more-less__content {
+				block-size: 0;
+				content-visibility: hidden;
 
-	.uilib-show-more-less:not([text-only]) .uilib-show-more-less__content {
-		margin-top: var(--uilib-spacing-400);
-		margin-bottom: var(--uilib-spacing-200);
-	}
+				margin-top: 0;
 
-	.uilib-show-more-less:not([text-only])[is-hydrated] .uilib-show-more-less__content {
-		block-size: 0;
-		content-visibility: hidden;
+				overflow: hidden;
 
-		margin-top: 0;
+				@media (prefers-reduced-motion: no-preference) {
+					transition:
+						block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
+						content-visibility var(--uilib-motion-duration-medium) allow-discrete,
+						margin-top var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				}
+			}
 
-		overflow: hidden;
+			&[is-open] .uilib-show-more-less__content {
+				block-size: auto;
+				content-visibility: visible;
 
-		@media (prefers-reduced-motion: no-preference) {
-			transition:
-				block-size var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out),
-				content-visibility var(--uilib-motion-duration-medium) allow-discrete,
-				margin-top var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+				margin-top: var(--uilib-spacing-400);
+			}
 		}
-	}
-
-	.uilib-show-more-less:not([text-only])[is-open] .uilib-show-more-less__content {
-		block-size: auto;
-		content-visibility: visible;
-
-		margin-top: var(--uilib-spacing-400);
-	}
-
-	.uilib-show-more-less__button {
-		margin-top: var(--uilib-spacing-200);
-	}
 
-	.uilib-show-more-less__icon {
-		-webkit-mask-image: var(--uilib-show-more-less-icon);
-		mask-image: var(--uilib-show-more-less-icon);
+		&__icon {
+			-webkit-mask-image: var(--uilib-show-more-less-icon);
+			mask-image: var(--uilib-show-more-less-icon);
 
-		transform: rotate(0deg);
+			transform: rotate(0deg);
 
-		@media (prefers-reduced-motion: no-preference) {
-			transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			@media (prefers-reduced-motion: no-preference) {
+				transition: transform var(--uilib-motion-duration-medium) var(--uilib-motion-timing-out);
+			}
 		}
-	}
-
-	.uilib-show-more-less[is-open] .uilib-show-more-less__icon {
-		transform: rotate(180deg);
-	}
 
-	.uilib-show-more-less[text-only] .uilib-show-more-less__icon {
-		display: none;
-	}
+		&[is-open] .uilib-show-more-less__icon {
+			transform: rotate(180deg);
+		}
 
-	.uilib-show-more-less--inverse {
-		color: var(--uilib-color-text-inverse);
+		&__button {
+			margin-top: var(--uilib-spacing-200);
+		}
 
-		.uilib-show-more-less__button {
+		/* stylelint-disable-next-line order/order */
+		&--inverse {
 			color: var(--uilib-color-text-inverse);
-			text-decoration-color: var(--uilib-color-text-inverse);
+
+			.uilib-show-more-less__button {
+				color: var(--uilib-color-text-inverse);
+				text-decoration-color: var(--uilib-color-text-inverse);
+			}
 		}
 	}
 }

package/scss/lib/social-proofing/_index.scss

@@ -0,0 +1,3 @@
+// social proofing / index
+@use 'mixins' as *;
+@include uilib-social-proofing;

package/scss/lib/social-proofing/_mixins.scss

@@ -0,0 +1,67 @@
+@use './variables' as *;
+@use '../icon/mixins' as *;
+@use '../icon-button/mixins' as *;
+
+$uilib-social-proofing-included: false !default;
+
+// Builds social proofing
+@mixin uilib-social-proofing() {
+	@if not $uilib-social-proofing-included {
+		$uilib-social-proofing-included: true !global;
+
+		@include uilib-icon;
+		@include uilib-icon-button;
+		@include uilib-social-proofing-master;
+	}
+}
+
+@mixin uilib-social-proofing-master() {
+	.uilib-social-proofing {
+		position: relative;
+
+		display: inline-flex;
+		gap: var(--uilib-spacing-200);
+		align-items: center;
+
+		margin: var(--uilib-spacing-400) 0;
+		padding: var(--uilib-spacing-300) var(--uilib-spacing-1000) var(--uilib-spacing-300) var(--uilib-spacing-300);
+
+		color: var(--uilib-color-text-strong);
+		font: var(--uilib-typography-label-small);
+
+		border-radius: var(--uilib-social-proofing-radius);
+
+		background: var(--uilib-color-core-neutral);
+
+		box-shadow: var(--uilib-social-proofing-box-shadow);
+
+		&--hidden {
+			display: none;
+		}
+
+		&[nojs] {
+			padding-right: var(--uilib-spacing-300);
+		}
+
+		&__icon {
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+
+		&__button {
+			position: absolute;
+			right: var(--uilib-spacing-100);
+
+			&.uilib-icon-button:focus-visible {
+				position: absolute;
+			}
+		}
+
+		&__close-icon {
+			flex-grow: 0;
+			flex-shrink: 0;
+			-webkit-mask-image: var(--uilib-social-proofing-close-icon);
+			mask-image: var(--uilib-social-proofing-close-icon);
+		}
+	}
+}

package/scss/lib/social-proofing/_variables.scss

@@ -0,0 +1,8 @@
+@use '../../variables/env-variables' as *;
+
+// Social proofing specific variables to allow theming
+$uilib-social-proofing-variables: (
+	radius: var(--uilib-border-radius-300),
+	close-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/cross.svg'),
+	box-shadow: var(--uilib-elevation-100),
+) !default;

package/scss/lib/tabs/_mixins.scss

@@ -48,7 +48,7 @@
 
 		&__scroll-wrapper,
 		& > &__tablist {
-			border-bottom: var(--uilib-stroke-size-025) solid var(--#{$prefix}-border-color);
+			border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--#{$prefix}-border-color);
 		}
 
 		&__scroll-button.uilib-icon-button {
@@ -116,7 +116,7 @@
 
 				width: 100%;
 
-				border-bottom: 0.1875rem solid var(--#{$prefix}-active-color);
+				border-bottom: var(--uilib-stroke-size-075) var(--uilib-stroke-style-solid) var(--#{$prefix}-active-color);
 			}
 
 			@include uilib-tab-base($prefix);

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

@@ -19,7 +19,7 @@ $uilib-tabs-anchor-included: false !default;
 @mixin uilib-tabs-anchor-nojs($prefix: 'uilib-tabs-anchor') {
 	display: flex;
 
-	border-bottom: var(--uilib-stroke-size-025) solid var(--#{$prefix}-border-color);
+	border-bottom: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--#{$prefix}-border-color);
 
 	[slot='link'] {
 		display: inline-flex;

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

@@ -0,0 +1,3 @@
+// travel aware banner / mixins
+@use 'mixins' as *;
+@include uilib-travel-aware-banner;

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

@@ -0,0 +1,58 @@
+// Travel Aware Banner / _mixins
+@use '../grid/mixins' as *;
+@use '../utility/mixins' as *;
+
+$uilib-travel-aware-banner-included: false !default;
+
+// Builds travel aware banner
+@mixin uilib-travel-aware-banner() {
+	@if not $uilib-travel-aware-banner-included {
+		$uilib-travel-aware-banner-included: true !global;
+
+		@include uilib-travel-aware-banner-master;
+	}
+}
+
+@mixin uilib-travel-aware-banner-master() {
+	.uilib-travel-aware-banner {
+		display: inline-flex;
+		gap: var(--uilib-spacing-400);
+		align-items: center;
+
+		width: 100%;
+		max-width: 100%;
+		padding: var(--uilib-spacing-400);
+
+		border-radius: var(--uilib-travel-aware-banner-radius);
+
+		background-color: var(--uilib-color-core-surface);
+
+		@include uilib-breakpoint(xs) {
+			width: auto;
+		}
+
+		&__heading {
+			color: var(--uilib-color-text-strong);
+			font: var(--uilib-typography-component-heading-medium);
+		}
+
+		&__content {
+			display: flex;
+
+			// calculate from 230px in figma
+			flex: 1 1 14.375rem;
+			flex-direction: column;
+			gap: var(--uilib-spacing-100);
+		}
+
+		&__logo {
+			flex-grow: 0;
+			flex-shrink: 0;
+
+			height: auto;
+
+			// set logo W=65.776px from figma design
+			max-width: 4.111rem;
+		}
+	}
+}

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';
@@ -35,6 +36,7 @@
 @forward 'lib/pagination/mixins';
 @forward 'lib/price/mixins';
 @forward 'lib/promo-tag/mixins';
+@forward 'lib/ratings-reviews/customer-review/mixins';
 @forward 'lib/ratings-reviews/numerical/mixins';
 @forward 'lib/ratings-reviews/percentage/mixins';
 @forward 'lib/ratings-reviews/range-bar/mixins';
@@ -44,8 +46,10 @@
 @forward 'lib/scroller/mixins';
 @forward 'lib/show-more-less/mixins';
 @forward 'lib/skeleton/mixins';
+@forward 'lib/social-proofing/mixins';
 @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,
@@ -351,3 +360,11 @@ $uilib-crystalski-skeleton-variables: map.merge(
 		shimmer-color: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
 	)
 );
+
+// Social proofing
+$uilib-crystalski-social-proofing-variables: map.merge(
+	$uilib-social-proofing-variables,
+	(
+		close-icon: url('#{$uilib-assets-base-url}v3/icons/crystalski/standard/cross.svg'),
+	)
+);

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);
 
@@ -182,6 +185,9 @@
 	// Skeleton
 	@include util.uilib-build-css-vars('skeleton', $uilib-crystalski-skeleton-variables);
 
+	// Social proofing
+	@include util.uilib-build-css-vars('social-proofing', $uilib-crystalski-social-proofing-variables);
+
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-crystalski-tabs-in-page-variables);
 
@@ -190,4 +196,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,
@@ -434,3 +443,11 @@ $uilib-firstchoice-skeleton-variables: map.merge(
 		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

@@ -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);
 
@@ -182,6 +185,9 @@
 	// Skeleton
 	@include util.uilib-build-css-vars('skeleton', $uilib-firstchoice-skeleton-variables);
 
+	// Social proofing
+	@include util.uilib-build-css-vars('social-proofing', $uilib-firstchoice-social-proofing-variables);
+
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-firstchoice-tabs-in-page-variables);
 
@@ -190,4 +196,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);
 }