@thecb/components 3.6.0-beta.2 → 4.0.0

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/index.js

@@ -13,6 +13,7 @@ export { default as Module } from "./module";
 export * from "./nav-menu";
 export { default as Obligation } from "./obligation";
 export * from "./partial-amount-form";
+export { default as Pagination } from "./pagination";
 export { default as PaymentButtonBar } from "./payment-button-bar";
 export { default as PaymentDetails } from "./payment-details";
 export { default as PaymentFormACH } from "./payment-form-ach";

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

@@ -0,0 +1,149 @@
+import React from "react";
+import { Cluster, Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { ChevronIcon } from "../../atoms/icons";
+import { MATISSE_BLUE, ALABASTER_WHITE } from "../../../constants/colors";
+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, numberColor }) => (
+  <Box padding="0 10px 0" minHeight="40px" extraStyles="max-height: 40px;">
+    <ButtonWithAction
+      action={action}
+      contentOverride
+      dataQa={type}
+      extraStyles={`
+        min-width: 40px;
+        min-height: 100%;
+        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" iconFill={arrowColor} />
+      </Box>
+    </ButtonWithAction>
+  </Box>
+);
+
+export const getPagesPanel = (page, pagesCount) => {
+  if (!pagesCount || pagesCount <= 1) {
+    return [];
+  }
+  const lastPageNumber = pagesCount;
+  const space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
+  const pages = [{ index: 1, isButton: true }];
+  if (page > space + 1) {
+    pages.push({ isDelimiter: true });
+  }
+  for (
+    let j = Math.max(1, page - space) + 1;
+    j < Math.min(lastPageNumber, page + space);
+    j++
+  ) {
+    pages.push({ index: j, isButton: true });
+  }
+  if (page < lastPageNumber - space) {
+    pages.push({ isDelimiter: true });
+  }
+  pages.push({ index: lastPageNumber, isButton: true });
+  const activePage = pages.find(p => p.index === page);
+  if (activePage) {
+    activePage.active = true;
+  }
+  return pages;
+};
+
+const Pagination = ({
+  pagePrevious,
+  pageNext,
+  setCurrentPage,
+  currentPage,
+  pageCount,
+  numberColor,
+  arrowColor
+}) => (
+  <Cluster justify="center" childGap="10px">
+    {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 ${numberColor ?? MATISSE_BLUE}`}
+          borderRadius={item.active && "3px"}
+          extraStyles="max-height: 40px;"
+        >
+          <ButtonWithAction
+            variant="ghost"
+            key={item.index}
+            text={item.index}
+            disabled={item.active}
+            action={
+              !item.active
+                ? () => setCurrentPage({ pageNumber: item.index })
+                : noop
+            }
+            textExtraStyles={`font-size: 17px; font-weight: 900;`}
+            extraStyles={`
+              min-width: 40px; min-height: 100%; padding: 0;
+              &:hover, &:focus {
+                text-decoration: none;
+                > * > span {
+                  text-decoration: none;
+                }
+              }
+              > * > span {
+                color: ${numberColor ?? MATISSE_BLUE}
+              }
+            }
+            &:hover { ${
+              item.active
+                ? "cursor: default;"
+                : `background-color: ${ALABASTER_WHITE}`
+            } }
+            `}
+            dataQa={index}
+          >
+            {item.index}
+          </ButtonWithAction>
+        </Box>
+      ) : (
+        <Box padding="0 10px">
+          <Cluster justify="flex-end">
+            <Text
+              key={index}
+              variant="pXL"
+              weight="900"
+              color={numberColor ?? MATISSE_BLUE}
+            >
+              {"..."}
+            </Text>
+          </Cluster>
+        </Box>
+      )
+    )}
+    {currentPage < pageCount && (
+      <PrevNextButton
+        type="next"
+        action={pageNext}
+        arrowColor={arrowColor}
+        numberColor={numberColor}
+      />
+    )}
+  </Cluster>
+);
+
+export default Pagination;

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

@@ -0,0 +1,3 @@
+import Pagination from "./Pagination";
+
+export default Pagination;

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>