@teamsnap/teamsnap-ui
Version:
a CSS component library for TeamSnap
602 lines (601 loc) • 35.1 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.WithCloseButton = exports.WithDescriptors = exports.Fullscreen = exports.LongBodyText = exports.ClosingTriggeredByAsyncAction = exports.Default = void 0;
var React = __importStar(require("react"));
var Modal_1 = __importDefault(require("./Modal"));
var Button_1 = require("../Button");
var Loader_1 = require("../Loader");
exports.default = {
title: 'Modal',
};
var Default = function () {
var _a = React.useState(false), sending = _a[0], setSending = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement(Button_1.Button, { label: "Test Modal", onClick: function () { return setSending(true); } }),
React.createElement(Modal_1.default, { heading: React.createElement("div", { className: "u-textCenter" }, "Sending"), show: sending, showClose: true, closeFn: function () { return setSending(false); } },
React.createElement(Loader_1.Loader, { type: "spin", text: "Sending", message: "Some really long message here" }))));
};
exports.Default = Default;
var ClosingTriggeredByAsyncAction = function () {
var _a = React.useState(false), sending = _a[0], setSending = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement(Button_1.Button, { label: "Test Modal", onClick: function () {
setTimeout(function () {
setSending(false);
}, 5000);
setSending(true);
} }),
React.createElement(Modal_1.default, { heading: React.createElement("div", { className: "u-textCenter" }, "Self closing modal"), show: sending },
React.createElement(Loader_1.Loader, { type: "spin", text: "Sending", message: "I close in 5 seconds." }))));
};
exports.ClosingTriggeredByAsyncAction = ClosingTriggeredByAsyncAction;
var LongBodyText = function () {
var _a = React.useState(false), sending = _a[0], setSending = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement(Button_1.Button, { label: "Test Modal", onClick: function () { return setSending(true); } }),
React.createElement(Modal_1.default, { heading: "Sending", show: sending, showClose: true, allowOverlayClose: true, closeFn: function () { return setSending(false); } },
React.createElement("p", null,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante ",
React.createElement("b", null, "Integer"),
" dapibus diam. Sed nisi. Nulla quis sem at",
' ',
React.createElement("i", null, "Lorem"),
" nibh elementum imperdiet. Duis ",
React.createElement("b", null, "quis"),
" sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris ",
React.createElement("b", null, "Praesent"),
" massa. Vestibulum",
' ',
React.createElement("i", null, "sagittis"),
" lacinia arcu eget nulla. ",
React.createElement("i", null, "at"),
" Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ",
React.createElement("i", null, "massa."),
" sodales ligula in ",
React.createElement("i", null, "lacinia"),
" libero. Sed dignissim lacinia nunc. ",
React.createElement("i", null, "litora"),
" Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas",
' ',
React.createElement("b", null, "Aenean"),
" mattis. ",
React.createElement("b", null, "Aenean"),
" Sed convallis tristique sem. ",
React.createElement("i", null, "Curabitur"),
" Proin ut ligula vel nunc egestas ",
React.createElement("i", null, "dolor."),
" porttitor. Morbi lectus risus, ",
React.createElement("i", null, "sem"),
" iaculis vel, suscipit quis, luctus non, massa. Fusce ac ",
React.createElement("i", null, "dolor."),
" turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in,",
' ',
React.createElement("b", null, "aliquet."),
" nibh. ",
React.createElement("b", null, "ipsum."),
" Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent ",
React.createElement("i", null, "ipsum."),
" per conubia nostra, per ",
React.createElement("i", null, "in,"),
' ',
"inceptos himenaeos. Nam nec ",
React.createElement("b", null, "litora"),
" ante. Sed lacinia, ",
React.createElement("b", null, "litora"),
" urna",
' ',
React.createElement("i", null, "nibh."),
" non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse ",
React.createElement("b", null, "ipsum"),
" potenti. Nunc feugiat mi a tellus ",
React.createElement("b", null, "turpis."),
" consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.",
' ',
React.createElement("b", null, "consequat"),
" Suspendisse in justo eu ",
React.createElement("b", null, "sapien."),
" magna luctus ",
React.createElement("i", null, "turpis."),
' ',
"suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa ",
React.createElement("b", null, "lacus"),
" mattis sem, at interdum magna augue eget diam. Vestibulum ",
React.createElement("i", null, "lectus."),
" ante ",
React.createElement("b", null, "at"),
" ipsum ",
React.createElement("i", null, "Quisque"),
" primis ",
React.createElement("b", null, "augue"),
" in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ",
React.createElement("i", null, "at"),
" lacinia",
' ',
React.createElement("i", null, "eget"),
" molestie dui. Praesent blandit dolor. Sed non quam. In vel ",
React.createElement("b", null, "lacinia"),
" mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus ",
React.createElement("b", null, "augue"),
" nunc, ",
React.createElement("b", null, "sit"),
" viverra nec."),
React.createElement("p", null,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante ",
React.createElement("b", null, "Integer"),
" dapibus diam. Sed nisi. Nulla quis sem at",
' ',
React.createElement("i", null, "Lorem"),
" nibh elementum imperdiet. Duis ",
React.createElement("b", null, "quis"),
" sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris ",
React.createElement("b", null, "Praesent"),
" massa. Vestibulum",
' ',
React.createElement("i", null, "sagittis"),
" lacinia arcu eget nulla. ",
React.createElement("i", null, "at"),
" Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ",
React.createElement("i", null, "massa."),
" sodales ligula in ",
React.createElement("i", null, "lacinia"),
" libero. Sed dignissim lacinia nunc. ",
React.createElement("i", null, "litora"),
" Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas",
' ',
React.createElement("b", null, "Aenean"),
" mattis. ",
React.createElement("b", null, "Aenean"),
" Sed convallis tristique sem. ",
React.createElement("i", null, "Curabitur"),
" Proin ut ligula vel nunc egestas ",
React.createElement("i", null, "dolor."),
" porttitor. Morbi lectus risus, ",
React.createElement("i", null, "sem"),
" iaculis vel, suscipit quis, luctus non, massa. Fusce ac ",
React.createElement("i", null, "dolor."),
" turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in,",
' ',
React.createElement("b", null, "aliquet."),
" nibh. ",
React.createElement("b", null, "ipsum."),
" Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent ",
React.createElement("i", null, "ipsum."),
" per conubia nostra, per ",
React.createElement("i", null, "in,"),
' ',
"inceptos himenaeos. Nam nec ",
React.createElement("b", null, "litora"),
" ante. Sed lacinia, ",
React.createElement("b", null, "litora"),
" urna",
' ',
React.createElement("i", null, "nibh."),
" non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse ",
React.createElement("b", null, "ipsum"),
" potenti. Nunc feugiat mi a tellus ",
React.createElement("b", null, "turpis."),
" consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.",
' ',
React.createElement("b", null, "consequat"),
" Suspendisse in justo eu ",
React.createElement("b", null, "sapien."),
" magna luctus ",
React.createElement("i", null, "turpis."),
' ',
"suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa ",
React.createElement("b", null, "lacus"),
" mattis sem, at interdum magna augue eget diam. Vestibulum ",
React.createElement("i", null, "lectus."),
" ante ",
React.createElement("b", null, "at"),
" ipsum ",
React.createElement("i", null, "Quisque"),
" primis ",
React.createElement("b", null, "augue"),
" in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ",
React.createElement("i", null, "at"),
" lacinia",
' ',
React.createElement("i", null, "eget"),
" molestie dui. Praesent blandit dolor. Sed non quam. In vel ",
React.createElement("b", null, "lacinia"),
" mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus ",
React.createElement("b", null, "augue"),
" nunc, ",
React.createElement("b", null, "sit"),
" viverra nec."),
React.createElement("p", null,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante ",
React.createElement("b", null, "Integer"),
" dapibus diam. Sed nisi. Nulla quis sem at",
' ',
React.createElement("i", null, "Lorem"),
" nibh elementum imperdiet. Duis ",
React.createElement("b", null, "quis"),
" sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris ",
React.createElement("b", null, "Praesent"),
" massa. Vestibulum",
' ',
React.createElement("i", null, "sagittis"),
" lacinia arcu eget nulla. ",
React.createElement("i", null, "at"),
" Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ",
React.createElement("i", null, "massa."),
" sodales ligula in ",
React.createElement("i", null, "lacinia"),
" libero. Sed dignissim lacinia nunc. ",
React.createElement("i", null, "litora"),
" Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas",
' ',
React.createElement("b", null, "Aenean"),
" mattis. ",
React.createElement("b", null, "Aenean"),
" Sed convallis tristique sem. ",
React.createElement("i", null, "Curabitur"),
" Proin ut ligula vel nunc egestas ",
React.createElement("i", null, "dolor."),
" porttitor. Morbi lectus risus, ",
React.createElement("i", null, "sem"),
" iaculis vel, suscipit quis, luctus non, massa. Fusce ac ",
React.createElement("i", null, "dolor."),
" turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in,",
' ',
React.createElement("b", null, "aliquet."),
" nibh. ",
React.createElement("b", null, "ipsum."),
" Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent ",
React.createElement("i", null, "ipsum."),
" per conubia nostra, per ",
React.createElement("i", null, "in,"),
' ',
"inceptos himenaeos. Nam nec ",
React.createElement("b", null, "litora"),
" ante. Sed lacinia, ",
React.createElement("b", null, "litora"),
" urna",
' ',
React.createElement("i", null, "nibh."),
" non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse ",
React.createElement("b", null, "ipsum"),
" potenti. Nunc feugiat mi a tellus ",
React.createElement("b", null, "turpis."),
" consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.",
' ',
React.createElement("b", null, "consequat"),
" Suspendisse in justo eu ",
React.createElement("b", null, "sapien."),
" magna luctus ",
React.createElement("i", null, "turpis."),
' ',
"suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa ",
React.createElement("b", null, "lacus"),
" mattis sem, at interdum magna augue eget diam. Vestibulum ",
React.createElement("i", null, "lectus."),
" ante ",
React.createElement("b", null, "at"),
" ipsum ",
React.createElement("i", null, "Quisque"),
" primis ",
React.createElement("b", null, "augue"),
" in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ",
React.createElement("i", null, "at"),
" lacinia",
' ',
React.createElement("i", null, "eget"),
" molestie dui. Praesent blandit dolor. Sed non quam. In vel ",
React.createElement("b", null, "lacinia"),
" mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus ",
React.createElement("b", null, "augue"),
" nunc, ",
React.createElement("b", null, "sit"),
" viverra nec."))));
};
exports.LongBodyText = LongBodyText;
var Fullscreen = function () {
var _a = React.useState(false), isOpen = _a[0], setIsOpen = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement(Button_1.Button, { label: "Test Modal", onClick: function () { return setIsOpen(true); } }),
React.createElement(Modal_1.default, { heading: "Full bleed", show: isOpen, showClose: true, allowOverlayClose: false, closeFn: function () { return setIsOpen(false); }, fullscreen: true },
React.createElement("p", null,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante ",
React.createElement("b", null, "Integer"),
" dapibus diam. Sed nisi. Nulla quis sem at",
' ',
React.createElement("i", null, "Lorem"),
" nibh elementum imperdiet. Duis ",
React.createElement("b", null, "quis"),
" sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris ",
React.createElement("b", null, "Praesent"),
" massa. Vestibulum",
' ',
React.createElement("i", null, "sagittis"),
" lacinia arcu eget nulla. ",
React.createElement("i", null, "at"),
" Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ",
React.createElement("i", null, "massa."),
" sodales ligula in ",
React.createElement("i", null, "lacinia"),
" libero. Sed dignissim lacinia nunc. ",
React.createElement("i", null, "litora"),
" Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas",
' ',
React.createElement("b", null, "Aenean"),
" mattis. ",
React.createElement("b", null, "Aenean"),
" Sed convallis tristique sem. ",
React.createElement("i", null, "Curabitur"),
" Proin ut ligula vel nunc egestas ",
React.createElement("i", null, "dolor."),
" porttitor. Morbi lectus risus, ",
React.createElement("i", null, "sem"),
" iaculis vel, suscipit quis, luctus non, massa. Fusce ac ",
React.createElement("i", null, "dolor."),
" turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in,",
' ',
React.createElement("b", null, "aliquet."),
" nibh. ",
React.createElement("b", null, "ipsum."),
" Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent ",
React.createElement("i", null, "ipsum."),
" per conubia nostra, per ",
React.createElement("i", null, "in,"),
' ',
"inceptos himenaeos. Nam nec ",
React.createElement("b", null, "litora"),
" ante. Sed lacinia, ",
React.createElement("b", null, "litora"),
" urna",
' ',
React.createElement("i", null, "nibh."),
" non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse ",
React.createElement("b", null, "ipsum"),
" potenti. Nunc feugiat mi a tellus ",
React.createElement("b", null, "turpis."),
" consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.",
' ',
React.createElement("b", null, "consequat"),
" Suspendisse in justo eu ",
React.createElement("b", null, "sapien."),
" magna luctus ",
React.createElement("i", null, "turpis."),
' ',
"suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa ",
React.createElement("b", null, "lacus"),
" mattis sem, at interdum magna augue eget diam. Vestibulum ",
React.createElement("i", null, "lectus."),
" ante ",
React.createElement("b", null, "at"),
" ipsum ",
React.createElement("i", null, "Quisque"),
" primis ",
React.createElement("b", null, "augue"),
" in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ",
React.createElement("i", null, "at"),
" lacinia",
' ',
React.createElement("i", null, "eget"),
" molestie dui. Praesent blandit dolor. Sed non quam. In vel ",
React.createElement("b", null, "lacinia"),
" mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus ",
React.createElement("b", null, "augue"),
" nunc, ",
React.createElement("b", null, "sit"),
" viverra nec."),
React.createElement("p", null,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante ",
React.createElement("b", null, "Integer"),
" dapibus diam. Sed nisi. Nulla quis sem at",
' ',
React.createElement("i", null, "Lorem"),
" nibh elementum imperdiet. Duis ",
React.createElement("b", null, "quis"),
" sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris ",
React.createElement("b", null, "Praesent"),
" massa. Vestibulum",
' ',
React.createElement("i", null, "sagittis"),
" lacinia arcu eget nulla. ",
React.createElement("i", null, "at"),
" Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ",
React.createElement("i", null, "massa."),
" sodales ligula in ",
React.createElement("i", null, "lacinia"),
" libero. Sed dignissim lacinia nunc. ",
React.createElement("i", null, "litora"),
" Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas",
' ',
React.createElement("b", null, "Aenean"),
" mattis. ",
React.createElement("b", null, "Aenean"),
" Sed convallis tristique sem. ",
React.createElement("i", null, "Curabitur"),
" Proin ut ligula vel nunc egestas ",
React.createElement("i", null, "dolor."),
" porttitor. Morbi lectus risus, ",
React.createElement("i", null, "sem"),
" iaculis vel, suscipit quis, luctus non, massa. Fusce ac ",
React.createElement("i", null, "dolor."),
" turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in,",
' ',
React.createElement("b", null, "aliquet."),
" nibh. ",
React.createElement("b", null, "ipsum."),
" Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent ",
React.createElement("i", null, "ipsum."),
" per conubia nostra, per ",
React.createElement("i", null, "in,"),
' ',
"inceptos himenaeos. Nam nec ",
React.createElement("b", null, "litora"),
" ante. Sed lacinia, ",
React.createElement("b", null, "litora"),
" urna",
' ',
React.createElement("i", null, "nibh."),
" non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse ",
React.createElement("b", null, "ipsum"),
" potenti. Nunc feugiat mi a tellus ",
React.createElement("b", null, "turpis."),
" consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.",
' ',
React.createElement("b", null, "consequat"),
" Suspendisse in justo eu ",
React.createElement("b", null, "sapien."),
" magna luctus ",
React.createElement("i", null, "turpis."),
' ',
"suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa ",
React.createElement("b", null, "lacus"),
" mattis sem, at interdum magna augue eget diam. Vestibulum ",
React.createElement("i", null, "lectus."),
" ante ",
React.createElement("b", null, "at"),
" ipsum ",
React.createElement("i", null, "Quisque"),
" primis ",
React.createElement("b", null, "augue"),
" in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ",
React.createElement("i", null, "at"),
" lacinia",
' ',
React.createElement("i", null, "eget"),
" molestie dui. Praesent blandit dolor. Sed non quam. In vel ",
React.createElement("b", null, "lacinia"),
" mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus ",
React.createElement("b", null, "augue"),
" nunc, ",
React.createElement("b", null, "sit"),
" viverra nec."),
React.createElement("p", null,
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante ",
React.createElement("b", null, "Integer"),
" dapibus diam. Sed nisi. Nulla quis sem at",
' ',
React.createElement("i", null, "Lorem"),
" nibh elementum imperdiet. Duis ",
React.createElement("b", null, "quis"),
" sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris ",
React.createElement("b", null, "Praesent"),
" massa. Vestibulum",
' ',
React.createElement("i", null, "sagittis"),
" lacinia arcu eget nulla. ",
React.createElement("i", null, "at"),
" Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ",
React.createElement("i", null, "massa."),
" sodales ligula in ",
React.createElement("i", null, "lacinia"),
" libero. Sed dignissim lacinia nunc. ",
React.createElement("i", null, "litora"),
" Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas",
' ',
React.createElement("b", null, "Aenean"),
" mattis. ",
React.createElement("b", null, "Aenean"),
" Sed convallis tristique sem. ",
React.createElement("i", null, "Curabitur"),
" Proin ut ligula vel nunc egestas ",
React.createElement("i", null, "dolor."),
" porttitor. Morbi lectus risus, ",
React.createElement("i", null, "sem"),
" iaculis vel, suscipit quis, luctus non, massa. Fusce ac ",
React.createElement("i", null, "dolor."),
" turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in,",
' ',
React.createElement("b", null, "aliquet."),
" nibh. ",
React.createElement("b", null, "ipsum."),
" Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent ",
React.createElement("i", null, "ipsum."),
" per conubia nostra, per ",
React.createElement("i", null, "in,"),
' ',
"inceptos himenaeos. Nam nec ",
React.createElement("b", null, "litora"),
" ante. Sed lacinia, ",
React.createElement("b", null, "litora"),
" urna",
' ',
React.createElement("i", null, "nibh."),
" non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse ",
React.createElement("b", null, "ipsum"),
" potenti. Nunc feugiat mi a tellus ",
React.createElement("b", null, "turpis."),
" consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices.",
' ',
React.createElement("b", null, "consequat"),
" Suspendisse in justo eu ",
React.createElement("b", null, "sapien."),
" magna luctus ",
React.createElement("i", null, "turpis."),
' ',
"suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa ",
React.createElement("b", null, "lacus"),
" mattis sem, at interdum magna augue eget diam. Vestibulum ",
React.createElement("i", null, "lectus."),
" ante ",
React.createElement("b", null, "at"),
" ipsum ",
React.createElement("i", null, "Quisque"),
" primis ",
React.createElement("b", null, "augue"),
" in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi ",
React.createElement("i", null, "at"),
" lacinia",
' ',
React.createElement("i", null, "eget"),
" molestie dui. Praesent blandit dolor. Sed non quam. In vel ",
React.createElement("b", null, "lacinia"),
" mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus ",
React.createElement("b", null, "augue"),
" nunc, ",
React.createElement("b", null, "sit"),
" viverra nec."))));
};
exports.Fullscreen = Fullscreen;
var WithDescriptors = function () {
var _a = React.useState(false), sending = _a[0], setSending = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement(Button_1.Button, { label: "Test Modal", onClick: function () { return setSending(true); } }),
React.createElement(Modal_1.default, { heading: "Sending", show: sending, showClose: true, allowOverlayClose: true, closeFn: function () { return setSending(false); }, style: { width: '80vw' } },
React.createElement("div", null,
React.createElement("div", { className: "u-border u-padSidesLg u-padEndsMd u-spaceBottomMd u-borderRadiusMd" },
React.createElement("h3", null, "Organization Admin"),
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. ")),
React.createElement("div", { className: "u-border u-padSidesLg u-padEndsMd u-borderRadiusMd" },
React.createElement("h3", null, "Program Admin"),
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. "))))));
};
exports.WithDescriptors = WithDescriptors;
var WithCloseButton = function () {
var _a = React.useState(false), sending = _a[0], setSending = _a[1];
return (React.createElement(React.Fragment, null,
React.createElement(Button_1.Button, { label: "Test Modal", onClick: function () { return setSending(true); } }),
React.createElement(Modal_1.default, { heading: React.createElement("div", { className: "u-textCenter" }, "Sending"), show: sending, closeFn: function () { return setSending(false); } },
React.createElement(Loader_1.Loader, { type: "spin", text: "Sending", message: "Some really long message here" }),
React.createElement("div", { className: "Modal-footer u-textCenter" },
React.createElement(Button_1.Button, { label: "Close", color: "negative", onClick: function () { return setSending(false); }, icon: "dismiss" })))));
};
exports.WithCloseButton = WithCloseButton;