@lion/ui 0.0.1 → 0.0.3

package/docs/components/switch/reference.md

@@ -0,0 +1,39 @@
+# Switch >> Reference ||30
+
+<p class="lion-paragraph--emphasis">Everything you need to re-use the switch.</p>
+
+## Requirements
+
+This component fulfils the following requirements:
+
+1. The component clearly communicates what is it for.
+2. The component supports helper text.
+3. The component supports smart defaults.
+4. The component supports the following states: on, off, hover (Web only), focused, disabled, pressed and processing
+5. The transformation between ON and OFF states are enhanced by an animation.
+6. Toggling the switch (on <-> off) will execute the underlying action immediately.
+
+## Keyboard interactions
+
+| <kbd>Key</kbd>      | Action                                                                                            |
+| :------------------ | :------------------------------------------------------------------------------------------------ |
+| <kbd>Enter</kbd>    | On keyboard focus, pressing <kbd>Enter</kbd> changes the state of the switch to “On” or “Off”.    |
+| <kbd>Spacebar</kbd> | On keyboard focus, pressing <kbd>Spacebar</kbd> changes the state of the switch to “On” or “Off”. |
+
+## WAI-ARIA roles
+
+### Landmarks
+
+1. element: "button"<br>
+   role: "switch"
+
+### Screen reader
+
+1. name: “Label”<br>
+   role: switch<br>
+   state: aria-checked=“true”<br>
+   SR: “Label, on, switch"
+2. name: “Label”<br>
+   role: switch<br>
+   state: aria-checked=“false”<br>
+   SR: “Label, off, switch”

package/docs/components/switch/use-cases.md

