@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/stories/ModalDialog.stories.js

@@ -0,0 +1,862 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React, { useState } from 'react';
+import { Button, ModalDialog, InputLabel, Note, Quote, TextField, Size, HyperLink, ComponentXS, ComponentTextStyle, COLORS } from '../src/index';
+import Image from './assets/PlaceholderModalImage.png';
+import { SystemIcons } from '../src/icons';
+import styled from 'styled-components';
+export default {
+    title: 'Components/Modal/Dialog',
+    component: ModalDialog,
+    decorators: [],
+    parameter: {},
+};
+export var ModalDemo = function () {
+    var _a = useState(''), modalType = _a[0], setModalType = _a[1];
+    var onClose = function () {
+        setModalType('');
+    };
+    //define all modal types
+    var modals = [
+        { type: 'smallModalWithoutImage', title: 'Small modal' },
+        { type: 'mediumModalWithoutImage', title: 'Medium modal' },
+        { type: 'largeModalWithoutImage', title: 'Large modal' },
+        { type: 'smallModalWithButtonsWithoutImage', title: 'Small modal with back button' },
+        { type: 'mediumModalWithButtonsWithoutImage', title: 'Medium modal with back button' },
+        { type: 'mediumModalWithAllButtonWithoutImage', title: 'Medium modal with all buttons' },
+        { type: 'largeModalWithButtonsWithoutImage', title: 'Large  modal with back button' },
+        { type: 'smallModalWithImage', title: 'Small modal with image' },
+        { type: 'mediumModalWithImage', title: 'Medium modal with image' },
+        { type: 'largeModalWithImage', title: 'Large modal with image' },
+        { type: 'smallModalWithImageAndBackButton', title: 'Small modal with image and back button' },
+        { type: 'mediumModalWithImageAndBackButton', title: 'Medium modal with image and back button' },
+        { type: 'largeModalWithImageAndBackButton', title: 'Large modal with image and back button' },
+        { type: 'smallModalWithImageAndBody', title: 'Small modal with image and body' },
+        { type: 'smallModalWithBodyNote', title: 'Small modal with body note' },
+        { type: 'mediumModalWithImageAndBody', title: 'Medium modal with image and body' },
+        { type: 'mediumModalWithBodyNote', title: 'Medium modal with body note' },
+        { type: 'largeModalWithImageAndBody', title: 'Large modal with image and body' },
+        { type: 'largeModalWithBodyNote', title: 'Large modal with body note' },
+        { type: 'smallModalWithPositiveNote', title: 'Small Modal with positive note' },
+        { type: 'smallModalWithCriticalNote', title: 'Small Modal with critical note' },
+        { type: 'smallModalWithWarningNote', title: 'Small Modal with warning note' },
+        { type: 'smallModalWithDefaultNote', title: 'Small Modal with default note' },
+        { type: 'mediumModalWithPositiveNote', title: 'Medium Modal with positive note' },
+        { type: 'mediumModalWithCriticalNote', title: 'Medium Modal with critical note' },
+        { type: 'mediumModalWithWarningNote', title: 'Medium Modal with warning note' },
+        { type: 'mediumModalWithDefaultNote', title: 'Medium Modal with default note' },
+        { type: 'largeModalWithPositiveNote', title: 'Large Modal with positive note' },
+        { type: 'largeModalWithCriticalNote', title: 'Large Modal with critical note' },
+        { type: 'largeModalWithWarningNote', title: 'Large Modal with warning note' },
+        { type: 'largeModalWithDefaultNote', title: 'Large Modal with default note' },
+        { type: 'smallModalWithLeftButton', title: 'Small modal with left footer button' },
+        { type: 'smallModalWithLeftHyperlink', title: 'Small modal with footer hyperlink' },
+        { type: 'smallModalWithLeftNote', title: 'Small modal with left footer note' },
+        { type: 'smallModalWithLongContent', title: 'Small modal with long content' },
+        { type: 'smallModalWithLongContentAndImage', title: 'Small modal with long content and image' },
+        { type: 'mediumModalWithLongContent', title: 'Medium modal with long content' },
+        { type: 'mediumModalWithLongContentAndImage', title: 'Medium modal with long content and image' },
+        { type: 'largeModalWithLongContent', title: 'Large modal with long content' },
+        { type: 'largeModalWithLongContentAndImage', title: 'Large modal with long content and image' },
+        { type: 'largeModalWithLongContentAndImageWithFallbacks', title: 'Large modal with long content and image with fallbacks' },
+        { type: 'largeModalWithImageWithFallbacksAndGrayscale', title: 'Large modal with image with fallbacks and grayscale' },
+    ];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ButtonWrapper, null, modals.map(function (modal) { return (React.createElement(Button, { key: modal.type, onClick: function () {
+                setModalType(modal.type);
+            } }, modal.title)); })),
+        SmallModalWithoutImage(modalType === 'smallModalWithoutImage', onClose),
+        MediumModalWithoutImage(modalType === 'mediumModalWithoutImage', onClose),
+        LargeModalWithoutImage(modalType === 'largeModalWithoutImage', onClose),
+        SmallModalWithButtonsWithoutImage(modalType === 'smallModalWithButtonsWithoutImage', onClose),
+        MediumModalWithButtonsWithoutImage(modalType === 'mediumModalWithButtonsWithoutImage', onClose),
+        MediumModalWithAllButtonWithoutImage(modalType === 'mediumModalWithAllButtonWithoutImage', onClose),
+        LargeModalWithButtonsWithoutImage(modalType === 'largeModalWithButtonsWithoutImage', onClose),
+        SmallModalWithImage(modalType === 'smallModalWithImage', onClose),
+        MediumModalWithImage(modalType === 'mediumModalWithImage', onClose),
+        LargeModalWithImage(modalType === 'largeModalWithImage', onClose),
+        SmallModalWithImageAndBackButton(modalType === 'smallModalWithImageAndBackButton', onClose),
+        MediumModalWithImageAndBackButton(modalType === 'mediumModalWithImageAndBackButton', onClose),
+        LargeModalWithImageAndBackButton(modalType === 'largeModalWithImageAndBackButton', onClose),
+        SmallModalWithImageAndBody(modalType === 'smallModalWithImageAndBody', onClose),
+        SmallModalWithBodyNote(modalType === 'smallModalWithBodyNote', onClose),
+        MediumModalWithImageAndBody(modalType === 'mediumModalWithImageAndBody', onClose),
+        MediumModalWithBodyNote(modalType === 'mediumModalWithBodyNote', onClose),
+        LargeModalWithImageAndBody(modalType === 'largeModalWithImageAndBody', onClose),
+        LargeModalWithBodyNote(modalType === 'largeModalWithBodyNote', onClose),
+        SmallModalWithPositiveNote(modalType === 'smallModalWithPositiveNote', onClose),
+        SmallModalWithWarningNote(modalType === 'smallModalWithWarningNote', onClose),
+        SmallModalWithCriticalNote(modalType === 'smallModalWithCriticalNote', onClose),
+        SmallModalWithDefaultNote(modalType === 'smallModalWithDefaultNote', onClose),
+        MediumModalWithPositiveNote(modalType === 'mediumModalWithPositiveNote', onClose),
+        MediumModalWithWarningNote(modalType === 'mediumModalWithWarningNote', onClose),
+        MediumModalWithCriticalNote(modalType === 'mediumModalWithCriticalNote', onClose),
+        MediumModalWithDefaultNote(modalType === 'mediumModalWithDefaultNote', onClose),
+        LargeModalWithPositiveNote(modalType === 'largeModalWithPositiveNote', onClose),
+        LargeModalWithWarningNote(modalType === 'largeModalWithWarningNote', onClose),
+        LargeModalWithCriticalNote(modalType === 'largeModalWithCriticalNote', onClose),
+        LargeModalWithDefaultNote(modalType === 'largeModalWithDefaultNote', onClose),
+        SmallModalWithLeftButton(modalType === 'smallModalWithLeftButton', onClose),
+        SmallModalWithLeftHyperlink(modalType === 'smallModalWithLeftHyperlink', onClose),
+        SmallModalWithLeftNote(modalType === 'smallModalWithLeftNote', onClose),
+        SmallModalWithLongContent(modalType === 'smallModalWithLongContent', onClose),
+        SmallModalWithLongContentAndImage(modalType === 'smallModalWithLongContentAndImage', onClose),
+        MediumModalWithLongContent(modalType === 'mediumModalWithLongContent', onClose),
+        MediumModalWithLongContentAndImage(modalType === 'mediumModalWithLongContentAndImage', onClose),
+        LargeModalWithLongContent(modalType === 'largeModalWithLongContent', onClose),
+        LargeModalWithLongContentAndImage(modalType === 'largeModalWithLongContentAndImage', onClose),
+        LargeModalWithLongContentAndImageWithFallbacks(modalType === 'largeModalWithLongContentAndImageWithFallbacks', onClose),
+        LargeModalWithImageWithFallbacksAndGrayscale(modalType === 'largeModalWithImageWithFallbacksAndGrayscale', onClose)));
+};
+var ButtonWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 30%;\n\n  button {\n    margin-top: 10px;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 30%;\n\n  button {\n    margin-top: 10px;\n  }\n"])));
+var ModalBody1 = function (type) {
+    var textForm = 'This is a form';
+    return (React.createElement("div", null,
+        type === 'small' && (React.createElement(Note, null,
+            React.createElement("p", null, textForm))),
+        type === 'medium' && (React.createElement("p", null, textForm)),
+        type === 'large' && (React.createElement(Quote, null,
+            React.createElement("p", null, textForm))),
+        React.createElement(InputLabel, { inputId: "DemoTextField", text: "Default" }),
+        React.createElement(TextField, { size: type === 'small' ? Size.Small : Size.Medium, id: "DemoTextField", placeholder: "Enter text here" })));
+};
+export var SmallModalWithoutImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithoutImage", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var MediumModalWithoutImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithoutImage", title: 'Header', size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var LargeModalWithoutImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithoutImage", title: 'Header', size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var SmallModalWithButtonsWithoutImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithButtonsWithoutImage", title: 'Header', backButton: onClose, size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var MediumModalWithButtonsWithoutImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithButtonsWithoutImage", title: 'Header', backButton: onClose, size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var MediumModalWithAllButtonWithoutImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithButtonsWithoutImage", title: 'Header', backButton: onClose, size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, tooltip: 'Medium modal tooltip', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Back',
+                variant: 'secondary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], leftFooterAction: { actionType: 'button', text: 'Label', variant: 'secondary', icon: React.createElement(SystemIcons.Add, null), action: function () { } } }))); };
+export var LargeModalWithButtonsWithoutImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithButtonsWithoutImage", title: 'Header', backButton: onClose, size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var SmallModalWithImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithImage", title: 'Header', size: Size.Small, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var MediumModalWithImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithImage", title: 'Header', size: Size.Medium, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var LargeModalWithImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithImage", title: 'Header', size: Size.Large, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var SmallModalWithImageAndTooltip = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithImageAndTooltip", title: 'Small modal window with image and tooltip! Long long long header!', size: Size.Small, tooltip: "Stop hovering me!!!", topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var MediumModalWithImageAndTooltip = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithImageAndTooltip", title: 'Medium modal window with image and tooltip! Long long long header!', size: Size.Medium, tooltip: "Stop hovering me!!!", topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var LargeModalWithImageAndTooltip = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithImage", title: 'Large modal window with image and tooltip! Long long long header!', size: Size.Large, tooltip: "Stop hovering me!!!", topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var SmallModalWithImageAndBackButton = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithImageAndBackButton", title: 'Header', backButton: onClose, size: Size.Small, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var MediumModalWithImageAndBackButton = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithImageAndBackButton", title: 'Header', backButton: onClose, size: Size.Medium, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var LargeModalWithImageAndBackButton = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithImageAndBackButton", title: 'Header', backButton: onClose, size: Size.Large, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ] }))); };
+export var SmallModalWithImageAndBody = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithImageAndBody", title: 'Header', size: Size.Small, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function (ev) {
+            //mock on submit functionality
+            ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+            onClose();
+        }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                text: 'Save',
+            },
+        ] }, ModalBody1('small')))); };
+export var SmallModalWithBodyNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "SmallModalWithBodyNote", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function (ev) {
+            //mock on submit functionality
+            ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+            onClose();
+        }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                text: 'Save',
+            },
+        ], note: 'Message text' }, ModalBody1('small')))); };
+export var MediumModalWithImageAndBody = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithImageAndBody", title: 'Header', size: Size.Medium, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function (ev) {
+            //mock on submit functionality
+            ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+            onClose();
+        }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function (e) {
+                    e.preventDefault();
+                },
+                text: 'Save',
+            },
+        ] }, ModalBody1('medium')))); };
+export var MediumModalWithBodyNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithBodyNote", title: 'Header', size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function (ev) {
+            //mock on submit functionality
+            ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+            onClose();
+        }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function (e) {
+                    e.preventDefault();
+                },
+                text: 'Save',
+            },
+        ], note: 'Message text' }, ModalBody1('medium')))); };
+export var LargeModalWithImageAndBody = function (isOpen, onClose) {
+    var _a = useState(false), loading = _a[0], setLoading = _a[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ModalDialog, { key: "largeModalWithImageAndBody", title: 'Header', size: Size.Large, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function (ev) {
+                //mock on submit functionality
+                ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+                onClose();
+            }, buttons: [
+                {
+                    action: function () {
+                        setLoading(!loading);
+                    },
+                    text: 'Close',
+                    variant: 'tertiary',
+                    id: 'close',
+                },
+                {
+                    action: function () {
+                        onClose();
+                    },
+                    text: 'Save',
+                    id: 'save',
+                    loading: loading,
+                },
+            ] }, ModalBody1('large'))));
+};
+export var LargeModalWithBodyNote = function (isOpen, onClose) {
+    var _a = useState(false), loading = _a[0], setLoading = _a[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ModalDialog, { key: "largeModalWithBodyNote", title: 'Header', size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function (ev) {
+                //mock on submit functionality
+                ev === null || ev === void 0 ? void 0 : ev.preventDefault();
+                onClose();
+            }, buttons: [
+                {
+                    action: function () {
+                        setLoading(!loading);
+                    },
+                    text: 'Close',
+                    variant: 'tertiary',
+                    id: 'close',
+                },
+                {
+                    action: function () {
+                        onClose();
+                    },
+                    text: 'Save',
+                    id: 'save',
+                    loading: loading,
+                },
+            ], note: 'Message text' }, ModalBody1('large'))));
+};
+//Small Modals with Note
+export var SmallModalWithPositiveNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithPositiveNote", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'positive' }))); };
+export var SmallModalWithWarningNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithWarningNote", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'warning' }))); };
+export var SmallModalWithCriticalNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithCriticalNote", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'critical' }))); };
+export var SmallModalWithDefaultNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithDefaultNote", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' }))); };
+//Medium modals with note
+export var MediumModalWithPositiveNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithPositiveNote", title: 'Header', size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'positive' }))); };
+export var MediumModalWithWarningNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithWarningNote", title: 'Header', size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'warning' }))); };
+export var MediumModalWithCriticalNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithCriticalNote", title: 'Header', size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'critical' }))); };
+export var MediumModalWithDefaultNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithDefaultNote", title: 'Header', size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: React.createElement("span", null,
+            "Hello world!",
+            ' ',
+            React.createElement(HyperLink, { variant: 'default', href: "/", target: '_self' }, "Link")) }))); };
+//Large modal with note
+export var LargeModalWithPositiveNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithPositiveNote", title: 'Header', size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'positive' }))); };
+export var LargeModalWithWarningNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithWarningNote", title: 'Header', size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'warning' }))); };
+export var LargeModalWithCriticalNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithCriticalNote", title: 'Header', size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text', state: 'critical' }))); };
+export var LargeModalWithDefaultNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithDefaultNote", title: 'Header', size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet dolor eget justo rhoncus vehicula. ' }))); };
+export var SmallModalWithLeftButton = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithLeftButton", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], leftFooterAction: { actionType: 'button', text: 'Action' } }))); };
+export var SmallModalWithLeftHyperlink = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithLeftHyperlink", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], leftFooterAction: {
+            actionType: 'hyperlink',
+            text: 'Link',
+            href: 'http://',
+            action: function () {
+                alert('Hey');
+            },
+            icon: React.createElement(SystemIcons.Add, null),
+            variant: 'default',
+        } }))); };
+export var SmallModalWithLeftNote = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithLeftNote", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], leftFooterAction: { actionType: 'note', text: 'Some note', icon: React.createElement(SystemIcons.TechnicalWarning, null) } }))); };
+var LongContent = function () { return (React.createElement(React.Fragment, null,
+    React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et egestas quis ipsum suspendisse ultrices gravida. Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Dignissim sodales ut eu sem integer vitae justo eget magna. Semper auctor neque vitae tempus quam pellentesque nec nam. Cursus vitae congue mauris rhoncus aenean vel. Non sodales neque sodales ut etiam. Eu nisl nunc mi ipsum faucibus vitae aliquet. Pellentesque nec nam aliquam sem et tortor. Metus aliquam eleifend mi in. Mauris cursus mattis molestie a iaculis at erat. Vivamus at augue eget arcu. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus. Pellentesque nec nam aliquam sem et tortor consequat. Auctor augue mauris augue neque. Viverra justo nec ultrices dui sapien eget. Nulla pellentesque dignissim enim sit amet venenatis urna. In egestas erat imperdiet sed euismod nisi porta lorem."),
+    React.createElement("p", null, "Eget nunc scelerisque viverra mauris in aliquam sem fringilla ut. Diam volutpat commodo sed egestas. Mi tempus imperdiet nulla malesuada pellentesque elit eget gravida. Nunc non blandit massa enim nec dui nunc mattis enim. Non consectetur a erat nam at lectus. Ut lectus arcu bibendum at varius vel pharetra vel turpis. Sit amet justo donec enim diam vulputate ut pharetra. At tellus at urna condimentum mattis pellentesque id. Curabitur gravida arcu ac tortor dignissim convallis. Cursus mattis molestie a iaculis at erat. Pretium fusce id velit ut tortor pretium viverra. Commodo ullamcorper a lacus vestibulum sed arcu. Egestas dui id ornare arcu odio. Id venenatis a condimentum vitae sapien. Commodo nulla facilisi nullam vehicula ipsum a arcu. Fusce id velit ut tortor pretium viverra."),
+    React.createElement("p", null, "Facilisis mauris sit amet massa vitae. Sollicitudin ac orci phasellus egestas tellus rutrum tellus. Urna condimentum mattis pellentesque id. Velit egestas dui id ornare arcu odio ut sem. Rutrum tellus pellentesque eu tincidunt tortor. Eget dolor morbi non arcu. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam. Faucibus turpis in eu mi bibendum neque egestas congue. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus. Morbi quis commodo odio aenean sed adipiscing. Vel risus commodo viverra maecenas accumsan lacus vel."),
+    React.createElement("p", null, "Sit amet justo donec enim diam vulputate ut pharetra. Enim neque volutpat ac tincidunt vitae semper quis lectus. Sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus. Magna etiam tempor orci eu lobortis. Mollis aliquam ut porttitor leo a diam sollicitudin tempor id. Adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus urna. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Habitant morbi tristique senectus et netus et malesuada fames ac. Odio euismod lacinia at quis risus sed. Facilisis leo vel fringilla est ullamcorper eget. Dignissim suspendisse in est ante in nibh mauris cursus mattis. Lectus arcu bibendum at varius vel pharetra. Tincidunt arcu non sodales neque sodales ut. Nec feugiat in fermentum posuere urna nec tincidunt. Convallis aenean et tortor at risus viverra."),
+    React.createElement("p", null, "Feugiat sed lectus vestibulum mattis ullamcorper velit sed ullamcorper. Faucibus a pellentesque sit amet. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus. Lorem ipsum dolor sit amet consectetur adipiscing. Senectus et netus et malesuada fames ac turpis. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque. Integer quis auctor elit sed vulputate. Posuere ac ut consequat semper. Fringilla ut morbi tincidunt augue interdum velit euismod in pellentesque. Volutpat odio facilisis mauris sit amet. Luctus venenatis lectus magna fringilla urna porttitor. Nec feugiat nisl pretium fusce id velit ut tortor pretium. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Volutpat est velit egestas dui id ornare. Tellus pellentesque eu tincidunt tortor aliquam nulla facilisi cras. Nullam vehicula ipsum a arcu cursus."))); };
+export var SmallModalWithLongContent = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithLongContent", title: 'Header', size: Size.Small, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', width: '330px', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+export var SmallModalWithLongContentAndImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithLongContentAndImage", title: 'Header', size: Size.Small, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+export var MediumModalWithLongContent = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithLongContent", title: 'Header', size: Size.Medium, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+export var MediumModalWithLongContentAndImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "mediumModalWithLongContentAndImage", title: 'Header', size: Size.Medium, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+export var LargeModalWithLongContent = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithLongContent", title: 'Header', size: Size.Large, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+export var LargeModalWithLongContentAndImage = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithLongContentAndImage", title: 'Header', size: Size.Large, topImage: Image, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+export var LargeModalWithLongContentAndImageWithFallbacks = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithLongContentAndImage", title: 'Header', size: Size.Large, topImageWithFallbacksProps: {
+            alt: 'Image with fallbacks demo',
+            fallbacks: 'https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782_1280.jpg|https://live.staticflickr.com/65535/51685738443_7f069f1416_k.jpg',
+            loader: true,
+            src: 'https://invalid.invalid/non_existent_url_2.jpg',
+        }, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+export var LargeModalWithImageWithFallbacksAndGrayscale = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "largeModalWithImageWithFallbacksAndGrayscale", title: 'Header', size: Size.Large, topImageWithFallbacksProps: {
+            alt: 'Image with fallbacks demo',
+            fallbacks: 'https://cdn.pixabay.com/photo/2015/11/16/14/43/cat-1045782_1280.jpg|https://live.staticflickr.com/65535/51685738443_7f069f1416_k.jpg',
+            loader: true,
+            src: 'https://invalid.invalid/non_existent_url.jpg',
+        }, topImageGrayscale: true, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' }))); };
+var ComplexTitle = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(ComponentXS, { textStyle: ComponentTextStyle.Bold, color: COLORS.neutral_500 }, "123-2432-4234"),
+        React.createElement("h4", null, "SimBaby Light")));
+};
+export var SmallModalWithLongContentAndImageAndSubtitle = function (isOpen, onClose) { return (React.createElement(React.Fragment, null,
+    React.createElement(ModalDialog, { key: "smallModalWithLongContentAndImageAndSubtitle", title: React.createElement(ComplexTitle, null), size: Size.Small, topImage: Image, hasContentBorders: true, isModalOpen: isOpen, closeAction: onClose, submitAction: function () { }, contentOverflow: 'auto', buttons: [
+            {
+                action: function () {
+                    onClose();
+                },
+                text: 'Close',
+                variant: 'tertiary',
+            },
+            {
+                action: function () { },
+                text: 'Save',
+            },
+        ], note: 'Message text' },
+        React.createElement(LongContent, null)))); };
+var templateObject_1;