@thecb/components 7.5.2 → 7.6.1-beta.0

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -5,8 +5,10 @@ import Text from "../../../atoms/text";
 import { AutopayOnIcon } from "../../../atoms/icons";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { SEA_GREEN } from "../../../../constants/colors";
+import { ACH_METHOD, CC_METHOD } from "../../../../constants/general";
 import { fallbackValues } from "./AutopayModalModule.theme";
 import { themeComponent } from "../../../../util/themeUtils";
+import { titleCaseString } from "../../../../util/general";
 
 const AutopayModal = ({
   autoPayActive,
@@ -22,27 +24,41 @@ const AutopayModal = ({
   isPaymentPlan,
   nextAutopayDate,
   dueDate,
-  inactive
+  inactive,
+  description,
+  subDescription,
+  allowedPaymentInstruments
 }) => {
-  const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
+  const generateMethodNeededText = (planText, allowedPaymentInstruments) => {
+    const allowsCard = allowedPaymentInstruments.includes(CC_METHOD);
+    const allowsACH = allowedPaymentInstruments.includes(ACH_METHOD);
+    const methodRequired =
+      allowsCard && !allowsACH
+        ? "debit or credit card payment method"
+        : !allowsCard && allowsACH
+        ? "checking account payment method"
+        : "payment method";
+
+    return `To setup ${planText} you must have a saved ${methodRequired} and address in your profile. Do you want to save these now?`;
+  };
+  const plan = isPaymentPlan ? "your payment plan" : "autopay";
+  const shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
+  const deactivateText = `deactivate ${shortPlan} for ${description}: ${subDescription}`;
+  const activateText = `Set Up ${shortPlan} for ${description}: ${subDescription}`;
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
     modalHeaderText: autoPayActive
-      ? `Deactivate ${planType}`
-      : `Set Up ${planType}`,
+      ? titleCaseString(deactivateText)
+      : titleCaseString(activateText),
     modalBodyText: autoPayActive
-      ? `Are you sure you want to deactivate ${
-          isPaymentPlan ? "your payment plan" : "autopay"
-        }? ${
+      ? `Are you sure you want to deactivate ${plan}? ${
           !inactive && nextDate
             ? `Your next payment will be due on ${nextDate}.`
             : ""
         }`
-      : `To set up ${
-          isPaymentPlan ? "a payment plan" : "autopay"
-        } you must save a payment method and address in your profile. Do you want to save these now?`,
+      : generateMethodNeededText(plan, allowedPaymentInstruments),
     continueButtonText: autoPayActive
-      ? `Disable ${planType}`
+      ? `Disable ${shortPlan}`
       : "Add to Profile",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
@@ -74,7 +90,9 @@ const AutopayModal = ({
       case "secondary": {
         return (
           <ButtonWithAction
-            text={autoPayActive ? `Turn off ${planType}` : `Set Up ${planType}`}
+            text={
+              autoPayActive ? `Turn off ${shortPlan}` : `Set Up ${shortPlan}`
+            }
             variant="secondary"
             action={() => {
               toggleModal(true);
@@ -91,7 +109,7 @@ const AutopayModal = ({
       case "tertiary": {
         return (
           <ButtonWithAction
-            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+            text={autoPayActive ? `Manage ${shortPlan}` : `Set Up ${shortPlan}`}
             variant="tertiary"
             action={() => {
               toggleModal(true);
@@ -124,13 +142,13 @@ const AutopayModal = ({
                   e.key === "Enter" && toggleModal(true);
                 }}
                 tabIndex="0"
-                dataQa={`${planType} On`}
+                dataQa={`${shortPlan} On`}
                 color={SEA_GREEN}
                 weight={themeValues.fontWeight}
                 hoverStyles={themeValues.modalLinkHoverFocus}
                 extraStyles={`padding-left: 0.25rem;`}
               >
-                {`${planType} ${nextAutopayDate}`}
+                {`${shortPlan} ${nextAutopayDate}`}
               </Text>
             </Cluster>
           </Box>

package/src/components/molecules/obligation/modules/InactiveControlsModule.js

@@ -18,7 +18,10 @@ const InactiveControlsModule = ({
   dueDate,
   agencyName,
   configType,
-  actions
+  actions,
+  description,
+  subDescription,
+  allowedPaymentInstruments
 }) => {
   const [modalOpen, toggleModal] = useState(false);
   const { deleteObligationAssoc } = actions;
@@ -52,6 +55,9 @@ const InactiveControlsModule = ({
               dueDate={dueDate}
               controlType="secondary"
               inactive
+              description={description}
+              subDescription={subDescription}
+              allowedPaymentInstruments={allowedPaymentInstruments}
             />
           </Box>
         )}

package/src/components/molecules/obligation/modules/PaymentDetailsActions.js

@@ -20,7 +20,10 @@ const PaymentDetailsActions = ({
   isPaymentPlan,
   nextAutopayDate,
   obligationAssocID,
-  dueDate
+  dueDate,
+  description,
+  subDescription,
+  allowedPaymentInstruments
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -73,6 +76,9 @@ const PaymentDetailsActions = ({
               paymentPlanSchedule={paymentPlanSchedule}
               isPaymentPlan={isPaymentPlan}
               nextAutopayDate={nextAutopayDate}
+              description={description}
+              subDescription={subDescription}
+              allowedPaymentInstruments={allowedPaymentInstruments}
             />
           </Cluster>
         </Box>
@@ -128,6 +134,9 @@ const PaymentDetailsActions = ({
                 isPaymentPlan={isPaymentPlan}
                 nextAutopayDate={nextAutopayDate}
                 dueDate={dueDate}
+                description={description}
+                subDescription={subDescription}
+                allowedPaymentInstruments={allowedPaymentInstruments}
               />
             )}
           </Box>

package/src/constants/general.js

@@ -0,0 +1,3 @@
+export const ACH_METHOD = "BANK_ACCOUNT";
+export const CC_METHOD = "CREDIT_CARD";
+export const CASH_METHOD = "CASH";

package/src/util/general.js

@@ -144,3 +144,18 @@ export const throttle = (delay, fn) => {
     return fn(...args);
   };
 };
+
+export const titleCaseWord = word => {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+
+export const titleCaseString = string => {
+  return string
+    .split(" ")
+    .map((word, index, string) =>
+      index === 0 || index === string.length - 1 || word.length > 3
+        ? titleCaseWord(word.toLowerCase())
+        : word
+    )
+    .join(" ");
+};

package/dist/.storybook/page.d.ts

@@ -1,13 +0,0 @@
-declare function _default({ title, Component, height, reducer, containerMax, containerMin }: {
-    title: any;
-    Component: any;
-    height: any;
-    reducer?: (() => void) | undefined;
-    containerMax?: string | undefined;
-    containerMin?: string | undefined;
-}): {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};
-export default _default;

package/dist/.storybook/page.js

@@ -1,41 +0,0 @@
-import React from "react";
-import { ThemeProvider } from "styled-components";
-import { select, radios, text } from "@storybook/addon-knobs";
-import { Provider } from 'react-redux';
-import { createStore } from "redux";
-import { BrowserRouter as Router } from "react-router-dom";
-import { createBrowserHistory } from "history";
-import ResizingContainer from "../src/components/atoms/layouts/examples/ResizingContainer";
-import { SFTheme, APCTheme } from "./themes";
-var themesLabel = "Theme";
-var themes = {
-    SF: SFTheme,
-    APC: APCTheme,
-    None: {},
-};
-var defaultValue = SFTheme;
-var groupId = "Theme";
-var animateLabel = "Animate";
-var animateOptions = {
-    play: "play",
-    pause: "pause"
-};
-var animateDefaultValue = "pause";
-var animateGroupID = "Container";
-var themeDecorator = function (storyFn) { return (React.createElement(ThemeProvider, { theme: select(themesLabel, themes, defaultValue, groupId) }, storyFn())); };
-export default (function (_a) {
-    var title = _a.title, Component = _a.Component, height = _a.height, _b = _a.reducer, reducer = _b === void 0 ? function () { } : _b, _c = _a.containerMax, containerMax = _c === void 0 ? "40rem" : _c, _d = _a.containerMin, containerMin = _d === void 0 ? "20rem" : _d;
-    var history = createBrowserHistory();
-    var store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
-    return {
-        title: title,
-        component: Component,
-        decorators: [
-            themeDecorator,
-            function (storyFn) { return (React.createElement(Router, { history: history },
-                React.createElement(Provider, { store: store },
-                    React.createElement("div", { style: { height: "max-content", display: "flex", justifyContent: "center", flexDirection: "column" } },
-                        React.createElement(ResizingContainer, { height: height, animate: radios(animateLabel, animateOptions, animateDefaultValue, animateGroupID), containerMax: text("Container Max", containerMax, animateGroupID), containerMin: text("Container Min", containerMin, animateGroupID) }, storyFn()))))); }
-        ]
-    };
-});

package/dist/.storybook/themes/apc.theme.d.ts

@@ -1,79 +0,0 @@
-export namespace APCTheme {
-    namespace values {
-        namespace Button {
-            namespace active {
-                const primary: string;
-                const secondary: string;
-                const smallPrimary: string;
-                const smallSecondary: string;
-            }
-            namespace backgroundColor {
-                const primary_1: string;
-                export { primary_1 as primary };
-                const secondary_1: string;
-                export { secondary_1 as secondary };
-                const smallPrimary_1: string;
-                export { smallPrimary_1 as smallPrimary };
-                const smallSecondary_1: string;
-                export { smallSecondary_1 as smallSecondary };
-            }
-            namespace border {
-                const primary_2: string;
-                export { primary_2 as primary };
-                const secondary_2: string;
-                export { secondary_2 as secondary };
-                const smallPrimary_2: string;
-                export { smallPrimary_2 as smallPrimary };
-                const smallSecondary_2: string;
-                export { smallSecondary_2 as smallSecondary };
-            }
-            namespace color {
-                const primary_3: string;
-                export { primary_3 as primary };
-                const secondary_3: string;
-                export { secondary_3 as secondary };
-                const smallPrimary_3: string;
-                export { smallPrimary_3 as smallPrimary };
-                const smallSecondary_3: string;
-                export { smallSecondary_3 as smallSecondary };
-            }
-            namespace focus {
-                const primary_4: string;
-                export { primary_4 as primary };
-                const secondary_4: string;
-                export { secondary_4 as secondary };
-                const smallPrimary_4: string;
-                export { smallPrimary_4 as smallPrimary };
-                const smallSecondary_4: string;
-                export { smallSecondary_4 as smallSecondary };
-            }
-            namespace hover {
-                const primary_5: string;
-                export { primary_5 as primary };
-                const secondary_5: string;
-                export { secondary_5 as secondary };
-                const smallPrimary_5: string;
-                export { smallPrimary_5 as smallPrimary };
-                const smallSecondary_5: string;
-                export { smallSecondary_5 as smallSecondary };
-            }
-        }
-        namespace Footer {
-            const backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
-        }
-        namespace Header {
-            const backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
-        }
-        namespace HighlightTabRow {
-            const backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
-        }
-        const linkColor: string;
-        const logo: string;
-        const primaryColor: string;
-        const secondaryColor: string;
-        const textColor: string;
-    }
-}

package/dist/.storybook/themes/apc.theme.js

@@ -1 +0,0 @@
-export var APCTheme = { values: { "Button": { "active": { "primary": "background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100;", "secondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000", "smallPrimary": "background-color: #C8171E; border: 2px solid #C8171E;  box-shadow: 0 0 10px #E30100", "smallSecondary": "background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000" }, "backgroundColor": { "primary": "#EC1C24", "secondary": "#F6F6F9", "smallPrimary": "#EC1C24", "smallSecondary": "#F6F6F9" }, "border": { "primary": "2px solid #EC1C24;", "secondary": "2px solid #EC1C24;", "smallPrimary": "2px solid %#EC1C24;", "smallSecondary": "2px solid #EC1C24;" }, "color": { "primary": "#F6F6F9", "secondary": "#EC1C24", "smallPrimary": "#F6F6F9", "smallSecondary": "#EC1C24" }, "focus": { "primary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "secondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;", "smallPrimary": "outline: none; background-color: #C8171E; border: 2px solid #C8171E; box-shadow: 0 0 10px #E30100", "smallSecondary": "outline: none; background-color: #F58D91; color: #FF0000; box-shadow: 0 0 10px #FF0000;" }, "hover": { "primary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "secondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;", "smallPrimary": "cursor: pointer; background-color: #E30100; border: 2px solid #E30100; box-shadow: 0 0 10px #E30100;", "smallSecondary": "cursor: pointer; background-color: #FBD9D9; box-shadow: 0 0 10px #EC1C24; color: #EC1C24;" } }, "Footer": { "backgroundColor": "#56575B" }, "Header": { "backgroundColor": "#FFFFFF" }, "HighlightTabRow": { "backgroundColor": "#215B9E" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/.storybook/themes/index.d.ts

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/index.js

@@ -1,2 +0,0 @@
-export { SFTheme } from "./sf.theme";
-export { APCTheme } from "./apc.theme";

package/dist/.storybook/themes/sf.theme.d.ts

@@ -1,231 +0,0 @@
-export namespace SFTheme {
-    namespace values {
-        export namespace AmountCallout {
-            const color: string;
-        }
-        export namespace Breadcrumb {
-            const color_1: string;
-            export { color_1 as color };
-        }
-        export namespace Button {
-            export namespace active {
-                const danger: string;
-                const ghost: string;
-                const primary: string;
-                const secondary: string;
-                const smallGhost: string;
-                const smallPrimary: string;
-                const smallSecondary: string;
-            }
-            export namespace backgroundColor {
-                const danger_1: string;
-                export { danger_1 as danger };
-                const ghost_1: string;
-                export { ghost_1 as ghost };
-                const primary_1: string;
-                export { primary_1 as primary };
-                const secondary_1: string;
-                export { secondary_1 as secondary };
-                const smallGhost_1: string;
-                export { smallGhost_1 as smallGhost };
-                const smallPrimary_1: string;
-                export { smallPrimary_1 as smallPrimary };
-                const smallSecondary_1: string;
-                export { smallSecondary_1 as smallSecondary };
-            }
-            export namespace border {
-                const danger_2: string;
-                export { danger_2 as danger };
-                const ghost_2: string;
-                export { ghost_2 as ghost };
-                const primary_2: string;
-                export { primary_2 as primary };
-                const secondary_2: string;
-                export { secondary_2 as secondary };
-                const smallGhost_2: string;
-                export { smallGhost_2 as smallGhost };
-                const smallPrimary_2: string;
-                export { smallPrimary_2 as smallPrimary };
-                const smallSecondary_2: string;
-                export { smallSecondary_2 as smallSecondary };
-            }
-            export namespace color_2 {
-                const danger_3: string;
-                export { danger_3 as danger };
-                const ghost_3: string;
-                export { ghost_3 as ghost };
-                const primary_3: string;
-                export { primary_3 as primary };
-                const secondary_3: string;
-                export { secondary_3 as secondary };
-                const smallGhost_3: string;
-                export { smallGhost_3 as smallGhost };
-                const smallPrimary_3: string;
-                export { smallPrimary_3 as smallPrimary };
-                const smallSecondary_3: string;
-                export { smallSecondary_3 as smallSecondary };
-            }
-            export { color_2 as color };
-            export namespace disabled {
-                const danger_4: string;
-                export { danger_4 as danger };
-                const ghost_4: string;
-                export { ghost_4 as ghost };
-                const primary_4: string;
-                export { primary_4 as primary };
-                const secondary_4: string;
-                export { secondary_4 as secondary };
-                const smallGhost_4: string;
-                export { smallGhost_4 as smallGhost };
-                const smallPrimary_4: string;
-                export { smallPrimary_4 as smallPrimary };
-                const smallSecondary_4: string;
-                export { smallSecondary_4 as smallSecondary };
-            }
-            export namespace focus {
-                const danger_5: string;
-                export { danger_5 as danger };
-                const ghost_5: string;
-                export { ghost_5 as ghost };
-                const primary_5: string;
-                export { primary_5 as primary };
-                const secondary_5: string;
-                export { secondary_5 as secondary };
-                const smallGhost_5: string;
-                export { smallGhost_5 as smallGhost };
-                const smallPrimary_5: string;
-                export { smallPrimary_5 as smallPrimary };
-                const smallSecondary_5: string;
-                export { smallSecondary_5 as smallSecondary };
-            }
-            export namespace hover {
-                const danger_6: string;
-                export { danger_6 as danger };
-                const ghost_6: string;
-                export { ghost_6 as ghost };
-                const primary_6: string;
-                export { primary_6 as primary };
-                const secondary_6: string;
-                export { secondary_6 as secondary };
-                const smallGhost_6: string;
-                export { smallGhost_6 as smallGhost };
-                const smallPrimary_6: string;
-                export { smallPrimary_6 as smallPrimary };
-                const smallSecondary_6: string;
-                export { smallSecondary_6 as smallSecondary };
-            }
-        }
-        export namespace Checkbox {
-            namespace boxShadow {
-                const _default: string;
-                export { _default as default };
-            }
-            namespace checkedStyles {
-                const _default_1: string;
-                export { _default_1 as default };
-            }
-        }
-        export namespace Dropdown {
-            const hoverColor: string;
-            const selectedColor: string;
-        }
-        export namespace Footer {
-            const backgroundColor_1: string;
-            export { backgroundColor_1 as backgroundColor };
-            export const logoHeight: string;
-            export const subfooterColor: string;
-        }
-        export namespace FormInput {
-            namespace hoverFocusStyles {
-                const _default_2: string;
-                export { _default_2 as default };
-            }
-            namespace linkColor {
-                const _default_3: string;
-                export { _default_3 as default };
-            }
-        }
-        export namespace Global {
-            const baseFontSize: string;
-            const baseMobileFontSize: string;
-            const pageBackground: string;
-        }
-        export namespace Header {
-            const backgroundColor_2: string;
-            export { backgroundColor_2 as backgroundColor };
-        }
-        export namespace Icons {
-            namespace accentColor {
-                const error: string;
-                const info: string;
-                const success: string;
-            }
-            namespace primaryColor {
-                const error_1: string;
-                export { error_1 as error };
-                const info_1: string;
-                export { info_1 as info };
-                const success_1: string;
-                export { success_1 as success };
-            }
-            namespace singleIconColor {
-                export const darkMode: string;
-                const primary_7: string;
-                export { primary_7 as primary };
-                const secondary_7: string;
-                export { secondary_7 as secondary };
-            }
-            namespace subIconColor {
-                const error_2: string;
-                export { error_2 as error };
-                const info_2: string;
-                export { info_2 as info };
-                const success_2: string;
-                export { success_2 as success };
-            }
-        }
-        export namespace ModalLink {
-            const linkColor_1: string;
-            export { linkColor_1 as linkColor };
-        }
-        export namespace NavMenu {
-            const backgroundColor_3: string;
-            export { backgroundColor_3 as backgroundColor };
-        }
-        export namespace ProfileTab {
-            const activeTabAccent: string;
-            const activeTabBackground: string;
-            const activeTabHover: string;
-        }
-        export namespace RadioButton {
-            const activeColor: string;
-        }
-        export namespace Spinner {
-            const color_3: string;
-            export { color_3 as color };
-        }
-        export namespace ToggleSwitch {
-            const onBackground: string;
-        }
-        export namespace Workflow {
-            const accentColor_1: string;
-            export { accentColor_1 as accentColor };
-            export const fontFamily: string;
-            const linkColor_2: string;
-            export { linkColor_2 as linkColor };
-            export const primaryButtonColor: string;
-            export const secondaryButtonColor: string;
-            export const textColor: string;
-            export const workflowFooterColor: string;
-            export const workflowHeaderColor: string;
-        }
-        const linkColor_3: string;
-        export { linkColor_3 as linkColor };
-        export const logo: string;
-        const primaryColor_1: string;
-        export { primaryColor_1 as primaryColor };
-        export const secondaryColor: string;
-        const textColor_1: string;
-        export { textColor_1 as textColor };
-    }
-}

package/dist/.storybook/themes/sf.theme.js

@@ -1 +0,0 @@
-export var SFTheme = { values: { "AmountCallout": { "color": "#347BB2" }, "Breadcrumb": { "color": "#347BB2" }, "Button": { "active": { "danger": "background-color: #870000; border: 2px solid #870000; box-shadow: 0 0 10px #ED125F;", "ghost": "background-color: $(transparent)s; color: #001952; box-shadow: none;", "primary": "background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2", "secondary": "background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;", "smallGhost": "background-color: $(transparent)s; color: #001952; box-shadow: none;", "smallPrimary": "background-color: #001952; border: 2px solid #001952; box-shadow: 0 0 10px #347BB2;", "smallSecondary": "background-color: #D8E5F2; box-shadow: 0 0 10px #D8E5F2;" }, "backgroundColor": { "danger": "#ED125F", "ghost": "transparent", "primary": "#347BB2", "secondary": "transparent", "smallGhost": "transparent", "smallPrimary": "#347BB2", "smallSecondary": "transparent" }, "border": { "danger": "2px solid #ED125F;", "ghost": "none", "primary": "2px solid #347BB2;", "secondary": "2px solid #347BB2;", "smallGhost": "none", "smallPrimary": "2px solid #347BB2;", "smallSecondary": "2px solid #347BB2;" }, "color": { "danger": "#FFFFFF", "ghost": "#347BB2", "primary": "#FFFFFF", "secondary": "#347BB2", "smallGhost": "#347BB2", "smallPrimary": "#FFFFFF", "smallSecondary": "#347BB2" }, "disabled": { "danger": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "ghost": "color: #6E727E; border: none", "primary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "secondary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "smallGhost": "color: #6E727E; border: none;", "smallPrimary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }", "smallSecondary": "background-color: #6E727E; border: 2px solid #6E727E; &:focus { box-shadow: 0 0 10px #6E727E; }" }, "focus": { "danger": "outline: none; background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F", "ghost": "outline: none; box-shadow: none; color: #024C85;", "primary": "outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "secondary": "outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;", "smallGhost": "outline: none; box-shadow: none; color: #024C85;", "smallPrimary": "outline: none; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "smallSecondary": "outline: none; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;" }, "hover": { "danger": "background-color: #BA002C; border: 2px solid #BA002C; box-shadow: 0 0 10px #ED125F;", "ghost": "cursor: pointer; color: #024C85;", "primary": "cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "secondary": "cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;", "smallGhost": "cursor: pointer; color: #024C85;", "smallPrimary": "cursor: pointer; background-color: #024C85; border: 2px solid #024C85; box-shadow: 0 0 10px #347BB2", "smallSecondary": "cursor: pointer; background-color: #EAF2F8; box-shadow: 0 0 10px #EAF2F8;" } }, "Checkbox": { "boxShadow": { "default": "0 0 0 3px #D8E5F2;" }, "checkedStyles": { "default": "background: #347BB2; border: 1px solid #347BB2;" } }, "Dropdown": { "hoverColor": "#EFFAFF", "selectedColor": "#347BB2" }, "Footer": { "backgroundColor": "#182848", "logoHeight": "52px", "subfooterColor": "#347BB2" }, "FormInput": { "hoverFocusStyles": { "default": "outline: none; text-decoration: underline; color: #024C85;" }, "linkColor": { "default": "#347BB2" } }, "Global": { "baseFontSize": "16px", "baseMobileFontSize": "14px", "pageBackground": "#F6F6F9" }, "Header": { "backgroundColor": "#347BB2" }, "Icons": { "accentColor": { "error": "#3B414D", "info": "#3B414D", "success": "#3B414D" }, "primaryColor": { "error": "#FFFFFF", "info": "#FFFFFF", "success": "#FFFFFF" }, "singleIconColor": { "darkMode": "#FFFFFF", "primary": "#347BB2", "secondary": "#3B414D" }, "subIconColor": { "error": "#ED125F", "info": "#347BB2", "success": "#317D4F" } }, "ModalLink": { "linkColor": "#347BB2" }, "NavMenu": { "backgroundColor": "#347BB2" }, "ProfileTab": { "activeTabAccent": "#347BB2", "activeTabBackground": "#FFFFFF", "activeTabHover": "#D8E5F2" }, "RadioButton": { "activeColor": "#347BB2" }, "Spinner": { "color": "#347BB2" }, "ToggleSwitch": { "onBackground": "#347BB2" }, "Workflow": { "accentColor": "#214566", "fontFamily": "Open Sans, sans-serif", "linkColor": "#214566", "primaryButtonColor": "#347BB2", "secondaryButtonColor": "#347BB2", "textColor": "#091325", "workflowFooterColor": "#182848", "workflowHeaderColor": "#347BB2" }, "linkColor": "#15749D", "logo": "logo.png", "primaryColor": "#3B414D", "secondaryColor": "#E5E7EC", "textColor": "#000000" } };

package/dist/button-with-link/ButtonWithLinkProps.js

@@ -1 +0,0 @@
-;

package/dist/src/components/atoms/add-obligation/AddObligation.d.ts

@@ -1,5 +0,0 @@
-declare const _default: ({ variant, ...props }: {
-    [x: string]: any;
-    variant?: any;
-}) => any;
-export default _default;

package/dist/src/components/atoms/add-obligation/AddObligation.js

@@ -1,21 +0,0 @@
-import React from "react";
-import ButtonWithAction from "../button-with-action";
-import { Box, Center, Cluster, Cover } from "../layouts";
-import { IconAdd } from "../icons";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import { fallbackValues } from "./AddObligation.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import { ROYAL_BLUE } from "../../../constants/colors";
-var AddObligation = function (_a) {
-    var text = _a.text, action = _a.action, themeValues = _a.themeValues, extraStyles = _a.extraStyles, textExtraStyles = _a.textExtraStyles;
-    var hoverStyles = "\n  &:hover {\n    .fill { fill: ".concat(themeValues.hoverColor, "; }\n    .stroke { stroke: ").concat(themeValues.hoverColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.hoverColor, "; }\n    span { color: ").concat(themeValues.hoverColor, "; }\n  }");
-    var activeStyles = "\n   &:active {\n     .fill { fill: ".concat(themeValues.activeColor, "; }\n     .stroke { stroke: ").concat(themeValues.activeColor, "; }\n    button { text-decoration: underline; text-decoration-color: ").concat(themeValues.activeColor, "; }\n    span { color: ").concat(themeValues.activeColor, "; }\n    }");
-    var defaultStyles = "\n      min-height: 0;\n      .fill { fill: ".concat(themeValues.color, "; }\n      .stroke { stroke: ").concat(themeValues.color, "; }\n      &:focus {\n        outline: 3px solid ").concat(ROYAL_BLUE, ";\n        outline-offset: 2px;\n      }\n     ");
-    return (React.createElement(Box, { className: "button", padding: "0", hoverStyles: hoverStyles, activeStyles: activeStyles, extraStyles: defaultStyles, onClick: action, tabIndex: "0" },
-        React.createElement(Cover, { singleChild: true, minHeight: "100%" },
-            React.createElement(Cluster, { justify: "center", align: "center", minHeight: "100%" },
-                React.createElement(IconAdd, null),
-                React.createElement(Center, { intrinsic: true },
-                    React.createElement(ButtonWithAction, { action: action, text: text, variant: "smallGhost", extraStyles: "min-height: 0; ".concat(extraStyles), textExtraStyles: "padding: 0 0 0 0.75rem; font-size: 0.875rem; font-weight ".concat(FONT_WEIGHT_SEMIBOLD, "; ").concat(textExtraStyles), tabIndex: "-1" }))))));
-};
-export default themeComponent(AddObligation, "AddObligation", fallbackValues);

package/dist/src/components/atoms/add-obligation/AddObligation.stories.d.ts

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

package/dist/src/components/atoms/add-obligation/AddObligation.stories.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-import AddObligation from "./AddObligation";
-import page from "../../../../.storybook/page";
-export var addObligation = function () { return (React.createElement(AddObligation, { text: text("text", "Lorem", "props"), extraStyles: text("extraStyles", "", "props"), textExtraStyles: text("textExtraStyles", "", "props") })); };
-var story = page({
-    title: "Components|Atoms/AddObligation",
-    Component: AddObligation
-});
-export default story;

package/dist/src/components/atoms/add-obligation/AddObligation.theme.d.ts

@@ -1,9 +0,0 @@
-export namespace fallbackValues {
-    export { color };
-    export { hoverColor };
-    export { activeColor };
-}
-declare const color: "#15749D";
-declare const hoverColor: "#116285";
-declare const activeColor: "#0E506D";
-export {};

package/dist/src/components/atoms/add-obligation/AddObligation.theme.js

@@ -1,8 +0,0 @@
-var color = "#15749D";
-var hoverColor = "#116285";
-var activeColor = "#0E506D";
-export var fallbackValues = {
-    color: color,
-    hoverColor: hoverColor,
-    activeColor: activeColor
-};

package/dist/src/components/atoms/add-obligation/index.d.ts

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