diff --git a/README.md b/README.md index d3114f91b..77e95e8e3 100644 --- a/README.md +++ b/README.md @@ -30,20 +30,51 @@ We do have a [live Storybook](http://lion-web-components.netlify.com) which show > Note: These demos may look a little bland but that is on purpose. They only come with functional stylings. > This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings. -## Systems +## Content Lion web components is logically organized in groups of systems. -| System | Description | -| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -| [Forms](?path=/docs/forms-intro--page) | A system that lets you make complex forms with ease. Add validation, translations and use a wide range of pre made form controls. | -| [Buttons](?path=/docs/buttons-intro--page) | Every application needs buttons to allow interactions. These web components bring common UX patterns while still full integrated with (native) forms. | -| [Overlays](?path=/docs/overlays-intro--page) | If something needs to overlay content this is your place. Dialogs, Tooltips and a full overlay system to build more if needed | -| [Navigation](?path=/docs/navigation-intro--page) | Components which are used to guide users | -| [Localize](?path=/docs/localize-intro--page) | Localize text, numbers, dates and a way to store/fetch these data within web components | -| [Icons](?path=/docs/icons-intro--page) | Loading and displaying icons | -| [Others](?path=/docs/others-intro--page) | Features not fitting any other category | -| [Helpers](?path=/docs/helpers-intro--page) | Helpers to make your and your life easier | +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 | +| ------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------- | +| **-- [Form System](https://lion-web-components.netlify.app/?path=/docs/forms-intro--page) --** | | A system that lets you make complex forms with ease, including: validation, translations. | ✔️ | +| [form](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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 | [#243][i243] | +| [textarea](https://lion-web-components.netlify.app/?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 | ✔️ | +| **-- [Button System](https://lion-web-components.netlify.app/?path=/docs/buttons-intro--page) --** | | These web components bring common UX patterns while still full integrated with (native) forms. | | +| [button](https://lion-web-components.netlify.app/?path=/docs/buttons-button--main) | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button) | Button | ✔️ | +| [switch](https://lion-web-components.netlify.app/?path=/docs/buttons-switch--main) | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch) | Switch | ✔️ | +| **-- [Overlay System](https://lion-web-components.netlify.app/?path=/docs/overlays-intro--page) --** | | If something needs to overlay content this is your place. | | +| [overlays](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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] | +| **-- [Navigation System](https://lion-web-components.netlify.app/?path=/docs/navigation-intro--page) --** | | Components which are used to guide users | | +| [steps](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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 | +| **-- [localize System](https://lion-web-components.netlify.app/?path=/docs/localize-intro--page) --** | | Localize text, numbers, dates and a way to store/fetch these data. | | +| [localize](https://lion-web-components.netlify.app/?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 | +| **-- [Icon System](https://lion-web-components.netlify.app/?path=/docs/icons-intro--page) --** | | Loading and displaying icons | | +| [icon](https://lion-web-components.netlify.app/?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] | +| **-- [Others](https://lion-web-components.netlify.app/?path=/docs/others-intro--page) --** | | Features not fitting any other category | | +| [core](https://lion-web-components.netlify.app/?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 | +| [ajax](https://lion-web-components.netlify.app/?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](https://lion-web-components.netlify.app/?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] | +| **-- [Helpers](https://lion-web-components.netlify.app/?path=/docs/helpers-intro--page) --** | [![helpers](https://img.shields.io/npm/v/@lion/helpers.svg)](https://www.npmjs.com/package/@lion/helpers) | Helpers to make your and your life easier | | +| [sb-action-logger](https://lion-web-components.netlify.app/?path=/docs/helpers-storybook-action-logger--main) | | Storybook action logger | ## How to install @@ -51,47 +82,6 @@ Lion web components is logically organized in groups of systems. npm i @lion/ ``` -## Content - -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 | ✔️ | -| [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 ### Use a Web Component @@ -159,12 +149,12 @@ This means you only have to apply your own Design System: by delivering styles, ## Coding guidelines -Check out our [coding guidelines](./docs/README.md) for more detailed information. +Check out our [coding guidelines](https://lion-web-components.netlify.app/?path=/docs/guidelines-intro--page) for more detailed information. ## How to contribute Lion Web Components are only as good as its contributions. -Read our [contribution guide](./CONTRIBUTING.md) and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them. +Read our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTRIBUTING.md) and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them. ## Contact @@ -178,3 +168,4 @@ You can join the Polymer slack by visiting [https://www.polymer-project.org/slac [i175]: https://github.com/ing-bank/lion/issues/175 [i194]: https://github.com/ing-bank/lion/issues/194 [i195]: https://github.com/ing-bank/lion/issues/195 +[i243]: https://github.com/ing-bank/lion/issues/243 diff --git a/packages/helpers/README.md b/packages/helpers/README.md index 1553e0d6f..4175fd176 100644 --- a/packages/helpers/README.md +++ b/packages/helpers/README.md @@ -15,9 +15,9 @@ Therefore, they may not have the same quality standards as our other packages. ## Packages -| Package | Version | Description | -| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | ---------------- | -| [sb-action-logger](?path=/docs/helpers-storybook-action-logger--default-story) | [![sb-action-logger](https://img.shields.io/npm/v/sb-action-logger.svg)](https://www.npmjs.com/package/sb-action-logger) | sb-action-logger | +| Package | Description | +| --------------------------------------------------------------------- | ----------------------- | +| [sb-action-logger](?path=/docs/helpers-storybook-action-logger--main) | Storybook action logger | ## Installation