@thecb/components 4.1.15 → 4.1.16-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.15",
+  "version": "4.1.16-beta.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import styled, { css } from "styled-components";
 import { fallbackValues } from "./Checkbox.theme";
 import { noop } from "../../../util/general";
@@ -44,6 +44,7 @@ const HiddenCheckbox = styled.input.attrs({ type: "checkbox" })`
 
 const StyledCheckbox = styled.div`
   display: inline-block;
+  margin-right: 16px;
   width: 24px;
   height: 24px;
   border-radius: 2px;
@@ -87,58 +88,72 @@ const Checkbox = ({
   checked,
   onChange = noop,
   disabled = false,
-  focused = false,
   themeValues,
   hidden = false,
   error = false
-}) => (
-  <Box
-    padding="0"
-    hiddenStyles={hidden}
-    background={themeValues.backgroundColor}
-  >
-    <CheckboxLabelContainer>
-      <CheckboxContainer data-qa="Checkbox">
-        <HiddenCheckbox
-          id={`checkbox-${name}`}
-          disabled={disabled}
-          name={name}
-          aria-label={name}
-          checked={checked}
-          onChange={onChange}
-          tabIndex="-1"
-        />
-        <StyledCheckbox
-          error={error}
-          disabled={disabled}
-          checked={checked}
-          focused={focused}
-          defaultStyles={themeValues.defaultStyles}
-          checkedStyles={themeValues.checkedStyles}
-          errorStyles={themeValues.errorStyles}
-          disabledStyles={themeValues.disabledStyles}
-          focusedStyles={themeValues.focusedStyles}
-        >
-          <CheckboxIcon
-            viewBox="0 0 24 24"
+}) => {
+  const [focused, setFocused] = useState(false);
+
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
+  return (
+    <Box
+      padding="0"
+      tabIndex="0"
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      onKeyDown={e => handleClick(e, onChange)}
+      hiddenStyles={hidden}
+      background={themeValues.backgroundColor}
+      extraStyles="outline: none;"
+    >
+      <CheckboxLabelContainer>
+        <CheckboxContainer data-qa="Checkbox">
+          <HiddenCheckbox
+            id={`checkbox-${name}`}
             disabled={disabled}
-            disabledCheckColor={themeValues.disabledCheckColor}
-            checkColor={themeValues.checkColor}
+            name={name}
+            aria-label={name}
+            checked={checked}
+            onChange={onChange}
+            tabIndex="-1"
+          />
+          <StyledCheckbox
+            error={error}
+            disabled={disabled}
+            checked={checked}
+            focused={focused}
+            defaultStyles={themeValues.defaultStyles}
+            checkedStyles={themeValues.checkedStyles}
+            errorStyles={themeValues.errorStyles}
+            disabledStyles={themeValues.disabledStyles}
+            focusedStyles={themeValues.focusedStyles}
           >
-            <polyline points="20 6 9 17 4 12" />
-          </CheckboxIcon>
-        </StyledCheckbox>
-      </CheckboxContainer>
-      <Text
-        variant="p"
-        weight={themeValues.textFontWeight}
-        color={themeValues.textColor}
-        extraStyles={`margin-left: 1rem`}
-      >
-        {title}
-      </Text>
-    </CheckboxLabelContainer>
-  </Box>
-);
+            <CheckboxIcon
+              viewBox="0 0 24 24"
+              disabled={disabled}
+              disabledCheckColor={themeValues.disabledCheckColor}
+              checkColor={themeValues.checkColor}
+            >
+              <polyline points="20 6 9 17 4 12" />
+            </CheckboxIcon>
+          </StyledCheckbox>
+        </CheckboxContainer>
+        <Text
+          variant="p"
+          weight={themeValues.textFontWeight}
+          color={themeValues.textColor}
+          extraStyles={`margin-left: 1rem`}
+        >
+          {title}
+        </Text>
+      </CheckboxLabelContainer>
+    </Box>
+  );
+};
 
 export default themeComponent(Checkbox, "Checkbox", fallbackValues, "default");

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

