@tui/design-system 1.1.0 → 1.2.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.
Files changed (17) hide show
  1. package/CHANGELOG.md +79 -1
  2. package/dist/themes/crystalski/index.css +11 -4
  3. package/dist/themes/crystalski/index.css.map +1 -1
  4. package/dist/themes/firstchoice/index.css +11 -4
  5. package/dist/themes/firstchoice/index.css.map +1 -1
  6. package/dist/themes/tui/index.css +11 -4
  7. package/dist/themes/tui/index.css.map +1 -1
  8. package/package.json +1 -1
  9. package/scss/lib/grid/_mixins.scss +1 -1
  10. package/scss/lib/modal/_mixins.scss +5 -1
  11. package/scss/lib/ratings-reviews/range-bar/_mixins.scss +81 -22
  12. package/scss/lib/ratings-reviews/range-bar/_variables.scss +6 -6
  13. package/scss/lib/ratings-reviews/range-icons/_mixins.scss +62 -13
  14. package/scss/lib/ratings-reviews/range-icons/_variables.scss +7 -0
  15. package/scss/lib/ratings-reviews/range-icons-group/_mixins.scss +7 -1
  16. package/scss/variables/base-theme.json +56 -25
  17. package/types/components.ts +10 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,83 @@
1
1
  # Changelog
2
2
 
3
+ ## v1.2.0
4
+
5
+ ### Updated
6
+
7
+ #### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs)
8
+
9
+ - Label style has been updated. For the customer variant, the label has moved from above to the left of the bar and the optional icon has been
10
+ removed.
11
+ - The value has moved to before the bar and is displayed as a percentage. Prior to this, customer reviews used a scale of 0 to 10 (with 0.1
12
+ increments) and TripAdvisor used a scale of 0 to 5 (with 0.5 increments).
13
+ - The bar for the customer variant has changed in style with a larger radius and the inactive area of the bar has been updated.
14
+ - Aria roles (list and listitem) have been added when used as a group to improve semantics.
15
+ - When used in a group the spacing between ratings has been harmonised to spacing-200 (8px). Previously it was spacing-300 (12px) for customer reviews
16
+ and spacing-100 (4px) for TripAdvisor.
17
+
18
+ ##### Customer review variant with icon
19
+
20
+ The following markup shows the previous implementation that included the now-deprecated icon element.
21
+
22
+ ```html
23
+ <div class="uilib-ratings-range-bar uilib-ratings-range-bar--customer-review">
24
+ <div class="uilib-ratings-range-bar__label">
25
+ <span class="uilib-icon uilib-icon--xsmall uilib-icon--standard-aircraft uilib-ratings-range-bar__icon" data-theme="tui"></span>
26
+ Label
27
+ </div>
28
+ <div class="uilib-ratings-range-bar__content">
29
+ <div class="uilib-ratings-range-bar__bar" style="--percentage: 89"></div>
30
+ <div class="uilib-ratings-range-bar__score">8.9</div>
31
+ <span class="uilib-ratings-range-bar--hidden">Customer Review rating 8.9 out of 10. </span>
32
+ </div>
33
+ </div>
34
+ ```
35
+
36
+ #### [Range icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs)
37
+
38
+ - Added customer rating variant `uilib-ratings-range-icons--tui`.
39
+ - Added inverse support for TripAdvisor variant.
40
+ - Added rating score that precedes the customer and TripAdvisor icon ranges for better clarity.
41
+ - Spacing between the logo, value, score and details elements has been adjusted to be consistently spacing-200 (8px).
42
+ - Recommended minimum spacing around the component has been adjusted to a spacing-200 (8px) for all variants, horizontal and vertical. Previously for
43
+ medium range icons spacing was spacing-100 (4px) top and bottom, and spacing-200 (8px) left and right. For large range icons it was spacing-300
44
+ (12px) top and bottom, and spacing-200 (8px) left and right.
45
+
46
+ | New class | Description |
47
+ | ---------------------------------- | -------------------------------------------------------------------------------------------------- |
48
+ | uilib-ratings-range-icons\_\_value | Styling for the range icons value element that precedes the score for tui and tripadvisor variants |
49
+
50
+ #### [Range icon group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
51
+
52
+ - The spacing between rating categories within the group has been updated from spacing-100 (4px) to spacing-200 (8px).
53
+ - The rating category styling has been updated from `--uilib-typography-body-medium` in `--uilib-color-text-body` to
54
+ `--uilib-typography-lable-small-strong` in `--uilib-color-text-strong`.
55
+
56
+ ### Deprecated
57
+
58
+ #### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs)
59
+
60
+ | Deprecated class | Description |
61
+ | ------------------------------- | ----------------------------------------------------------------- |
62
+ | uilib-ratings-range-bar\_\_icon | Styling for icon located before the label (customer variant only) |
63
+
64
+ | Deprecated token | Usage |
65
+ | ----------------------------------------------- | ------------------------------- |
66
+ | --uilib-ratings-range-bar-icon-color | Colour of the icon before label |
67
+ | --uilib-ratings-range-bar-tripadvisor-bar-width | Tripadvisor range bar width |
68
+
69
+ ## v1.1.1
70
+
71
+ ### Fixed
72
+
73
+ #### [Flyout dropdown](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flyout-dropdown--docs)
74
+
75
+ - Fix for flyout not closing on clicking outside the dialog at smaller screens.
76
+
77
+ #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
78
+
79
+ - Fix modal heading size and colour.
80
+
3
81
  ## v1.1.0
