Merge pull request #748 from ing-bank/chore/demo-updates
Chore/demo updates
This commit is contained in:
Joren Broekema
GitHub
commit
8f6dd96fb5
29 changed files with 63 additions and 171 deletions
72
README.md
72
README.md
|
|
@ -55,42 +55,42 @@ npm i @lion/<package-name>
|
|||
|
||||
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) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ |
|
||||
| [form-core](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all form controls | ✔️ |
|
||||
| [field](?path=/docs/forms-field-overview--page) | [](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs | ✔️ |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--main) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ |
|
||||
| [checkbox-group](?path=/docs/forms-checkbox-group--main) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ |
|
||||
| [input](?path=/docs/forms-input--main) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ |
|
||||
| [input-amount](?path=/docs/forms-input-amount--main) | [](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts | ✔️ |
|
||||
| [input-date](?path=/docs/forms-input-date--main) | [](https://www.npmjs.com/package/@lion/input-date) | Input element for dates | ✔️ |
|
||||
| [input-datepicker](?path=/docs/forms-input-datepicker--main) | [](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker | ✔️ |
|
||||
| [input-email](?path=/docs/forms-input-email--main) | [](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails | ✔️ |
|
||||
| [input-iban](?path=/docs/forms-input-iban--main) | [](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs | ✔️ |
|
||||
| [input-range](?path=/docs/forms-input-range--main) | [](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values | ✔️ |
|
||||
| [radio-group](?path=/docs/forms-radio-group--main) | [](https://www.npmjs.com/package/@lion/radio-group) | Group of radios | ✔️ |
|
||||
| [select](?path=/docs/forms-select--main) | [](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element | ✔️ |
|
||||
| [select-rich](?path=/docs/forms-select-rich--main) | [](https://www.npmjs.com/package/@lion/select-rich) | 'rich' version of the native dropdown element | ✔️ |
|
||||
| [textarea](?path=/docs/forms-textarea--main) | [](https://www.npmjs.com/package/@lion/textarea) | Multiline text input | ✔️ |
|
||||
| **-- Buttons --** | | | |
|
||||
| [button](?path=/docs/buttons-button--main) | [](https://www.npmjs.com/package/@lion/button) | Button | ✔️ |
|
||||
| [switch](?path=/docs/buttons-switch--main) | [](https://www.npmjs.com/package/@lion/switch) | Switch | ✔️ |
|
||||
| **-- Overlays --** | | | |
|
||||
| [overlays](?path=/docs/overlays-system-overview--main) | [](https://www.npmjs.com/package/@lion/overlays) | Overlay System | ✔️ |
|
||||
| [dialog](?path=/docs/overlays-dialog--main) | [](https://www.npmjs.com/package/@lion/dialog) | Dialog element | ✔️ |
|
||||
| [tooltip](?path=/docs/overlays-tooltip--main) | [](https://www.npmjs.com/package/@lion/tooltip) | Tooltip element | [#175][i175] |
|
||||
| **-- Icons --** | | | |
|
||||
| [icon](?path=/docs/icons-icon--main) | [](https://www.npmjs.com/package/@lion/icon) | Display our svg icons | [#173][i173], [#172][i172] |
|
||||
| **-- Navigation --** | | | |
|
||||
| [steps](?path=/docs/navigation-steps--main) | [](https://www.npmjs.com/package/@lion/steps) | Multi Step System | n/a |
|
||||
| [tabs](?path=/docs/navigation-tabs--main) | [](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) | [](https://www.npmjs.com/package/@lion/core) | Core System (exports LitElement, lit-html) | n/a |
|
||||
| [localize](?path=/docs/localize-intro--page) | [](https://www.npmjs.com/package/@lion/localize) | Localize and translate your application/components | n/a |
|
||||
| [ajax](?path=/docs/others-ajax--performing-get-requests) | [](https://www.npmjs.com/package/@lion/ajax) | Fetching data via ajax request | n/a |
|
||||
| [calendar](?path=/docs/others-calendar--main) | [](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) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ |
|
||||
| [form-core](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all form controls | ✔️ |
|
||||
| [form-integrations](?path=/docs/forms-features-overview--main) | [](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way | ✔️ |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--main) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ |
|
||||
| [checkbox-group](?path=/docs/forms-checkbox-group--main) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ |
|
||||
| [input](?path=/docs/forms-input--main) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ |
|
||||
| [input-amount](?path=/docs/forms-input-amount--main) | [](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts | ✔️ |
|
||||
| [input-date](?path=/docs/forms-input-date--main) | [](https://www.npmjs.com/package/@lion/input-date) | Input element for dates | ✔️ |
|
||||
| [input-datepicker](?path=/docs/forms-input-datepicker--main) | [](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker | ✔️ |
|
||||
| [input-email](?path=/docs/forms-input-email--main) | [](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails | ✔️ |
|
||||
| [input-iban](?path=/docs/forms-input-iban--main) | [](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs | ✔️ |
|
||||
| [input-range](?path=/docs/forms-input-range--main) | [](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values | ✔️ |
|
||||
| [radio-group](?path=/docs/forms-radio-group--main) | [](https://www.npmjs.com/package/@lion/radio-group) | Group of radios | ✔️ |
|
||||
| [select](?path=/docs/forms-select--main) | [](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element | ✔️ |
|
||||
| [select-rich](?path=/docs/forms-select-rich--main) | [](https://www.npmjs.com/package/@lion/select-rich) | 'rich' version of the native dropdown element | ✔️ |
|
||||
| [textarea](?path=/docs/forms-textarea--main) | [](https://www.npmjs.com/package/@lion/textarea) | Multiline text input | ✔️ |
|
||||
| **-- Buttons --** | | | |
|
||||
| [button](?path=/docs/buttons-button--main) | [](https://www.npmjs.com/package/@lion/button) | Button | ✔️ |
|
||||
| [switch](?path=/docs/buttons-switch--main) | [](https://www.npmjs.com/package/@lion/switch) | Switch | ✔️ |
|
||||
| **-- Overlays --** | | | |
|
||||
| [overlays](?path=/docs/overlays-system-overview--main) | [](https://www.npmjs.com/package/@lion/overlays) | Overlay System | ✔️ |
|
||||
| [dialog](?path=/docs/overlays-dialog--main) | [](https://www.npmjs.com/package/@lion/dialog) | Dialog element | ✔️ |
|
||||
| [tooltip](?path=/docs/overlays-tooltip--main) | [](https://www.npmjs.com/package/@lion/tooltip) | Tooltip element | [#175][i175] |
|
||||
| **-- Icons --** | | | |
|
||||
| [icon](?path=/docs/icons-icon--main) | [](https://www.npmjs.com/package/@lion/icon) | Display our svg icons | [#173][i173], [#172][i172] |
|
||||
| **-- Navigation --** | | | |
|
||||
| [steps](?path=/docs/navigation-steps--main) | [](https://www.npmjs.com/package/@lion/steps) | Multi Step System | n/a |
|
||||
| [tabs](?path=/docs/navigation-tabs--main) | [](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) | [](https://www.npmjs.com/package/@lion/core) | Core System (exports LitElement, lit-html) | n/a |
|
||||
| [localize](?path=/docs/localize-intro--page) | [](https://www.npmjs.com/package/@lion/localize) | Localize and translate your application/components | n/a |
|
||||
| [ajax](?path=/docs/others-ajax--performing-get-requests) | [](https://www.npmjs.com/package/@lion/ajax) | Fetching data via ajax request | n/a |
|
||||
| [calendar](?path=/docs/others-calendar--main) | [](https://www.npmjs.com/package/@lion/calendar) | Standalone calendar | [#195][i195], [#194][i194] |
|
||||
|
||||
## How to use
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -19,10 +19,6 @@ export default {
|
|||
export const main = () => html` <lion-button>Default</lion-button> `;
|
||||
```
|
||||
|
||||
## 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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
`lion-checkbox-group` component enhances the functionality of the native `<input type="checkbox">` 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 `<lion-checkbox-group>`.
|
||||
> You should use `<lion-checkbox>` elements as the children of the `<lion-checkbox-group>`.
|
||||
|
||||
```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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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';
|
|||
</lion-fieldset>
|
||||
```
|
||||
|
||||
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).
|
||||
|
|
|
|||
|
|
@ -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) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes |
|
||||
| [form-core](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all controls |
|
||||
| [field](?path=/docs/forms-field-overview--page) | [](https://www.npmjs.com/package/@lion/field) | Base class for all inputs |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--main) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
|
||||
| [form](?path=/docs/forms-form-overview--main) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
|
||||
| [input](?path=/docs/forms-input--main) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings |
|
||||
| [input-amount](?path=/docs/forms-input-amount--main) | [](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts |
|
||||
| [input-date](?path=/docs/forms-input-date--main) | [](https://www.npmjs.com/package/@lion/input-date) | Input element for dates |
|
||||
| [input-datepicker](?path=/docs/forms-input-datepicker--main) | [](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker |
|
||||
| [input-email](?path=/docs/forms-input-email--main) | [](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails |
|
||||
| [input-iban](?path=/docs/forms-input-iban--main) | [](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs |
|
||||
| [input-range](?path=/docs/forms-input-range--main) | [](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values |
|
||||
| [radio-group](?path=/docs/forms-radio-group--main) | [](https://www.npmjs.com/package/@lion/radio-group) | Group of radios |
|
||||
| [select](?path=/docs/forms-select--main) | [](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element |
|
||||
| [select-rich](?path=/docs/forms-select-rich--main) | [](https://www.npmjs.com/package/@lion/select-rich) | 'rich' version of the native dropdown element |
|
||||
| [textarea](?path=/docs/forms-textarea--main) | [](https://www.npmjs.com/package/@lion/textarea) | Multiline text input |
|
||||
| Package | Version | Description |
|
||||
| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
|
||||
| [checkbox-group](?path=/docs/forms-checkbox-group--main) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes |
|
||||
| [form-core](?path=/docs/forms-system-overview--page) | [](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all controls |
|
||||
| [form-integrations](?path=/docs/forms-features-overview--main) | [](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way |
|
||||
| [fieldset](?path=/docs/forms-fieldset-overview--main) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs |
|
||||
| [form](?path=/docs/forms-form-overview--main) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
|
||||
| [input](?path=/docs/forms-input--main) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings |
|
||||
| [input-amount](?path=/docs/forms-input-amount--main) | [](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts |
|
||||
| [input-date](?path=/docs/forms-input-date--main) | [](https://www.npmjs.com/package/@lion/input-date) | Input element for dates |
|
||||
| [input-datepicker](?path=/docs/forms-input-datepicker--main) | [](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker |
|
||||
| [input-email](?path=/docs/forms-input-email--main) | [](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails |
|
||||
| [input-iban](?path=/docs/forms-input-iban--main) | [](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs |
|
||||
| [input-range](?path=/docs/forms-input-range--main) | [](https://www.npmjs.com/package/@lion/input-range) | Input element for a range of values |
|
||||
| [radio-group](?path=/docs/forms-radio-group--main) | [](https://www.npmjs.com/package/@lion/radio-group) | Group of radios |
|
||||
| [select](?path=/docs/forms-select--main) | [](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element |
|
||||
| [select-rich](?path=/docs/forms-select-rich--main) | [](https://www.npmjs.com/package/@lion/select-rich) | 'rich' version of the native dropdown element |
|
||||
| [textarea](?path=/docs/forms-textarea--main) | [](https://www.npmjs.com/package/@lion/textarea) | Multiline text input |
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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';
|
|||
</form>
|
||||
</lion-form>
|
||||
```
|
||||
|
||||
For more examples please look at [Form Examples](?path=/docs/forms-form-examples--default-story).
|
||||
|
|
|
|||
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -21,10 +21,6 @@ loadDefaultFeedbackMessages();
|
|||
export const main = () => html` <lion-input-date label="Date"></lion-input-date> `;
|
||||
```
|
||||
|
||||
## 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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -20,10 +20,6 @@ export default {
|
|||
export const main = () => html` <lion-input label="First Name"></lion-input> `;
|
||||
```
|
||||
|
||||
## 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)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
|
|
@ -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 `<option>`s.
|
||||
For most other form elements in `lion` we do this for you, because there's no need to put html inside the native form inputs.
|
||||
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@ export default {
|
|||
};
|
||||
```
|
||||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/steps-steps) for a live demo and API documentation
|
||||
|
||||
## Features
|
||||
|
||||
- navigate between different steps with 'previous' and 'next' functions.
|
||||
|
|
|
|||
|
|
@ -18,10 +18,6 @@ export default {
|
|||
export const main = () => html` <lion-switch label="Label" help-text="Help text"></lion-switch> `;
|
||||
```
|
||||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/buttons-switch) for a live demo and documentation
|
||||
|
||||
## Features
|
||||
|
||||
- Get or set the checked state (boolean) - `checked` boolean attribute
|
||||
|
|
|
|||
|
|
@ -29,10 +29,6 @@ export const main = () => html`
|
|||
`;
|
||||
```
|
||||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/tabs) for a live demo and API documentation
|
||||
|
||||
## How to use
|
||||
|
||||
### Installation
|
||||
|
|
|
|||
|
|
@ -23,10 +23,6 @@ export const main = () => html`
|
|||
`;
|
||||
```
|
||||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea--default-story) for a live demo and API documentation
|
||||
|
||||
## Features
|
||||
|
||||
- Default rows is 2 and it will grow to max-rows of 6.
|
||||
|
|
|
|||
|
|
@ -55,10 +55,6 @@ export const main = () => html`
|
|||
`;
|
||||
```
|
||||
|
||||
## Live Demo/Documentation
|
||||
|
||||
> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/overlays-specific-wc-tooltip) for a live demo and API documentation
|
||||
|
||||
## Features
|
||||
|
||||
- Show content when hovering the invoker
|
||||
|
|
|
|||
Loading…
Reference in a new issue