@bloom-housing/ui-components 7.1.0 → 7.2.0

package/dist/src/notifications/AlertNotice.js

@@ -0,0 +1,32 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertNotice = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var markdown_to_jsx_1 = __importDefault(require("markdown-to-jsx"));
+var alertTypes_1 = require("./alertTypes");
+require("./AlertNotice.scss");
+var AlertNotice = function (props) {
+    var colorClass = alertTypes_1.colorClasses[props.type || "alert"];
+    var classNames = __spreadArray(__spreadArray([
+        "alert-notice",
+        colorClass
+    ], (props.className ? [props.className] : []), true), (props.inverted ? ["invert"] : []), true).join(" ");
+    return (react_1.default.createElement("div", { className: classNames },
+        props.title && (react_1.default.createElement("div", { className: "alert-notice__title ".concat(colorClass) }, typeof props.title === "string" ? react_1.default.createElement("p", null, props.title) : props.title)),
+        react_1.default.createElement("div", { className: "alert-notice__body" }, typeof props.children === "string" ? (react_1.default.createElement(markdown_to_jsx_1.default, null, props.children)) : (props.children))));
+};
+exports.default = AlertNotice;
+exports.AlertNotice = AlertNotice;
+//# sourceMappingURL=AlertNotice.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertNotice.js","sourceRoot":"","sources":["../../../src/notifications/AlertNotice.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,gDAAyB;AACzB,oEAAsC;AAGtC,2CAA2C;AAC3C,8BAA2B;AAU3B,IAAM,WAAW,GAAG,UAAC,KAAuB;IAC1C,IAAM,UAAU,GAAG,yBAAY,CAAC,KAAK,CAAC,IAAI,IAAI,OAAO,CAAC,CAAA;IACtD,IAAM,UAAU,GAAG;QACjB,cAAc;QACd,UAAU;OACP,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,SAC1C,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,QACrC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEX,OAAO,CACL,uCAAK,SAAS,EAAE,UAAU;QACvB,KAAK,CAAC,KAAK,IAAI,CACd,uCAAK,SAAS,EAAE,8BAAuB,UAAU,CAAE,IAChD,OAAO,KAAK,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,yCAAI,KAAK,CAAC,KAAK,CAAK,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CACjE,CACP;QAED,uCAAK,SAAS,EAAC,oBAAoB,IAChC,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CACpC,8BAAC,yBAAQ,QAAE,KAAK,CAAC,QAAQ,CAAY,CACtC,CAAC,CAAC,CAAC,CACF,KAAK,CAAC,QAAQ,CACf,CACG,CACF,CACP,CAAA;AACH,CAAC,CAAA;AAEuB,8BAAO;AAAE,kCAAW"}

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

