diff --git a/README.md b/README.md index ba99edfa9..d3114f91b 100644 --- a/README.md +++ b/README.md @@ -55,42 +55,42 @@ npm i @lion/ The accessibility column indicates whether the functionality is accessible in its core. Aspects like styling and content determine actual accessibility in usage. -| Package | Version | Description | Accessibility | -| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------- | -| **-- Forms --** | | | ✔️ | -| [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--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--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--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--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/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] | +| Package | Version | Description | Accessibility | +| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------------------------- | +| **-- Forms --** | | | ✔️ | +| [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 | ✔️ | +| [form-integrations](?path=/docs/forms-features-overview--main) | [![form-integrations](https://img.shields.io/npm/v/@lion/form-integrations.svg)](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way | ✔️ | +| [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--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--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--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--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/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 diff --git a/packages/ajax/README.md b/packages/ajax/README.md index c2f846a30..2cfd3b6f3 100644 --- a/packages/ajax/README.md +++ b/packages/ajax/README.md @@ -13,10 +13,6 @@ export default { }; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/fetch-system-ajax) for a live demo and documentation - ## Features - only JS functions, no (unnecessarily expensive) web components diff --git a/packages/button/README.md b/packages/button/README.md index c6f056fe1..bb2a874ca 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -19,10 +19,6 @@ export default { export const main = () => html` Default `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/buttons-button) for a live demo and API documentation - ## Features - Clickable area that is bigger than visual size diff --git a/packages/calendar/README.md b/packages/calendar/README.md index 18d1405eb..e7b1b49ef 100644 --- a/packages/calendar/README.md +++ b/packages/calendar/README.md @@ -30,10 +30,6 @@ export const main = () => { }; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/calendar-standalone) for a live demo and API documentation - ## Features - fully accessible keyboard navigation (Arrow Keys, PgUp, PgDn, ALT+PgUp, ALT+PgDn) diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md index a02edd8e4..1e3f1b3fc 100644 --- a/packages/checkbox-group/README.md +++ b/packages/checkbox-group/README.md @@ -5,7 +5,7 @@ `lion-checkbox-group` component enhances the functionality of the native `` element. Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle. -> You should use [lion-checkbox](https://github.com/ing-bank/lion/tree/master/packages/checkbox) elements as the children of the ``. +> You should use `` elements as the children of the ``. ```js script import { html } from 'lit-html'; @@ -31,15 +31,11 @@ export const main = () => html` `; ``` -> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result. - -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group--default-story) for a live demo and API documentation +> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--main)'s serialization result. ## Features -Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), +Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--main), it has all the features a fieldset has. ## How to use diff --git a/packages/core/README.md b/packages/core/README.md index cf60eb5da..35feecce6 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -17,10 +17,6 @@ export default { import { LitElement, html, render } from '@lion/core'; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/core) for a live demo and API documentation - ## Features - [function to deduplicate mixins (dedupeMixin)](#deduping-of-mixins) diff --git a/packages/dialog/README.md b/packages/dialog/README.md index d272b55a0..2a02d13f7 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -36,10 +36,6 @@ export const main = () => html` `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/overlays-specific-wc-dialog) for a live demo and documentation - ## Features - Show content when clicking the invoker diff --git a/packages/fieldset/README.md b/packages/fieldset/README.md index d08587be6..bb26db011 100644 --- a/packages/fieldset/README.md +++ b/packages/fieldset/README.md @@ -18,9 +18,9 @@ export default { We have three specific fieldset implementations: -- [lion-form](?path=/docs/forms-form-overview--page) -- [lion-checkbox-group](?path=/docs/forms-checkbox-group--default-story) -- [lion-radio-group](?path=/docs/forms-radio-group--default-story) +- [lion-form](?path=/docs/forms-form-overview--main) +- [lion-checkbox-group](?path=/docs/forms-checkbox-group--main) +- [lion-radio-group](?path=/docs/forms-radio-group--main) ```js story export const main = () => html` @@ -35,15 +35,11 @@ A native fieldset element should always have a legend-element for a11y purposes. However, our fieldset element is not native and should not have a legend-element. Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`. -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset-overview--page) for a live demo and documentation - ## Features - Easy retrieval of form data based on field names - Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states) -- Can have [validate](?path=/docs/forms-validation-overview--page) on fieldset level and shows the validation feedback below the fieldset +- Can have [validate](?path=/docs/forms-validation-examples) on fieldset level and shows the validation feedback below the fieldset - Can disable input fields on fieldset level - Accessible out of the box @@ -69,4 +65,4 @@ import '@lion/fieldset/lion-fieldset.js'; ``` -For more examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--default-story). +For more examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples). diff --git a/packages/form-integrations/README.md b/packages/form-integrations/README.md index bd2bf01e4..3b127641f 100644 --- a/packages/form-integrations/README.md +++ b/packages/form-integrations/README.md @@ -20,21 +20,21 @@ For a more in depth description look into the [Form System Overview](?path=/docs ## Packages -| 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 | +| 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 | +| [form-integrations](?path=/docs/forms-features-overview--main) | [![form-integrations](https://img.shields.io/npm/v/@lion/form-integrations.svg)](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way | +| [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 | diff --git a/packages/form-integrations/package.json b/packages/form-integrations/package.json index 3407bb063..a22714b31 100644 --- a/packages/form-integrations/package.json +++ b/packages/form-integrations/package.json @@ -38,7 +38,6 @@ "@lion/button": "0.7.2", "@lion/checkbox-group": "0.10.1", "@lion/core": "0.7.0", - "@lion/field": "0.13.1", "@lion/fieldset": "0.13.1", "@lion/form": "0.6.1", "@lion/form-core": "0.1.1", diff --git a/packages/form/README.md b/packages/form/README.md index f0b020efe..6931729d2 100644 --- a/packages/form/README.md +++ b/packages/form/README.md @@ -24,10 +24,6 @@ export const main = () => html` `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form-overview--page) for a live demo and documentation - ## Features - Data synchronization with models @@ -37,8 +33,7 @@ export const main = () => html` - Registration mechanism for [form controls](?path=/docs/forms-system-overview--page) - Accessible out of the box -For more information about fields that are designed for lion-form, please read -[Forms](?path=/docs/forms-system-overview--page). +For more information about fields that are designed for lion-form, please read [forms](?path=/docs/forms-system-overview--page). ## How to use @@ -63,5 +58,3 @@ import '@lion/form/lion-form.js'; ``` - -For more examples please look at [Form Examples](?path=/docs/forms-form-examples--default-story). diff --git a/packages/helpers/README.md b/packages/helpers/README.md index 06d1817fc..1553e0d6f 100644 --- a/packages/helpers/README.md +++ b/packages/helpers/README.md @@ -13,10 +13,6 @@ A helpers package that contains several helpers that are used inside lion but ca These helpers are considered developer tools, not actual things to use in production. Therefore, they may not have the same quality standards as our other packages. -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/helpers) for a live demo and API documentation - ## Packages | Package | Version | Description | diff --git a/packages/helpers/sb-action-logger/README.md b/packages/helpers/sb-action-logger/README.md index 4940adb06..28bd879a0 100644 --- a/packages/helpers/sb-action-logger/README.md +++ b/packages/helpers/sb-action-logger/README.md @@ -63,10 +63,6 @@ This connects the logger element to the trigger. If you try logging complex values such as arrays, objects or promises, you should expect to get only the string interpretation as the output in this logger. -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/helpers-storybook-action-logger) for a live demo and API documentation - ## Features: - A public method `log` to log things to the action logger. diff --git a/packages/icon/README.md b/packages/icon/README.md index 06dad0f5b..a2663d314 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -35,10 +35,6 @@ export const main = () => html` `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/icon-system-icon) for a live demo and documentation - ## How to use ### Installation diff --git a/packages/input-amount/README.md b/packages/input-amount/README.md index dfab158b9..569648cb6 100644 --- a/packages/input-amount/README.md +++ b/packages/input-amount/README.md @@ -28,10 +28,6 @@ export const main = () => { }; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount--default-story) for a live demo and API documentation - ## Features - Based on [lion-input](?path=/docs/forms-system-overview--page) diff --git a/packages/input-date/README.md b/packages/input-date/README.md index 056075c5b..edda603a3 100644 --- a/packages/input-date/README.md +++ b/packages/input-date/README.md @@ -21,10 +21,6 @@ loadDefaultFeedbackMessages(); export const main = () => html` `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date--default-story) for a live demo and API documentation - ## Features - Based on [lion-input](?path=/docs/forms-input--default-story) diff --git a/packages/input-datepicker/README.md b/packages/input-datepicker/README.md index 76cdc78a2..d4e58f09c 100644 --- a/packages/input-datepicker/README.md +++ b/packages/input-datepicker/README.md @@ -26,10 +26,6 @@ export const main = () => { }; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker--default-story) for a live demo and API documentation - ## Features - Input field with a datepicker to help to choose a date diff --git a/packages/input-email/README.md b/packages/input-email/README.md index bce136769..c76989955 100644 --- a/packages/input-email/README.md +++ b/packages/input-email/README.md @@ -21,10 +21,6 @@ export const main = () => { }; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email--default-story) for a live demo and API documentation - ## Features - Based on [lion-input](?path=/docs/forms-input--default-story) diff --git a/packages/input-iban/README.md b/packages/input-iban/README.md index 7a436b50f..8afdd5a9f 100644 --- a/packages/input-iban/README.md +++ b/packages/input-iban/README.md @@ -25,10 +25,6 @@ export const main = () => { }; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban--default-story) for a live demo and API documentation - ## Features - Based on [lion-input](?path=/docs/forms-input--default-story) diff --git a/packages/input-range/README.md b/packages/input-range/README.md index b1d5dea5b..e92fb0d7b 100644 --- a/packages/input-range/README.md +++ b/packages/input-range/README.md @@ -19,10 +19,6 @@ export const main = () => html` `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range--default-story) for a live demo and API documentation - ## Features - Based on [lion-input](?path=/docs/forms-input--default-story). diff --git a/packages/input/README.md b/packages/input/README.md index 50ae1048c..795e0902c 100644 --- a/packages/input/README.md +++ b/packages/input/README.md @@ -20,10 +20,6 @@ export default { export const main = () => html` `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input--default-story) for a live demo and API documentation - ## Features - Based on [field](?path=/docs/forms-system-overview--page) diff --git a/packages/localize/README.md b/packages/localize/README.md index 1f3633fee..a254d5d99 100644 --- a/packages/localize/README.md +++ b/packages/localize/README.md @@ -11,10 +11,6 @@ export default { Is meant to translate text into multiple languages. In it's simplest form it is a function that returns the translated text for a namespace + key. -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/localize--page) for a live demo and documentation - ## Features - Uses es modules diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md index 707862ba1..95292c993 100644 --- a/packages/radio-group/README.md +++ b/packages/radio-group/README.md @@ -32,10 +32,6 @@ export const main = () => html` - Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result. - If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group--default-story) for a live demo and API documentation - ## Features Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has. diff --git a/packages/select/README.md b/packages/select/README.md index f4348b766..3d03cf120 100644 --- a/packages/select/README.md +++ b/packages/select/README.md @@ -33,10 +33,6 @@ export const main = () => html` `; ``` -## Live Demo/Documentation - -> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select--default-story) for a live demo and API documentation - For this form element it is important to put the `slot="input"` with the native `select` yourself, because you are responsible for filling it with `