ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(steps): fix the steps demo to work in all contexts

Browse source
This commit is contained in:
Joren Broekema 2019-08-22 14:18:45 +02:00 committed by Thomas Allmer
parent 2cb6dee6d9
commit 70e45772f8
1 changed files with 44 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
packages/steps/stories/index.stories.js
View file

@ -8,47 +8,77 @@ storiesOf('Steps|Steps', module)
.add(
'Default',
() => html`
<lion-steps id="stepsController">
<lion-steps>
<lion-step initial-step>
<p>Welcome</p>
<button disabled>previous</button> &nbsp;
<input type="button" value="next" @click=${() => stepsController.next()} />
<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=${() => {
stepsController.data.isSingle = true;
stepsController.next();
@click=${ev => {
ev.target.parentElement.controller.data.isSingle = true;
ev.target.parentElement.controller.next();
}}
/>
&nbsp;
<input
type="button"
value="no"
@click=${() => {
stepsController.data.isSingle = false;
stepsController.next();
@click=${ev => {
ev.target.parentElement.controller.data.isSingle = false;
ev.target.parentElement.controller.next();
}}
/>
<br /><br />
<input type="button" value="previous" @click=${() => stepsController.previous()} />
<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=${() => stepsController.previous()} /> &nbsp;
<input type="button" value="next" @click=${() => stepsController.next()} />
<input
type="button"
value="previous"
@click=${ev => ev.target.parentElement.controller.previous()}
/>
&nbsp;
<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=${() => stepsController.previous()} /> &nbsp;
<input type="button" value="next" @click=${() => stepsController.next()} />
<input
type="button"
value="previous"
@click=${ev => ev.target.parentElement.controller.previous()}
/>
&nbsp;
<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=${() => stepsController.previous()} />
<input
type="button"
value="previous"
@click=${ev => ev.target.parentElement.controller.previous()}
/>
</lion-step>
</lion-steps>
`,