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( .add(
'Default', 'Default',
() => html` () => html`
<lion-steps id="stepsController"> <lion-steps>
<lion-step initial-step> <lion-step initial-step>
<p>Welcome</p> <p>Welcome</p>
<button disabled>previous</button> &nbsp; <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>
<lion-step> <lion-step>
<p>Are you single?</p> <p>Are you single?</p>
<input <input
type="button" type="button"
value="yes" value="yes"
@click=${() => { @click=${ev => {
stepsController.data.isSingle = true; ev.target.parentElement.controller.data.isSingle = true;
stepsController.next(); ev.target.parentElement.controller.next();
}} }}
/> />
&nbsp; &nbsp;
<input <input
type="button" type="button"
value="no" value="no"
@click=${() => { @click=${ev => {
stepsController.data.isSingle = false; ev.target.parentElement.controller.data.isSingle = false;
stepsController.next(); ev.target.parentElement.controller.next();
}} }}
/> />
<br /><br /> <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>
<lion-step id="is-single" .condition="${data => data.isSingle}"> <lion-step id="is-single" .condition="${data => data.isSingle}">
<p>You are single</p> <p>You are single</p>
<input type="button" value="previous" @click=${() => stepsController.previous()} /> &nbsp; <input
<input type="button" value="next" @click=${() => stepsController.next()} /> 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>
<lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition> <lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
<p>You are NOT single.</p> <p>You are NOT single.</p>
<input type="button" value="previous" @click=${() => stepsController.previous()} /> &nbsp; <input
<input type="button" value="next" @click=${() => stepsController.next()} /> 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>
<lion-step> <lion-step>
<p>Finish</p> <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-step>
</lion-steps> </lion-steps>
`, `,