@@ -0,0 +1,11 @@
+declare const _default: {
+    title: string;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};
+export default _default;
+export declare const AlertNoticeAlert: () => JSX.Element;
+export declare const AlertNoticeAlertInverted: () => JSX.Element;
+export declare const AlertNoticeNotice: () => JSX.Element;
+export declare const AlertNoticeNoticeInverted: () => JSX.Element;
+export declare const AlertNoticeSuccess: () => JSX.Element;
+export declare const AlertNoticeSuccessInverted: () => JSX.Element;

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

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertNoticeSuccessInverted = exports.AlertNoticeSuccess = exports.AlertNoticeNoticeInverted = exports.AlertNoticeNotice = exports.AlertNoticeAlertInverted = exports.AlertNoticeAlert = void 0;
+var react_1 = __importDefault(require("react"));
+var AlertNotice_1 = require("./AlertNotice");
+exports.default = {
+    title: "Notifications/Alert Notice",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var AlertNoticeAlert = function () { return (react_1.default.createElement(AlertNotice_1.AlertNotice, { title: "Your household income is too low." },
+    react_1.default.createElement("p", { className: "mb-2" }, "Please edit your income if you believe you might have made a mistake. Be aware that if you falsify any information on your application you will be disqualified."),
+    react_1.default.createElement("p", null, "If the information you entered is accurate, we encourage you to check back in the future of as more properties become available."))); };
+exports.AlertNoticeAlert = AlertNoticeAlert;
+var AlertNoticeAlertInverted = function () { return (react_1.default.createElement(AlertNotice_1.AlertNotice, { title: "Your household income is too low.", inverted: true },
+    react_1.default.createElement("p", { className: "mb-2" }, "Please edit your income if you believe you might have made a mistake. Be aware that if you falsify any information on your application you will be disqualified."),
+    react_1.default.createElement("p", null, "If the information you entered is accurate, we encourage you to check back in the future of as more properties become available."))); };
+exports.AlertNoticeAlertInverted = AlertNoticeAlertInverted;
+var AlertNoticeNotice = function () { return (react_1.default.createElement(AlertNotice_1.AlertNotice, { title: "Your household income is too low.", type: "notice" },
+    react_1.default.createElement("p", { className: "mb-2" }, "Please edit your income if you believe you might have made a mistake. Be aware that if you falsify any information on your application you will be disqualified."),
+    react_1.default.createElement("p", null, "If the information you entered is accurate, we encourage you to check back in the future of as more properties become available."))); };
+exports.AlertNoticeNotice = AlertNoticeNotice;
+var AlertNoticeNoticeInverted = function () { return (react_1.default.createElement(AlertNotice_1.AlertNotice, { title: "Your household income is too low.", type: "notice", inverted: true },
+    react_1.default.createElement("p", { className: "mb-2" }, "Please edit your income if you believe you might have made a mistake. Be aware that if you falsify any information on your application you will be disqualified."),
+    react_1.default.createElement("p", null, "If the information you entered is accurate, we encourage you to check back in the future of as more properties become available."))); };
+exports.AlertNoticeNoticeInverted = AlertNoticeNoticeInverted;
+var AlertNoticeSuccess = function () { return (react_1.default.createElement(AlertNotice_1.AlertNotice, { title: "Your household income is too low.", type: "success" },
+    react_1.default.createElement("p", { className: "mb-2" }, "Please edit your income if you believe you might have made a mistake. Be aware that if you falsify any information on your application you will be disqualified."),
+    react_1.default.createElement("p", null, "If the information you entered is accurate, we encourage you to check back in the future of as more properties become available."))); };
+exports.AlertNoticeSuccess = AlertNoticeSuccess;
+var AlertNoticeSuccessInverted = function () { return (react_1.default.createElement(AlertNotice_1.AlertNotice, { title: "Your household income is too low.", type: "success", inverted: true },
+    react_1.default.createElement("p", { className: "mb-2" }, "Please edit your income if you believe you might have made a mistake. Be aware that if you falsify any information on your application you will be disqualified."),
+    react_1.default.createElement("p", null, "If the information you entered is accurate, we encourage you to check back in the future of as more properties become available."))); };
+exports.AlertNoticeSuccessInverted = AlertNoticeSuccessInverted;
+//# sourceMappingURL=AlertNotice.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertNotice.stories.js","sourceRoot":"","sources":["../../../src/notifications/AlertNotice.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAEzB,6CAA2C;AAE3C,kBAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,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,gBAAgB,GAAG,cAAM,OAAA,CACpC,8BAAC,yBAAW,IAAC,KAAK,EAAE,mCAAmC;IACrD,qCAAG,SAAS,EAAC,MAAM,uKAGf;IACJ,4KAGI,CACQ,CACf,EAXqC,CAWrC,CAAA;AAXY,QAAA,gBAAgB,oBAW5B;AAEM,IAAM,wBAAwB,GAAG,cAAM,OAAA,CAC5C,8BAAC,yBAAW,IAAC,KAAK,EAAE,mCAAmC,EAAE,QAAQ;IAC/D,qCAAG,SAAS,EAAC,MAAM,uKAGf;IACJ,4KAGI,CACQ,CACf,EAX6C,CAW7C,CAAA;AAXY,QAAA,wBAAwB,4BAWpC;AAEM,IAAM,iBAAiB,GAAG,cAAM,OAAA,CACrC,8BAAC,yBAAW,IAAC,KAAK,EAAE,mCAAmC,EAAE,IAAI,EAAC,QAAQ;IACpE,qCAAG,SAAS,EAAC,MAAM,uKAGf;IACJ,4KAGI,CACQ,CACf,EAXsC,CAWtC,CAAA;AAXY,QAAA,iBAAiB,qBAW7B;AAEM,IAAM,yBAAyB,GAAG,cAAM,OAAA,CAC7C,8BAAC,yBAAW,IAAC,KAAK,EAAE,mCAAmC,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ;IAC7E,qCAAG,SAAS,EAAC,MAAM,uKAGf;IACJ,4KAGI,CACQ,CACf,EAX8C,CAW9C,CAAA;AAXY,QAAA,yBAAyB,6BAWrC;AAEM,IAAM,kBAAkB,GAAG,cAAM,OAAA,CACtC,8BAAC,yBAAW,IAAC,KAAK,EAAE,mCAAmC,EAAE,IAAI,EAAC,SAAS;IACrE,qCAAG,SAAS,EAAC,MAAM,uKAGf;IACJ,4KAGI,CACQ,CACf,EAXuC,CAWvC,CAAA;AAXY,QAAA,kBAAkB,sBAW9B;AAEM,IAAM,0BAA0B,GAAG,cAAM,OAAA,CAC9C,8BAAC,yBAAW,IAAC,KAAK,EAAE,mCAAmC,EAAE,IAAI,EAAC,SAAS,EAAC,QAAQ;IAC9E,qCAAG,SAAS,EAAC,MAAM,uKAGf;IACJ,4KAGI,CACQ,CACf,EAX+C,CAW/C,CAAA;AAXY,QAAA,0BAA0B,8BAWtC"}

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

@@ -0,0 +1,15 @@
+import { UniversalIconType } from "../icons/Icon";
+import { ApplicationStatusType } from "../global/ApplicationStatusType";
+import "./ApplicationStatus.scss";
+export interface ApplicationStatusProps {
+    content: string;
+    className?: string;
+    iconColor?: string;
+    iconType?: UniversalIconType;
+    status?: ApplicationStatusType;
+    subContent?: string;
+    vivid?: boolean;
+    withIcon?: boolean;
+}
+declare const ApplicationStatus: (props: ApplicationStatusProps) => JSX.Element;
+export { ApplicationStatus as default, ApplicationStatus };

package/dist/src/notifications/ApplicationStatus.js

@@ -0,0 +1,70 @@
+"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.ApplicationStatus = exports.default = void 0;
+var React = __importStar(require("react"));
+var Icon_1 = require("../icons/Icon");
+var ApplicationStatusType_1 = require("../global/ApplicationStatusType");
+require("./ApplicationStatus.scss");
+var ApplicationStatus = function (props) {
+    var bgColor = "";
+    var className = props.className, content = props.content, iconColor = props.iconColor, _a = props.iconType, iconType = _a === void 0 ? "clock" : _a, _b = props.status, status = _b === void 0 ? ApplicationStatusType_1.ApplicationStatusType.Open : _b, subContent = props.subContent, vivid = props.vivid, _c = props.withIcon, withIcon = _c === void 0 ? true : _c;
+    // determine styling
+    var textColor = vivid ? "text-white" : "text-gray-800";
+    var textSize = vivid ? "text-xs" : "text-sm";
+    var icon = withIcon && (React.createElement(Icon_1.Icon, { size: "medium", symbol: iconType, fill: iconColor || (vivid ? Icon_1.IconFillColors.white : undefined) }));
+    switch (status) {
+        case ApplicationStatusType_1.ApplicationStatusType.Open:
+            bgColor = vivid ? "bg-primary" : "bg-primary-light";
+            break;
+        case ApplicationStatusType_1.ApplicationStatusType.Closed:
+            bgColor = vivid ? "bg-alert" : "bg-alert-light";
+            break;
+        case ApplicationStatusType_1.ApplicationStatusType.PostLottery:
+            bgColor = "bg-gray-850";
+            textColor = "text-white";
+            break;
+        case ApplicationStatusType_1.ApplicationStatusType.Matched:
+            bgColor = "bg-green-700";
+            textColor = "text-white";
+            break;
+        default:
+            bgColor = "bg-primary";
+    }
+    var classNames = ["application-status", textSize, textColor, bgColor];
+    if (className) {
+        classNames.push(className);
+    }
+    return (React.createElement("div", { className: classNames.join(" ") },
+        icon,
+        React.createElement("span", null,
+            content,
+            subContent && (React.createElement(React.Fragment, null,
+                React.createElement("br", null),
+                subContent)))));
+};
+exports.default = ApplicationStatus;
+exports.ApplicationStatus = ApplicationStatus;
+//# sourceMappingURL=ApplicationStatus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ApplicationStatus.js","sourceRoot":"","sources":["../../../src/notifications/ApplicationStatus.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,2CAA8B;AAC9B,sCAAuE;AACvE,yEAAuE;AACvE,oCAAiC;AAajC,IAAM,iBAAiB,GAAG,UAAC,KAA6B;IACtD,IAAI,OAAO,GAAG,EAAE,CAAA;IAEd,IAAA,SAAS,GAQP,KAAK,UARE,EACT,OAAO,GAOL,KAAK,QAPA,EACP,SAAS,GAMP,KAAK,UANE,EACT,KAKE,KAAK,SALW,EAAlB,QAAQ,mBAAG,OAAO,KAAA,EAClB,KAIE,KAAK,OAJ4B,EAAnC,MAAM,mBAAG,6CAAqB,CAAC,IAAI,KAAA,EACnC,UAAU,GAGR,KAAK,WAHG,EACV,KAAK,GAEH,KAAK,MAFF,EACL,KACE,KAAK,SADQ,EAAf,QAAQ,mBAAG,IAAI,KAAA,CACR;IAET,oBAAoB;IACpB,IAAI,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe,CAAA;IACtD,IAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAA;IAE9C,IAAM,IAAI,GAAG,QAAQ,IAAI,CACvB,oBAAC,WAAI,IACH,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,QAAQ,EAChB,IAAI,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,qBAAc,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,GAC7D,CACH,CAAA;IAED,QAAQ,MAAM,EAAE;QACd,KAAK,6CAAqB,CAAC,IAAI;YAC7B,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,kBAAkB,CAAA;YACnD,MAAK;QACP,KAAK,6CAAqB,CAAC,MAAM;YAC/B,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAA;YAC/C,MAAK;QACP,KAAK,6CAAqB,CAAC,WAAW;YACpC,OAAO,GAAG,aAAa,CAAA;YACvB,SAAS,GAAG,YAAY,CAAA;YACxB,MAAK;QACP,KAAK,6CAAqB,CAAC,OAAO;YAChC,OAAO,GAAG,cAAc,CAAA;YACxB,SAAS,GAAG,YAAY,CAAA;YACxB,MAAK;QACP;YACE,OAAO,GAAG,YAAY,CAAA;KACzB;IAED,IAAM,UAAU,GAAG,CAAC,oBAAoB,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC,CAAA;IACvE,IAAI,SAAS,EAAE;QACb,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;KAC3B;IAED,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;QACjC,IAAI;QACL;YACG,OAAO;YACP,UAAU,IAAI,CACb;gBACE,+BAAM;gBACL,UAAU,CACV,CACJ,CACI,CACH,CACP,CAAA;AACH,CAAC,CAAA;AAE6B,oCAAO;AAAE,8CAAiB"}

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

@@ -0,0 +1,20 @@
+declare const _default: {
+    component: (props: import("./ApplicationStatus").ApplicationStatusProps) => JSX.Element;
+    title: string;
+    decorators: ((...args: any) => any)[];
+};
+export default _default;
+export declare const dueSoonAndVivid: () => JSX.Element;
+export declare const withSubContent: () => JSX.Element;
+export declare const dueSoonWithTime: () => JSX.Element;
+export declare const pastDue: () => JSX.Element;
+export declare const pastDueAndVivid: () => JSX.Element;
+export declare const pastDueWithStyles: () => JSX.Element;
+export declare const pastDueWithIconColor: () => JSX.Element;
+export declare const openSoon: () => JSX.Element;
+export declare const openedAlready: () => JSX.Element;
+export declare const openedWithNoDue: () => JSX.Element;
+export declare const openedWithFCFS: () => JSX.Element;
+export declare const openedWithFCFSVivid: () => JSX.Element;
+export declare const postLottery: () => JSX.Element;
+export declare const matched: () => JSX.Element;

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

@@ -0,0 +1,103 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.matched = exports.postLottery = exports.openedWithFCFSVivid = exports.openedWithFCFS = exports.openedWithNoDue = exports.openedAlready = exports.openSoon = exports.pastDueWithIconColor = exports.pastDueWithStyles = exports.pastDueAndVivid = exports.pastDue = exports.dueSoonWithTime = exports.withSubContent = exports.dueSoonAndVivid = void 0;
+var React = __importStar(require("react"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var advancedFormat_1 = __importDefault(require("dayjs/plugin/advancedFormat"));
+var ApplicationStatus_1 = require("./ApplicationStatus");
+var ApplicationStatusType_1 = require("../global/ApplicationStatusType");
+var translator_1 = require("../helpers/translator");
+var archer_json_1 = __importDefault(require("../../__tests__/fixtures/archer.json"));
+var addon_knobs_1 = require("@storybook/addon-knobs");
+var DateFormat_1 = __importDefault(require("../helpers/DateFormat"));
+dayjs_1.default.extend(advancedFormat_1.default);
+exports.default = {
+    component: ApplicationStatus_1.ApplicationStatus,
+    title: "Notifications/Application Status",
+    decorators: [function (storyFn) { return React.createElement("div", null, storyFn()); }, addon_knobs_1.withKnobs],
+};
+var listing = Object.assign({}, archer_json_1.default);
+listing.applicationOpenDate = "";
+var days = 10;
+listing.applicationDueDate = (0, dayjs_1.default)().add(days, "days").format();
+var dueSoonAndVivid = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationDeadline") +
+        ": " +
+        (0, DateFormat_1.default)(listing.applicationDueDate), status: ApplicationStatusType_1.ApplicationStatusType.Open, vivid: true })); };
+exports.dueSoonAndVivid = dueSoonAndVivid;
+var withSubContent = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: "First Come First Served (and a really long string to test wrapping on smaller sizes)", subContent: "Application Due Date: July 10th", status: ApplicationStatusType_1.ApplicationStatusType.Open, vivid: true })); };
+exports.withSubContent = withSubContent;
+var dueSoonWithTime = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationDeadline") +
+        ": " +
+        (0, DateFormat_1.default)(listing.applicationDueDate, true), status: ApplicationStatusType_1.ApplicationStatusType.Open })); };
+exports.dueSoonWithTime = dueSoonWithTime;
+var listingPast = Object.assign({}, archer_json_1.default);
+listingPast.applicationOpenDate = "";
+days = 10;
+var pastDue = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationsClosed") +
+        ": " +
+        (0, DateFormat_1.default)(listingPast.applicationDueDate), status: ApplicationStatusType_1.ApplicationStatusType.Closed })); };
+exports.pastDue = pastDue;
+listingPast.applicationDueDate = (0, dayjs_1.default)().subtract(days, "days").format();
+var pastDueAndVivid = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationsClosed") +
+        ": " +
+        (0, DateFormat_1.default)(listingPast.applicationDueDate), status: ApplicationStatusType_1.ApplicationStatusType.Closed, vivid: true })); };
+exports.pastDueAndVivid = pastDueAndVivid;
+var pastDueWithStyles = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { className: (0, addon_knobs_1.text)("className", "place-content-center"), content: (0, translator_1.t)("listings.applicationsClosed") +
+        ": " +
+        (0, DateFormat_1.default)(listingPast.applicationDueDate), status: ApplicationStatusType_1.ApplicationStatusType.Closed })); };
+exports.pastDueWithStyles = pastDueWithStyles;
+var pastDueWithIconColor = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationsClosed") +
+        ": " +
+        (0, DateFormat_1.default)(listingPast.applicationDueDate), iconColor: (0, addon_knobs_1.text)("Icon Color", "#ff0000"), status: ApplicationStatusType_1.ApplicationStatusType.Closed })); };
+exports.pastDueWithIconColor = pastDueWithIconColor;
+var listing2 = Object.assign({}, archer_json_1.default);
+days = 10;
+listing2.applicationDueDate = (0, dayjs_1.default)().add(days, "days").format();
+var openSoon = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationOpenPeriod") +
+        ": " +
+        (0, DateFormat_1.default)(listing2.applicationDueDate), status: ApplicationStatusType_1.ApplicationStatusType.Open })); };
+exports.openSoon = openSoon;
+var listing3 = Object.assign({}, archer_json_1.default);
+days = 10;
+listing3.applicationDueDate = (0, dayjs_1.default)().add(days, "days").format();
+var openedAlready = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationDeadline") +
+        ": " +
+        (0, DateFormat_1.default)(listing3.applicationDueDate), status: ApplicationStatusType_1.ApplicationStatusType.Open })); };
+exports.openedAlready = openedAlready;
+var openedWithNoDue = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationFCFS"), status: ApplicationStatusType_1.ApplicationStatusType.Open })); };
+exports.openedWithNoDue = openedWithNoDue;
+var openedWithFCFS = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationFCFS"), status: ApplicationStatusType_1.ApplicationStatusType.Open })); };
+exports.openedWithFCFS = openedWithFCFS;
+var openedWithFCFSVivid = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: (0, translator_1.t)("listings.applicationFCFS"), status: ApplicationStatusType_1.ApplicationStatusType.Open, vivid: true })); };
+exports.openedWithFCFSVivid = openedWithFCFSVivid;
+var postLottery = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: "Post-lottery content: " + (0, dayjs_1.default)().format("MMMM Do, YYYY"), status: ApplicationStatusType_1.ApplicationStatusType.PostLottery, withIcon: false })); };
+exports.postLottery = postLottery;
+var matched = function () { return (React.createElement(ApplicationStatus_1.ApplicationStatus, { content: "Matched", status: ApplicationStatusType_1.ApplicationStatusType.Matched, withIcon: true, iconType: "check" })); };
+exports.matched = matched;
+//# sourceMappingURL=ApplicationStatus.stories.js.map

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

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

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