4
82
 
5
83
  ### Added
@@ -422,7 +500,7 @@ Modals and Accordions.
422
500
  ##### [Range icons](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs) (previously Rating, and Review range variant)
423
501
 
424
502
  - Mixins simplified to single mixin controlling range icon rating/review styles `uilib-ratings-range-icons`
425
- - Added Tripadvisor variant.
503
+ - Added TripAdvisor variant.
426
504
  - Group styling option included
427
505
 
428
506
  ##### [Range icon group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
package/dist/themes/crystalski/index.css CHANGED
@@ -412,21 +412,28 @@
412
412
  --uilib-ratings-numerical-alt-icon-color: var(--uilib-color-text-inverse);
413
413
  --uilib-ratings-numerical-alt-radius: var(--uilib-border-radius-100);
414
414
  --uilib-ratings-percentage-leading-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/crystalski/standard/thumbs-up.svg");
415
+ --uilib-ratings-range-icons-tripadvisor-color: var(--uilib-color-brand-tripadvisor);
416
+ --uilib-ratings-range-icons-tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse);
415
417
  --uilib-ratings-range-icons-tripadvisor-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small.svg");
418
+ --uilib-ratings-range-icons-tripadvisor-logo-inverse: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small-white.svg");
416
419
  --uilib-ratings-range-icons-tripadvisor-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-unchecked.svg");
417
420
  --uilib-ratings-range-icons-tripadvisor-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-checked.svg");
418
421
  --uilib-ratings-range-icons-sun-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-unchecked.svg");
419
422
  --uilib-ratings-range-icons-sun-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-checked.svg");
420
423
  --uilib-ratings-range-icons-star-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/crystalski-mountain-unchecked.svg");
421
424
  --uilib-ratings-range-icons-star-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/crystalski-mountain-checked.svg");
425
+ --uilib-ratings-range-icons-customer-color: var(--uilib-color-core-brand);
426
+ --uilib-ratings-range-icons-customer-inverse-color: var(--uilib-color-core-brand);
427
+ --uilib-ratings-range-icons-customer-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-unchecked.svg");
428
+ --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
422
429
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
423
430
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
424
- --uilib-ratings-range-bar-bar-width: 11.5rem;
431
+ --uilib-ratings-range-bar-bar-width: 11.25rem;
425
432
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
426
- --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-surface);
427
- --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
433
+ --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
428
434
  --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
429
- --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft);
435
+ --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
436
+ --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
430
437
  --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
431
438
  --uilib-scroller-thumb-size: var(--uilib-spacing-400);
432
439
  --uilib-scroller-thumb-radius: var(--uilib-border-radius-pill);
package/dist/themes/crystalski/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/crystalski/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/firstchoice/index.css CHANGED
@@ -419,21 +419,28 @@
419
419
  --uilib-ratings-numerical-alt-icon-color: var(--uilib-color-text-inverse);
420
420
  --uilib-ratings-numerical-alt-radius: var(--uilib-border-radius-100);
421
421
  --uilib-ratings-percentage-leading-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/firstchoice/standard/thumbs-up.svg");
422
+ --uilib-ratings-range-icons-tripadvisor-color: var(--uilib-color-brand-tripadvisor);
423
+ --uilib-ratings-range-icons-tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse);
422
424
  --uilib-ratings-range-icons-tripadvisor-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small.svg");
425
+ --uilib-ratings-range-icons-tripadvisor-logo-inverse: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small-white.svg");
423
426
  --uilib-ratings-range-icons-tripadvisor-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-unchecked.svg");
424
427
  --uilib-ratings-range-icons-tripadvisor-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-checked.svg");
425
428
  --uilib-ratings-range-icons-sun-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-unchecked.svg");
426
429
  --uilib-ratings-range-icons-sun-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-checked.svg");
427
430
  --uilib-ratings-range-icons-star-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/firstchoice-star-unchecked.svg");
428
431
  --uilib-ratings-range-icons-star-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/firstchoice-star-checked.svg");
432
+ --uilib-ratings-range-icons-customer-color: var(--uilib-color-core-brand);
433
+ --uilib-ratings-range-icons-customer-inverse-color: var(--uilib-color-core-brand);
434
+ --uilib-ratings-range-icons-customer-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-unchecked.svg");
435
+ --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
429
436
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
430
437
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
431
- --uilib-ratings-range-bar-bar-width: 11.5rem;
438
+ --uilib-ratings-range-bar-bar-width: 11.25rem;
432
439
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
433
- --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-surface);
434
- --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
440
+ --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
435
441
  --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
