@bloom-housing/ui-components 7.0.8-alpha.0 → 7.2.0

package/dist/src/notifications/StatusMessage.stories.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export declare const SeveralMessages: () => JSX.Element;
+export declare const NoMessages: () => JSX.Element;

package/dist/src/notifications/StatusMessage.stories.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoMessages = exports.SeveralMessages = void 0;
+var react_1 = __importDefault(require("react"));
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+var StatusMessage_1 = require("./StatusMessage");
+exports.default = {
+    title: "Notifications/Status Messages",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var SeveralMessages = function () { return (react_1.default.createElement(StatusMessage_1.StatusMessages, null,
+    react_1.default.createElement(StatusMessage_1.StatusMessage, { status: "Submitted", style: AppearanceTypes_1.AppearanceStyleType.success, timestamp: "3/2/21", body: "Additional details here." }),
+    react_1.default.createElement(StatusMessage_1.StatusMessage, { status: "Draft", timestamp: "2/1/21" }))); };
+exports.SeveralMessages = SeveralMessages;
+var NoMessages = function () { return react_1.default.createElement(StatusMessage_1.StatusMessages, { lastTimestamp: "August 25, 2021" }); };
+exports.NoMessages = NoMessages;
+//# sourceMappingURL=StatusMessage.stories.js.map

package/dist/src/notifications/StatusMessage.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessage.stories.js","sourceRoot":"","sources":["../../../src/notifications/StatusMessage.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,6DAA+D;AAC/D,iDAA+D;AAE/D,kBAAe;IACb,KAAK,EAAE,+BAA+B;IACtC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAEM,IAAM,eAAe,GAAG,cAAM,OAAA,CACnC,8BAAC,8BAAc;IACb,8BAAC,6BAAa,IACZ,MAAM,EAAC,WAAW,EAClB,KAAK,EAAE,qCAAmB,CAAC,OAAO,EAClC,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,0BAA0B,GAC/B;IACF,8BAAC,6BAAa,IAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,GAAG,CACpC,CAClB,EAVoC,CAUpC,CAAA;AAVY,QAAA,eAAe,mBAU3B;AAEM,IAAM,UAAU,GAAG,cAAM,OAAA,8BAAC,8BAAc,IAAC,aAAa,EAAC,iBAAiB,GAAkB,EAAjE,CAAiE,CAAA;AAApF,QAAA,UAAU,cAA0E"}

package/dist/src/notifications/alertTypes.d.ts

@@ -0,0 +1,7 @@
+export declare const colorClasses: {
+    alert: string;
+    notice: string;
+    success: string;
+    warn: string;
+};
+export declare type AlertTypes = keyof typeof colorClasses;

package/dist/src/notifications/alertTypes.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colorClasses = void 0;
+exports.colorClasses = {
+    alert: "alert",
+    notice: "primary",
+    success: "success",
+    warn: "warn",
+};
+//# sourceMappingURL=alertTypes.js.map

package/dist/src/notifications/alertTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alertTypes.js","sourceRoot":"","sources":["../../../src/notifications/alertTypes.ts"],"names":[],"mappings":";;;AAAa,QAAA,YAAY,GAAG;IAC1B,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;CACb,CAAA"}

package/dist/src/overlays/Drawer.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "./Drawer.scss";
+import { OverlayProps } from "./Overlay";
+import { AppearanceStyleType } from "../global/AppearanceTypes";
+import { AlertTypes } from "../notifications/alertTypes";
+export declare enum DrawerSide {
+    left = "left",
+    right = "right"
+}
+export interface DrawerProps extends OverlayProps {
+    title?: string;
+    headerTag?: string | React.ReactElement;
+    headerTagStyle?: AppearanceStyleType;
+    toastContent?: string;
+    toastStyle?: AlertTypes;
+    className?: string;
+    direction?: DrawerSide;
+    actions?: React.ReactNode[];
+}
+declare const Drawer: (props: DrawerProps) => JSX.Element;
+export { Drawer as default, Drawer };

package/dist/src/overlays/Drawer.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = exports.default = exports.DrawerSide = void 0;
+var react_1 = __importStar(require("react"));
+require("./Drawer.scss");
+var Icon_1 = require("../icons/Icon");
+var Overlay_1 = require("./Overlay");
+var Tag_1 = require("../text/Tag");
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+var AlertBox_1 = require("../notifications/AlertBox");
+var nanoid_1 = require("nanoid");
+var DrawerSide;
+(function (DrawerSide) {
+    DrawerSide["left"] = "left";
+    DrawerSide["right"] = "right";
+})(DrawerSide = exports.DrawerSide || (exports.DrawerSide = {}));
+var Drawer = function (props) {
+    var drawerClasses = ["drawer"];
+    if (props.className)
+        drawerClasses.push(props.className);
+    var uniqueIdRef = (0, react_1.useRef)((0, nanoid_1.nanoid)());
+    return (react_1.default.createElement(Overlay_1.Overlay, { ariaLabelledBy: uniqueIdRef.current, ariaDescription: props.ariaDescription, open: props.open, onClose: props.onClose, backdrop: props.backdrop, className: "has-drawer" + (props.direction == DrawerSide.left ? " is-direction-left" : ""), role: "dialog" },
+        react_1.default.createElement("div", { className: drawerClasses.join(" ") },
+            react_1.default.createElement("header", { className: "drawer__header" },
+                props.title && (react_1.default.createElement("h1", { className: "drawer__title", id: uniqueIdRef.current }, props.title)),
+                props.headerTag && (react_1.default.createElement(Tag_1.Tag, { pillStyle: true, size: AppearanceTypes_1.AppearanceSizeType.small, styleType: props.headerTagStyle, className: "ml-3" }, props.headerTag)),
+                props.toastContent && (react_1.default.createElement(AlertBox_1.AlertBox, { type: props.toastStyle, narrow: true, className: "ml-4", closeable: true }, props.toastContent)),
+                react_1.default.createElement("button", { onClick: props.onClose, className: "drawer__close", "aria-label": "Close", tabIndex: 0 },
+                    react_1.default.createElement(Icon_1.Icon, { size: "medium", symbol: "close" }))),
+            react_1.default.createElement("div", { className: "drawer__body" },
+                react_1.default.createElement("div", { className: "drawer__content" }, props.children)),
+            props.actions && react_1.default.createElement("div", { className: "p-4 flex gap-4" }, props.actions))));
+};
+exports.default = Drawer;
+exports.Drawer = Drawer;
+//# sourceMappingURL=Drawer.js.map

package/dist/src/overlays/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/overlays/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqC;AACrC,yBAAsB;AACtB,sCAAoC;AACpC,qCAAiD;AACjD,mCAAiC;AACjC,6DAAmF;AAEnF,sDAAoD;AACpD,iCAA+B;AAE/B,IAAY,UAGX;AAHD,WAAY,UAAU;IACpB,2BAAa,CAAA;IACb,6BAAe,CAAA;AACjB,CAAC,EAHW,UAAU,GAAV,kBAAU,KAAV,kBAAU,QAGrB;AAcD,IAAM,MAAM,GAAG,UAAC,KAAkB;IAChC,IAAM,aAAa,GAAG,CAAC,QAAQ,CAAC,CAAA;IAChC,IAAI,KAAK,CAAC,SAAS;QAAE,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;IAExD,IAAM,WAAW,GAAG,IAAA,cAAM,EAAC,IAAA,eAAM,GAAE,CAAC,CAAA;IAEpC,OAAO,CACL,8BAAC,iBAAO,IACN,cAAc,EAAE,WAAW,CAAC,OAAO,EACnC,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,SAAS,EAAE,YAAY,GAAG,CAAC,KAAK,CAAC,SAAS,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,CAAC,EAC1F,IAAI,EAAC,QAAQ;QAEb,uCAAK,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC;YACrC,0CAAQ,SAAS,EAAC,gBAAgB;gBAC/B,KAAK,CAAC,KAAK,IAAI,CACd,sCAAI,SAAS,EAAC,eAAe,EAAC,EAAE,EAAE,WAAW,CAAC,OAAO,IAClD,KAAK,CAAC,KAAK,CACT,CACN;gBACA,KAAK,CAAC,SAAS,IAAI,CAClB,8BAAC,SAAG,IACF,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,oCAAkB,CAAC,KAAK,EAC9B,SAAS,EAAE,KAAK,CAAC,cAAc,EAC/B,SAAS,EAAE,MAAM,IAEhB,KAAK,CAAC,SAAS,CACZ,CACP;gBACA,KAAK,CAAC,YAAY,IAAI,CACrB,8BAAC,mBAAQ,IAAC,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,IAC/E,KAAK,CAAC,YAAY,CACV,CACZ;gBACD,0CAAQ,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,SAAS,EAAC,eAAe,gBAAY,OAAO,EAAC,QAAQ,EAAE,CAAC;oBACtF,8BAAC,WAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,OAAO,GAAG,CAC9B,CACF;YAET,uCAAK,SAAS,EAAC,cAAc;gBAC3B,uCAAK,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,QAAQ,CAAO,CACnD;YAEL,KAAK,CAAC,OAAO,IAAI,uCAAK,SAAS,EAAC,gBAAgB,IAAE,KAAK,CAAC,OAAO,CAAO,CACnE,CACE,CACX,CAAA;AACH,CAAC,CAAA;AAEkB,yBAAO;AAAE,wBAAM"}

package/dist/src/overlays/Drawer.stories.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export declare const Standard: () => JSX.Element;
+export declare const StandardOnLeft: () => JSX.Element;
+export declare const DrawerFieldTest: () => JSX.Element;
+export declare const DrawerViewTest: () => JSX.Element;

package/dist/src/overlays/Drawer.stories.js

@@ -0,0 +1,97 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerViewTest = exports.DrawerFieldTest = exports.StandardOnLeft = exports.Standard = void 0;
+var react_1 = __importStar(require("react"));
+var react_hook_form_1 = require("react-hook-form");
+var Drawer_1 = require("./Drawer");
+var GridSection_1 = require("../sections/GridSection");
+var ViewItem_1 = require("../blocks/ViewItem");
+var Field_1 = require("../forms/Field");
+var Button_1 = require("../actions/Button");
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+exports.default = {
+    title: "Overlays/Drawer",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", null, storyFn()); }],
+};
+var Standard = function () {
+    var _a = (0, react_1.useState)(false), drawerState = _a[0], setDrawerState = _a[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Drawer_1.Drawer, { open: drawerState, title: "Drawer Title", onClose: function () { return setDrawerState(!drawerState); }, ariaDescription: "My Drawer", actions: [
+                react_1.default.createElement(Button_1.Button, { key: 0, onClick: function () { return setDrawerState(!drawerState); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary, size: AppearanceTypes_1.AppearanceSizeType.small }, "Submit"),
+                react_1.default.createElement(Button_1.Button, { key: 1, onClick: function () { return setDrawerState(!drawerState); }, border: AppearanceTypes_1.AppearanceBorderType.borderless, size: AppearanceTypes_1.AppearanceSizeType.small }, "Cancel"),
+            ] },
+            react_1.default.createElement("section", { className: "border rounded-md p-8 bg-white" },
+                react_1.default.createElement("p", null, "Test"))),
+        react_1.default.createElement(Button_1.Button, { onClick: function () {
+                setDrawerState(true);
+            } }, "Open Drawer"),
+        react_1.default.createElement("div", { style: { height: "1000px" } }),
+        react_1.default.createElement("div", null, "\u2026")));
+};
+exports.Standard = Standard;
+var StandardOnLeft = function () {
+    var _a = (0, react_1.useState)(false), drawerState = _a[0], setDrawerState = _a[1];
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Drawer_1.Drawer, { open: drawerState, title: "Drawer Title", onClose: function () { return setDrawerState(!drawerState); }, ariaDescription: "My Drawer", direction: Drawer_1.DrawerSide.left, actions: [
+                react_1.default.createElement(Button_1.Button, { key: 0, onClick: function () { return setDrawerState(!drawerState); }, styleType: AppearanceTypes_1.AppearanceStyleType.primary }, "Submit"),
+                react_1.default.createElement(Button_1.Button, { key: 1, onClick: function () { return setDrawerState(!drawerState); } }, "Cancel"),
+            ] },
+            react_1.default.createElement("section", { className: "border rounded-md p-8 bg-white" },
+                react_1.default.createElement("p", null, "Test"))),
+        react_1.default.createElement("div", { className: "text-right" },
+            react_1.default.createElement(Button_1.Button, { onClick: function () {
+                    setDrawerState(true);
+                } }, "Open Drawer"))));
+};
+exports.StandardOnLeft = StandardOnLeft;
+var DrawerFieldTest = function () {
+    var register = (0, react_hook_form_1.useForm)().register;
+    return (react_1.default.createElement(Drawer_1.Drawer, { open: true, title: "Drawer Title", ariaDescription: "My Drawer" },
+        react_1.default.createElement("section", { className: "border p-8 bg-white mb-8" },
+            react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", columns: 4 },
+                react_1.default.createElement(Field_1.Field, { label: "Alpha", placeholder: "Enter text", name: "label1", register: register }),
+                react_1.default.createElement(Field_1.Field, { label: "Beta", placeholder: "Enter text", name: "label2", register: register }),
+                react_1.default.createElement(Field_1.Field, { label: "Gamma", placeholder: "Enter text", name: "label3", register: register }),
+                react_1.default.createElement(Field_1.Field, { label: "Delta", placeholder: "Enter text", name: "label4", register: register }),
+                react_1.default.createElement(Field_1.Field, { label: "Epsilon", placeholder: "Enter text", name: "label5", register: register }),
+                react_1.default.createElement(Field_1.Field, { label: "Zeta", placeholder: "Enter text", name: "label6", register: register }),
+                react_1.default.createElement(Field_1.Field, { label: "Eta", placeholder: "Enter text", name: "label7", register: register }),
+                react_1.default.createElement(Field_1.Field, { label: "Theta", placeholder: "Enter text", name: "label8", register: register })))));
+};
+exports.DrawerFieldTest = DrawerFieldTest;
+var DrawerViewTest = function () { return (react_1.default.createElement(Drawer_1.Drawer, { open: true, title: "Drawer Title", ariaDescription: "My Drawer" },
+    react_1.default.createElement("section", { className: "border rounded-md p-8 bg-white mb-8" },
+        react_1.default.createElement(GridSection_1.GridSection, { title: "Section Title", tinted: true, inset: true, columns: 4 },
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "First Name", children: "Lisa" }),
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Middle Name", children: "S" }),
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Last Name", children: "Jones" }),
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Date of Birth", children: "01/01/1985" }),
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Email", children: "lisa@gmail.com" }),
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Phone", children: "111-222-3333", helper: "Cell" }),
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Second Phone", children: "111-222-3333", helper: "Work" }),
+            react_1.default.createElement(ViewItem_1.ViewItem, { label: "Perferred Contact", children: "Phone" }))))); };
+exports.DrawerViewTest = DrawerViewTest;
+//# sourceMappingURL=Drawer.stories.js.map

