@thecb/components 4.1.13 → 4.1.14-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.13",
+  "version": "4.1.14-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";
@@ -87,58 +87,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-layouts/FormLayouts.theme.js

@@ -1,5 +1,5 @@
 import {
-  FIREFLY_GREY,
+  CHARADE_GREY,
   MATISSE_BLUE,
   WHITE,
   SEASHELL_WHITE,
@@ -23,7 +23,7 @@ const inputBackgroundColor = {
   disabled: `${SEASHELL_WHITE}`
 };
 const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
-const labelColor = { default: `${FIREFLY_GREY}`, disabled: `${FIREFLY_GREY}` };
+const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
 const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
 const lineHeight = { default: "1rem", disabled: "1rem" };
 const fontSize = { default: "0.875rem", disabled: "0.875rem" };

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

@@ -1,8 +1,11 @@
 import React, { useState, useRef, useEffect } from "react";
 import Dropdown from "../dropdown";
 import Text from "../text";
-import { STORM_GREY } from "../../../constants/colors";
+import { ERROR_COLOR } from "../../../constants/colors";
 import { SelectContainer, SelectLabel } from "./FormSelect.styled";
+import { fallbackValues } from "./FormSelect.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { Box, Cluster } from "../layouts";
 
 const FormSelect = ({
   fieldActions,
@@ -12,7 +15,9 @@ const FormSelect = ({
   field,
   showErrors,
   onChange,
-  dropdownMaxHeight
+  dropdownMaxHeight,
+  disabledValues,
+  themeValues
 }) => {
   const [open, setOpen] = useState(false);
   const dropdownRef = useRef(null);
@@ -32,33 +37,63 @@ const FormSelect = ({
 
   return (
     <SelectContainer ref={dropdownRef}>
-      <Text
-        variant="pS"
-        color={STORM_GREY}
-        weight="400"
-        extraStyles={`margin-bottom: 4px;`}
-      >
-        {labelTextWhenNoError}
-      </Text>
+      <Box padding="0" minWidth="100%">
+        <Cluster justify="space-between" align="center">
+          <Text
+            as="label"
+            variant="pS"
+            color={themeValues.labelColor}
+            weight={themeValues.fontWeight}
+            extraStyles={`word-break: break-word;
+              font-family: Public Sans;
+              &::first-letter {
+                text-transform: uppercase;
+              }`}
+          >
+            {labelTextWhenNoError}
+          </Text>
+        </Cluster>
+      </Box>
       <Dropdown
         maxHeight={dropdownMaxHeight}
         placeholder={options[0] ? options[0].text : ""}
         options={options}
         value={field.rawValue}
+        disabledValues={disabledValues}
         isOpen={open}
-        isError={false}
+        isError={
+          (field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
+        }
         onSelect={
           onChange ? value => onChange(value) : value => fieldActions.set(value)
         }
         onClick={() => setOpen(!open)}
       />
       <SelectLabel field={field} showErrors={showErrors}>
-        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors)
-          ? errorMessages[field.errors[0]]
-          : null}
+        {(field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (
+          <Text
+            color={ERROR_COLOR}
+            variant="pXS"
+            weight={themeValues.fontWeight}
+            extraStyles={`word-break: break-word;
+                font-family: Public Sans;
+                &::first-letter {
+                  text-transform: uppercase;
+                }`}
+          >
+            {errorMessages[field.errors[0]]}
+          </Text>
+        ) : (
+          <Text extraStyles={`height: ${themeValues.lineHeight};`} />
+        )}
       </SelectLabel>
     </SelectContainer>
   );
 };
 
-export default FormSelect;
+export default themeComponent(
+  FormSelect,
+  "FormSelect",
+  fallbackValues,
+  "default"
+);

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { connect } from "react-redux";
-import { boolean } from "@storybook/addon-knobs";
 import { createFormState, required } from "redux-freeform";
 
 import FormSelect from "./FormSelect";
@@ -18,7 +17,8 @@ const options = [
   { value: "", text: "choose name" },
   { value: "foo", text: "foo" },
   { value: "bar", text: "bar" },
-  { value: "baz", text: "baz" }
+  { value: "baz", text: "baz" },
+  { value: "disabled", text: "disabled" }
 ];
 
 const story = page({
@@ -32,10 +32,12 @@ const story = page({
 
 const FormWrapper = ({ fields, actions }) => (
   <FormSelect
+    labelTextWhenNoError="Form Select"
     errorMessages={errorMessages}
     options={options}
     field={fields.thing}
     fieldActions={actions.fields.thing}
+    disabledValues={["disabled"]}
   />
 );
 

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

@@ -1,10 +1,6 @@
 import styled from "styled-components";
 import {
-  MINESHAFT_GREY,
   STORM_GREY,
-  WHITE,
-  SEASHELL_WHITE,
-  DUSTY_GREY,
   GHOST_GREY,
   ERROR_COLOR,
   MATISSE_BLUE
@@ -17,6 +13,9 @@ export const SelectContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
+  > * + * {
+    margin-top: 0.25rem;
+  }
 `;
 
 export const SelectLabel = styled.label`
@@ -53,8 +52,9 @@ export const SelectField = styled.select`
   font-family: Public Sans;
   line-height: 2rem;
   font-weight: ${FONT_WEIGHT_REGULAR};
-  background-color: ${({ disabled }) => (disabled ? SEASHELL_WHITE : WHITE)};
-  color: ${({ disabled }) => (disabled ? DUSTY_GREY : MINESHAFT_GREY)};
+  background-color: ${({ themeValues }) =>
+    themeValues.inputBackgroundColor && themeValues.inputBackgroundColor};
+  color: ${({ themeValues }) => themeValues.color && themeValues.color};
   box-shadow: none;
 
   &:focus {

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

@@ -0,0 +1,52 @@
+import {
+  CHARADE_GREY,
+  MATISSE_BLUE,
+  WHITE,
+  SEASHELL_WHITE,
+  MINESHAFT_GREY,
+  DUSTY_GREY,
+  GREY_CHATEAU,
+  ATHENS_GREY
+} from "../../../constants/colors";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+
+const linkColor = { default: `${MATISSE_BLUE}`, disabled: `${MATISSE_BLUE}` };
+const formBackgroundColor = {
+  default: `${WHITE}`,
+  disabled: `${WHITE}`,
+  checkout: `${ATHENS_GREY}`,
+  collapsible: `${ATHENS_GREY}`
+};
+
+const inputBackgroundColor = {
+  default: `${WHITE}`,
+  disabled: `${SEASHELL_WHITE}`
+};
+const color = { default: `${MINESHAFT_GREY}`, disabled: `${DUSTY_GREY}` };
+const labelColor = { default: `${CHARADE_GREY}`, disabled: `${CHARADE_GREY}` };
+const borderColor = { default: `${GREY_CHATEAU}`, disabled: `${GREY_CHATEAU}` };
+const lineHeight = { default: "1rem", disabled: "1rem" };
+const fontSize = { default: "0.875rem", disabled: "0.875rem" };
+const errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
+const fontWeight = {
+  default: `${FONT_WEIGHT_REGULAR}`,
+  disabled: `${FONT_WEIGHT_REGULAR}`
+};
+const hoverFocusStyles = {
+  default: `color: #0E506D; outline: none; text-decoration: underline;  `,
+  disabled: `color: #6E727E;`
+};
+
+export const fallbackValues = {
+  linkColor,
+  formBackgroundColor,
+  inputBackgroundColor,
+  color,
+  labelColor,
+  borderColor,
+  lineHeight,
+  fontSize,
+  errorFontSize,
+  fontWeight,
+  hoverFocusStyles
+};

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;