@thecb/components 10.6.2-beta.7 → 10.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.6.2-beta.7",
+  "version": "10.6.2",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

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

@@ -2,7 +2,7 @@ import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
 
-const WalletIconSmall = ({ themeValues, iconIndex = 0 }) => {
+const WalletIconSmall = ({ themeValues, iconIndex = 0, colorOverride }) => {
   return (
     <svg
       width="20"
@@ -15,7 +15,7 @@ const WalletIconSmall = ({ themeValues, iconIndex = 0 }) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M16.3125 6.94643C16.0446 6.70536 15.7232 6.57143 15.3482 6.57143L5.14283 6.57143C5.0089 6.57143 4.90176 6.54464 4.8214 6.46429C4.74104 6.38393 4.71426 6.27678 4.71426 6.14286C4.71426 6.03571 4.74104 5.92857 4.8214 5.84821C4.90176 5.76786 5.0089 5.71428 5.14283 5.71428L15.4285 5.71428C15.5357 5.71428 15.6428 5.6875 15.7232 5.60714C15.8035 5.52678 15.8571 5.41964 15.8571 5.28571C15.8571 4.9375 15.7232 4.64286 15.4821 4.375C15.2143 4.13393 14.9196 4 14.5714 4L4.71426 4C4.23211 4 3.80354 4.1875 3.48211 4.50893C3.16068 4.83036 2.99997 5.23214 2.99997 5.71428V14.2857C2.99997 14.7679 3.16068 15.1964 3.48211 15.5179C3.80354 15.8393 4.23211 16 4.71426 16L15.3482 16C15.7232 16 16.0446 15.8929 16.3125 15.625C16.5803 15.3839 16.7143 15.0893 16.7143 14.7143V7.85714C16.7143 7.50893 16.5803 7.21428 16.3125 6.94643ZM12.7142 13.143C13.661 13.143 14.4285 12.3755 14.4285 11.4288C14.4285 10.482 13.661 9.71447 12.7142 9.71447C11.7674 9.71447 10.9999 10.482 10.9999 11.4288C10.9999 12.3755 11.7674 13.143 12.7142 13.143Z"
-        fill={themeValues.singleIconColor}
+        fill={colorOverride || themeValues.singleIconColor}
       />
       <mask
         id={`mask0_503_574-${iconIndex}`}
@@ -34,7 +34,11 @@ const WalletIconSmall = ({ themeValues, iconIndex = 0 }) => {
         />
       </mask>
       <g mask={`url(#mask0_503_574-${iconIndex})`}>
-        <rect width="20" height="20" fill={themeValues.singleIconColor} />
+        <rect
+          width="20"
+          height="20"
+          fill={colorOverride || themeValues.singleIconColor}
+        />
       </g>
     </svg>
   );

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

@@ -32,7 +32,6 @@ import {
   FailedIcon,
   PencilIcon,
   PendingIcon,
-  PlusCircleIcon,
   RefundIcon,
   RejectedIcon,
   RejectedVelocityIcon,
@@ -59,7 +58,6 @@ export const accountsIcon = () => <AccountsIcon />;
 export const accountsAddIcon = () => <AccountsAddIcon />;
 export const forgotPasswordIcon = () => <ForgotPasswordIcon />;
 export const goToEmailIcon = () => <GoToEmailIcon />;
-export const plusCircleIcon = () => <PlusCircleIcon />;
 export const verifiedEmailIcon = () => <VerifiedEmailIcon />;
 export const paymentMethodIcon = () => <PaymentMethodIcon />;
 export const accountsIconSmall = () => <AccountsIconSmall />;

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

@@ -31,7 +31,6 @@ const Box = forwardRef(
       hoverStyles,
       activeStyles,
       disabledStyles,
-      focusStyles,
       variant,
       as,
       onClick,
@@ -69,7 +68,6 @@ const Box = forwardRef(
       hoverStyles={hoverStyles}
       activeStyles={activeStyles}
       disabledStyles={disabledStyles}
-      focusStyles={focusStyles}
       variant={variant}
       as={as}
       onClick={onClick}

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

@@ -13,7 +13,6 @@ import { ROYAL_BLUE } from "../../../constants/colors";
 export const BoxWrapper = styled(
   ({
     activeStyles,
-    focusStyles,
     hoverStyles,
     disabledStyles,
     extraStyles,
@@ -65,9 +64,8 @@ export const BoxWrapper = styled(
   }
 
    &:focus {
-    ${({ focusStyles, as }) =>
+    ${({ as }) =>
       css`
-        ${focusStyles}
         outline: 3px solid ${ROYAL_BLUE};
         outline-offset: 2px;
         ${as === "button" &&

package/src/components/atoms/placeholder/Placeholder.js

@@ -5,17 +5,25 @@ import Text from "../text";
 import { Box, Switcher, Center, Cluster, Cover } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { TRANSPARENT, MANATEE_GREY } from "../../../constants/colors";
+import {
+  STORM_GREY,
+  GRECIAN_GREY,
+  CHARADE_GREY,
+  WHITE,
+  TRANSPARENT,
+  MANATEE_GREY
+} from "../../../constants/colors";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
-  PlusCircleIcon,
+  IconAdd,
   PaymentMethodAddIcon,
   DisabledAccountsAddIcon,
   DisabledPropertiesAddIcon,
   DisabledPaymentMethodsAddIcon
 } from "../icons";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { noop } from "../../../util/general";
 
 const getLargeIcon = (iconName, isDisabled) => {
   switch (iconName) {
@@ -59,8 +67,6 @@ const renderContent = ({ isLink, destination, dataQa, children, action }) =>
       minHeight="100%"
       extraStyles="cursor: pointer;"
       dataQa={dataQa}
-      tabIndex="0"
-      onKeyPress={e => e.key === "Enter" && action()}
     >
       {children}
     </Box>
@@ -95,97 +101,126 @@ const Placeholder = ({
   themeValues,
   isDisabled = false,
   dataQa
-}) => {
-  const borderColor = isDisabled ? MANATEE_GREY : themeValues.color;
-  return (
-    <PlaceholderContentWrapper
-      isLink={isLink}
-      action={action}
-      destination={destination}
-      dataQa={dataQa}
-      isDisabled={isDisabled}
+}) => (
+  <PlaceholderContentWrapper
+    isLink={isLink}
+    action={action}
+    destination={destination}
+    dataQa={dataQa}
+    isDisabled={isDisabled}
+  >
+    <Box
+      padding="0"
+      borderRadius="4px"
+      border="none"
+      minHeight={themeValues.height}
+      hiddenStyles={!visible}
+      extraStyles={
+        isDisabled
+          ? `border: 1px dashed ${MANATEE_GREY}; 
+        display: flex;
+        justify-content: center;
+        align-items:center;`
+          : `
+        background: linear-gradient(
+          to right,
+          ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
+          rgba(255, 255, 255, 0) 0%
+        ),
+        linear-gradient(${
+          variant === "large" ? STORM_GREY : themeValues.color
+        } 40%, rgba(255, 255, 255, 0) 0%),
+        linear-gradient(to right, ${
+          variant === "large" ? STORM_GREY : themeValues.color
+        } 40%, rgba(255, 255, 255, 0) 0%),
+        linear-gradient(${
+          variant === "large" ? STORM_GREY : themeValues.color
+        } 40%, rgba(255, 255, 255, 0) 0%);
+        background-position: top, right, bottom, left;
+        background-repeat: repeat-x, repeat-y;
+        background-size: 5px 1px, 1px 5px;
+        display: flex;
+        justify-content: center;
+        align-items:center;`
+      }
+      hoverStyles={`background-color: ${
+        isDisabled
+          ? TRANSPARENT
+          : variant === "large"
+          ? GRECIAN_GREY
+          : tint(0.9, themeValues.color)
+      };`}
     >
-      <Box
-        padding="0"
-        borderRadius="4px"
-        border="none"
-        minHeight={themeValues.height}
-        hiddenStyles={!visible}
-        extraStyles={`
-          display: flex;
-          justify-content: center;
-          align-items:center;
-          background-image: repeating-linear-gradient(0deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(90deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(180deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px), repeating-linear-gradient(270deg, ${borderColor}, ${borderColor} 2px, transparent 2px, transparent 4px, ${borderColor} 4px);
-          background-size: 2px 100%, 100% 2px, 2px 100% , 100% 2px;
-          background-position: 0 0, 0 0, 100% 0, 0 100%;
-          background-repeat: no-repeat;
-        `}
-        hoverStyles={`background-color: ${
-          isDisabled ? TRANSPARENT : tint(0.9, themeValues.color)
-        };`}
-        focusStyles={`background-color: ${
-          isDisabled ? TRANSPARENT : tint(0.9, themeValues.color)
-        };`}
-        activeStyles={`background-color: ${
-          isDisabled ? TRANSPARENT : tint(0.8, themeValues.color)
-        }; ${!isDisabled && `background-image:none; border: 2px solid ${borderColor};}`}`}
-      >
-        <Center maxWidth="300px">
-          <Box padding="0">
-            <Cluster justify="center" align="center" minHeight="100%">
-              <Switcher maxChildren={2} childGap="0">
-                {variant === "large" && <div></div>}
-                <Box
-                  padding="0"
-                  aria-disabled={isDisabled}
-                  extraStyles={`.fill { 
-                    fill: ${isDisabled ? MANATEE_GREY : themeValues.color}; 
+      <Center maxWidth="300px">
+        <Box
+          padding="0"
+          tabIndex="0"
+          onKeyPress={e => (isDisabled ? noop : e.key === "Enter" && action())}
+        >
+          <Cluster justify="center" align="center" minHeight="100%">
+            <Switcher maxChildren={2} childGap="0">
+              {variant === "large" && <div></div>}
+              <Box
+                padding="0"
+                aria-disabled={isDisabled}
+                extraStyles={`.fill { 
+                    fill: ${
+                      isDisabled
+                        ? MANATEE_GREY
+                        : variant === "large"
+                        ? CHARADE_GREY
+                        : themeValues.color
+                    }; 
                   } .stroke { 
-                    stroke: ${isDisabled ? MANATEE_GREY : themeValues.color}; 
+                    stroke: ${
+                      isDisabled
+                        ? MANATEE_GREY
+                        : variant === "large"
+                        ? CHARADE_GREY
+                        : themeValues.color
+                    }; 
                   } `}
-                >
-                  {variant === "large" ? (
-                    <Center intrinsic>
-                      {getLargeIcon(largeIcon, isDisabled)}
-                      <Text
-                        variant="pS"
-                        color={isDisabled ? MANATEE_GREY : themeValues.color}
-                        weight={FONT_WEIGHT_SEMIBOLD}
-                        extraStyles={`text-align: center;`}
-                      >
-                        {text}
-                      </Text>
-                    </Center>
-                  ) : (
-                    <Cover singleChild minHeight="100%">
-                      <Cluster justify="center" align="center">
-                        <PlusCircleIcon
+              >
+                {variant === "large" ? (
+                  <Center intrinsic>
+                    {getLargeIcon(largeIcon, isDisabled)}
+                    <Text
+                      variant="pS"
+                      color={isDisabled ? MANATEE_GREY : themeValues.color}
+                      weight={FONT_WEIGHT_SEMIBOLD}
+                      extraStyles={`text-align: center;`}
+                    >
+                      {text}
+                    </Text>
+                  </Center>
+                ) : (
+                  <Cover singleChild minHeight="100%">
+                    <Cluster justify="center" align="center">
+                      <IconAdd
+                        fill={isDisabled ? MANATEE_GREY : WHITE}
+                        strokeWidth="2"
+                      />
+                      <Center intrinsic>
+                        <Text
+                          variant="pS"
                           color={isDisabled ? MANATEE_GREY : themeValues.color}
-                        />
-                        <Center intrinsic>
-                          <Text
-                            variant="pS"
-                            color={
-                              isDisabled ? MANATEE_GREY : themeValues.color
-                            }
-                            weight={FONT_WEIGHT_SEMIBOLD}
-                            extraStyles={`padding: 0 0 0 8px; text-align: center;`}
-                          >
-                            {text}
-                          </Text>
-                        </Center>
-                      </Cluster>
-                    </Cover>
-                  )}
-                </Box>
-              </Switcher>
-            </Cluster>
-          </Box>
-        </Center>
-      </Box>
-    </PlaceholderContentWrapper>
-  );
-};
+                          weight={FONT_WEIGHT_SEMIBOLD}
+                          extraStyles={`padding: 0 0 0 8px; text-align: center;`}
+                        >
+                          {text}
+                        </Text>
+                      </Center>
+                    </Cluster>
+                  </Cover>
+                )}
+              </Box>
+            </Switcher>
+          </Cluster>
+        </Box>
+      </Center>
+    </Box>
+  </PlaceholderContentWrapper>
+);
 
 export default themeComponent(
   Placeholder,

package/src/components/atoms/placeholder/Placeholder.stories.js

@@ -30,7 +30,6 @@ export const placeholder = () => (
     largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
     key="placeholder"
     isDisabled={boolean("isDisabled", false, "props")}
-    action={() => console.log("placeholder action")}
   />
 );
 

package/src/components/molecules/editable-list/EditableList.stories.js

@@ -1,10 +1,7 @@
 import React from "react";
-import { number, boolean } from "@storybook/addon-knobs";
 import EditableList from "./EditableList";
 import page from "../../../../.storybook/page";
 
-const groupId = "props";
-
 const story = page({
   title: "Components|Molecules/EditableList",
   Component: EditableList
@@ -15,9 +12,7 @@ export const editableList = () => {
   return (
     <EditableList
       as="h2"
-      canRemove={boolean("Can Remove", false, groupId)}
-      canAdd={boolean("Can Add", true, groupId)}
-      canEdit={boolean("Can Edit", true, groupId)}
+      canRemove={false}
       title="Contact first name"
       titleWeight="600"
       editItem={() => console.log("edit click")}
@@ -25,7 +20,7 @@ export const editableList = () => {
       itemName="Contact first name"
       listPadding="0"
       renderItem={contactFirstName => contactFirstName}
-      maxItems={number("Max Items", 2, groupId)}
+      maxItems={1}
       items={["Ronald"]}
       qaPrefix="Contact first name"
       ariaLabel="Contact first name"

package/src/components/molecules/module/Module.js

@@ -28,7 +28,8 @@ const Module = ({
   spacingBottom = "2.5rem",
   fontSize,
   themeValues,
-  children
+  children,
+  allowContentOverflow = false
 }) => {
   const themedFontSize =
     variant === "small"
@@ -64,7 +65,12 @@ const Module = ({
     >
       {heading && !rightTitleContent && headingText}
       {heading && rightTitleContent && (
-        <Cluster justify="space-between" align="center" nowrap>
+        <Cluster
+          justify="space-between"
+          align="center"
+          overflow={allowContentOverflow}
+          nowrap
+        >
           {headingText}
           {rightTitleContent}
         </Cluster>

package/src/components/molecules/payment-details/PaymentDetails.js

@@ -362,9 +362,11 @@ const PaymentDetails = ({
     <Box width="100%" padding="none">
       <Cluster justify="space-between" align="center">
         <Title
-          weight={FONT_WEIGHT_BOLD}
+          weight={FONT_WEIGHT_SEMIBOLD}
           as="h2"
-          extraStyles={`font-size: 1.375rem;`}
+          extraStyles={`font-size: 1.5rem; line-height: ${
+            isMobile ? "2.2857rem" : "2.25rem"
+          };`}
           id="payment-details-title"
         >
           {titleText}
@@ -382,9 +384,11 @@ const PaymentDetails = ({
     <>
       <Title
         as="h2"
-        weight={FONT_WEIGHT_BOLD}
+        weight={FONT_WEIGHT_SEMIBOLD}
         margin="1rem 0 0 0"
-        extraStyles={`font-size: 1.75rem;`}
+        extraStyles={`font-size: 1.5rem; line-height: ${
+          isMobile ? "2.2857rem" : "2.25rem"
+        };`}
         id="payment-details-title"
       >
         {titleText}