@@ -0,0 +1,76 @@
+# Switch >> Use Cases ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import { Validator } from '@lion/ui/form-core.js';
+import { LionSwitch } from '@lion/ui/switch.js';
+import '@lion/ui/define/lion-switch.js';
+import '@lion/ui/define-helpers/sb-action-logger.js';
+```
+
+## Disabled
+
+You can disable switches.
+
+```html preview-story
+<lion-switch label="Label" disabled></lion-switch>
+```
+
+## Validation
+
+An example that illustrates how an info validation feedback can be always displayed.
+
+```js preview-story
+class IsTrue extends Validator {
+  static get validatorName() {
+    return 'IsTrue';
+  }
+  execute(value) {
+    return !value.checked;
+  }
+  static async getMessage() {
+    return "You won't get the latest news!";
+  }
+}
+
+class CustomSwitch extends LionSwitch {
+  static get validationTypes() {
+    return [...super.validationTypes, 'info'];
+  }
+
+  _showFeedbackConditionFor(type, meta) {
+    if (type === 'info') {
+      return true;
+    }
+    return super._showFeedbackConditionFor(type, meta);
+  }
+}
+customElements.define('custom-switch', CustomSwitch);
+
+export const validation = () => html`
+  <custom-switch
+    name="newsletterCheck"
+    label="Subscribe to newsletter"
+    .validators="${[new IsTrue(null, { type: 'info' })]}"
+  ></custom-switch>
+`;
+```
+
+## With checked-changed handler
+
+You can listen for a `checked-changed` event that is fired when the switch is clicked.
+
+```js preview-story
+export const handler = ({ shadowRoot }) => {
+  return html`
+    <lion-switch
+      label="Label"
+      @checked-changed="${ev => {
+        shadowRoot.querySelector('sb-action-logger').log(`Current value: ${ev.target.checked}`);
+      }}"
+    >
+    </lion-switch>
+    <sb-action-logger></sb-action-logger>
+  `;
+};
+```

package/docs/components/tabs/examples.md

@@ -0,0 +1,23 @@
+# Tabs >> Examples ||30
+
+```js script
+import { LitElement, html } from '@mdjs/mdjs-preview';
+import './src/lea-tabs.js';
+import './src/lea-tab.js';
+import './src/lea-tab-panel.js';
+```
+
+## Lea Tabs
+
+Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/blog/ing-open-sources-lion.md).
+
+```js preview-story
+export const main = () => html`
+  <lea-tabs>
+    <lea-tab slot="tab">Info</lea-tab>
+    <lea-tab-panel slot="panel"> Info page with lots of information about us. </lea-tab-panel>
+    <lea-tab slot="tab">Work</lea-tab>
+    <lea-tab-panel slot="panel"> Work page that showcases our work. </lea-tab-panel>
+  </lea-tabs>
+`;
+```

package/docs/components/tabs/index.md

@@ -0,0 +1,3 @@
+# Tabs ||50
+
+-> go to Overview

package/docs/components/tabs/overview.md

@@ -0,0 +1,48 @@
+# Tabs >> Overview ||10
+
+A web component that allows users to quickly move between a small number of equally important views.
+
+```js script
+import { LitElement, html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-tabs.js';
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-tabs>
+    <button slot="tab">Info</button>
+    <p slot="panel">Info page with lots of information about us.</p>
+    <button slot="tab">Work</button>
+    <p slot="panel">Work page that showcases our work.</p>
+  </lion-tabs>
+`;
+```
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import { LionTabs } from '@lion/ui/tabs.js';
+// or
+import '@lion/ui/define/lion-tabs.js';
+```
+
+## Rationale
+
+### No separate active/focus state when using keyboard
+
+We will immediately switch content as all our content comes from light dom (e.g. no latency)
+
+See Note at <https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19>
+
+> It is recommended that tabs activate automatically when they receive focus as long as their
+> associated tab panels are displayed without noticeable latency. This typically requires tab
+> panel content to be preloaded.
+
+### Panels are not focusable
+
+Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactivity.
+If there is a button or a form inside the tab panel then these elements get focused directly.

package/docs/components/tabs/src/lea-tab-panel.js

@@ -0,0 +1,24 @@
+import { LitElement, html, css } from 'lit';
+
+export class LeaTabPanel extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        background-color: #fff;
+        background-image: linear-gradient(top, #fff, #ddd);
+        border-radius: 0 2px 2px 2px;
+        box-shadow: 0 2px 2px #000, 0 -1px 0 #fff inset;
+        padding: 30px;
+      }
+    `;
+  }
+
+  render() {
+    return html`
+      <!-- dom as needed -->
+      <slot></slot>
+    `;
+  }
+}
+
+customElements.define('lea-tab-panel', LeaTabPanel);

package/docs/components/tabs/src/lea-tab.js