436
- --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft);
442
+ --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
443
+ --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
437
444
  --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
438
445
  --uilib-scroller-thumb-size: var(--uilib-spacing-400);
439
446
  --uilib-scroller-thumb-radius: var(--uilib-border-radius-pill);
package/dist/themes/firstchoice/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/firstchoice/_overrides.scss","../../../src/themes/firstchoice/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACgBA;ACbA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/dist/themes/tui/index.css CHANGED
@@ -435,21 +435,28 @@
435
435
  --uilib-ratings-numerical-alt-icon-color: var(--uilib-color-brand-musement);
436
436
  --uilib-ratings-numerical-alt-radius: var(--uilib-border-radius-100);
437
437
  --uilib-ratings-percentage-leading-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/icons/tui/standard/thumbs-up.svg");
438
+ --uilib-ratings-range-icons-tripadvisor-color: var(--uilib-color-brand-tripadvisor);
439
+ --uilib-ratings-range-icons-tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse);
438
440
  --uilib-ratings-range-icons-tripadvisor-logo: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small.svg");
441
+ --uilib-ratings-range-icons-tripadvisor-logo-inverse: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-logo-small-white.svg");
439
442
  --uilib-ratings-range-icons-tripadvisor-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-unchecked.svg");
440
443
  --uilib-ratings-range-icons-tripadvisor-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tripadvisor-checked.svg");
441
444
  --uilib-ratings-range-icons-sun-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-unchecked.svg");
442
445
  --uilib-ratings-range-icons-sun-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-sun-checked.svg");
443
446
  --uilib-ratings-range-icons-star-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-star-unchecked.svg");
444
447
  --uilib-ratings-range-icons-star-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-star-checked.svg");
448
+ --uilib-ratings-range-icons-customer-color: var(--uilib-color-core-brand);
449
+ --uilib-ratings-range-icons-customer-inverse-color: var(--uilib-color-core-brand);
450
+ --uilib-ratings-range-icons-customer-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-unchecked.svg");
451
+ --uilib-ratings-range-icons-customer-rating-checked-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/customer-checked.svg");
445
452
  --uilib-ratings-range-icons-tui-t-rating-icon: url("https://mwa.tui.com/shared/mwa/assets/v3/logos/review/tui-t.svg");
446
453
  --uilib-ratings-range-icons-tui-t-plus-color: #1b115c;
447
- --uilib-ratings-range-bar-bar-width: 11.5rem;
454
+ --uilib-ratings-range-bar-bar-width: 11.25rem;
448
455
  --uilib-ratings-range-bar-bar-color: var(--uilib-color-core-brand);
449
- --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-surface);
450
- --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
456
+ --uilib-ratings-range-bar-bar-bg-color: var(--uilib-color-core-neutral);
451
457
  --uilib-ratings-range-bar-tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor);
452
- --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft);
458
+ --uilib-ratings-range-bar-tripadvisor-bar-bg-color: var(--uilib-color-core-neutral);
459
+ --uilib-ratings-range-bar-tripadvisor-bar-width: 6.5625rem;
453
460
  --uilib-ratings-range-bar-icon-color: var(--uilib-color-status-info-icon);
454
461
  --uilib-scroller-thumb-size: var(--uilib-spacing-400);
455
462
  --uilib-scroller-thumb-radius: var(--uilib-border-radius-pill);
package/dist/themes/tui/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../src/lib/divider/_variables.scss","../../../src/lib/info-tag/_variables.scss","../../../src/themes/tui/index.scss","../../../src/lib/utility/_mixins.scss","../../../src/variables/_grid.scss","../../../src/variables/_icons.scss","../../../src/variables/_typography.scss"],"names":[],"mappings":"AAEA;AAQA;ACNA;ACGA;AAAA;AAAA;AAAA;EAKC;ECLC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ECKD;EACA;EACA;EACA;EAGA;EACA;ECGA;EFfC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EGgHD;EHhHC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA","file":"index.css"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "//dependencies": {
package/scss/lib/grid/_mixins.scss CHANGED
@@ -33,7 +33,7 @@
33
33
  @mixin uilib-container-breakpoint($size, $container-name: null, $logic: null) {
34
34
  /* stylelint-disable container-name-pattern */
35
35
  $breakpoint: map.get($uilib-breakpoints, $size);
36
- $has-logic: $logic != null and $logic != false and #{$logic} != '';
36
+ $has-logic: $logic != null and $logic != false and $logic != '';
37
37
 
38
38
  // Expect `$logic` like "(max-width: 47.5rem)" or "(max-width: 47.5rem) and (prefers-reduced-motion: no-preference)"
39
39
  $logic-suffix: '';
package/scss/lib/modal/_mixins.scss CHANGED
@@ -103,7 +103,11 @@ $uilib-modal-included: false !default;
103
103
  justify-content: space-between;
104
104
  align-items: center;
105
105
 
106
- h3 {
106
+ h3,
107
+ h2 {
108
+ max-width: calc(100% - var(--uilib-icon-button-size-medium));
109
+
110
+ color: var(--uilib-color-text-strong);
107
111
  font: var(--uilib-typography-component-heading-small);
108
112
  }
109
113
  }
package/scss/lib/ratings-reviews/range-bar/_mixins.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @use '../../utility/mixins' as *;
2
2
  @use './variables' as *;
3
- @use '../../icon/mixins' as *;
4
3
 
5
4
  $uilib-ratings-range-bar-included: false !default;
6
5
 
@@ -9,7 +8,6 @@ $uilib-ratings-range-bar-included: false !default;
9
8
  @if not $uilib-ratings-range-bar-included {
10
9
  $uilib-ratings-range-bar-included: true !global;
11
10
 
12
- @include uilib-icon;
13
11
  @include uilib-ratings-range-bar-master;
14
12
  }
15
13
  }
