@thecb/components 5.7.0-beta.4 → 5.8.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.7.0-beta.4",
+  "version": "5.8.0-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -38,6 +38,10 @@
     "@storybook/addon-storysource": "^5.3.14",
     "@storybook/addon-viewport": "^5.3.14",
     "@storybook/react": "^5.3.14",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.1.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.0",
@@ -81,6 +85,6 @@
     "ramda": "^0.27.0",
     "react-aria-modal": "^4.0.0",
     "react-pose": "^4.0.10",
-    "redux-freeform": "^5.3.0"
+    "redux-freeform": "^5.5.0"
   }
 }

package/src/components/atoms/amount-callout/AmountCallout.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Heading from "../heading";
+import Title from "../title";
 import { Box } from "../layouts";
 import { fallbackValues } from "./AmountCallout.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -7,21 +7,15 @@ import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
 const AmountCallout = ({ amount, textAlign, themeValues }) => (
   <Box padding="0" textAlign={textAlign}>
-    <Heading
-      variant="h6"
+    <Title
+      variant="small"
       weight={FONT_WEIGHT_SEMIBOLD}
-      fontSize={themeValues.fontSize}
       color={themeValues.color}
-      lineHeight={themeValues.lineHeight}
+      as="p"
     >
       {amount}
-    </Heading>
+    </Title>
   </Box>
 );
 
-export default themeComponent(
-  AmountCallout,
-  "AmountCallout",
-  fallbackValues,
-  "medium"
-);
+export default themeComponent(AmountCallout, "AmountCallout", fallbackValues);

package/src/components/atoms/amount-callout/AmountCallout.stories.js

@@ -3,15 +3,6 @@ import { text, select } from "@storybook/addon-knobs";
 import AmountCallout from "./AmountCallout";
 import page from "../../../../.storybook/page";
 
