<p align="center"> <img width="20%" src="./docs/_assets/logo.svg" alt="Lion" /> <h1 style="text-align: center;">Lion</h1> </p> <p align="center"> <a href="https://github.com/ing-bank/lion/issues" ><img src="https://badgen.net/github/open-issues/ing-bank/lion" alt="Lion open issues status" /></a> <a href="https://github.com/ing-bank/lion/pulls" ><img 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 src="https://badgen.net/https/api.tickgit.com/badgen/github.comgithub.com/ing-bank/lion" alt="Todos" /></a> </p> <p align="center"> <a href="https://lion.js.org">Website</a> · <a href="https://lion.js.org/fundamentals/">Fundamentals</a> · <a href="https://lion.js.org/guides/">Guides</a> · <a href="https://lion.js.org/components/">Components</a> · <a href="https://lion.js.org/blog/">Blog</a> </p>

Lion 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.

High Performance: Focused on great performance in all relevant browsers with a minimal number of dependencies.
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 distributed as pure es modules.
Exposes functions/classes and Web Components: Ships a functionality in it's most appropriate form.

Note: Our 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.

<p align="center"> <a href="https://lion.js.org/guides/"><strong>Explore the Lion Guides  ▶</strong></a> </p> <details> <summary><h2>Table of Contents</h2></summary> <ul> <li><a href="#astro-migration"> Astro migration </a> <ul> <li><a href="#astro-how-to"> Astro how to </a></li> <li><a href="#issues-which-are-not-caused-by-the-migration-not-to-be-fixed-now"> Issues which are not caused by migration </a></li> </ul> </li> <li><a href="#how-to-install"> Installation </a></li> <li><a href="#how-to-use"> How to use </a> <ul> <li><a href="#extend-a-web-component"> Extend a web component </a></li> <li><a href="#use-a-javascript-system"> Use a JavaScript system </a></li> <li><a href="#use-a-web-component"> Use a Web Component </a></li> </ul> </li> <li><a href="#issues"> Issues </a></li> <li><a href="#feature-requests"> Feature request </a></li> <li><a href="#content"> Content </a></li> <li><a href="#technologies"> Technologies </a></li> <li><a href="#rationale"> Rationale </a></li> <li><a href="#coding-guidelines"> Coding guidelines </a></li> <li><a href="#how-to-contribute"> How to contribute </a></li> <li><a href="#site-deployment"> Site deployment </a></li> <li><a href="#content"> Contact </a></li> </ul> </details>

Astro migration

Keep using /docs on the root level as we used it in the master branch. The documentation is copied into Astro related directories on npm run start and when when anything in /docs is updated.
Replace manually all references to assets in all md files so that we imply that the path is produced from the directory where the md file is located. F.e. new URL('../src/wa-combobox/assets/obama.jpeg', import.meta.url).href; should new URL('./src/wa-combobox/assets/obama.jpeg', import.meta.url).href;. Note double dot is replaced with one dot. See this PR for the reference.
Rename all *.mjs files to *.js ones if they are used by mdjs examples

Astro how to

To start in dev mode run npm run start
To start in production mode:
- Run npm run build
- Run npm run preview

Issues which are not caused by the migration (not to be fixed now)

There is a browser console error on collapsible page:
```
__mdjs-stories--use-cases.js:40 Uncaught TypeError: shadowRoot.getElementById is not a function
```
Note. There is the same error on master. This issue is not caused by the migration

How to install

npm i @lion/ui

How to use

Extend a Web Component

This is the main use case for lion. To import component classes, and extend them for your own design system's components.

import { css } from 'lit';
import { LionInput } from '@lion/ui/input.js';

class MyInput extends LionInput {
  static get styles() {
    return [
      super.styles,
      css`
        /* your styles here */
      `,
    ];
  }
}
customElements.define('my-input', MyInput);

Use a JavaScript system

There's a couple of "systems" in lion which have a JavaScript API. Examples are localize, overlays, ajax, etc.

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

  ajax
    .fetch('data.json')
    .then(response => response.json())
    .then(data => {
      // do something with the data
    });
</script>

Use a Web Component

You can also use the lion elements directly, although this is likely not a common use case.

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

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

Issues

If you encounter an issue with any of the packages we are offering please open a new bug issue. Be sure to include a description of the expected and the current behavior - additional adding a reproduction always helps.

Feature requests

When you have an idea on how we could improve, please check our discussions to see if there are similar ideas or feature requests. If there are none, please start your feature request as a new discussion topic. Add the title [Feature Request] My awesome feature and a description of what you expect from the improvement and what the use case is.

Content

| Name | version | description | | --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @lion/ui | <img src="https://img.shields.io/npm/v/@lion/ui.svg" alt="@lion/ui version"/> | Set of components | | @lion/ajax | <img src="https://img.shields.io/npm/v/@lion/ajax.svg" alt="@lion/ajax version"/> | A small wrapper around fetch | | 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 | <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.

Lion

Install / Use

README