@thecb/components 10.5.0-beta.5 → 10.5.0

package/package.json

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

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/molecules/modal/Modal.stories.js

@@ -68,9 +68,9 @@ export const modalV2 = () => (
     defaultWrapper={boolean("defaultWrapper", true, groupId)}
     hideModal={noop}
     maxHeight={text("maxHeight", "", groupId)}
-    modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+    modalBodyBg={text("modalBodyBg", "", groupId)}
     modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
-    modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+    modalHeaderBg={text("modalHeaderBg", "", groupId)}
     modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
     modalOpen={boolean("modalOpen", true, groupId)}
     noButtons={boolean("noButtons", false, groupId)}

package/src/components/molecules/modal/ModalControlV2.js

@@ -3,11 +3,11 @@ import AriaModal from "react-aria-modal";
 import { ThemeContext } from "styled-components";
 import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
 import {
+  BORDER_RADIUS,
   BORDER_THIN,
-  CORNER_STANDARD,
+  FONT_SIZE,
   FONT_WEIGHT_SEMIBOLD,
-  SPACING_NORMAL,
-  SPACING_XS
+  SPACING
 } from "../../../constants/style_constants";
 import { noop } from "../../../util/general";
 import Paragraph from "../../atoms/paragraph";
@@ -51,9 +51,9 @@ const Modal = ({
   isContinueActionDisabled = false,
   isLoading = false,
   maxHeight = "",
-  modalBodyBg = ATHENS_GREY,
+  modalBodyBg = "",
   modalBodyText = "",
-  modalHeaderBg = WHITE,
+  modalHeaderBg = "",
   modalHeaderText = "",
   modalOpen = false,
   noButtons = false, // for instances where modal is closed automatically
@@ -105,8 +105,8 @@ const Modal = ({
             WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
           }}
           dialogStyle={{
-            borderRadius: CORNER_STANDARD,
-            margin: SPACING_XS,
+            borderRadius: BORDER_RADIUS.MD,
+            margin: SPACING.XS,
             overflow: "auto",
             width: isMobile ? "" : customWidth || "615px"
           }}
@@ -117,20 +117,24 @@ const Modal = ({
         >
           <Box padding="0" boxShadow="inset 0px -2px 0px 0px rgb(0, 80, 149)">
             <Box
-              background={modalHeaderBg}
+              background={modalHeaderBg || WHITE}
               borderColor={SILVER_GREY}
               borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
-              padding={`${SPACING_XS} ${SPACING_NORMAL}`}
+              padding={`${SPACING.XS} ${SPACING.MD}`}
             >
               <Cluster justify="flex-start" align="center">
-                <Title as="h2" weight={FONT_WEIGHT_SEMIBOLD} fontSize="1.25rem">
+                <Title
+                  as="h2"
+                  weight={FONT_WEIGHT_SEMIBOLD}
+                  fontSize={isMobile ? FONT_SIZE.MD : FONT_SIZE.LG}
+                >
                   {modalHeaderText}
                 </Title>
               </Cluster>
             </Box>
-            <Box background={modalBodyBg} padding="0">
+            <Box background={modalBodyBg || ATHENS_GREY} padding="0">
               <Box
-                padding={SPACING_NORMAL}
+                padding={SPACING.MD}
                 borderWidthOverride={!noButtons && `0 0 ${BORDER_THIN} 0`}
                 borderColor={!noButtons && SILVER_GREY}
                 extraStyles={
@@ -138,9 +142,11 @@ const Modal = ({
                 }
               >
                 {defaultWrapper ? (
-                  <Paragraph variant="p">{modalBodyText}</Paragraph>
+                  <Paragraph variant={isMobile ? "pS" : "p"}>
+                    {modalBodyText}
+                  </Paragraph>
                 ) : (
-                  <Box padding={maxHeight ? `0 0 ${SPACING_XS} 0` : "0"}>
+                  <Box padding={maxHeight ? `0 0 ${SPACING.XS} 0` : "0"}>
                     {modalBodyText}
                   </Box>
                 )}

package/src/components/molecules/modal/__private__/ButtonLayoutWrapper.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { SPACING_NORMAL } from "../../../../constants/style_constants";
+import { SPACING } from "../../../../constants/style_constants";
 import { Box, Stack } from "../../../atoms/layouts";
 
 export const ButtonLayoutWrapper = ({ children = [], isMobile = false }) => {
@@ -7,7 +7,7 @@ export const ButtonLayoutWrapper = ({ children = [], isMobile = false }) => {
   const flexGrow = isMobile ? "flex-grow: 1;" : "";
 
   return (
-    <Box padding={SPACING_NORMAL}>
+    <Box padding={SPACING.MD}>
       <Stack childGap="1rem" direction="row" justify="flex-end">
         {safeChildren.map((child, index) => {
           return (

package/src/components/molecules/modal/__private__/CancelButton.js

@@ -1,5 +1,8 @@
 import React from "react";
-import { CORNER_STANDARD } from "../../../../constants/style_constants";
+import {
+  BORDER_RADIUS,
+  FONT_SIZE
+} from "../../../../constants/style_constants";
 import { noop } from "../../../../util/general";
 import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
 
@@ -10,18 +13,20 @@ export const CancelButton = ({
   hideModal = noop,
   isMobile = false
 }) => {
-  const fullWidth = isMobile ? "width: 100%;" : "";
+  const fontSize = `font-size: ${isMobile ? FONT_SIZE.XS : FONT_SIZE.SM};`;
+  const width = isMobile ? "width: 100%;" : "";
 
   return (
     <ButtonWithAction
       action={cancelAction ? cancelAction : hideModal}
-      borderRadius={CORNER_STANDARD}
+      borderRadius={BORDER_RADIUS.MD}
       className="modal-cancel-button"
       dataQa={cancelButtonText}
-      extraStyles={`${buttonExtraStyles}; margin: 0; ${fullWidth}`}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${width}`}
       name={cancelButtonText}
       role="button"
       text={cancelButtonText}
+      textExtraStyles={`${fontSize}`}
       variant="secondary"
     />
   );

package/src/components/molecules/modal/__private__/CloseButton.js

@@ -1,5 +1,8 @@
 import React from "react";
-import { CORNER_STANDARD } from "../../../../constants/style_constants";
+import {
+  BORDER_RADIUS,
+  FONT_SIZE
+} from "../../../../constants/style_constants";
 import { noop } from "../../../../util/general";
 import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
 
@@ -9,18 +12,20 @@ export const CloseButton = ({
   hideModal = noop,
   isMobile = false
 }) => {
-  const fullWidth = isMobile ? "width: 100%;" : "";
+  const fontSize = `font-size: ${isMobile ? FONT_SIZE.XS : FONT_SIZE.SM};`;
+  const width = isMobile ? "width: 100%;" : "";
 
   return (
     <ButtonWithAction
       action={hideModal}
-      borderRadius={CORNER_STANDARD}
+      borderRadius={BORDER_RADIUS.MD}
       className="modal-close-button"
       dataQa={closeButtonText}
-      extraStyles={`${buttonExtraStyles}; margin: 0; ${fullWidth}`}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${width}`}
       name={closeButtonText}
       role="button"
       text={closeButtonText}
+      textExtraStyles={`${fontSize}`}
       variant="primary"
     />
   );

package/src/components/molecules/modal/__private__/ContinueButton.js

@@ -1,5 +1,8 @@
 import React from "react";
-import { CORNER_STANDARD } from "../../../../constants/style_constants";
+import {
+  BORDER_RADIUS,
+  FONT_SIZE
+} from "../../../../constants/style_constants";
 import { noop } from "../../../../util/general";
 import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
 import ButtonWithLink from "../../../atoms/button-with-link/ButtonWithLink";
@@ -15,21 +18,23 @@ export const ContinueButton = ({
   useDangerButton = false
 }) => {
   const ContinueButtonAtom = continueURL ? ButtonWithLink : ButtonWithAction;
-  const fullWidth = isMobile ? "width: 100%;" : "";
+  const fontSize = `font-size: ${isMobile ? FONT_SIZE.XS : FONT_SIZE.SM};`;
+  const width = isMobile ? "width: 100%;" : "";
 
   return (
     <ContinueButtonAtom
       action={continueAction}
-      borderRadius={CORNER_STANDARD}
+      borderRadius={BORDER_RADIUS.MD}
       className="modal-continue-button"
       dataQa={continueButtonText}
       disabled={isContinueActionDisabled}
-      extraStyles={`${buttonExtraStyles}; margin: 0; ${fullWidth}`}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${width}`}
       isLoading={isLoading}
-      linkExtraStyles={`display: inline-block; ${fullWidth}`}
+      linkExtraStyles={`display: inline-block; ${width}`}
       name={continueButtonText}
       role="button"
       text={continueButtonText}
+      textExtraStyles={`${fontSize}`}
       url={continueURL}
       variant={useDangerButton ? "danger" : "primary"}
     />

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/constants/style_constants.d.ts

@@ -1,7 +1,16 @@
 type StyleDeclaration = string;
 
+interface StyleOptions {
+  XS?: string;
+  SM?: string;
+  MD?: string;
+  LG?: string;
+  XL?: string;
+}
+
+export const BORDER_RADIUS: StyleOptions;
 export const BORDER_THIN: StyleDeclaration;
-export const CORNER_STANDARD: StyleDeclaration;
+export const FONT_SIZE: StyleOptions;
 export const FONT_WEIGHT_REGULAR: StyleDeclaration;
 export const FONT_WEIGHT_SEMIBOLD: StyleDeclaration;
 export const FONT_WEIGHT_BOLD: StyleDeclaration;
@@ -11,5 +20,4 @@ export const COMPACT_JUMBO_HEIGHT: StyleDeclaration;
 export const JUMBO_HEIGHT: StyleDeclaration;
 export const SPACER_HEIGHT: StyleDeclaration;
 export const LINK_TEXT_DECORATION: StyleDeclaration;
-export const SPACING_XS: StyleDeclaration;
-export const SPACING_NORMAL: StyleDeclaration;
+export const SPACING: StyleOptions;

package/src/constants/style_constants.js

@@ -1,7 +1,15 @@
 /* These are constants used by nav frontend components */
 
+export const BORDER_RADIUS = {
+  MD: "4px" // Figma: Corners/Standard Corner
+};
 export const BORDER_THIN = "1px";
-export const CORNER_STANDARD = "4px";
+export const FONT_SIZE = {
+  XS: "0.750rem", // 12px
+  SM: "0.875rem", // 14px
+  MD: "1.000rem", // 16px
+  LG: "1.125rem" // 18px
+};
 export const FONT_WEIGHT_REGULAR = "400";
 export const FONT_WEIGHT_SEMIBOLD = "600";
 export const FONT_WEIGHT_BOLD = "700";
@@ -11,5 +19,7 @@ export const COMPACT_JUMBO_HEIGHT = "65px";
 export const JUMBO_HEIGHT = "300px";
 export const SPACER_HEIGHT = "65px";
 export const LINK_TEXT_DECORATION = "underline solid 1px";
-export const SPACING_XS = "1.0rem";
-export const SPACING_NORMAL = "1.5rem";
+export const SPACING = {
+  XS: "1.0rem", // Figma: Spacing/XS
+  MD: "1.5rem" // Figma: Spacing/Normal
+};

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