-const variantsLabel = "variant";
-const variants = {
-  small: "small",
-  medium: "medium",
-  large: "large",
-  None: undefined
-};
-const defaultValue = "large";
-
 const textAlignLabel = "textAlign";
 const textAlign = {
   left: "left",
@@ -23,7 +14,6 @@ const groupId = "props";
 
 export const amountCallout = () => (
   <AmountCallout
-    variant={select(variantsLabel, variants, defaultValue, groupId)}
     amount={text("text", "$1.23", "props")}
     textAlign={select(
       textAlignLabel,

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,19 +1,5 @@
-const fontSize = {
-  large: "1.5rem",
-  medium: "1.25rem",
-  small: "1.094rem"
-};
-
 const color = "#15749D";
 
-const lineHeight = {
-  large: "2rem",
-  medium: "1.875rem",
-  small: "1.641rem"
-};
-
 export const fallbackValues = {
-  fontSize,
-  color,
-  lineHeight
+  color
 };

package/src/components/atoms/detail/Detail.theme.js

@@ -1,8 +1,10 @@
+// Comments assume desktop base font size of 16px, mobile base font size of 14px
+
 const fontSize = {
-  large: "1.125rem",
-  regular: "1rem",
-  small: "0.875rem",
-  extraSmall: "0.75rem"
+  large: "1.125rem", // 18px (at base font size of 16)
+  regular: "1rem", // 16px
+  small: "0.875rem", // 14px
+  extraSmall: "0.75rem" // 12px
 };
 
 const fontFamily = {
@@ -13,10 +15,10 @@ const fontFamily = {
 };
 
 const mobileFontSize = {
-  large: "1.14285rem",
-  regular: "1",
-  small: "0.85714rem",
-  extraSmall: "0.71428rem"
+  large: "1.14285rem", // 16px (at base font size of 14)
+  regular: "1", // 14px
+  small: "0.85714rem", // 12px
+  extraSmall: "0.71428rem" // 10px
 };
 
 export const fallbackValues = {

package/src/components/atoms/dropdown/Dropdown.js

@@ -92,7 +92,8 @@ const Dropdown = ({
   themeValues,
   maxHeight,
   widthFitOptions = false,
-  disabled
+  disabled,
+  hasTitles = false
 }) => {
   const [inputValue, setInputValue] = useState("");
   const [optionsState, setOptionsState] = useState([]);
@@ -113,6 +114,9 @@ const Dropdown = ({
   const optionRefs = useRef([...Array(options.length)].map(() => createRef()));
   const dropdownRef = useRef(null);
 
+  const getSelection = () =>
+    value ? options.find(option => option.value === value)?.text : placeholder;
+
   const onKeyDown = e => {
     const { key, keyCode } = e;
     const focus = document.activeElement;
@@ -210,6 +214,7 @@ const Dropdown = ({
       background-color: #f7f7f7;
       pointer-events: none;`
       }
+      title={hasTitles ? getSelection() : null}
     >
       <Box
         as="button"
@@ -253,9 +258,7 @@ const Dropdown = ({
             pointer-events: none;`
               }
             >
-              {value
-                ? options.find(option => option.value === value)?.text
-                : placeholder}
+              {getSelection()}
             </Text>
           )}
           <IconWrapper open={isOpen}>
@@ -287,6 +290,7 @@ const Dropdown = ({
                 disabled={disabledValues.includes(choice.value)}
                 data-qa={choice.text}
                 themeValues={themeValues}
+                title={hasTitles ? choice.text : null}
               >
                 <Text
                   variant="p"

package/src/components/atoms/form-layouts/FormInput.js

@@ -15,7 +15,7 @@ const InputField = styled.input`
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
+  height: ${({ $customHeight }) => ($customHeight ? $customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -47,9 +47,9 @@ const InputField = styled.input`
       background-color: #f7f7f7;
     `}
 
-  ${({ extraStyles }) =>
+  ${({ $extraStyles }) =>
     css`
-      ${extraStyles}
+      ${$extraStyles}
     `}
 `;
 
@@ -63,7 +63,7 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
         ? ERROR_COLOR
         : themeValues.borderColor};
   border-radius: 2px;
-  height: ${({ customHeight }) => (customHeight ? customHeight : "48px")};
+  height: ${({ $customHeight }) => ($customHeight ? $customHeight : "48px")};
   width: 100%;
   padding: 1rem;
   min-width: 100px;
@@ -199,8 +199,8 @@ const FormInput = ({
             showErrors={showErrors}
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
-            customHeight={customHeight}
-            extraStyles={extraStyles}
+            $customHeight={customHeight}
+            $extraStyles={extraStyles}
             {...props}
           />
         ) : (
@@ -216,8 +216,8 @@ const FormInput = ({
             data-qa={labelTextWhenNoError}
             themeValues={themeValues}
             background={background}
-            customHeight={customHeight}
-            extraStyles={extraStyles}
+            $customHeight={customHeight}
+            $extraStyles={extraStyles}
             {...props}
           />
         )}

package/src/components/atoms/form-select/FormSelect.js

@@ -18,7 +18,8 @@ const FormSelect = ({
   dropdownMaxHeight,
   disabledValues,
   disabled,
-  themeValues
+  themeValues,
+  hasTitles = false
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -59,6 +60,7 @@ const FormSelect = ({
       <Dropdown
         aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
+        hasTitles={hasTitles}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}

package/src/components/atoms/layouts/Box.js

@@ -1,10 +1,13 @@
 import React, { Fragment } from "react";
 import { BoxWrapper } from "./Box.styled";
-import { safeChildren } from "../../../util/general";
+import { safeChildren, screenReaderOnlyStyle } from "../../../util/general";
 
 /*
   Box component to create generic boxes
   Supply padding, border, background, and color values
+
+  srOnly prop enables special screen-reader style that is used to position content
+  completely off screen (only for users of screen readers)
 */
 
 const Box = ({
@@ -37,6 +40,7 @@ const Box = ({
   theme,
   hiddenStyles,
   extraStyles,
+  srOnly = false,
   dataQa,
   children,
   ...rest
@@ -63,7 +67,9 @@ const Box = ({
     onClick={onClick}
     hiddenStyles={hiddenStyles}
     onKeyDown={onKeyDown}
-    extraStyles={extraStyles}
+    extraStyles={
+      srOnly ? `${screenReaderOnlyStyle}${extraStyles}` : extraStyles
+    }
     theme={theme}
     textAlign={textAlign}
     data-qa={dataQa}

package/src/components/atoms/layouts/Cluster.js

@@ -29,10 +29,10 @@ const Cluster = ({
   <ClusterWrapper
     overflow={overflow}
     {...rest}
-    justifySelf={justifySelf}
-    alignSelf={alignSelf}
-    flexGrow={flexGrow}
-    extraStyles={extraStyles}
+    $justifySelf={justifySelf}
+    $alignSelf={alignSelf}
+    $flexGrow={flexGrow}
+    $extraStyles={extraStyles}
   >
     <ClusterInnerWrapper
       justify={justify}

package/src/components/atoms/layouts/Cluster.styled.js

@@ -7,10 +7,10 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 ))`
   overflow: ${({ overflow }) => (overflow ? "visible" : "hidden")};
   box-sizing: border-box;
-  justify-self: ${({ justifySelf }) => justifySelf};
-  align-self: ${({ alignSelf }) => alignSelf};
-  flex-grow: ${({ flexGrow }) => flexGrow};
-  ${({ extraStyles }) => extraStyles};
+  justify-self: ${({ $justifySelf }) => $justifySelf};
+  align-self: ${({ $alignSelf }) => $alignSelf};
+  flex-grow: ${({ $flexGrow }) => $flexGrow};
+  ${({ $extraStyles }) => $extraStyles};
 `;
 
 export const ClusterInnerWrapper = styled.div`

package/src/components/atoms/nav-footer/NavFooter.stories.js

@@ -23,7 +23,7 @@ export const navFooter = () => (
   <NavFooter
     leftContent={<Left />}
     rightContent={<Right />}
-    headerHeight={text("headerHeight", "105px", "props")}
+    $headerHeight={text("headerHeight", "105px", "props")}
     backgroundColor={select("activeColor", colors, "white", "props")}
     footerPadding={text("footerPadding", "1.5rem 1rem", "props")}
     isMobile={boolean("isMobile", false, "props")}

package/src/components/atoms/paragraph/Paragraph.js

@@ -1,7 +1,7 @@
 /*
 SOON TO BE DEPRECATED AS OF 8/1/2021
 
-For new pages/applications, please us <Title /> and <Detail /> atoms
+For new pages/applications, please us <Title /> and <Detail /> atoms (specify "as" prop with value of "p")
 
 */
 import React from "react";

package/src/components/atoms/paragraph/Paragraph.theme.js

@@ -7,13 +7,15 @@ const fontFamily = {
   pXL: "Public Sans"
 };
 
+// Comments assume base font size of 16px
+
 const fontSize = {
-  p: "1rem",
-  pL: "1.125rem",
-  pS: "0.875rem",
-  pXS: "0.75rem",
-  pXXS: "0.65rem",
-  pXL: "1.5rem"
+  p: "1rem", // 16px
+  pL: "1.125rem", // 18px
+  pS: "0.875rem", // 14px
+  pXS: "0.75rem", // 12px
+  pXXS: "0.65rem", // 10px
+  pXL: "1.5rem" // 24px
 };
 
 export const fallbackValues = {

package/src/components/atoms/text/Text.theme.js

@@ -11,13 +11,15 @@ const fontFamily = {
 // Use a Paragraph if you want a block level element
 // Use a Text if you want an inline element
 
+// Comments assume base font size of 16px
+
 const fontSize = {
-  p: "1rem",
-  pL: "1.125rem",
-  pS: "0.875rem",
-  pXS: "0.75rem",
-  pXXS: "0.65rem",
-  pXL: "1.5rem"
+  p: "1rem", // 16px
+  pL: "1.125rem", // 18px
+  pS: "0.875rem", // 14px
+  pXS: "0.75rem", // 12px
+  pXXS: "0.65rem", // 10px
+  pXL: "1.5rem" // 24px
 };
 
 export const fallbackValues = {

package/src/components/atoms/title/Title.theme.js

@@ -1,6 +1,8 @@
+// Comments assume desktop base font size of 16px, mobile base font size of 14px
+
 const fontSize = {
-  large: "1.5rem",
-  small: "1.25rem"
+  large: "1.5rem", // 24px (at base font size of 16px)
+  small: "1.25rem" // 20px
 };
 
 const fontFamily = {
@@ -9,8 +11,8 @@ const fontFamily = {
 };
 
 const mobileFontSize = {
-  large: "1.5rem",
-  small: "1.2142rem"
+  large: "1.5rem", // 21px (at base font size of 14px)
+  small: "1.2142rem" // 17px
 };
 
 export const fallbackValues = {

package/src/components/molecules/index.js

@@ -33,3 +33,4 @@ 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/src/components/molecules/obligation/Obligation.js

@@ -1,11 +1,13 @@
 import React from "react";
 import { Box, Cluster, Stack } from "../../../components/atoms/layouts";
-import { WHITE, GHOST_GREY, BRIGHT_GREY } from "../../../constants/colors";
+import { WHITE, BRIGHT_GREY, ATHENS_GREY } from "../../../constants/colors";
 import {
   IconModule,
   TitleModule,
   AmountModule,
-  PaymentDetailsActions
+  PaymentDetailsActions,
+  InactiveControlsModule,
+  InactiveTitleModule
 } from "./modules";
 
 const Obligation = ({
@@ -21,15 +23,24 @@ const Obligation = ({
   navigateToSettings,
   isMobile,
   isPaymentPlan,
-  nextAutopayDate
+  nextAutopayDate,
+  obligationAssocID,
+  isActive = true,
+  inactiveLookupTitle = "",
+  inactiveLookupInput = "Account",
+  inactiveLookupValue = ""
 }) => {
   const obligation = obligations[0];
   const { customAttributes } = obligation;
-  return (
+  const boxShadowValue =
+    "0px 4px 4px rgba(41, 42, 51, 0.1), 0px 1px 1px 2px rgba(41, 42, 51, 0.1);";
+  const activeObligation = (
     <Box
       padding="0"
       borderRadius="4px"
-      boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
+      boxShadow={boxShadowValue}
+      as="section"
+      aria-label={`${obligation.description} ${obligation.subDescription}`}
     >
       <Box background={WHITE}>
         <Stack childGap="14px">
@@ -115,6 +126,78 @@ const Obligation = ({
       )}
     </Box>
   );
+
+  const inactiveObligation = (
+    <Box
+      padding="0"
+      borderRadius="4px"
+      boxShadow={boxShadowValue}
+      as="section"
+      aria-label={`${inactiveLookupTitle} ${inactiveLookupInput}: ${inactiveLookupValue}`}
+    >
+      <Box background={ATHENS_GREY}>
+        <Stack childGap="14px">
+          <Box key={`${obligations[0].id}-top`} padding="0 8px" minWidth="100%">
+            <Cluster
+              justify="space-between"
+              align="center"
+              childGap="4px"
+              nowrap
+            >
+              <Box padding="0">
+                <Cluster justify="flex-start" align="center">
+                  <IconModule
+                    icon={config.icon}
+                    iconDefault={config.iconDefault}
+                    configIconMap={config.iconMap}
+                    iconValue={config.iconValue}
+                    customAttributes={customAttributes}
+                  />
+                  <InactiveTitleModule
+                    title={inactiveLookupTitle}
+                    subtitle={`${inactiveLookupInput}: ${inactiveLookupValue}`}
+                    titleColor={BRIGHT_GREY}
+                    autoPayEnabled={autoPayEnabled}
+                    isMobile={isMobile}
+                  />
+                </Cluster>
+              </Box>
+              {!isMobile && (
+                <InactiveControlsModule
+                  obligations={obligations}
+                  autoPayEnabled={autoPayEnabled}
+                  deactivatePaymentSchedule={deactivatePaymentSchedule}
+                  autoPaySchedule={autoPaySchedule}
+                  paymentPlanSchedule={paymentPlanSchedule}
+                  config={config}
+                  actions={actions}
+                  isMobile={isMobile}
+                  nextAutopayDate={nextAutopayDate}
+                  obligationAssocID={obligationAssocID}
+                />
+              )}
+            </Cluster>
+          </Box>
+          {isMobile && (
+            <InactiveControlsModule
+              obligations={obligations}
+              autoPayEnabled={autoPayEnabled}
+              deactivatePaymentSchedule={deactivatePaymentSchedule}
+              autoPaySchedule={autoPaySchedule}
+              paymentPlanSchedule={paymentPlanSchedule}
+              config={config}
+              actions={actions}
+              isMobile={isMobile}
+              nextAutopayDate={nextAutopayDate}
+              obligationAssocID={obligationAssocID}
+            />
+          )}
+        </Stack>
+      </Box>
+    </Box>
+  );
+
+  return isActive ? activeObligation : inactiveObligation;
 };
 
 export default Obligation;

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

@@ -0,0 +1,61 @@
+import React, { useState } from "react";
+import { GHOST_GREY } from "../../../../constants/colors";
+import ButtonWithAction from "../../../atoms/button-with-action";
+import { Box, Cluster } from "../../../atoms/layouts";
+import { AutopayModalModule } from "./AutopayModalModule";
+
+const InactiveControlsModule = ({
+  autoPayEnabled,
+  autoPaySchedule,
+  navigateToSettings,
+  deactivatePaymentSchedule,
+  isMobile,
+  paymentPlanSchedule,
+  isPaymentPlan,
+  nextAutopayDate,
+  obligationAssocID,
+  actions
+}) => {
+  const [modalOpen, toggleModal] = useState(false);
+  const { removeAccount } = actions;
+  const handleRemoveAccount = () => removeAccount(obligationAssocID);
+  return (
+    <Box
+      padding={isMobile ? "18px 0 0 0" : "0"}
+      border={isMobile ? `1px solid ${GHOST_GREY}` : `0px`}
+      borderWidthOverride={isMobile ? `1px 0 0 0` : `0px`}
+    >
+      <Cluster childGap={isMobile ? `8px` : `18px`}>
+        {autoPayEnabled && (
+          <Box padding="0" extraStyles={`flex-grow: 1;`}>
+            <AutopayModalModule
+              autoPayActive={autoPayEnabled}
+              autoPaySchedule={autoPaySchedule}
+              toggleModal={toggleModal}
+              modalOpen={modalOpen}
+              navigateToSettings={navigateToSettings}
+              deactivatePaymentSchedule={deactivatePaymentSchedule}
+              buttonLinkType
+              isMobile={isMobile}
+              paymentPlanSchedule={paymentPlanSchedule}
+              isPaymentPlan={isPaymentPlan}
+              nextAutopayDate={nextAutopayDate}
+              obligationAssocID={obligationAssocID}
+            />
+          </Box>
+        )}
+        <Box padding="0" extraStyles={`flex-grow: 1;`}>
+          <ButtonWithAction
+            variant="tertiary"
+            text="Remove"
+            action={handleRemoveAccount}
+            dataQa="Remove Account"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        </Box>
+      </Cluster>
+    </Box>
+  );
+};
+
+export default InactiveControlsModule;

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { Box, Stack } from "../../../atoms/layouts";
+import Title from "../../../atoms/title";
+import Detail from "../../../atoms/detail";
+import { BLACK, CHARADE_GREY, ZEST_ORANGE } from "../../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
+
+const InactiveTitleModule = ({ title, subtitle, autoPayEnabled }) => (
+  <Box padding="0">
+    <Stack childGap="0">
+      <Title
+        variant="small"
+        as="h4"
+        color={CHARADE_GREY}
+        weight={FONT_WEIGHT_SEMIBOLD}
+      >
+        {title}
+      </Title>
+      <Detail variant="small" as="h5" color={CHARADE_GREY}>
+        {subtitle}
+      </Detail>
+      <Detail
+        variant="small"
+        as="p"
+        color={ZEST_ORANGE}
+        weight={FONT_WEIGHT_SEMIBOLD}
+      >
+        Unable to load account details
+      </Detail>
+      <Detail variant="extraSmall" as="p" color={BLACK}>
+        {`This may mean that the account has been paid off or there was an error loading it. If you have questions about this account, please contact us.${
+          autoPayEnabled
+            ? " You may disable Autopay for this account by pressing the Turn off Autopay button."
+            : ""
+        }`}
+      </Detail>
+    </Stack>
+  </Box>
+);
+
+export default InactiveTitleModule;