@@ -20,7 +18,10 @@ $uilib-ratings-range-bar-included: false !default;
20
18
  --percentage: 0;
21
19
 
22
20
  display: inline-flex;
23
- flex-direction: column;
21
+ flex-flow: row wrap;
22
+ gap: var(--uilib-spacing-100) var(--uilib-spacing-600);
23
+
24
+ max-width: 100%;
24
25
 
25
26
  /* Visually hidden helper */
26
27
  &--hidden {
@@ -28,13 +29,8 @@ $uilib-ratings-range-bar-included: false !default;
28
29
  }
29
30
 
30
31
  // /* Variant-specific configurations */
31
- &--tripadvisor {
32
- flex-direction: row;
33
- gap: var(--uilib-spacing-600);
34
- }
35
-
36
32
  &--tripadvisor &__bar {
37
- width: calc(var(--uilib-ratings-range-bar-tripadvisor-bar-width));
33
+ border-color: var(--uilib-ratings-range-bar-tripadvisor-bar-color);
38
34
 
39
35
  background: var(--uilib-ratings-range-bar-tripadvisor-bar-bg-color);
40
36
 
@@ -43,17 +39,68 @@ $uilib-ratings-range-bar-included: false !default;
43
39
  }
44
40
  }
45
41
 
46
- &--tripadvisor &__content {
47
- gap: var(--uilib-spacing-200);
48
- }
49
-
50
42
  &-group {
51
- display: flex;
52
- flex-direction: column;
53
- gap: var(--uilib-spacing-300);
43
+ display: grid;
44
+ grid-template-columns: fit-content(45%) max-content minmax(0, var(--uilib-ratings-range-bar-bar-width));
45
+ gap: var(--uilib-spacing-200) var(--uilib-spacing-300);
46
+
47
+ max-width: 100%;
48
+ margin: var(--uilib-spacing-400) 0;
49
+
50
+ container-type: inline-size;
51
+ container-name: uilib-rating-range-bar-group;
52
+
53
+ @media (max-width: 16rem) {
54
+ grid-template-columns: 1fr;
55
+ }
56
+
57
+ &:has(.uilib-ratings-range-bar__bar + .uilib-ratings-range-bar__score) {
58
+ grid-template-columns: fit-content(45%) minmax(0, var(--uilib-ratings-range-bar-bar-width)) max-content;
59
+ }
60
+
61
+ .uilib-ratings-range-bar,
62
+ .uilib-ratings-range-bar__content {
63
+ display: contents;
64
+ }
65
+
66
+ .uilib-ratings-range-bar__bar {
67
+ width: auto;
68
+ max-width: unset;
69
+ }
54
70
 
55
- &:has(.uilib-ratings-range-bar--tripadvisor) {
56
- gap: var(--uilib-spacing-100);
71
+ .uilib-ratings-range-bar__label {
72
+ padding-right: var(--uilib-spacing-300);
73
+ }
74
+
75
+ /* stylelint-disable-next-line order/order */
76
+ @container uilib-rating-range-bar-group (max-width: 16rem) {
77
+ .uilib-ratings-range-bar {
78
+ grid-column: 1 / -1;
79
+
80
+ display: block;
81
+ }
82
+
83
+ .uilib-ratings-range-bar__label {
84
+ padding-right: 0;
85
+ }
86
+
87
+ .uilib-ratings-range-bar__content {
88
+ display: flex;
89
+ justify-content: flex-start;
90
+ }
91
+
92
+ .uilib-ratings-range-bar__bar {
93
+ order: 0;
94
+
95
+ flex-grow: 1;
96
+
97
+ width: auto;
98
+ max-width: calc(100% - (var(--uilib-spacing-300) + 4ex));
99
+ }
100
+
101
+ .uilib-ratings-range-bar__score {
102
+ order: 1;
103
+ }
57
104
  }
58
105
  }
59
106
 
@@ -62,24 +109,36 @@ $uilib-ratings-range-bar-included: false !default;
62
109
  gap: var(--uilib-spacing-200);
63
110
  align-items: center;
64
111
 
65
- font-size: 0.875rem;
112
+ color: var(--uilib-color-text-strong);
113
+ font: var(--uilib-typography-label-small-strong);
114
+ }
115
+
116
+ &__score {
117
+ color: var(--uilib-color-text-strong);
118
+ font: var(--uilib-typography-label-small-strong);
119
+ text-align: right;
66
120
  }
