@tui/design-system 1.3.0 → 1.5.0

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/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/mixins.scss

@@ -35,7 +35,9 @@
 @forward 'lib/media-button/mixins';
 @forward 'lib/pagination/mixins';
 @forward 'lib/price/mixins';
+@forward 'lib/price-box/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';
@@ -45,6 +47,7 @@
 @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';

package/scss/themes/crystalski/_colors.scss

@@ -21,10 +21,12 @@ $uilib-color-semantic-crystalski: (
 	status-danger-surface: map.get($uilib-crystalski-primitives, 'color-red-20'),
 	status-warning-surface: map.get($uilib-crystalski-primitives, 'color-yellow-20'),
 	status-info-surface: map.get($uilib-crystalski-primitives, 'color-purple-20'),
+	status-neutral-surface: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
 	status-success-icon: map.get($uilib-crystalski-primitives, 'color-green-80'),
 	status-danger-icon: map.get($uilib-crystalski-primitives, 'color-red-80'),
 	status-warning-icon: map.get($uilib-crystalski-primitives, 'color-yellow-80'),
 	status-info-icon: map.get($uilib-crystalski-primitives, 'color-purple-80'),
+	status-neutral-icon: map.get($uilib-crystalski-primitives, 'color-neutral-90'),
 	canvas-default: map.get($uilib-crystalski-primitives, 'color-neutral-10'),
 	canvas-contrast: map.get($uilib-crystalski-primitives, 'color-neutral-20'),
 	canvas-footer: map.get($uilib-crystalski-primitives, 'color-neutral-90'),

package/scss/themes/crystalski/_overrides.scss

@@ -360,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

@@ -185,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);
 

package/scss/themes/crystalski/theme.json

@@ -61,6 +61,9 @@
 				"color-status-info-surface": {
 					"primitive": "color-purple-20"
 				},
+				"color-status-neutral-surface": {
+					"primitive": "color-neutral-20"
+				},
 				"color-status-success-icon": {
 					"primitive": "color-green-80",
 					"darkColor": false,
@@ -74,6 +77,9 @@
 				},
 				"color-status-info-icon": {
 					"primitive": "color-purple-80"
+				},
+				"color-status-neutral-icon": {
+					"primitive": "color-neutral-90"
 				}
 			}
 		},

package/scss/themes/firstchoice/_colors.scss

@@ -22,10 +22,12 @@ $uilib-color-semantic-firstchoice: (
 	status-danger-surface: map.get($uilib-firstchoice-primitives, 'color-red-20'),
 	status-warning-surface: map.get($uilib-firstchoice-primitives, 'color-orange-20'),
 	status-info-surface: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
+	status-neutral-surface: map.get($uilib-firstchoice-primitives, 'color-neutral-20'),
 	status-success-icon: map.get($uilib-firstchoice-primitives, 'color-greenmoss-70'),
 	status-danger-icon: map.get($uilib-firstchoice-primitives, 'color-red-80'),
 	status-warning-icon: map.get($uilib-firstchoice-primitives, 'color-orange-60'),
 	status-info-icon: map.get($uilib-firstchoice-primitives, 'color-greenpalm-100'),
+	status-neutral-icon: map.get($uilib-firstchoice-primitives, 'color-neutral-90'),
 	canvas-default: map.get($uilib-firstchoice-primitives, 'color-neutral-10'),
 	canvas-contrast: map.get($uilib-firstchoice-primitives, 'color-sand-30'),
 	border-interaction: map.get($uilib-firstchoice-primitives, 'color-pink-70'),

package/scss/themes/firstchoice/_overrides.scss

@@ -443,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

@@ -185,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);
 

package/scss/themes/firstchoice/theme.json

@@ -66,6 +66,9 @@
 				"color-status-info-surface": {
 					"primitive": "color-sand-30"
 				},
+				"color-status-neutral-surface": {
+					"primitive": "color-neutral-20"
+				},
 				"color-status-success-icon": {
 					"primitive": "color-greenmoss-70",
 					"lowContrast": false
@@ -79,6 +82,9 @@
 				},
 				"color-status-info-icon": {
 					"primitive": "color-greenpalm-100"
+				},
+				"color-status-neutral-icon": {
+					"primitive": "color-neutral-90"
 				}
 			}
 		},

package/scss/themes/tui/index.scss

@@ -185,6 +185,9 @@
 	// Skeleton
 	@include util.uilib-build-css-vars('skeleton', $uilib-skeleton-variables);
 
+	// Social proofing
+	@include util.uilib-build-css-vars('social-proofing', $uilib-social-proofing-variables);
+
 	// Tabs - in-page
 	@include util.uilib-build-css-vars('tabs-in-page', $uilib-tabs-in-page-variables);
 

package/scss/variables/_colors.scss

