@tui/design-system 5.0.0-beta.1

package/CHANGELOG.md

@@ -0,0 +1,239 @@
+# Changelog
+
+## v5.0.0
+
+### General changes
+
+- Mixins available have been reduced to simplify use of the library. Mixins for components now have class names baked in to aid in code consistency
+  across TUI, although these can be overridden by updating the SASS variables if required.
+- Theming
+  - TUI Light has been renamed to TUI
+  - Removed support for TUI, TUI Magic Life, Robinson, LTUR and Airtours themes. TUI, Crystal Ski, First Choice and VIP selection remain fully
+    supported
+  - Removed support for dark theme. This may be added again in a future release.
+- Assets - All assets used within the library now reference the v3 version of the asset library
+- SCSS provided now uses @use and @forward. Mixins need to be imported as individual modules where they are required and can not be loaded once and
+  used globally anymore.
+- Update reset stylesheet.
+  - Box model is set to box-sizing on all elements by default to help with flexible layouts which we are used more often within our builds.
+- Tokens
+  - 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
+    that reference primitive variables for each theme. Individual components may have their own tokens that map back to these base tokens for each
+    theme as nessessary.
+- 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
+  on scroll.
+
+### [Typography](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/globals-typography--docs)
+
+- All webfonts have fallbacks with f-mods specified to minimise CLS when the webfonts load
+- New mixin for generic heading and copy styling classes
+- Modifer mixin updated to remove options covered by css variables
+
+### [Breakpoints](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/globals-breakpoints--docs)
+
+- New xxs breakpoint included to further control styling where required. This breakpoint is used for grids so that below 320px content will simply
+  stack and remain readable and usable.
+
+### [Grid](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/globals-grid--docs)
+
+- Design System now uses CSS Grid Layout Module instead of Flexbox
+
+### [Accordion](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-accordion--docs)
+
+- Reduced down to single variant with border, also replacing elevations.
+- Two group styling options available
+- Option to include a logo next to the accordion heading has been added for where a collection of logos is required
+- Notification label replaced by option to include a sub title
+- Mixins simplified so variants and states are all baked into the main uilib-accordion mixin, with a second mixin uilib-accordion-group for styling
+  groups of accordions
+- Rebuilt to use native details, summary elements; fixing various accessibility and usability issues
+- JavaScript provided to support expand/collapse all functionality where 5 or more accordions are in a group.
+
+### [Alert](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-alert--docs)
+
+- Mixins simplified so variants are all baked into the main uilib-alert mixin
+- Default variant has been removed in line with 1web design patterns
+
+### [Active tag](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-active-tag--docs)
+
+- 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.
+
+### [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
+- Breadcrumb inherits styles from it's base Link and Icon components
+
+### [Button](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-button--docs)
+
+- 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
+
+### [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
+- Title option has been removed
+- 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)
+
+- New flyout 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
+
+#### [Form row](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-form-row--docs)
+
+- Replacing the base input styling provided in v4
+- Success message styling removed
+
+#### [Input checkbox](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-checkbox--docs)
+
+- Mixins simplified to one main uilib-input-checkbox mixin
+- Error, valid states removed
+- New checkbox label variant options included
+- New confirmation checkbox variant included
+
+#### [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
+- Variants removed to match latest 1web designs
+- Error, valid and disabled states removed
+- Count limited to maximum of 7 options
+- Can now support text as well as numbers within the count input
+
+#### [Input radio](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-radio--docs)
+
+- Mixins simplified to one main uilib-input-radio mixin
+- Error, valid states removed
+- New radio label variant options included
+
+#### [Input slider](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-slider--docs)
+
+- Mixin renamed to uilib-input-slider
+- Valid state removed
+- Input text is now required to aid accessibility and the range input is added via JavaScript to ensure the fields are properly connected
+
+#### [Input stepper](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-stepper--docs)
+
+- Mixins simplified to one main uilib-input-stepper mixin
+- 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 text](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-forms-input-text--docs)
+
+- Mixin renamed to uilib-input-text
+- Floating label, placeholder and readonly options have been removed
+- Valid state usage rules and styling updated
+- Web component provided to clear prefilled inputs, clear search inputs and toggle view of password fields
+
+### [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
+- Icon sizes have been adjusted to match latest designs
+
+### [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
+- Half icon button has been removed
+- 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)
+
+- Mixins simplified so shapes and ratios are all baked into the main uilib-image mixin
+- Error handling with fallback image has been added.
+
+### [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
+- Four variants available: neutral, info, scarcity, and local-product
+
+### [Link](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-link--docs)
+
+- Mixins simplified so size options are now baked into the main uilib-link mixin
+- Links styling has been aligned to match latest designs
+- Link variants have been removed as well as disabled state
+
+### [List](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-list--docs)
+
+- Divider, state, and meta label style options removed
+- Basic bullet list no longer requires icon setting reducing markup
+- New image variant added with square or circular image options
+
+### [Loader](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-loader--docs)
+
+- Mixins simplified so size options are now baked into the main uilib-loader mixin
+- TUI ripple loader option removed
+- Snowflake and FC-loader options are now controlled by theming rather than being specific options
+- Option to include visible loading message now included for all size variants
+- Overlay mixin removed with no replacement. Placement of loader is developers responsibility. The loader will always position centered (vertically
+  and horizontally) within the 'uilib-loader' element.
+
+### [Media button](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-media-button--docs)
+
+- New media button has been added for opening media galleries
+
+### [Pagination](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-pagination--docs)
+
+- Mixins are baked into uilib-pagination mixin
+
+### [Price](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-price--docs)
+
+- Mixins simplified so size options are baked into a single uilib-price mixin
+- Component styles are aligned with latest 1web designs for tui theme
+- xLarge variant has been removed
+
+### [Promo tag](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-promo-tag--docs)
+
+- Mixin names and classes updated to be prefixed with uilib
+- Background variant renamed to filled
+- Additional mixin for list of promo tags added
+
+### Ratings and Reviews
+
+#### [Numerical](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-ratings-and-reviews-numerical--docs) (previously Review base variant)
+
+- Mixins simplified to single mixin controlling numerical rating/review styles uilib-ratings-numerical
+- Now single size option available with small and xsmall being removed
+- New variant added for providing alternative styling to use with musement ratings
+
+#### [Percentage](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-ratings-and-reviews-percentage--docs)
+
+- 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)
+
+- Mixins simplified to single mixin controlling range icon rating/review styles uilib-ratings-range-icons
+- Added tripadvisor variant
+- Group styling option included
+
+#### [Range icon group](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-ratings-and-reviews-range-icons-group--docs)
+
+- New component to display lists of range icons for use with the likes of TripAdvisor
+
+### [Rich Text](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-rich-text--docs)
+
+- New component added that provides a wrapper that automatically styles basic html content such as headings, paragaphs, links, lists etc. This allows
+  for simple and consistent styling of rich text content from CMS/APIs.
+
+### [Scroller](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-scroller--docs)
+
+- Mixins simplified so scrollbar and fade-out options are baked into a single uilib-scroller mixin
+- Fade is applied by default
+- Fade effect is applied via modern CSS techniques
+- Small web component provided to improve accessibility support
+
+### [Show more/less](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-show-more-or-less--docs)
+
+- New component added to hide and reveal content, in order to save space and support visual balance and hierarchy or information
+- 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)
+
+### [Toolip](https://uilib-testing.static-nonprod.browse.tui/index.html?path=/docs/components-tooltip--docs)
+
+- Mixins simplified to one main uilib-tooltip mixin
+- Tooltip now opens on click or enter rather than hover
+- JavaScript controls tooltip positioning and ensures the tooltip is read by assistive technologies, with a non-JavaScript fallback provided
+- Hit target for icon variant increased improving accessibility for all user

