chore(tabs): improve readme for storybook

This commit is contained in:
qa46hx 2020-06-09 11:28:24 +02:00 committed by Joren Broekema
parent 7573ecf53e
commit 8d8cb79b16
7 changed files with 18 additions and 44 deletions

View file

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

View file

@ -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);
}

View file

@ -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> `;
```

View file

@ -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() {}

View file

@ -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> `;
};
```

View file

@ -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,

View file

@ -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"