@thecb/components 10.4.4-beta.6 → 10.4.4

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-const IconAdd = () => (
+const IconAdd = ({ strokeWidth = 1 }) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
@@ -15,7 +15,7 @@ const IconAdd = () => (
         d="M7.91666623 4.78508747L4.78508747 4.78508747 4.78508747 7.91666623 3.74122788 7.91666623 3.74122788 4.78508747 0.609649123 4.78508747 0.609649123 3.74122788 3.74122788 3.74122788 3.74122788 0.609649123 4.78508747 0.609649123 4.78508747 3.74122788 7.91666623 3.74122788z"
       ></path>
     </defs>
-    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+    <g fill="none" fillRule="evenodd" stroke="none" strokeWidth={strokeWidth}>
       <g transform="translate(-407 -563)">
         <g transform="translate(408 562)">
           <g transform="translate(0 2)">
@@ -25,7 +25,13 @@ const IconAdd = () => (
               </mask>
               <use className="fill" xlinkHref="#path-1"></use>
             </g>
-            <circle className="stroke" cx="8.155" cy="8.072" r="8"></circle>
+            <circle
+              className="stroke"
+              strokeWidth={strokeWidth}
+              cx="8.155"
+              cy="8.072"
+              r="8"
+            ></circle>
           </g>
         </g>
       </g>

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

@@ -9,7 +9,6 @@ const IconQuitLarge = ({ fill = "#091325" }) => (
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <title>Icon/X</title>
     <defs>
       <polygon
         id="quit-large-path-1"

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

@@ -1,7 +1,6 @@
 import React from "react";
 import { fallbackValues } from "./Icons.theme";
 import { themeComponent } from "../../../util/themeUtils";
-
 const PropertiesAddIcon = ({ themeValues }) => {
   return (
     <svg width={100} height={100} viewBox="0 0 84 100">

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

@@ -42,10 +42,7 @@ import {
   KebabMenuIcon,
   MultiCartIcon,
   CloseIcon,
-  TrashIconV2,
-  DisabledPropertiesAddIcon,
-  DisabledAccountsAddIcon,
-  DisabledPaymentMethodsAddIcon
+  TrashIconV2
 } from "./index";
 
 const story = page({
@@ -95,8 +92,3 @@ export const kebabMenuIcon = () => <KebabMenuIcon />;
 export const multiCartIcon = () => <MultiCartIcon />;
 export const closeIcon = () => <CloseIcon />;
 export const trashIconV2 = () => <TrashIconV2 />;
-export const disabledPropertiesAddIcon = () => <DisabledPropertiesAddIcon />;
-export const disabledAccountsAddIcon = () => <DisabledAccountsAddIcon />;
-export const disabledPaymentMethodsAddIcon = () => (
-  <DisabledPaymentMethodsAddIcon />
-);

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

@@ -90,9 +90,6 @@ import KebabMenuIcon from "./KebabMenuIcon";
 import MultiCartIcon from "./MultiCartIcon";
 import CloseIcon from "./CloseIcon";
 import TrashIconV2 from "./TrashIconV2";
-import DisabledAccountsAddIcon from "./DisabledAccountsAddIcon";
-import DisabledPropertiesAddIcon from "./DisabledPropertiesAddIcon";
-import DisabledPaymentMethodsAddIcon from "./DisabledPaymentMethodsAddIcon";
 
 export {
   AccountsIcon,
@@ -186,8 +183,5 @@ export {
   KebabMenuIcon,
   MultiCartIcon,
   CloseIcon,
-  TrashIconV2,
-  DisabledAccountsAddIcon,
-  DisabledPropertiesAddIcon,
-  DisabledPaymentMethodsAddIcon
+  TrashIconV2
 };

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

@@ -8,60 +8,39 @@ import { themeComponent } from "../../../util/themeUtils";
 import {
   STORM_GREY,
   GRECIAN_GREY,
-  CHARADE_GREY,
-  TRANSPARENT,
-  WHITE,
-  MANATEE_GREY
+  CHARADE_GREY
 } from "../../../constants/colors";
 import {
   AccountsAddIcon,
   PropertiesAddIcon,
   IconAdd,
-  PaymentMethodAddIcon,
-  DisabledAccountsAddIcon,
-  DisabledPropertiesAddIcon,
-  DisabledPaymentMethodsAddIcon
+  PaymentMethodAddIcon
 } from "../icons";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { noop } from "../../../util/general";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
-const getLargeIcon = (iconName, isDisabled) => {
+const getLargeIcon = iconName => {
   switch (iconName) {
     case "accounts":
-      return isDisabled ? <DisabledAccountsAddIcon /> : <AccountsAddIcon />;
+      return <AccountsAddIcon />;
     case "properties":
-      return isDisabled ? <DisabledPropertiesAddIcon /> : <PropertiesAddIcon />;
+      return <PropertiesAddIcon />;
     case "payments":
-      return isDisabled ? (
-        <DisabledPaymentMethodsAddIcon />
-      ) : (
-        <PaymentMethodAddIcon />
-      );
+      return <PaymentMethodAddIcon />;
     default:
-      return isDisabled ? <DisabledAccountsAddIcon /> : <AccountsAddIcon />;
+      return <AccountsAddIcon />;
   }
 };
 
-const renderDisabledContent = ({ children }) => (
-  <Box
-    padding="0"
-    minHeight="100%"
-    extraStyles="cursor: default;"
-    aria-disabled={true}
-  >
-    {children}
-  </Box>
-);
-
-const renderContent = ({ isLink, destination, dataQa, isDisabled, children }) =>
+const PlaceholderContentWrapper = ({
+  isLink,
+  action,
+  destination,
+  children,
+  dataQa
+}) =>
   isLink ? (
-    <Link
-      to={destination}
-      data-qa={dataQa}
-      disabled={isDisabled}
-      style={{ textDecoration: "none" }}
-    >
-      <Box padding="0" minHeight="100%" extraStyles="cursor: pointer;">
+    <Link to={destination} data-qa={dataQa} style={{ textDecoration: "none" }}>
+      <Box padding="0" minHeight="100%" extraStyles={`cursor: pointer;`}>
         {children}
       </Box>
     </Link>
@@ -70,32 +49,13 @@ const renderContent = ({ isLink, destination, dataQa, isDisabled, children }) =>
       onClick={action}
       padding="0"
       minHeight="100%"
-      extraStyles="cursor: pointer;"
+      extraStyles={`cursor: pointer;`}
       dataQa={dataQa}
     >
       {children}
     </Box>
   );
 
-const PlaceholderContentWrapper = ({
-  isLink,
-  action,
-  destination,
-  children,
-  isDisabled = false,
-  dataQa
-}) =>
-  isDisabled
-    ? renderDisabledContent({ children })
-    : renderContent({
-        children,
-        action,
-        isLink,
-        destination,
-        dataQa,
-        isDisabled
-      });
-
 const Placeholder = ({
   text,
   action,
@@ -105,7 +65,6 @@ const Placeholder = ({
   variant,
   largeIcon,
   themeValues,
-  isDisabled = false,
   dataQa
 }) => (
   <PlaceholderContentWrapper
@@ -113,7 +72,6 @@ const Placeholder = ({
     action={action}
     destination={destination}
     dataQa={dataQa}
-    isDisabled={isDisabled}
   >
     <Box
       padding="0"
@@ -121,13 +79,7 @@ const Placeholder = ({
       border="none"
       minHeight={themeValues.height}
       hiddenStyles={!visible}
-      extraStyles={
-        isDisabled
-          ? `border: 1px dashed ${MANATEE_GREY}; 
-        display: flex;
-        justify-content: center;
-        align-items:center;`
-          : `
+      extraStyles={`
         background: linear-gradient(
           to right,
           ${variant === "large" ? STORM_GREY : themeValues.color} 40%,
@@ -147,53 +99,39 @@ const Placeholder = ({
         background-size: 5px 1px, 1px 5px;
         display: flex;
         justify-content: center;
-        align-items:center;`
-      }
+        align-items:center;`}
       hoverStyles={`background-color: ${
-        isDisabled
-          ? TRANSPARENT
-          : variant === "large"
-          ? GRECIAN_GREY
-          : tint(0.9, themeValues.color)
+        variant === "large" ? GRECIAN_GREY : tint(0.9, themeValues.color)
       };`}
     >
       <Center maxWidth="300px">
         <Box
           padding="0"
           tabIndex="0"
-          onKeyPress={e => (isDisabled ? noop : e.key === "Enter" && action())}
+          onKeyPress={e => 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
+                      variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
                   } .stroke { 
                     stroke: ${
-                      isDisabled
-                        ? MANATEE_GREY
-                        : variant === "large"
-                        ? CHARADE_GREY
-                        : themeValues.color
+                      variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
-                  }`}
+                  } `}
               >
                 {variant === "large" ? (
                   <Center intrinsic>
-                    {getLargeIcon(largeIcon, isDisabled)}
+                    {getLargeIcon(largeIcon)}
                     <Text
                       variant="pS"
-                      color={isDisabled ? MANATEE_GREY : themeValues.color}
-                      weight={FONT_WEIGHT_REGULAR}
+                      color={themeValues.color}
+                      weight={FONT_WEIGHT_SEMIBOLD}
                       extraStyles={`text-align: center;`}
                     >
                       {text}
@@ -202,12 +140,12 @@ const Placeholder = ({
                 ) : (
                   <Cover singleChild minHeight="100%">
                     <Cluster justify="center" align="center">
-                      <IconAdd fill={isDisabled ? MANATEE_GREY : WHITE} />
+                      <IconAdd strokeWidth="2" />
                       <Center intrinsic>
                         <Text
                           variant="pS"
-                          color={isDisabled ? MANATEE_GREY : themeValues.color}
-                          weight={FONT_WEIGHT_REGULAR}
+                          color={themeValues.color}
+                          weight={FONT_WEIGHT_SEMIBOLD}
                           extraStyles={`padding: 0 0 0 8px; text-align: center;`}
                         >
                           {text}

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

@@ -28,7 +28,6 @@ export const placeholder = () => (
     destination={text("destination", "add-account", "props")}
     text={text("text", "Add an Account", "props")}
     largeIcon={select(iconLabel, icons, defaultIcon, groupId)}
-    isDisabled={boolean("isDisabled", false, groupId)}
     key="placeholder"
   />
 );
@@ -37,5 +36,4 @@ const story = page({
   title: "Components|Atoms/Placeholder",
   Component: Placeholder
 });
-
 export default story;

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

@@ -1,13 +1,7 @@
 import { BRIGHT_GREY, CHARADE_GREY } from "../../../constants/colors";
 
-const color = {
-  default: `${CHARADE_GREY}`,
-  large: `${BRIGHT_GREY}`
-};
-const height = {
-  default: "3rem",
-  large: "192px"
-};
+const color = { default: `${CHARADE_GREY}`, large: `${BRIGHT_GREY}` };
+const height = { default: "3rem", large: "192px" };
 
 export const fallbackValues = {
   color,

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

@@ -40,8 +40,7 @@ const EditableList = ({
   listPadding = "0rem 0rem 1.5rem 0rem",
   qaPrefix,
   ariaLabel,
-  editItemAriaRole = "",
-  disablePlaceholder = false
+  editItemAriaRole = ""
 }) => {
   const addText = `Add a${
     itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
@@ -162,26 +161,13 @@ const EditableList = ({
             );
           })}
         </Box>
-        {canAdd &&
-        (!maxItems || items.length < maxItems) &&
-        !disablePlaceholder ? (
+        {canAdd && (!maxItems || items.length < maxItems) && (
           <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
             <Placeholder
               text={addText}
               action={addItem}
               dataQa={"Add " + qaPrefix}
               aria-label={addText}
-              isDisabled={disablePlaceholder}
-            />
-          </Box>
-        ) : (
-          <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
-            <Placeholder
-              text={addText}
-              action={addItem}
-              dataQa={"Add " + qaPrefix}
-              aria-label={addText}
-              isDisabled={disablePlaceholder}
             />
           </Box>
         )}

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

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
+import { boolean } from "@storybook/addon-knobs";
+
 import EditableList from "./EditableList";
 import page from "../../../../.storybook/page";
 

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -29,7 +29,8 @@ const ToastNotification = ({
   maxWidth = "350px",
   height = "56px",
   childGap = "1rem",
-  backgroundColor
+  backgroundColor,
+  role = "alert"
 }) => (
   <Box
     onClick={closeToastNotification}
@@ -55,18 +56,21 @@ const ToastNotification = ({
       ${extraStyles};
       cursor: pointer;
     `}
+    role={role}
   >
-    <Cluster align="center" childGap={childGap}>
-      {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
-      {variant === VARIANTS.ERROR && <ErroredIcon />}
-      <Box padding="1rem 0" maxWidth={maxWidth}>
-        <Paragraph
-          weight={FONT_WEIGHT_SEMIBOLD}
-          extraStyles={"word-break: break-word;"}
-        >
-          {message}
-        </Paragraph>
-      </Box>
+    <Cluster align="center" childGap={childGap} justify="space-between">
+      <Cluster align="center" childGap={childGap}>
+        {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
+        {variant === VARIANTS.ERROR && <ErroredIcon />}
+        <Box padding="1rem 0" maxWidth={maxWidth}>
+          <Paragraph
+            weight={FONT_WEIGHT_SEMIBOLD}
+            extraStyles={"word-break: break-word;"}
+          >
+            {message}
+          </Paragraph>
+        </Box>
+      </Cluster>
       <IconQuitLarge />
     </Cluster>
   </Box>

package/src/components/molecules/toast-notification/ToastNotification.stories.js

@@ -3,6 +3,9 @@ import ToastNotification from "./ToastNotification";
 import page from "../../../../.storybook/page";
 import { useToastNotification } from "../../../hooks";
 import { ToastVariants } from "../../../types/common";
+import { text } from "@storybook/addon-knobs";
+
+const groupId = "props";
 
 export const toastNotificationSuccess = () => {
   const {
@@ -26,6 +29,9 @@ export const toastNotificationSuccess = () => {
       message={toastMessage}
       toastOpen={isToastOpen}
       closeToastNotification={() => hideToast()}
+      role={text("role", "alert", groupId)}
+      minWidth={text("minWidth", null, groupId)}
+      maxWidth={text("maxWidth", null, groupId)}
     />
   );
 };
@@ -54,11 +60,43 @@ export const toastNotificationError = () => {
       message={toastMessage}
       toastOpen={isToastOpen}
       closeToastNotification={() => hideToast()}
+      role={text("role", "alert", groupId)}
+      minWidth={text("minWidth", null, groupId)}
+      maxWidth={text("maxWidth", null, groupId)}
     />
   );
 };
 toastNotificationError.storyName = "Error Toast";
 
+export const toastNotificationNoAutoHide = () => {
+  const {
+    isToastOpen,
+    toastMessage,
+    showToast,
+    hideToast
+  } = useToastNotification({ timeout: 0 });
+
+  useEffect(() => {
+    showToast({
+      message: "Success!",
+      variant: ToastVariants.SUCCESS
+    });
+  }, []);
+
+  return (
+    <ToastNotification
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
+      role={text("role", "alert", groupId)}
+      minWidth={text("minWidth", null, groupId)}
+      maxWidth={text("maxWidth", null, groupId)}
+    />
+  );
+};
+
+toastNotificationNoAutoHide.storyName = "No auto-hide";
+
 const story = page({
   title: "Components|Molecules/ToastNotification",
   Component: ToastNotification

package/src/hooks/use-toast-notification/index.js

@@ -10,7 +10,7 @@ const useToastNotification = ({ timeout = 5000 } = {}) => {
   const [toastState, setToastState] = useState(initialToastState);
 
   useEffect(() => {
-    if (toastState.isOpen) {
+    if (toastState.isOpen && timeout > 0) {
       setTimeout(() => {
         setToastState(initialToastState);
       }, timeout);