67
121
 
68
122
  &__icon {
69
- color: var(--uilib-ratings-range-bar-icon-color);
123
+ display: none;
70
124
  }
71
125
 
72
126
  &__content {
73
127
  display: flex;
74
128
  gap: var(--uilib-spacing-300);
129
+ justify-content: flex-end;
75
130
  align-items: center;
131
+
132
+ min-width: 0;
76
133
  }
77
134
 
78
135
  &__bar {
79
136
  width: var(--uilib-ratings-range-bar-bar-width);
80
- height: 14px;
137
+ height: calc(1rem - var(--uilib-stroke-size-050));
138
+ margin-top: var(--uilib-spacing-050);
81
139
 
82
- border-radius: var(--uilib-border-radius-100);
140
+ border: var(--uilib-stroke-size-025) var(--uilib-stroke-style-solid) var(--uilib-ratings-range-bar-bar-color);
141
+ border-radius: var(--uilib-border-radius-pill);
83
142
 
84
143
  background: var(--uilib-ratings-range-bar-bar-bg-color);
85
144
 
package/scss/lib/ratings-reviews/range-bar/_variables.scss CHANGED
@@ -4,13 +4,13 @@
4
4
 
5
5
  // Range icons rating specific variables to allow theming
6
6
  $uilib-ratings-range-bar-variables: (
7
- bar-width: 11.5rem,
8
- // 184px / 16
7
+ bar-width: 11.25rem,
8
+ // 180 / 16
9
9
  bar-color: var(--uilib-color-core-brand),
10
- bar-bg-color: var(--uilib-color-core-surface),
11
- tripadvisor-bar-width: 6.5625rem,
12
- // 105px / 16
10
+ bar-bg-color: var(--uilib-color-core-neutral),
13
11
  tripadvisor-bar-color: var(--uilib-color-brand-tripadvisor),
14
- tripadvisor-bar-bg-color: var(--uilib-color-other-disabled-soft),
12
+ tripadvisor-bar-bg-color: var(--uilib-color-core-neutral),
13
+ // Below are deprecated
14
+ tripadvisor-bar-width: 6.5625rem,
15
15
  icon-color: var(--uilib-color-status-info-icon),
16
16
  ) !default;
package/scss/lib/ratings-reviews/range-icons/_mixins.scss CHANGED
@@ -21,6 +21,7 @@ $uilib-ratings-range-icons-included: false !default;
21
21
  @if $score-key <= 5 {
22
22
  .uilib-ratings-range-icons--star,
23
23
  .uilib-ratings-range-icons--sun,
24
+ .uilib-ratings-range-icons--customer,
24
25
  .uilib-ratings-range-icons--tripadvisor {
25
26
  .uilib-ratings-range-icons__score.uilib-ratings-range-icons__score--#{$score-value} {
26
27
  &::after {
@@ -61,6 +62,8 @@ $uilib-ratings-range-icons-included: false !default;
61
62
 
62
63
  display: inline-flex;
63
64
  flex-wrap: wrap;
65
+ gap: 0 var(--uilib-spacing-200);
66
+ align-content: center;
64
67
  align-items: center;
65
68
 
66
69
  /* Visually hidden helper */
@@ -87,7 +90,17 @@ $uilib-ratings-range-icons-included: false !default;
87
90
  --rating-max: 6;
88
91
  }
89
92
 
93
+ &--customer {
94
+ --tile-color: var(--uilib-ratings-range-icons-customer-color);
95
+ --tile-inverse-color: var(--uilib-ratings-range-icons-customer-inverse-color);
96
+ --tile-bg-icon: var(--uilib-ratings-range-icons-customer-rating-icon);
97
+ --tile-bg-checked-icon: var(--uilib-ratings-range-icons-customer-rating-checked-icon);
98
+ --rating-max: 5;
99
+ }
100
+
90
101
  &--tripadvisor {
102
+ --tile-color: var(--uilib-ratings-range-icons-tripadvisor-color);
103
+ --tile-inverse-color: var(--uilib-ratings-range-icons-tripadvisor-inverse-color);
91
104
  --tile-bg-icon: var(--uilib-ratings-range-icons-tripadvisor-rating-icon);
92
105
  --tile-bg-checked-icon: var(--uilib-ratings-range-icons-tripadvisor-rating-checked-icon);
93
106
  --rating-max: 5;
@@ -116,10 +129,6 @@ $uilib-ratings-range-icons-included: false !default;
116
129
  }
117
130
  }
118
131
 
119
- .uilib-ratings-range-icons__caption {
120
- margin-left: var(--uilib-spacing-050);
121
- }
122
-
123
132
  /* Plus label */
124
133
  .uilib-ratings-range-icons__plus {
125
134
  position: relative;
@@ -128,7 +137,7 @@ $uilib-ratings-range-icons-included: false !default;
128
137
  align-items: center;
129
138
 
130
139
  inline-size: auto;
131
- margin: 0 var(--uilib-spacing-050) 0 var(--uilib-spacing-100);
140
+ margin-left: calc((var(--uilib-spacing-100) + var(--uilib-spacing-050)) * -1);
132
141
 
133
142
  color: var(--uilib-ratings-range-icons-tui-t-plus-color);
134
143
  font-weight: var(--uilib-font-weight-bold);
@@ -136,24 +145,65 @@ $uilib-ratings-range-icons-included: false !default;
136
145
 
137
146
  background: none;
138
147
  }
148
+ }
149
+
150
+ &--inverse {
151
+ .uilib-ratings-range-icons__value,
152
+ .uilib-ratings-range-icons__plus,
153
+ .uilib-ratings-range-icons__label {
154
+ color: var(--uilib-color-text-inverse);
155
+ }
156
+
157
+ &.uilib-ratings-range-icons--tripadvisor .uilib-ratings-range-icons__leading-image {
158
+ background-image: var(--uilib-ratings-range-icons-tripadvisor-logo-inverse);
159
+ }
160
+ }
139
161
 
140
- &.uilib-ratings-range-icons--inverse {
141
- .uilib-ratings-range-icons__plus,
142
- .uilib-ratings-range-icons__label {
143
- color: var(--uilib-color-text-inverse);
162
+ &--customer,
163
+ &--tripadvisor {
164
+ .uilib-ratings-range-icons__score {
165
+ &::before,
166
+ &::after {
167
+ background-color: var(--tile-color);
168
+ background-image: none;
169
+ -webkit-mask: var(--tile-bg-icon) repeat-x left center;
170
+ mask: var(--tile-bg-icon) repeat-x left center;
171
+ -webkit-mask-size: var(--icon-size) 100%;
172
+ mask-size: var(--icon-size) 100%;
173
+ }
174
+
175
+ &::after {
176
+ background-image: none;
177
+ mask-image: var(--tile-bg-checked-icon);
144
178
  }
145
179
  }
146
180
  }
147
181
 
182
+ &--customer#{&}--inverse,
183
+ &--tripadvisor#{&}--inverse {
184
+ .uilib-ratings-range-icons__score {
185
+ &::before,
186
+ &::after {
187
+ background-color: var(--tile-inverse-color);
188
+ }
189
+ }
190
+ }
191
+
192
+ &__value {
193
+ color: var(--uilib-color-text-strong);
194
+ font: var(--uilib-typography-label-small-strong);
195
+ }
196
+
148
197
  &__details {
149
198
  display: flex;
150
199
  flex-wrap: wrap;
151
200
  gap: var(--uilib-spacing-100);
152
201
  align-items: baseline;
153
- }
154
202
 
155
- &__label {
156
- margin-left: var(--uilib-spacing-050);
203
+ /* Remove the space from the flex gap if all text is details is hidden */
204
+ &:not(:has(> :not(.uilib-ratings-range-icons--hidden))) {
205
+ margin-left: calc(var(--uilib-spacing-200) * -1);
206
+ }
157
207
  }
158
208
 
159
209
  /* Score element styling */
@@ -202,7 +252,6 @@ $uilib-ratings-range-icons-included: false !default;
202
252
 
203
253
  width: var(--uilib-icon-size-medium);
204
254
  height: calc(var(--uilib-font-size-root) * var(--uilib-line-height-body));
205
- margin-right: var(--uilib-spacing-100);
206
255
 
207
256
  background-image: var(--uilib-ratings-range-icons-tripadvisor-logo);
208
257
  background-repeat: no-repeat;
package/scss/lib/ratings-reviews/range-icons/_variables.scss CHANGED
@@ -4,13 +4,20 @@
4
4
 
5
5
  // Range icons rating specific variables to allow theming
6
6
  $uilib-ratings-range-icons-variables: (
7
+ tripadvisor-color: var(--uilib-color-brand-tripadvisor),
8
+ tripadvisor-inverse-color: var(--uilib-color-brand-tripadvisor-inverse),
7
9
  tripadvisor-logo: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-logo-small.svg'),
10
+ tripadvisor-logo-inverse: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-logo-small-white.svg'),
8
11
  tripadvisor-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-unchecked.svg'),
9
12
  tripadvisor-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/tripadvisor-checked.svg'),
10
13
  sun-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-unchecked.svg'),
11
14
  sun-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-sun-checked.svg'),
12
15
  star-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-unchecked.svg'),
13
16
  star-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-star-checked.svg'),
17
+ customer-color: var(--uilib-color-core-brand),
18
+ customer-inverse-color: var(--uilib-color-core-brand),
19
+ customer-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/customer-unchecked.svg'),
20
+ customer-rating-checked-icon: url('#{$uilib-assets-base-url}v3/logos/review/customer-checked.svg'),
14
21
  tui-t-rating-icon: url('#{$uilib-assets-base-url}v3/logos/review/tui-t.svg'),
15
22
  tui-t-plus-color: map.get($uilib-primitives, 'color-blue-100'),
16
23
  ) !default;
package/scss/lib/ratings-reviews/range-icons-group/_mixins.scss CHANGED
@@ -17,11 +17,15 @@ $uilib-ratings-range-icons-group-included: false !default;
17
17
  .uilib-ratings-range-icons-group {
18
18
  display: flex;
19
19
  flex-direction: column;
20
- gap: var(--uilib-spacing-100);
20
+ gap: var(--uilib-spacing-200);
21
21
 
22
22
  max-width: max-content;
23
+ margin: var(--uilib-spacing-400) 0;
23
24
 
24
25
  &__category {
26
+ color: var(--uilib-color-text-strong);
27
+ font: var(--uilib-typography-label-small-strong);
28
+
25
29
  @include uilib-text-truncate;
26
30
  }
27
31
 
@@ -33,6 +37,8 @@ $uilib-ratings-range-icons-group-included: false !default;
33
37
  }
34
38
 
35
39
  .uilib-ratings-range-icons {
40
+ flex-wrap: nowrap;
41
+
36
42
  margin: 0;
37
43
  }
38
44
  }
package/scss/variables/base-theme.json CHANGED
@@ -2181,6 +2181,12 @@
2181
2181
  "description": "Tui-t rating single tile background-image",
2182
2182
  "longValue": true
2183
2183
  },
