@lion/ui 0.0.2 → 0.0.3

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

@@ -0,0 +1,154 @@
+# Dialog >> Use Cases ||20
+
+`lion-dialog` is a component wrapping a modal dialog controller.
+Its purpose is to make it easy to use our Overlay System declaratively.
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-dialog.js';
+
+import { demoStyle } from './src/demoStyle.js';
+import './src/styled-dialog-content.js';
+import './src/slots-dialog-content.js';
+```
+
+```html
+<lion-dialog>
+  <div slot="content">
+    This is a dialog
+    <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>x</button>
+  <div>
+  <button slot="invoker">Click me</button>
+</lion-dialog>
+```
+
+## Styling content
+
+It's not possible to style content from the dialog component. This is because the content slot is moved to the global root node. This is why a custom component should be created and slotted in as the content. This ensures style encapsulation on the dialog content.
+
+```js preview-story
+export const stylingContent = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
+    <button slot="invoker">Styled dialog</button>
+    <styled-dialog-content slot="content"></styled-dialog-content>
+  </lion-dialog>
+`;
+```
+
+## Content with slots
+
+```js preview-story
+export const slotsContent = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
+    <button slot="invoker">Dialog with content with slots</button>
+    <slots-dialog-content slot="content">
+      <p>Some Stuff</p>
+      <p slot="actions">I am in the actions slot</p>
+    </slots-dialog-content>
+  </lion-dialog>
+`;
+```
+
+## Close overlay from component slotted as content
+
+The overlay cannot be closed by dispatching the `close-overlay` from a button in a styled component that is slotted in as content, because it will not cross the shadow boundary of the component. A method should be created that will dispatch the `close-overlay` event from the component.
+
+```js preview-story
+export const closeOverlayFromComponent = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
+    <button slot="invoker">Styled dialog</button>
+    <styled-dialog-content slot="content"></styled-dialog-content>
+  </lion-dialog>
+`;
+```
+
+## Placement overrides
+
+```js preview-story
+export const placementOverrides = () => {
+  const dialog = placement => html`
+    <lion-dialog .config=${{ viewportConfig: { placement } }}>
+      <button slot="invoker">Dialog ${placement}</button>
+      <div slot="content" class="dialog">
+        Hello! You can close this notification here:
+        <button
+          class="close-button"
+          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+        >
+          ⨯
+        </button>
+      </div>
+    </lion-dialog>
+  `;
+  return html`
+    <style>
+      ${demoStyle}
+    </style>
+    <div class="demo-box_placements">
+      ${dialog('center')} ${dialog('top-left')} ${dialog('top-right')} ${dialog('bottom-left')}
+      ${dialog('bottom-right')}
+    </div>
+  `;
+};
+```
+
+Configuration passed to `config` property:
+
+```js
+{
+  viewportConfig: {
+    placement: ... // <-- choose a position
+  }
+}
+```
+
+## Other overrides
+
+No backdrop, hides on escape, prevents scrolling while opened, and focuses the body when hiding.
+
+```js preview-story
+export const otherOverrides = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog
+    .config=${{
+      hasBackdrop: false,
+      hidesOnEscape: true,
+      preventsScroll: true,
+      elementToFocusAfterHide: document.body,
+    }}
+  >
+    <button slot="invoker">Click me to open dialog</button>
+    <div slot="content" class="dialog">
+      Hello! You can close this dialog here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </lion-dialog>
+`;
+```
+
+Configuration passed to `config` property:
+
+```js
+{
+  hasBackdrop: false,
+  hidesOnEscape: true,
+  preventsScroll: true,
+  elementToFocusAfterHide: document.body
+}
+```

package/docs/components/drawer/index.md

@@ -0,0 +1,3 @@
+# Drawer ||20
+
+-> go to Overview

package/docs/components/drawer/overview.md

@@ -0,0 +1,68 @@
+# Drawer >> Overview ||10
+
+A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an
+animation to disclose the extra content.
+
+There are three slots available respectively; `invoker` to specify the
+drawer's invoker, `headline` for the optional headline and `content` for the content of the drawer.
+
+Through the `position` property, the drawer can be placed on the `top`, `left` or `right` of the viewport.
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import '@lion/ui/define/lion-drawer.js';
+import '@lion/ui/define/lion-icon.js';
+import { icons } from '@lion/ui/icon.js';
+import { demoStyle } from './src/demoStyle.js';
+
+icons.addIconResolver('lion', (iconset, name) => {
+  switch (iconset) {
+    case 'misc':
+      return import('../icon/assets/iconset-misc.js').then(module => module[name]);
+    default:
+      throw new Error(`Unknown iconset ${iconset}`);
+  }
+});
+```
+
+```js preview-story
+export const main = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <div class="demo-container">
+    <lion-drawer>
+      <button slot="invoker">
+        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
+      </button>
+      <p slot="headline">Headline</p>
+      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
+      <button slot="bottom-invoker">
+        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
+      </button>
+    </lion-drawer>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
+      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
+      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
+      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
+      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
+      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
+      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
+      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
+    </div>
+  </div>
+`;
+```
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import { LionDrawer } from '@lion/ui/drawer.js';
+// or
+import '@lion/ui/define/lion-drawer.js';
+```

