@tui/design-system 0.1.1-MR-234.0 → 1.0.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 (3) hide show
  1. package/CHANGELOG.md +66 -66
  2. package/README.md +1 -1
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -28,10 +28,10 @@ Modals and Accordions.
28
28
  | Flight Details | Presents comprehensive information about a holiday's flights. |
29
29
  | Info Tag | Highlights promotional/branded content (Neutral, Info, Scarcity, Local). |
30
30
  | Media Button | Specific trigger for opening media galleries. |
31
- | Percentage review | Currently used for HolidayCheck reviews within in the Central Region market to show a hotel rating based on guest reviews. |
31
+ | Percentage review | Currently used for HolidayCheck reviews within the Central Region market to show a hotel rating based on guest reviews. |
32
32
  | Rich Text | A wrapper to automatically style raw HTML content from CMS/APIs. |
33
- | Show more or less | Used to hide and reveal content, in order to save space and support visual balance and hierarchy or information. |
34
- | Skeleton | Placeholder loading states with synchronized shimmer animations. |
33
+ | Show more or less | Hides and reveals content to save space and support visual hierarchy. |
34
+ | Skeleton | Placeholder loading states with synchronised shimmer animations. |
35
35
 
36
36
  ### Removals
37
37
 
@@ -62,15 +62,15 @@ Modals and Accordions.
62
62
  - Tokens
63
63
  - All tokens have been updated to match the token naming for the master figma files. This has resulted in a vastly reduced number of base tokens
64
64
  that reference primitive variables for each theme. Individual components may have their own tokens that map back to these base tokens for each
65
- theme as nessessary.
66
- - App height is now set to 100dvh removing the requirement to use JS to fix the viewport height on mobile devices when the browser toolbars disapear
65
+ theme as necessary.
66
+ - App height is now set to 100dvh removing the requirement to use JS to fix the viewport height on mobile devices when the browser toolbars disappear
67
67
  on scroll.
68
68
 
69
69
  #### [Typography](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-typography--docs)
70
70
 
71
71
  - All webfonts have fallbacks with f-mods specified to minimise CLS when the webfonts load
72
72
  - New mixin for generic heading and copy styling classes
73
- - Modifer mixin updated to remove options covered by css variables
73
+ - Modifier mixin updated to remove options covered by css variables
74
74
 
75
75
  #### [Breakpoints](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/globals-breakpoints--docs)
76
76
 
@@ -83,24 +83,23 @@ Modals and Accordions.
83
83
 
84
84
  #### [Accordion](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-accordion--docs)
85
85
 
86
- - Reduced down to single variant with border, also replacing elevations.
87
- - Two group styling options available
88
- - Option to include a logo next to the accordion heading has been added for where a collection of logos is required
89
- - Notification label replaced by option to include a sub title
86
+ - Reduced to a single border variant, replacing elevation styles.
87
+ - Two group styling options are now available.
88
+ - Added option to include a logo next to the accordion heading, for use when displaying a collection of logos.
89
+ - Replaced notification label with an optional subtitle.
90
90
  - Mixins simplified so variants and states are all baked into the main uilib-accordion mixin, with a second mixin uilib-accordion-group for styling
91
91
  groups of accordions
92
92
  - Rebuilt to use native details, summary elements; fixing various accessibility and usability issues
93
- - JavaScript provided to support expand/collapse all functionality where 5 or more accordions are in a group.
93
+ - Added JavaScript to support expand/collapse-all functionality when five or more accordions are in a group.
94
94
 
95
95
  #### [Active tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-active-tag--docs)
96
96
 
97
- - New component added to indicate which filters are currently applied. They allow users to easily modify their search and filtering criteria, making
98
- the results easier to refine.
97
+ - New component for indicating which filters are currently applied. Allows users to modify search and filtering criteria to refine results.
99
98
 
100
99
  #### [Alert](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-alert--docs)
101
100
 
102
101
  - Mixins simplified so variants are all baked into the main `uilib-alert mixin`
103
- - Default variant has been removed in line with 1web design patterns
102
+ - Removed the default variant to align with 1web design patterns.
104
103
 