2184
+ "ratings-range-icons-tui-t-plus-color": {
2185
+ "title": "TUI-T Plus color",
2186
+ "description": "TUI-T Plus color",
2187
+ "displayType": "color",
2188
+ "primitive": "color-blue-100"
2189
+ },
2184
2190
  "ratings-range-icons-star-rating-checked-icon": {
2185
2191
  "title": "Star rating checked icon",
2186
2192
  "description": "Star rating checked single tile background-image",
@@ -2201,41 +2207,71 @@
2201
2207
  "description": "Sun rating unchecked single tile background-image",
2202
2208
  "longValue": true
2203
2209
  },
2210
+ "ratings-range-icons-customer-color": {
2211
+ "displayType": "color",
2212
+ "primitive": "uilib-color-core-brand",
2213
+ "title": "Customer icon colour",
2214
+ "description": "TripAdvisor icon colour"
2215
+ },
2216
+ "ratings-range-icons-customer-inverse-color": {
2217
+ "displayType": "color",
2218
+ "primitive": "uilib-color-core-brand",
2219
+ "title": "Customer inverse icon colour",
2220
+ "description": "TripAdvisor inverse icon colour"
2221
+ },
2222
+ "ratings-range-icons-customer-rating-icon": {
2223
+ "title": "Customer unchecked rating icon",
2224
+ "description": "Customer unchecked rating single tile background-image",
2225
+ "longValue": true
2226
+ },
2227
+ "ratings-range-icons-customer-rating-checked-icon": {
2228
+ "title": "Customer checked rating icon",
2229
+ "description": "Customer checked rating single tile background-image",
2230
+ "longValue": true
2231
+ },
2232
+ "ratings-range-icons-tripadvisor-color": {
2233
+ "displayType": "color",
2234
+ "primitive": "uilib-color-brand-tripadvisor",
2235
+ "title": "TripAdvisor icon colour",
2236
+ "description": "TripAdvisor icon colour"
2237
+ },
2238
+ "ratings-range-icons-tripadvisor-inverse-color": {
2239
+ "displayType": "color",
2240
+ "primitive": "uilib-color-brand-tripadvisor-inverse",
2241
+ "title": "TripAdvisor inverse icon colour",
2242
+ "description": "TripAdvisor inverse icon colour"
2243
+ },
2204
2244
  "ratings-range-icons-tripadvisor-rating-icon": {
2205
- "title": "Tripadvisor unchecked rating icon",
2206
- "description": "Tripadvisor unchecked rating single tile background-image",
2245
+ "title": "TripAdvisor unchecked rating icon",
2246
+ "description": "TripAdvisor unchecked rating single tile background-image",
2207
2247
  "longValue": true
2208
2248
  },