package/docs/components/drawer/src/demoStyle.js

@@ -0,0 +1,71 @@
+import { css } from 'lit';
+
+export const demoStyle = css`
+  .demo-container {
+    height: 400px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .demo-container > div {
+    padding: 8px;
+    background-color: #f6f8fa;
+  }
+
+  lion-drawer {
+    height: 400px;
+  }
+
+  button {
+    all: revert !important;
+    border: 2px solid #000000;
+    background-color: rgb(239, 239, 239);
+  }
+
+  .demo-container-top {
+    height: 400px;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .demo-container-top > div {
+    padding: 8px;
+    height: 100%;
+    background-color: #f6f8fa;
+  }
+
+  .demo-container-top lion-drawer {
+    height: auto;
+    width: 100%;
+  }
+
+  .demo-container-right {
+    height: 400px;
+    display: flex;
+    flex-direction: row-reverse;
+  }
+
+  .demo-container-right > div {
+    padding: 8px;
+    background-color: #f6f8fa;
+  }
+
+  .demo-container-right lion-drawer {
+    height: 400px;
+  }
+
+  .demo-container-opened {
+    height: 400px;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .demo-container-opened > div {
+    padding: 8px;
+    background-color: #f6f8fa;
+  }
+
+  .demo-container-opened lion-drawer {
+    height: 400px;
+  }
+`;

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

