@thecb/components 10.4.7-beta.1 → 10.4.7-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.4.7-beta.1",
+  "version": "10.4.7-beta.3",
   "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/placeholder/Placeholder.js

@@ -16,7 +16,7 @@ import {
   IconAdd,
   PaymentMethodAddIcon
 } from "../icons";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
 const getLargeIcon = iconName => {
   switch (iconName) {
@@ -123,7 +123,7 @@ const Placeholder = ({
                     stroke: ${
                       variant === "large" ? CHARADE_GREY : themeValues.color
                     }; 
-                  }`}
+                  } `}
               >
                 {variant === "large" ? (
                   <Center intrinsic>
@@ -131,7 +131,7 @@ const Placeholder = ({
                     <Text
                       variant="pS"
                       color={themeValues.color}
-                      weight={FONT_WEIGHT_REGULAR}
+                      weight={FONT_WEIGHT_SEMIBOLD}
                       extraStyles={`text-align: center;`}
                     >
                       {text}
@@ -140,12 +140,12 @@ const Placeholder = ({
                 ) : (
                   <Cover singleChild minHeight="100%">
                     <Cluster justify="center" align="center">
-                      <IconAdd />
+                      <IconAdd strokeWidth="2" />
                       <Center intrinsic>
                         <Text
                           variant="pS"
                           color={themeValues.color}
-                          weight={FONT_WEIGHT_REGULAR}
+                          weight={FONT_WEIGHT_SEMIBOLD}
                           extraStyles={`padding: 0 0 0 8px; text-align: center;`}
                         >
                           {text}

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

@@ -13,7 +13,8 @@ const groupId = "props";
 
 const icons = {
   accounts: "accounts",
-  properties: "properties"
+  properties: "properties",
+  payments: "payments"
 };
 
 const iconLabel = "largeIcon";

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

@@ -78,8 +78,8 @@ const ToggleSwitch = ({
       backgroundColor: themeValues.white,
       right: "8px",
       top: "3px",
-      bottom: "4px",
-      left: "23px",
+      bottom: "3px",
+      left: "22px",
       transition: {
         ease: "backIn"
       }

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