Lion Web Components

export default {
  title: 'Intro/Lion Web Components',
};

Lion web components is a set of highly performant, accessible and flexible Web Components. They provide an unopinionated, white label layer that can be extended to your own layer of components.

For some more details see the announcement blog post.

Demos

We do have a live Storybook which shows all our components.

Please note: This project uses Yarn Workspaces. If you want to run all demos locally you need to get Yarn and install all dependencies by executing yarn install.

Features

pure es modules
exposes functions/classes and web components
provides pure functionality
fully accessible
built to be extended

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.

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	Description	Accessibility
-- Form System --	A system that lets you make complex forms with ease, including: validation, translations.	✔️
form	Wrapper for multiple form elements	✔️
form-core	Core functionality for all form controls	✔️
form-integrations	Shows form elements in an integrated way	✔️
fieldset	Group for form inputs	✔️
checkbox-group	Group of checkboxes	✔️
input	Input element for strings	✔️
input-amount	Input element for amounts	✔️
input-date	Input element for dates	✔️
input-datepicker	Input element for dates with a datepicker	✔️
input-email	Input element for e-mails	✔️
input-iban	Input element for IBANs	✔️
input-range	Input element for a range of values	✔️
radio-group	Group of radios	✔️
select	Simple native dropdown element	✔️
select-rich	'rich' version of the native dropdown element	#243
textarea	Multiline text input	✔️
-- Button System --	These web components bring common UX patterns while still full integrated with (native) forms.
button	Button	✔️
switch	Switch	✔️
-- Overlay System --	If something needs to overlay content this is your place.
overlays	Overlay System	✔️
dialog	Dialog element	✔️
tooltip	Tooltip element	#175
-- Navigation System --	Components which are used to guide users
accordion	Accordion	✔️
steps	Multi Step System	n/a
tabs	Move between a small number of equally important views	n/a
-- localize System --	Localize text, numbers, dates and a way to store/fetch these data.
localize	Localize and translate your application/components	n/a
-- Icon System --	Loading and displaying icons
icon	Display our svg icons	#173, #172
-- Others --	Features not fitting any other category
core	Core System (exports LitElement, lit-html)	n/a
ajax	Fetching data via ajax request	n/a
calendar	Standalone calendar	#195, #194
-- Helpers --	Helpers to make your and your life easier
sb-action-logger	Storybook action logger

How to install

npm i @lion/<package-name>

How to use

Use a Web Component

<script type="module">
  import '@lion/input/lion-input.js';
</script>

<lion-input name="firstName"></lion-input>

Use a JavaScript system

<script type="module">
  import { ajax } from '@lion/ajax';

  ajax.get('data.json').then(response => {
    // most likely you will use response.data
  });
</script>

Extend a Web Component

import { LionInput } from '@lion/input';

class MyInput extends LionInput {}
customElements.define('my-input', MyInput);

Key Features

High Performance - Focused on great performance in all relevant browsers with a minimal number of dependencies
Accessibility - Aimed at compliance with the WCAG 2.0 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

Technologies

Lion Web Components aims to be future proof and use well-supported proven technology. The stack we have chosen should reflect this.

Rationale

We know from experience that making high quality, accessible UI components is hard and time consuming: it takes many iterations, a lot of development time and a lot of testing to get a generic component that works in every context, supports many edge cases and is accessible in all relevant screen readers.

Lion aims to do the heavy lifting for you. This means you only have to apply your own Design System: by delivering styles, configuring components and adding a minimal set of custom logic on top.

Coding guidelines

Check out our coding guidelines for more detailed information.

How to contribute

Lion Web Components are only as good as its contributions. Read our contribution guide and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them.

Contact

Feel free to create a github issue for any feedback or questions you might have. You can also find us on the Polymer slack in the #lion channel.

You can join the Polymer slack by visiting https://www.polymer-project.org/slack-invite.

beatrizrezener / lion