@@ -201,7 +201,6 @@ const Dropdown = ({
     <Box
       onKeyDown={onKeyDown}
       onClick={onClick}
-      tabIndex={0}
       padding="0"
       width="100%"
       hoverStyles={`background-color: ${themeValues.hoverColor};`}
@@ -222,7 +221,8 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         borderRadius="2px"
-        extraStyles={`tabindex: 0; height: 48px;`}
+        tabIndex={0}
+        extraStyles={`height: 48px;`}
         dataQa={placeholder}
       >
         <Stack direction="row" bottomItem={2}>

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

@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
 import { ERROR_COLOR } from "../../../constants/colors";
-import { SelectContainer, SelectLabel } from "./FormSelect.styled";
+import { SelectContainer } from "./FormSelect.styled";
 import { fallbackValues } from "./FormSelect.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Box, Cluster } from "../layouts";
+import { Box, Cluster, Stack } from "../layouts";
 
 const FormSelect = ({
   fieldActions,
@@ -49,12 +49,14 @@ const FormSelect = ({
               &::first-letter {
                 text-transform: uppercase;
               }`}
+            id={labelTextWhenNoError.replace(/\s+/g, "-")}
           >
             {labelTextWhenNoError}
           </Text>
         </Cluster>
       </Box>
       <Dropdown
+        aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
         maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
@@ -69,7 +71,7 @@ const FormSelect = ({
         }
         onClick={() => setOpen(!open)}
       />
-      <SelectLabel field={field} showErrors={showErrors}>
+      <Stack direction="row" justify="space-between">
         {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
           <Text
             color={ERROR_COLOR}
@@ -86,7 +88,7 @@ const FormSelect = ({
         ) : (
           <Text extraStyles={`height: ${themeValues.lineHeight};`} />
         )}
-      </SelectLabel>
+      </Stack>
     </SelectContainer>
   );
 };

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

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 import {
-  STORM_GREY,
   GHOST_GREY,
   ERROR_COLOR,
   MATISSE_BLUE
@@ -18,22 +17,6 @@ export const SelectContainer = styled.div`
   }
 `;
 
-export const SelectLabel = styled.label`
-  color: ${({ field, showErrors }) =>
-    (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
-      ? ERROR_COLOR
-      : STORM_GREY};
-  font-size: 14px;
-  line-height: 18px;
-  font-weight: ${FONT_WEIGHT_REGULAR};
-  margin-bottom: 4px;
-  font-family: Public Sans;
-
-  &::first-letter {
-    text-transform: uppercase;
-  }
-`;
-
 export const SelectField = styled.select`
   border: 1px solid
     ${({ field, showErrors }) =>

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

@@ -13,6 +13,7 @@ const Text = ({
   extraStyles = ``,
   hoverStyles,
   onClick,
+  onKeyPress,
   as,
   dataQa,
   children,
@@ -27,6 +28,7 @@ const Text = ({
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
     onClick={onClick}
+    onKeyPress={onKeyPress}
     data-qa={dataQa}
     {...rest}
   >

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -16,24 +16,9 @@ const AccountAndRoutingModal = ({
   acceptText,
   content,
   imageType,
-  variant,
   themeValues
 }) => (
   <Modal
-    ModalLink={() => (
-      <Text
-        variant={variant === "default" ? "pS" : "pXS"}
-        onClick={() => toggleOpen(true)}
-        color={themeValues.linkColor}
-        weight={themeValues.fontWeight}
-        hoverStyles={themeValues.modalLinkHoverFocus}
-        extraStyles={`cursor: pointer;`}
-        tabIndex="0"
-        onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
-      >
-        {link}
-      </Text>
-    )}
     modalOpen={isOpen}
     hideModal={() => toggleOpen(false)}
     showModal={() => toggleOpen(true)}
@@ -63,7 +48,20 @@ const AccountAndRoutingModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
-  />
+  >
+    <Text
+      variant="pS"
+      onClick={() => toggleOpen(true)}
+      onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
+      tabIndex="0"
+      color={themeValues.linkColor}
+      weight={themeValues.fontWeight}
+      hoverStyles={themeValues.modalLinkHoverFocus}
+      extraStyles={`cursor: pointer;`}
+    >
+      {link}
+    </Text>
+  </Modal>
 );
 
 export default themeComponent(

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.theme.js

@@ -1,18 +1,13 @@
-import {
-  FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_SEMIBOLD
-} from "../../../constants/style_constants";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
-const linkColor = { default: "#357fb8", footer: "#ffffff" };
-const fontSize = { default: "1rem", footer: "0.875rem" };
-const lineHeight = { default: "1.5rem", footer: "1.25rem" };
+const linkColor = { default: "#357fb8" };
+const fontSize = { default: "1rem" };
+const lineHeight = { default: "1.5rem" };
 const fontWeight = {
-  default: FONT_WEIGHT_REGULAR,
-  footer: FONT_WEIGHT_SEMIBOLD
+  default: FONT_WEIGHT_REGULAR
 };
 const modalLinkHoverFocus = {
-  default: ``,
-  footer: `outline: none; text-decoration: underline;`
+  default: `outline: none; text-decoration: underline;`
 };
 
 export const fallbackValues = {

package/src/components/molecules/address-form/AddressForm.js

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { required, hasLength } from "redux-freeform";
-import styled from "styled-components";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -12,10 +11,6 @@ import {
   FormInputColumn
 } from "../../atoms/form-layouts";
 
-const CheckboxWrapper = styled.div`
-  outline: none;
-`;
-
 const AddressForm = ({
   variant = "default",
   fields,
@@ -27,13 +22,6 @@ const AddressForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
-  const [checkboxFocused, focusCheckbox] = useState(false);
-
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -120,20 +108,12 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <CheckboxWrapper
-            tabIndex="0"
-            onFocus={() => focusCheckbox(true)}
-            onBlur={() => focusCheckbox(false)}
-            onKeyDown={e => handleClick(e, saveToWallet)}
-          >
-            <Checkbox
-              name="address checkbox"
-              title="Save address to wallet"
-              checked={walletCheckboxMarked}
-              onChange={saveToWallet}
-              focused={checkboxFocused}
-            />
-          </CheckboxWrapper>
+          <Checkbox
+            name="address checkbox"
+            title="Save address to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/email-form/EmailForm.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
+import React, { useEffect } from "react";
 import { required, isProbablyEmail } from "redux-freeform";
 import {
   FormInput,
@@ -10,10 +9,6 @@ import Checkbox from "../../atoms/checkbox";
 import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
 
-const CheckboxWrapper = styled.div`
-  outline: none;
-`;
-
 const EmailForm = ({
   variant = "default",
   clearOnDismount,
@@ -26,13 +21,6 @@ const EmailForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
-  const [checkboxFocused, focusCheckbox] = useState(false);
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
-
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -59,20 +47,12 @@ const EmailForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <CheckboxWrapper
-            tabIndex="0"
-            onFocus={() => focusCheckbox(true)}
-            onBlur={() => focusCheckbox(false)}
-            onKeyDown={e => handleClick(e, saveToWallet)}
-          >
-            <Checkbox
-              name="email checkbox"
-              title="Save email address to wallet"
-              checked={walletCheckboxMarked}
-              onChange={saveToWallet}
-              focused={checkboxFocused}
-            />
-          </CheckboxWrapper>
+          <Checkbox
+            name="email checkbox"
+            title="Save email address to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/email-form/EmailForm.stories.js

@@ -20,5 +20,8 @@ const ConnectedForm = connect(
   EmailFormState.mapDispatchToProps
 )(EmailForm);
 export const emailForm = () => (
-  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+  <ConnectedForm
+    showErrors={boolean("showErrors", false, "props")}
+    showWalletCheckbox={boolean("showWalletCheckbox", false, "props")}
+  />
 );

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

@@ -21,7 +21,6 @@ a different route (as with a link) connect() and use "push" from connected-react
 const getApplicationNode = () => document.getElementById("root");
 
 const Modal = ({
-  ModalLink,
   hideModal,
   continueAction,
   cancelAction,
@@ -36,12 +35,12 @@ const Modal = ({
   defaultWrapper = true,
   onlyCloseButton = false,
   maxHeight,
-  underlayClickExits = true
+  underlayClickExits = true,
+  children
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
     <Fragment>
-      <ModalLink />
       {modalOpen && (
         <AriaModal
           onExit={hideModal}
@@ -134,6 +133,7 @@ const Modal = ({
           </Box>
         </AriaModal>
       )}
+      {children}
     </Fragment>
   );
 };

package/src/components/molecules/obligation/modules/AmountModule.stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import AmountModule from "./AmountModule";
+import page from "../../../../../.storybook/page";
+import { noop } from "../../../../util/general";
+
+const groupId = "props";
+
+export const amountModule = () => (
+  <AmountModule
+    totalAmountDue={text("totalAmountDue", "123", groupId)}
+    autoPayEnabled={boolean("autopayEnabled", true, groupId)}
+    isMobile={boolean("isMobile", false, groupId)}
+    deactivatePaymentSchedule={noop}
+    navigateToSettings={noop}
+    autoPaySchedule={{}}
+    paymentPlanSchedule={{}}
+    isPaymentPlan={boolean("isPaymentPlan", false, groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/AmountModule",
+  Component: AmountModule
+});
+export default story;

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

@@ -1,6 +1,7 @@
 import React from "react";
 import Modal from "../../modal";
 import ButtonWithAction from "../../../atoms/button-with-action";
+import Text from "../../../atoms/text";
 import { AutopayOnIcon } from "../../../atoms/icons";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { fallbackValues } from "./AutopayModalModule.theme";
@@ -61,48 +62,56 @@ const AutopayModal = ({
      `;
   return (
     <Modal
-      ModalLink={() =>
-        buttonLinkType ? (
-          <ButtonWithAction
-            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
-            variant="tertiary"
-            action={() => {
-              toggleModal(true);
-            }}
-            dataQa="Manage Autopay"
-            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-          />
-        ) : (
-          <Box
-            padding="0"
-            onClick={() => {
-              toggleModal(true);
-            }}
-            hoverStyles={hoverStyles}
-            activeStyles={activeStyles}
-            extraStyles={defaultStyles}
-          >
-            <Cluster
-              justify={isMobile ? "flex-start" : "flex-end"}
-              align="center"
-            >
-              <AutopayOnIcon />
-              <ButtonWithAction
-                text={`${planType} On`}
-                variant="smallGhost"
-                dataQa="Autopay On"
-                textExtraStyles={`font-size: 0.875rem; `}
-                extraStyles={`min-width: auto; padding: 0 0 0 6px;`}
-              />
-            </Cluster>
-          </Box>
-        )
-      }
       showModal={() => toggleModal(true)}
       hideModal={() => toggleModal(false)}
       modalOpen={modalOpen}
       {...modalExtraProps}
-    />
+    >
+      {buttonLinkType ? (
+        <ButtonWithAction
+          text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+          variant="tertiary"
+          action={() => {
+            toggleModal(true);
+          }}
+          dataQa="Manage Autopay"
+          extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+        />
+      ) : (
+        <Box
+          padding="0"
+          onClick={() => {
+            toggleModal(true);
+          }}
+          hoverStyles={hoverStyles}
+          activeStyles={activeStyles}
+          extraStyles={defaultStyles}
+        >
+          <Cluster
+            justify={isMobile ? "flex-start" : "flex-end"}
+            align="center"
+          >
+            <AutopayOnIcon />
+            <Text
+              variant="pS"
+              onClick={() => toggleModal(true)}
+              onKeyPress={e => {
+                console.log({ e });
+                e.key === "Enter" && toggleModal(true);
+              }}
+              tabIndex="0"
+              dataQa={`${planType} On`}
+              color={themeValues.linkColor}
+              weight={themeValues.fontWeight}
+              hoverStyles={themeValues.modalLinkHoverFocus}
+              extraStyles={`padding: 0 0 0 6px;`}
+            >
+              {`${planType} On`}
+            </Text>
+          </Cluster>
+        </Box>
+      )}
+    </Modal>
   );
 };
 

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

@@ -1,9 +1,20 @@
+import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
+
 const color = "#15749D";
 const hoverColor = "#116285";
 const activeColor = "#0E506D";
+const linkColor = "#357fb8";
+const fontWeight = FONT_WEIGHT_REGULAR;
+const modalLinkHoverFocus = `outline: none;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: #357fb8;`;
 
 export const fallbackValues = {
   color,
   hoverColor,
-  activeColor
+  activeColor,
+  linkColor,
+  fontWeight,
+  modalLinkHoverFocus
 };