chore(tabs): improve readme for storybook

packages/button/README.md

@@ -15,7 +15,7 @@ export default {
 };
 ```
 
-```js story
+```js preview-story
 export const main = () => html` <lion-button>Default</lion-button> `;
 ```
 

packages/button/src/LionButton.js

@@ -207,7 +207,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
   }
 
   __setupDelegationInConstructor() {
-    // do not move to connectedCallback, otherwise IE11 breaks
+    // do not move to connectedCallback, otherwise IE11 breaks.
     // more info: https://github.com/ing-bank/lion/issues/179#issuecomment-511763835
     this.addEventListener('click', this.__clickDelegationHandler, true);
   }

packages/switch/README.md

@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```js story
+```js preview-story
 export const main = () => html` <lion-switch label="Label" help-text="Help text"></lion-switch> `;
 ```
 

packages/switch/src/LionSwitch.js

@@ -1,6 +1,5 @@
-import { ChoiceInputMixin, LionField } from '@lion/form-core';
 import { css, html, ScopedElementsMixin } from '@lion/core';
-
+import { ChoiceInputMixin, LionField } from '@lion/form-core';
 import { LionSwitchButton } from './LionSwitchButton.js';
 
 export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
@@ -72,7 +71,7 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
   }
 
   /**
-   * Override this function from ChoiceInputMixin
+   * Override this function from ChoiceInputMixin.
    */
   // eslint-disable-next-line class-methods-use-this
   _isEmpty() {}

packages/tabs/README.md

@@ -14,7 +14,7 @@ export default {
 };
 ```
 
-```js story
+```js preview-story
 export const main = () => html`
   <lion-tabs>
     <button slot="tab">Info</button>
@@ -37,14 +37,14 @@ export const main = () => html`
 npm i --save @lion/tabs;
 ```
 
-### Usage
-
 ```js
-import { LiontTabs } from '@lion/tabs';
+import { LionTabs } from '@lion/tabs';
 // or
 import '@lion/tabs/lion-tabs.js';
 ```
 
+### Usage
+
 ```html
 <lion-tabs>
   <button slot="tab">Info</button>
@@ -106,7 +106,7 @@ Below, we demonstrate on how you could dynamically add new tab + panels.
 
 ```js preview-story
 export const distributeNewElement = () => {
-  const tagName = 'lion-tabs-experimental';
+  const tagName = 'demo-tabs-add-dynamically';
   if (!customElements.get(tagName)) {
     customElements.define(
       tagName,
@@ -119,20 +119,17 @@ export const distributeNewElement = () => {
         render() {
           return html`
             <h3>Append</h3>
-            <button @click="${this.__handleAppendClick}">
-              Append
-            </button>
             <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>
-            <button @click="${this.__handlePushClick}">
-              Push
-            </button>
             <lion-tabs id="pushTabs">
               <button slot="tab">tab 1</button>
               <p slot="panel">panel 1</p>
@@ -145,6 +142,9 @@ export const distributeNewElement = () => {
                 `,
               )}
             </lion-tabs>
+            <button @click="${this.__handlePushClick}">
+              Push
+            </button>
           `;
         }
         constructor() {
@@ -180,7 +180,7 @@ export const distributeNewElement = () => {
       },
     );
   }
-  return html` <lion-tabs-experimental></lion-tabs-experimental> `;
+  return html` <demo-tabs-add-dynamically></demo-tabs-add-dynamically> `;
 };
 ```
 

packages/tabs/src/LionTabs.js

@@ -67,7 +67,7 @@ export class LionTabs extends LitElement {
   static get properties() {
     return {
       /**
-       * index number of the selected tab
+       * index number of the selected tab.
        */
       selectedIndex: {
         type: Number,

yarn.lock

@@ -1998,31 +1998,6 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
-"@lion/field@0.13.1":
-  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/@lion/field/-/field-0.13.1.tgz#566244c16fbac8e46d59e5a2eca7024cc6c8bfdc"
-  integrity sha512-ecAzZt4qq4VA+BCrxS9wcE5Vzy3yK6ETdHQlnmIZKuJwaACbtx+FKTkDovwxkYy4jpohWB2g+etQevz4F6GOzw==
-  dependencies:
-    "@lion/core" "0.6.0"
-    "@lion/validate" "0.11.0"
-
-"@lion/localize@0.10.0":
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/@lion/localize/-/localize-0.10.0.tgz#f3608baeb9ae65ac4e0c3efdd6208208220a6153"
-  integrity sha512-oAy07yvNkFlsMxW3TBwrHvj1QEcjVDJ50vazuekzpc0M6v9c+00/6Y3U3TnH/H5V5qjKmOHnfhqYZoVqkmaqhA==
-  dependencies:
-    "@bundled-es-modules/message-format" "6.0.4"
-    "@lion/core" "0.6.0"
-    singleton-manager "1.0.0"
-
-"@lion/validate@0.11.0":
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/@lion/validate/-/validate-0.11.0.tgz#634465b2a90461024e913698f60505cd0b774a19"
-  integrity sha512-pphmYoWZZyybjLo0kdZ8jBSDwS2yh4Kjuanu6Qv8YJCK1gK1d7CvMIqBdFAPlRvZ5DSpz7eoHMrY/iYbo6edog==
-  dependencies:
-    "@lion/core" "0.6.0"
-    "@lion/localize" "0.10.0"
-
 "@marionebl/sander@^0.6.0":
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/@marionebl/sander/-/sander-0.6.1.tgz#1958965874f24bc51be48875feb50d642fc41f7b"