Merge pull request #1980 from ing-bank/chore/readme-update
chore: readme update
This commit is contained in:
SynnefonK
GitHub
commit
d4085cc8c0
1 changed files with 23 additions and 72 deletions
95
README.md
95
README.md
|
|
@ -8,15 +8,15 @@
|
|||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/modernweb-dev/rocket/actions"
|
||||
<a href="https://github.com/ing-bank/lion/issues"
|
||||
><img
|
||||
src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
|
||||
alt="GitHub Actions workflow status"
|
||||
src="https://badgen.net/github/open-issues/ing-bank/lion"
|
||||
alt="Lion open issues status"
|
||||
/></a>
|
||||
<a href="https://github.com/modernweb-dev/rocket/actions"
|
||||
<a href="https://github.com/ing-bank/lion/pulls"
|
||||
><img
|
||||
src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
|
||||
alt="GitHub Actions workflow status"
|
||||
src="https://badgen.net/github/open-prs/ing-bank/lion/"
|
||||
alt="GitHub open pull requests status"
|
||||
/></a>
|
||||
<a href="https://www.tickgit.com/browse?repo=github.com/ing-bank/lion"
|
||||
><img
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
<p align="center">
|
||||
<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/components/">Components</a>
|
||||
·
|
||||
<a href="https://lion-web.netlify.app/docs/">Documentation</a>
|
||||
·
|
||||
<a href="https://lion-web.netlify.app/blog/">Blog</a>
|
||||
</p>
|
||||
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
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.
|
||||
- **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.
|
||||
- **Modern Code:** Lion is distributes as pure es modules.
|
||||
- **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
|
||||
|
||||
```bash
|
||||
npm i @lion/<package-name>
|
||||
npm i @lion/ui
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
|
@ -68,7 +68,7 @@ npm i @lion/<package-name>
|
|||
|
||||
```js
|
||||
import { css } from 'lit';
|
||||
import { LionInput } from '@lion/input';
|
||||
import { LionInput } from '@lion/ui/input.js';
|
||||
|
||||
class MyInput extends LionInput {
|
||||
static get styles() {
|
||||
|
|
@ -89,7 +89,7 @@ There's a couple of "systems" in lion which have a JavaScript API. Examples are
|
|||
|
||||
```html
|
||||
<script type="module">
|
||||
import { ajax } from '@lion/ajax';
|
||||
import { ajax } from '@lion/ui/ajax.js';
|
||||
|
||||
ajax
|
||||
.fetch('data.json')
|
||||
|
|
@ -106,7 +106,7 @@ You can also use the lion elements directly, although this is likely not a commo
|
|||
|
||||
```html
|
||||
<script type="module">
|
||||
import '@lion/input/define';
|
||||
import '@lion/ui/define/lion-input.js';
|
||||
</script>
|
||||
|
||||
<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
|
||||
|
||||
Lion web components is logically organized in groups of systems.
|
||||
|
||||
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.netlify.app/fundamentals/systems/form/overview/) --** | | A system that lets you make complex forms with ease, including: validation, translations. | ✔️ |
|
||||
| [combobox](https://lion-web.netlify.app/components/combobox/overview/) | [](https://www.npmjs.com/package/@lion/form) | Text box controlling popup listbox | ✔️ |
|
||||
| [form](https://lion-web.netlify.app/components/form/overview) | [](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements | ✔️ |
|
||||
| [form-core](https://lion-web.netlify.app/fundamentals/systems/form/overview/) | [](https://www.npmjs.com/package/@lion/form-core) | Core functionality for all form controls | ✔️ |
|
||||
| [form-integrations](https://lion-web.netlify.app/fundamentals/systems/form/overview/) | [](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way | ✔️ |
|
||||
| [fieldset](https://lion-web.netlify.app/components/fieldset/overview/) | [](https://www.npmjs.com/package/@lion/fieldset) | Group for form inputs | ✔️ |
|
||||
| [checkbox-group](https://lion-web.netlify.app/components/checkbox-group/overview/) | [](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes | ✔️ |
|
||||
| [input](https://lion-web.netlify.app/components/input/overview/) | [](https://www.npmjs.com/package/@lion/input) | Input element for strings | ✔️ |
|
||||
| [input-amount](https://lion-web.netlify.app/components/input-amount/overview/) | [](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts | ✔️ |
|
||||
| [input-date](https://lion-web.netlify.app/components/input-date/overview/) | [](https://www.npmjs.com/package/@lion/input-date) | Input element for dates | ✔️ |
|
||||
| [input-datepicker](https://lion-web.netlify.app/components/input-datepicker/overview/) | [](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/) | [](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails | ✔️ |
|
||||
| [input-iban](https://lion-web.netlify.app/components/input-iban/overview/) | [](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs | ✔️ |
|
||||
| [input-range](https://lion-web.netlify.app/components/input-range/overview/) | [](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/) | [](https://www.npmjs.com/package/@lion/input-stepper) | Input stepper element for the predefined range | ✔️ |
|
||||
| [listbox](https://lion-web.netlify.app/components/listbox/overview/) | [](https://www.npmjs.com/package/@lion/form) | Interactive list with selectable options | ✔️ |
|
||||
| [radio-group](https://lion-web.netlify.app/components/radio-group/overview/) | [](https://www.npmjs.com/package/@lion/radio-group) | Group of radios | ✔️ |
|
||||
| [select](https://lion-web.netlify.app/components/select/overview/) | [](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element | ✔️ |
|
||||
| [select-rich](https://lion-web.netlify.app/components/select-rich/overview/) | [](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/) | [](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/) | [](https://www.npmjs.com/package/@lion/button) | Button | ✔️ |
|
||||
| [switch](https://lion-web.netlify.app/components/switch/overview/) | [](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/) | [](https://www.npmjs.com/package/@lion/overlays) | Overlay System | ✔️ |
|
||||
| [dialog](https://lion-web.netlify.app/components/dialog/overview/) | [](https://www.npmjs.com/package/@lion/dialog) | Dialog element | ✔️ |
|
||||
| [tooltip](https://lion-web.netlify.app/components/tooltip/overview/) | [](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/) | [](https://www.npmjs.com/package/@lion/accordion) | Accordion | ✔️ |
|
||||
| [pagination](https://lion-web.netlify.app/components/pagination/overview/) | [](https://www.npmjs.com/package/@lion/pagination) | Pagination | ✔️ |
|
||||
| [steps](https://lion-web.netlify.app/components/steps/overview) | [](https://www.npmjs.com/package/@lion/steps) | Multi Step System | n/a |
|
||||
| [tabs](https://lion-web.netlify.app/components/tabs/overview) | [](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/) | [](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/) | [](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/) | [](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/) | [](https://www.npmjs.com/package/@lion/ajax) | Fetching data via ajax request | n/a |
|
||||
| [calendar](https://lion-web.netlify.app/components/calendar/overview/) | [](https://www.npmjs.com/package/@lion/calendar) | Standalone calendar | [#195][i195], [#194][i194] |
|
||||
| [collapsible](https://lion-web.netlify.app/components/collapsible/overview/) | [](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/) --** | [](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 |
|
||||
| Name | version | description |
|
||||
| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| [@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 |
|
||||
| [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. |
|
||||
| [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. |
|
||||
| [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. |
|
||||
| [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. |
|
||||
| [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/). |
|
||||
|
||||
## Technologies
|
||||
|
||||
|
|
@ -210,13 +171,3 @@ Read our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTR
|
|||
## Contact
|
||||
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue