@thecb/components 3.5.14 → 3.5.17

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -103,7 +103,7 @@ const ButtonWithAction = ({
   `;
   const disabledStyles = `
     background-clor: #6E727E;
-    border-clor: #6E727E;
+    border-color: #6E727E;
     color: #FFFFFF;
     &:focus {
       box-shadow: 0 0 10px #6E727E;
@@ -123,7 +123,7 @@ const ButtonWithAction = ({
       activeStyles={activeStyles}
       disabledStyles={disabledStyles}
       as="button"
-      onClick={action}
+      onClick={!isLoading && action}
       borderRadius="2px"
       theme={themeContext}
       extraStyles={isLoading ? loadingExtraStyles : extraStyles}

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

@@ -103,6 +103,7 @@ const Checkbox = ({
           id={`checkbox-${name}`}
           disabled={disabled}
           name={name}
+          aria-label={name}
           checked={checked}
           onChange={onChange}
           tabIndex="-1"

package/src/components/atoms/checkbox-list/CheckboxList.js

@@ -35,6 +35,7 @@ const CheckboxListItem = ({
   name,
   imageUrl,
   image,
+  imageAlt = "checkbox icon",
   disabled,
   borderColor,
   color,
@@ -57,6 +58,7 @@ const CheckboxListItem = ({
       <HiddenCheckboxInput id={`checkbox-${name}-${index}`} />
       <CheckboxLabel
         name={name}
+        aria-label={name}
         htmlFor={`checkbox-${name}-${index}`}
         onClick={disabled ? noop : onSelect}
         onKeyDown={disabled ? noop : onSelect}
@@ -73,7 +75,7 @@ const CheckboxListItem = ({
       </CheckboxLabel>
       <Box padding="0rem 0.5rem 0rem 0rem" hiddenStyles={!imageUrl}>
         <Cluster justify="flex-start" align="center">
-          <CheckboxItemIcon src={imageUrl} />
+          <CheckboxItemIcon src={imageUrl} alt={imageAlt} />
         </Cluster>
       </Box>
       <Box padding="0rem 0.5rem 0rem 0rem" hiddenStyles={!image}>

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

@@ -44,7 +44,7 @@ const DropdownItemWrapper = styled.div`
   background-color: ${({ selected, themeValues }) =>
     selected ? themeValues.selectedColor : WHITE};
   text-align: start;
-  border-size: 0px;
+  border-width: 0px;
   border-color: transparent;
   box-shadow: none;
   padding: 1rem;
@@ -200,7 +200,7 @@ const Dropdown = ({
       tabIndex={0}
       padding="0"
       width="100%"
-      focusStyles={`background-color: ${themeValues.hoverColor};`}
+      hoverStyles={`background-color: ${themeValues.hoverColor};`}
       aria-expanded={isOpen}
     >
       <Box
@@ -209,7 +209,6 @@ const Dropdown = ({
         width="100%"
         padding="12px"
         hoverStyles={`background-color: ${themeValues.hoverColor};`}
-        focusStyles={`background-color: ${themeValues.hoverColor};`}
         borderSize="1px"
         borderColor={
           isError
@@ -225,6 +224,7 @@ const Dropdown = ({
         <Stack direction="row" bottomItem={2}>
           {isOpen ? (
             <SearchInput
+              aria-label={inputValue || "Dropdown awaiting search value"}
               value={inputValue}
               onChange={noop}
               themeValues={themeValues}
@@ -242,7 +242,7 @@ const Dropdown = ({
         </Stack>
       </Box>
       {isOpen ? (
-        <DropdownContentWrapper open={isOpen} ref={dropdownRef} tabIndex={-1}>
+        <DropdownContentWrapper open={isOpen} ref={dropdownRef} tabIndex={0}>
           <Stack childGap="0">
             {filteredOptions.map((choice, i) => (
               <DropdownItemWrapper

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

@@ -1,37 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { withKnobs, text } from "@storybook/addon-knobs";
 import Dropdown from "./Dropdown";
-import { Cover, Center } from "../layouts";
-import { ThemeProvider } from "styled-components";
-
-const fakeTheme = {
-  Dropdown: {
-    selectedColor: "#15749D",
-    hoverColor: "#EFFAFF"
-  }
-};
-
-export default {
-  title: "Dropdown",
-  component: Dropdown,
-  decorators: [
-    withKnobs,
-    storyFn => (
-      <ThemeProvider
-        theme={{
-          name: text("Theme Name", "default"),
-          values: fakeTheme
-        }}
-      >
-        <Cover>
-          <div />
-          <Center>{storyFn()}</Center>
-          <div />
-        </Cover>
-      </ThemeProvider>
-    )
-  ]
-};
+import page from "../../../../.storybook/page";
 
 const options = [
   { text: "Please select an option", value: "" },
@@ -42,7 +11,7 @@ const options = [
 
 const disabledValues = ["DISABLED_OPTION"];
 
-export const dropdownDefault = () => {
+export const dropdown = () => {
   const [isOpen, setOpen] = useState(false);
   const [value, setValue] = useState(null);
   const [isError, setError] = useState(false);
@@ -68,3 +37,11 @@ export const dropdownDefault = () => {
     />
   );
 };
+
+const story = page({
+  title: "Components|Atoms/Dropdown",
+  Component: Dropdown,
+  height: "500px"
+});
+
+export default story;

package/src/components/atoms/form-layouts/FormInput.js

@@ -46,7 +46,7 @@ const InputField = styled.input`
 `;
 
 // eslint-disable-next-line no-unused-vars
-const FormattedInputField = styled(({ showErrors, ...props }) => (
+const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
   <FormattedInput {...props} />
 ))`
   border: 1px solid
@@ -106,6 +106,7 @@ const FormInput = ({
         {helperModal ? (
           <Cluster justify="space-between" align="center">
             <Text
+              as="label"
               color={themeValues.labelColor}
               variant="pS"
               weight={themeValues.fontWeight}
@@ -114,6 +115,7 @@ const FormInput = ({
                   &::first-letter {
                     text-transform: uppercase;
                   }`}
+              id={labelTextWhenNoError.replace(/\s+/g, "-")}
             >
               {labelTextWhenNoError}
             </Text>
@@ -129,6 +131,7 @@ const FormInput = ({
           <Box padding="0" minWidth="100%">
             <Cluster justify="space-between" align="center">
               <Text
+                as="label"
                 color={themeValues.labelColor}
                 variant="pS"
                 fontWeight={themeValues.fontWeight}
@@ -137,7 +140,7 @@ const FormInput = ({
                     &::first-letter {
                       text-transform: uppercase;
                     }`}
-                id={labelTextWhenNoError}
+                id={labelTextWhenNoError.replace(/\s+/g, "-")}
               >
                 {labelTextWhenNoError}
               </Text>
@@ -169,7 +172,7 @@ const FormInput = ({
       <Box padding="0">
         {formatter ? (
           <FormattedInputField
-            aria-labelledby={labelTextWhenNoError}
+            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
             onChange={e => fieldActions.set(e)}
             type={type}
             value={field.rawValue}
@@ -186,7 +189,7 @@ const FormInput = ({
           />
         ) : (
           <InputField
-            aria-labelledby={labelTextWhenNoError}
+            aria-labelledby={labelTextWhenNoError.replace(/\s+/g, "-")}
             onChange={e => fieldActions.set(e.target.value)}
             type={type === "password" && showPassword ? "text" : type}
             value={field.rawValue}

package/src/components/atoms/form-layouts/FormLayouts.stories.js

@@ -30,7 +30,7 @@ export const formLayouts = () => {
     >
       <FormInputRow childGap={text("rowChildGap", "1rem", "props")}>
         <FormInput
-          labelTextWhenNoError="Form Layouts"
+          labelTextWhenNoError="Form Layouts 1"
           errorMessages="Error"
           field={data.test}
         />
@@ -38,24 +38,24 @@ export const formLayouts = () => {
       <FormInputRow childGap={text("rowChildGap", "1rem", "props")}>
         <FormInputColumn childGap={text("columnChildGap", "0.5rem", "props")}>
           <FormInput
-            labelTextWhenNoError="Form Layouts"
+            labelTextWhenNoError="Form Layouts 2"
             errorMessages="Error"
             field={data.test}
           />
           <FormInput
-            labelTextWhenNoError="Form Layouts"
+            labelTextWhenNoError="Form Layouts 3"
             errorMessages="Error"
             field={data.test}
           />
         </FormInputColumn>
         <FormInputColumn childGap={text("columnChildGap", "0.5rem", "props")}>
           <FormInput
-            labelTextWhenNoError="Form Layouts"
+            labelTextWhenNoError="Form Layouts 4"
             errorMessages="Error"
             field={data.test}
           />
           <FormInput
-            labelTextWhenNoError="Form Layouts"
+            labelTextWhenNoError="Form Layouts 5"
             errorMessages="Error"
             field={data.test}
           />

package/src/components/atoms/hamburger-button/HamburgerButton.js

@@ -97,14 +97,15 @@ const HamburgerButton = ({
   activeColor,
   inactiveColor,
   isActive,
-  onClick = noop
+  onClick = noop,
+  controls
 }) => (
   <Hamburger
     className={isActive === true ? "active" : ""}
     onClick={onClick}
     type="button"
-    ariaLabel="Menu"
-    ariaControls="navigation"
+    aria-label="Menu"
+    aria-controls={controls}
   >
     <HamburgerBox>
       <HamburgerInner

package/src/components/atoms/icons/AccountsIconSmall.js

@@ -22,25 +22,18 @@ const AccountsIconSmall = ({ themeValues }) => {
           height="27"
         ></rect>
       </defs>
-      <g
-        id="Random-Icon-Work"
-        stroke="none"
-        strokeWidth="1"
-        fill="none"
-        fillRule="evenodd"
-      >
-        <g id="Header/Desktop/Menu">
-          <g id="Header/Desktop/Menu/Accounts-Tab">
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g>
+          <g>
             <g>
-              <g id="Payments">
-                <g id="folder-open">
+              <g>
+                <g>
                   <mask id="mask-2-accountssmall" fill="white">
                     <use xlinkHref="#path-1-accountssmall"></use>
                   </mask>
-                  <g id="Mask"></g>
+                  <g></g>
                   <path
                     d="M1.875,17.9609424 L4.30077547,13.8125148 C4.60546242,13.2968908 5.01561733,12.8867359 5.53124128,12.5820489 C6.04686523,12.277362 6.60936389,12.1250188 7.21873726,12.1250188 L7.21873726,12.1250188 L18.7499598,12.1250188 L18.7499598,10.4375228 C18.7499598,9.9687741 18.5858975,9.57033719 18.2577734,9.24221315 C17.9296494,8.91408911 17.5312125,8.75002682 17.0624638,8.75002682 L17.0624638,8.75002682 L11.4374772,8.75002682 L9.18748257,6.50003219 L3.56249598,6.50003219 C3.09374727,6.50003219 2.69531037,6.66409447 2.36718633,6.99221851 C2.03906229,7.32034255 1.875,7.71877946 1.875,8.18752816 L1.875,8.18752816 L1.875,17.9609424 Z M17.519494,20 C17.9179303,20 18.2929296,19.900391 18.6444913,19.7011726 C18.9960529,19.5019541 19.2655837,19.2265643 19.4530831,18.8750027 L19.4530831,18.8750027 L22.0194832,14.5156381 C22.1835455,14.2343887 22.1835455,13.9531394 22.0194832,13.6718901 C21.8554209,13.3906408 21.6093278,13.2500161 21.2812037,13.2500161 L21.2812037,13.2500161 L7.21873726,13.2500161 C6.82030089,13.2500161 6.4453016,13.3496251 6.09373994,13.5488435 C5.74217828,13.748062 5.47264749,14.0234517 5.28514812,14.3750134 L5.28514812,14.3750134 L2.71874799,18.734378 C2.5546857,19.0156273 2.5546857,19.2968767 2.71874799,19.578126 C2.88281028,19.8593753 3.12890344,20 3.45702748,20 L3.45702748,20 L17.519494,20 Z"
-                    id="f"
                     fill={themeValues.singleIconColor}
                     fillRule="nonzero"
                     mask="url(#mask-2-accountssmall)"

package/src/components/atoms/icons/icons.stories.js

@@ -48,5 +48,5 @@ export const routingNumberImage = () => <RoutingNumberImage />;
 export const checkmarkIcon = () => <CheckmarkIcon />;
 export const bankIcon = () => <BankIcon />;
 export const genericCard = () => <GenericCard />;
-export const paymentIco = () => <PaymentIcon />;
+export const paymentIcon = () => <PaymentIcon />;
 export const autopayOnIcon = () => <AutopayOnIcon />;

package/src/components/atoms/layouts/Box.styled.js

@@ -26,6 +26,7 @@ export const BoxWrapper = styled(
     minWidth,
     maxWidth,
     padding,
+    hiddenStyles,
     ...props
   }) => <div {...props} />
 )`

package/src/components/atoms/layouts/Cluster.styled.js

@@ -1,6 +1,10 @@
+import React from "react";
 import styled from "styled-components";
 
-export const ClusterWrapper = styled.div`
+/* eslint-disable no-unused-vars */
+export const ClusterWrapper = styled(({ overflow, ...props }) => (
+  <div {...props} />
+))`
   overflow: ${({ overflow }) => (overflow ? "visible" : "hidden")};
   box-sizing: border-box;
 `;

package/src/components/atoms/layouts/Sidebar.styled.js

@@ -1,3 +1,4 @@
+import React from "react";
 import styled from "styled-components";
 
 export const SidebarWrapper = styled.div`
@@ -7,7 +8,12 @@ export const SidebarWrapper = styled.div`
   ${({ fullHeight }) => (fullHeight ? `height: 100%;` : ``)}
 `;
 
-export const SidebarInnerWrapper = styled.div`
+export const SidebarInnerWrapper = styled(
+  // eslint-disable-next-line no-unused-vars
+  ({ onRight, childGap, contentMinWidth, minHeight, fullHeight, ...props }) => (
+    <div {...props} />
+  )
+)`
   display: flex;
   flex-wrap: wrap;
   box-sizing: border-box;

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

@@ -77,6 +77,7 @@ const RadioButton = ({
     >
       <HiddenRadioButton
         id={`#radio-${name}`}
+        aria-label={name}
         disabled={disabled}
         onClick={toggleRadio}
         tabIndex="-1"

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/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>
 );