2209
2249
  "ratings-range-icons-tripadvisor-rating-checked-icon": {
2210
- "title": "Tripadvisor checked rating icon",
2211
- "description": "Tripadvisor checked rating single tile background-image",
2250
+ "title": "TripAdvisor checked rating icon",
2251
+ "description": "TripAdvisor checked rating single tile background-image",
2212
2252
  "longValue": true
2213
2253
  },
2214
2254
  "ratings-range-icons-tripadvisor-logo": {
2215
- "title": "Tripadvisor logo",
2216
- "description": "Tripadvisor logo as leading image on ratings",
2255
+ "title": "TripAdvisor logo",
2256
+ "description": "TripAdvisor logo as leading image on ratings",
2217
2257
  "longValue": true,
2218
2258
  "displayType": "image"
2219
2259
  },
2220
- "ratings-range-icons-tui-t-plus-color": {
2221
- "title": "Tui T Plus color",
2222
- "description": "Tui T Plus color",
2223
- "displayType": "color"
2260
+ "ratings-range-icons-tripadvisor-logo-inverse": {
2261
+ "title": "TripAdvisor logo inverse",
2262
+ "description": "TripAdvisor logo as leading image on ratings (inverse)",
2263
+ "longValue": true,
2264
+ "displayType": "image"
2224
2265
  }
2225
2266
  }
