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

package/CHANGELOG.md

@@ -59,6 +59,10 @@
 - New component added to indicate which filters are currently applied. They allow users to easily modify their search and filtering criteria, making
   the results easier to refine.
 
+### Badge
+
+- Removed with some variations being covered by the new info tag component
+
 ### [Breadcrumb](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-breadcrumb--docs)
 
 - Created new component, all the styles are baked into a single uilib-breadcrumb mixin
@@ -69,6 +73,10 @@
 - Mixins simplified so variants, states and sizes are all baked into the main uilib-button mixin
 - Button styling has been aligned with the latest 1web designs across all themes
 
+### [Card search](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-cards-search-card--docs)
+
+- Card added to contain a summary of information for a product in a set of results.
+
 ### [Divider](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-divider--docs)
 
 - Mixins simplified so vertical, size and variant are all baked into the main uilib-divider mixin
@@ -76,9 +84,18 @@
 - Colour variants have been reduced to default, strong and inverse
 - New dashed divider style has been added
 
-### [Flyout Dropdown](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-flyout-dropdown--docs)
+### Eye catcher
+
+- Removed from the library. There is not replacement for this component.
+
+### [Flight details](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-flight-details--docs)
+
+- New flight details has been added. It presents comprehensive information about a holiday's flights
+- Two variants are available allowing for the display of both direct and indirect flights
 
-- New flyout component has been added. It is an overlay panel that emerges from a control like a button or menu item
+### [Flyout dropdown](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-flyout-dropdown--docs)
+
+- New flyout Dropdown component has been added. It is an overlay panel that emerges from a control like a button or menu item
 - Two variants available with three pointer locations
 
 ### Forms
@@ -95,6 +112,11 @@
 - New checkbox label variant options included
 - New confirmation checkbox variant included
 
+### [Input Chip](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-chip--docs)
+
+- New Input Chip component has been added. Chips are compact, interactive elements used to select or filter without interrupting users flow.
+- Two variants available with disabled and active states. Based on variant, options are available for use in lists and month-calendars.
+
 #### [Input count](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-count--docs)
 
 - Mixins simplified to one main uilib-input-count mixin
@@ -121,6 +143,10 @@
 - Control and input sizes have been adjusted to match latest 1web designs
 - Web component provided to include increment and decrement controls to update the original text input
 
+#### [Input switch](https://mwa.tui.com/browse/mwa/uilib-production/index.html?path=/docs/components-forms-input-switch--docs)
+
+- Mixins simplified to one main uilib-input-switch mixin
+
 #### [Input text](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-text--docs)
 
 - Mixin renamed to uilib-input-text
@@ -128,6 +154,21 @@
 - Valid state usage rules and styling updated
 - Web component provided to clear prefilled inputs, clear search inputs and toggle view of password fields
 
+#### [Textarea](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-textarea--docs)
+
+- Mixin added for uilib-textarea
+- Utilises label, hint and error from formrow
+
+#### Input toggle
+
+- Removed from the library. Please use input chips or input radio.
+
+### [Hero (formerly header)](https://mwa.tui.com/browse/mwa/uilib-production/index.html?path=/docs/components-hero--docs)
+
+- Mixins simplified so size options are now baked into the main uilib-hero mixin
+- Hero now includes styling for the content area overlay supporting left, right and center positioning as well as standard, slim and illustration
+  heros
+
 ### [Icon](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-icon--docs)
 
 - Mixins simplified so size options are now baked into the main uilib-icon mixin
@@ -136,14 +177,22 @@
 ### [Icon button](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-icon-button--docs)
 
 - Mixins simplified so size options are now baked into the main uilib-icon-button mixin
+- Button variants have been remapped
 - Half icon button has been removed
-- Button styling has been aligned with the latest 1web designs across all themes.
+- New control, promotion, search and shortlist variants added
+- Elevation option has been removed and automatically applied to control variant
+- Button styling has been aligned with the latest 1web designs across all themes
 
-### [Image](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-image--docs)
+### [Image (picture)](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-image--docs)
 
 - Mixins simplified so shapes and ratios are all baked into the main uilib-image mixin
+- Added ability to control the focal point if the source image is cropped by the focal point option
 - Error handling with fallback image has been added.
 
+### Image counter
+
+- Removed from the library. There is not replacement for this component.
+
 ### [Info tag](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-info-tag--docs)
 
 - New component added to highlight informational, promotional or branded content
@@ -174,6 +223,16 @@
 
 - New media button has been added for opening media galleries
 
+### [Modal](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-modal--docs)
+
+- New modal component added using native HTML dialog element
+- Three size variants available: small (6 cols), medium (8 cols), and large (12 cols)
+- Built-in accessibility features including focus management and keyboard navigation
+- Sticky header and footer when content is scrollable
+- Optional navigation slot for moving between modal states
+- NoJS example with fallback to dedicated page
+- Full-width drawer on mobile devices
+
 ### [Pagination](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-pagination--docs)
 
 - Mixins are baked into uilib-pagination mixin
@@ -203,7 +262,12 @@
 - New component that can be used for displaying HolidayCheck reviews
 - Provides two variants; default and compact
 
-#### [Range icons](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs) (previously Rating)
+#### [Range bar](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-ratings-and-reviews-range-bar--docs) (previously Review range, and rangeBar variants)
+
+- Mixins simplified to single mixin controlling range bar rating/review styles uilib-ratings-range-bar
+- Component now includes label (with icon for customer review variant)
+
+#### [Range icons](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-ratings-and-reviews-range-icons--docs) (previously Rating, and Review range variant)
 
 - Mixins simplified to single mixin controlling range icon rating/review styles uilib-ratings-range-icons
 - Added tripadvisor variant