package/dist/src/overlays/Drawer.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.stories.js","sourceRoot":"","sources":["../../../src/overlays/Drawer.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/overlays/LoadingOverlay.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./LoadingOverlay.scss";
+declare type LoadingOverlayProps = {
+    isLoading: boolean;
+    children: React.ReactChild;
+};
+declare const LoadingOverlay: ({ isLoading, children }: LoadingOverlayProps) => JSX.Element;
+export { LoadingOverlay as default, LoadingOverlay };

package/dist/src/overlays/LoadingOverlay.js

@@ -0,0 +1,43 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingOverlay = exports.default = void 0;
+var react_1 = __importStar(require("react"));
+var Icon_1 = require("../icons/Icon");
+require("./LoadingOverlay.scss");
+var LoadingOverlay = function (_a) {
+    var isLoading = _a.isLoading, children = _a.children;
+    var content = (0, react_1.useMemo)(function () {
+        if (!isLoading)
+            return children;
+        return (react_1.default.createElement("div", { className: "loading-overlay", "data-test-id": "loading-overlay" },
+            react_1.default.createElement(Icon_1.Icon, { size: "3xl", symbol: "spinner", className: "loading-overlay__spinner" }),
+            children));
+    }, [isLoading, children]);
+    return (react_1.default.createElement("div", { role: "alert", "aria-live": "assertive" }, content));
+};
+exports.default = LoadingOverlay;
+exports.LoadingOverlay = LoadingOverlay;
+//# sourceMappingURL=LoadingOverlay.js.map