@@ -22,10 +22,12 @@ $uilib-color-semantic: (
 	status-danger-surface: map.get($uilib-primitives, 'color-red-20'),
 	status-warning-surface: map.get($uilib-primitives, 'color-orange-20'),
 	status-info-surface: map.get($uilib-primitives, 'color-blue-20'),
+	status-neutral-surface: map.get($uilib-primitives, 'color-neutral-20'),
 	status-success-icon: map.get($uilib-primitives, 'color-green-80'),
 	status-danger-icon: map.get($uilib-primitives, 'color-red-80'),
 	status-warning-icon: map.get($uilib-primitives, 'color-orange-80'),
 	status-info-icon: map.get($uilib-primitives, 'color-blue-100'),
+	status-neutral-icon: map.get($uilib-primitives, 'color-neutral-90'),
 	canvas-default: map.get($uilib-primitives, 'color-neutral-10'),
 	canvas-contrast: map.get($uilib-primitives, 'color-neutral-20'),
 	border-interaction: map.get($uilib-primitives, 'color-blue-70'),

package/scss/variables/base-theme.json

@@ -89,6 +89,10 @@
 					"primitive": "color-blue-20",
 					"title": "Status info surface"
 				},
+				"color-status-neutral-surface": {
+					"primitive": "color-neutral-20",
+					"title": "Status neutral surface"
+				},
 				"color-status-success-icon": {
 					"primitive": "color-green-80",
 					"title": "Status sucess icon",
@@ -108,6 +112,11 @@
 					"primitive": "color-blue-100",
 					"title": "Status info icon",
 					"darkColor": true
+				},
+				"color-status-neutral-icon": {
+					"primitive": "color-neutral-90",
+					"title": "Status neutral icon",
+					"darkColor": true
 				}
 			}
 		},
@@ -2042,14 +2051,14 @@
 				"displayType": "color"
 			},
 			"price-primary-font": {
-				"primitive": "uilib-font-family-lead",
+				"primitive": "uilib-typography-component-heading-medium",
 				"title": "Primary price font",
 				"description": "Primary price font",
 				"displayType": "font",
 				"longValue": true
 			},
 			"price-secondary-font": {
-				"primitive": "uilib-font-family-base",
+				"primitive": "uilib-typography-body-large",
 				"title": "Secondary price font",
 				"description": "Secondary price font",
 				"displayType": "font",
@@ -2061,23 +2070,30 @@
 				"description": "Discount colour",
 				"displayType": "color"
 			},
+			"price-main-small-font": {
+				"primitive": "uilib-typography-component-heading-medium-strong",
+				"title": "Main price unit for small variant",
+				"description": "Main price unit for small variant",
+				"displayType": "font",
+				"longValue": true
+			},
 			"price-main-medium-font": {
-				"primitive": "uilib-typography-component-heading-xlarge-strong",
-				"title": "Main price unit for Medium variant",
-				"description": "Main price unit for Medium variant",
+				"primitive": "uilib-typography-component-heading-large-strong",
+				"title": "Main price unit for medium variant",
+				"description": "Main price unit for medium variant",
 				"displayType": "font",
 				"longValue": true
 			},
 			"price-main-large-font": {
 				"primitive": "uilib-typography-component-heading-xxlarge-strong",
-				"title": "Main unit font for Medium variant",
-				"description": "Main unit font for Medium variant",
+				"title": "Main unit font for large variant",
+				"description": "Main unit font for large variant",
 				"displayType": "font"
 			},
 			"price-sub-large-font": {
 				"primitive": "uilib-typography-component-heading-medium-strong",
-				"title": "Sub unit font for Large variant",
-				"description": "Sub unit font for Large variant",
+				"title": "Sub unit font for large variant",
+				"description": "Sub unit font for large variant",
 				"displayType": "font",
 				"longValue": true
 			}
@@ -2373,6 +2389,26 @@
 			}
 		}
 	},
+	"social-proofing": {
+		"tokens": {
+			"social-proofing-radius": {
+				"primitive": "uilib-border-radius-300",
+				"title": "Social proofing container radius",
+				"description": "Social proofing container radius"
+			},
+			"social-proofing-close-icon": {
+				"displayType": "icon",
+				"title": "Close Icon ",
+				"description": "Social proofing close button icon",
+				"longValue": true
+			},
+			"social-proofing-box-shadow": {
+				"primitive": "uilib-elevation-100",
+				"title": "Social proofing Container box shadow",
+				"description": "Social proofing container box shadow"
+			}
+		}
+	},
 	"tabs-in-page": {
 		"tokens": {
 			"tabs-in-page-border-color": {

package/scss/variables.scss

@@ -63,6 +63,7 @@
 @forward 'lib/scroller/variables';
 @forward 'lib/show-more-less/variables';
 @forward 'lib/skeleton/variables';
+@forward 'lib/social-proofing/variables';
 @forward 'lib/tabs/in-page/variables';
 @forward 'lib/tabs/anchor/variables';
 @forward 'lib/tooltip/variables';