@@ -0,0 +1,8 @@
+import React from "react";
+declare const ErrorMessage: (props: {
+    id?: string;
+    error?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}) => JSX.Element;
+export { ErrorMessage as default, ErrorMessage };

package/dist/src/notifications/ErrorMessage.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorMessage = exports.default = void 0;
+var react_1 = __importDefault(require("react"));
+var ErrorMessage = function (props) {
+    if (props.error) {
+        var classes = ["error-message"];
+        if (props.className) {
+            classes.push(props.className);
+        }
+        return (react_1.default.createElement("span", { id: props.id, className: classes.join(" "), "aria-live": "assertive", "data-test-id": "error-message" }, props.children));
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null);
+    }
+};
+exports.default = ErrorMessage;
+exports.ErrorMessage = ErrorMessage;
+//# sourceMappingURL=ErrorMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorMessage.js","sourceRoot":"","sources":["../../../src/notifications/ErrorMessage.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AAEzB,IAAM,YAAY,GAAG,UAAC,KAKrB;IACC,IAAI,KAAK,CAAC,KAAK,EAAE;QACf,IAAM,OAAO,GAAG,CAAC,eAAe,CAAC,CAAA;QACjC,IAAI,KAAK,CAAC,SAAS,EAAE;YACnB,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAA;SAC9B;QAED,OAAO,CACL,wCACE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,eAClB,WAAW,kBACP,eAAe,IAE5B,KAAK,CAAC,QAAQ,CACV,CACR,CAAA;KACF;SAAM;QACL,OAAO,6DAAK,CAAA;KACb;AACH,CAAC,CAAA;AAEwB,+BAAO;AAAE,oCAAY"}

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