package/dist/src/overlays/LoadingOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.js","sourceRoot":"","sources":["../../../src/overlays/LoadingOverlay.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAsC;AACtC,sCAAoC;AACpC,iCAA8B;AAO9B,IAAM,cAAc,GAAG,UAAC,EAA4C;QAA1C,SAAS,eAAA,EAAE,QAAQ,cAAA;IAC3C,IAAM,OAAO,GAAG,IAAA,eAAO,EAAC;QACtB,IAAI,CAAC,SAAS;YAAE,OAAO,QAAQ,CAAA;QAE/B,OAAO,CACL,uCAAK,SAAS,EAAC,iBAAiB,kBAAc,iBAAiB;YAC7D,8BAAC,WAAI,IAAC,IAAI,EAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAC,SAAS,EAAC,0BAA0B,GAAG;YACxE,QAAQ,CACL,CACP,CAAA;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEzB,OAAO,CACL,uCAAK,IAAI,EAAC,OAAO,eAAW,WAAW,IACpC,OAAO,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAE0B,iCAAO;AAAE,wCAAc"}

package/dist/src/overlays/LoadingOverlay.stories.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export declare const Default: () => JSX.Element;

package/dist/src/overlays/LoadingOverlay.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var react_1 = __importDefault(require("react"));
+var LoadingOverlay_1 = require("./LoadingOverlay");
+exports.default = {
+    title: "Overlays/Loading Overlay",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var Default = function () { return (react_1.default.createElement(LoadingOverlay_1.LoadingOverlay, { isLoading: true },
+    react_1.default.createElement("div", { style: {
+            backgroundColor: "green",
+            color: "white",
+            padding: "10em 1em 20em",
+            textAlign: "center",
+        } }, "child content here"))); };
+exports.Default = Default;
+//# sourceMappingURL=LoadingOverlay.stories.js.map

package/dist/src/overlays/LoadingOverlay.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingOverlay.stories.js","sourceRoot":"","sources":["../../../src/overlays/LoadingOverlay.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,mDAAiD;AAEjD,kBAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,UAAU,EAAE,CAAC,UAAC,OAAY,IAAK,OAAA,uCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,IAAG,OAAO,EAAE,CAAO,EAAlD,CAAkD,CAAC;CACnF,CAAA;AAEM,IAAM,OAAO,GAAG,cAAM,OAAA,CAC3B,8BAAC,+BAAc,IAAC,SAAS,EAAE,IAAI;IAC7B,uCACE,KAAK,EAAE;YACL,eAAe,EAAE,OAAO;YACxB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,eAAe;YACxB,SAAS,EAAE,QAAQ;SACpB,yBAGG,CACS,CAClB,EAb4B,CAa5B,CAAA;AAbY,QAAA,OAAO,WAanB"}

package/dist/src/overlays/Modal.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import "./Modal.scss";
+import { OverlayProps } from "./Overlay";
+export interface ModalProps extends Omit<OverlayProps, "children"> {
+    actions?: React.ReactNode[];
+    children?: React.ReactNode;
+    closeClassNames?: string;
+    closeIconColor?: string;
+    hideCloseIcon?: boolean;
+    innerClassNames?: string;
+    modalClassNames?: string;
+    headerClassNames?: string;
+    role?: string;
+    scrollable?: boolean;
+    slim?: boolean;
+    title: string;
+}
+export declare const Modal: (props: ModalProps) => JSX.Element;

package/dist/src/overlays/Modal.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+var react_1 = __importStar(require("react"));
+require("./Modal.scss");
+var Icon_1 = require("../icons/Icon");
+var Overlay_1 = require("./Overlay");
+var nanoid_1 = require("nanoid");
+var ModalHeader = function (props) {
+    var classNames = ["modal__title"];
+    if (props.className)
+        classNames.push(props.className);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("header", { className: "modal__header" },
+            react_1.default.createElement("h1", { className: classNames.join(" "), id: props.uniqueId }, props.title))));
+};
+var ModalFooter = function (props) { return (react_1.default.createElement("footer", { className: "modal__footer", "data-testid": "footer" }, props.actions.map(function (action, index) { return (react_1.default.createElement(react_1.default.Fragment, { key: index }, action)); }))); };
+var Modal = function (props) {
+    var _a;
+    var uniqueIdRef = (0, react_1.useRef)((0, nanoid_1.nanoid)());
+    var modalClassNames = ["modal"];
+    var innerClassNames = ["modal__inner"];
+    var closeClassNames = ["modal__close"];
+    if (props.scrollable)
+        innerClassNames.push("is-scrollable");
+    if (props.modalClassNames)
+        modalClassNames.push.apply(modalClassNames, props.modalClassNames.split(" "));
+    if (props.innerClassNames)
+        innerClassNames.push.apply(innerClassNames, props.innerClassNames.split(" "));
+    if (props.closeClassNames)
+        closeClassNames.push.apply(closeClassNames, props.closeClassNames.split(" "));
+    return (react_1.default.createElement(Overlay_1.Overlay, { ariaLabelledBy: uniqueIdRef.current, ariaDescription: props.ariaDescription, open: props.open, onClose: props.onClose, className: props.className, backdrop: props.backdrop, scrollable: props.scrollable, slim: props.slim, role: props.role ? props.role : "dialog" },
+        react_1.default.createElement("div", { className: modalClassNames.join(" ") },
+            !props.hideCloseIcon && (react_1.default.createElement("button", { className: closeClassNames.join(" "), "aria-label": "Close", onClick: props.onClose, tabIndex: 0 },
+                react_1.default.createElement(Icon_1.Icon, { size: "medium", symbol: "close", fill: (_a = props.closeIconColor) !== null && _a !== void 0 ? _a : Icon_1.IconFillColors.primary }))),
+            react_1.default.createElement(ModalHeader, { title: props.title, uniqueId: uniqueIdRef.current, className: props.headerClassNames }),
+            react_1.default.createElement("section", { className: innerClassNames.join(" ") }, typeof props.children === "string" ? react_1.default.createElement("p", null, props.children) : props.children),
+            props.actions && react_1.default.createElement(ModalFooter, { actions: props.actions }))));
+};
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/src/overlays/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/overlays/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/src/overlays/Modal.stories.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="mdx" />
+import { BADGES } from "../../.storybook/constants";
+import "./Modal.scss";
+import ModalDocumentation from "./Modal.docs.mdx";
+declare const _default: {
+    title: string;
+    id: string;
+    decorators: ((...args: any) => any)[];
+    parameters: {
+        docs: {
+            page: typeof ModalDocumentation;
+        };
+        badges: BADGES[];
+    };
+};
+export default _default;
+export declare const BasicModal: () => JSX.Element;
+export declare const BasicModalOverflowContent: () => JSX.Element;
+export declare const ScrollableModal: () => JSX.Element;
+export declare const ScrollableModalNoFooter: () => JSX.Element;
+export declare const ScrollableModalManyButtons: () => JSX.Element;
+export declare const ScrollableModalMinimalContent: () => JSX.Element;
+export declare const TransparentOverlayModal: () => JSX.Element;
+export declare const ManyButtons: () => JSX.Element;