🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

• not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
• not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue ing-bank#1)

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.

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

npm i @lion/<package-name>

Package	Version	Description
core		Core System (exports LitElement, lit-html)
localize		Localize and translate your application/components
ajax		Fetching data via ajax request
button		Button
calendar		Standalone calendar
icon		Display our svg icons
steps		Multi Step System
-- Forms --
form		Wrapper for multiple form elements
field		Base Class for all inputs
validate		Validation for form components
checkbox		Checkbox form element
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
radio		Radio from element
radio-group		Group of radios
select		Simple native dropdown element
textarea		Multiline text input
-- Overlays --
overlays		Overlays System using lit-html for rendering
popup		Popup element
tooltip		Popup element

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

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

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

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

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

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

• 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

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

• lit-html and lit-element
• npm
• yarn
• open-wc
• webpack
• Karma
• Mocha
• Chai
• ESLint
• prettier
• Storybook
• ES modules
• Lots and lots of tests

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.

Lion Web Components are only as good as its contributions. Read our contribution guide and feel free to enhance/improve our product.

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 Polymer Slack Invite.

As stated above "support and issues time" is currently rather limited: feel free to open a discussion. However, we can not guarantee any response times.