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

package/scss/lib/cards/search/_mixins.scss

@@ -0,0 +1,432 @@
+// Search card / _mixins
+@use 'variables' as *;
+@use '../../utility/mixins' as *;
+
+// Builds search card
+@mixin uilib-card-search() {
+	.uilib-card-search {
+		// container for query
+		container-name: uilib-card-search;
+		container-type: inline-size;
+
+		position: relative;
+
+		border-radius: var(--uilib-card-search-radius);
+
+		background: var(--uilib-color-canvas-default);
+
+		box-shadow: var(--uilib-elevation-100);
+
+		&__image-content {
+			grid-area: uilib-card-search-image;
+
+			position: relative;
+
+			display: grid;
+			grid-template:
+				'uilib-card-search-tags' auto
+				'uilib-card-search-media' min-content;
+			gap: var(--uilib-spacing-200);
+
+			width: 100%;
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-search-radius-spacing));
+
+			aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
+
+			.uilib-card-search__product-label,
+			.uilib-card-search__brand {
+				grid-area: uilib-card-search-tags;
+
+				position: relative;
+				z-index: 1;
+
+				place-self: start start;
+			}
+
+			.uilib-card-search__brand {
+				width: 4rem; /* 64 / 16 */
+				height: calc(4rem + var(--uilib-spacing-100)); /* 64 / 16 */
+				margin-top: calc(var(--uilib-spacing-300) * -1);
+				margin-left: calc(var(--uilib-card-search-radius-spacing) - var(--uilib-spacing-200));
+				padding-top: var(--uilib-spacing-100);
+
+				border-radius: 0 0 var(--uilib-border-radius-100) var(--uilib-border-radius-100);
+
+				background: var(--uilib-card-search-color-flagship);
+
+				overflow: hidden;
+			}
+
+			tui-uilib-image {
+				display: contents;
+			}
+
+			.uilib-card-search__image {
+				position: absolute;
+				inset: 0 auto 0 50%;
+
+				min-width: 100%;
+
+				border-radius: var(--uilib-card-search-radius) var(--uilib-card-search-radius) 0 0;
+
+				transform: translateX(-50%);
+
+				overflow: hidden;
+			}
+		}
+
+		&__media-buttons {
+			grid-area: uilib-card-search-media;
+
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200);
+			justify-content: flex-end;
+
+			li {
+				flex-grow: 1;
+			}
+		}
+
+		li.uilib-card-search__quick-view {
+			flex-grow: 0;
+		}
+
+		&__content-container {
+			grid-area: uilib-card-search-content;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-card-search-radius-spacing) * -1);
+
+			border-radius: var(--uilib-card-search-radius);
+
+			box-shadow: var(--uilib-elevation-100);
+		}
+
+		&__main-content {
+			grid-area: uilib-card-search-content;
+
+			border-radius: var(--uilib-card-search-radius);
+
+			/* Adjust a white space to 8px */
+			.uilib-link:not(.uilib-tooltip__trigger) {
+				margin-left: calc(var(--uilib-spacing-200) - 1ex);
+			}
+		}
+
+		&__supplementary-container {
+			grid-area: uilib-card-search-supplementary;
+
+			position: relative;
+			z-index: 1;
+
+			margin-top: calc(var(--uilib-spacing-200) * -1);
+
+			border-radius: 0 0 var(--uilib-card-search-radius) var(--uilib-card-search-radius);
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-card-search (min-width: 35rem) {
+			&__inner {
+				display: grid;
+				grid-template:
+					'uilib-card-search-image uilib-card-search-content' 1fr
+					'uilib-card-search-supplementary uilib-card-search-content' minmax(0, min-content) / 45% 55%;
+				align-content: start;
+				align-items: stretch;
+			}
+
+			&__image-content {
+				min-height: auto;
+				padding: var(--uilib-spacing-200) calc(var(--uilib-spacing-200) + var(--uilib-card-search-radius-spacing)) var(--uilib-spacing-200)
+					var(--uilib-spacing-200);
+
+				transform: none;
+
+				aspect-ratio: auto;
+
+				.uilib-card-search__image {
+					min-height: 100%;
+
+					border-radius: var(--uilib-card-search-radius) 0 0 var(--uilib-card-search-radius);
+				}
+
+				&:has(~ .uilib-card-search__content-container .uilib-card-search__supplementary-container) .uilib-card-search__image {
+					border-bottom-left-radius: 0;
+				}
+			}
+
+			&__content-container {
+				display: contents;
+			}
+
+			&__main-content {
+				position: relative;
+				z-index: 1;
+
+				display: flex;
+				flex-flow: column;
+
+				margin-top: 0;
+				margin-left: calc(var(--uilib-card-search-radius-spacing) * -1);
+
+				box-shadow: var(--uilib-elevation-100);
+			}
+
+			&__supplementary-container {
+				position: static;
+				z-index: 0;
+
+				align-self: start;
+
+				margin-top: 0;
+				padding-right: calc(var(--uilib-spacing-200) + var(--uilib-card-search-radius-spacing));
+
+				border-radius: 0;
+				border-bottom-left-radius: var(--uilib-card-search-radius);
+			}
+		}
+
+		&-room-info {
+			container-name: uilib-card-search-room;
+			container-type: inline-size;
+
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-100);
+
+			@container uilib-card-search-room (min-width: 15rem) {
+				&__item {
+					display: flex;
+					flex-flow: row nowrap;
+					gap: 1ex;
+
+					white-space: nowrap;
+				}
+
+				&__detail {
+					text-overflow: ellipsis;
+
+					overflow: hidden;
+				}
+			}
+		}
+
+		&-unit-details {
+			display: flex;
+			flex-flow: column;
+			gap: var(--uilib-spacing-200);
+
+			&__heading {
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-component-heading-small);
+
+				&:has(~ .uilib-card-search-unit-details__shortlist) {
+					padding-right: var(--uilib-spacing-900);
+				}
+			}
+
+			&__shortlist.uilib-icon-button {
+				position: absolute;
+				top: var(--uilib-spacing-200);
+				right: var(--uilib-spacing-200);
+
+				&:focus-visible {
+					position: absolute;
+				}
+			}
+
+			&__rating-list {
+				display: flex;
+				flex-flow: row wrap;
+				gap: var(--uilib-spacing-100) var(--uilib-spacing-400);
+				align-items: center;
+
+				li {
+					display: inline-flex;
+				}
+			}
+		}
+
+		&-unit-specifications {
+			display: flex;
+			flex-flow: column;
+			flex-grow: 1;
+			gap: var(--uilib-spacing-200);
+
+			margin-top: var(--uilib-spacing-200);
+
+			& > *,
+			& > ul {
+				margin: 0;
+			}
+		}
+
+		/* stylelint-disable-next-line order/order */
+		@container uilib-card-search (min-width: 35rem) {
+			&-unit-specifications {
+				margin-top: var(--uilib-spacing-300);
+				padding-top: var(--uilib-spacing-300);
+
+				border-top: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-card);
+			}
+		}
+
+		&-unit-price {
+			display: flex;
+			flex-flow: row wrap;
+			gap: var(--uilib-spacing-200);
+			justify-content: flex-end;
+			align-items: start;
+
+			margin-top: var(--uilib-spacing-400);
+			padding-top: var(--uilib-spacing-400);
+
+			border-top: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-card);
+
+			&__price {
+				flex-grow: 1;
+			}
+
+			&__deposit {
+				width: 100%;
+
+				color: var(--uilib-color-text-strong);
+				font: var(--uilib-typography-label-small-strong);
+				text-align: right;
+			}
+		}
+
+		&__airline-logo {
+			display: inline-block;
+
+			height: 1rem;
+		}
+
+		&__visually-hidden {
+			@include uilib-visually-hidden;
+		}
+
+		&-flagship-wrapper {
+			container-name: uilib-card-search-wrapper;
+			container-type: inline-size;
+
+			padding-top: var(--uilib-spacing-300);
+
+			border-radius: var(--uilib-card-search-radius);
+
+			background: var(--uilib-card-search-color-flagship);
+
+			box-shadow: var(--uilib-elevation-100);
+
+			.uilib-card-search {
+				box-shadow: none;
+			}
+		}
+
+		&-highlights {
+			position: relative;
+
+			display: block;
+
+			padding: var(--uilib-spacing-200) var(--uilib-spacing-400);
+
+			color: var(--uilib-card-search-color-flagship-text);
+
+			&:defined {
+				padding-right: calc(var(--uilib-spacing-600) + 2.75rem); /* 8+4+44 / 16 */
+			}
+
+			&__list {
+				display: flex;
+				flex-flow: column;
+				gap: var(--uilib-spacing-200) var(--uilib-spacing-600);
+			}
+
+			&-item {
+				display: grid;
+				grid-template:
+					'icon title' 1fr
+					'icon description' auto
+					/ var(--uilib-icon-size-large) 1fr;
+				gap: 0 var(--uilib-spacing-200);
+				align-items: baseline;
+
+				&__icon {
+					grid-area: icon;
+				}
+
+				&__title {
+					grid-area: title;
+
+					align-self: center;
+
+					font: var(--uilib-typography-component-heading-small-strong);
+				}
+
+				&__description {
+					grid-area: description;
+
+					block-size: auto;
+
+					font: var(--uilib-typography-body-medium);
+
+					overflow: hidden;
+
+					@media (prefers-reduced-motion: no-preference) {
+						transition:
+							block-size var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out),
+							content-visibility var(--uilib-motion-duration-fast) allow-discrete;
+					}
+
+					&[aria-hidden='true'] {
+						block-size: 0;
+					}
+				}
+			}
+
+			&__button.uilib-icon-button {
+				position: absolute;
+				bottom: var(--uilib-spacing-200);
+				right: var(--uilib-spacing-200);
+
+				&:hover:not(:disabled, .uilib-icon-button--disabled) {
+					background: none;
+				}
+
+				&:focus-visible {
+					position: absolute;
+				}
+
+				&[aria-expanded='true'] .uilib-card-search-highlights__button-icon {
+					transform: rotate(180deg);
+				}
+			}
+
+			&__button-icon {
+				color: var(--uilib-card-search-color-flagship-text);
+				-webkit-mask-image: var(--uilib-card-search-highlights-icon);
+				mask-image: var(--uilib-card-search-highlights-icon);
+
+				@media (prefers-reduced-motion: no-preference) {
+					transition: transform var(--uilib-motion-duration-fast) var(--uilib-motion-timing-out);
+				}
+			}
+
+			/* stylelint-disable-next-line order/order */
+			@container uilib-card-search-wrapper (min-width: 35rem) {
+				&__list {
+					flex-flow: row nowrap;
+
+					padding-right: var(--uilib-spacing-400);
+				}
+
+				&__button.uilib-icon-button {
+					display: none;
+				}
+			}
+		}
+	}
+}

