Merge pull request #761 from ing-bank/chore/tab-storybook

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,