105
104
  #### Badge
106
105
 
@@ -108,31 +107,33 @@ Modals and Accordions.
108
107
 
109
108
  #### [Breadcrumb](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-breadcrumb--docs)
110
109
 
111
- - Created new component, all the styles are baked into a single `uilib-breadcrumb mixin`
112
- - Breadcrumb inherits styles from it's base Link and Icon components
110
+ - New component with all styles baked into a single `uilib-breadcrumb` mixin.
111
+ - Breadcrumb inherits styles from its base Link and Icon components
113
112
 
114
113
  #### [Button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-button--docs)
115
114
 
116
115
  - Mixins simplified so variants, states and sizes are all baked into the main `uilib-button mixin`
117
- - Button styling has been aligned with the latest 1web designs across all themes
116
+ - Button styling aligned with the latest 1web designs across all themes.
118
117
 
119
- #### [Card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-card--docs)
118
+ #### Cards
119
+
120
+ ##### [Card](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-card--docs)
120
121
 
121
122
  - Card added to group related content into a structured, scannable surface.
122
123
 
123
- ### [Card article](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs)
124
+ ##### [Card article](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-article-card--docs)
124
125
 
125
126
  - Card added to show information on the inspire and browse pages. It always has an image in the card.
126
127
 
127
- ### [Card icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-icon-card--docs)
128
+ ##### [Card icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-icon-card--docs)
128
129
 
129
130
  - Card added to show information on the inspire and browse pages, portraying information primarily through icons and pictograms.
130
131
 
131
- #### [Card search](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-search-card--docs)
132
+ ##### [Card search](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-search-card--docs)
132
133
 
133
- - Card added to contain a summary of information for a product in a set of results.
134
+ - Card added for displaying a product summary within search results.
134
135
 
135
- #### [Card selectable](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
136
+ ##### [Card selectable](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-cards-selectable-card--docs)
136
137
 
137
138
  - Card split from basic card to provide users with detailed selectable options. This card has support for static display as well as interactive with
138
139
  radio or checkbox inputs.
@@ -146,12 +147,12 @@ Modals and Accordions.
146
147
 
147
148
  #### Eye catcher
148
149
 
149
- - Removed from the design system. There is not replacement for this component.
150
+ - Removed from the design system. There is no replacement for this component.
150
151
 
151
152
  #### [Flight details](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-flight-details--docs)
152
153
 
153
- - New flight details has been added. It presents comprehensive information about a holiday's flights
154
- - Two variants are available allowing for the display of both direct and indirect flights
154
+ - New component for presenting comprehensive flight information for holidays.
155
+ - Two variants available: one for direct flights and one for indirect flights.
155
156
 
156
157
  #### Forms
157
158
 
@@ -161,24 +162,24 @@ Modals and Accordions.
161
162
  - Separate day component removed and baked into the date picker
162
163
  - Sheet variant removed
163
164
  - Converted to a web component that will populate a date input field with the selected value
164
- - Inclusion of support for week number column for the Nordics market
165
+ - Added support for a week number column for the Nordics market.
165
166
 
166
167
  ##### [Form row](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-form-row--docs)
167
168
 
168
- - Replacing base input styling provided in v4, including styles for label, hint text, spacing around any input and error messaging
169
+ - Replaces the base input styling from v4, covering label, hint text, input spacing, and error messaging.
169
170
  - Support for success messaging removed
170
171
 
171
172
  ##### [Input checkbox](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-checkbox--docs)
172
173
 
173
174
  - Mixins simplified to one main `uilib-input-checkbox` mixin
174
175
  - Error, valid states removed
175
- - New checkbox label variant options included
176
- - New confirmation checkbox variant included
176
+ - Added new checkbox label variant options.
177
+ - Added new confirmation checkbox variant.
177
178
 
178
179
  ##### [Input Chip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-chip--docs)
179
180
 
180
181
  - Mixins simplified to one main `uilib-input-chip` mixin
181
- - New month-calendar variant included
182
+ - Added new month-calendar variant.
182
183
 
