364f185ad8
Co-authored-by: Thomas Allmer <Thomas.Allmer@ing.com> Co-authored-by: Joren Broekema <Joren.Broekema@ing.com> Co-authored-by: Mikhail Bashkirov <Mikhail.Bashkirov@ing.com>
45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
import { storiesOf, html } from '@open-wc/demoing-storybook';
|
|
|
|
import { css } from '@lion/core';
|
|
import { fixtureSync } from '@open-wc/testing-helpers';
|
|
import { OverlayController, withBottomSheetConfig } from '../index.js';
|
|
|
|
const bottomSheetDemoStyle = css`
|
|
.demo-overlay {
|
|
background-color: white;
|
|
border: 1px solid lightgrey;
|
|
text-align: center;
|
|
}
|
|
`;
|
|
|
|
storiesOf('Global Overlay System|BottomSheet', module).add('Default', () => {
|
|
const bottomSheetCtrl = new OverlayController({
|
|
...withBottomSheetConfig(),
|
|
contentNode: fixtureSync(html`
|
|
<div class="demo-overlay">
|
|
<p>BottomSheet</p>
|
|
<button @click="${() => bottomSheetCtrl.hide()}">Close</button>
|
|
</div>
|
|
`),
|
|
});
|
|
|
|
return html`
|
|
<style>
|
|
${bottomSheetDemoStyle}
|
|
</style>
|
|
<a href="#">Anchor 1</a>
|
|
<button
|
|
@click="${event => bottomSheetCtrl.show(event.target)}"
|
|
aria-haspopup="dialog"
|
|
aria-expanded="false"
|
|
>
|
|
Open dialog
|
|
</button>
|
|
<a href="#">Anchor 2</a>
|
|
${Array(50).fill(
|
|
html`
|
|
<p>Lorem ipsum</p>
|
|
`,
|
|
)}
|
|
`;
|
|
});
|