@@ -0,0 +1,19 @@
+import { AlertTypes } from "./alertTypes";
+declare type SiteAlertProps = {
+    timeout?: number;
+    dismissable?: boolean;
+    type?: AlertTypes;
+    className?: string;
+    alertMessage?: {
+        type: AlertTypes;
+        message: string;
+    };
+    sticky?: boolean;
+};
+export declare const setSiteAlertMessage: (message: string, type: AlertTypes) => void;
+export declare const clearSiteAlertMessage: (type: AlertTypes) => void;
+/**
+ * Show an alert based on a url query param.
+ */
+export declare const SiteAlert: ({ timeout, dismissable, type, className, alertMessage, sticky, }: SiteAlertProps) => JSX.Element | null;
+export {};

package/dist/src/notifications/SiteAlert.js

@@ -0,0 +1,80 @@
+"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.SiteAlert = exports.clearSiteAlertMessage = exports.setSiteAlertMessage = void 0;
+var react_1 = __importStar(require("react"));
+var AlertBox_1 = require("./AlertBox");
+var setSiteAlertMessage = function (message, type) {
+    sessionStorage.setItem("alert_message_".concat(type), message);
+};
+exports.setSiteAlertMessage = setSiteAlertMessage;
+var clearSiteAlertMessage = function (type) {
+    sessionStorage.removeItem("alert_message_".concat(type));
+};
+exports.clearSiteAlertMessage = clearSiteAlertMessage;
+/**
+ * Show an alert based on a url query param.
+ */
+var SiteAlert = function (_a) {
+    var _b;
+    var timeout = _a.timeout, _c = _a.dismissable, dismissable = _c === void 0 ? true : _c, _d = _a.type, type = _d === void 0 ? "alert" : _d, className = _a.className, alertMessage = _a.alertMessage, sticky = _a.sticky;
+    var _e = (0, react_1.useState)(false), open = _e[0], setOpen = _e[1];
+    var _f = (0, react_1.useState)(""), message = _f[0], setMessage = _f[1];
+    /**
+      * We use 2 useEffects here 1 for if we are consuming what is stored in sessionStorage
+      * and another for if the message is passed in as a prop
+  
+      * this gives the ability for the SiteAlert to "survive" a re-render, or if no re-render will occur
+      * for the SiteAlert to simply render itself
+    **/
+    (0, react_1.useEffect)(function () {
+        var timeoutRef;
+        var storedMessage = sessionStorage.getItem("alert_message_".concat(type));
+        if (storedMessage) {
+            setMessage(storedMessage);
+            setOpen(true);
+            sessionStorage.removeItem("alert_message_".concat(type));
+            // Automatically dismiss the message after the timeout, if applicable
+            if (timeout) {
+                timeoutRef = setTimeout(function () { return setOpen(false); }, timeout);
+            }
+        }
+        return function () { return clearTimeout(timeoutRef); };
+    }, [timeout, type]);
+    (0, react_1.useEffect)(function () {
+        var timeoutRef;
+        if (alertMessage === null || alertMessage === void 0 ? void 0 : alertMessage.message) {
+            setMessage(alertMessage === null || alertMessage === void 0 ? void 0 : alertMessage.message);
+            setOpen(true);
+            if (timeout) {
+                timeoutRef = setTimeout(function () { return setOpen(false); }, timeout);
+            }
+        }
+        return function () { return clearTimeout(timeoutRef); };
+    }, [alertMessage, timeout]);
+    return open ? (react_1.default.createElement(AlertBox_1.AlertBox, { onClose: dismissable ? function () { return setOpen(false); } : undefined, className: className, type: (_b = alertMessage === null || alertMessage === void 0 ? void 0 : alertMessage.type) !== null && _b !== void 0 ? _b : type, sticky: sticky }, message)) : null;
+};
+exports.SiteAlert = SiteAlert;
+//# sourceMappingURL=SiteAlert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SiteAlert.js","sourceRoot":"","sources":["../../../src/notifications/SiteAlert.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAkD;AAClD,uCAAqC;AAe9B,IAAM,mBAAmB,GAAG,UAAC,OAAe,EAAE,IAAgB;IACnE,cAAc,CAAC,OAAO,CAAC,wBAAiB,IAAI,CAAE,EAAE,OAAO,CAAC,CAAA;AAC1D,CAAC,CAAA;AAFY,QAAA,mBAAmB,uBAE/B;AAEM,IAAM,qBAAqB,GAAG,UAAC,IAAgB;IACpD,cAAc,CAAC,UAAU,CAAC,wBAAiB,IAAI,CAAE,CAAC,CAAA;AACpD,CAAC,CAAA;AAFY,QAAA,qBAAqB,yBAEjC;AAED;;GAEG;AACI,IAAM,SAAS,GAAG,UAAC,EAOT;;QANf,OAAO,aAAA,EACP,mBAAkB,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAClB,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACd,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,MAAM,YAAA;IAEA,IAAA,KAAkB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAA;IACjC,IAAA,KAAwB,IAAA,gBAAQ,EAAC,EAAE,CAAC,EAAnC,OAAO,QAAA,EAAE,UAAU,QAAgB,CAAA;IAC1C;;;;;;OAMG;IAEH,IAAA,iBAAS,EAAC;QACR,IAAI,UAAkB,CAAA;QACtB,IAAM,aAAa,GAAG,cAAc,CAAC,OAAO,CAAC,wBAAiB,IAAI,CAAE,CAAC,CAAA;QAErE,IAAI,aAAa,EAAE;YACjB,UAAU,CAAC,aAAa,CAAC,CAAA;YACzB,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,cAAc,CAAC,UAAU,CAAC,wBAAiB,IAAI,CAAE,CAAC,CAAA;YAElD,qEAAqE;YACrE,IAAI,OAAO,EAAE;gBACX,UAAU,GAAI,UAAU,CAAC,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAAE,OAAO,CAAuB,CAAA;aAC9E;SACF;QACD,OAAO,cAAM,OAAA,YAAY,CAAC,UAAU,CAAC,EAAxB,CAAwB,CAAA;IACvC,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAA;IAEnB,IAAA,iBAAS,EAAC;QACR,IAAI,UAAkB,CAAA;QACtB,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,EAAE;YACzB,UAAU,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC,CAAA;YACjC,OAAO,CAAC,IAAI,CAAC,CAAA;YACb,IAAI,OAAO,EAAE;gBACX,UAAU,GAAI,UAAU,CAAC,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAAE,OAAO,CAAuB,CAAA;aAC9E;SACF;QACD,OAAO,cAAM,OAAA,YAAY,CAAC,UAAU,CAAC,EAAxB,CAAwB,CAAA;IACvC,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC,CAAA;IAE3B,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,8BAAC,mBAAQ,IACP,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,CAAC,CAAC,CAAC,SAAS,EACvD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,mCAAI,IAAI,EAChC,MAAM,EAAE,MAAM,IAEb,OAAO,CACC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC,CAAA;AAzDY,QAAA,SAAS,aAyDrB"}

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