@@ -0,0 +1,194 @@
+# Drawer >> Use Cases ||20
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+import { icons } from '@lion/ui/icon.js';
+import '@lion/ui/define/lion-drawer.js';
+import '@lion/ui/define/lion-icon.js';
+import { demoStyle } from './src/demoStyle.js';
+
+icons.addIconResolver('lion', (iconset, name) => {
+  switch (iconset) {
+    case 'misc':
+      return import('../icon/assets/iconset-misc.js').then(module => module[name]);
+    default:
+      throw new Error(`Unknown iconset ${iconset}`);
+  }
+});
+```
+
+## Positioning
+
+### Default left
+
+By default, the drawer is positioned on the left side of the viewport.
+
+With the `position` property it can be positioned at the top or on the right of the screen.
+
+### Top
+
+```js preview-story
+export const top = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <div class="demo-container-top">
+    <lion-drawer position="top">
+      <button slot="invoker">
+        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
+      </button>
+      <p slot="headline">Headline</p>
+      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
+    </lion-drawer>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
+      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
+      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
+      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
+      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
+      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
+      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
+      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
+    </div>
+  </div>
+`;
+```
+
+### Right
+
+```js preview-story
+export const right = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <div class="demo-container-right">
+    <lion-drawer position="right">
+      <button slot="invoker">
+        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
+      </button>
+      <p slot="headline">Headline</p>
+      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
+    </lion-drawer>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
+      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
+      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
+      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
+      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
+      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
+      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
+      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
+    </div>
+  </div>
+`;
+```
+
+## Opened
+
+Add the `opened` attribute to display the drawer opened.
+
+```js preview-story
+export const opened = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <div class="demo-container">
+    <lion-drawer opened>
+      <p slot="headline">Headline</p>
+      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
+    </lion-drawer>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
+      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
+      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
+      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
+      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
+      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
+      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
+      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
+    </div>
+  </div>
+`;
+```
+
+## Methods
+
+There are the following methods available to control the extra content for the drawer.
+
+- `toggle()`: toggle the extra content
+- `show()`: show the extra content
+- `hide()`: hide the extra content
+
+```js preview-story
+export const methods = ({ shadowRoot }) => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <section style="margin-top:16px">
+    <button @click=${() => shadowRoot.querySelector('#drawer').toggle()}>Toggle content</button>
+    <button @click=${() => shadowRoot.querySelector('#drawer').show()}>Show content</button>
+    <button @click=${() => shadowRoot.querySelector('#drawer').hide()}>Hide content</button>
+  </section>
+
+  <div class="demo-container">
+    <lion-drawer id="drawer">
+      <button slot="invoker">
+        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
+      </button>
+      <p slot="headline">Headline</p>
+      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
+    </lion-drawer>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
+      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
+      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
+      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
+      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
+      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
+      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
+      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
+    </div>
+  </div>
+`;
+```
+
+## Events
+
+`lion-drawer` fires an event on `invoker` click to notify the component's current state. It is useful for analytics purposes or to perform some actions while expanding and collapsing the component.
+
+- `@opened-changed`: triggers when drawer either gets opened or closed
+
+```js preview-story
+export const events = ({ shadowRoot }) => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <div class="demo-custom-collapsible-state-container">
+    <strong id="collapsible-state"></strong>
+  </div>
+  <div class="demo-container">
+    <lion-drawer
+      @opened-changed=${ev => {
+        const collapsibleState = shadowRoot.querySelector('#collapsible-state');
+        collapsibleState.innerText = `Opened: ${ev.target.opened}`;
+      }}
+    >
+      <button slot="invoker">
+        <lion-icon icon-id="lion:misc:arrowLeft" style="width: 16px; height: 16px;"></lion-icon>
+      </button>
+      <p slot="headline">Headline</p>
+      <div slot="content" class="drawer">Hello! This is the content of the drawer</div>
+    </lion-drawer>
+    <div>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum convallis, lorem sit amet
+      sollicitudin egestas, dui lectus sodales leo, quis luctus nulla metus vitae lacus. In at
+      imperdiet augue. Mauris mauris dolor, faucibus non nulla vel, vulputate hendrerit mauris.
+      Praesent dapibus leo nec libero scelerisque, ac venenatis ante tincidunt. Nulla maximus
+      vestibulum orci, ac viverra nisi molestie vel. Vivamus eget elit et turpis elementum tempor
+      ultricies at turpis. Ut pretium aliquet finibus. Duis ullamcorper ultrices velit id luctus.
+      Phasellus in ex luctus, interdum ex vel, eleifend dolor. Cras massa odio, sodales quis
+      consectetur a, blandit eu purus. Donec ut gravida libero, sed accumsan arcu.
+    </div>
+  </div>
+`;
+```

package/docs/components/fieldset/index.md

@@ -0,0 +1,3 @@
+# Fieldset ||20
+
+-> go to Overview

package/docs/components/fieldset/overview.md

@@ -0,0 +1,49 @@
+# Fieldset >> Overview ||10
+
+```js script
+import { html } from '@mdjs/mdjs-preview';
+
+import '@lion/ui/define/lion-input.js';
+import '@lion/ui/define/lion-fieldset.js';
+```
+
+A web component that can be used to group multiple input fields or other fieldsets together.
+
+```js preview-story
+export const main = () => html`
+  <lion-fieldset name="nameGroup" label="Name">
+    <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+    <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+  </lion-fieldset>
+`;
+```
+
+We have three specific fieldset implementations:
+
+- [form](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/components/form/overview.md)
+- [checkbox-group](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/components/checkbox-group/overview.md)
+- [radio-group](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/components/radio-group/overview.md)
+
+A native fieldset element should always have a legend-element for a11y purposes.
+However, our fieldset element is not native and should not have a legend-element.
+Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
+
+## Features
+
+- Easy retrieval of form data based on field names
+- Advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/fundamentals/systems/form/interaction-states.md)
+- Can have [validate](https://github.com/ing-bank/lion/blob/fbf0bd22378e76aa4261c2a97faf8be4f5fc461e/docs/fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- Can disable input fields on fieldset level
+- Accessible out of the box
+
+## Installation
+
+```bash
+npm i --save @lion/ui
+```
+
+```js
+import { LionFieldset } from '@lion/ui/fieldset.js';
+// or
+import '@lion/ui/define/lion-fieldset.js';
+```