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]>

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{html,js}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

.eslintignore

@@ -0,0 +1 @@
+coverage/

.eslintrc.js

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

.gitignore

@@ -0,0 +1,23 @@
+## editors
+/.idea
+/.vscode
+/*.code-workspace
+/.history
+
+## system files
+.DS_Store
+
+## npm
+/node_modules/
+/npm-debug.log
+
+# we do prefer yarn.lock so we do not want npms version of it
+/package-lock.json
+
+## build artifacts
+/lib/
+/build/
+
+## temp folders
+/.tmp/
+/coverage/

.prettierignore

@@ -0,0 +1 @@
+coverage/

.storybook/.babelrc

@@ -0,0 +1,14 @@
+{
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-object-rest-spread"
+  ],
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      },
+    ]
+  ]
+}

.storybook/addons.js

@@ -0,0 +1,7 @@
+import '@storybook/addon-storysource/register';
+import '@storybook/addon-actions/register';
+import '@storybook/addon-backgrounds/register';
+import '@storybook/addon-notes/register';
+import '@storybook/addon-links/register';
+import '@storybook/addon-viewport/register';
+import '@storybook/addon-options/register';

.storybook/config.js

@@ -0,0 +1,13 @@
+import { configure } from '@storybook/polymer';
+import { setOptions } from '@storybook/addon-options';
+
+setOptions({
+  hierarchyRootSeparator: /\|/,
+});
+
+const req = require.context('../stories', true, /\.stories\.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/preview-head.html

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

.storybook/webpack.config.js

@@ -0,0 +1,41 @@
+const path = require('path');
+
+module.exports = (storybookBaseConfig, configType, defaultConfig) => {
+  defaultConfig.module.rules.push({
+    test: [/\.stories\.js$/, /index\.js$/],
+    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    enforce: 'pre',
+  });
+
+  const transpilePackages = ['lit-html', 'lit-element', '@open-wc', 'autosize'];
+
+  // this is a separate config for only those packages
+  // the main storybook will use the .babelrc which is needed so storybook itself works in IE
+  defaultConfig.module.rules.push({
+    test: new RegExp(`node_modules(\\\/|\\\\)(${transpilePackages.join('|')})(.*)\\.js$`),
+    use: {
+      loader: 'babel-loader',
+      options: {
+        plugins: [
+          '@babel/plugin-syntax-dynamic-import',
+          '@babel/plugin-proposal-object-rest-spread',
+        ],
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              useBuiltIns: 'entry',
+            },
+          ],
+        ],
+        babelrc: false,
+      },
+    },
+  });
+
+  defaultConfig.devServer = {
+    headers: { 'X-UA-Compatible': 'IE=Edge' },
+  };
+
+  return defaultConfig;
+};

CONTRIBUTING.md

@@ -0,0 +1,48 @@
+# Contributing
+
+Check out ways to contribute to Lion Web Components:
+
+## Existing components: we love pull requests ♥
+Help out the whole lion community by sending your merge requests and issues.
+Check out how to set it up:
+
+Setup:
+```bash
+# Clone the repo:
+git clone https://github.com/ing-bank/lion.git
+cd lion
+
+# Install dependencies
+yarn install
+
+# Create a branch for your changes
+git checkout -b fix/buttonSize
+```
+
+Make sure everything works as expected:
+```bash
+# Linting
+npm run lint
+
+# Tests
+npm run test
+
+# Storybook Demo
+npm run storybook
+```
+
+Create a Pull Request:
+- At https://github.com/ing-bank/lion click on fork (at the right top)
+```bash
+# add fork to your remotes
+git remote add fork [email protected]:<your-user>/lion.git
+
+# push new branch to your fork
+git push -u fork fix/buttonSize
+```
+- Go to your fork and create a Pull Request :)
+
+Some things that will increase the chance that your merge request is accepted:
+
+* Write tests.
+* Write a [good commit message](https://www.conventionalcommits.org/).

LICENSE

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

README.md

@@ -1,5 +1,129 @@
-# Lion
+> ## 🛠 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)
 
-I'm afraid a little more patience is needed.
+# Lion Web Components
 
-See you soon :)
+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.
+
+## How to install
+
+```bash
+npm i @lion/<package-name>
+```
+
+## Content
+
+| Package                                     | Version                                                                                                                        | Description                                        |
+| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- |
+| **-- [Forms](./docs/forms.md) --**          |                                                                                                                                |                                                    |
+| [checkbox](./packages/checkbox)             | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox)                   | Checkbox form element                              |
+| [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                                |
+| [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                          |
+| [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                 |
+| [input](./packages/input)                   | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                            | Input element for strings                          |
+| [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                          |
+| [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                            |
+| [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                          |
+| [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                            |
+| [radio](./packages/radio)                   | [![radio](https://img.shields.io/npm/v/@lion/radio.svg)](https://www.npmjs.com/package/@lion/radio)                            | Radio from element                                 |
+| [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                                    |
+| [select](./packages/select)                 | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                         | Simple native dropdown element                     |
+| [textarea](./packages/textarea)             | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                   | Multiline text input                               |
+| [validate](./packages/validate)             | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate)                   | Validation for form components                     |
+| **-- [Icons](./packages/icon) --**          |                                                                                                                                |                                                    |
+| [icon](./packages/icon)                     | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon)                               | Display our svg icons                              |
+| **-- [Localize](./packages/localize) --**   |                                                                                                                                |                                                    |
+| [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 |
+| **-- [Overlays](./docs/overlays.md) --**    |                                                                                                                                |                                                    |
+| [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       |
+| [popup](./packages/popup)                   | [![popup](https://img.shields.io/npm/v/@lion/popup.svg)](https://www.npmjs.com/package/@lion/popup)                            | Popup element                                      |
+| [tooltip](./packages/tooltip)               | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                      | Popup element                                      |
+| **-- [Steps](./packages/steps) --**         |                                                                                                                                |                                                    |
+| [steps](./packages/steps)                   | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                            | Multi Step System                                  |
+| **-- Individual Packages --**               |                                                                                                                                |                                                    |
+| [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                     |
+| [button](./packages/button)                 | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                         | Button                                             |
+
+## How to use
+
+### Use a Web Component
+
+```html
+<script type="module">
+  import '@lion/input/lion-input.js';
+</script>
+
+<lion-input name="firstName"></lion-input>
+```
+
+### Use a JavaScript system
+
+```html
+<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
+
+```js
+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.
+
+- [lit-html](https://lit-html.polymer-project.org) and [lit-element](https://lit-element.polymer-project.org)
+- [npm](http://npmjs.com)
+- [yarn](https://yarnpkg.com)
+- [open-wc](https://open-wc.org)
+- [webpack](https://webpack.js.org)
+- [Karma](https://karma-runner.github.io)
+- [Mocha](https://mochajs.org)
+- [Chai](https://www.chaijs.com)
+- [ESLint](https://eslint.org)
+- [prettier](https://prettier.io)
+- [Storybook](https://storybook.js.org)
+- [ES modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
+- Lots and lots of tests
+
+## 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.
+
+## How to contribute
+
+Lion Web Components are only as good as its contributions.
+Read our [contribution guide](./CONTRIBUTING.md) and feel free to enhance/improve our product .
+
+## 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.

assets/dummy-jsons/max.json

@@ -0,0 +1,5 @@
+{
+  "file-name": "max.json",
+  "name": "Max",
+  "age": "30"
+}

assets/dummy-jsons/peter.json

@@ -0,0 +1,5 @@
+{
+  "file-name": "peter.json",
+  "name": "Peter",
+  "age": "20"
+}