feat: new uui-color-* components (color picker) (#413)

* Initial commit

* Add color swatch

* Use Colord library instead

* Update pacage-lock.json

* Make slider vertical

* Make transparent background

* Update Colord type

* Adjust events in color picker components

* Update inline picker

* Update complete

* Update HSB spectrum when hue change

* Update value

* Adjust hue change

* Update brightness

* Make selection of color swatches working

* Outout value

* Update single color swatch story

* Include names plugin from Colord

* update uui-base dependecy to latest rc3

* Update package lock

* Update package lock

* Update import of utils

* update reference to uui-base to avoid clash in main package-lock

* Adjust color picker to use popover as default

* Adjust selected checkmark and color picker popover

* Add example of transparent colors

* Move button trigger outside popover so it is closed when clicking next to button trigger

* Adjust preview and trigger buttons

* Accessibility

* Adjust copy color from preview button

* Update keyboard selection in color area

* Update story

* Update keyboard selection on slider handle

* Add slot for inner color hue gradient

* Close popover when pressing esc key

* Modify selection

* Simplify clamp function

* Update package-lock

* Use rem instead

* Use regular button element for preview color

* Cleanup

* Update package-lock

* Uppercase text

* Update button style

* update package-lock to latest

* update to new mjs import

* add dependency between color-swatches and color-swatch

* add dependency between color-swatch and icon-registry-essential

* update package-lock

* add dependency of colord to color packages and mark as external

* remove duplicate class

* add demand for uui-color-swatch

* Adjust button elements

* Adjust styling of sliders

* Adjust color area sizing

* Use vertical attribute for slider

* Make handle in color area update when selecting color from palette

* Focus and selection of swatches

* Set initial value on color area

* Adjust styling

* Adjust text transform of button

* Adjust story with format

* add internal deps between uui --> color*

* auto-generate new tsconfig

* fix lint warning for a11y keydown on slider

* add support for ArrowUp and ArrowDown with vertical on/off

* fix eslint errors

* add support for storybook controls for uui-color-slider

* uui-color-area: add support for disabled state

* uui-color-area: add support for storybook controls

* add correct storybook category

* uui-color-swatches: add default slot to support lightdom swatches

* uui-color-picker: dispatch a change event on update

* uui-color-picker: add support for controls and actions on storybook

* run formatting

* update main README

* fix a11y tests

* update internal dependecies

* Update package-lock.json

* remove dependency of colord

* Revert "Update package-lock.json"

This reverts commit a793117.

* update package json lock

* update lockfile

* update package-lock

* move assignemnt of handle and container to firstupdated hook

* round the display value

* add reverse number to math utils

* reverse the min and max value on vertical display

* add example to docs

* simplify styles, remove class map

* remove console.logs

* correct box-sizing on input so it is aligned with the button group

* remove unused display value

* add label, disabled, parse color, add invalid color feedback

* initialize color in first updated

* remove swatches property and cleanup

* remove empty state, fallback to black if no value

* move toHex function to utils

move toHex to utils

* if no value start color area as black

* initialize opacity as false

* remove deprecated copy method

* add docs

* refactor color picker

* add hue and opacity types to slider

* refactor color area

* implement slider type and cleanup

* cleanup

* rename slider custom properties

* rename custom properties

* make picker scale nicely

* do not mark colord as external but instead bundle it along with our code

* add nodeResolve to esm build to colord will be included

* demand custom elements, add label mixin to color picker

* add label mixin to color slider

* add radiogroup role to swatch

* improve imports of uui-color-swatches

* docs: add missing slot documentation

* docs: add jsdoc to uui-color-slider

* remove unknown attribute 'autocorrect'

* improve imports

* add jsdoc to new props

* add jsdocs for element

* add docs for label slot

* add docs for label slots

* renderLabel is not implemented so no docs for the label slot

* Revert "add docs for label slot"

This reverts commit 693f243.

* improve docs

---------

Co-authored-by: Bjarne Fyrstenborg <[email protected]>
Co-authored-by: Mads Rasmussen <[email protected]>
Co-authored-by: Jacob Overgaard <[email protected]>

Author: 4 people

README.md

@@ -37,6 +37,11 @@ If you want to develop a component or contribute to the repository go to ["Get s
 | [`<uui-card-user>`](packages/uui-card-user)                                       | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-card-user?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-card-user)                                       |
 | [`<uui-caret>`](packages/uui-caret)                                               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-caret?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-caret)                                               |
 | [`<uui-checkbox>`](packages/uui-checkbox)                                         | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-checkbox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-checkbox)                                         |
+| [`<uui-color-area>`](packages/uui-color-area)                                     | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-area?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-area)                                     |
+| [`<uui-color-picker>`](packages/uui-color-picker)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-picker?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-picker)                                 |
+| [`<uui-color-slider>`](packages/uui-color-slider)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-slider?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-slider)                                 |
+| [`<uui-color-swatch>`](packages/uui-color-swatch)                                 | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatch?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-swatch)                                 |
+| [`<uui-color-swatches>`](packages/uui-color-swatches)                             | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatches?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-color-swatches)                             |
 | [`<uui-combobox>`](packages/uui-combobox)                                         | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox)                                         |
 | [`<uui-combobox-list>`](packages/uui-combobox-list)                               | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-combobox-list?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-combobox-list)                               |
 | [`<uui-dialog>`](packages/uui-dialog)                                             | [![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-dialog?logoColor=%231B264F)](https://www.npmjs.com/package/@umbraco-ui/uui-dialog)                                             |