183
184
  ##### [Input count](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-count--docs)
184
185
 
@@ -186,19 +187,19 @@ Modals and Accordions.
186
187
  - Variants removed to match latest 1web designs
187
188
  - Error, valid and disabled states removed
188
189
  - Count limited to maximum of 7 options
189
- - Can now support text as well as numbers within the count input
190
+ - Now supports text values in addition to numbers.
190
191
 
191
192
  ##### [Input radio](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-radio--docs)
192
193
 
193
194
  - Mixins simplified to one main `uilib-input-radio` mixin
194
195
  - Error, valid states removed
195
- - New radio label variant options included
196
+ - Added new radio label variant options.
196
197
 
197
198
  ##### [Input select](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-select--docs)
198
199
 
199
200
  - Mixins simplified to one main `uilib-input-select` mixin
200
201
  - Floating label option and valid state have been removed
201
- - Ability to include a leading icon added
202
+ - Added support for a leading icon.
202
203
 
203
204
  ##### [Input slider](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-slider--docs)
204
205
 
@@ -210,7 +211,7 @@ Modals and Accordions.
210
211
 
211
212
  - Mixins simplified to one main `uilib-input-stepper` mixin
212
213
  - Control and input sizes have been adjusted to match latest 1web designs
213
- - Web component provided to include increment and decrement controls to update the original text input
214
+ - Added a web component that provides increment and decrement controls for the text input.
214
215
 
215
216
  ##### [Input switch](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-input-switch--docs)
216
217
 
@@ -220,8 +221,8 @@ Modals and Accordions.
220
221
 
221
222
  - Mixin renamed to `uilib-input-text`
222
223
  - Floating label, placeholder and readonly options have been removed
223
- - Valid state usage rules and styling updated
224
- - Web component provided to clear prefilled inputs, clear search inputs and toggle view of password fields
224
+ - Updated valid-state usage rules and styling.
225
+ - Added a web component to clear prefilled and search inputs, and to toggle password field visibility.
225
226
 
226
227
  ##### [Textarea](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-forms-textarea--docs)
227
228
 
@@ -235,8 +236,7 @@ Modals and Accordions.
235
236
  #### [Hero (formerly header)](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-hero--docs)
236
237
 
237
238
  - Mixins simplified so size options are now baked into the main `uilib-hero mixin`
238
- - Hero now includes styling for the content area overlay supporting left, right and center positioning as well as standard, slim and illustration
239
- heros
239
+ - Now includes content-area overlay styling with left, right, and centre positioning, as well as standard, slim, and illustration hero variants.
240
240
 
241
241
  #### [Icon](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-icon--docs)
242
242
 
@@ -250,17 +250,17 @@ Modals and Accordions.
250
250
  - Half icon button has been removed
251
251
  - New control, promotion, search and shortlist variants added
252
252
  - Elevation option has been removed and automatically applied to control variant
253
- - Button styling has been aligned with the latest 1web designs across all themes
253
+ - Button styling aligned with the latest 1web designs across all themes.
254
254
 
255
255
  #### [Image (picture)](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-image--docs)
256
256
 
257
257
  - Mixins simplified so shapes and ratios are all baked into the main `uilib-image` mixin
258
- - Added ability to control the focal point if the source image is cropped by the focal point option
259
- - Error handling with fallback image has been added.
258
+ - Added a focal-point option to control cropping of the source image.
259
+ - Added error handling with a fallback image.
260
260
 
261
261
  #### Image counter
262
262
 
263
- - Removed from the design system. There is not replacement for this component.
263
+ - Removed from the design system. There is no replacement for this component.
264
264
 
265
265
  #### [Info tag](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-info-tag--docs)
266
266
 
@@ -283,14 +283,14 @@ Modals and Accordions.
283
283
 
284
284
  - Mixins simplified so size options are now baked into the main `uilib-loader` mixin
285
285
  - TUI ripple loader option removed
