@lion/ui 0.24.0 → 0.26.0

package/docs/components/tooltip/overview.md

@@ -1,56 +0,0 @@
----
-title: 'Overview'
-parts:
-  - Tooltip
-  - Overview
-eleventyNavigation:
-  key: 'Tooltip: Overview'
-  order: 10
-  parent: Tooltip
-  title: Overview
----
-
-# Overview
-
-A web component used for basic popups on hover.
-Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if the invoker element is focused.
-
-```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;
-    }
-  </style>
-  <lion-tooltip has-arrow>
-    <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-    <div slot="content">This is a tooltip</div>
-  </lion-tooltip>
-`;
-```
-
-## Features
-
-- Show content when hovering the invoker
-- Show content when the invoker is focused
-- Does not show content when invoker is disabled
-- Uses Popper.js under the hood, to have the content pop up relative to the invoker
-- Use `.config` to override the overlay configuration
-- Config has `popperConfig` property that has a one to one relation with Popper.js configuration API.
-
-## Installation
-
-```bash
-npm i --save @lion/ui
-```
-
-```js
-import { LionTooltip } from '@lion/ui/tooltip.js';
-// or
-import '@lion/ui/define/lion-tooltip.js';
-```

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

@@ -1,275 +0,0 @@
----
-title: 'Use Cases'
-parts:
-  - Tooltip
-  - Use Cases
-eleventyNavigation:
-  key: 'Tooltip: Use Cases'
-  order: 20
-  parent: Tooltip
-  title: Use Cases
----
-
-# Use Cases
-
-```js script
-import { css, html } from '@mdjs/mdjs-preview';
-import { LionTooltip } from '@lion/ui/tooltip.js';
-import '@lion/ui/define/lion-tooltip.js';
-```
-
-## invokerRelation
-
-There is a difference between tooltips used as a primary label or as a description. In most cases a button will already have its own label, so the tooltip will be used as a description with extra information, which is already set as default. Only in case of icon buttons you want to use the tooltip as the primary label. To do so you need to set the `invokerRelation` to `label`.
-
-> For detailed information please read: [inclusive tooltips](https://inclusive-components.design/tooltips-toggletips/#inclusivetooltips).
-
-```js preview-story
-export const invokerRelation = () => {
-  const invokerRelationConfig = { invokerRelation: 'label' };
-  return html`
-    <style>
-      .demo-tooltip-invoker {
-        margin: 50px;
-      }
-    </style>
-    <lion-tooltip .config="${invokerRelationConfig}">
-      <button slot="invoker" class="demo-tooltip-invoker">📅</button>
-      <div slot="content">Agenda<div>
-    </lion-tooltip>
-  `;
-};
-```
-
-## Placements
-
-You can easily change the placement of the content node relative to the invoker, by adjusting the `placement` inside the `popperConfig`.
-
-```js preview-story
-export const placements = () => {
-  const placementTopConfig = { popperConfig: { placement: 'top' } };
-  const placementRightConfig = { popperConfig: { placement: 'right' } };
-  const placementBottomConfig = { popperConfig: { placement: 'bottom' } };
-  const placementLeftConfig = { popperConfig: { placement: 'left' } };
-  return html`
-    <style>
-      button[slot='invoker'] {
-        margin: 50px;
-      }
-      div[slot='content'] {
-        background-color: white;
-        padding: 4px;
-      }
-    </style>
-    <div class="demo-box-placements">
-      <lion-tooltip has-arrow .config="${placementTopConfig}">
-        <button slot="invoker">Top</button>
-        <div slot="content">Top placement</div>
-      </lion-tooltip>
-      <lion-tooltip has-arrow .config="${placementRightConfig}">
-        <button slot="invoker">Right</button>
-        <div slot="content">Right placement</div>
-      </lion-tooltip>
-      <lion-tooltip has-arrow .config="${placementBottomConfig}">
-        <button slot="invoker">Bottom</button>
-        <div slot="content">Bottom placement</div>
-      </lion-tooltip>
-      <lion-tooltip has-arrow .config="${placementLeftConfig}">
-        <button slot="invoker">Left</button>
-        <div slot="content">Left placement</div>
-      </lion-tooltip>
-    </div>
-  `;
-};
-```
-
-## Override Popper configuration
-
-You can override the Popper configuration, the API is one to one with Popper's API, and includes modifiers.
-
-```js preview-story
-export const overridePopperConfig = () => {
-  const overridePopperConfig = {
-    popperConfig: {
-      placement: 'bottom-start',
-      strategy: 'fixed',
-      modifiers: [
-        {
-          name: 'keepTogether',
-          options: {},
-          enabled: true,
-        },
-        {
-          name: 'preventOverflow',
-          options: {
-            boundariesElement: 'viewport',
-            padding: 16,
-          },
-          enabled: false,
-        },
-        {
-          name: 'flip',
-          options: {
-            boundariesElement: 'viewport',
-            padding: 4,
-          },
-          enabled: true,
-        },
-        {
-          name: 'offset',
-          options: {
-            // Note the different offset notation
-            offset: [0, 4],
-          },
-          enabled: true,
-        },
-      ],
-    },
-  };
-  return html`
-    <style>
-      .demo-tooltip-invoker {
-        margin: 50px;
-      }
-    </style>
-    <lion-tooltip .config="${overridePopperConfig}">
-      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-      <div slot="content">This is a tooltip<div>
-    </lion-tooltip>
-  `;
-};
-```
-
-Modifier explanations:
-
-- keepTogether: prevents detachment of content element from reference element, which could happen if the invoker is not in the viewport any more. If this is disabled, the content will always be in view.
-- preventOverflow: enables shifting and sliding behavior on the secondary axis (e.g. if top placement, this is horizontal shifting and sliding). The padding property defines the margin with the boundariesElement, which is usually the viewport.
-- flip: enables flipping behavior on the primary axis (e.g. if top placement, flipping to bottom if there is not enough space on the top). The padding property defines the margin with the boundariesElement, which is usually the viewport.
-- offset: enables an offset between the content node and the invoker node. First argument is horizontal margin, second argument is vertical margin.
-
-## Mobile: longpress
-
-On desktop the tooltip is triggered by hover and focus, as usual. On touch devices where hover is unavailable, the same tooltip instead responds to a long-press on the invoker (default 500ms). No extra configuration is needed. The tooltip auto-detects which interaction model to use via the `(hover: hover)` CSS media query.
-
-> To test the touch path on desktop: enable Chrome DevTools device emulation, **reload the page**, then press-and-hold the invoker for 500ms. Tap or hover will no longer trigger it.
-
-```js preview-story
-export const longpress = () => html`
-  <style>
-    .demo-tooltip-invoker {
-      margin: 50px;
-    }
-  </style>
-  <lion-tooltip has-arrow>
-    <button slot="invoker" class="demo-tooltip-invoker">
-      Hover (desktop) / long-press 500ms (touch)
-    </button>
-    <div slot="content">Tooltip content</div>
-  </lion-tooltip>
-`;
-```
-
-### Mobile: tooltip on an invoker that also opens an overlay
-
-When an invoker opens an overlay on tap, the two interactions do not collide:
-
-- **Tap**: dialog opens, tooltip does not show.
-- **Long-press 500ms**: tooltip shows, click is suppressed so the dialog does not open.
-
-> To test on desktop: enable Chrome DevTools device emulation, **reload the page**, then tap or long-press the button.
-
-```js preview-story
-export const overlayAndLongpress = () => html`
-  <style>
-    .demo-tooltip-invoker {
-      margin: 50px;
-    }
-  </style>
-  <lion-tooltip has-arrow>
-    <button
-      slot="invoker"
-      class="demo-tooltip-invoker"
-      @click="${e => e.target.closest('lion-tooltip').nextElementSibling.showModal()}"
-    >
-      Tap opens dialog /</br> Long-press shows tooltip
-    </button>
-    <div slot="content">Tooltip content</div>
-  </lion-tooltip>
-  <dialog>
-    <p>Dialog opened by tap</p>
-    <button @click="${e => e.target.closest('dialog').close()}">Close</button>
-  </dialog>
-`;
-```
-
-## Arrow
-
-By default, the arrow is disabled for our tooltip. Via the `has-arrow` property it can be enabled.
-
-> As a Subclasser, you can decide to turn the arrow on by default if this fits your Design System, by setting `this.hasArrow = true;` in the constructor.
-
-```js preview-story
-export const arrow = () => html`
-  <style>
-    .demo-tooltip-invoker {
-      margin: 50px;
-    }
-  </style>
-  <lion-tooltip has-arrow>
-    <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-    <div slot="content">This is a tooltip</div>
-  </lion-tooltip>
-`;
-```
-
-### Use a custom arrow
-
-If you plan on providing a custom arrow, you can extend the `lion-tooltip`.
-
-All you need to do is override the `_arrowTemplate` method to pass your own SVG, and extend the styles to pass the proper dimensions of your arrow.
-The rest of the work is done by Popper.js (for positioning) and the `lion-tooltip-arrow` (arrow dimensions, rotation, etc.).
-
-```js preview-story
-export const customArrow = () => {
-  if (!customElements.get('custom-tooltip')) {
-    customElements.define(
-      'custom-tooltip',
-      class extends LionTooltip {
-        static get styles() {
-          return [
-            ...super.styles,
-            css`
-              :host {
-                --tooltip-arrow-width: 20px;
-                --tooltip-arrow-height: 8px;
-              }
-            `,
-          ];
-        }
-        constructor() {
-          super();
-          this.hasArrow = true;
-        }
-        _arrowTemplate() {
-          return html`
-            <svg viewBox="0 0 20 8" class="arrow__graphic">
-              <path d="M 0,0 h 20 L 10,8 z"></path>
-            </svg>
-          `;
-        }
-      },
-    );
-  }
-  return html`
-    <style>
-      .demo-tooltip-invoker {
-        margin: 50px;
-      }
-    </style>
-    <custom-tooltip>
-      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-      <div slot="content">This is a tooltip</div>
-    </custom-tooltip>
-  `;
-};
-```

package/docs/fundamentals/index.md

@@ -1,19 +0,0 @@
----
-title: Documentation
-eleventyNavigation:
-  key: Fundamentals
-  order: 20
----
-
-Here you find more details about what we offer.
-
-Let's see what each section describes.
-
-1. [Systems](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/systems/core/overview.md) <br>
-   These are the fundamental systems that power all of our components.
-2. [Tools](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/tools/helpers/overview.md) <br>
-   Frontend Tools useful for web development but are not visual and therefore are not components.
-3. [Node Tools](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
-   Node tools to analyse the code and for extending the documentation.
-4. [Rationales](https://github.com/ing-bank/lion/blob/bc7530702f41df90a4ca3059cfb9edb08e27f742/docs/fundamentals/rationales/side-effects.md) <br>
-   The reasoning behind some of our decisions.

package/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md

@@ -1,13 +0,0 @@
----
-parts:
-  - Babel Extend Docs
-  - Node Tools
-title: 'Babel Extend Docs'
-eleventyNavigation:
-  key: Node Tools >> Babel Extend Docs
-  title: Babel Extend Docs
-  order: 10
-  parent: Node Tools
----
-
-# Babel Extend Docs

package/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md

@@ -1,246 +0,0 @@
----
-parts:
-  - Overview
-  - Babel Extend Docs
-  - Node Tools
-title: 'Overview'
-eleventyNavigation:
-  key: Node Tools >> Babel Extend Docs >> Overview
-  title: Overview
-  order: 10
-  parent: Node Tools >> Babel Extend Docs
----
-
-# Overview
-
-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.
-
-## Installation
-
-```bash
-npm i -D babel-plugin-extend-docs
-```
-
-We want to only execute `babel-plugin-extend-docs` on the actual files we want to modify/extend.
-
-You may also consider using [babel overrides](https://babeljs.io/docs/en/options#overrides).
-
-👉 _web-dev-server.config.js_
-
-```js
-import path from 'path';
-import { fromRollup } from '@web/dev-server-rollup';
-import rollupBabel from '@rollup/plugin-babel';
-
-const extendDocsConfig = {
-  changes: [
-    // possible changes as described below
-  ],
-};
-
-// note that you need to use `.default` for babel
-const babel = fromRollup(rollupBabel.default);
-
-export default {
-  nodeResolve: true,
-  plugins: [
-    babel({
-      include: ['./glob/to/files/**/*.js'],
-      plugins: [[path.resolve('./'), extendDocsConfig]],
-    }),
-  ],
-};
-```
-
-## Features
-
-- Renames named imports and all it's usage
-- Adjusts import paths
-- Replace tags in template literals
-
-## A Change
-
-A change is what gets placed between in the extendDocsConfig within the `changes` array.
-
-> automating the generation of changes is optional but encouraged
-
-It has the following possibilities:
-
-```js
-changes: [
-  {
-    description: 'MyCounter', // not needed but can be added for easier reading of the config
-    variable: {
-      // see below
-    },
-    tag: {
-      // see below
-    },
-  },
-];
-```
-
-### Paths
-
-Both `variable` and `tag` are required to have a `paths` array which defines how to remap import paths. Generally it should be a single entry.
-
-```js
-paths: [
-  { from: 'source-pkg/counter', to: 'extension-pkg/counter' },
-],
-```
-
-## Replacement of tags
-
-We have an existing demo code which we want to reuse.
-
-```js
-import { LitElement, html } from 'lit';
-import 'source-pkg/counter/define';
-class MyApp extends LitElement {
-  render() {
-    return html`
-      <h1>Example App</h1>
-      <source-counter></source-counter>
-    `;
-  }
-}
-customElements.define('my-app', MyApp);
-```
-
-We created a "better" version of `<source-counter>` so we would like to use that in the demo.
-Our extension is called `<extension-counter>` and is available via `extension-pkg/counter/define`.
-
-Within `babel-plugin-extend-docs` we can define to replace the tag + it's import.
-
-```js
-tag: {
-  from: 'source-counter',
-  to: 'extension-counter',
-  paths: [{ from: 'source-pkg/counter/define', to: 'extension-pkg/counter/define' }],
-}
-```
-
-### Result of Replacement of tags
-
-```js
-import { LitElement, html } from 'lit';
-import 'extension-pkg/counter/define';
-class MyApp extends LitElement {
-  render() {
-    return html`
-      <h1>Example App</h1>
-      <extension-counter></extension-counter>
-    `;
-  }
-}
-customElements.define('my-app', MyApp);
-```
-
-## Replacement of classes
-
-We have an existing demo code which we want to reuse.
-
-```js
-import { LitElement, html } from 'lit';
-import { SourceCounter } from 'source-pkg/counter';
-class TenCounter extends SourceCounter {
-  inc() {
-    this.count += 10;
-  }
-}
-customElements.define('ten-counter', TenCounter);
-
-class MyApp extends LitElement {
-  render() {
-    return html`
-      <h1>Example App</h1>
-      <ten-counter></ten-counter>
-    `;
-  }
-}
-customElements.define('my-app', MyApp);
-```
-
-We created a "better" version of `SourceCounter` so we would like that `TenCounter` now extends it instead.
-
-Within `babel-plugin-extend-docs` we can define to replace the class + it's import.
-
-```js
-variable: {
-  from: 'SourceCounter',
-  to: 'ExtensionCounter',
-  paths: [
-    { from: 'source-pkg/counter', to: 'extension-pkg/counter' },
-  ],
-},
-```
-
-### Result of Replacement of classes
-
-```js
-import { LitElement, html } from 'lit';
-import { SourceCounter } from 'extension-pkg/counter';
-class TenCounter extends SourceCounter {
-  inc() {
-    this.count += 10;
-  }
-}
-customElements.define('ten-counter', TenCounter);
-class MyApp extends LitElement {
-  render() {
-    return html`
-      <h1>Example App</h1>
-      <ten-counter></ten-counter>
-    `;
-  }
-}
-customElements.define('my-app', MyApp);
-```
-
-## Full Demo & Api Example
-
-You can run the example locally via `npm run start` or look at its [source code](https://github.com/ing-bank/lion/tree/master/packages-node/babel-plugin-extend-docs/demo/).
-_Note we are configuring babel via the [server.config.mjs](https://github.com/ing-bank/lion/tree/master/packages-node/babel-plugin-extend-docs/demo/server.config.mjs)_
-
-👉 _server.config.mjs_
-
-```js
-import path from 'path';
-import { fromRollup } from '@web/dev-server-rollup';
-import rollupBabel from '@rollup/plugin-babel';
-
-const extendDocsConfig = {
-  changes: [
-    {
-      name: 'SourceCounter',
-      variable: {
-        from: 'SourceCounter',
-        to: 'ExtensionCounter',
-        paths: [{ from: '#source/counter', to: '#extension/counter' }],
-      },
-      tag: {
-        from: 'source-counter',
-        to: 'extension-counter',
-        paths: [{ from: '#source/counter/define', to: '#extension/counter/define' }],
-      },
-    },
-  ],
-};
-
-// note that you need to use `.default` for babel
-const babel = fromRollup(rollupBabel.default);
-
-export default {
-  nodeResolve: true,
-  watch: true,
-  open: 'demo/',
-  plugins: [
-    babel({
-      include: ['./demo/**/*.demo.js'],
-      plugins: [[path.resolve('./'), extendDocsConfig]],
-    }),
-  ],
-};
-```

package/docs/fundamentals/node-tools/index.md

@@ -1,11 +0,0 @@
----
-parts:
-  - Node Tools
-title: Node Tools
-eleventyNavigation:
-  key: Node Tools
-  title: Node Tools
-  order: 30
----
-
-# Node Tools

package/docs/fundamentals/node-tools/providence-analytics/index.md

@@ -1,13 +0,0 @@
----
-parts:
-  - Providence Analytics
-  - Node Tools
-title: 'Providence Analytics'
-eleventyNavigation:
-  key: Node Tools >> Providence Analytics
-  title: Providence Analytics
-  order: 20
-  parent: Node Tools
----
-
-# Providence Analytics