@thecb/components 3.7.0-beta.2 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.7.0-beta.2",
+  "version": "4.0.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -25,7 +25,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.6.2",
     "@rollup/plugin-json": "^4.0.3",
-    "@storybook/addon-a11y": "^5.3.14",
+    "@storybook/addon-a11y": "5.3.14",
     "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-console": "^1.2.1",
     "@storybook/addon-docs": "^5.3.19",

package/src/components/atoms/alert/Alert.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { AlertIcons, IconQuit } from "../../../deprecated/icons";
-import { Box, Cluster, Stack, Cover, Sidebar } from "../layouts";
+import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
 import Text from "../text";
 import { fallbackValues } from "./Alert.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -8,37 +8,35 @@ import { themeComponent } from "../../../util/themeUtils";
 const Alert = ({
   heading,
   text,
+  textOverride,
   variant,
   children,
   height,
   onLinkClick,
+  padding = "0.5rem",
   showQuitLink = true,
-  themeValues
+  themeValues,
+  extraStyles,
+  maxContentWidth
 }) => {
   const Icon = AlertIcons[variant];
-  return (
-    <Box
-      padding="0.5rem"
-      width="100%"
-      minHeight="100px"
-      height={height ? height : "auto"}
-      background={themeValues.background}
-      borderRadius="4px"
-      borderColor={themeValues.border}
-      borderSize="1px"
-    >
-      <Sidebar width="24px" childGap="0rem">
-        <Box padding="0 0.5rem 0 1rem" minHeight="100%">
-          <Cover minHeight="100%" singleChild>
-            <Box padding="0" width="1.5rem" minHeight="1.5rem">
-              <Icon />
-            </Box>
-          </Cover>
-        </Box>
-        <Box padding="0">
-          <Sidebar sidebarOnRight width="24px" childGap="0rem">
-            <Box padding="1rem 1rem 1rem 0.5rem">
-              <Cluster justify="flex-start" align="center">
+
+  const content = (
+    <Sidebar width="24px" childGap="0rem">
+      <Box padding="0 0 0 1rem" minHeight="100%">
+        <Cover minHeight="100%" singleChild>
+          <Box padding="0" width="1.5rem" minHeight="1.5rem">
+            <Icon />
+          </Box>
+        </Cover>
+      </Box>
+      <Box padding="0">
+        <Sidebar onRight width="24px" childGap="0rem">
+          <Box padding={`${padding} 1rem`}>
+            <Cluster justify="flex-start" align="center">
+              {textOverride ? (
+                textOverride
+              ) : (
                 <Stack fullHeight childGap="0.25rem">
                   <Text variant="p" color={themeValues.text} weight="600">
                     {heading}
@@ -48,18 +46,38 @@ const Alert = ({
                   </Text>
                   {children}
                 </Stack>
-              </Cluster>
-            </Box>
-            <Cluster justify="flex-end" align="flex-start">
-              {showQuitLink && (
-                <Box padding="0" minHeight="100%" onClick={onLinkClick}>
-                  <IconQuit />
-                </Box>
               )}
             </Cluster>
-          </Sidebar>
-        </Box>
-      </Sidebar>
+          </Box>
+          <Cluster justify="flex-end" align="flex-start">
+            {showQuitLink && (
+              <Box padding="0" minHeight="100%" onClick={onLinkClick}>
+                <IconQuit />
+              </Box>
+            )}
+          </Cluster>
+        </Sidebar>
+      </Box>
+    </Sidebar>
+  );
+
+  return (
+    <Box
+      padding={padding}
+      width="100%"
+      minHeight={height && parseInt(height) < 100 ? height : "100px"}
+      height={height ? height : "auto"}
+      background={themeValues.background}
+      borderRadius="4px"
+      borderColor={themeValues.border}
+      borderSize="1px"
+      extraStyles={extraStyles}
+    >
+      {maxContentWidth ? (
+        <Center maxWidth={maxContentWidth}>{content}</Center>
+      ) : (
+        content
+      )}
     </Box>
   );
 };

package/src/components/atoms/breadcrumb/Breadcrumb.js

@@ -15,12 +15,15 @@ const Breadcrumbs = ({ breadcrumbsList = [] }) => {
     "Breadcrumb"
   );
   return (
-    <Box padding="0" role="region" aria-level="Breadcrumb navigation">
+    <Box padding="0" as="nav" aria-label="Breadcrumb navigation">
       <Cluster justify="flex-start" align="center">
         {breadcrumbsList.map(
           ({ linkText, linkDestination, isActive }, index) => (
             <Fragment key={`breadcrumb-${linkText}`}>
               <InternalLink
+                aria-current={
+                  index === breadcrumbsList.length - 1 && "location"
+                }
                 to={linkDestination}
                 active={isActive.toString()}
                 color={themeValues.color}

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/display-card/DisplayCard.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import Stack from "../layouts/Stack";
 import Box from "../layouts/Box";
 import Text from "../text";
@@ -48,7 +48,7 @@ const DisplayCard = ({
                 dataQa={buttonText}
                 extraStyles={`min-width: 0;`}
               />
-            ) : (
+            ) : buttonAction ? (
               <ButtonWithAction
                 text={buttonText}
                 action={buttonAction}
@@ -56,6 +56,8 @@ const DisplayCard = ({
                 dataQa={buttonText}
                 extraStyles={`min-width: 0;`}
               />
+            ) : (
+              <Fragment />
             )}
           </Cluster>
         </Box>

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>
@@ -168,7 +171,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}
@@ -185,7 +188,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}