91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
import { bug12 } from '@lion/icon/stories/icons/bugs-collection.js';
|
|
import '@lion/icon/lion-icon.js';
|
|
import '@lion/form/lion-form.js';
|
|
import '@lion/input/lion-input.js';
|
|
|
|
import '../lion-button.js';
|
|
|
|
storiesOf('Buttons|Button', module)
|
|
.add(
|
|
'Used on its own',
|
|
() => html`
|
|
<style>
|
|
.demo-box {
|
|
display: flex;
|
|
padding: 8px;
|
|
}
|
|
|
|
lion-button {
|
|
margin: 8px;
|
|
}
|
|
</style>
|
|
<div class="demo-box">
|
|
<lion-button>Default</lion-button>
|
|
<lion-button><lion-icon .svg="${bug12}"></lion-icon>Debug</lion-button>
|
|
<lion-button type="submit">Submit</lion-button>
|
|
<lion-button aria-label="Debug"><lion-icon .svg="${bug12}"></lion-icon></lion-button>
|
|
<lion-button @click="${e => console.log('clicked/spaced/entered', e)}">
|
|
click/space/enter me and see log
|
|
</lion-button>
|
|
<lion-button disabled>Disabled</lion-button>
|
|
</div>
|
|
`,
|
|
)
|
|
.add(
|
|
'Within a native form',
|
|
() => html`
|
|
<form
|
|
@submit=${ev => {
|
|
ev.preventDefault();
|
|
console.log('submit handler');
|
|
}}
|
|
>
|
|
<label for="firstNameId">First name</label>
|
|
<input id="firstNameId" name="firstName" />
|
|
<label for="lastNameId">Last name</label>
|
|
<input id="lastNameId" name="lastName" />
|
|
<lion-button @click=${() => console.log('click handler')}>Submit</lion-button>
|
|
</form>
|
|
<p>
|
|
Supports the following use cases:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
Submit on button click
|
|
</li>
|
|
<li>
|
|
Reset native form fields when using type="reset"
|
|
</li>
|
|
<li>
|
|
Submit on button enter or space keypress
|
|
</li>
|
|
<li>
|
|
Submit on enter keypress inside an input
|
|
</li>
|
|
</ul>
|
|
<p>Important notes:</p>
|
|
<ul>
|
|
<li>
|
|
A (lion)-button of type submit is mandatory for the last use case, if you have multiple
|
|
inputs. This is native behavior.
|
|
</li>
|
|
<li>
|
|
<span style="background-color: azure">
|
|
<code>@click</code> on <code>lion-button</code>
|
|
</span>
|
|
and
|
|
<span style="background-color: seashell">
|
|
<code>@submit</code> on <code>form</code>
|
|
</span>
|
|
are triggered by these use cases. We strongly encourage you to listen to the submit
|
|
handler if your goal is to do something on form-submit
|
|
</li>
|
|
<li>
|
|
To prevent form submission full page reloads, add a <b>submit handler on the form</b>
|
|
<code>@submit</code> with <code>event.preventDefault()</code>. Adding it on the
|
|
<code>lion-button</code> is not enough.
|
|
</li>
|
|
</ul>
|
|
`,
|
|
);
|