@thecb/components 7.5.1 → 7.5.2

package/dist/src/components/molecules/forgot-password-form/ForgotPasswordForm.stories.d.ts

@@ -0,0 +1,7 @@
+export default story;
+export function forgotPasswordForm(): JSX.Element;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/forgot-password-form/ForgotPasswordForm.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+import ForgotPasswordForm from "./ForgotPasswordForm";
+import page from "../../../../.storybook/page";
+import * as ForgotPasswordFormState from "./ForgotPasswordForm.state";
+var story = page({
+    title: "Components|Molecules/ForgotPasswordForm",
+    Component: ForgotPasswordForm,
+    reducer: ForgotPasswordFormState.reducer,
+    mapStateToProps: ForgotPasswordFormState.mapStateToProps,
+    mapDispatchToProps: ForgotPasswordFormState.mapDispatchToProps
+});
+export default story;
+var ConnectedForm = connect(ForgotPasswordFormState.mapStateToProps, ForgotPasswordFormState.mapDispatchToProps)(ForgotPasswordForm);
+export var forgotPasswordForm = function () { return (React.createElement(ConnectedForm, { showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/molecules/forgot-password-form/index.d.ts

@@ -0,0 +1,2 @@
+export default ForgotPasswordForm;
+import ForgotPasswordForm from "./ForgotPasswordForm";

package/dist/src/components/molecules/forgot-password-form/index.js

@@ -0,0 +1,6 @@
+import ForgotPasswordForm from "./ForgotPasswordForm";
+import { reducer, mapStateToProps, mapDispatchToProps } from "./ForgotPasswordForm.state";
+ForgotPasswordForm.reducer = reducer;
+ForgotPasswordForm.mapStateToProps = mapStateToProps;
+ForgotPasswordForm.mapDispatchToProps = mapDispatchToProps;
+export default ForgotPasswordForm;

package/dist/src/components/molecules/highlight-tab-row/HighlightTabRow.d.ts

@@ -0,0 +1,6 @@
+declare const _default: React.MemoExoticComponent<({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any>;
+export default _default;
+import React from "react";

package/dist/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -0,0 +1,29 @@
+import React, { memo } from "react";
+import { repeat } from "ramda";
+import { fallbackValues } from "./HighlightTabRow.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Reel, Box, Center } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+// this component needs some fix'n
+var HighlightTabRow = function (_a) {
+    var tabs = _a.tabs, highlightIndex = _a.highlightIndex, themeValues = _a.themeValues, isMobile = _a.isMobile, _b = _a.useOrderedList, useOrderedList = _b === void 0 ? true : _b, _c = _a.useUnorderedList, useUnorderedList = _c === void 0 ? false : _c;
+    var itemsAfterIndex = tabs.slice(highlightIndex).length - 1;
+    var itemsBeforeIndex = tabs.slice(0, highlightIndex).length;
+    var boxesBefore = itemsAfterIndex > itemsBeforeIndex && isMobile
+        ? itemsAfterIndex - itemsBeforeIndex
+        : 0;
+    var boxesAfter = itemsAfterIndex < itemsBeforeIndex && isMobile
+        ? itemsBeforeIndex - itemsAfterIndex
+        : 0;
+    return (React.createElement(Box, { padding: "0", background: themeValues.backgroundColor, margin: "0", boxShadow: "0px 0px 4px 0px rgb(110, 114, 126)", role: "region", "aria-label": "Payment step" },
+        React.createElement(Box, { srOnly: true, padding: "0" },
+            React.createElement(Text, null, "Current step: ".concat(tabs[highlightIndex]))),
+        React.createElement(Center, { maxWidth: "76.5rem" },
+            React.createElement(Reel, { padding: "0", childGap: "4.5rem", childWidth: "11rem", justifyContent: "space-evenly", disableScroll: true, useOrderedList: useOrderedList, useUnorderedList: useUnorderedList },
+                repeat(React.createElement(Box, null), boxesBefore),
+                tabs.map(function (t, i) { return (React.createElement(Box, { key: t, borderSize: "3px", borderColor: highlightIndex == i ? themeValues.textColor : "transparent", borderWidthOverride: "0 0 3px 0", extraStyles: "text-align: center; display: block;", as: "li", "aria-current": highlightIndex == i ? "step" : "" },
+                    React.createElement(Text, { variant: "p", textAlign: "center", color: themeValues.textColor, weight: FONT_WEIGHT_SEMIBOLD, extraStyles: "display: block; white-space: nowrap;" }, t))); }),
+                repeat(React.createElement(Box, null), boxesAfter)))));
+};
+export default memo(themeComponent(HighlightTabRow, "HighlightTabRow", fallbackValues));

package/dist/src/components/molecules/highlight-tab-row/HighlightTabRow.stories.d.ts

@@ -0,0 +1,7 @@
+export function highlightTabRow(): JSX.Element;
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/highlight-tab-row/HighlightTabRow.stories.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { text, boolean, object } from "@storybook/addon-knobs";
+import HighlightTabRow from "./HighlightTabRow";
+import page from "../../../../.storybook/page";
+var groupId = "props";
+export var highlightTabRow = function () { return (React.createElement(HighlightTabRow, { tabs: object("tabs", [
+        "Payment Amount",
+        "Payment Method",
+        "Customer Information",
+        "Payment Confirmation"
+    ], groupId), highlightIndex: text("highlightIndex", "0", groupId), isMobile: boolean("isMobile", false, groupId) })); };
+var story = page({
+    title: "Components|Molecules/HighlightTabRow",
+    Component: HighlightTabRow,
+    containerMax: "80rem"
+});
+export default story;

package/dist/src/components/molecules/highlight-tab-row/HighlightTabRow.theme.d.ts

@@ -0,0 +1,7 @@
+export namespace fallbackValues {
+    export { textColor };
+    export { backgroundColor };
+}
+declare const textColor: "#ffffff";
+declare const backgroundColor: "#182848";
+export {};

package/dist/src/components/molecules/highlight-tab-row/HighlightTabRow.theme.js

@@ -0,0 +1,6 @@
+var textColor = "#ffffff";
+var backgroundColor = "#182848";
+export var fallbackValues = {
+    textColor: textColor,
+    backgroundColor: backgroundColor
+};

package/dist/src/components/molecules/highlight-tab-row/index.d.ts

@@ -0,0 +1,2 @@
+export default HighlightTabRow;
+import HighlightTabRow from "./HighlightTabRow";

package/dist/src/components/molecules/highlight-tab-row/index.js

@@ -0,0 +1,2 @@
+import HighlightTabRow from "./HighlightTabRow";
+export default HighlightTabRow;

package/dist/src/components/molecules/index.d.ts

@@ -0,0 +1,36 @@
+export { default as AddressForm } from "./address-form";
+export { default as ChangePasswordForm } from "./change-password-form";
+export { default as CollapsibleSection } from "./collapsible-section";
+export { default as EditNameForm } from "./edit-name-form";
+export { default as EditableList } from "./editable-list";
+export * from "./editable-table";
+export * from "./nav-menu";
+export * from "./partial-amount-form";
+export { default as EmailForm } from "./email-form";
+export { default as ForgotPasswordForm } from "./forgot-password-form";
+export { default as HighlightTabRow } from "./highlight-tab-row";
+export { iconsMap as ObligationIcons } from "./obligation/icons";
+export { default as InternalUserInfoForm } from "./internal-user-info-form";
+export { default as LoginForm } from "./login-form";
+export { default as Modal } from "./modal";
+export { default as Module } from "./module";
+export { default as Obligation } from "./obligation";
+export { default as Pagination } from "./pagination";
+export { default as PaymentButtonBar } from "./payment-button-bar";
+export { default as PaymentDetails } from "./payment-details";
+export { default as PaymentFormACH } from "./payment-form-ach";
+export { default as PaymentFormCard } from "./payment-form-card";
+export { default as PhoneForm } from "./phone-form";
+export { default as RadioSection } from "./radio-section";
+export { default as RegistrationForm } from "./registration-form";
+export { default as ResetConfirmationForm } from "./reset-confirmation-form";
+export { default as ResetPasswordForm } from "./reset-password-form";
+export { default as ResetPasswordSuccess } from "./reset-password-success";
+export { default as Tabs } from "./tabs";
+export { default as TabSidebar } from "./tab-sidebar";
+export { default as TermsAndConditions } from "./terms-and-conditions";
+export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
+export { default as Timeout } from "./timeout";
+export { default as WelcomeModule } from "./welcome-module";
+export { default as WorkflowTile } from "./workflow-tile";
+export { default as PeriscopeDashboardIframe } from "./periscope-dashboard-iframe";

package/dist/src/components/molecules/index.js

@@ -0,0 +1,36 @@
+export { default as AddressForm } from "./address-form";
+export { default as ChangePasswordForm } from "./change-password-form";
+export { default as CollapsibleSection } from "./collapsible-section";
+export { default as EditNameForm } from "./edit-name-form";
+export { default as EditableList } from "./editable-list";
+export * from "./editable-table";
+export { default as EmailForm } from "./email-form";
+export { default as ForgotPasswordForm } from "./forgot-password-form";
+export { default as HighlightTabRow } from "./highlight-tab-row";
+export { iconsMap as ObligationIcons } from "./obligation/icons";
+export { default as InternalUserInfoForm } from "./internal-user-info-form";
+export { default as LoginForm } from "./login-form";
+export { default as Modal } from "./modal";
+export { default as Module } from "./module";
+export * from "./nav-menu";
+export { default as Obligation } from "./obligation";
+export * from "./partial-amount-form";
+export { default as Pagination } from "./pagination";
+export { default as PaymentButtonBar } from "./payment-button-bar";
+export { default as PaymentDetails } from "./payment-details";
+export { default as PaymentFormACH } from "./payment-form-ach";
+export { default as PaymentFormCard } from "./payment-form-card";
+export { default as PhoneForm } from "./phone-form";
+export { default as RadioSection } from "./radio-section";
+export { default as RegistrationForm } from "./registration-form";
+export { default as ResetConfirmationForm } from "./reset-confirmation-form";
+export { default as ResetPasswordForm } from "./reset-password-form";
+export { default as ResetPasswordSuccess } from "./reset-password-success";
+export { default as Tabs } from "./tabs";
+export { default as TabSidebar } from "./tab-sidebar";
+export { default as TermsAndConditions } from "./terms-and-conditions";
+export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
+export { default as Timeout } from "./timeout";
+export { default as WelcomeModule } from "./welcome-module";
+export { default as WorkflowTile } from "./workflow-tile";
+export { default as PeriscopeDashboardIframe } from "./periscope-dashboard-iframe";

package/dist/src/components/molecules/internal-user-info-form/InternalUserInfoForm.d.ts

@@ -0,0 +1,25 @@
+export default InternalUserInfoForm;
+declare function InternalUserInfoForm({ variant, fields, actions, clearOnDismount, showErrors, handleSubmit, closeForm, allAgencyOptions, selectedAgencies, allSelected, toggleSelectAllAgencies, selectAgency, roleOptions, clientOptions, namesDisabled, emailDisabled, roleDisabled, selectionDisabled, formType, openChangePasswordForm, firstName, lastName }: {
+    variant?: string | undefined;
+    fields: any;
+    actions: any;
+    clearOnDismount: any;
+    showErrors: any;
+    handleSubmit?: (() => void) | undefined;
+    closeForm: any;
+    allAgencyOptions: any;
+    selectedAgencies: any;
+    allSelected: any;
+    toggleSelectAllAgencies?: (() => void) | undefined;
+    selectAgency: any;
+    roleOptions: any;
+    clientOptions: any;
+    namesDisabled: any;
+    emailDisabled: any;
+    roleDisabled: any;
+    selectionDisabled: any;
+    formType: any;
+    openChangePasswordForm: any;
+    firstName: any;
+    lastName: any;
+}): JSX.Element;

package/dist/src/components/molecules/internal-user-info-form/InternalUserInfoForm.js

@@ -0,0 +1,108 @@
+var _a;
+import React, { useEffect } from "react";
+import { required, isProbablyEmail } from "redux-freeform";
+import { Stack, Box, Cluster } from "../../atoms/layouts";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Heading from "../../atoms/heading";
+import Text from "../../atoms/text";
+import { noop } from "../../../util/general";
+import { FormInput, FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import FormSelect from "../../atoms/form-select";
+import SearchableSelect from "../../atoms/searchable-select";
+import { GHOST_GREY } from "../../../constants/colors";
+var RESEARCHER = "RESEARCHER";
+var AGENCY_ADMIN = "AGENCY_ADMIN";
+var CLIENT_ADMIN = "CLIENT_ADMIN";
+var SUPERVISOR = "SUPERVISOR";
+var CB_ADMIN = "CITYBASE_ADMIN";
+var CREATE_CLIENT_ADMIN = "CREATE_CLIENT_ADMIN";
+var PROFILE = "PROFILE";
+var ADD = "ADD";
+var EDIT = "EDIT";
+var roleDescriptions = (_a = {},
+    _a[RESEARCHER] = "Researcher",
+    _a[AGENCY_ADMIN] = "Agency admin",
+    _a[CLIENT_ADMIN] = "Client admin",
+    _a[SUPERVISOR] = "Supervisor",
+    _a[CB_ADMIN] = "Citybase admin",
+    _a);
+var InternalUserInfoForm = function (_a) {
+    var _b, _c, _d, _e, _f;
+    var _g = _a.variant, variant = _g === void 0 ? "default" : _g, fields = _a.fields, actions = _a.actions, clearOnDismount = _a.clearOnDismount, showErrors = _a.showErrors, _h = _a.handleSubmit, handleSubmit = _h === void 0 ? noop : _h, closeForm = _a.closeForm, allAgencyOptions = _a.allAgencyOptions, selectedAgencies = _a.selectedAgencies, allSelected = _a.allSelected, _j = _a.toggleSelectAllAgencies, toggleSelectAllAgencies = _j === void 0 ? noop : _j, selectAgency = _a.selectAgency, roleOptions = _a.roleOptions, clientOptions = _a.clientOptions, namesDisabled = _a.namesDisabled, emailDisabled = _a.emailDisabled, roleDisabled = _a.roleDisabled, selectionDisabled = _a.selectionDisabled, formType = _a.formType, openChangePasswordForm = _a.openChangePasswordForm, firstName = _a.firstName, lastName = _a.lastName;
+    useEffect(function () {
+        if (formType === CREATE_CLIENT_ADMIN) {
+            actions.fields.client.addValidator(required());
+        }
+        if (formType !== PROFILE) {
+            actions.fields.email.addValidator(required());
+            actions.fields.role.addValidator(required());
+        }
+    }, []);
+    if (clearOnDismount) {
+        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
+    }
+    var clientErrorMessages = (_b = {},
+        _b[required.error] = "Client is required",
+        _b);
+    var firstNameErrorMessages = (_c = {},
+        _c[required.error] = "First name is required",
+        _c);
+    var lastNameErrorMessages = (_d = {},
+        _d[required.error] = "Last name is required",
+        _d);
+    var emailErrorMessages = (_e = {},
+        _e[isProbablyEmail.error] = "Invalid email address",
+        _e);
+    var roleErrorMessages = (_f = {},
+        _f[required.error] = "Role is required",
+        _f);
+    return (React.createElement(FormContainer, { variant: variant, role: "form", "aria-label": "user-info-form", extraStyles: "padding: 0;" },
+        formType === PROFILE && (React.createElement(Box, { padding: "1.5rem" },
+            React.createElement(Cluster, { justify: "flex-start", align: "center" },
+                React.createElement(Box, { padding: "1.25rem", borderRadius: "50%", background: "#CACED8" },
+                    React.createElement(Heading, { variant: "h4", weight: "700" },
+                        firstName.charAt(0).toUpperCase(),
+                        lastName.charAt(0).toUpperCase())),
+                React.createElement(Text, { variant: "p", weight: "700", extraStyles: "padding-left: 1rem;" },
+                    firstName,
+                    " ",
+                    lastName)))),
+        formType === CREATE_CLIENT_ADMIN && (React.createElement(Box, { padding: "1.5rem 1.5rem 0.5rem", borderColor: GHOST_GREY, borderSize: "1px", borderWidthOverride: "0 0 1px 0" },
+            React.createElement(FormInputColumn, null,
+                React.createElement(Heading, { variant: "h6", weight: "700", margin: "0 0 1rem" }, "Select Client"),
+                React.createElement(FormSelect, { labelTextWhenNoError: "Client", errorMessages: clientErrorMessages, options: clientOptions.map(function (client) { return ({
+                        text: client,
+                        value: client,
+                        id: client
+                    }); }), field: fields.client, fieldActions: actions.fields.client, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); } })))),
+        React.createElement(Box, { padding: formType === PROFILE ? "1.5rem 1.5rem 0" : "1.5rem 1.5rem 0.5rem", borderColor: GHOST_GREY, borderSize: "1px", borderWidthOverride: formType === PROFILE ? "1px 0 0" : "0 0 1px 0" },
+            React.createElement(FormInputColumn, null,
+                React.createElement(Heading, { variant: "h6", weight: "700", margin: "0 0 1rem" }, "Personal Information"),
+                React.createElement(FormInput, { labelTextWhenNoError: "First Name", errorMessages: firstNameErrorMessages, field: fields.firstName, fieldActions: actions.fields.firstName, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, disabled: namesDisabled, autocomplete: "given-name" }),
+                React.createElement(FormInput, { labelTextWhenNoError: "Last Name", errorMessages: lastNameErrorMessages, field: fields.lastName, fieldActions: actions.fields.lastName, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, disabled: namesDisabled, autocomplete: "family-name" }),
+                React.createElement(FormInput, { labelTextWhenNoError: "Email", errorMessages: emailErrorMessages, field: fields.email, fieldActions: actions.fields.email, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, disabled: emailDisabled, autocomplete: "email" }),
+                formType === PROFILE && (React.createElement(FormInput, { labelTextWhenNoError: "Password", errorMessages: {}, field: { rawValue: "•••••••••••••" }, disabled: true, decorator: React.createElement(Text, { variant: "pS", color: "#15749D", onClick: openChangePasswordForm, extraStyles: "cursor: pointer;" }, "Change Password") })))),
+        React.createElement(Box, { padding: "1.5rem" },
+            formType !== PROFILE && (React.createElement(Box, { padding: "0 0 0.5rem" },
+                React.createElement(FormInputColumn, null,
+                    React.createElement(Heading, { variant: "h6", weight: "700", margin: "0 0 1rem" }, "User Settings"),
+                    React.createElement(FormSelect, { labelTextWhenNoError: "User Role", errorMessages: roleErrorMessages, options: roleOptions.map(function (role) { return ({
+                            text: roleDescriptions[role],
+                            value: role,
+                            id: role
+                        }); }), field: fields.role, fieldActions: actions.fields.role, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, disabled: roleDisabled })))),
+            (formType === ADD || formType === EDIT) && (React.createElement(Box, { padding: "0.5rem 0 1.5rem" },
+                React.createElement(FormInputColumn, null,
+                    React.createElement(Text, { variant: "p" }, "Select which agencies the user can view"),
+                    React.createElement(SearchableSelect, { actions: actions, fields: fields, items: allAgencyOptions, selectedItems: selectedAgencies, allSelected: allSelected, toggleSelectAllItems: toggleSelectAllAgencies, selectItem: selectAgency, disabled: selectionDisabled })))),
+            React.createElement(Box, { padding: "0" },
+                React.createElement(Stack, { childGap: "1rem", direction: "row", justify: "flex-end" },
+                    React.createElement(ButtonWithAction, { text: "Cancel", action: function () {
+                            if (formType !== CREATE_CLIENT_ADMIN) {
+                                toggleSelectAllAgencies(false);
+                            }
+                            closeForm();
+                        }, variant: "secondary", dataQa: "Cancel", extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;" }),
+                    React.createElement(ButtonWithAction, { text: "Save", action: handleSubmit, variant: "primary", dataQa: "Save", extraStyles: "margin: 0rem; padding: 0.75rem 1.5rem; border-radius: 4px;" }))))));
+};
+export default InternalUserInfoForm;

package/dist/src/components/molecules/internal-user-info-form/InternalUserInfoForm.state.d.ts

@@ -0,0 +1,3 @@
+export const reducer: any;
+export const mapStateToProps: any;
+export const mapDispatchToProps: any;

package/dist/src/components/molecules/internal-user-info-form/InternalUserInfoForm.state.js

@@ -0,0 +1,23 @@
+var _a;
+import { createFormState, required, isProbablyEmail } from "redux-freeform";
+var formConfig = {
+    client: {
+        validators: []
+    },
+    firstName: {
+        validators: [required()]
+    },
+    lastName: {
+        validators: [required()]
+    },
+    email: {
+        validators: [isProbablyEmail()]
+    },
+    role: {
+        validators: []
+    },
+    searchTerm: {
+        validators: []
+    }
+};
+export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

package/dist/src/components/molecules/internal-user-info-form/index.d.ts

@@ -0,0 +1,2 @@
+export default InternalUserInfoForm;
+import InternalUserInfoForm from "./InternalUserInfoForm";

package/{src → dist/src}/components/molecules/internal-user-info-form/index.js

@@ -1,10 +1,5 @@
 import InternalUserInfoForm from "./InternalUserInfoForm";
-import {
-  reducer,
-  mapStateToProps,
-  mapDispatchToProps
-} from "./InternalUserInfoForm.state";
-
+import { reducer, mapStateToProps, mapDispatchToProps } from "./InternalUserInfoForm.state";
 InternalUserInfoForm.reducer = reducer;
 InternalUserInfoForm.mapStateToProps = mapStateToProps;
 InternalUserInfoForm.mapDispatchToProps = mapDispatchToProps;

package/dist/src/components/molecules/login-form/LoginForm.d.ts

@@ -0,0 +1,8 @@
+export default LoginForm;
+declare function LoginForm({ clearOnDismount, fields, actions, showErrors, handleSubmit }: {
+    clearOnDismount: any;
+    fields: any;
+    actions: any;
+    showErrors: any;
+    handleSubmit?: (() => void) | undefined;
+}): JSX.Element;

package/dist/src/components/molecules/login-form/LoginForm.js

@@ -0,0 +1,22 @@
+import React, { useEffect } from "react";
+import { required, isProbablyEmail } from "redux-freeform";
+import { FormInput, FormInputColumn } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
+var LoginForm = function (_a) {
+    var _b, _c;
+    var clearOnDismount = _a.clearOnDismount, fields = _a.fields, actions = _a.actions, showErrors = _a.showErrors, _d = _a.handleSubmit, handleSubmit = _d === void 0 ? noop : _d;
+    if (clearOnDismount) {
+        useEffect(function () { return function () { return actions.form.clear(); }; }, []);
+    }
+    var emailErrorMessages = (_b = {},
+        _b[required.error] = "Email address is required",
+        _b[isProbablyEmail.error] = "Invalid email address",
+        _b);
+    var passwordErrorMessages = (_c = {},
+        _c[required.error] = "Password is required",
+        _c);
+    return (React.createElement(FormInputColumn, { role: "form", "aria-label": "Login" },
+        React.createElement(FormInput, { labelTextWhenNoError: "Email address", errorMessages: emailErrorMessages, type: "email", field: fields.email, fieldActions: actions.fields.email, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, isEmail: true, autocomplete: "email" }),
+        React.createElement(FormInput, { labelTextWhenNoError: "Password", errorMessages: passwordErrorMessages, type: "password", field: fields.password, fieldActions: actions.fields.password, showErrors: showErrors, onKeyDown: function (e) { return e.key === "Enter" && handleSubmit(e); }, autocomplete: "current-password" })));
+};
+export default LoginForm;

package/dist/src/components/molecules/login-form/LoginForm.state.d.ts

@@ -0,0 +1,3 @@
+export const reducer: any;
+export const mapStateToProps: any;
+export const mapDispatchToProps: any;

package/dist/src/components/molecules/login-form/LoginForm.state.js

@@ -0,0 +1,11 @@
+var _a;
+import { createFormState, required, isProbablyEmail } from "redux-freeform";
+var formConfig = {
+    email: {
+        validators: [required(), isProbablyEmail()]
+    },
+    password: {
+        validators: [required()]
+    }
+};
+export var reducer = (_a = createFormState(formConfig), _a.reducer), mapStateToProps = _a.mapStateToProps, mapDispatchToProps = _a.mapDispatchToProps;

package/dist/src/components/molecules/login-form/LoginForm.stories.d.ts

@@ -0,0 +1,7 @@
+export default story;
+export function loginForm(): JSX.Element;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/login-form/LoginForm.stories.js

@@ -0,0 +1,16 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+import LoginForm from "./LoginForm";
+import page from "../../../../.storybook/page";
+import * as LoginFormState from "./LoginForm.state";
+var story = page({
+    title: "Components|Molecules/LoginForm",
+    Component: LoginForm,
+    reducer: LoginFormState.reducer,
+    mapStateToProps: LoginFormState.mapStateToProps,
+    mapDispatchToProps: LoginFormState.mapDispatchToProps
+});
+export default story;
+var ConnectedForm = connect(LoginFormState.mapStateToProps, LoginFormState.mapDispatchToProps)(LoginForm);
+export var loginForm = function () { return (React.createElement(ConnectedForm, { showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/molecules/login-form/index.d.ts

@@ -0,0 +1,2 @@
+export default LoginForm;
+import LoginForm from "./LoginForm";

package/dist/src/components/molecules/login-form/index.js

@@ -0,0 +1,6 @@
+import LoginForm from "./LoginForm";
+import { reducer, mapStateToProps, mapDispatchToProps } from "./LoginForm.state";
+LoginForm.reducer = reducer;
+LoginForm.mapStateToProps = mapStateToProps;
+LoginForm.mapDispatchToProps = mapDispatchToProps;
+export default LoginForm;

package/dist/src/components/molecules/modal/Modal.d.ts

@@ -0,0 +1,27 @@
+export default Modal;
+declare function Modal({ hideModal, onExit, continueAction, isContinueActionDisabled, cancelAction, modalOpen, modalHeaderText, modalBodyText, cancelButtonText, continueButtonText, closeButtonText, modalHeaderBg, modalBodyBg, useDangerButton, defaultWrapper, onlyCloseButton, noButtons, maxHeight, underlayClickExits, noBorder, customWidth, isLoading, buttonExtraStyles, children }: {
+    hideModal: any;
+    onExit?: any;
+    continueAction: any;
+    isContinueActionDisabled?: boolean | undefined;
+    cancelAction: any;
+    modalOpen: any;
+    modalHeaderText: any;
+    modalBodyText: any;
+    cancelButtonText?: string | undefined;
+    continueButtonText?: string | undefined;
+    closeButtonText?: string | undefined;
+    modalHeaderBg?: string | undefined;
+    modalBodyBg?: string | undefined;
+    useDangerButton?: boolean | undefined;
+    defaultWrapper?: boolean | undefined;
+    onlyCloseButton?: boolean | undefined;
+    noButtons?: boolean | undefined;
+    maxHeight: any;
+    underlayClickExits?: boolean | undefined;
+    noBorder: any;
+    customWidth: any;
+    isLoading: any;
+    buttonExtraStyles: any;
+    children: any;
+}): JSX.Element;

package/dist/src/components/molecules/modal/Modal.js

@@ -0,0 +1,51 @@
+import React, { Fragment, useContext } from "react";
+import { ThemeContext } from "styled-components";
+import AriaModal from "react-aria-modal";
+import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import Paragraph from "../../atoms/paragraph";
+import Heading from "../../atoms/heading";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { Box, Stack, Cluster } from "../../atoms/layouts";
+/*
+Default Modal molecule
+Uses react-aria-modal behind the scenes for a11y purposes
+Styling accomplished with our atoms / layout primitives
+
+Cancel button will (for now) always use hideModal as its action
+Continue button takes an action, if you want to navigate to
+a different route (as with a link) connect() and use "push" from @thecb/connected-react-router
+*/
+var getApplicationNode = function () { return document.getElementById("root"); };
+var Modal = function (_a) {
+    var hideModal = _a.hideModal, _b = _a.onExit, onExit = _b === void 0 ? hideModal : _b, continueAction = _a.continueAction, _c = _a.isContinueActionDisabled, isContinueActionDisabled = _c === void 0 ? false : _c, cancelAction = _a.cancelAction, modalOpen = _a.modalOpen, modalHeaderText = _a.modalHeaderText, modalBodyText = _a.modalBodyText, _d = _a.cancelButtonText, cancelButtonText = _d === void 0 ? "Cancel" : _d, _e = _a.continueButtonText, continueButtonText = _e === void 0 ? "Continue" : _e, _f = _a.closeButtonText, closeButtonText = _f === void 0 ? "Close" : _f, _g = _a.modalHeaderBg, modalHeaderBg = _g === void 0 ? WHITE : _g, _h = _a.modalBodyBg, modalBodyBg = _h === void 0 ? ATHENS_GREY : _h, _j = _a.useDangerButton, useDangerButton = _j === void 0 ? false : _j, _k = _a.defaultWrapper, defaultWrapper = _k === void 0 ? true : _k, _l = _a.onlyCloseButton, onlyCloseButton = _l === void 0 ? false : _l, _m = _a.noButtons, noButtons = _m === void 0 ? false : _m, // for instances where modal is closed automatically
+    maxHeight = _a.maxHeight, _o = _a.underlayClickExits, underlayClickExits = _o === void 0 ? true : _o, noBorder = _a.noBorder, customWidth = _a.customWidth, isLoading = _a.isLoading, buttonExtraStyles = _a.buttonExtraStyles, children = _a.children;
+    var isMobile = useContext(ThemeContext).isMobile;
+    return (React.createElement(Fragment, null,
+        modalOpen && (React.createElement(AriaModal, { onExit: onExit, getApplicationNode: getApplicationNode, titleText: modalHeaderText, underlayStyle: {
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center"
+            }, dialogStyle: {
+                width: customWidth || "615px"
+            }, underlayClickExits: underlayClickExits },
+            React.createElement(Box, { padding: "0", borderRadius: "2px", boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)" },
+                React.createElement(Box, { background: modalHeaderBg, padding: "1.5rem" },
+                    React.createElement(Cluster, { justify: "flex-start", align: "center" },
+                        React.createElement(Heading, { variant: "h6", weight: FONT_WEIGHT_SEMIBOLD }, modalHeaderText))),
+                React.createElement(Box, { background: modalBodyBg, padding: "1.5rem" },
+                    React.createElement(Stack, { childGap: "1.5rem" },
+                        React.createElement(Box, { borderWidthOverride: noBorder && "0 0 2px 0", borderColor: !noBorder && SILVER_GREY, padding: !noBorder && "0 0 1.5rem 0", extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : "" }, defaultWrapper ? (React.createElement(Paragraph, { variant: "p" }, modalBodyText)) : (React.createElement(Box, { padding: maxHeight ? "0 0 1rem 0" : "0" }, modalBodyText))),
+                        React.createElement(Box, { padding: "0" },
+                            React.createElement(Stack, { direction: "row", justify: "flex-end", align: "center", childGap: "0rem" }, !noButtons && (React.createElement(React.Fragment, null, !onlyCloseButton ? (React.createElement(Fragment, null, isMobile ? (React.createElement(Stack, { childGap: "1rem", direction: "row" },
+                                React.createElement(Box, { width: "100%", padding: "0" },
+                                    React.createElement(ButtonWithAction, { variant: "secondary", action: cancelAction ? cancelAction : hideModal, text: cancelButtonText, dataQa: cancelButtonText, extraStyles: buttonExtraStyles, className: "modal-cancel-button" })),
+                                React.createElement(Box, { width: "100%", padding: "0" },
+                                    React.createElement(ButtonWithAction, { variant: useDangerButton ? "danger" : "primary", action: continueAction, text: continueButtonText, dataQa: continueButtonText, isLoading: isLoading, disabled: isContinueActionDisabled, extraStyles: buttonExtraStyles, className: "modal-continue-button" })))) : (React.createElement(Stack, { childGap: "1rem", direction: "row", justify: "flex-end" },
+                                React.createElement(ButtonWithAction, { variant: "secondary", action: cancelAction ? cancelAction : hideModal, text: cancelButtonText, dataQa: cancelButtonText, extraStyles: buttonExtraStyles, className: "modal-cancel-button" }),
+                                React.createElement(ButtonWithAction, { variant: useDangerButton ? "danger" : "primary", action: continueAction, text: continueButtonText, dataQa: continueButtonText, isLoading: isLoading, disabled: isContinueActionDisabled, extraStyles: buttonExtraStyles, className: "modal-continue-button" }))))) : (React.createElement(Box, { padding: "0.5rem" },
+                                React.createElement(ButtonWithAction, { action: hideModal, variant: "primary", text: closeButtonText, dataQa: closeButtonText, extraStyles: buttonExtraStyles, className: "modal-close-button" })))))))))))),
+        children));
+};
+export default Modal;

package/dist/src/components/molecules/modal/Modal.stories.d.ts

@@ -0,0 +1,15 @@
+export function modal(): JSX.Element;
+export namespace modal {
+    const storyName: string;
+}
+export function modalWithoutButtons(): JSX.Element;
+export namespace modalWithoutButtons {
+    const storyName_1: string;
+    export { storyName_1 as storyName };
+}
+export default story;
+declare const story: {
+    title: any;
+    component: any;
+    decorators: ((storyFn: any) => JSX.Element)[];
+};

package/dist/src/components/molecules/modal/Modal.stories.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+import Modal from "./Modal";
+import page from "../../../../.storybook/page";
+import Text from "../../atoms/text";
+import { noop } from "../../../util/general";
+import Spinner from "../../atoms/spinner/Spinner";
+import { Center } from "../../atoms/layouts";
+var groupId = "props";
+export var modal = function () { return (React.createElement(Modal, { ModalLink: function () { return (React.createElement(Text, { onClick: noop, color: "#347BB2", fontSize: "18px", lineHeight: "2rem", extraStyles: "cursor: pointer;" }, "Modal Link")); }, hideModal: noop, continueAction: noop, modalOpen: boolean("modalOpen", true, groupId), modalHeaderText: text("modalHeaderText", "Modal Header Text", groupId), modalBodyText: text("modalBodyText", "Modal Body Text", groupId), cancelButtonText: text("cancelButtonText", "Cancel", groupId), continueButtonText: text("continueButtonText", "Continue", groupId), modalHeaderBg: text("modalHeaderBg", "white", groupId), modalBodyBg: text("modalBodyBg", "#F6F6F9", groupId), useDangerButton: boolean("useDangerButton", false, groupId), defaultWrapper: boolean("defaultWrapper", true, groupId), onlyCloseButton: boolean("onlyCloseButton", false, groupId), maxHeight: text("maxHeight", null, groupId) })); };
+modal.storyName = "Standard Modal";
+export var modalWithoutButtons = function () {
+    var _a = useState(true), isModalOpen = _a[0], setIsModalOpen = _a[1];
+    useEffect(function () {
+        setTimeout(function () {
+            // some async action or timer closes the modal instead
+            setIsModalOpen(false);
+        }, 3000);
+    }, []);
+    return (React.createElement(Modal, { ModalLink: function () { return (React.createElement(Text, { tabIndex: 0, onClick: noop, color: "#347BB2", fontSize: "18px", lineHeight: "2rem", extraStyles: "cursor: pointer;" }, "Modal Link")); }, hideModal: noop, continueAction: noop, modalOpen: isModalOpen, modalHeaderText: text("modalHeaderText", "Modal Without Buttons", groupId), modalBodyText: React.createElement(Center, { tabIndex: 0 },
+            React.createElement(Spinner, { size: "100" })), modalHeaderBg: text("modalHeaderBg", "white", groupId), modalBodyBg: text("modalBodyBg", "#F6F6F9", groupId), defaultWrapper: boolean("defaultWrapper", true, groupId), noButtons: boolean("noButtons", true, groupId), maxHeight: text("maxHeight", null, groupId) }));
+};
+modalWithoutButtons.storyName = "Modal Without Buttons";
+var story = page({
+    title: "Components|Molecules/Modal",
+    Component: Modal
+});
+export default story;

package/dist/src/components/molecules/modal/index.d.ts

@@ -0,0 +1,2 @@
+export default Modal;
+import Modal from "./Modal";

package/dist/src/components/molecules/modal/index.js

@@ -0,0 +1,2 @@
+import Modal from "./Modal";
+export default Modal;