package/scss/lib/cards/search/_variables.scss

@@ -0,0 +1,10 @@
+@use '../../../variables/env-variables' as *;
+
+// Search card specific variables to allow theming
+$uilib-card-search-variables: (
+	radius: var(--uilib-border-radius-400),
+	radius-spacing: var(--uilib-spacing-400),
+	color-flagship: var(--uilib-color-core-brand-strong),
+	color-flagship-text: var(--uilib-color-text-inverse),
+	highlights-icon: url('#{$uilib-assets-base-url}v3/icons/tui/standard/chevron-down.svg'),
+) !default;

package/scss/lib/divider/_index.scss

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

package/scss/lib/divider/_mixins.scss

@@ -0,0 +1,54 @@
+// divider / _mixins
+@use 'variables' as *;
+
+// Builds divider
+@mixin uilib-divider() {
+	.uilib-divider {
+		@include uilib-divider-basic;
+	}
+
+	.uilib-divider--vertical {
+		display: inline-flex;
+		flex-direction: column;
+
+		border-top-width: 0;
+		border-right-width: var(--uilib-stroke-size-025);
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@each $weight, $class in $uilib-divider-weight-selectors-config {
+		#{$class} {
+			border-top-width: var(--#{$weight});
+		}
+
+		#{$class}.uilib-divider--vertical {
+			border-top-width: 0;
+			border-right-width: var(--#{$weight});
+		}
+	}
+
+	/* stylelint-disable-next-line order/order */
+	@each $color, $class in $uilib-divider-color-selectors-config {
+		#{$class} {
+			border-color: var(--#{$color});
+		}
+	}
+
+	.uilib-divider--dashed {
+		border-color: var(--uilib-color-border-dashed);
+		border-style: var(--uilib-stroke-style-dashed);
+	}
+}
+
+/* For internal use to support richText component */
+@mixin uilib-divider-basic($inverse: false) {
+	@if $inverse {
+		border-color: var(--uilib-color-border-inverse);
+	} @else {
+		margin: var(--uilib-spacing-200) 0;
+
+		border-color: var(--uilib-color-border-divider);
+		border-style: var(--uilib-stroke-style-solid);
+		border-top-width: var(--uilib-stroke-size-025);
+	}
+}

package/scss/lib/divider/_variables.scss

@@ -0,0 +1,17 @@
+@use 'sass:map';
+
+/* Weight selectors */
+$uilib-divider-weight-selectors-default: (
+	'uilib-stroke-size-050': '.uilib-divider--medium',
+	'uilib-stroke-size-075': '.uilib-divider--heavy',
+);
+$uilib-divider-weight-selectors-custom: () !default;
+$uilib-divider-weight-selectors-config: map.merge($uilib-divider-weight-selectors-default, $uilib-divider-weight-selectors-custom);
+
+/* Colour selectors */
+$uilib-divider-color-selectors-default: (
+	'uilib-color-border-brand-strong': '.uilib-divider--color-strong',
+	'uilib-color-border-inverse': '.uilib-divider--color-inverse',
+);
+$uilib-divider-color-selectors-custom: () !default;
+$uilib-divider-color-selectors-config: map.merge($uilib-divider-color-selectors-default, $uilib-divider-color-selectors-custom);

package/scss/lib/flight-details/_index.scss

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