diff --git a/.storybook/preview.js b/.storybook/preview.js index 69cccf7ce..aa4ddac3a 100755 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -28,7 +28,17 @@ async function run() { options: { showRoots: true, storySort: sortEachDepth([ - ['Intro', 'Forms', 'Buttons', 'Overlays', 'Navigation', 'Localize', 'Icons', '...'], + [ + 'Intro', + 'Forms', + 'Buttons', + 'Overlays', + 'Navigation', + 'Localize', + 'Icons', + 'Others', + '...', + ], ['Intro', 'Features Overview', '...', 'Validation', 'System'], ['Overview', '...', '_internals'], ]), diff --git a/README.md b/README.md index a2e97db92..ba99edfa9 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ For some more details see the [announcement blog post](https://medium.com/ing-bl We do have a [live Storybook](http://lion-web-components.netlify.com) which shows all our components. -**Please note:** This project uses Yarn [Workspaces](https://classic.yarnpkg.com/en/docs/workspaces). If you want to run all demos locally you need to get [Yarn](https://classic.yarnpkg.com/en/docs/install) and install all depencies by executing `yarn install`. +**Please note:** This project uses Yarn [Workspaces](https://classic.yarnpkg.com/en/docs/workspaces). If you want to run all demos locally you need to get [Yarn](https://classic.yarnpkg.com/en/docs/install) and install all dependencies by executing `yarn install`. ## Features @@ -58,39 +58,39 @@ The accessibility column indicates whether the functionality is accessible in it | Package | Version | Description | Accessibility | | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------- | | **-- Forms --** | | | ✔️ | -| [form](?path=/docs/forms-form-overview--page) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ | -| [form-core](?path=/docs/forms-system-overview--page) | [![form-core](https://img.shields.io/npm/v/@lion/form-core.svg)](https://www.npmjs.com/package/@lion/field) | Core functionality for all form controls | ✔️ | -| [fieldset](?path=/docs/forms-fieldset-overview--page) | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ | -| [checkbox](?path=/docs/forms-checkbox--default-story) | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element | ✔️ | -| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ | -| [input](?path=/docs/forms-input--default-story) | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ | -| [input-amount](?path=/docs/forms-input-amount--default-story) | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts | ✔️ | -| [input-date](?path=/docs/forms-input-date--default-story) | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date) | Input element for dates | ✔️ | -| [input-datepicker](?path=/docs/forms-input-datepicker--default-story) | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker | ✔️ | -| [input-email](?path=/docs/forms-input-email--default-story) | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails | ✔️ | -| [input-iban](?path=/docs/forms-input-iban--default-story) | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs | ✔️ | -| [input-range](?path=/docs/forms-input-range--default-story) | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values | ✔️ | -| [radio](?path=/docs/forms-radio--default-story) | [![radio](https://img.shields.io/npm/v/@lion/radio.svg)](https://www.npmjs.com/package/@lion/radio) | Radio from element | ✔️ | -| [radio-group](?path=/docs/forms-radio-group--default-story) | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group) | Group of radios | ✔️ | -| [select](?path=/docs/forms-select--default-story) | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element | ✔️ | -| [textarea](?path=/docs/forms-textarea--default-story) | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea) | Multiline text input | ✔️ | +| [form](?path=/docs/forms-form-overview--main) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ | +| [form-core](?path=/docs/forms-system-overview--page) | [![form-core](https://img.shields.io/npm/v/@lion/form-core.svg)](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all form controls | ✔️ | +| [field](?path=/docs/forms-field-overview--page) | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs | ✔️ | +| [fieldset](?path=/docs/forms-fieldset-overview--main) | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ | +| [checkbox-group](?path=/docs/forms-checkbox-group--main) | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ | +| [input](?path=/docs/forms-input--main) | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ | +| [input-amount](?path=/docs/forms-input-amount--main) | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts | ✔️ | +| [input-date](?path=/docs/forms-input-date--main) | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date) | Input element for dates | ✔️ | +| [input-datepicker](?path=/docs/forms-input-datepicker--main) | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker | ✔️ | +| [input-email](?path=/docs/forms-input-email--main) | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails | ✔️ | +| [input-iban](?path=/docs/forms-input-iban--main) | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs | ✔️ | +| [input-range](?path=/docs/forms-input-range--main) | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values | ✔️ | +| [radio-group](?path=/docs/forms-radio-group--main) | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group) | Group of radios | ✔️ | +| [select](?path=/docs/forms-select--main) | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element | ✔️ | +| [select-rich](?path=/docs/forms-select-rich--main) | [![select-rich](https://img.shields.io/npm/v/@lion/select-rich.svg)](https://www.npmjs.com/package/@lion/select-rich) | 'rich' version of the native dropdown element | ✔️ | +| [textarea](?path=/docs/forms-textarea--main) | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea) | Multiline text input | ✔️ | | **-- Buttons --** | | | | -| [button](?path=/docs/buttons-button--default-story) | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button) | Button | ✔️ | -| [switch](?path=/docs/buttons-switch--default-off) | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch) | Switch | ✔️ | +| [button](?path=/docs/buttons-button--main) | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button) | Button | ✔️ | +| [switch](?path=/docs/buttons-switch--main) | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch) | Switch | ✔️ | | **-- Overlays --** | | | | -| [overlays](?path=/docs/overlays-system-overview--default-story) | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays) | Overlay System | ✔️ | -| [dialog](?path=/docs/overlays-dialog--default-story) | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog) | Dialog element | ✔️ | -| [tooltip](?path=/docs/overlays-tooltip--default-story) | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip) | Tooltip element | [#175][i175] | +| [overlays](?path=/docs/overlays-system-overview--main) | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays) | Overlay System | ✔️ | +| [dialog](?path=/docs/overlays-dialog--main) | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog) | Dialog element | ✔️ | +| [tooltip](?path=/docs/overlays-tooltip--main) | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip) | Tooltip element | [#175][i175] | | **-- Icons --** | | | | -| [icon](?path=/docs/icons-icon--default-story) | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon) | Display our svg icons | [#173][i173], [#172][i172] | +| [icon](?path=/docs/icons-icon--main) | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon) | Display our svg icons | [#173][i173], [#172][i172] | | **-- Navigation --** | | | | -| [steps](?path=/docs/navigation-steps--default-story) | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps) | Multi Step System | n/a | -| [tabs](?path=/docs/navigation-tabs--default-story) | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs) | Move between a small number of equally important views | n/a | +| [steps](?path=/docs/navigation-steps--main) | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps) | Multi Step System | n/a | +| [tabs](?path=/docs/navigation-tabs--main) | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs) | Move between a small number of equally important views | n/a | | **-- Others --** | | | | -| [core](?path=/docs/deep-dives-core--page) | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core) | Core System (exports LitElement, lit-html) | n/a | -| [localize](?path=/docs/localize-localize--default-story) | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize) | Localize and translate your application/components | n/a | -| [ajax](?path=/docs/others-ajax--default-story) | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax) | Fetching data via ajax request | n/a | -| [calendar](?path=/docs/calendar--default-story) | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar) | Standalone calendar | [#195][i195], [#194][i194] | +| [core](?path=/docs/others-system-core--page) | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core) | Core System (exports LitElement, lit-html) | n/a | +| [localize](?path=/docs/localize-intro--page) | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize) | Localize and translate your application/components | n/a | +| [ajax](?path=/docs/others-ajax--performing-get-requests) | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax) | Fetching data via ajax request | n/a | +| [calendar](?path=/docs/others-calendar--main) | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar) | Standalone calendar | [#195][i195], [#194][i194] | ## How to use @@ -157,7 +157,7 @@ context, supports many edge cases and is accessible in all relevant screen reade Lion aims to do the heavy lifting for you. This means you only have to apply your own Design System: by delivering styles, configuring components and adding a minimal set of custom logic on top. -## Coding guidlines +## Coding guidelines Check out our [coding guidelines](./docs/README.md) for more detailed information. diff --git a/packages/form-integrations/README.md b/packages/form-integrations/README.md index 268ef0857..bd2bf01e4 100644 --- a/packages/form-integrations/README.md +++ b/packages/form-integrations/README.md @@ -20,19 +20,21 @@ For a more in depth description look into the [Form System Overview](?path=/docs ## Packages -| Package | Description | -| ----------------------------------------------------------------- | ----------------------------------- | -| [checkbox](?path=/docs/forms-checkbox--default-story) | Checkbox form element | -| [checkbox-group](?path=/docs/forms-checkbox-group--default-story) | Group of checkboxes | -| [form-core](?path=/docs/forms-field--default-story) | Core functionality for all controls | -| [fieldset](?path=/docs/forms-fieldset-overview--page) | Group for form inputs | -| [form](?path=/docs/forms-form-overview--page) | Wrapper for multiple form elements | -| [input](?path=/docs/forms-input--default-story) | Input element for strings | -| [input-amount](?path=/docs/forms-input-amount--default-story) | Input element for amounts | -| [input-date](?path=/docs/forms-input-date--default-story) | Input element for dates | -| [input-email](?path=/docs/forms-input-email--default-story) | Input element for e-mails | -| [input-iban](?path=/docs/forms-input-iban--default-story) | Input element for IBANs | -| [radio](?path=/docs/forms-radio--default-story) | Radio form element | -| [radio-group](?path=/docs/forms-radio-group--default-story) | Group of radios | -| [select](?path=/docs/forms-select--default-story) | Simple native dropdown element | -| [textarea](?path=/docs/forms-textarea--default-story) | Multiline text input | +| Package | Version | Description | +| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------| +| [checkbox-group](?path=/docs/forms-checkbox-group--main) | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | +| [form-core](?path=/docs/forms-system-overview--page) | [![form-core](https://img.shields.io/npm/v/@lion/form-core.svg)](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all controls | +| [field](?path=/docs/forms-field-overview--page) | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field) | Base class for all inputs | +| [fieldset](?path=/docs/forms-fieldset-overview--main) | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | +| [form](?path=/docs/forms-form-overview--main) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | +| [input](?path=/docs/forms-input--main) | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input) | Input element for strings | +| [input-amount](?path=/docs/forms-input-amount--main) | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts | +| [input-date](?path=/docs/forms-input-date--main) | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date) | Input element for dates | +| [input-datepicker](?path=/docs/forms-input-datepicker--main) | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker | +| [input-email](?path=/docs/forms-input-email--main) | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails | +| [input-iban](?path=/docs/forms-input-iban--main) | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs | +| [input-range](?path=/docs/forms-input-range--main) | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values | +| [radio-group](?path=/docs/forms-radio-group--main) | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group) | Group of radios | +| [select](?path=/docs/forms-select--main) | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element | +| [select-rich](?path=/docs/forms-select-rich--main) | [![select-rich](https://img.shields.io/npm/v/@lion/select-rich.svg)](https://www.npmjs.com/package/@lion/select-rich) | 'rich' version of the native dropdown element | +| [textarea](?path=/docs/forms-textarea--main) | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea) | Multiline text input |