@thecb/components 3.7.0-beta.2 → 4.0.0

package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js

@@ -1,60 +1,12 @@
 import React, { useState, Fragment } from "react";
-import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import { boolean } from "@storybook/addon-knobs";
 import ToggleSwitch from "./ToggleSwitch";
-import { Cover, Center, Stack } from "../layouts";
-import { ThemeProvider } from "styled-components";
-
-const fakeTheme = {
-  ToggleSwitch: {
-    onBackground: "#15749D",
-    disabledBackground: "#D5D8DC",
-    white: "white",
-    offBackground: "#959EA7",
-    rightLabelStyles: `display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-direction: row;`,
-    leftLabelStyles: `display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        flex-direction: row-reverse;`
-  }
-};
-
-export default {
-  title: "Toggle Switch",
-  component: ToggleSwitch,
-  decorators: [
-    withKnobs,
-    storyFn => (
-      <ThemeProvider
-        theme={{
-          name: text("Theme Name", "default"),
-          values: fakeTheme
-        }}
-      >
-        <Cover>
-          <div />
-          <Center>
-            <Stack>{storyFn()}</Stack>
-          </Center>
-          <div />
-        </Cover>
-      </ThemeProvider>
-    )
-  ]
-};
+import page from "../../../../.storybook/page";
 
 export const toggleSwitchDefault = () => {
   const [isOn, onToggle] = useState(false);
 
-  const disabled =
-    radios(
-      "Disable Toggle Switch",
-      { Enabled: "enabled", Disabled: "disabled" },
-      "enabled",
-      "RADIO-GROUP-1"
-    ) === "disabled";
+  const disabled = boolean("disabled", false, "props");
 
   return (
     <Fragment>
@@ -68,3 +20,10 @@ export const toggleSwitchDefault = () => {
     </Fragment>
   );
 };
+
+const story = page({
+  title: "Components|Atoms/ToggleSwitch",
+  Component: ToggleSwitch
+});
+
+export default story;

package/src/components/molecules/editable-list/EditableList.js

@@ -55,24 +55,25 @@ const EditableList = ({
         extraStyles={`box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),
     0px 3px 8px 0px rgb(202, 206, 216);`}
       >
-        {items.map(props => {
+        {items.map(item => {
           const [modalOpen, toggleModal] = useState(false);
           return (
             <EditableListItem
               listItemSize={
-                !!props.id && props.id === autoPayMethod ? "big" : listItemSize
+                !!item.id && item.id === autoPayMethod ? "big" : listItemSize
               }
-              key={props.id}
+              key={item.id || item}
             >
               <Text variant="p" color={CHARADE_GREY}>
-                {renderItem(props)}
+                {renderItem(item)}
               </Text>
               <EditableListItemControls>
-                {props.isPrimary && (
+                {item.isPrimary && (
                   <Text
                     variant="p"
                     color={STORM_GREY}
                     extraStyles={`font-style: italic;`}
+                    key={`Default ${itemName}`}
                   >
                     Default {itemName}
                   </Text>
@@ -83,10 +84,11 @@ const EditableList = ({
                     border="2px solid transparent"
                     extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
                     dataQa={qaPrefix + " Remove"}
+                    key={`Remove ${item.id}`}
                   >
                     {useModal ? (
                       <Modal
-                        item={{ ...props }}
+                        item={{ ...item }}
                         {...modalProps}
                         modalOpen={modalOpen}
                         toggleModal={toggleModal}
@@ -95,7 +97,7 @@ const EditableList = ({
                       <ButtonWithAction
                         variant="smallGhost"
                         text="Remove"
-                        action={() => removeItem(props.id)}
+                        action={() => removeItem(item.id)}
                         extraStyles={`min-width: 0;`}
                       />
                     )}
@@ -107,11 +109,12 @@ const EditableList = ({
                     border="2px solid transparent"
                     extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
                     dataQa={qaPrefix + " Edit"}
+                    key={`Edit ${item.id}`}
                   >
                     <ButtonWithAction
                       variant="smallGhost"
                       text="Edit"
-                      action={() => editItem(props.id)}
+                      action={() => editItem(item.id)}
                       extraStyles={`min-width: 0;`}
                     />
                   </Box>

package/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -4,6 +4,7 @@ import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 
 const NavMenuDesktop = ({
+  id,
   top = "125%",
   left = "-100%",
   menuContent = [],
@@ -17,7 +18,7 @@ const NavMenuDesktop = ({
   const menuCarat = `&:after { bottom: 100%; right: 10px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: ${themeValues.backgroundColor}00; border-bottom-color: ${themeValues.backgroundColor}; border-width: 10px; margin-left: -10px; }`;
 
   return (
-    <Imposter breakout top={top} left={left} visible={visible}>
+    <Imposter id={id} breakout top={top} left={left} visible={visible}>
       <Box
         minWidth="240px"
         padding="1rem 0.5rem"

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -42,9 +42,15 @@ const ImposterMenu = styled(menu)`
   top: 72px;
 `;
 
-const NavMenuMobile = ({ menuContent = [], visible = false, themeValues }) => {
+const NavMenuMobile = ({
+  id,
+  menuContent = [],
+  visible = false,
+  themeValues
+}) => {
   return (
     <ImposterMenu
+      id={id}
       initialPose="invisible"
       pose={visible ? "visible" : "invisible"}
     >

package/src/components/molecules/obligation/Obligation.js

@@ -39,13 +39,15 @@ const Obligation = ({
             >
               <Box padding="0">
                 <Cluster justify="flex-start" align="center">
-                  <IconModule
-                    icon={config.icon}
-                    iconDefault={config.iconDefault}
-                    configIconMap={config.iconMap}
-                    iconValue={config.iconValue}
-                    customAttributes={customAttributes}
-                  />
+                  {!isMobile && (
+                    <IconModule
+                      icon={config.icon}
+                      iconDefault={config.iconDefault}
+                      configIconMap={config.iconMap}
+                      iconValue={config.iconValue}
+                      customAttributes={customAttributes}
+                    />
+                  )}
                   <TitleModule
                     title={obligation.description}
                     subtitle={obligation.subDescription}

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

@@ -54,29 +54,17 @@ const PaymentDetailsActions = ({
           borderWidthOverride="0 0 1px 0"
         >
           <Cluster justify="space-between" align="center" nowrap>
-            <Box padding="0" width="100%">
-              <AmountModule
-                totalAmountDue={obligations.reduce(
-                  (acc, curr) => acc + curr.amountDue,
-                  0
-                )}
-                autoPayEnabled={autoPayEnabled}
-                isMobile={isMobile}
-                deactivatePaymentSchedule={deactivatePaymentSchedule}
-                navigateToSettings={navigateToSettings}
-                autoPaySchedule={autoPaySchedule}
-              />
-            </Box>
-            <Box padding="0" width="100%">
-              <ButtonWithAction
-                isLoading={isLoading}
-                action={() => handleClick(obligations)}
-                text="Pay Now"
-                variant={isMobile ? "smallSecondary" : "secondary"}
-                dataQa="Pay Now"
-                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-              />
-            </Box>
+            <AmountModule
+              totalAmountDue={obligations.reduce(
+                (acc, curr) => acc + curr.amountDue,
+                0
+              )}
+              autoPayEnabled={autoPayEnabled}
+              isMobile={isMobile}
+              deactivatePaymentSchedule={deactivatePaymentSchedule}
+              navigateToSettings={navigateToSettings}
+              autoPaySchedule={autoPaySchedule}
+            />
           </Cluster>
         </Box>
       )}
@@ -146,6 +134,18 @@ const PaymentDetailsActions = ({
             </Box>
           )}
         </Cluster>
+        {isMobile && (
+          <Box padding="8px 0 0" width="100%">
+            <ButtonWithAction
+              isLoading={isLoading}
+              action={() => handleClick(obligations)}
+              text="Pay Now"
+              variant={isMobile ? "smallSecondary" : "secondary"}
+              dataQa="Pay Now"
+              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+            />
+          </Box>
+        )}
       </Box>
     </Box>
   );

package/src/components/molecules/pagination/Pagination.js

@@ -9,7 +9,7 @@ import { noop } from "../../../util/general";
 const PAGING_SPACE = 2; // how many pages we want to have before/after delimiter
 const PAGING_INIT_SPACE = 3; // first delimiter should appear after 3 pages
 
-const PrevNextButton = ({ action, type, arrowColor }) => (
+const PrevNextButton = ({ action, type, arrowColor, numberColor }) => (
   <Box padding="0 10px 0" minHeight="40px" extraStyles="max-height: 40px;">
     <ButtonWithAction
       action={action}
@@ -21,6 +21,8 @@ const PrevNextButton = ({ action, type, arrowColor }) => (
         max-height: 40px;
         padding: 6px;
         border-radius: 3px;
+        background-color: ${numberColor ?? MATISSE_BLUE};
+        border-color: ${numberColor ?? MATISSE_BLUE}
       `}
     >
       <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
@@ -68,7 +70,14 @@ const Pagination = ({
   arrowColor
 }) => (
   <Cluster justify="center" childGap="10px">
-    {currentPage > 1 && <PrevNextButton type="prev" action={pagePrevious} />}
+    {currentPage > 1 && (
+      <PrevNextButton
+        type="prev"
+        action={pagePrevious}
+        arrowColor={arrowColor}
+        numberColor={numberColor}
+      />
+    )}
     {getPagesPanel(currentPage, pageCount).map((item, index) =>
       item.isButton ? (
         <Box
@@ -96,7 +105,9 @@ const Pagination = ({
                   text-decoration: none;
                 }
               }
-              color: ${numberColor ?? MATISSE_BLUE}
+              > * > span {
+                color: ${numberColor ?? MATISSE_BLUE}
+              }
             }
             &:hover { ${
               item.active
@@ -125,7 +136,12 @@ const Pagination = ({
       )
     )}
     {currentPage < pageCount && (
-      <PrevNextButton type="next" action={pageNext} arrowColor={arrowColor} />
+      <PrevNextButton
+        type="next"
+        action={pageNext}
+        arrowColor={arrowColor}
+        numberColor={numberColor}
+      />
     )}
   </Cluster>
 );

package/src/components/molecules/radio-section/RadioSection.js

@@ -122,12 +122,12 @@ const RadioSection = ({
                       : themeValues.headingBackgroundColor
                   }
                   onClick={
-                    isMobile && supportsTouch
+                    (isMobile && supportsTouch) || section.disabled
                       ? noop
                       : () => toggleOpenSection(section.id)
                   }
                   onTouchEnd={
-                    isMobile && supportsTouch
+                    (isMobile && supportsTouch) || !section.disabled
                       ? () => toggleOpenSection(section.id)
                       : noop
                   }
@@ -155,7 +155,11 @@ const RadioSection = ({
                             name={section.id}
                             radioOn={openSection === section.id}
                             radioFocused={focused === section.id}
-                            toggleRadio={() => toggleOpenSection(section.id)}
+                            toggleRadio={
+                              section.disabled
+                                ? noop
+                                : () => toggleOpenSection(section.id)
+                            }
                             tabIndex="-1"
                           />
                         </Box>

package/src/deprecated/components/radio-button/radio-button.js

@@ -36,7 +36,11 @@ const RadioButtonCenter = styled.div`
 RadioButtonCenter.defaultProps = defaultTheme;
 
 const RadioButton = ({ isSelected, name }) => (
-  <RadioButtonBorder isSelected={isSelected} name={name}>
+  <RadioButtonBorder
+    isSelected={isSelected}
+    name={name}
+    aria-checked={isSelected}
+  >
     {isSelected && <RadioButtonCenter />}
   </RadioButtonBorder>
 );

package/src/deprecated/icons/IconInvalid.js

@@ -16,47 +16,23 @@ export const IconInvalid = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     style={{ margin }}
+    aria-label="Invalid"
   >
-    <g
-      id="icon-invalid-Authentication"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
-    >
-      <g
-        id="icon-invalid-00.1.0.1---HSS---Register---Already-Exists-Error"
-        transform="translate(-538.000000, -1064.000000)"
-        fillRule="nonzero"
-      >
-        <g
-          id="icon-invalid-Password-Requirements"
-          transform="translate(457.000000, 938.000000)"
-        >
-          <g
-            id="icon-invalid-Group-2"
-            transform="translate(81.000000, 20.000000)"
-          >
-            <g
-              id="icon-invalid-PasswordVerification-Error"
-              transform="translate(0.000000, 106.000000)"
-            >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-538.000000, -1064.000000)" fillRule="nonzero">
+        <g transform="translate(457.000000, 938.000000)">
+          <g transform="translate(81.000000, 20.000000)">
+            <g transform="translate(0.000000, 106.000000)">
               <circle
-                id="icon-invalid-Oval"
                 stroke={bgFill}
                 fill={bgFill}
                 cx="9"
                 cy="9"
                 r="8.5"
               ></circle>
-              <g
-                id="icon-invalid-Icon/Close"
-                transform="translate(2.000000, 2.000000)"
-                fill={iconFill}
-              >
+              <g transform="translate(2.000000, 2.000000)" fill={iconFill}>
                 <path
                   d="M7.58333333,7.58333333 L7.58333333,11.6666667 L6.41666667,11.6666667 L6.41666667,7.58333333 L2.33333333,7.58333333 L2.33333333,6.41666667 L6.41666667,6.41666667 L6.41666667,2.33333333 L7.58333333,2.33333333 L7.58333333,6.41666667 L11.6666667,6.41666667 L11.6666667,7.58333333 L7.58333333,7.58333333 Z"
-                  id="icon-invalid-x"
                   transform="translate(7.000000, 7.000000) rotate(45.000000) translate(-7.000000, -7.000000) "
                 ></path>
               </g>

package/src/deprecated/icons/IconNeutral.js

@@ -15,11 +15,12 @@ export const IconNeutral = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     style={{ margin }}
+    aria-label="Neutral"
   >
-    <g id="icon-neutral-group" fill={fill} fillRule="nonzero" stroke={fill}>
-      <g id="icon-neutral-Group-2">
-        <g id="icon-neutral-PasswordVerification-Empty">
-          <circle id="icon-neutral-Oval" cx="9" cy="9" r="8.5"></circle>
+    <g fill={fill} fillRule="nonzero" stroke={fill}>
+      <g>
+        <g>
+          <circle cx="9" cy="9" r="8.5"></circle>
         </g>
       </g>
     </g>

package/src/deprecated/icons/IconValid.js

@@ -16,32 +16,14 @@ export const IconValid = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     style={{ margin }}
+    aria-label="Valid"
   >
-    <g
-      id="icon-valid-Authentication"
-      stroke="none"
-      strokeWidth="1"
-      fill="none"
-      fillRule="evenodd"
-    >
-      <g
-        id="icon-valid-00.1.0.1---HSS---Register---Already-Exists-Error"
-        transform="translate(-538.000000, -996.000000)"
-      >
-        <g
-          id="icon-valid-Password-Requirements"
-          transform="translate(457.000000, 938.000000)"
-        >
-          <g
-            id="icon-valid-Group-2"
-            transform="translate(81.000000, 20.000000)"
-          >
-            <g
-              id="icon-valid-PasswordVerification-Sucess"
-              transform="translate(0.000000, 38.000000)"
-            >
+    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g transform="translate(-538.000000, -996.000000)">
+        <g transform="translate(457.000000, 938.000000)">
+          <g transform="translate(81.000000, 20.000000)">
+            <g transform="translate(0.000000, 38.000000)">
               <circle
-                id="icon-valid-Oval"
                 stroke={bgFill}
                 fill={bgFill}
                 fillRule="nonzero"
@@ -49,16 +31,9 @@ export const IconValid = ({
                 cy="9"
                 r="8.5"
               ></circle>
-              <g
-                id="icon-valid-baseline-check-24px"
-                transform="translate(2.000000, 2.000000)"
-              >
+              <g transform="translate(2.000000, 2.000000)">
+                <polygon points="0 0 14 0 14 14 0 14"></polygon>
                 <polygon
-                  id="icon-valid-Path"
-                  points="0 0 14 0 14 14 0 14"
-                ></polygon>
-                <polygon
-                  id="icon-valid-Path-2"
                   fill={iconFill}
                   points="5.25 9.4325 2.8175 7 1.98916667 7.8225 5.25 11.0833333 12.25 4.08333333 11.4275 3.26083333"
                 ></polygon>

package/src/util/general.js

@@ -1,3 +1,4 @@
+import React, { Fragment } from "react";
 import numeral from "numeral";
 
 export const noop = () => {};
@@ -9,9 +10,17 @@ export const displayCurrency = cents =>
 
 export const convertCentsToMoneyInt = n => (n / 100).toFixed(0);
 
+const createUniqueId = () =>
+  "_" +
+  Math.random()
+    .toString(36)
+    .substr(2, 9);
+
 export const safeChildren = (children, replacement = []) => {
   if (children && children instanceof Array) {
-    return children.map(child => (!child ? replacement : child));
+    return children.map(child =>
+      !child ? <Fragment key={createUniqueId()}>{replacement}</Fragment> : child
+    );
   }
   return !children ? replacement : children;
 };

package/src/components/molecules/content/Content.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { blockRegistry } from "./blocks";
-import { themeComponent } from "../../util/themeUtils";
-import { fallbackValues } from "./Content.theme";
-
-const Content = ({
-  blockName,
-  defaultBlockName = "TextBlock",
-  pageType,
-  ...rest
-}) => {
-  console.log("other props", rest);
-  console.log("block name is", blockName);
-  const Block = blockRegistry?.[blockName] ?? blockRegistry[defaultBlockName];
-  console.log("pageType is....", pageType);
-
-  return <Block {...rest} useDarkText={pageType === "ActionPage"} />;
-};
-
-export default themeComponent(Content, "Content", fallbackValues, "default");

package/src/components/molecules/content/Content.theme.js

@@ -1,60 +0,0 @@
-const lightTextSingle = {
-  placeholder: ["#E5E7EC"],
-  default: "#FFFFFF"
-};
-
-const darkTextSingle = {
-  placeholder: ["#292A33"],
-  default: "#000000"
-};
-
-const lightText = {
-  placeholder: ["#E5E7EC", "#FFFFFF"],
-  default: "#FFFFFF"
-};
-
-const darkText = {
-  placeholder: ["#292A33", "#000000", "#31A9E1"],
-  default: "#000000"
-};
-
-const darkAccentText = {
-  placeholder: ["#0E506D"],
-  default: "#0E506D"
-};
-
-const lightAccentText = {
-  placeholder: ["#31A9E1"],
-  default: "#31A9E1"
-};
-
-const textDecoration = "#E5E7EC";
-
-const shape = {
-  placeholder: "#31A9E1"
-};
-
-const background = {
-  placeholder: "#002A62",
-  default: "#002A62"
-};
-
-const linkColor = {
-  default: "#31A9E1"
-};
-
-const pageBackground = "#F6F6F9";
-
-export const fallbackValues = {
-  lightTextSingle,
-  darkTextSingle,
-  lightText,
-  darkText,
-  lightAccentText,
-  darkAccentText,
-  textDecoration,
-  shape,
-  background,
-  pageBackground,
-  linkColor
-};