2226
2267
  },
2227
2268
  "ratings-range-bar": {
2228
2269
  "displayType": "color",
2229
2270
  "tokens": {
2230
- "ratings-range-bar-icon-color": {
2231
- "title": "Icon colour",
2232
- "description": "Colour of the icon before label",
2233
- "primitive": "--uilib-color-status-info-icon"
2234
- },
2235
2271
  "ratings-range-bar-bar-width": {
2236
2272
  "title": "Range bar width",
2237
2273
  "description": "Default range bar width",
2238
- "displayType": "size"
2274
+ "displayType": "empty"
2239
2275
  },
2240
2276
  "ratings-range-bar-bar-color": {
2241
2277
  "title": "Range bar colour",
@@ -2247,19 +2283,14 @@
2247
2283
  "description": "Default range bar background colour",
2248
2284
  "primitive": "--uilib-color-core-surface"
2249
2285
  },
2250
- "ratings-range-bar-tripadvisor-bar-width": {
2251
- "title": "Tripadvisor range bar width",
2252
- "description": "Tripadvisor range bar width",
2253
- "displayType": "size"
2254
- },
2255
2286
  "ratings-range-bar-tripadvisor-bar-color": {
2256
- "title": "Tripadvisor range bar colour",
2257
- "description": "Tripadvisor range bar colour",
2287
+ "title": "TripAdvisor range bar colour",
2288
+ "description": "TripAdvisor range bar colour",
2258
2289
  "primitive": "--uilib-color-brand-tripadvisor"
2259
2290
  },
2260
2291
  "ratings-range-bar-tripadvisor-bar-bg-color": {
2261
- "title": "Tripadvisor range bar background",
2262
- "description": "Tripadvisor range bar background colour",
2292
+ "title": "TripAdvisor range bar background",
2293
+ "description": "TripAdvisor range bar background colour",
2263
2294
  "primitive": "--uilib-color-other-disabled-soft"
2264
2295
  }
2265
2296
  }
package/types/components.ts CHANGED
@@ -274,7 +274,7 @@ export interface TextareaProps {
274
274
  }
275
275
 
276
276
  // ─── Ratings: shared ───────────────────────────────────
277
- export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t';
277
+ export type RangeIconsVariant = 'sun' | 'star' | 'tripadvisor' | 'tui-t' | 'customer';
278
278
  export type RangeIconsSize = 'medium' | 'large';
279
279
 
280
280
  export interface SchemaProps {
@@ -315,21 +315,28 @@ export type RangeBarVariant = 'customer-review' | 'tripadvisor';
315
315
  export interface RangeBarProps {
316
316
  variant?: RangeBarVariant;
317
317
  label?: string;
318
+ score?: number;
319
+ /** @deprecated Use `score` instead */
318
320
  scoreTripadvisor?: number;
321
+ /** @deprecated Use `score` instead */
319
322
  scoreCustomerReview?: number;
323
+ /** @deprecated Icon is no longer supported */
320
324
  icon?: string;
321
325
  hasSchema?: boolean;
322
326
  additionalSchemaProps?: SchemaProps;
327
+ /** @deprecated Theme is no longer supported for this component */
323
328
  theme?: Theme;
329
+ isGroup?: boolean;
324
330
  }
325
331
 
326
- // ─── Ratings: Range icons (Sun/Star/Tripadvisor/TUI-T) ─
332
+ // ─── Ratings: Range icons (Sun/Star/TUI/TripAdvisor/TUI-T) ─
327
333
  export interface RangeIconsProps {
328
334
  variant?: RangeIconsVariant;
329
335
  size?: RangeIconsSize;
330
336
  label?: string;
331
337
  linkLabel?: string;
332
338
  scoreT?: number;
339
+ scoreCustomer?: number;
333
340
  scoreSun?: number;
334
341
  scoreStar?: number;
335
342
  scoreTripadvisor?: number;
@@ -348,6 +355,7 @@ export interface RangeIconsProps {
348
355
  export interface RangeIconsGroupItem {
349
356
  categoryLabel: string;
350
357
  score: number;
358
+ hasPlus?: boolean;
351
359
  }
352
360
 
353
361
  export interface RangeIconsGroupProps {