@@ -0,0 +1,8 @@
+import React from "react";
+import "./StatusAside.scss";
+export interface StatusAsideProps {
+    actions: React.ReactNode[];
+    columns?: number;
+    children?: React.ReactNode;
+}
+export declare const StatusAside: (props: StatusAsideProps) => JSX.Element;

package/dist/src/notifications/StatusAside.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusAside = void 0;
+var react_1 = __importDefault(require("react"));
+var GridSection_1 = require("../sections/GridSection");
+require("./StatusAside.scss");
+var StatusAside = function (props) { return (react_1.default.createElement("div", { className: "status-aside" },
+    react_1.default.createElement("div", { className: "status-aside__buttons" },
+        react_1.default.createElement(GridSection_1.GridSection, { columns: props.columns || 2, tightSpacing: true }, props.actions)),
+    react_1.default.Children.count(props.children) > 0 && (react_1.default.createElement("div", { className: "status-aside__messages" }, props.children)))); };
+exports.StatusAside = StatusAside;
+//# sourceMappingURL=StatusAside.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusAside.js","sourceRoot":"","sources":["../../../src/notifications/StatusAside.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,uDAAqD;AAErD,8BAA2B;AASpB,IAAM,WAAW,GAAG,UAAC,KAAuB,IAAK,OAAA,CACtD,uCAAK,SAAS,EAAC,cAAc;IAC3B,uCAAK,SAAS,EAAC,uBAAuB;QACpC,8BAAC,yBAAW,IAAC,OAAO,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,IACzD,KAAK,CAAC,OAAO,CACF,CACV;IAEL,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAC3C,uCAAK,SAAS,EAAC,wBAAwB,IAAE,KAAK,CAAC,QAAQ,CAAO,CAC/D,CACG,CACP,EAZuD,CAYvD,CAAA;AAZY,QAAA,WAAW,eAYvB"}

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnlyTimestamp = exports.WithButtonsAndMessages = void 0;
+var react_1 = __importDefault(require("react"));
+var StatusAside_1 = require("./StatusAside");
+var GridSection_1 = require("../sections/GridSection");
+var Button_1 = require("../actions/Button");
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+var StatusMessage_1 = require("./StatusMessage");
+exports.default = {
+    title: "Notifications/Status Aside",
+    decorators: [function (storyFn) { return react_1.default.createElement("div", { style: { padding: "1rem" } }, storyFn()); }],
+};
+var WithButtonsAndMessages = function () { return (react_1.default.createElement(StatusAside_1.StatusAside, { actions: [
+        react_1.default.createElement(GridSection_1.GridCell, { key: 0 },
+            react_1.default.createElement(Button_1.Button, { fullWidth: true, size: AppearanceTypes_1.AppearanceSizeType.small }, "Save")),
+        react_1.default.createElement(GridSection_1.GridCell, { key: 1 },
+            react_1.default.createElement(Button_1.Button, { styleType: AppearanceTypes_1.AppearanceStyleType.secondary, fullWidth: true, size: AppearanceTypes_1.AppearanceSizeType.small }, "Preview")),
+        react_1.default.createElement(GridSection_1.GridCell, { span: 2, key: 2 },
+            react_1.default.createElement(Button_1.Button, { styleType: AppearanceTypes_1.AppearanceStyleType.primary, fullWidth: true, size: AppearanceTypes_1.AppearanceSizeType.small }, "Submit")),
+    ] },
+    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: "Changed status of one application." }),
+        react_1.default.createElement(StatusMessage_1.StatusMessage, { status: "Draft", timestamp: "2/1/21" })))); };
+exports.WithButtonsAndMessages = WithButtonsAndMessages;
+var OnlyTimestamp = function () { return (react_1.default.createElement(StatusAside_1.StatusAside, { columns: 1, actions: [
+        react_1.default.createElement(GridSection_1.GridCell, { key: 0 },
+            react_1.default.createElement(Button_1.Button, { fullWidth: true, size: AppearanceTypes_1.AppearanceSizeType.small }, "Save")),
+        react_1.default.createElement(GridSection_1.GridCell, { key: 1 },
+            react_1.default.createElement(Button_1.Button, { styleType: AppearanceTypes_1.AppearanceStyleType.secondary, fullWidth: true, size: AppearanceTypes_1.AppearanceSizeType.small }, "Preview")),
+    ] },
+    react_1.default.createElement(StatusMessage_1.StatusMessages, { lastTimestamp: "February 3, 2021" }))); };
+exports.OnlyTimestamp = OnlyTimestamp;
+//# sourceMappingURL=StatusAside.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusAside.stories.js","sourceRoot":"","sources":["../../../src/notifications/StatusAside.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,6CAA2C;AAC3C,uDAAkD;AAClD,4CAA0C;AAC1C,6DAAmF;AACnF,iDAA+D;AAE/D,kBAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,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,sBAAsB,GAAG,cAAM,OAAA,CAC1C,8BAAC,yBAAW,IACV,OAAO,EAAE;QACP,8BAAC,sBAAQ,IAAC,GAAG,EAAE,CAAC;YACd,8BAAC,eAAM,IAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,oCAAkB,CAAC,KAAK,WAE9C,CACA;QACX,8BAAC,sBAAQ,IAAC,GAAG,EAAE,CAAC;YACd,8BAAC,eAAM,IACL,SAAS,EAAE,qCAAmB,CAAC,SAAS,EACxC,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,oCAAkB,CAAC,KAAK,cAGvB,CACA;QACX,8BAAC,sBAAQ,IAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;YACvB,8BAAC,eAAM,IACL,SAAS,EAAE,qCAAmB,CAAC,OAAO,EACtC,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,oCAAkB,CAAC,KAAK,aAGvB,CACA;KACZ;IAED,8BAAC,8BAAc;QACb,8BAAC,6BAAa,IACZ,MAAM,EAAC,WAAW,EAClB,KAAK,EAAE,qCAAmB,CAAC,OAAO,EAClC,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,oCAAoC,GACzC;QACF,8BAAC,6BAAa,IAAC,MAAM,EAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,GAAG,CACpC,CACL,CACf,EAtC2C,CAsC3C,CAAA;AAtCY,QAAA,sBAAsB,0BAsClC;AAEM,IAAM,aAAa,GAAG,cAAM,OAAA,CACjC,8BAAC,yBAAW,IACV,OAAO,EAAE,CAAC,EACV,OAAO,EAAE;QACP,8BAAC,sBAAQ,IAAC,GAAG,EAAE,CAAC;YACd,8BAAC,eAAM,IAAC,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,oCAAkB,CAAC,KAAK,WAE9C,CACA;QACX,8BAAC,sBAAQ,IAAC,GAAG,EAAE,CAAC;YACd,8BAAC,eAAM,IACL,SAAS,EAAE,qCAAmB,CAAC,SAAS,EACxC,SAAS,EAAE,IAAI,EACf,IAAI,EAAE,oCAAkB,CAAC,KAAK,cAGvB,CACA;KACZ;IAED,8BAAC,8BAAc,IAAC,aAAa,EAAC,kBAAkB,GAAG,CACvC,CACf,EAtBkC,CAsBlC,CAAA;AAtBY,QAAA,aAAa,iBAsBzB"}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { AppearanceStyleType } from "../global/AppearanceTypes";
+import "./StatusMessage.scss";
+export interface StatusMessagesProps {
+    lastTimestamp?: string;
+    children?: React.ReactNode;
+    strings?: {
+        lastUpdated?: string;
+        statusHistory?: string;
+    };
+}
+export declare const StatusMessages: (props: StatusMessagesProps) => JSX.Element;
+export interface StatusMessageProps {
+    status: string;
+    timestamp: string;
+    body?: string;
+    style?: AppearanceStyleType;
+}
+declare const StatusMessage: (props: StatusMessageProps) => JSX.Element;
+export { StatusMessage as default, StatusMessage };

