Skip to content

Commit ec8da8f

Browse files
daKmoRMikhail BashkirovtlouisseJoren Broekemagerjanvangeest
committed
feat: release inital public lion version
Co-authored-by: Mikhail Bashkirov <[email protected]> Co-authored-by: Thijs Louisse <[email protected]> Co-authored-by: Joren Broekema <[email protected]> Co-authored-by: Gerjan van Geest <[email protected]> Co-authored-by: Erik Kroes <[email protected]> Co-authored-by: Lars den Bakker <[email protected]>
1 parent 7c563b7 commit ec8da8f

File tree

415 files changed

+41839
-3
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

415 files changed

+41839
-3
lines changed

‎.editorconfig

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
root = true
2+
3+
[*]
4+
charset = utf-8
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
insert_final_newline = true
9+
trim_trailing_whitespace = true
10+
11+
[*.{html,js}]
12+
block_comment_start = /**
13+
block_comment = *
14+
block_comment_end = */

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
coverage/

‎.eslintrc.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: ['@open-wc/eslint-config', 'eslint-config-prettier'].map(require.resolve),
3+
};

‎.gitignore

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## editors
2+
/.idea
3+
/.vscode
4+
/*.code-workspace
5+
/.history
6+
7+
## system files
8+
.DS_Store
9+
10+
## npm
11+
/node_modules/
12+
/npm-debug.log
13+
14+
# we do prefer yarn.lock so we do not want npms version of it
15+
/package-lock.json
16+
17+
## build artifacts
18+
/lib/
19+
/build/
20+
21+
## temp folders
22+
/.tmp/
23+
/coverage/

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
coverage/

‎.storybook/.babelrc

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"plugins": [
3+
"@babel/plugin-syntax-dynamic-import",
4+
"@babel/plugin-proposal-object-rest-spread"
5+
],
6+
"presets": [
7+
[
8+
"@babel/preset-env",
9+
{
10+
"useBuiltIns": "entry"
11+
},
12+
]
13+
]
14+
}

‎.storybook/addons.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import '@storybook/addon-storysource/register';
2+
import '@storybook/addon-actions/register';
3+
import '@storybook/addon-backgrounds/register';
4+
import '@storybook/addon-notes/register';
5+
import '@storybook/addon-links/register';
6+
import '@storybook/addon-viewport/register';
7+
import '@storybook/addon-options/register';

‎.storybook/config.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { configure } from '@storybook/polymer';
2+
import { setOptions } from '@storybook/addon-options';
3+
4+
setOptions({
5+
hierarchyRootSeparator: /\|/,
6+
});
7+
8+
const req = require.context('../stories', true, /\.stories\.js$/);
9+
function loadStories() {
10+
req.keys().forEach(filename => req(filename));
11+
}
12+
13+
configure(loadStories, module);

‎.storybook/preview-head.html

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<meta name="viewport"
2+
content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">

‎.storybook/webpack.config.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
const path = require('path');
2+
3+
module.exports = (storybookBaseConfig, configType, defaultConfig) => {
4+
defaultConfig.module.rules.push({
5+
test: [/\.stories\.js$/, /index\.js$/],
6+
loaders: [require.resolve('@storybook/addon-storysource/loader')],
7+
enforce: 'pre',
8+
});
9+
10+
const transpilePackages = ['lit-html', 'lit-element', '@open-wc', 'autosize'];
11+
12+
// this is a separate config for only those packages
13+
// the main storybook will use the .babelrc which is needed so storybook itself works in IE
14+
defaultConfig.module.rules.push({
15+
test: new RegExp(`node_modules(\\\/|\\\\)(${transpilePackages.join('|')})(.*)\\.js$`),
16+
use: {
17+
loader: 'babel-loader',
18+
options: {
19+
plugins: [
20+
'@babel/plugin-syntax-dynamic-import',
21+
'@babel/plugin-proposal-object-rest-spread',
22+
],
23+
presets: [
24+
[
25+
'@babel/preset-env',
26+
{
27+
useBuiltIns: 'entry',
28+
},
29+
],
30+
],
31+
babelrc: false,
32+
},
33+
},
34+
});
35+
36+
defaultConfig.devServer = {
37+
headers: { 'X-UA-Compatible': 'IE=Edge' },
38+
};
39+
40+
return defaultConfig;
41+
};

‎CONTRIBUTING.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Contributing
2+
3+
Check out ways to contribute to Lion Web Components:
4+
5+
## Existing components: we love pull requests ♥
6+
Help out the whole lion community by sending your merge requests and issues.
7+
Check out how to set it up:
8+
9+
Setup:
10+
```bash
11+
# Clone the repo:
12+
git clone https://github.com/ing-bank/lion.git
13+
cd lion
14+
15+
# Install dependencies
16+
yarn install
17+
18+
# Create a branch for your changes
19+
git checkout -b fix/buttonSize
20+
```
21+
22+
Make sure everything works as expected:
23+
```bash
24+
# Linting
25+
npm run lint
26+
27+
# Tests
28+
npm run test
29+
30+
# Storybook Demo
31+
npm run storybook
32+
```
33+
34+
Create a Pull Request:
35+
- At https://github.com/ing-bank/lion click on fork (at the right top)
36+
```bash
37+
# add fork to your remotes
38+
git remote add fork [email protected]:<your-user>/lion.git
39+
40+
# push new branch to your fork
41+
git push -u fork fix/buttonSize
42+
```
43+
- Go to your fork and create a Pull Request :)
44+
45+
Some things that will increase the chance that your merge request is accepted:
46+
47+
* Write tests.
48+
* Write a [good commit message](https://www.conventionalcommits.org/).

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2019 ING Bank NV Amsterdam
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+127-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,129 @@
1-
# Lion
1+
> ## 🛠 Status: Pilot Phase
2+
> Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.
3+
>
4+
> The goal of our pilot phase is to gather feedback from a private group of users.
5+
> Therefore, during this phase, we kindly ask you to:
6+
> - not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
7+
> - not publicly promote or link products derived from/based on Lion Web Components
8+
>
9+
> 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)
210
3-
I'm afraid a little more patience is needed.
11+
# Lion Web Components
412

5-
See you soon :)
13+
Lion web components is a set of highly performant, accessible and flexible Web Components.
14+
They provide an unopinionated, white label layer that can be extended to your own layer of components.
15+
16+
## How to install
17+
18+
```bash
19+
npm i @lion/<package-name>
20+
```
21+
22+
## Content
23+
24+
| Package | Version | Description |
25+
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- |
26+
| **-- [Forms](./docs/forms.md) --** | | |
27+
| [checkbox](./packages/checkbox) | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox) | Checkbox form element |
28+
| [checkbox-group](./packages/checkbox-group) | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group) | Group of checkboxes |
29+
| [field](./packages/field) | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field) | Base Class for all inputs |
30+
| [form](./packages/form) | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form) | Wrapper for multiple form elements |
31+
| [input](./packages/input) | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input) | Input element for strings |
32+
| [input-amount](./packages/input-amount) | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount) | Input element for amounts |
33+
| [input-date](./packages/input-date) | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date) | Input element for dates |
34+
| [input-email](./packages/input-email) | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email) | Input element for e-mails |
35+
| [input-iban](./packages/input-iban) | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban) | Input element for IBANs |
36+
| [radio](./packages/radio) | [![radio](https://img.shields.io/npm/v/@lion/radio.svg)](https://www.npmjs.com/package/@lion/radio) | Radio from element |
37+
| [radio-group](./packages/radio-group) | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group) | Group of radios |
38+
| [select](./packages/select) | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select) | Simple native dropdown element |
39+
| [textarea](./packages/textarea) | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea) | Multiline text input |
40+
| [validate](./packages/validate) | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate) | Validation for form components |
41+
| **-- [Icons](./packages/icon) --** | | |
42+
| [icon](./packages/icon) | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon) | Display our svg icons |
43+
| **-- [Localize](./packages/localize) --** | | |
44+
| [localize](./packages/localize) | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize) | Localize and translate your application/components |
45+
| **-- [Overlays](./docs/overlays.md) --** | | |
46+
| [overlays](./packages/overlays) | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays) | Overlays System using lit-html for rendering |
47+
| [popup](./packages/popup) | [![popup](https://img.shields.io/npm/v/@lion/popup.svg)](https://www.npmjs.com/package/@lion/popup) | Popup element |
48+
| [tooltip](./packages/tooltip) | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip) | Popup element |
49+
| **-- [Steps](./packages/steps) --** | | |
50+
| [steps](./packages/steps) | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps) | Multi Step System |
51+
| **-- Individual Packages --** | | |
52+
| [ajax](./packages/ajax) | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax) | Fetching data via ajax request |
53+
| [button](./packages/button) | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button) | Button |
54+
55+
## How to use
56+
57+
### Use a Web Component
58+
59+
```html
60+
<script type="module">
61+
import '@lion/input/lion-input.js';
62+
</script>
63+
64+
<lion-input name="firstName"></lion-input>
65+
```
66+
67+
### Use a JavaScript system
68+
69+
```html
70+
<script type="module">
71+
import { ajax } from '@lion/ajax';
72+
73+
ajax.get('data.json').then(response => {
74+
// most likely you will use response.data
75+
});
76+
</script>
77+
```
78+
79+
### Extend a Web Component
80+
81+
```js
82+
import { LionInput } from '@lion/input';
83+
84+
class MyInput extends LionInput {}
85+
customElements.define('my-input', MyInput);
86+
```
87+
88+
## Key Features
89+
90+
- High Performance - Focused on great performance in all relevant browsers with a minimal number of dependencies
91+
- Accessibility - Aimed at compliance with the WCAG 2.0 AA standard to create components that are accessible for everybody
92+
- Flexibility - Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs
93+
94+
## Technologies
95+
96+
Lion Web Components aims to be future proof and use well-supported proven technology. The stack we have chosen should reflect this.
97+
98+
- [lit-html](https://lit-html.polymer-project.org) and [lit-element](https://lit-element.polymer-project.org)
99+
- [npm](http://npmjs.com)
100+
- [yarn](https://yarnpkg.com)
101+
- [open-wc](https://open-wc.org)
102+
- [webpack](https://webpack.js.org)
103+
- [Karma](https://karma-runner.github.io)
104+
- [Mocha](https://mochajs.org)
105+
- [Chai](https://www.chaijs.com)
106+
- [ESLint](https://eslint.org)
107+
- [prettier](https://prettier.io)
108+
- [Storybook](https://storybook.js.org)
109+
- [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
110+
- Lots and lots of tests
111+
112+
## Rationale
113+
114+
We know from experience that making high quality, accessible UI components is hard and time consuming:
115+
it takes many iterations, a lot of development time and a lot of testing to get a generic component that works in every
116+
context, supports many edge cases and is accessible in all relevant screen readers.
117+
118+
Lion aims to do the heavy lifting for you.
119+
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.
120+
121+
## How to contribute
122+
123+
Lion Web Components are only as good as its contributions.
124+
Read our [contribution guide](./CONTRIBUTING.md) and feel free to enhance/improve our product .
125+
126+
## Support and issues
127+
128+
As stated above "support and issues time" is currently rather limited: feel free to open a discussion.
129+
However, we can not guarantee any response times.

‎assets/dummy-jsons/max.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"file-name": "max.json",
3+
"name": "Max",
4+
"age": "30"
5+
}

‎assets/dummy-jsons/peter.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"file-name": "peter.json",
3+
"name": "Peter",
4+
"age": "20"
5+
}

‎assets/icons/bugs/bug05.svg.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)