Skip to content
Please note that GitHub no longer supports Internet Explorer.

We recommend upgrading to the latest Microsoft Edge, Google Chrome, or Firefox.

Learn more
Lion Web Components
JavaScript HTML
Branch: master
Clone or download
Cannot retrieve the latest commit at this time.
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci chore: add bundlesize checks Dec 5, 2019
.github/ISSUE_TEMPLATE chore: add issue template Oct 15, 2019
.storybook fix(form-system): use import.meta for docs images with start and build Jan 24, 2020
bundlesize chore: add bundlesize checks Dec 5, 2019
docs chore(docs): core docs about style components Sep 17, 2019
packages chore: release new versions Feb 3, 2020
scripts fix: use strict versions to get correct deps on older versions Dec 2, 2019
.editorconfig feat: improved storybook demos Jan 13, 2020
.eslintignore chore: add bundlesize checks Dec 5, 2019
.eslintrc.js chore: update linting Aug 21, 2019
.gitignore chore: add bundlesize checks Dec 5, 2019
.markdownlint.json chore: support linting and formatting of markdown files Jul 24, 2019
.prettierignore chore: add bundlesize checks Dec 5, 2019
CONTRIBUTING.md chore: update docs for closing feature requests Nov 13, 2019
LICENSE feat: release inital public lion version Apr 26, 2019
README.md
commitlint.config.js feat: release inital public lion version Apr 26, 2019
husky.config.js fix: improve yarn lock scan, always run Jan 9, 2020
karma.bs.config.js chore: enable circleci Apr 26, 2019
karma.conf.js feat(helpers): add handling duplicate consecutive logs to action logger Jan 17, 2020
lerna.json chore: test/* and *.md changes do not trigger a release Jul 30, 2019
package.json chore: cleanup testing configuration Jan 18, 2020
prettier.config.js feat: release inital public lion version Apr 26, 2019
wallaby.js chore: update linting Aug 21, 2019
yarn.lock fix: remove unused (dev)dependency on lion-button Jan 30, 2020

README.md

Lion Web Components

🛠 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 https://github.com/ing-bank/lion/issues/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.

Demos

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

How to install

npm i @lion/<package-name>

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
-- Buttons --
button button Button ✔️
switch switch Switch ✔️
-- Forms --
form form Wrapper for multiple form elements ✔️
field field Base Class for all inputs ✔️
fieldset fieldset Group for form inputs ✔️
validate validate Validation for form components n/a
checkbox checkbox Checkbox form element ✔️
checkbox-group checkbox-group Group of checkboxes ✔️
input input Input element for strings ✔️
input-amount input-amount Input element for amounts ✔️
input-date input-date Input element for dates ✔️
input-datepicker input-datepicker Input element for dates with a datepicker ✔️
input-email input-email Input element for e-mails ✔️
input-iban input-iban Input element for IBANs ✔️
input-range input-range Input element for a range of values ✔️
radio radio Radio from element ✔️
radio-group radio-group Group of radios ✔️
select select Simple native dropdown element ✔️
textarea textarea Multiline text input ✔️
-- Overlays --
overlays overlays Overlay System ✔️
dialog dialog Dialog element ✔️
tooltip tooltip Tooltip element #175
-- Icons --
icon icon Display our svg icons #173, #172
-- Navigation --
steps steps Multi Step System n/a
tabs tBS Move between a small number of equally important views n/a
-- Others --
core core Core System (exports LitElement, lit-html) n/a
calendar calendar Standalone calendar #195, #194
localize localize Localize and translate your application/components n/a
ajax ajax Fetching data via ajax request n/a

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 guidlines

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.

Support and issues

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.

You can’t perform that action at this time.