@tui/design-system 1.9.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +41 -0
- package/dist/themes/crystalski/index.css +13 -13
- package/dist/themes/firstchoice/index.css +13 -13
- package/dist/themes/tui/index.css +9 -9
- package/package.json +7 -2
- package/scss/lib/cards/selectable/_mixins.scss +34 -11
- package/scss/lib/forms/input-checkbox/_mixins.scss +6 -7
- package/scss/lib/forms/input-radio/_mixins.scss +6 -7
- package/scss/lib/forms/input-select/_mixins.scss +21 -2
- package/scss/lib/grid/_column.scss +21 -0
- package/scss/lib/grid/_mixins.scss +89 -0
- package/scss/lib/info-tag/_mixins.scss +2 -0
- package/scss/lib/patterns/reasons-to-book/_index.scss +3 -0
- package/scss/lib/patterns/reasons-to-book/_mixins.scss +86 -0
- package/scss/lib/patterns/reasons-to-book/_variables.scss +3 -0
- package/scss/mixins.scss +1 -0
- package/scss/variables.scss +1 -0
- package/types/components.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## v1.10.0
|
|
4
|
+
|
|
5
|
+
### Added
|
|
6
|
+
|
|
7
|
+
#### [Reasons to book](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/patterns-reasons-to-book--docs)
|
|
8
|
+
|
|
9
|
+
- Added the Reasons to book pattern — a promo strip that displays trust and value propositions (e.g. 24/7 support, ABTA/ATOL protection, no hidden
|
|
10
|
+
fees) as a horizontally scrollable carousel. Reason cards keep their natural width and only trigger the Carousel's scroll controls once they
|
|
11
|
+
overflow the available width, and switch to a compact, centred layout at narrow widths.
|
|
12
|
+
|
|
13
|
+
### Updated
|
|
14
|
+
|
|
15
|
+
#### [Grid](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-grid--docs)
|
|
16
|
+
|
|
17
|
+
- Added column divider mixins and utility classes (`divider-left`, `divider-top`) that use pseudo-elements to render decorative lines in the grid
|
|
18
|
+
gutter. Both directions can be applied simultaneously and support responsive breakpoint variants with `divider-none` to remove them when layouts
|
|
19
|
+
reflow.
|
|
20
|
+
|
|
21
|
+
#### [Input checkbox](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-checkbox--docs) and [Input radio](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio--docs)
|
|
22
|
+
|
|
23
|
+
- Label interactive area now matches the width of its content rather than expanding to fill the container.
|
|
24
|
+
- Added pointer cursor on hover for the label.
|
|
25
|
+
|
|
26
|
+
#### [Selectable card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
|
|
27
|
+
|
|
28
|
+
- The info tag can now be shown independently of the image – previously it only appeared automatically alongside an image, with no way to include one
|
|
29
|
+
without the other.
|
|
30
|
+
|
|
31
|
+
### Fixed
|
|
32
|
+
|
|
33
|
+
#### [Carousel](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-carousel--docs)
|
|
34
|
+
|
|
35
|
+
- Fixed the carousel container's role from `region` to `group`, matching the design's accessibility annotation — a carousel is supplementary content,
|
|
36
|
+
not a significant enough page section to be a landmark.
|
|
37
|
+
- Fixed a screen reader issue where NVDA announced "blank" after the last slide; the scroll viewport now gets `role="presentation"` once JavaScript
|
|
38
|
+
enhances the carousel.
|
|
39
|
+
|
|
40
|
+
#### [Input select](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-select--docs)
|
|
41
|
+
|
|
42
|
+
- Fix to make the whole visible area of the input select interactive. Prior to this fix, areas such as the icons were not interactive.
|
|
43
|
+
|
|
3
44
|
## v1.9.0
|
|
4
45
|
|
|
5
46
|
### Added
|
|
@@ -209,19 +209,19 @@
|
|
|
209
209
|
--uilib-button-radius: var(--uilib-border-radius-pill);
|
|
210
210
|
--uilib-button-primary-color: var(--uilib-color-text-inverse);
|
|
211
211
|
--uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
|
|
212
|
-
--uilib-button-primary-hover-bg-color: rgb(
|
|
212
|
+
--uilib-button-primary-hover-bg-color: rgb(61.4117647059%, 35.6862745098%, 68.6274509804%);
|
|
213
213
|
--uilib-button-secondary-color: var(--uilib-color-core-interaction);
|
|
214
214
|
--uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
215
|
-
--uilib-button-secondary-hover-bg-color: rgb(
|
|
215
|
+
--uilib-button-secondary-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
|
|
216
216
|
--uilib-button-tertiary-color: var(--uilib-color-text-inverse);
|
|
217
217
|
--uilib-button-tertiary-bg-color: var(--uilib-color-core-brand-strong);
|
|
218
|
-
--uilib-button-tertiary-hover-bg-color: rgb(
|
|
218
|
+
--uilib-button-tertiary-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
|
|
219
219
|
--uilib-button-promotion-color: var(--uilib-color-text-inverse);
|
|
220
220
|
--uilib-button-promotion-bg-color: var(--uilib-color-promotion);
|
|
221
|
-
--uilib-button-promotion-hover-bg-color: rgb(
|
|
221
|
+
--uilib-button-promotion-hover-bg-color: rgb(80.2352941176%, 20.6274509804%, 39.4509803922%);
|
|
222
222
|
--uilib-button-search-color: var(--uilib-color-text-inverse);
|
|
223
223
|
--uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
|
|
224
|
-
--uilib-button-search-hover-bg-color: rgb(
|
|
224
|
+
--uilib-button-search-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
|
|
225
225
|
--uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
226
226
|
--uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
227
227
|
--uilib-card-radius: var(--uilib-border-radius-400);
|
|
@@ -274,7 +274,7 @@
|
|
|
274
274
|
--uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
|
|
275
275
|
--uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
|
|
276
276
|
--uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
|
|
277
|
-
--uilib-input-chip-active-hover-bg-color: rgb(
|
|
277
|
+
--uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
|
|
278
278
|
--uilib-input-chip-box-shadow: var(--uilib-elevation-200);
|
|
279
279
|
--uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
|
|
280
280
|
--uilib-input-count-radius: var(--uilib-border-radius-100);
|
|
@@ -348,25 +348,25 @@
|
|
|
348
348
|
--uilib-icon-button-radius: var(--uilib-border-radius-pill);
|
|
349
349
|
--uilib-icon-button-ghost-color: var(--uilib-color-core-interaction);
|
|
350
350
|
--uilib-icon-button-ghost-bg-color: transparent;
|
|
351
|
-
--uilib-icon-button-ghost-hover-bg-color: rgb(
|
|
351
|
+
--uilib-icon-button-ghost-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
|
|
352
352
|
--uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
|
|
353
353
|
--uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
|
|
354
|
-
--uilib-icon-button-primary-hover-bg-color: rgb(
|
|
354
|
+
--uilib-icon-button-primary-hover-bg-color: rgb(61.4117647059%, 35.6862745098%, 68.6274509804%);
|
|
355
355
|
--uilib-icon-button-secondary-color: var(--uilib-color-core-interaction);
|
|
356
356
|
--uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
357
|
-
--uilib-icon-button-secondary-hover-bg-color: rgb(
|
|
357
|
+
--uilib-icon-button-secondary-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
|
|
358
358
|
--uilib-icon-button-control-color: var(--uilib-color-core-interaction);
|
|
359
359
|
--uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
|
|
360
|
-
--uilib-icon-button-control-hover-bg-color: rgb(
|
|
360
|
+
--uilib-icon-button-control-hover-bg-color: rgb(90.3529411765%, 83.9215686275%, 92.1568627451%);
|
|
361
361
|
--uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
|
|
362
362
|
--uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion);
|
|
363
|
-
--uilib-icon-button-promotion-hover-bg-color: rgb(
|
|
363
|
+
--uilib-icon-button-promotion-hover-bg-color: rgb(80.2352941176%, 20.6274509804%, 39.4509803922%);
|
|
364
364
|
--uilib-icon-button-search-color: var(--uilib-color-text-inverse);
|
|
365
365
|
--uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
|
|
366
|
-
--uilib-icon-button-search-hover-bg-color: rgb(
|
|
366
|
+
--uilib-icon-button-search-hover-bg-color: rgb(28.7843137255%, 54.8235294118%, 55.4509803922%);
|
|
367
367
|
--uilib-icon-button-shortlist-color: var(--uilib-color-text-promotion);
|
|
368
368
|
--uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
|
|
369
|
-
--uilib-icon-button-shortlist-hover-bg-color: rgb(
|
|
369
|
+
--uilib-icon-button-shortlist-hover-bg-color: rgb(97.5294117647%, 90.0784313725%, 92.431372549%);
|
|
370
370
|
--uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
371
371
|
--uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
372
372
|
--uilib-icon-button-size-small: 2rem;
|
|
@@ -215,19 +215,19 @@
|
|
|
215
215
|
--uilib-button-radius: var(--uilib-border-radius-200);
|
|
216
216
|
--uilib-button-primary-color: var(--uilib-color-text-inverse);
|
|
217
217
|
--uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
|
|
218
|
-
--uilib-button-primary-hover-bg-color: rgb(
|
|
218
|
+
--uilib-button-primary-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
|
|
219
219
|
--uilib-button-secondary-color: var(--uilib-color-text-strong);
|
|
220
220
|
--uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
221
|
-
--uilib-button-secondary-hover-bg-color: rgb(
|
|
221
|
+
--uilib-button-secondary-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
|
|
222
222
|
--uilib-button-tertiary-color: var(--uilib-color-text-inverse);
|
|
223
223
|
--uilib-button-tertiary-bg-color: var(--uilib-color-core-brand-strong);
|
|
224
|
-
--uilib-button-tertiary-hover-bg-color: rgb(
|
|
224
|
+
--uilib-button-tertiary-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
|
|
225
225
|
--uilib-button-promotion-color: var(--uilib-color-text-inverse);
|
|
226
226
|
--uilib-button-promotion-bg-color: var(--uilib-color-core-interaction);
|
|
227
|
-
--uilib-button-promotion-hover-bg-color: rgb(
|
|
227
|
+
--uilib-button-promotion-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
|
|
228
228
|
--uilib-button-search-color: var(--uilib-color-text-inverse);
|
|
229
229
|
--uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
|
|
230
|
-
--uilib-button-search-hover-bg-color: rgb(
|
|
230
|
+
--uilib-button-search-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
|
|
231
231
|
--uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
232
232
|
--uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
233
233
|
--uilib-card-radius: var(--uilib-border-radius-200);
|
|
@@ -281,7 +281,7 @@
|
|
|
281
281
|
--uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
|
|
282
282
|
--uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
|
|
283
283
|
--uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
|
|
284
|
-
--uilib-input-chip-active-hover-bg-color: rgb(
|
|
284
|
+
--uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
|
|
285
285
|
--uilib-input-chip-box-shadow: var(--uilib-elevation-200);
|
|
286
286
|
--uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
|
|
287
287
|
--uilib-input-count-radius: var(--uilib-border-radius-100);
|
|
@@ -355,25 +355,25 @@
|
|
|
355
355
|
--uilib-icon-button-radius: var(--uilib-border-radius-200);
|
|
356
356
|
--uilib-icon-button-ghost-color: var(--uilib-color-text-strong);
|
|
357
357
|
--uilib-icon-button-ghost-bg-color: transparent;
|
|
358
|
-
--uilib-icon-button-ghost-hover-bg-color: rgb(
|
|
358
|
+
--uilib-icon-button-ghost-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
|
|
359
359
|
--uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
|
|
360
360
|
--uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
|
|
361
|
-
--uilib-icon-button-primary-hover-bg-color: rgb(
|
|
361
|
+
--uilib-icon-button-primary-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
|
|
362
362
|
--uilib-icon-button-secondary-color: var(--uilib-color-text-strong);
|
|
363
363
|
--uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
364
|
-
--uilib-icon-button-secondary-hover-bg-color: rgb(
|
|
364
|
+
--uilib-icon-button-secondary-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
|
|
365
365
|
--uilib-icon-button-control-color: var(--uilib-color-text-strong);
|
|
366
366
|
--uilib-icon-button-control-bg-color: var(--uilib-color-core-neutral);
|
|
367
|
-
--uilib-icon-button-control-hover-bg-color: rgb(
|
|
367
|
+
--uilib-icon-button-control-hover-bg-color: rgb(80%, 83.6862745098%, 81.8039215686%);
|
|
368
368
|
--uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
|
|
369
369
|
--uilib-icon-button-promotion-bg-color: var(--uilib-color-core-interaction);
|
|
370
|
-
--uilib-icon-button-promotion-hover-bg-color: rgb(
|
|
370
|
+
--uilib-icon-button-promotion-hover-bg-color: rgb(87.137254902%, 29.0980392157%, 49.8039215686%);
|
|
371
371
|
--uilib-icon-button-search-color: var(--uilib-color-text-inverse);
|
|
372
372
|
--uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
|
|
373
|
-
--uilib-icon-button-search-hover-bg-color: rgb(
|
|
373
|
+
--uilib-icon-button-search-hover-bg-color: rgb(20%, 34.7450980392%, 27.2156862745%);
|
|
374
374
|
--uilib-icon-button-shortlist-color: var(--uilib-color-core-interaction);
|
|
375
375
|
--uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
|
|
376
|
-
--uilib-icon-button-shortlist-hover-bg-color: rgb(
|
|
376
|
+
--uilib-icon-button-shortlist-hover-bg-color: rgb(98.3921568627%, 91.137254902%, 93.7254901961%);
|
|
377
377
|
--uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
378
378
|
--uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
379
379
|
--uilib-icon-button-size-small: 2rem;
|
|
@@ -232,19 +232,19 @@
|
|
|
232
232
|
--uilib-button-radius: var(--uilib-border-radius-pill);
|
|
233
233
|
--uilib-button-primary-color: var(--uilib-color-text-inverse);
|
|
234
234
|
--uilib-button-primary-bg-color: var(--uilib-color-core-interaction);
|
|
235
|
-
--uilib-button-primary-hover-bg-color: rgb(
|
|
235
|
+
--uilib-button-primary-hover-bg-color: rgb(23.7647058824%, 43.5294117647%, 96.2352941176%);
|
|
236
236
|
--uilib-button-secondary-color: var(--uilib-color-core-interaction);
|
|
237
237
|
--uilib-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
238
238
|
--uilib-button-secondary-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
|
|
239
239
|
--uilib-button-tertiary-color: var(--uilib-color-text-strong);
|
|
240
240
|
--uilib-button-tertiary-bg-color: var(--uilib-color-core-brand);
|
|
241
|
-
--uilib-button-tertiary-hover-bg-color: rgb(
|
|
241
|
+
--uilib-button-tertiary-hover-bg-color: rgb(55.137254902%, 83.6862745098%, 96.5490196078%);
|
|
242
242
|
--uilib-button-promotion-color: var(--uilib-color-text-inverse);
|
|
243
243
|
--uilib-button-promotion-bg-color: var(--uilib-color-promotion);
|
|
244
|
-
--uilib-button-promotion-hover-bg-color: rgb(
|
|
244
|
+
--uilib-button-promotion-hover-bg-color: rgb(80.2352941176%, 23.7647058824%, 25.6470588235%);
|
|
245
245
|
--uilib-button-search-color: var(--uilib-color-text-inverse);
|
|
246
246
|
--uilib-button-search-bg-color: var(--uilib-color-core-brand-strong);
|
|
247
|
-
--uilib-button-search-hover-bg-color: rgb(
|
|
247
|
+
--uilib-button-search-hover-bg-color: rgb(28.4705882353%, 25.3333333333%, 48.862745098%);
|
|
248
248
|
--uilib-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
249
249
|
--uilib-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
250
250
|
--uilib-card-radius: var(--uilib-border-radius-400);
|
|
@@ -297,7 +297,7 @@
|
|
|
297
297
|
--uilib-input-chip-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
|
|
298
298
|
--uilib-input-chip-active-bg-color: var(--uilib-color-other-active-state-tint);
|
|
299
299
|
--uilib-input-chip-active-border-color: var(--uilib-color-core-interaction);
|
|
300
|
-
--uilib-input-chip-active-hover-bg-color: rgb(
|
|
300
|
+
--uilib-input-chip-active-hover-bg-color: rgb(80.9411764706%, 85.8823529412%, 99.0588235294%);
|
|
301
301
|
--uilib-input-chip-box-shadow: var(--uilib-elevation-200);
|
|
302
302
|
--uilib-input-chip-disabled-bg-color: var(--uilib-color-core-neutral);
|
|
303
303
|
--uilib-input-count-radius: var(--uilib-border-radius-100);
|
|
@@ -358,7 +358,7 @@
|
|
|
358
358
|
--uilib-icon-button-ghost-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
|
|
359
359
|
--uilib-icon-button-primary-color: var(--uilib-color-text-inverse);
|
|
360
360
|
--uilib-icon-button-primary-bg-color: var(--uilib-color-core-interaction);
|
|
361
|
-
--uilib-icon-button-primary-hover-bg-color: rgb(
|
|
361
|
+
--uilib-icon-button-primary-hover-bg-color: rgb(23.7647058824%, 43.5294117647%, 96.2352941176%);
|
|
362
362
|
--uilib-icon-button-secondary-color: var(--uilib-color-core-interaction);
|
|
363
363
|
--uilib-icon-button-secondary-bg-color: var(--uilib-color-core-neutral);
|
|
364
364
|
--uilib-icon-button-secondary-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
|
|
@@ -367,13 +367,13 @@
|
|
|
367
367
|
--uilib-icon-button-control-hover-bg-color: var(--uilib-color-other-secondary-button-hover-state);
|
|
368
368
|
--uilib-icon-button-promotion-color: var(--uilib-color-text-inverse);
|
|
369
369
|
--uilib-icon-button-promotion-bg-color: var(--uilib-color-promotion);
|
|
370
|
-
--uilib-icon-button-promotion-hover-bg-color: rgb(
|
|
370
|
+
--uilib-icon-button-promotion-hover-bg-color: rgb(80.2352941176%, 23.7647058824%, 25.6470588235%);
|
|
371
371
|
--uilib-icon-button-search-color: var(--uilib-color-text-inverse);
|
|
372
372
|
--uilib-icon-button-search-bg-color: var(--uilib-color-core-brand-strong);
|
|
373
|
-
--uilib-icon-button-search-hover-bg-color: rgb(
|
|
373
|
+
--uilib-icon-button-search-hover-bg-color: rgb(28.4705882353%, 25.3333333333%, 48.862745098%);
|
|
374
374
|
--uilib-icon-button-shortlist-color: var(--uilib-color-text-promotion);
|
|
375
375
|
--uilib-icon-button-shortlist-bg-color: var(--uilib-color-core-neutral);
|
|
376
|
-
--uilib-icon-button-shortlist-hover-bg-color: rgb(
|
|
376
|
+
--uilib-icon-button-shortlist-hover-bg-color: rgb(97.5294117647%, 90.4705882353%, 90.7058823529%);
|
|
377
377
|
--uilib-icon-button-disabled-color: var(--uilib-color-other-disabled-strong);
|
|
378
378
|
--uilib-icon-button-disabled-bg-color: var(--uilib-color-other-disabled-soft);
|
|
379
379
|
--uilib-icon-button-size-small: 2rem;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tui/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.10.0",
|
|
4
4
|
"description": "TUI Design System",
|
|
5
5
|
"author": "TUI Group",
|
|
6
6
|
"//dependencies": {
|
|
@@ -20,9 +20,14 @@
|
|
|
20
20
|
"build:primitives": "node cli/process-primitives.mjs",
|
|
21
21
|
"build:js": "node cli/process-webcomponent-ts.mjs",
|
|
22
22
|
"build:changelog": "node cli/change-log.mjs",
|
|
23
|
+
"build:component-data": "node --experimental-strip-types cli/mcp/generate-component-data.ts",
|
|
24
|
+
"build:component-examples": "node --experimental-strip-types cli/mcp/render-examples.ts",
|
|
25
|
+
"build:docs": "node --experimental-strip-types cli/mcp/generate-docs.ts",
|
|
26
|
+
"build:asset-catalog": "node --experimental-strip-types cli/mcp/generate-asset-catalog.ts",
|
|
27
|
+
"build:meta": "run-s build:component-data build:component-examples build:docs build:asset-catalog",
|
|
23
28
|
"dev": "dotenv -e .env.local npm run storybook:dev",
|
|
24
29
|
"storybook:dev": "run-s static:build build:primitives build:changelog set-scss-env storybook:serve",
|
|
25
|
-
"storybook:build": "run-s static:build build:primitives build:js build:changelog set-scss-env _storybook:build_prod",
|
|
30
|
+
"storybook:build": "run-s static:build build:primitives build:js build:changelog build:meta set-scss-env _storybook:build_prod",
|
|
26
31
|
"storybook:serve": "storybook dev -p 6006 -c storybook/.storybook",
|
|
27
32
|
"_storybook:build_prod": "storybook build -c storybook/.storybook",
|
|
28
33
|
"static:build": "node cli/static-assets.mjs",
|
|
@@ -145,6 +145,10 @@ $uilib-card-selectable-included: false !default;
|
|
|
145
145
|
.uilib-input-radio {
|
|
146
146
|
margin: 0 calc(var(--uilib-spacing-200) * -1) calc(var(--uilib-spacing-200) * -1);
|
|
147
147
|
}
|
|
148
|
+
|
|
149
|
+
.uilib-input-radio__label {
|
|
150
|
+
width: unset;
|
|
151
|
+
}
|
|
148
152
|
}
|
|
149
153
|
|
|
150
154
|
// ===================
|
|
@@ -255,30 +259,49 @@ $uilib-card-selectable-included: false !default;
|
|
|
255
259
|
position: relative;
|
|
256
260
|
|
|
257
261
|
display: grid;
|
|
258
|
-
grid-template:
|
|
259
|
-
'uilib-card-selectable-tags .' auto
|
|
260
|
-
'uilib-card-selectable-media uilib-card-selectable-media' min-content
|
|
261
|
-
/ 1fr var(--uilib-spacing-1000);
|
|
262
|
+
grid-template: 'uilib-card-selectable-tags .' 1fr / 1fr var(--uilib-spacing-1000);
|
|
262
263
|
gap: var(--uilib-spacing-200);
|
|
263
264
|
|
|
264
265
|
padding: var(--uilib-spacing-200);
|
|
265
266
|
|
|
266
267
|
aspect-ratio: var(--uilib-aspect-ratio-16x9-wide);
|
|
267
|
-
}
|
|
268
268
|
|
|
269
|
-
|
|
270
|
-
|
|
269
|
+
.uilib-card-selectable__tag.uilib-info-tag {
|
|
270
|
+
grid-area: uilib-card-selectable-tags;
|
|
271
271
|
|
|
272
|
-
|
|
272
|
+
position: relative;
|
|
273
|
+
z-index: 1;
|
|
274
|
+
|
|
275
|
+
place-self: start start;
|
|
276
|
+
|
|
277
|
+
max-width: 100%;
|
|
278
|
+
|
|
279
|
+
transform: translate(0, calc((var(--uilib-spacing-200) + 50%) * -1));
|
|
280
|
+
|
|
281
|
+
pointer-events: none;
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
|
|
285
|
+
& > &__tag.uilib-info-tag {
|
|
273
286
|
z-index: 1;
|
|
274
287
|
|
|
275
|
-
|
|
288
|
+
align-self: flex-start;
|
|
276
289
|
|
|
277
|
-
|
|
290
|
+
max-width: calc(100% - var(--uilib-spacing-1000) - var(--uilib-spacing-200) * 2);
|
|
291
|
+
margin: calc((var(--uilib-spacing-050) + 0.5rem) * -1) var(--uilib-spacing-200) calc((var(--uilib-spacing-050) + 0.5rem) * -1);
|
|
292
|
+
|
|
293
|
+
pointer-events: none;
|
|
278
294
|
}
|
|
279
295
|
|
|
280
296
|
&__media-button {
|
|
281
|
-
|
|
297
|
+
position: absolute;
|
|
298
|
+
left: var(--uilib-spacing-200);
|
|
299
|
+
bottom: var(--uilib-spacing-200);
|
|
300
|
+
z-index: 1;
|
|
301
|
+
|
|
302
|
+
&.uilib-button:focus-visible {
|
|
303
|
+
position: absolute;
|
|
304
|
+
}
|
|
282
305
|
}
|
|
283
306
|
|
|
284
307
|
&__image.uilib-image {
|
|
@@ -30,10 +30,13 @@ $uilib-input-checkbox-included: false !default;
|
|
|
30
30
|
gap: var(--uilib-spacing-300);
|
|
31
31
|
align-items: flex-start;
|
|
32
32
|
|
|
33
|
+
width: min(max-content, 100%);
|
|
33
34
|
padding: var(--uilib-spacing-300);
|
|
34
35
|
|
|
35
36
|
border-radius: var(--uilib-border-radius-100);
|
|
36
37
|
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
|
|
37
40
|
&::before,
|
|
38
41
|
&::after {
|
|
39
42
|
content: '';
|
|
@@ -51,7 +54,7 @@ $uilib-input-checkbox-included: false !default;
|
|
|
51
54
|
|
|
52
55
|
background: var(--uilib-color-core-neutral);
|
|
53
56
|
|
|
54
|
-
|
|
57
|
+
pointer-events: none;
|
|
55
58
|
|
|
56
59
|
@media (prefers-reduced-motion: no-preference) {
|
|
57
60
|
transition:
|
|
@@ -144,16 +147,12 @@ $uilib-input-checkbox-included: false !default;
|
|
|
144
147
|
}
|
|
145
148
|
|
|
146
149
|
&__input:disabled + .uilib-input-checkbox__label {
|
|
150
|
+
cursor: default;
|
|
151
|
+
|
|
147
152
|
&::before {
|
|
148
153
|
border-color: var(--uilib-color-other-disabled-soft);
|
|
149
154
|
|
|
150
155
|
background: var(--uilib-color-other-disabled-soft);
|
|
151
|
-
|
|
152
|
-
cursor: default;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
&::after {
|
|
156
|
-
cursor: default;
|
|
157
156
|
}
|
|
158
157
|
|
|
159
158
|
.uilib-input-checkbox__label-content {
|
|
@@ -30,10 +30,13 @@ $uilib-input-radio-included: false !default;
|
|
|
30
30
|
gap: var(--uilib-spacing-300);
|
|
31
31
|
align-items: flex-start;
|
|
32
32
|
|
|
33
|
+
width: min(max-content, 100%);
|
|
33
34
|
padding: var(--uilib-spacing-300);
|
|
34
35
|
|
|
35
36
|
border-radius: var(--uilib-border-radius-100);
|
|
36
37
|
|
|
38
|
+
cursor: pointer;
|
|
39
|
+
|
|
37
40
|
&::before,
|
|
38
41
|
&::after {
|
|
39
42
|
content: '';
|
|
@@ -51,7 +54,7 @@ $uilib-input-radio-included: false !default;
|
|
|
51
54
|
|
|
52
55
|
background: var(--uilib-color-core-neutral);
|
|
53
56
|
|
|
54
|
-
|
|
57
|
+
pointer-events: none;
|
|
55
58
|
|
|
56
59
|
@media (prefers-reduced-motion: no-preference) {
|
|
57
60
|
transition:
|
|
@@ -119,16 +122,12 @@ $uilib-input-radio-included: false !default;
|
|
|
119
122
|
}
|
|
120
123
|
|
|
121
124
|
&__input:disabled + .uilib-input-radio__label {
|
|
125
|
+
cursor: default;
|
|
126
|
+
|
|
122
127
|
&::before {
|
|
123
128
|
border-color: var(--uilib-color-other-disabled-soft);
|
|
124
129
|
|
|
125
130
|
background: var(--uilib-color-other-disabled-soft);
|
|
126
|
-
|
|
127
|
-
cursor: default;
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
&::after {
|
|
131
|
-
cursor: default;
|
|
132
131
|
}
|
|
133
132
|
|
|
134
133
|
.uilib-input-radio__label-content {
|
|
@@ -22,12 +22,10 @@ $uilib-input-select-included: false !default;
|
|
|
22
22
|
|
|
23
23
|
display: flex;
|
|
24
24
|
flex-flow: row nowrap;
|
|
25
|
-
gap: var(--uilib-spacing-200);
|
|
26
25
|
align-items: center;
|
|
27
26
|
|
|
28
27
|
width: 100%;
|
|
29
28
|
height: 2.5rem;
|
|
30
|
-
padding: 0 var(--uilib-spacing-200);
|
|
31
29
|
|
|
32
30
|
color: var(--uilib-color-text-body);
|
|
33
31
|
|
|
@@ -39,6 +37,9 @@ $uilib-input-select-included: false !default;
|
|
|
39
37
|
cursor: pointer;
|
|
40
38
|
|
|
41
39
|
&::after {
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 50%;
|
|
42
|
+
right: var(--uilib-spacing-200);
|
|
42
43
|
content: '';
|
|
43
44
|
|
|
44
45
|
display: flex;
|
|
@@ -54,6 +55,8 @@ $uilib-input-select-included: false !default;
|
|
|
54
55
|
-webkit-mask-size: cover;
|
|
55
56
|
mask-size: cover;
|
|
56
57
|
|
|
58
|
+
transform: translateY(-50%);
|
|
59
|
+
|
|
57
60
|
pointer-events: none;
|
|
58
61
|
}
|
|
59
62
|
|
|
@@ -67,6 +70,9 @@ $uilib-input-select-included: false !default;
|
|
|
67
70
|
|
|
68
71
|
&__select {
|
|
69
72
|
width: 100%;
|
|
73
|
+
height: calc(2.5rem - var(--uilib-stroke-size-050));
|
|
74
|
+
padding: var(--uilib-spacing-200);
|
|
75
|
+
padding-right: calc(var(--uilib-icon-size-medium) + var(--uilib-spacing-400));
|
|
70
76
|
|
|
71
77
|
color: var(--uilib-color-text-body);
|
|
72
78
|
font: var(--uilib-typography-body-medium);
|
|
@@ -74,6 +80,7 @@ $uilib-input-select-included: false !default;
|
|
|
74
80
|
text-overflow: ellipsis;
|
|
75
81
|
|
|
76
82
|
border: 0;
|
|
83
|
+
border-radius: var(--uilib-border-radius-100);
|
|
77
84
|
|
|
78
85
|
background: none;
|
|
79
86
|
|
|
@@ -91,9 +98,21 @@ $uilib-input-select-included: false !default;
|
|
|
91
98
|
}
|
|
92
99
|
|
|
93
100
|
&__icon {
|
|
101
|
+
position: absolute;
|
|
102
|
+
top: 50%;
|
|
103
|
+
left: var(--uilib-spacing-200);
|
|
104
|
+
|
|
94
105
|
flex-shrink: 0;
|
|
95
106
|
|
|
96
107
|
background-color: var(--uilib-color-status-info-icon);
|
|
108
|
+
|
|
109
|
+
transform: translateY(-50%);
|
|
110
|
+
|
|
111
|
+
pointer-events: none;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&:has(&__icon) &__select {
|
|
115
|
+
padding-left: calc(var(--uilib-icon-size-xsmall) + var(--uilib-spacing-400));
|
|
97
116
|
}
|
|
98
117
|
|
|
99
118
|
&:has(select[disabled]),
|
|
@@ -47,6 +47,27 @@
|
|
|
47
47
|
#{$uilib-grid-selector-column}--order#{$prefix}-reset {
|
|
48
48
|
@include uilib-grid-col-order-reset;
|
|
49
49
|
}
|
|
50
|
+
|
|
51
|
+
// Dividers
|
|
52
|
+
#{$uilib-grid-selector-column}--divider#{$prefix}-left {
|
|
53
|
+
@include uilib-grid-col-divider-left;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
#{$uilib-grid-selector-column}--divider#{$prefix}-top {
|
|
57
|
+
@include uilib-grid-col-divider-top;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
#{$uilib-grid-selector-column}--divider#{$prefix}-left-none {
|
|
61
|
+
@include uilib-grid-col-divider-left-none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
#{$uilib-grid-selector-column}--divider#{$prefix}-top-none {
|
|
65
|
+
@include uilib-grid-col-divider-top-none;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
#{$uilib-grid-selector-column}--divider#{$prefix}-none {
|
|
69
|
+
@include uilib-grid-col-divider-none;
|
|
70
|
+
}
|
|
50
71
|
}
|
|
51
72
|
|
|
52
73
|
@include uilib-generate-grid-for-resolution;
|
|
@@ -130,3 +130,92 @@
|
|
|
130
130
|
@mixin uilib-grid-col-order-reset {
|
|
131
131
|
order: 0;
|
|
132
132
|
}
|
|
133
|
+
|
|
134
|
+
/* --- Grid Column Dividers ------- */
|
|
135
|
+
|
|
136
|
+
/// Adds a vertical divider (left edge) to a grid column using ::after.
|
|
137
|
+
/// Positioned in the centre of the column gap.
|
|
138
|
+
/// Can be combined with uilib-grid-col-divider-top on the same element.
|
|
139
|
+
///
|
|
140
|
+
/// @example scss - Usage
|
|
141
|
+
/// .my-col { @include uilib-grid-col-divider-left; }
|
|
142
|
+
///
|
|
143
|
+
/// @example scss - Both dividers on the same column
|
|
144
|
+
/// .my-col {
|
|
145
|
+
/// @include uilib-grid-col-divider-left;
|
|
146
|
+
/// @include uilib-grid-col-divider-top;
|
|
147
|
+
/// }
|
|
148
|
+
|
|
149
|
+
@mixin uilib-grid-col-divider-left {
|
|
150
|
+
position: relative;
|
|
151
|
+
|
|
152
|
+
&::after {
|
|
153
|
+
position: absolute;
|
|
154
|
+
top: 0;
|
|
155
|
+
left: calc(var(--uilib-grid-gutter-width) / -2);
|
|
156
|
+
bottom: 0;
|
|
157
|
+
content: '';
|
|
158
|
+
|
|
159
|
+
border-left: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
|
|
160
|
+
|
|
161
|
+
pointer-events: none;
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
/// Adds a horizontal divider (top edge) to a grid column using ::before.
|
|
166
|
+
/// Positioned in the centre of the row gap.
|
|
167
|
+
/// Can be combined with uilib-grid-col-divider-left on the same element.
|
|
168
|
+
///
|
|
169
|
+
/// @example scss - Usage
|
|
170
|
+
/// .my-col { @include uilib-grid-col-divider-top; }
|
|
171
|
+
|
|
172
|
+
@mixin uilib-grid-col-divider-top {
|
|
173
|
+
position: relative;
|
|
174
|
+
|
|
175
|
+
&::before {
|
|
176
|
+
position: absolute;
|
|
177
|
+
top: calc(var(--uilib-grid-gutter-height) / -2);
|
|
178
|
+
left: 0;
|
|
179
|
+
right: 0;
|
|
180
|
+
content: '';
|
|
181
|
+
|
|
182
|
+
border-top: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-color-border-divider);
|
|
183
|
+
|
|
184
|
+
pointer-events: none;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
/// Removes the left (vertical) divider from a grid column.
|
|
189
|
+
|
|
190
|
+
@mixin uilib-grid-col-divider-left-none {
|
|
191
|
+
&::after {
|
|
192
|
+
content: none;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
/// Removes the top (horizontal) divider from a grid column.
|
|
197
|
+
|
|
198
|
+
@mixin uilib-grid-col-divider-top-none {
|
|
199
|
+
&::before {
|
|
200
|
+
content: none;
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
/// Removes both dividers from a grid column.
|
|
205
|
+
///
|
|
206
|
+
/// @example scss - Remove all dividers at a breakpoint
|
|
207
|
+
/// .my-col {
|
|
208
|
+
/// @include uilib-grid-col-divider-left;
|
|
209
|
+
/// @include uilib-grid-col-divider-top;
|
|
210
|
+
/// @include uilib-breakpoint(md) { @include uilib-grid-col-divider-none; }
|
|
211
|
+
/// }
|
|
212
|
+
|
|
213
|
+
@mixin uilib-grid-col-divider-none {
|
|
214
|
+
&::after {
|
|
215
|
+
content: none;
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
&::before {
|
|
219
|
+
content: none;
|
|
220
|
+
}
|
|
221
|
+
}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
// Reasons to book / _mixins
|
|
2
|
+
@use 'variables' as *;
|
|
3
|
+
@use '../../link/mixins' as *;
|
|
4
|
+
@use '../../cards/carousel/mixins' as *;
|
|
5
|
+
|
|
6
|
+
$uilib-reasons-to-book-included: false !default;
|
|
7
|
+
|
|
8
|
+
@mixin uilib-reasons-to-book() {
|
|
9
|
+
@if not $uilib-reasons-to-book-included {
|
|
10
|
+
$uilib-reasons-to-book-included: true !global;
|
|
11
|
+
|
|
12
|
+
@include uilib-link;
|
|
13
|
+
@include uilib-carousel;
|
|
14
|
+
@include uilib-reasons-to-book-master;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@mixin uilib-reasons-to-book-master() {
|
|
19
|
+
.uilib-reasons-to-book {
|
|
20
|
+
container-name: uilib-reasons-to-book;
|
|
21
|
+
container-type: inline-size;
|
|
22
|
+
|
|
23
|
+
&__heading {
|
|
24
|
+
margin: 0 0 var(--uilib-spacing-400);
|
|
25
|
+
|
|
26
|
+
color: var(--uilib-color-text-strong);
|
|
27
|
+
font: var(--uilib-typography-heading-xxlarge);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Reason cards keep their own natural (content-driven) width and simply overflow/scroll
|
|
31
|
+
// rather than being evenly redivided to fill the viewport — unlike the generic Carousel
|
|
32
|
+
// `item` slide, which defaults to `flex: 0 0 calc(100cqw / visible)`. The trailing divider
|
|
33
|
+
// line is a `::after` pseudo-element on the slide itself (not a separate Divider element),
|
|
34
|
+
// so this internal `gap` (not the track gap, which Embla would mismeasure) provides the
|
|
35
|
+
// space between the reason content and its line — and the line is automatically omitted on
|
|
36
|
+
// the last slide via `:not(:last-child)`, with no JS "is this the last item" check needed.
|
|
37
|
+
.uilib-carousel__slide {
|
|
38
|
+
flex: 0 0 auto;
|
|
39
|
+
gap: var(--uilib-spacing-400);
|
|
40
|
+
|
|
41
|
+
&:not(:last-child)::after {
|
|
42
|
+
content: '';
|
|
43
|
+
|
|
44
|
+
flex: 0 0 auto;
|
|
45
|
+
align-self: stretch;
|
|
46
|
+
|
|
47
|
+
border-inline-end: var(--uilib-stroke-size-025) solid var(--uilib-color-border-divider);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
&__reason {
|
|
52
|
+
display: flex;
|
|
53
|
+
gap: var(--uilib-spacing-200);
|
|
54
|
+
align-items: center;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
&__pictogram {
|
|
58
|
+
flex: 0 0 auto;
|
|
59
|
+
|
|
60
|
+
width: 4.5rem; /* 72 / 16 — fixed pictogram size per Figma, no matching icon-size token */
|
|
61
|
+
height: 4.5rem;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
&__text {
|
|
65
|
+
max-width: 9.875rem; /* 158 / 16 — keeps the ~238px card pitch from Figma; wraps to 2 lines */
|
|
66
|
+
margin: 0;
|
|
67
|
+
|
|
68
|
+
color: var(--uilib-color-text-strong);
|
|
69
|
+
font: var(--uilib-typography-component-heading-small-strong);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Compact reflow: below this container width the reason card centres its text and stacks
|
|
73
|
+
// the pictogram above it. Driven by the pattern's own width, not the viewport, so it works
|
|
74
|
+
// the same whether the carousel is full-bleed or nested in a narrower column.
|
|
75
|
+
// 34.1875rem = 547px — the top of the Compact range in Figma (288–547px); Static/Scrollable
|
|
76
|
+
// (548px+) stay above it.
|
|
77
|
+
/* stylelint-disable-next-line order/order */
|
|
78
|
+
@container uilib-reasons-to-book (max-width: 34.1875rem) {
|
|
79
|
+
.uilib-reasons-to-book__reason {
|
|
80
|
+
flex-direction: column;
|
|
81
|
+
|
|
82
|
+
text-align: center;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
package/scss/mixins.scss
CHANGED
package/scss/variables.scss
CHANGED
package/types/components.ts
CHANGED