286
- - Snowflake and FC-loader options are now controlled by theming rather than being specific options
287
- - Option to include visible loading message now included for all size variants
288
- - Overlay mixin removed with no replacement. Placement of loader is developers responsibility. The loader will always position centered (vertically
289
- and horizontally) within the 'uilib-loader' element.
286
+ - Snowflake and FC-loader styles are now controlled by theming rather than being separate component options.
287
+ - Added option to display a visible loading message for all size variants.
288
+ - Overlay mixin removed with no replacement. Placement of loader is the developer's responsibility. The loader will always position centered
289
+ (vertically and horizontally) within the 'uilib-loader' element.
290
290
 
291
291
  #### [Media button](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-media-button--docs)
292
292
 
293
- - New media button has been added for opening media galleries
293
+ - New component for triggering media gallery overlays.
294
294
 
295
295
  #### [Modal](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-modal--docs)
296
296
 
@@ -300,7 +300,7 @@ Modals and Accordions.
300
300
  - Sticky header and footer when content is scrollable
301
301
  - Optional navigation slot for moving between modal states
302
302
  - NoJS example with fallback to dedicated page
303
- - Full-width drawer on mobile devices
303
+ - Displays as a full-width bottom drawer on mobile.
304
304
 
305
305
  #### [Pagination](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-pagination--docs)
306
306
 
@@ -323,8 +323,8 @@ Modals and Accordions.
323
323
  ##### [Numerical](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-numerical--docs) (previously Review base variant)
324
324
 
325
325
  - Mixins simplified to single mixin controlling numerical rating/review styles `uilib-ratings-numerical`
326
- - Now single size option available with small and xsmall being removed
327
- - New variant added for providing alternative styling to use with musement ratings
326
+ - Reduced to a single size option; small and xsmall sizes removed.
327
+ - Added a new variant with alternative styling for Musement ratings.
328
328
 
329
329
  ##### [Percentage](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
330
330
 
@@ -334,44 +334,44 @@ Modals and Accordions.
334
334
  ##### [Range bar](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs) (previously Review range, and rangeBar variants)
335
335
 
336
336
  - Mixins simplified to single mixin controlling range bar rating/review styles `uilib-ratings-range-bar`
337
- - Component now includes label (with icon for customer review variant)
337
+ - Now includes a label, with an icon for the customer review variant.
338
338
 
339
339
  ##### [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)
340
340
 
341
341
  - Mixins simplified to single mixin controlling range icon rating/review styles `uilib-ratings-range-icons`
342
- - Added tripadvisor variant
342
+ - Added Tripadvisor variant.
343
343
  - Group styling option included
344
344
 
345
345
  ##### [Range icon group](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
346
346
 
347
- - New component to display lists of range icons for use with the likes of TripAdvisor
347
+ - New component for displaying grouped range icons, such as those used for TripAdvisor ratings.
348
348
 
349
349
  #### [Rich Text](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-rich-text--docs)
350
350
 
351
- - New component added that provides a wrapper that automatically styles basic html content such as headings, paragaphs, links, lists etc. This allows
352
- for simple and consistent styling of rich text content from CMS/APIs.
351
+ - New wrapper component that automatically styles basic HTML content (headings, paragraphs, links, lists, etc.) for consistent rendering of CMS/API
352
+ rich text.
353
353
 
354
354
  #### [Scroller](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-scroller--docs)
355
355
 
356
356
  - Mixins simplified so scrollbar and fade-out options are baked into a single `uilib-scroller` mixin
357
357
  - Fade is applied by default
358
358
  - Fade effect is applied via modern CSS techniques
359
- - Small web component provided to improve accessibility support
359
+ - Added a small web component to improve accessibility.
360
360
 
361
361
  #### [Show more/less](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-show-more-or-less--docs)
362
362
 
363
- - New component added to hide and reveal content, in order to save space and support visual balance and hierarchy or information
364
- - Two variants available. Default displays the first paragraph of content hiding the rest, Text only truncates a block of content (for use with
365
- content such as customer reviews)
363
+ - New component for hiding and revealing content to save space and support visual hierarchy.
364
+ - Two variants available: Default shows the first paragraph and hides the rest; Text Only truncates a block of content (for use with customer reviews,
365
+ etc.).
366
366
 
