@thecb/components 3.5.12-beta.2 → 3.5.15

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

@@ -1,34 +1,69 @@
 import React, { useState } from "react";
-import { boolean } from "@storybook/addon-knobs";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
 import RadioButton from "./RadioButton";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
+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>
+    )
+  ]
+};
 
 export const radioButtonsDefault = () => {
+  const buttons = 3;
+
   const [selected, setSelected] = useState(null);
   const [focused, setFocused] = useState(null);
 
-  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>
-  );
+  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>
+    );
+  });
 };
-
-const story = page({
-  title: "Components|Atoms/RadioButton",
-  Component: RadioButton
-});
-
-export default story;

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

@@ -171,7 +171,6 @@ 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,12 +1,60 @@
 import React, { useState, Fragment } from "react";
-import { boolean } from "@storybook/addon-knobs";
+import { withKnobs, text, radios } from "@storybook/addon-knobs";
 import ToggleSwitch from "./ToggleSwitch";
-import page from "../../../../.storybook/page";
+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>
+    )
+  ]
+};
 
 export const toggleSwitchDefault = () => {
   const [isOn, onToggle] = useState(false);
 
-  const disabled = boolean("disabled", false, "props");
+  const disabled =
+    radios(
+      "Disable Toggle Switch",
+      { Enabled: "enabled", Disabled: "disabled" },
+      "enabled",
+      "RADIO-GROUP-1"
+    ) === "disabled";
 
   return (
     <Fragment>
@@ -20,10 +68,3 @@ 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,25 +55,24 @@ const EditableList = ({
         extraStyles={`box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),
     0px 3px 8px 0px rgb(202, 206, 216);`}
       >
-        {items.map(item => {
+        {items.map(props => {
           const [modalOpen, toggleModal] = useState(false);
           return (
             <EditableListItem
               listItemSize={
-                !!item.id && item.id === autoPayMethod ? "big" : listItemSize
+                !!props.id && props.id === autoPayMethod ? "big" : listItemSize
               }
-              key={item.id || item}
+              key={props.id}
             >
               <Text variant="p" color={CHARADE_GREY}>
-                {renderItem(item)}
+                {renderItem(props)}
               </Text>
               <EditableListItemControls>
-                {item.isPrimary && (
+                {props.isPrimary && (
                   <Text
                     variant="p"
                     color={STORM_GREY}
                     extraStyles={`font-style: italic;`}
-                    key={`Default ${itemName}`}
                   >
                     Default {itemName}
                   </Text>
@@ -84,11 +83,10 @@ 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={{ ...item }}
+                        item={{ ...props }}
                         {...modalProps}
                         modalOpen={modalOpen}
                         toggleModal={toggleModal}
@@ -97,7 +95,7 @@ const EditableList = ({
                       <ButtonWithAction
                         variant="smallGhost"
                         text="Remove"
-                        action={() => removeItem(item.id)}
+                        action={() => removeItem(props.id)}
                         extraStyles={`min-width: 0;`}
                       />
                     )}
@@ -109,12 +107,11 @@ 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(item.id)}
+                      action={() => editItem(props.id)}
                       extraStyles={`min-width: 0;`}
                     />
                   </Box>

package/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -4,7 +4,6 @@ import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 
 const NavMenuDesktop = ({
-  id,
   top = "125%",
   left = "-100%",
   menuContent = [],
@@ -18,7 +17,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 id={id} breakout top={top} left={left} visible={visible}>
+    <Imposter breakout top={top} left={left} visible={visible}>
       <Box
         minWidth="240px"
         padding="1rem 0.5rem"

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -42,15 +42,9 @@ const ImposterMenu = styled(menu)`
   top: 72px;
 `;
 
-const NavMenuMobile = ({
-  id,
-  menuContent = [],
-  visible = false,
-  themeValues
-}) => {
+const NavMenuMobile = ({ menuContent = [], visible = false, themeValues }) => {
   return (
     <ImposterMenu
-      id={id}
       initialPose="invisible"
       pose={visible ? "visible" : "invisible"}
     >

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,11 +36,7 @@ const RadioButtonCenter = styled.div`
 RadioButtonCenter.defaultProps = defaultTheme;
 
 const RadioButton = ({ isSelected, name }) => (
-  <RadioButtonBorder
-    isSelected={isSelected}
-    name={name}
-    aria-checked={isSelected}
-  >
+  <RadioButtonBorder isSelected={isSelected} name={name}>
     {isSelected && <RadioButtonCenter />}
   </RadioButtonBorder>
 );

package/src/deprecated/icons/IconInvalid.js

@@ -16,23 +16,47 @@ export const IconInvalid = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     style={{ margin }}
-    aria-label="Invalid"
   >
-    <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)">
+    <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)"
+            >
               <circle
+                id="icon-invalid-Oval"
                 stroke={bgFill}
                 fill={bgFill}
                 cx="9"
                 cy="9"
                 r="8.5"
               ></circle>
-              <g transform="translate(2.000000, 2.000000)" fill={iconFill}>
+              <g
+                id="icon-invalid-Icon/Close"
+                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,12 +15,11 @@ export const IconNeutral = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     style={{ margin }}
-    aria-label="Neutral"
   >
-    <g fill={fill} fillRule="nonzero" stroke={fill}>
-      <g>
-        <g>
-          <circle cx="9" cy="9" r="8.5"></circle>
+    <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>
       </g>
     </g>

package/src/deprecated/icons/IconValid.js

@@ -16,14 +16,32 @@ export const IconValid = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     style={{ margin }}
-    aria-label="Valid"
   >
-    <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)">
+    <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)"
+            >
               <circle
+                id="icon-valid-Oval"
                 stroke={bgFill}
                 fill={bgFill}
                 fillRule="nonzero"
@@ -31,9 +49,16 @@ export const IconValid = ({
                 cy="9"
                 r="8.5"
               ></circle>
-              <g transform="translate(2.000000, 2.000000)">
-                <polygon points="0 0 14 0 14 14 0 14"></polygon>
+              <g
+                id="icon-valid-baseline-check-24px"
+                transform="translate(2.000000, 2.000000)"
+              >
                 <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,4 +1,3 @@
-import React, { Fragment } from "react";
 import numeral from "numeral";
 
 export const noop = () => {};
@@ -10,17 +9,9 @@ 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 ? <Fragment key={createUniqueId()}>{replacement}</Fragment> : child
-    );
+    return children.map(child => (!child ? replacement : child));
   }
   return !children ? replacement : children;
 };