fix: update storybook/linting; adjust story labels, eslint ignores

.gitignore

@@ -8,8 +8,8 @@
 .DS_Store
 
 ## npm
-/node_modules/
+node_modules/
-/npm-debug.log
+npm-debug.log
 
 # we do prefer yarn.lock so we do not want npms version of it
 /package-lock.json

.storybook/.babelrc

@@ -7,8 +7,9 @@
     [
       "@babel/preset-env",
       {
-        "useBuiltIns": "entry"
+        "useBuiltIns": "entry",
-      },
+        "corejs": "2",
+      }
     ]
   ]
 }

.storybook/addons.js

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

.storybook/config.js

@@ -1,9 +1,5 @@
 import { configure } from '@storybook/polymer';
-import { setOptions } from '@storybook/addon-options';
+import '@storybook/addon-console';
-
-setOptions({
-  hierarchyRootSeparator: /\|/,
-});
 
 const req = require.context('../stories', true, /\.stories\.js$/);
 function loadStories() {

.storybook/webpack.config.js

@@ -1,41 +1,8 @@
-const path = require('path');
+const defaultConfig = require('@open-wc/demoing-storybook/default-storybook-webpack-config.js');
 
-module.exports = (storybookBaseConfig, configType, defaultConfig) => {
+module.exports = ({ config }) => {
-  defaultConfig.module.rules.push({
+  return defaultConfig({
-    test: [/\.stories\.js$/, /index\.js$/],
+    config,
-    loaders: [require.resolve('@storybook/addon-storysource/loader')],
+    transpilePackages: ['lit-html', 'lit-element', '@open-wc', 'autosize'],
-    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;
 };

package.json

@@ -8,10 +8,10 @@
   "devDependencies": {
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.0",
-    "@open-wc/eslint-config": "^0.4.0",
+    "@open-wc/demoing-storybook": "^0.2.0",
+    "@open-wc/eslint-config": "^0.4.5",
     "@open-wc/prettier-config": "^0.1.0",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/testing": "^0.11.5",
-    "@open-wc/testing": "^0.11.1",
     "@open-wc/testing-karma": "^1.0.0",
     "@open-wc/testing-karma-bs": "^1.0.0",
     "@webcomponents/webcomponentsjs": "^2.2.5",

packages/ajax/package.json

@@ -34,7 +34,7 @@
     "@lion/core": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/ajax/src/AjaxClass.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { axios } from '@bundled-es-modules/axios';
 import { LionSingleton } from '@lion/core';
 import {

packages/ajax/src/interceptors.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { axios } from '@bundled-es-modules/axios';
 
 // FIXME: lang must be dynamic, fallback to html tag lang attribute or use the user-provided one

packages/ajax/stories/index.stories.js

@@ -1,10 +1,9 @@
-import { storiesOf, html, action } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import { ajax } from '../src/ajax.js';
 import { AjaxClass } from '../src/AjaxClass.js';
 
-/* eslint-disable indent */
+storiesOf('Ajax system|Ajax', module)
-storiesOf('Ajax system|ajax', module)
   .addParameters({ options: { selectedPanel: 'storybook/actions/actions-panel' } })
   .add(
     'Get',
@@ -14,10 +13,10 @@ storiesOf('Ajax system|ajax', module)
           ajax
             .get('./dummy-jsons/peter.json')
             .then(response => {
-              action('request-response')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('request-error')(error);
+              console.log(error);
             });
         }}
       >
@@ -38,10 +37,10 @@ storiesOf('Ajax system|ajax', module)
           myAjax
             .get('./dummy-jsons/peter.json')
             .then(response => {
-              action('request-response')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('request-error')(error);
+              console.log(error);
             });
         }}
       >
@@ -58,19 +57,19 @@ storiesOf('Ajax system|ajax', module)
           myAjax
             .get('./dummy-jsons/peter.json')
             .then(response => {
-              action('Request 1:')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('Request 1: I got cancelled:')(error.message);
+              console.log(error.message);
             });
 
           myAjax
             .get('./dummy-jsons/max.json')
             .then(response => {
-              action('Request 2:')(response.data);
+              console.log(response.data);
             })
             .catch(error => {
-              action('Request 2: I got cancelled:')(error.message);
+              console.log(error.message);
             });
         }}
       >

packages/ajax/test/AjaxClass.interceptors.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/AjaxClass.languages.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/AjaxClass.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/AjaxClass.transformers.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/ajax/test/ajax.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/button/package.json

@@ -36,7 +36,7 @@
     "@lion/form": "^0.1.2",
     "@lion/icon": "^0.1.2",
     "@lion/input": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "@polymer/iron-test-helpers": "^3.0.1",
     "sinon": "^7.2.2"

packages/button/src/LionButton.js

@@ -1,8 +1,6 @@
-/* eslint-disable no-underscore-dangle */
 import { css, html, DelegateMixin, SlotMixin } from '@lion/core';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
 
-// eslint-disable-next-line no-unused-vars
 export class LionButton extends DelegateMixin(SlotMixin(LionLitElement)) {
   static get properties() {
     return {

packages/button/stories/index.stories.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
+import { storiesOf, html } from '@open-wc/demoing-storybook';
-import { storiesOf, html, action } from '@open-wc/storybook';
 import { bug12 } from '@lion/icon/stories/icons/bugs-collection';
 import '@lion/icon/lion-icon.js';
 import '@lion/form/lion-form.js';
@@ -7,7 +6,7 @@ import '@lion/input/lion-input.js';
 
 import '../lion-button.js';
 
-storiesOf('Buttons|<lion-button>', module)
+storiesOf('Buttons|Button', module)
   .add(
     'Used on its own',
     () => html`
@@ -39,8 +38,7 @@ storiesOf('Buttons|<lion-button>', module)
           <lion-input name="foo" label="Foo" .modelValue=${'bar'}></lion-input>
           <lion-button
             type="submit"
-            @click=${() =>
+            @click=${() => console.log(document.querySelector('#form').serializeGroup())}
-              action('serializeGroup')(document.querySelector('#form').serializeGroup())}
             >Submit</lion-button
           >
         </form></lion-form

packages/button/test/lion-button.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions */
 import { expect, fixture, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { pressEnter, pressSpace } from '@polymer/iron-test-helpers/mock-interactions.js';

packages/checkbox-group/package.json

@@ -37,7 +37,7 @@
     "@lion/checkbox": "^0.1.2",
     "@lion/form": "^0.1.2",
     "@lion/localize": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/checkbox-group/src/LionCheckboxGroup.js

@@ -1,7 +1,5 @@
 import { LionFieldset } from '@lion/fieldset';
 
-/* eslint-disable no-underscore-dangle */
-
 export class LionCheckboxGroup extends LionFieldset {
   constructor() {
     super();

packages/checkbox-group/stories/index.stories.js

@@ -1,10 +1,10 @@
-import { storiesOf, html, action } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import '../lion-checkbox-group.js';
 import '@lion/checkbox/lion-checkbox.js';
 import '@lion/form/lion-form.js';
 
-storiesOf('Forms|<lion-checkbox-group>', module)
+storiesOf('Forms|Checkbox Group', module)
   .add(
     'Default',
     () => html`
@@ -92,7 +92,7 @@ storiesOf('Forms|<lion-checkbox-group>', module)
     const submit = () => {
       const form = document.querySelector('#form');
       if (form.errorState === false) {
-        action('serializeGroup')(form.serializeGroup());
+        console.log(form.serializeGroup());
       }
     };
     return html`

packages/checkbox-group/test/lion-checkbox-group.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle, no-unused-expressions */
 import { expect, html, fixture, triggerFocusFor, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 

packages/checkbox/package.json

@@ -35,7 +35,7 @@
     "@lion/input": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/choice-input/package.json

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@lion/input": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/choice-input/src/ChoiceInputMixin.js

@@ -1,8 +1,9 @@
+/* eslint-disable class-methods-use-this */
+
 import { html, css, nothing } from '@lion/core';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 import { FormatMixin } from '@lion/field';
 
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
 export const ChoiceInputMixin = superclass =>
   // eslint-disable-next-line
   class ChoiceInputMixin extends FormatMixin(ObserverMixin(superclass)) {

packages/choice-input/test/ChoiceInputMixin.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-expressions */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from '@lion/core';
 

packages/core/package.json

@@ -33,7 +33,7 @@
     "lit-html": "1.0.0"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/core/src/CssClassMixin.js

@@ -1,7 +1,5 @@
 import { dedupeMixin } from './dedupeMixin.js';
 
-/* eslint-disable no-underscore-dangle */
-
 /**
  * # CssClassMixin
  * `CssClassMixin` is a base mixin for the use of css in lion-components.

packages/core/src/DelegateMixin.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
+/* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from './dedupeMixin.js';
 

packages/core/src/DomHelpersMixin.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { dedupeMixin } from './dedupeMixin.js';
 
 /**

packages/core/src/ElementMixin.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
 /* global ShadyCSS */
 import { dedupeMixin } from './dedupeMixin.js';
 import { DomHelpersMixin } from './DomHelpersMixin.js';

packages/core/src/EventMixin.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
+/* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from './dedupeMixin.js';
 

packages/core/src/LionSingleton.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 /**
  * 'LionSingleton' provides an instance of the given class via .getInstance(foo, bar) and will
  * return the same instance if already created. It can reset its instance so a new one will be

packages/core/src/ObserverMixin.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { dedupeMixin } from './dedupeMixin.js';
 
 /**

packages/core/src/SlotMixin.js

@@ -1,8 +1,8 @@
+/* eslint-disable class-methods-use-this */
+
 import { dedupeMixin } from './dedupeMixin.js';
 import { DomHelpersMixin } from './DomHelpersMixin.js';
 
-/* eslint-disable class-methods-use-this, no-underscore-dangle */
-
 /**
  * # SlotMixin
  * `SlotMixin`, when attached to the DOM it creates content for defined slots in the Light DOM.

packages/core/test/CssClassMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle, no-unused-expressions  */
 import { expect, fixture } from '@open-wc/testing';
 
 import { LionLitElement } from '../src/LionLitElement.js';

packages/core/test/DelegateMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions, class-methods-use-this */
 import { expect, fixture, defineCE, unsafeStatic, html } from '@open-wc/testing';
 import sinon from 'sinon';
 import { LionLitElement } from '../src/LionLitElement.js';
@@ -503,6 +501,6 @@ describe('DelegateMixin', () => {
 
     // we expect to NOT use an "internal" property
     // TODO: double check if we test the right thing here
-    expect(el.constructor._classProperties.get('size')).to.be.undefined; // eslint-disable-line no-underscore-dangle
+    expect(el.constructor._classProperties.get('size')).to.be.undefined;
   });
 });

packages/core/test/DomHelpersMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-disable class-methods-use-this, no-underscore-dangle */
-/* eslint-env mocha */
 import { expect, fixture, defineCE } from '@open-wc/testing';
 import { LionLitElement, html } from '../src/LionLitElement.js';
 

packages/core/test/EventMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions, class-methods-use-this */
 import { expect, fixture, html, defineCE } from '@open-wc/testing';
 import { LionLitElement } from '../src/LionLitElement.js';
 
@@ -38,7 +36,6 @@ describe('EventMixin', () => {
         };
       }
 
-      // eslint-disable-next-line class-methods-use-this
       render() {
         return html`
           <button id="button1">with click event</button>
@@ -108,7 +105,7 @@ describe('EventMixin', () => {
     expect(element.fired).to.equal(true);
 
     // this will clear it's state on window
-    delete window.__eventMixinProcessed; // eslint-disable-line no-underscore-dangle
+    delete window.__eventMixinProcessed;
   });
 
   it('supports multiple different events for a single node', async () => {
@@ -142,7 +139,7 @@ describe('EventMixin', () => {
 
       connectedCallback() {
         this.lightDomInput = this.querySelector('input');
-        this.__registerEvents(); // eslint-disable-line
+        this.__registerEvents();
       }
     }
     customElements.define('multi-events', MultiEvents);
@@ -177,7 +174,7 @@ describe('EventMixin', () => {
 
       connectedCallback() {
         this.lightDomButton = this.querySelector('button');
-        this.__registerEvents(); // eslint-disable-line
+        this.__registerEvents();
       }
     }
     customElements.define('multi-functions', MultiFunctions);
@@ -194,9 +191,9 @@ describe('EventMixin', () => {
 
   it('will not add same event/function multiple times to a node', async () => {
     const element = await fixture(`<event-mixin></event-mixin>`);
-    element.__registerEvents(); // eslint-disable-line
+    element.__registerEvents();
-    element.__registerEvents(); // eslint-disable-line
+    element.__registerEvents();
-    expect(element.__eventsCache.length).to.equal(4); // eslint-disable-line
+    expect(element.__eventsCache.length).to.equal(4);
   });
 
   it('will cleanup events', async () => {
@@ -205,8 +202,8 @@ describe('EventMixin', () => {
     // in dev tools you can use getEventListeners but that is not available globally
     // so we are at least testing our implementation
     const element = await fixture(`<event-mixin></event-mixin>`);
-    element.__unregisterEvents(); // eslint-disable-line
+    element.__unregisterEvents();
-    expect(element.__eventsCache.length).to.equal(0); // eslint-disable-line
+    expect(element.__eventsCache.length).to.equal(0);
   });
 
   it('reregisters events if dom node is moved', async () => {

packages/core/test/LionLitElement.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle, no-unused-expressions, class-methods-use-this */
 import { expect, fixture, defineCE } from '@open-wc/testing';
 
 import { LionLitElement, html, css } from '../src/LionLitElement.js';

packages/core/test/LionSingleton.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions */
 import { expect } from '@open-wc/testing';
 
 import { LionSingleton } from '../src/LionSingleton.js';

packages/core/test/ObserverMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle, class-methods-use-this, no-unused-expressions */
 import { expect, fixture, defineCE } from '@open-wc/testing';
 import sinon from 'sinon';
 import { LionLitElement } from '../src/LionLitElement.js';

packages/core/test/SlotMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle, no-unused-expressions */
 import { expect, fixture, defineCE } from '@open-wc/testing';
 
 import { SlotMixin } from '../src/SlotMixin.js';

packages/core/test/dedupeMixin.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 
 import { dedupeMixin } from '../src/dedupeMixin.js';

packages/core/test/lit-html.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect, fixture } from '@open-wc/testing';
 
 import { html } from '../src/lit-html.js';

packages/field/package.json

@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@lion/localize": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/field/src/FieldCustomMixin.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { dedupeMixin, nothing } from '@lion/core';
 
 /**

packages/field/src/FocusMixin.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { dedupeMixin, DelegateMixin } from '@lion/core';
 
 export const FocusMixin = dedupeMixin(

packages/field/src/FormControlMixin.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { html, css, nothing, dedupeMixin } from '@lion/core';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';
 
@@ -496,7 +495,7 @@ export const FormControlMixin = dedupeMixin(
         return (
           super.showSuccessCondition(newStates, oldStates) &&
           this._interactionStateFeedbackCondition()
-        ); // eslint-disable-line max-len
+        );
       }
 
       _interactionStateFeedbackCondition() {

packages/field/src/FormatMixin.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
+/* eslint-disable class-methods-use-this */
 
 import { dedupeMixin } from '@lion/core';
 import { EventMixin } from '@lion/core/src/EventMixin.js';
@@ -54,7 +54,7 @@ export const FormatMixin = dedupeMixin(
            * Examples:
            * - For a date input, this would be the iso format of a date, e.g. '1999-01-20'.
            * - For a number input this would be the String representation of a float ('1234.56' instead
-           *   of 1234.56) // eslint-disable-line max-len
+           *   of 1234.56)
            *
            * When no parser is available, the value is usually the same as the formattedValue
            * (being inputElement.value)

packages/field/src/InteractionStateMixin.js

@@ -13,9 +13,6 @@ import { FocusMixin } from './FocusMixin.js';
  *   field is left non-empty
  * - on keyup (actually, on the model-value-changed event) -> 'dirty' will be set to true
  */
-
-/* eslint-disable class-methods-use-this, no-underscore-dangle */
-
 export const InteractionStateMixin = dedupeMixin(
   superclass =>
     // eslint-disable-next-line no-unused-vars, no-shadow

packages/field/src/LionField.js

@@ -10,8 +10,6 @@ import { FormControlMixin } from './FormControlMixin.js';
 import { InteractionStateMixin } from './InteractionStateMixin.js'; // applies FocusMixin
 import { FormatMixin } from './FormatMixin.js';
 
-/* eslint-disable max-len, no-underscore-dangle, class-methods-use-this, camelcase, no-param-reassign */
-
 /**
  * LionField: wraps components input, textarea and select and potentially others
  * (checkbox group, radio group)
@@ -52,7 +50,7 @@ export class LionField extends FormControlMixin(
         'disabled',
         'selectionStart',
         'selectionEnd',
-      ], // eslint-disable-line max-len
+      ],
       attributes: [...super.delegations.attributes, 'name', 'type', 'disabled'],
     };
   }
@@ -193,6 +191,7 @@ export class LionField extends FormControlMixin(
     }
   }
 
+  // eslint-disable-next-line class-methods-use-this
   __isRequired(modelValue) {
     return {
       required:

packages/field/test/FieldCustomMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable class-methods-use-this, no-underscore-dangle, max-len */
 import { expect, fixture, defineCE } from '@open-wc/testing';
 import { LionField } from '../src/LionField.js';
 

packages/field/test/FormControlMixin.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable class-methods-use-this, no-underscore-dangle, no-unused-expressions */
 import { expect, fixture, html, defineCE, unsafeStatic, nextFrame } from '@open-wc/testing';
 import sinon from 'sinon';
 import { SlotMixin } from '@lion/core';
@@ -12,7 +11,6 @@ describe('FormControlMixin', () => {
   let tag;
 
   before(async () => {
-    // eslint-disable-next-line max-len
     const FormControlMixinClass = class extends FormControlMixin(SlotMixin(LionLitElement)) {
       static get properties() {
         return {

packages/field/test/FormatMixin.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable class-methods-use-this, no-underscore-dangle */
 import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
 import sinon from 'sinon';
 
@@ -12,7 +10,6 @@ function mimicUserInput(formControl, newViewValue) {
   formControl.inputElement.dispatchEvent(new CustomEvent('input', { bubbles: true }));
 }
 
-/* eslint-disable no-unused-expressions */
 describe('FormatMixin', () => {
   let elem;
   let nonFormat;

packages/field/test/InteractionStateMixin.test.js

@@ -1,8 +1,3 @@
-/* eslint-env mocha */
-/*
-  eslint-disable class-method-use-this, no-underscore-dangle,
-  no-unused-expressions, no-new, no-unused-vars
-*/
 import { expect, fixture, unsafeStatic, html, defineCE } from '@open-wc/testing';
 import sinon from 'sinon';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
@@ -50,7 +45,6 @@ describe('InteractionStateMixin', async () => {
   // See: https://stackblitz.com/edit/lit-element-request-update-bug-g59tjq?file=blurry.js
   // it.skip
   it('sets touched to true when field left after focus', async () => {
-    // eslint-disable-next-line max-len
     // const formElement = await LionTest.htmlFixture(`<${elem}><input type="text" slot="input"></${elem}>`);
     // await triggerFocusFor(formElement.inputElement); // focus/blur can't be delegated
     // await triggerBlurFor(formElement.inputElement);

packages/field/test/lion-field.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle, no-unused-expressions */
 import {
   expect,
   fixture,
@@ -138,7 +136,6 @@ describe('<lion-field>', () => {
   });
 
   it('preserves the caret position on value change for native text fields (input|textarea)', async () => {
-    // eslint-disable-line
     const lionField = await fixture(`<${tagString}>${inputSlotString}</${tagString}>`);
     await triggerFocusFor(lionField);
     await lionField.updateComplete;

packages/fieldset/package.json

@@ -37,7 +37,7 @@
   "devDependencies": {
     "@lion/input": "^0.1.2",
     "@lion/localize": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1",
     "sinon": "^7.2.2"
   }

packages/fieldset/src/LionFieldset.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { SlotMixin, html } from '@lion/core';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
 import { CssClassMixin } from '@lion/core/src/CssClassMixin.js';
@@ -20,7 +18,6 @@ const pascalCase = str => str.charAt(0).toUpperCase() + str.slice(1);
 export class LionFieldset extends FormControlMixin(
   ValidateMixin(EventMixin(CssClassMixin(SlotMixin(ObserverMixin(LionLitElement))))),
 ) {
-  // eslint-disable-line no-unused-vars, max-len
   static get properties() {
     return {
       ...super.properties,
@@ -344,7 +341,7 @@ export class LionFieldset extends FormControlMixin(
       this.constructor._addDescriptionElementIdsToField(
         child,
         parent._getAriaDescriptionElements(),
-      ); // eslint-disable-line max-len
+      );
       // Also check if the newly added child needs to refer grandparents
       parent = parent.__parentFormGroup;
     }

packages/fieldset/stories/index.stories.js

@@ -1,8 +1,8 @@
-import { storiesOf, html, action } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import '../lion-fieldset.js';
 
-storiesOf('Forms|<lion-fieldset>', module)
+storiesOf('Forms|Fieldset', module)
   .add(
     'Default',
     () => html`
@@ -25,7 +25,7 @@ storiesOf('Forms|<lion-fieldset>', module)
       <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>
-        <button @click=${ev => action('modelValue')(ev.target.parentElement.modelValue)}>
+        <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
           Log to Action Logger
         </button>
       </lion-fieldset>
@@ -44,13 +44,12 @@ storiesOf('Forms|<lion-fieldset>', module)
           <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
         </lion-fieldset>
         <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
-        <button @click=${ev => action('modelValue')(ev.target.parentElement.modelValue)}>
+        <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
           Log to Action Logger
         </button>
         <br />
         <button
-          @click=${ev =>
+          @click=${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}
-            action('modelValue')(ev.target.parentElement.formElements.nameGroup.modelValue)}
         >
           Log nameGroup to Action Logger
         </button>

packages/fieldset/test/lion-fieldset.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle */
 import {
   expect,
   fixture,
@@ -73,7 +71,6 @@ describe('<lion-fieldset>', () => {
     ]);
   });
 
-  /* eslint-disable no-console */
   it('throws if an element without a name tries to register', async () => {
     const orig = console.info;
     console.info = () => {};

packages/form-system/package.json

@@ -43,7 +43,7 @@
     "@lion/radio": "^0.1.2",
     "@lion/radio-group": "^0.1.2",
     "@lion/textarea": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/form-system/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import '@lion/form/lion-form.js';
 import '@lion/fieldset/lion-fieldset.js';
@@ -14,7 +14,7 @@ import '@lion/input-amount/lion-input-amount.js';
 import '@lion/input-date/lion-input-date.js';
 import '@lion/input-email/lion-input-email.js';
 
-storiesOf('Forms|<lion-form>', module).add('Umbrella form', () => {
+storiesOf('Forms|Form', module).add('Umbrella form', () => {
   return html`
     <lion-form
       ><form>

packages/form/package.json

@@ -38,7 +38,7 @@
     "@lion/input-iban": "^0.1.2",
     "@lion/textarea": "^0.1.2",
     "@lion/validate": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/form/src/LionForm.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { DelegateMixin } from '@lion/core';
 import { LionFieldset } from '@lion/fieldset';
 

packages/form/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf, html, action } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import '../lion-form.js';
 import '@lion/fieldset/lion-fieldset.js';
@@ -7,7 +7,7 @@ import '@lion/textarea/lion-textarea.js';
 
 import { maxLengthValidator } from '@lion/validate';
 
-storiesOf('Forms|<lion-form>', module)
+storiesOf('Forms|Form', module)
   .add(
     'Basic form result',
     () => html`
@@ -29,10 +29,7 @@ storiesOf('Forms|<lion-form>', module)
             help-text="If none, leave empty"
             label="Comments"
           ></lion-textarea>
-          <button
+          <button @click=${() => console.log(document.querySelector('#form').serializeGroup())}>
-            @click=${() =>
-              action('serializeGroup')(document.querySelector('#form').serializeGroup())}
-          >
             Log to Action Logger
           </button>
         </form></lion-form
@@ -43,7 +40,7 @@ storiesOf('Forms|<lion-form>', module)
     const submit = () => {
       const form = document.querySelector('#form');
       if (form.errorState === false) {
-        action('serializeGroup')(form.serializeGroup());
+        console.log(form.serializeGroup());
       }
     };
     return html`

packages/form/test/lion-form.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle */
 import { expect, fixture, html } from '@open-wc/testing';
 
 import '@lion/input/lion-input.js';

packages/icon/package.json

@@ -33,7 +33,7 @@
     "@lion/core": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/icon/src/LionIcon.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { html, css, render, unsafeHTML, until } from '@lion/core';
 import { LionLitElement } from '@lion/core/src/LionLitElement.js';
 
@@ -73,7 +72,6 @@ export class LionIcon extends LionLitElement {
     }
   }
 
-  // eslint-disable-next-line class-methods-use-this
   render() {
     return html`
       <slot></slot>

packages/icon/stories/index.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 import { until } from '@lion/core';
 
 import '../lion-icon.js';
@@ -20,7 +20,7 @@ import sun from './icons/space/sun.svg.js';
 import moonFlag from './icons/space/moon-flag.svg.js';
 import night from './icons/space/night.svg.js';
 
-storiesOf('Icon System|<lion-icon>', module)
+storiesOf('Icon System|Icon', module)
   .add(
     'default',
     () => html`

packages/icon/test/lion-icon.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-underscore-dangle */
 import { expect, fixture, aTimeout, html } from '@open-wc/testing';
 import { until } from '@lion/core';
 

packages/input-amount/package.json

@@ -37,7 +37,7 @@
     "@lion/validate": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/input-amount/src/LionInputAmount.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { css } from '@lion/core';
 import { LocalizeMixin } from '@lion/localize';
 import { ObserverMixin } from '@lion/core/src/ObserverMixin.js';

packages/input-amount/stories/index.stories.js

@@ -1,8 +1,8 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import '../lion-input-amount.js';
 
-storiesOf('Forms|<lion-input-amount>', module)
+storiesOf('Forms|Input Amount', module)
   .add(
     'Default',
     () => html`

packages/input-amount/test/formatters.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import { localize } from '@lion/localize';
 

packages/input-amount/test/lion-input-amount.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions */
 import { expect, fixture, aTimeout } from '@open-wc/testing';
 import { html } from '@lion/core';
 import { localize } from '@lion/localize';

packages/input-amount/test/parsers.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 import { localize } from '@lion/localize';
 

packages/input-date/package.json

@@ -37,7 +37,7 @@
     "@lion/validate": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/input-date/src/LionInputDate.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { LocalizeMixin, formatDate, parseDate } from '@lion/localize';
 import { FieldCustomMixin } from '@lion/field';
 import { LionInput } from '@lion/input';

packages/input-date/stories/index.stories.js

@@ -1,9 +1,9 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 import { maxDateValidator, minDateValidator, minMaxDateValidator } from '@lion/validate';
 
 import '../lion-input-date.js';
 
-storiesOf('Forms|<lion-input-date>', module)
+storiesOf('Forms|Input Date', module)
   .add(
     'Default',
     () => html`

packages/input-date/test/lion-input-date.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from '@lion/core';
 import { localizeTearDown } from '@lion/localize/test-helpers.js';

packages/input-email/package.json

@@ -37,7 +37,7 @@
     "@lion/validate": "^0.1.2"
   },
   "devDependencies": {
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/input-email/src/LionInputEmail.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle */
-
 import { LocalizeMixin } from '@lion/localize';
 import { FieldCustomMixin } from '@lion/field';
 import { LionInput } from '@lion/input';

packages/input-email/stories/index.stories.js

@@ -1,10 +1,10 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import { localize } from '@lion/localize';
 
 import '../lion-input-email.js';
 
-storiesOf('Forms|<lion-input-email>', module)
+storiesOf('Forms|Input Email', module)
   .add(
     'Default',
     () => html`

packages/input-email/test/lion-input-email.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect, fixture } from '@open-wc/testing';
 
 import '../lion-input-email.js';

packages/input-iban/package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@lion/validate": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/input-iban/src/LionInputIban.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-underscore-dangle, class-methods-use-this */
-
 import { LocalizeMixin } from '@lion/localize';
 import { LionInput } from '@lion/input';
 import { FieldCustomMixin } from '@lion/field';

packages/input-iban/src/validators.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 import { isValidIBAN } from '@bundled-es-modules/ibantools/ibantools.js';
 
 export const isIBAN = value => isValidIBAN(value);

packages/input-iban/stories/index.stories.js

@@ -1,9 +1,9 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import { isCountryIBANValidator } from '../src/validators.js';
 import '../lion-input-iban.js';
 
-storiesOf('Forms|<lion-input-iban>', module)
+storiesOf('Forms|Input IBAN', module)
   .add(
     'Default',
     () => html`

packages/input-iban/test/formatters.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 
 import { formatIBAN } from '../src/formatters.js';

packages/input-iban/test/lion-input-iban.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions */
 import { expect, fixture } from '@open-wc/testing';
 import { html } from '@lion/core';
 

packages/input-iban/test/parsers.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect } from '@open-wc/testing';
 
 import { parseIBAN } from '../src/parsers.js';

packages/input-iban/test/validators.test.js

@@ -1,5 +1,3 @@
-/* eslint-env mocha */
-/* eslint-disable no-unused-expressions */
 import { expect } from '@open-wc/testing';
 import { smokeTestValidator } from '@lion/validate/test/validators.test.js';
 

packages/input/package.json

@@ -36,7 +36,7 @@
   "devDependencies": {
     "@lion/localize": "^0.1.2",
     "@lion/validate": "^0.1.2",
-    "@open-wc/storybook": "^0.1.5",
+    "@open-wc/demoing-storybook": "^0.2.0",
     "@open-wc/testing": "^0.11.1"
   }
 }

packages/input/src/LionInput.js

@@ -1,7 +1,5 @@
 import { LionField } from '@lion/field';
 
-/* eslint-disable no-underscore-dangle */
-
 /**
  * LionInput: extension of lion-field with native input element in place and user friendly API
  *

packages/input/stories/index.stories.js

@@ -1,8 +1,8 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 
 import '../lion-input.js';
 
-storiesOf('Forms|<lion-input>', module)
+storiesOf('Forms|Input', module)
   .add(
     'Default',
     () => html`

packages/input/stories/localize.stories.js

@@ -1,10 +1,9 @@
-/* eslint-disable no-underscore-dangle */
+import { storiesOf, html } from '@open-wc/demoing-storybook';
-import { storiesOf, html } from '@open-wc/storybook';
 import { maxLengthValidator } from '@lion/validate';
 import { localize, LocalizeMixin } from '@lion/localize';
 import { LionInput } from '../src/LionInput.js';
 
-storiesOf('Forms|<lion-input> Localize', module).add('localize', () => {
+storiesOf('Forms|Input Localize', module).add('localize', () => {
   class InputValidationExample extends LocalizeMixin(LionInput) {
     static get localizeNamespaces() {
       return [

packages/input/stories/validation-string.stories.js

@@ -1,4 +1,4 @@
-import { storiesOf, html } from '@open-wc/storybook';
+import { storiesOf, html } from '@open-wc/demoing-storybook';
 import {
   equalsLengthValidator,
   minLengthValidator,
@@ -9,7 +9,7 @@ import {
 import { LocalizeMixin } from '@lion/localize';
 import { LionInput } from '../src/LionInput.js';
 
-storiesOf('Forms|<lion-input> String Validation', module)
+storiesOf('Forms|Input String Validation', module)
   .add(
     'equalsLength',
     () => html`

packages/input/test/lion-input.test.js

@@ -1,4 +1,3 @@
-/* eslint-env mocha */
 import { expect, fixture } from '@open-wc/testing';
 
 import '../lion-input.js';