ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #1980 from ing-bank/chore/readme-update

Browse source 
chore: readme update
This commit is contained in:
SynnefonK 2023-05-24 09:33:20 +02:00 committed by GitHub
commit d4085cc8c0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
README.md
View file

@ -8,15 +8,15 @@
</p> </p>
<p align="center"> <p align="center">
<a href="https://github.com/modernweb-dev/rocket/actions" <a href="https://github.com/ing-bank/lion/issues"
><img ><img
src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square" src="https://badgen.net/github/open-issues/ing-bank/lion"
alt="GitHub Actions workflow status" alt="Lion open issues status"
/></a> /></a>
<a href="https://github.com/modernweb-dev/rocket/actions" <a href="https://github.com/ing-bank/lion/pulls"
><img ><img
src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square" src="https://badgen.net/github/open-prs/ing-bank/lion/"
alt="GitHub Actions workflow status" alt="GitHub open pull requests status"
/></a> /></a>
<a href="https://www.tickgit.com/browse?repo=github.com/ing-bank/lion" <a href="https://www.tickgit.com/browse?repo=github.com/ing-bank/lion"
><img ><img
@ -28,12 +28,12 @@
<p align="center"> <p align="center">
<a href="https://lion-web.netlify.app">Website</a> <a href="https://lion-web.netlify.app">Website</a>
· ·
<a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a>
·
<a href="https://lion-web.netlify.app/guides/">Guides</a> <a href="https://lion-web.netlify.app/guides/">Guides</a>
· ·
<a href="https://lion-web.netlify.app/components/">Components</a> <a href="https://lion-web.netlify.app/components/">Components</a>
· ·
<a href="https://lion-web.netlify.app/docs/">Documentation</a>
·
<a href="https://lion-web.netlify.app/blog/">Blog</a> <a href="https://lion-web.netlify.app/blog/">Blog</a>
</p> </p>
@ -42,7 +42,7 @@
They provide an unopinionated, white-label layer that can be extended to your own layer of components. They provide an unopinionated, white-label layer that can be extended to your own layer of components.
- **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies. - **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
- **Accessibility:** Aimed at compliance with the WCAG 2.1 AA standard to create components that are accessible for everybody. - **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
- **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs. - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
- **Modern Code:** Lion is distributes as pure es modules. - **Modern Code:** Lion is distributes as pure es modules.
- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form. - **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
@ -57,7 +57,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
## How to install ## How to install
```bash ```bash
npm i @lion/<package-name> npm i @lion/ui
``` ```
## How to use ## How to use
@ -68,7 +68,7 @@ npm i @lion/<package-name>
```js ```js
import { css } from 'lit'; import { css } from 'lit';
import { LionInput } from '@lion/input'; import { LionInput } from '@lion/ui/input.js';
class MyInput extends LionInput { class MyInput extends LionInput {
static get styles() { static get styles() {
@ -89,7 +89,7 @@ There's a couple of "systems" in lion which have a JavaScript API. Examples are
```html ```html
<script type="module"> <script type="module">
import { ajax } from '@lion/ajax'; import { ajax } from '@lion/ui/ajax.js';
ajax ajax
.fetch('data.json') .fetch('data.json')
@ -106,7 +106,7 @@ You can also use the lion elements directly, although this is likely not a commo
```html ```html
<script type="module"> <script type="module">
import '@lion/input/define'; import '@lion/ui/define/lion-input.js';
</script> </script>
<lion-input name="firstName"></lion-input> <lion-input name="firstName"></lion-input>
@ -122,55 +122,16 @@ When you have an idea on how we could improve, please check our [discussions](ht
## Content ## Content
Lion web components is logically organized in groups of systems. | Name | version | description |
| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
The accessibility column indicates whether the functionality is accessible in its core. Aspects like styling and content determine actual accessibility in usage. | [@lion/ui](https://github.com/ing-bank/lion/tree/master/packages/ui) | <img src="https://img.shields.io/npm/v/@lion/ui.svg" alt="@lion/ui version"/> | Set of components |
| [@lion/ajax](https://github.com/ing-bank/lion/tree/master/packages/ajax) | <img src="https://img.shields.io/npm/v/@lion/ajax.svg" alt="@lion/ajax version"/> | A small wrapper around fetch |
| Package | Version | Description | Accessibility | | [Singleton-manager](https://github.com/ing-bank/lion/tree/master/packages/singleton-manager) | <img src="https://img.shields.io/npm/v/singleton-manager.svg" alt="Singleton-manager version"/> | A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton. Primarily useful if two major version of a package with a singleton is used. |
| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------- | | [Babel plugin extend docs](https://github.com/ing-bank/lion/tree/master/packages-node/babel-plugin-extend-docs) | <img src="https://img.shields.io/npm/v/babel-plugin-extend-docs.svg" alt="babel-plugin-extend-docs version"/> | A plugin which rewrites imports and templates according to a configuration. This enables the reuse of existing documentation from source packages while still using your extensions code. |
| **-- [Form System](https://lion-web.netlify.app/fundamentals/systems/form/overview/) --** | | A system that lets you make complex forms with ease, including: validation, translations. | ✔️ | | [Providence analytics](https://github.com/ing-bank/lion/tree/master/packages-node/providence-analytics) | <img src="https://img.shields.io/npm/v/providence-analytics.svg" alt="providence-analytics version"/> | Providence is the 'All Seeing Eye' that generates usage statistics by analyzing code. It measures the effectivity and popularity of your software. With just a few commands you can measure the impact for (breaking) changes, making your release process more stable and predictable. |
| [combobox](https://lion-web.netlify.app/components/combobox/overview/) | [![combobox](https://img.shields.io/npm/v/@lion/combobox.svg)](https://www.npmjs.com/package/@lion/form) | Text box controlling popup listbox | ✔️ | | [Publish docs](https://github.com/ing-bank/lion/tree/master/packages-node/publish-docs) | <img src="https://img.shields.io/npm/v/publish-docs.svg" alt="publish-docs version"/> | A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package. |
| [form](https://lion-web.netlify.app/components/form/overview) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ | | [Remark extend](https://github.com/ing-bank/lion/tree/master/packages-node/remark-extend) | <img src="https://img.shields.io/npm/v/remark-extend.svg" alt="remark-extend version"/> | A plugin for remark to extend markdown by importing from source files. |
| [form-core](https://lion-web.netlify.app/fundamentals/systems/form/overview/) | [![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 | ✔️ | | [Rocket preset extend lion docs](https://github.com/ing-bank/lion/tree/master/packages-node/rocket-preset-extend-lion-docs) | <img src="https://img.shields.io/npm/v/rocket-preset-extend-lion-docs.svg" alt="rocket-preset-extend-lion-docs version"/> | When maintaining your own extension layer of lion you most likely want to maintain a similar documentation. Copying and rewriting the markdown files works, but whenever something changes you need copy and rewrite again. To do this automatically you can use this preset for [rocket](https://rocket.modern-web.dev/). |
| [form-integrations](https://lion-web.netlify.app/fundamentals/systems/form/overview/) | [![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.netlify.app/components/fieldset/overview/) | [![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.netlify.app/components/checkbox-group/overview/) | [![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.netlify.app/components/input/overview/) | [![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.netlify.app/components/input-amount/overview/) | [![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.netlify.app/components/input-date/overview/) | [![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.netlify.app/components/input-datepicker/overview/) | [![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.netlify.app/components/input-email/overview/) | [![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.netlify.app/components/input-iban/overview/) | [![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.netlify.app/components/input-range/overview/) | [![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 | ✔️ |
| [input-stepper](https://lion-web.netlify.app/components/input-stepper/overview/) | [![input-stepper](https://img.shields.io/npm/v/@lion/input-stepper.svg)](https://www.npmjs.com/package/@lion/input-stepper) | Input stepper element for the predefined range | ✔️ |
| [listbox](https://lion-web.netlify.app/components/listbox/overview/) | [![listbox](https://img.shields.io/npm/v/@lion/listbox.svg)](https://www.npmjs.com/package/@lion/form) | Interactive list with selectable options | ✔️ |
| [radio-group](https://lion-web.netlify.app/components/radio-group/overview/) | [![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.netlify.app/components/select/overview/) | [![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.netlify.app/components/select-rich/overview/) | [![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.netlify.app/components/textarea/overview/) | [![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.netlify.app/components/buttons-intro--page) --** | | These web components bring common UX patterns while still full integrated with (native) forms. | |
| [button](https://lion-web.netlify.app/components/button/overview/) | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button) | Button | ✔️ |
| [switch](https://lion-web.netlify.app/components/switch/overview/) | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch) | Switch | ✔️ |
| **-- [Overlay System](https://lion-web.netlify.app/components/overlays-intro--page) --** | | If something needs to overlay content this is your place. | |
| [overlays](https://lion-web.netlify.app/fundamentals/systems/overlays/overview/) | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays) | Overlay System | ✔️ |
| [dialog](https://lion-web.netlify.app/components/dialog/overview/) | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog) | Dialog element | ✔️ |
| [tooltip](https://lion-web.netlify.app/components/tooltip/overview/) | [![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.netlify.app/components/navigation-intro--page) --** | | Components which are used to guide users | |
| [accordion](https://lion-web.netlify.app/components/accordion/overview/) | [![accordion](https://img.shields.io/npm/v/@lion/accordion.svg)](https://www.npmjs.com/package/@lion/accordion) | Accordion | ✔️ |
| [pagination](https://lion-web.netlify.app/components/pagination/overview/) | [![pagination](https://img.shields.io/npm/v/@lion/pagination.svg)](https://www.npmjs.com/package/@lion/pagination) | Pagination | ✔️ |
| [steps](https://lion-web.netlify.app/components/steps/overview) | [![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.netlify.app/components/tabs/overview) | [![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.netlify.app/fundamentals/systems/localize/overview/) --** | | Localize text, numbers, dates and a way to store/fetch these data. | |
| [localize](https://lion-web.netlify.app/fundamentals/systems/localize/overview/) | [![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.netlify.app/fundamentals/systems/icon/overview/) --** | | Loading and displaying icons | |
| [icon](https://lion-web.netlify.app/fundamentals/systems/icon/overview/) | [![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 --** | | Features not fitting any other category | |
| [core](https://lion-web.netlify.app/fundamentals/systems/core/overview/) | [![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.netlify.app/fundamentals/tools/ajax/overview/) | [![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.netlify.app/components/calendar/overview/) | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar) | Standalone calendar | [#195][i195], [#194][i194] |
| [collapsible](https://lion-web.netlify.app/components/collapsible/overview/) | [![collapsible](https://img.shields.io/npm/v/@lion/collapsible.svg)](https://www.npmjs.com/package/@lion/collapsible) | Combination of a button and a chunk of extra content | ✔️ |
| **-- [Helpers](https://lion-web.netlify.app/fundamentals/tools/helpers/overview/) --** | [![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.netlify.app/fundamentals/tools/helpers/action-logger/) | | Storybook action logger |
## Technologies ## Technologies
@ -210,13 +171,3 @@ Read our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTR
## Contact ## Contact
Feel free to create a github issue for any feedback or questions you might have. Feel free to create a github issue for any feedback or questions you might have.
You can also find us on the Lit & Friends slack in the [#lion](https://lit-and-friends.slack.com/archives/CJGFWJN9J) channel.
You can join the Lit & Friends slack by visiting [https://lit.dev/slack-invite/](https://lit.dev/slack-invite/).
[i172]: https://github.com/ing-bank/lion/issues/172
[i173]: https://github.com/ing-bank/lion/issues/173
[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