@tui/design-system 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,317 @@
+# Changelog
+
+## v1.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.
+
+### 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
+- 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
+
+### [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
+- Title option has been removed
+- Colour variants have been reduced to default, strong and inverse
+- New dashed divider style has been added
+
+### 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
+
+### [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
+
+#### [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 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
+- 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 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
+- 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
+
+#### [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
+- 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
+- Button variants have been remapped
+- Half icon button has been removed
+- 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 (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
+- 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
+
+### [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
+
+### [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 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
+- 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)
+
+### [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
+- 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,99 @@
+# TUI Design System
+
+## 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/design-system` or `yarn add @tui/design-system`
+
+To install the next major version (be aware it might contain untested features):
+
+`npm install @tui/design-system@next` or `yarn add @tui/design-system@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/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:
+
+```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)
+
+## 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,49 @@
+@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;
+}
+@font-face {
+  font-weight: 400 700;
+  font-family: "BrandonFallbackFont";
+  src: local("verdana");
+  size-adjust: 85.5%;
+  ascent-override: 110.8%;
+  descent-override: 31.7%;
+  line-gap-override: 19.1%;
+}
+@font-face {
+  font-weight: 400 700;
+  font-family: "BrandonFallbackFont";
+  font-style: italic;
+  src: local("verdana italic");
+  size-adjust: 85.5%;
+  ascent-override: 110.8%;
+  descent-override: 31.7%;
+  line-gap-override: 19.1%;
+}
+
+/*# 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","../../../src/variables/fonts/_brandon-fallback.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;;ACND;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"fonts.css"}