86 lines
2.4 KiB
JavaScript
86 lines
2.4 KiB
JavaScript
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
|
|
import '../lion-steps.js';
|
|
import '../lion-step.js';
|
|
|
|
storiesOf('Steps|Steps', module)
|
|
/* eslint-disable */
|
|
.add(
|
|
'Default',
|
|
() => html`
|
|
<lion-steps>
|
|
<lion-step initial-step>
|
|
<p>Welcome</p>
|
|
<button disabled>previous</button>
|
|
<input
|
|
type="button"
|
|
value="next"
|
|
@click=${ev => ev.target.parentElement.controller.next()}
|
|
/>
|
|
</lion-step>
|
|
<lion-step>
|
|
<p>Are you single?</p>
|
|
<input
|
|
type="button"
|
|
value="yes"
|
|
@click=${ev => {
|
|
ev.target.parentElement.controller.data.isSingle = true;
|
|
ev.target.parentElement.controller.next();
|
|
}}
|
|
/>
|
|
|
|
<input
|
|
type="button"
|
|
value="no"
|
|
@click=${ev => {
|
|
ev.target.parentElement.controller.data.isSingle = false;
|
|
ev.target.parentElement.controller.next();
|
|
}}
|
|
/>
|
|
<br /><br />
|
|
<input
|
|
type="button"
|
|
value="previous"
|
|
@click=${ev => ev.target.parentElement.controller.previous()}
|
|
/>
|
|
</lion-step>
|
|
<lion-step id="is-single" .condition="${data => data.isSingle}">
|
|
<p>You are single</p>
|
|
<input
|
|
type="button"
|
|
value="previous"
|
|
@click=${ev => ev.target.parentElement.controller.previous()}
|
|
/>
|
|
|
|
<input
|
|
type="button"
|
|
value="next"
|
|
@click=${ev => ev.target.parentElement.controller.next()}
|
|
/>
|
|
</lion-step>
|
|
<lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
|
|
<p>You are NOT single.</p>
|
|
<input
|
|
type="button"
|
|
value="previous"
|
|
@click=${ev => ev.target.parentElement.controller.previous()}
|
|
/>
|
|
|
|
<input
|
|
type="button"
|
|
value="next"
|
|
@click=${ev => ev.target.parentElement.controller.next()}
|
|
/>
|
|
</lion-step>
|
|
<lion-step>
|
|
<p>Finish</p>
|
|
<input
|
|
type="button"
|
|
value="previous"
|
|
@click=${ev => ev.target.parentElement.controller.previous()}
|
|
/>
|
|
</lion-step>
|
|
</lion-steps>
|
|
`,
|
|
);
|
|
/* eslint-enable */
|