@tui/design-system 1.15.1-MR-359.0 → 1.16.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## v1.16.0
 
+### Added
+
+#### [Media block](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-media-block--docs)
+
+- Added Media block component for pairing a square media slot (image, logo, or pictogram) with a title and supporting description. Available in Medium
+  and Large sizes. Stacked is the base arrangement (mobile-first) and `uilib-media-block--inline` is the layout modifier; the block never reflows on
+  its own — a host switches the layout from its own container query.
+
 ### Updated
 
 #### [Article card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs)
@@ -31,11 +39,47 @@
   affecting `role="dialog"` ([nvaccess/nvda#8971](https://github.com/nvaccess/nvda/issues/8971)). Note the heading is no longer reachable via screen
   reader heading navigation. Applies to both `version="1"` and `version="2"`.
 
+#### [Reasons to book](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-reasons-to-book--docs)
+
+- Reason cards are now built from the Media Block component rather than the pattern's own markup.
+- The pictogram now sits in Media Block's media slot at 64px, replacing the pattern's own 72px pictogram.
+- Stacked is now the base card arrangement; the pattern switches its cards to Inline above 547px from its own container query, rather than starting
+  inline and stacking below that width.
+- The pre-Media-Block `uilib-reasons-to-book__reason` / `__pictogram` / `__text` classes still work unchanged for existing hand-written markup.
+
+Each reason card was previously marked up with the pattern's own classes:
+
+```html
+<div class="uilib-reasons-to-book__reason">
+	<img class="uilib-reasons-to-book__pictogram" src="/v3/pictograms/tui/chat.svg" width="72" height="72" alt="" aria-hidden="true" loading="lazy" />
+	<p class="uilib-reasons-to-book__text">24/7 support while you're away</p>
+</div>
+```
+
+Each reason card is now a Media Block:
+
+```html
+<div class="uilib-media-block">
+	<div class="uilib-media-block__media" aria-hidden="true">
+		<img src="/v3/pictograms/tui/chat.svg" width="64" height="64" alt="" loading="lazy" />
+	</div>
+	<div class="uilib-media-block__text">
+		<p class="uilib-media-block__title">24/7 support while you're away</p>
+	</div>
+</div>
+```
+
 #### [Timeline](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-timeline--docs)
 
 - Added a `condensed` variant (`uilib-timeline--condensed`) with smaller icons, tighter spacing and a continuous (solid) connecting line, for dense
   contexts such as flights in the basket holiday summary.
 
+### Fixed
+
+#### [Globals](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-update-history--docs)
+
+- Fix for `uilib-root` where background for body was also being applied to root.
+
 ## v1.15.0
 
 ### Updated

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tui/design-system",
-	"version": "1.15.1-MR-359.0",
+	"version": "1.16.0",
 	"description": "TUI Design System",
 	"author": "TUI Group",
 	"//dependencies": {

package/scss/lib/cards/card/_mixins.scss

@@ -61,8 +61,6 @@ $uilib-card-included: false !default;
 		&--link button {
 			position: static;
 
-			text-decoration: none;
-
 			&::after {
 				position: absolute;
 				inset: 0;
@@ -70,6 +68,10 @@ $uilib-card-included: false !default;
 			}
 		}
 
+		&--link :is(h1, h2, h3, h4, h5, h6) a {
+			text-decoration: none;
+		}
+
 		&--link:has(a:hover, button:hover) {
 			.uilib-card__icon-button::after {
 				background: var(--uilib-icon-button-primary-hover-bg-color);

package/scss/lib/patterns/reasons-to-book/_mixins.scss

@@ -80,9 +80,13 @@ $uilib-reasons-to-book-included: false !default;
 
 		// Media Block layer. The pattern now composes Media Block for its reason cards; these
 		// host-only rules add what Media Block does not set. Media Block owns its own gap, media
-		// size, typography, and inline-end padding, so nothing here overrides those.
+		// size, and typography, so nothing here overrides those.
 		// Base is the compact, stacked card (mobile-first): media centred above the text.
 		.uilib-media-block {
+			// Reason cards shrink to fit, so Media Block's inline-end padding would widen short cards
+			// and trip the carousel earlier than intended. Zero it via the block's own token.
+			--uilib-media-block-padding-inline-end-active: 0;
+
 			max-width: 10.5625rem; /* 169 — Figma compact card, media centred above the text */
 		}
 
@@ -94,7 +98,7 @@ $uilib-reasons-to-book-included: false !default;
 			@include uilib-media-block-inline;
 
 			.uilib-media-block {
-				max-width: 14.875rem; /* 238 — Figma inline card: 64 media + 12 gap + 142 text + 20 inline-end padding */
+				max-width: 14.875rem; /* 238 — Figma inline card: 64 media + 12 gap + 162 text (RTB zeroes the inline-end padding above) */
 			}
 
 			// Legacy markup: hand-written __reason cards go inline above the breakpoint.

package/scss/reset.scss

@@ -52,6 +52,8 @@ ol {
 body {
 	min-height: 100dvh;
 	margin: 0 auto;
+
+	background-color: var(--uilib-color-canvas-default);
 }
 
 /* Inheritable body baseline — body for pages, .uilib-root wrapper for MFEs.
@@ -63,7 +65,6 @@ body,
 	font: var(--uilib-typography-body-medium);
 	text-shadow: none;
 
-	background-color: var(--uilib-color-canvas-default);
 	text-rendering: optimizelegibility;
 }