@thecb/components 3.7.0-beta.1 → 4.0.2

package/src/components/atoms/radio-button/RadioButton.stories.js

@@ -1,69 +1,34 @@
 import React, { useState } from "react";
-import { withKnobs, text, radios } from "@storybook/addon-knobs";
+import { boolean } from "@storybook/addon-knobs";
 import RadioButton from "./RadioButton";
-import { Box, Cover, Center } from "../layouts";
-import { ThemeProvider } from "styled-components";
-
-const fakeTheme = {
-  RadioButton: {
-    activeColor: "#15749D",
-    inactiveColor: "#959CA8"
-  }
-};
-
-export default {
-  title: "Radio Button",
-  component: RadioButton,
-  decorators: [
-    withKnobs,
-    storyFn => (
-      <ThemeProvider
-        theme={{
-          name: text("Theme Name", "default"),
-          values: fakeTheme
-        }}
-      >
-        <Cover>
-          <div />
-          <Center>{storyFn()}</Center>
-          <div />
-        </Cover>
-      </ThemeProvider>
-    )
-  ]
-};
+import { Box } from "../layouts";
+import page from "../../../../.storybook/page";
 
 export const radioButtonsDefault = () => {
-  const buttons = 3;
-
   const [selected, setSelected] = useState(null);
   const [focused, setFocused] = useState(null);
 
-  return [...Array(buttons).keys()].map(i => {
-    const name = `radio-button-${i}`;
-    return (
-      <Box
-        key={name}
-        onFocus={() => setFocused(name)}
-        onBlur={() => setFocused(null)}
-        extraStyles="outline: none;"
-        tabIndex="0"
-      >
-        <RadioButton
-          name={name}
-          radioOn={selected === name}
-          radioFocused={focused === name}
-          toggleRadio={() => setSelected(name)}
-          disabled={
-            radios(
-              "Disable Radio Buttons",
-              { Enabled: "enabled", Disabled: "disabled" },
-              "enabled",
-              "RADIO-GROUP-1"
-            ) === "disabled"
-          }
-        />
-      </Box>
-    );
-  });
+  return (
+    <Box
+      onFocus={() => setFocused(name)}
+      onBlur={() => setFocused(null)}
+      extraStyles="outline: none;"
+      tabIndex="0"
+    >
+      <RadioButton
+        name="demo"
+        radioOn={selected === name}
+        radioFocused={focused === name}
+        toggleRadio={() => setSelected(name)}
+        disabled={boolean("disabled", false, "props")}
+      />
+    </Box>
+  );
 };
+
+const story = page({
+  title: "Components|Atoms/RadioButton",
+  Component: RadioButton
+});
+
+export default story;

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

@@ -171,6 +171,7 @@ const ToggleSwitch = ({
               dataQa={dataQa}
             >
               <HiddenToggleSwitchBox
+                aria-label={name}
                 checked={isOn}
                 onChange={disabled ? noop : onToggle}
                 disabled={disabled}

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 }) => (
+const PrevNextButton = ({ action, type, arrowColor, numberColor }) => (
   <Box padding="0 10px 0" minHeight="40px" extraStyles="max-height: 40px;">
     <ButtonWithAction
       action={action}
@@ -21,10 +21,12 @@ const PrevNextButton = ({ action, type }) => (
         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)"}>
-        <ChevronIcon variant="darkMode" />
+        <ChevronIcon variant="darkMode" iconFill={arrowColor} />
       </Box>
     </ButtonWithAction>
   </Box>
@@ -63,15 +65,24 @@ const Pagination = ({
   pageNext,
   setCurrentPage,
   currentPage,
-  pageCount
+  pageCount,
+  numberColor,
+  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
           padding="0"
-          border={item.active && `1px solid ${MATISSE_BLUE}`}
+          border={item.active && `1px solid ${numberColor ?? MATISSE_BLUE}`}
           borderRadius={item.active && "3px"}
           extraStyles="max-height: 40px;"
         >
@@ -94,6 +105,9 @@ const Pagination = ({
                   text-decoration: none;
                 }
               }
+              > * > span {
+                color: ${numberColor ?? MATISSE_BLUE}
+              }
             }
             &:hover { ${
               item.active
@@ -109,7 +123,12 @@ const Pagination = ({
       ) : (
         <Box padding="0 10px">
           <Cluster justify="flex-end">
-            <Text key={index} variant="pXL" weight="900" color={MATISSE_BLUE}>
+            <Text
+              key={index}
+              variant="pXL"
+              weight="900"
+              color={numberColor ?? MATISSE_BLUE}
+            >
               {"..."}
             </Text>
           </Cluster>
@@ -117,7 +136,12 @@ const Pagination = ({
       )
     )}
     {currentPage < pageCount && (
-      <PrevNextButton type="next" action={pageNext} />
+      <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;
 };