package/README.md

@@ -0,0 +1,71 @@
+# TUI Design System
+
+https://uilib-testing.static-nonprod.browse.tui/index.html
+
+## Quick Start
+
+```
+nvm use
+npm i
+npm run dev
+```
+
+This will spin up:
+
+- storybook: http://localhost:6006/
+
+## How to use it
+
+**Installation**
+
+To install the latest stable version:
+
+`npm install @tui/ui-library` or `yarn add @tui/ui-library`
+
+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`
+
+**Themes**
+
+Theme files provide some global variables that are needed by the components in order to adhere to the theme guidelines (colors, spacing, etc.). TUI is
+the only available theme at the moment.
+
+In `dist/themes/<<themename>>/`, you will find the theme file `style.css` as well as other global stylesheets. For example, for the TUI theme you
+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';
+```
+
+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:
+
+```html
+<html data-theme="tui">
+	<!--or-->
+	<my-custom-mfe data-theme="tui">
+		<!--or-->
+		<div data-theme="tui"></div
+	></my-custom-mfe>
+</html>
+```
+
+## Development mode
+
+You can also clone this repository, install the dependencies and use `npm run dev` to run a local server where to check the example templates for the
+components, how themes are generated, the original unprocessed stylesheets (post processed with postcss-preset-env), etc.
+
+## Contributing
+
+Your feedback is welcome. You may request changes and improvements by creating an Issue on the
+[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
+the Design System you are welcome to post in the
+[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)
+on Teams.
+
+Please check the [contributing document](/docs/CONTRIBUTING.md) and the [guidelines](/docs/GUIDELINES.md) for contribution.
+
+## Migration
+
+Please check the [migration document](/docs/MIGRATION.md)

package/package.json

@@ -0,0 +1,181 @@
+{
+	"name": "@tui/design-system",
+	"version": "5.0.0-beta.1",
+	"description": "TUI Design System",
+	"author": "TUI Group",
+	"contributors": [
+		"Matthew Guyader-Squirrell <matthew.squirrell@tui.co.uk>",
+		"Nicky Bliss <nicky.bliss@tui.co.uk>",
+		"Cy Culpin <cy.culpin@tui.co.uk>",
+		"Oleksandr Talanov <oleksandr.talanov@tui.co.uk>",
+		"Elias Meyer <elias.meyer@tui.com>",
+		"Volodymyr Savchuk <volodymyr.savchuk@tui.com>"
+	],
+	"scripts": {
+		"prepare": "node .husky/install.mjs",
+		"ci": "commit",
+		"clean": "shx rm -rf lib dist",
+		"prebuild": "npm run set-scss-env",
+		"build": "node cli/index.mjs",
+		"build:primitives": "node cli/process-primitives.mjs",
+		"build:js": "node cli/process-webcomponent-ts.mjs",
+		"build:changelog": "node cli/change-log.mjs",
+		"dev": "dotenv -e .env.local npm run storybook:dev",
+		"test:sass": "jest --verbose ./test/sass-true",
+		"storybook:dev": "run-s static:build build:primitives build:changelog set-scss-env storybook:serve",
+		"storybook:build": "run-s static:build build:primitives build:js build:changelog set-scss-env _storybook:build_prod",
+		"storybook:serve": "storybook dev -p 6006 -c storybook/.storybook",
+		"_storybook:build_prod": "storybook build -c storybook/.storybook",
+		"static:build": "node cli/static-assets.mjs",
+		"lint:styles": "stylelint \"src/**/*.{scss,css}\" --fix",
+		"lint:styles:ci": "stylelint \"src/**/*.{scss,css}\"",
+		"lint:standard": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
+		"lint:standard:ci": "eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
+		"lint:storybook": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
+		"lint:storybook:ci": "eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
+		"lint": "npm run lint:standard && npm run lint:storybook",
+		"lint:ci": "npm run lint:standard:ci && npm run lint:storybook:ci",
+		"prettier": "prettier --ignore-unknown --write .",
+		"prettier:ci": "prettier --ignore-unknown --check .",
+		"scss:compile": "sass --no-source-map --style=expanded utils/scss/input:utils/scss/output",
+		"set-scss-env": "echo \"\\$uilib-assets-base-url: '${ASSETS_BASE_URL}' !default;\" > ./src/variables/_env-variables.scss",
+		"ci:lint": "bash ./ci-scripts/lint.sh",
+		"ci:check:ts": "echo 'Probably not needed anymore, use `ci:lint`' && exit 0",
+		"ci:code-tests": "bash ./ci-scripts/code-tests.sh",
+		"ci:install": "bash ./ci-scripts/install.sh",
+		"ci:build": "bash ./ci-scripts/build.sh",
+		"ci:deploy:feat": "bash ./ci-scripts/deploy/deploy-feature.sh",
+		"ci:deploy:testing": "bash ./ci-scripts/deploy/deploy-testing.sh",
+		"ci:destroy:feat": " bash ./ci-scripts/destroy/destroy-feature.sh"
+	},
+	"files": [
+		"dist",
+		"lib",
+		"scss",
+		"CHANGELOG.md",
+		"CONTRIBUTING.md"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git@ssh.source.tui:osp/browse/design-system/uilib.git"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.25.2",
+		"@babel/eslint-parser": "^7.28.5",
+		"@babel/preset-env": "^7.25.2",
+		"@babel/preset-react": "^7.26.3",
+		"@babel/preset-typescript": "^7.28.5",
+		"@commitlint/cli": "^20.1.0",
+		"@commitlint/config-conventional": "^20.0.0",
+		"@eslint/compat": "^2.0.0",
+		"@eslint/js": "^9.38.0",
+		"@jest/globals": "^30.2.0",
+		"@storybook/addon-a11y": "^8.4.7",
+		"@storybook/addon-docs": "^8.4.7",
+		"@storybook/addon-essentials": "^8.4.7",
+		"@storybook/addon-links": "^8.4.7",
+		"@storybook/addon-themes": "^8.4.7",
+		"@storybook/blocks": "^8.4.7",
+		"@storybook/html": "^8.4.7",
+		"@storybook/html-webpack5": "^8.4.7",
+		"@storybook/manager-api": "^8.4.7",
+		"@storybook/preview-api": "^8.4.7",
+		"@storybook/theming": "^8.4.7",
+		"@stylistic/eslint-plugin": "^3.1.0",
+		"@types/js-beautify": "^1.14.3",
+		"@types/node": "^24.9.1",
+		"@typescript-eslint/eslint-plugin": "^8.46.2",
+		"@typescript-eslint/parser": "^8.46.2",
+		"aws-cdk-lib": "^2.220.0",
+		"babel-loader": "^10.0.0",
+		"copyfiles": "^2.4.1",
+		"css-loader": "7.1.2",
+		"deepmerge": "^4.3.1",
+		"dotenv": "^17.2.3",
+		"dotenv-cli": "^11.0.0",
+		"esbuild": "^0.27.0",
+		"eslint": "^9.38.0",
+		"eslint-config-airbnb-extended": "^2.3.2",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-import-resolver-typescript": "^4.4.4",
+		"eslint-plugin-import": "^2.32.0",
+		"eslint-plugin-import-x": "^4.16.1",
+		"eslint-plugin-jsx-a11y": "^6.10.2",
+		"eslint-plugin-n": "^17.23.1",
+		"eslint-plugin-prettier": "^5.5.4",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^7.0.1",
+		"git-format-staged": "3.1.1",
+		"glob": "^13.0.0",
+		"husky": "^9.1.7",
+		"jest": "^30.2.0",
+		"js-beautify": "^1.15.1",
+		"lint-staged": "^16.2.6",
+		"log-update": "^7.0.2",
+		"node-fetch": "^3.3.2",
+		"npm-run-all2": "^8.0.4",
+		"postcss-scss": "^4.0.6",
+		"prettier": "^3.4.2",
+		"remark-gfm": "^4.0.0",
+		"sass": "^1.93.2",
+		"sass-loader": "^16.0.4",
+		"sass-true": "^10.0.0",
+		"shx": "0.4.0",
+		"source-map-support": "^0.5.21",
+		"storybook": "^8.4.7",
+		"storybook-addon-pseudo-states": "^4.0.2",
+		"storybook-addon-tag-badges": "^1.4.0",
+		"storybook-addon-turbo-build": "^2.0.1",
+		"storybook-dark-mode": "^4.0.2",
+		"storybook-preset-inline-svg": "^1.0.1",
+		"style-loader": "4.0.0",
+		"stylelint": "^16.25.0",
+		"stylelint-config-standard": "^39.0.1",
+		"stylelint-config-standard-scss": "^16.0.0",
+		"stylelint-order": "^7.0.0",
+		"stylelint-scss": "^6.10.1",
+		"stylelint-semantic-groups": "^1.2.1",
+		"ts-loader": "^9.5.2",
+		"ts-node": "^10.9.1",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.46.2",
+		"webpack": "^5.102.1"
+	},
+	"engines": {
+		"node": ">=22",
+		"npm": ">=10",
+		"pnpm": "please-use-npm"
+	},
+	"lint-staged": {
+		"*.{scss,css}": "npx stylelint \"src/**/*.{scss,css}\" --fix",
+		"*.{js,ts,mjs}": "npx eslint \"storybook/**/*.{js,ts}\" \"cli/*.mjs\" --config eslint.config.mjs --fix --ignore-pattern \"storybook/.storybook/**\" --no-warn-ignored",
+		"storybook/.storybook/**/*.{js,ts,mjs}": "npx eslint storybook/.storybook --config eslint.storybook.config.mjs --no-error-on-unmatched-pattern --fix",
+		"**/*": "npx prettier --write"
+	},
+	"loki": {
+		"configurations": {
+			"chrome.docker.tui": {
+				"target": "chrome.app",
+				"width": 1980,
+				"height": 1000,
+				"looks-same": {
+					"ignoreCaret": true
+				},
+				"storyQueryParams": {
+					"theme": "theme-tui"
+				}
+			},
+			"chrome.docker.tuiLight": {
+				"target": "chrome.app",
+				"width": 1980,
+				"height": 1000,
+				"looks-same": {
+					"ignoreCaret": true
+				},
+				"storyQueryParams": {
+					"theme": "theme-firstchoice"
+				}
+			}
+		}
+	}
+}