367
367
  #### [Skeleton](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-skeleton--docs)
368
368
 
369
369
  - Mixins simplified to single `uilib-skeleton` mixin with all variants and utilities baked in
370
- - Synchronized shimmer animation across all skeleton elements using CSS custom properties
370
+ - Synchronised shimmer animation across all skeleton elements using CSS custom properties
371
371
  - Multiple skeleton types available: heading, subheading, text, circle, card, and container
372
372
  - Width utilities from 10% to 100% in 10% increments, with responsive variants for xs breakpoint
373
373
  - Height utilities from 1rem to 20rem in 1rem increments
374
- - Layout helper classes for organizing skeleton elements with flexible gap and direction options
374
+ - Layout helper classes for organising skeleton elements with flexible gap and direction options
375
375
  - Outlined variant with border and transparent background
376
376
  - Spacer variant for creating transparent gaps without animation
377
377
  - Respects prefers-reduced-motion for accessibility
@@ -379,14 +379,14 @@ Modals and Accordions.
379
379
 
380
380
  #### Tabs ([Anchor](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-tabs-anchor--docs) and [In page](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tabs-in-page-tabs--docs))
381
381
 
382
- - Tab and tab list replaced by two Anchor tabs and In page tabs. Anchor tabs are for linking to content sections within the same page where as in page
383
- tabs switch between content sections without navigation or page reloads
382
+ - Tab and tab list replaced by two new components: Anchor tabs and In-page tabs. Anchor tabs link to content sections within the same page; In-page
383
+ tabs switch between content sections without navigation or page reloads.
384
384
  - Mixins simplified to one main mixin for each tab type (anchor and in page)
385
385
  - JavaScript controls tab behaviour, including accessibility requirements, with non-JavaScript fallback provided
386
386
 
387
- #### [Toolip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tooltip--docs)
387
+ #### [Tooltip](https://mwa.tui.com/browse/mwa/uilib-production/storybook/index.html?path=/docs/components-tooltip--docs)
388
388
 
389
389
  - Mixins simplified to one main `uilib-tooltip` mixin
390
390
  - Tooltip now opens on click or enter rather than hover
391
391
  - JavaScript controls tooltip positioning and ensures the tooltip is read by assistive technologies, with a non-JavaScript fallback provided
392
- - Hit target for icon variant increased improving accessibility for all user
392
+ - Increased the hit target for the icon variant, improving accessibility.
package/README.md CHANGED
@@ -59,7 +59,7 @@ components, how themes are generated, the original unprocessed stylesheets (post
59
59
  Your feedback is welcome. You may request changes and improvements by creating an Issue on the
60
60
  [UI Library (UILIB)](https://tui.atlassian.net/jira/software/c/projects/UILIB/boards/2275/backlog) project in Jira. If you have a general query about
61
61
  the Design System you are welcome to post in the
62
- [UI Library Support channel](https://teams.microsoft.com/l/channel/19%3A537d7e30d4284701a3b985a0763f7b2e%40thread.tacv2/Support%20UI%20Library?groupId=237c9a11-b89a-449e-8d69-416a09bd8f55&tenantId=e3e1f65b-b973-440d-b61c-bc895fc98e28)
62
+ [Design System Support channel](https://teams.microsoft.com/l/channel/19%3A2YJWcKc39k5Ve1VQK034fMAez4tGZb1mCGCAhXA0Il01%40thread.tacv2/General?groupId=40d60389-22ad-4003-8dc1-8658a5c871d8&tenantId=e3e1f65b-b973-440d-b61c-bc895fc98e28)
63
63
  on Teams.
64
64
 
65
65
  Please check the [contributing document](/docs/CONTRIBUTING.md) and the [guidelines](/docs/GUIDELINES.md) for contribution.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tui/design-system",
3
- "version": "0.1.1-MR-234.0",
3
+ "version": "1.0.0",
4
4
  "description": "TUI Design System",
5
5
  "author": "TUI Group",
6
6
  "contributors": [