@@ -231,6 +295,20 @@
 - Two variants available. Default displays the first paragraph of content hiding the rest, Text only truncates a block of content (for use with
   content such as customer reviews)
 
+### [Skeleton](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-skeleton--docs)
+
+- New component added to provide loading state placeholders that visually represent page structure while content loads
+- Mixins simplified to single uilib-skeleton mixin with all variants and utilities baked in
+- Synchronized shimmer animation across all skeleton elements using CSS custom properties
+- Multiple skeleton types available: heading, subheading, text, circle, card, and container
+- Width utilities from 10% to 100% in 10% increments, with responsive variants for xs breakpoint
+- Height utilities from 1rem to 20rem in 1rem increments
+- Layout helper classes for organizing skeleton elements with flexible gap and direction options
+- Outlined variant with border and transparent background
+- Spacer variant for creating transparent gaps without animation
+- Respects prefers-reduced-motion for accessibility
+- Pre-made templates for common use cases: search cards, browse cards, article cards, and headers
+
 ### [Toolip](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-tooltip--docs)
 
 - Mixins simplified to one main uilib-tooltip mixin

package/README.md

@@ -1,7 +1,5 @@
 # TUI Design System
 
-https://uilib-testing.static-nonprod.browse.tui/index.html
-
 ## Quick Start
 
 ```
@@ -20,11 +18,11 @@ This will spin up:
 
 To install the latest stable version:
 
-`npm install @tui/ui-library` or `yarn add @tui/ui-library`
+`npm install @tui/design-system` or `yarn add @tui/design-system`
 
 To install the next major version (be aware it might contain untested features):
 
-`npm install @tui/ui-library@next` or `yarn add @tui/ui-library@next`
+`npm install @tui/design-system@next` or `yarn add @tui/design-system@next`
 
 **Themes**
 
@@ -35,8 +33,8 @@ In `dist/themes/<<themename>>/`, you will find the theme file `style.css` as wel
 could import in your .js files:
 
 ```js
-import '@tui/ui-library/dist/themes/tui/index.css';
-import '@tui/ui-library/dist/themes/tui/fonts.css';
+import '@tui/design-system/dist/themes/tui/index.css';
+import '@tui/design-system/dist/themes/tui/fonts.css';
 ```
 
 Themes variables are declared within the "data-theme" attribute selector, so you will need to add it on either the host page `html` tag or your MFE:
@@ -46,8 +44,8 @@ Themes variables are declared within the "data-theme" attribute selector, so you
 	<!--or-->
 	<my-custom-mfe data-theme="tui">
 		<!--or-->
-		<div data-theme="tui"></div
-	></my-custom-mfe>
+		<div data-theme="tui"></div>
+	</my-custom-mfe>
 </html>
 ```
 
@@ -69,3 +67,33 @@ Please check the [contributing document](/docs/CONTRIBUTING.md) and the [guideli
 ## Migration
 
 Please check the [migration document](/docs/MIGRATION.md)
+
+## Deployment
+
+### Documentation (Storybook)
+
+**Feature (MR):**
+
+- Manual job `deploy-feature` in MR pipeline
+- Creates temporary environment: `uilib-mr-{MR_ID}`
+- Cleanup:
+  - Manual: `destroy-feature` job in MR pipeline
+  - Auto: After 9 hours of inactivity
+  - Auto: When MR is closed/merged
+
+**Testing:**
+
+1. Add label `Ready For Testing` to your MR
+2. Run manual job `prepare-testing` from `main` branch
+3. Job merges all `Ready For Testing` MRs into `testing` branch
+4. `deploy-testing` automatically deploys when `testing` branch updates
+
+**Preprod & Production:**
+
+- Manual deployment from `main` branch only
+- Jobs: `deploy-preprod`, `deploy-prod`
+- Independent from NPM package releases
+
+### NPM Package
+
+Publish to NPM using manual GitLab CI job: `Release BETA version`

package/dist/themes/crystalski/fonts.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-weight: 600 700;
+  font-family: "Brandon";
+  font-style: normal;
+  src: url("https://mwa.tui.com/shared/mwa/assets/v3/fonts/brandon-medium.subset.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-weight: 600 700;
+  font-family: "Brandon";
+  font-style: italic;
+  src: url("https://mwa.tui.com/shared/mwa/assets/v3/fonts/brandon-medium-italic.subset.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-weight: 400;
+  font-family: "Brandon";
+  font-style: normal;
+  src: url("https://mwa.tui.com/shared/mwa/assets/v3/fonts/brandon-regular.subset.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-weight: 400;
+  font-family: "Brandon";
+  font-style: italic;
+  src: url("https://mwa.tui.com/shared/mwa/assets/v3/fonts/brandon-regular-italic.subset.woff2") format("woff2");
+  font-display: swap;
+}
+
+/*# sourceMappingURL=fonts.css.map */

package/dist/themes/crystalski/fonts.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/variables/fonts/_brandon-medium.scss","../../../src/variables/fonts/_brandon-medium-italic.scss","../../../src/variables/fonts/_brandon-regular.scss","../../../src/variables/fonts/_brandon-regular-italic.scss"],"names":[],"mappings":"AAGA;EACC;EACA;EACA;EACA;EACA;;ACLD;EACC;EACA;EACA;EACA;EACA;;ACLD;EACC;EACA;EACA;EACA;EACA;;ACLD;EACC;EACA;EACA;EACA;EACA","file":"fonts.css"}