@thecb/components 3.5.12-beta.1 → 3.5.12-beta.2

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

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;
 };