@alegendstale/holly-components
Version:
Reusable UI components created using lit
44 lines (43 loc) • 4.03 kB
JavaScript
import { html } from 'lit';
const meta = {
title: 'Bottom Sheet',
tags: ['autodocs'],
component: 'bottom-sheet',
};
export default meta;
const Template = {
render: ({ open, nonmodal, snapPoints }) => {
return html `
<bottom-sheet ?open=${open} .snapPoints=${snapPoints} ?nonmodal=${nonmodal}>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget dui eros. Nunc vel magna pellentesque, euismod lacus eu, euismod ligula. Nulla porttitor ultrices enim, ac fermentum ligula bibendum nec. Maecenas et volutpat nulla. Donec sit amet dapibus est, ultricies accumsan nunc. Praesent vitae nulla metus. Aenean non posuere lorem, bibendum scelerisque mauris. Praesent arcu dolor, efficitur vel malesuada nec, rhoncus eget eros. Nullam facilisis, diam eu tristique euismod, neque dolor pellentesque purus, id tristique ex quam eget lacus. Pellentesque lacinia consequat ligula. Duis egestas ornare porttitor. Morbi tempus fermentum nulla. Sed eu turpis quis nunc aliquam cursus vitae nec arcu. Nulla nec leo et tellus condimentum commodo mollis in dolor. Vivamus tortor eros, dictum in nulla ac, ultricies posuere ligula. Maecenas elit sem, efficitur et risus sed, placerat imperdiet nisl. Donec nunc ipsum, molestie et elementum a, hendrerit in diam. Vestibulum
ullamcorper eu dolor id maximus. Donec in nunc vel dolor vehicula mollis. Mauris elementum, massa vitae condimentum efficitur, nisi massa condimentum dolor, at ultricies nulla ante et tortor. Praesent vitae vestibulum urna. Nunc aliquam aliquam elementum. Nullam facilisis ut ligula in ultrices. Vestibulum et risus ut eros gravida malesuada varius euismod dolor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean dui nisl, auctor quis laoreet fringilla, aliquam id risus. Pellentesque sit amet neque finibus, pharetra dolor eu, eleifend ante. Vestibulum condimentum urna urna, ut dignissim nibh posuere in. Proin nec tincidunt enim, vel vehicula nunc. In quis pellentesque urna. Curabitur egestas arcu non arcu ullamcorper, at pellentesque lacus varius. Maecenas ac molestie erat. Integer ornare dui vitae turpis porttitor, nec semper mauris ultrices. Quisque eu arcu ipsum. Morbi sed tristique urna. Pellentesque gravida, nisi elementum ultrices condimentum,
ipsum nisl faucibus ex, eget imperdiet dolor sem sit amet dui. Aenean dictum nibh nulla, non lacinia arcu molestie tempus. Donec a ex sodales, posuere felis eget, vestibulum odio. Sed lectus sapien, lacinia in orci eu, molestie finibus ex. Pellentesque dictum, dolor nec interdum gravida, sapien velit venenatis libero, eu finibus elit purus et ipsum. Vivamus sed eros libero. Aenean a auctor quam. Vivamus blandit enim tellus, in posuere enim fermentum varius. Donec malesuada orci ac ex dapibus, nec condimentum metus hendrerit. Nam non efficitur sem, ac ornare sapien. In varius libero et malesuada gravida. Suspendisse sollicitudin euismod ante, quis tincidunt quam rhoncus ac. Proin in pulvinar tortor. Nullam condimentum vestibulum dignissim. In hac habitasse platea dictumst. Etiam laoreet volutpat urna, et euismod urna aliquet egestas. Nulla odio tellus, vestibulum sit amet auctor vitae, tristique ut turpis. Cras sed tellus accumsan, pellentesque urna eget,
sollicitudin felis. In euismod ac arcu vitae suscipit. Curabitur non consequat nibh. In purus nulla, egestas in commodo in, fermentum sit amet massa. Nullam luctus velit vel arcu dictum, vel fermentum dolor convallis. Nulla interdum quam nibh, in egestas turpis vestibulum vel. Nulla placerat sapien sit amet pharetra porttitor.
</p>
</bottom-sheet>
`;
},
};
export const Modal = {
...Template,
args: {
open: false,
snapPoints: [0, 50, 100],
},
};
export const NonModal = {
...Template,
args: {
open: false,
nonmodal: true,
snapPoints: [0, 50, 100],
},
};
export const Thirds = {
...Template,
args: {
open: false,
snapPoints: [0, 33, 66],
},
};