package/dist/src/notifications/StatusMessage.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusMessage = exports.default = exports.StatusMessages = void 0;
+var react_1 = __importDefault(require("react"));
+var AppearanceTypes_1 = require("../global/AppearanceTypes");
+var Tag_1 = require("../text/Tag");
+var translator_1 = require("../helpers/translator");
+require("./StatusMessage.scss");
+var StatusMessages = function (props) {
+    var _a, _b, _c, _d;
+    if (react_1.default.Children.count(props.children) == 0) {
+        return (react_1.default.createElement("ul", { className: "status-messages" }, props.lastTimestamp && (react_1.default.createElement("li", { className: "status-message" },
+            react_1.default.createElement("div", { className: "status-message__note text-center" }, (_b = (_a = props.strings) === null || _a === void 0 ? void 0 : _a.lastUpdated) !== null && _b !== void 0 ? _b : (0, translator_1.t)("t.lastUpdated"),
+                ": ",
+                props.lastTimestamp)))));
+    }
+    else {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("h3", { className: "status-messages__title" }, (_d = (_c = props.strings) === null || _c === void 0 ? void 0 : _c.statusHistory) !== null && _d !== void 0 ? _d : (0, translator_1.t)("t.statusHistory")),
+            react_1.default.createElement("ul", { className: "status-messages" }, props.children)));
+    }
+};
+exports.StatusMessages = StatusMessages;
+var StatusMessage = function (props) {
+    return (react_1.default.createElement("li", { className: "status-message" },
+        react_1.default.createElement("div", { className: "status-message__status" },
+            react_1.default.createElement(Tag_1.Tag, { pillStyle: true, styleType: props.style, size: AppearanceTypes_1.AppearanceSizeType.small }, props.status),
+            react_1.default.createElement("span", { className: "status-message__time" }, props.timestamp)),
+        props.body && react_1.default.createElement("div", { className: "status-message__note" }, props.body)));
+};
+exports.default = StatusMessage;
+exports.StatusMessage = StatusMessage;
+//# sourceMappingURL=StatusMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessage.js","sourceRoot":"","sources":["../../../src/notifications/StatusMessage.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAyB;AACzB,6DAAmF;AACnF,mCAAiC;AACjC,oDAAyC;AAEzC,gCAA6B;AAWtB,IAAM,cAAc,GAAG,UAAC,KAA0B;;IACvD,IAAI,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;QAC7C,OAAO,CACL,sCAAI,SAAS,EAAC,iBAAiB,IAC5B,KAAK,CAAC,aAAa,IAAI,CACtB,sCAAI,SAAS,EAAC,gBAAgB;YAC5B,uCAAK,SAAS,EAAC,kCAAkC,IAC9C,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,WAAW,mCAAI,IAAA,cAAC,EAAC,eAAe,CAAC;;gBAAI,KAAK,CAAC,aAAa,CACpE,CACH,CACN,CACE,CACN,CAAA;KACF;SAAM;QACL,OAAO,CACL;YACE,sCAAI,SAAS,EAAC,wBAAwB,IACnC,MAAA,MAAA,KAAK,CAAC,OAAO,0CAAE,aAAa,mCAAI,IAAA,cAAC,EAAC,iBAAiB,CAAC,CAClD;YACL,sCAAI,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAC,QAAQ,CAAM,CACpD,CACJ,CAAA;KACF;AACH,CAAC,CAAA;AAvBY,QAAA,cAAc,kBAuB1B;AASD,IAAM,aAAa,GAAG,UAAC,KAAyB;IAC9C,OAAO,CACL,sCAAI,SAAS,EAAC,gBAAgB;QAC5B,uCAAK,SAAS,EAAC,wBAAwB;YACrC,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,oCAAkB,CAAC,KAAK,IACzE,KAAK,CAAC,MAAM,CACT;YAEN,wCAAM,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,SAAS,CAAQ,CAC3D;QAEL,KAAK,CAAC,IAAI,IAAI,uCAAK,SAAS,EAAC,sBAAsB,IAAE,KAAK,CAAC,IAAI,CAAO,CACpE,CACN,CAAA;AACH,CAAC,CAAA;AAEyB,gCAAO;AAAE,sCAAa"}