@@ -0,0 +1,45 @@
+import { css, html, LitElement } from 'lit';
+
+export class LeaTab extends LitElement {
+  static get styles() {
+    return css`
+      :host {
+        box-shadow: -4px 0 0 rgba(0, 0, 0, 0.2);
+        background: #ad1c1c;
+        background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
+        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
+        color: #fff;
+        float: left;
+        font: bold 12px/35px 'Lucida sans', Arial, Helvetica;
+        height: 35px;
+        padding: 0 30px;
+        text-decoration: none;
+      }
+
+      :host(:hover) {
+        background: #c93434;
+        background: linear-gradient(220deg, transparent 10px, #c93434 10px);
+      }
+
+      :host(:focus) {
+        border-radius: 4px;
+        box-shadow: 0 0 8px #9fcaea, 0 0 0 1px #559bd1;
+
+        /* outline: 0; */
+      }
+
+      :host([selected]) {
+        background: #fff;
+        background: linear-gradient(220deg, transparent 10px, #fff 10px);
+        text-shadow: none;
+        color: #333;
+      }
+    `;
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('lea-tab', LeaTab);

package/docs/components/tabs/src/lea-tabs.js

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+import { LionTabs } from '@lion/ui/tabs.js';
+
+export class LeaTabs extends LionTabs {
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        :host {
+          background: #222;
+          display: block;
+          padding: 20px;
+        }
+      `,
+    ];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._setupFeature();
+  }
+
+  _setupFeature() {
+    // being awesome
+  }
+}
+
+customElements.define('lea-tabs', LeaTabs);

package/docs/components/tabs/use-cases.md

@@ -0,0 +1,219 @@
+# Tabs >> Use Cases ||20
+
+```js script
+import { LitElement, html } from '@mdjs/mdjs-preview';
+
+import '@lion/ui/define/lion-tabs.js';
+```
+
+## Selected Index
+
+You can set the `selectedIndex` to select a certain tab.
+
+```js preview-story
+export const selectedIndex = () => html`
+  <lion-tabs .selectedIndex=${1}>
+    <button slot="tab">Info</button>
+    <p slot="panel">Info page with lots of information about us.</p>
+    <button slot="tab">Work</button>
+    <p slot="panel">Work page that showcases our work.</p>
+  </lion-tabs>
+`;
+```
+
+## Slots Order
+
+The tab and panel slots are ordered by DOM order.
+
+This means you can switch the grouping in your `lion-tabs` from tab + panel to all tabs first or all panels first.
+
+```js preview-story
+export const slotsOrder = () => html`
+  <lion-tabs>
+    <button slot="tab">Info</button>
+    <button slot="tab">Work</button>
+    <p slot="panel">Info page with lots of information about us.</p>
+    <p slot="panel">Work page that showcases our work.</p>
+  </lion-tabs>
+`;
+```
+
+## Disabled tabs
+
+You can disable specific tabs by adding the `disabled` attribute to a tab button.
+
+When using the arrow keys to switch tabs, it will skip disabled tabs, but it will not cycle from last to first or vice versa.
+
+```js preview-story
+export const tabsDisabled = () => html`
+  <lion-tabs>
+    <button slot="tab">tab 1</button>
+    <div slot="panel">panel 1</div>
+    <button slot="tab" disabled>tab 2</button>
+    <div slot="panel">panel 2</div>
+    <button slot="tab" disabled>tab 3</button>
+    <div slot="panel">panel 3</div>
+    <button slot="tab">tab 4</button>
+    <div slot="panel">panel 4</div>
+    <button slot="tab">tab 5</button>
+    <div slot="panel">panel 5</div>
+    <button slot="tab" disabled>tab 6</button>
+    <div slot="panel">panel 6</div>
+  </lion-tabs>
+`;
+```
+
+## Nesting tabs
+
+You can include tabs within tabs
+
+```js preview-story
+export const nestedTabs = () => html`
+  <lion-tabs>
+    <button slot="tab">Movies</button>
+    <button slot="tab">Work</button>
+    <div slot="panel">
+      <p>Find some more info about our favorite movies:</p>
+      <lion-tabs>
+        <button slot="tab">Info about Cars</button>
+        <button slot="tab">Info about Toy Story</button>
+        <p slot="panel">
+          Cars is a 2006 American computer-animated comedy film produced by Pixar Animation Studios
+          and released by Walt Disney Pictures.
+        </p>
+        <p slot="panel">
+          The feature film directorial debut of John Lasseter, it was the first entirely
+          computer-animated feature film, as well as the first feature film from Pixar.
+        </p>
+      </lion-tabs>
+    </div>
+    <p slot="panel">Work page that showcases our work.</p>
+  </lion-tabs>
+`;
+```
+
+## Distribute New Elements
+
+Below, we demonstrate on how you could dynamically add new tab + panels.
+
+```js preview-story
+export const distributeNewElement = () => {
+  const tagName = 'demo-tabs-add-dynamically';
+  if (!customElements.get(tagName)) {
+    customElements.define(
+      tagName,
+      class extends LitElement {
+        static get properties() {
+          return {
+            __collection: { type: Array },
+          };
+        }
+        render() {
+          return html`
+            <h3>Append</h3>
+            <lion-tabs id="appendTabs">
+              <button slot="tab">tab 1</button>
+              <p slot="panel">panel 1</p>
+              <button slot="tab">tab 2</button>
+              <p slot="panel">panel 2</p>
+            </lion-tabs>
+            <button @click="${this.__handleAppendClick}">Append</button>
+            <hr />
+            <h3>Push</h3>
+            <lion-tabs id="pushTabs">
+              <button slot="tab">tab 1</button>
+              <p slot="panel">panel 1</p>
+              <button slot="tab">tab 2</button>
+              <p slot="panel">panel 2</p>
+              ${this.__collection.map(
+                item => html`
+                  <button slot="tab">${item.button}</button>
+                  <p slot="panel">${item.panel}</p>
+                `,
+              )}
+            </lion-tabs>
+            <button @click="${this.__handlePushClick}">Push</button>
+          `;
+        }
+        constructor() {
+          super();
+          this.__collection = [];
+        }
+        __handleAppendClick() {
+          const tabsElement = this.shadowRoot.querySelector('#appendTabs');
+          const c = 2;
+          const n = Math.floor(tabsElement.children.length / 2);
+          for (let i = n + 1; i < n + c; i += 1) {
+            const tab = document.createElement('button');
+            tab.setAttribute('slot', 'tab');
+            tab.innerText = `tab ${i}`;
+            const panel = document.createElement('p');
+            panel.setAttribute('slot', 'panel');
+            panel.innerText = `panel ${i}`;
+            tabsElement.append(tab);
+            tabsElement.append(panel);
+          }
+        }
+        __handlePushClick() {
+          const tabsElement = this.shadowRoot.querySelector('#pushTabs');
+          const i = Math.floor(tabsElement.children.length / 2) + 1;
+          this.__collection = [
+            ...this.__collection,
+            {
+              button: `tab ${i}`,
+              panel: `panel ${i}`,
+            },
+          ];
+        }
+      },
+    );
+  }
+  return html` <demo-tabs-add-dynamically></demo-tabs-add-dynamically> `;
+};
+```
+
+One way is by creating the DOM elements and appending them as needed.
+
+Inside your `lion-tabs` extension, an example for appending nodes on a certain button click:
+
+```js
+__handleAppendClick() {
+  const tabsAmount = this.children.length / 2;
+  const tab = document.createElement('button');
+  tab.setAttribute('slot', 'tab');
+  tab.innerText = `tab ${tabsAmount + 1}`;
+  const panel = document.createElement('p');
+  panel.setAttribute('slot', 'panel');
+  panel.innerText = `panel ${tabsAmount + 1}`;
+  this.append(tab);
+  this.append(panel);
+}
+```
+
+The other way is by adding data to a Lit property where you loop over this property in your template.
+You then need to ensure this causes a re-render.
+
+```js
+__handlePushClick() {
+  const tabsAmount = this.children.length;
+  myCollection = [
+    ...myCollection,
+    {
+      button: `tab ${tabsAmount + 1}`,
+      panel: `panel ${tabsAmount + 1}`,
+    },
+  ];
+  renderMyCollection();
+}
+```
+
+Make sure your template re-renders when myCollection is updated.
+
+```html
+<lion-tabs id="pushTabs">
+  ${myCollection.map(item => html`
+  <button slot="tab">${item.button}</button>
+  <p slot="panel">${item.panel}</p>
+  `)}
+</lion-tabs>
+```

package/docs/components/textarea/index.md

@@ -0,0 +1,3 @@
+# Textarea ||50
+
+-> go to Overview

package/docs/components/textarea/overview.md

@@ -0,0 +1,35 @@
+# Textarea >> Overview ||10
+
+A webcomponent that enhances the functionality of the native `<input type="textarea">` element.
+Its purpose is to provide a way for users to write text that is multiple lines long.
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-textarea.js';
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-textarea label="Stops growing after 4 rows" max-rows="4"></lion-textarea>
+`;
+```
+
+## Features
+
+- Default rows is 2 and it will grow to max-rows of 6.
+- `max-rows` attribute to set the amount of rows it should resize to, before it will scroll
+- `rows` attribute to set the minimum amount of rows
+- `readonly` attribute to prevent changing the content
+- Uses Intersection Observer for detecting visibility change, making sure it resizes
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import { LionTextarea } from '@lion/ui/textarea.js';
+// or
+import '@lion/ui/define/lion-textarea.js';
+```

package/docs/components/textarea/use-cases.md

@@ -0,0 +1,95 @@
+# Textarea >> Use Cases ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-textarea.js';
+```
+
+## Prefilled
+
+You can prefill the textarea. If you want to prefill on multiline, you will have to add newline characters `'\n'`.
+
+```js preview-story
+export const prefilled = () => html`
+  <lion-textarea
+    label="Prefilled"
+    .modelValue=${['batman', 'and', 'robin'].join('\n')}
+  ></lion-textarea>
+`;
+```
+
+## Disabled
+
+The textarea can be disabled with the `disabled` attribute.
+
+```js preview-story
+export const disabled = () => html` <lion-textarea label="Disabled" disabled></lion-textarea> `;
+```
+
+## Readonly
+
+`readonly` attribute indicate that you can't change the content. Compared with `disabled` attribute, the `readonly` attribute doesn't prevent clicking or selecting the element.
+
+```js preview-story
+export const readonly = () => html`
+  <lion-textarea
+    label="Readonly"
+    readonly
+    .modelValue=${['batman', 'and', 'robin'].join('\n')}
+  ></lion-textarea>
+`;
+```
+
+## Stop growing
+
+Use the `max-rows` attribute to make it stop growing after a certain amount of lines.
+
+```js preview-story
+export const stopGrowing = () => html`
+  <lion-textarea
+    label="Stop growing"
+    max-rows="4"
+    .modelValue=${['batman', 'and', 'robin'].join('\n')}
+  ></lion-textarea>
+`;
+```
+
+## Non-growing
+
+To have a fixed size provide `rows` and `max-rows` with the same value.
+
+```js preview-story
+export const nonGrowing = () => html`
+  <lion-textarea label="Non Growing" rows="3" max-rows="3"></lion-textarea>
+`;
+```
+
+## Intersection Observer
+
+It could be that your textarea is inside a hidden container, for example for a dialog or accordion or tabs.
+When it is hidden, the resizing is calculated based on the visible space of the text.
+Therefore, an Intersection Observer observes visibility changes of the textarea relative to the viewport, and resizes the textarea when a visibility change happens.
+
+> For old browsers like old Edge or IE11, a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) is required to be added on the application level for this to work.
+> For most cases, the optimized default will suffice.
+
+In the demo below you can see that the textarea is correctly calculated to 4 maximum rows, whereas without the observer, it would be on 2 rows and only resize on user input.
+
+```js preview-story
+export const hidden = () => html`
+  <div style="display: none">
+    <lion-textarea
+      .modelValue="${'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
+      label="Stops growing after 4 rows"
+      max-rows="4"
+    ></lion-textarea>
+  </div>
+  <button
+    @click=${e =>
+      (e.target.previousElementSibling.style.display =
+        e.target.previousElementSibling.style.display === 'block' ? 'none' : 'block')}
+  >
+    Toggle display
+  </button>
+`;
+```

package/docs/components/tooltip/examples.md

@@ -0,0 +1,39 @@
+# Tooltip >> Examples ||30
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-tooltip.js';
+```
+
+```js preview-story
+export const main = () => html`
+  <style>
+    .demo-tooltip-invoker {
+      margin: 50px;
+    }
+
+    .demo-tooltip-content {
+      display: block;
+      font-size: 16px;
+      color: white;
+      background-color: black;
+      border-radius: 4px;
+      padding: 8px;
+    }
+
+    .demo-box-placements {
+      display: flex;
+      flex-direction: column;
+      margin: 40px 0 0 200px;
+    }
+
+    .demo-box-placements lion-tooltip {
+      margin: 20px;
+    }
+  </style>
+  <lion-tooltip has-arrow>
+    <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
+    <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
+  </lion-tooltip>
+`;
+```

package/docs/components/tooltip/index.md

@@ -0,0 +1,3 @@
+# Tooltip ||60
+
+-> go to Overview