@thecb/components 10.4.9-beta.0 → 10.5.0-beta.1

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

@@ -0,0 +1,180 @@
+import React, { useContext, useRef } from "react";
+import AriaModal from "react-aria-modal";
+import { ThemeContext } from "styled-components";
+import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
+import {
+  BORDER_THIN,
+  CORNER_STANDARD,
+  FONT_WEIGHT_SEMIBOLD,
+  SPACING_NORMAL,
+  SPACING_XS
+} from "../../../constants/style_constants";
+import { noop } from "../../../util/general";
+import Paragraph from "../../atoms/paragraph";
+import Title from "../../atoms/title";
+import { Box, Cluster } from "../../atoms/layouts";
+import withWindowSize from "../../withWindowSize";
+import {
+  ButtonLayoutWrapper,
+  CancelButton,
+  CloseButton,
+  ContinueButton
+} from "./__private__";
+
+/*
+Default Modal molecule
+Uses react-aria-modal behind the scenes for a11y purposes
+Styling accomplished with our atoms / layout primitives
+
+Cancel button will (for now) always use hideModal as its action
+Continue button takes an action, if you want to navigate to
+a different route (as with a link) connect() and use "push" from @thecb/connected-react-router
+*/
+
+const getApplicationNode = () => document.getElementById("root");
+
+const Modal = ({
+  blurUnderlay = true,
+  buttonExtraStyles = "",
+  cancelAction = noop,
+  cancelButtonText = "Cancel",
+  children = [],
+  closeButtonText = "Close",
+  continueAction = noop,
+  continueButtonText = "Continue",
+  continueURL = "",
+  customWidth = "",
+  dataQa = null,
+  defaultWrapper = true,
+  hideModal = noop,
+  initialFocusSelector = "",
+  isContinueActionDisabled = false,
+  isLoading = false,
+  maxHeight = "",
+  modalBodyBg = ATHENS_GREY,
+  modalBodyText = "",
+  modalHeaderBg = WHITE,
+  modalHeaderText = "",
+  modalOpen = false,
+  noButtons = false, // for instances where modal is closed automatically
+  onExit = hideModal,
+  onlyCloseButton = false,
+  onlyContinueButton = false,
+  underlayClickExits = true,
+  useDangerButton = false
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+  const modalContainerRef = useRef(null);
+
+  const hasCloseButton = onlyCloseButton && !noButtons;
+  const hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
+  const hasContinueButton =
+    (onlyContinueButton && !noButtons) || (!onlyCloseButton && !noButtons);
+
+  return (
+    <div ref={modalContainerRef} data-qa={dataQa}>
+      {modalOpen && (
+        <AriaModal
+          // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
+          focusTrapOptions={{
+            fallbackFocus: modalContainerRef?.current
+          }}
+          onExit={onExit}
+          getApplicationNode={getApplicationNode}
+          titleText={modalHeaderText}
+          underlayStyle={{
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+            background: "rgba(41, 42, 51, 0.45)",
+            backdropFilter: blurUnderlay ? "blur(4px)" : "none",
+            WebkitBackdropFilter: blurUnderlay ? "blur(4px)" : "none"
+          }}
+          dialogStyle={{
+            borderRadius: CORNER_STANDARD,
+            width: isMobile ? "" : customWidth || "615px",
+            overflow: "auto"
+          }}
+          underlayClickExits={underlayClickExits}
+          aria-modal={true}
+          initialFocus={initialFocusSelector}
+          focusDialog={!initialFocusSelector} // Focus the dialogue box itself if no selector for initial focus was provided
+        >
+          <Box padding="0" boxShadow="inset 0px -2px 0px 0px rgb(0, 80, 149)">
+            <Box
+              background={modalHeaderBg}
+              borderColor={SILVER_GREY}
+              borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
+              padding={`${SPACING_XS} ${SPACING_NORMAL}`}
+            >
+              <Cluster justify="flex-start" align="center">
+                <Title as="h2" weight={FONT_WEIGHT_SEMIBOLD} fontSize="1.25rem">
+                  {modalHeaderText}
+                </Title>
+              </Cluster>
+            </Box>
+            <Box background={modalBodyBg} padding="0">
+              <Box
+                padding={SPACING_NORMAL}
+                borderWidthOverride={!noButtons && `0 0 ${BORDER_THIN} 0`}
+                borderColor={!noButtons && SILVER_GREY}
+                extraStyles={
+                  maxHeight ? `max-height: ${maxHeight}; overflow: auto;` : ``
+                }
+              >
+                {defaultWrapper ? (
+                  <Paragraph variant="p">{modalBodyText}</Paragraph>
+                ) : (
+                  <Box padding={maxHeight ? `0 0 ${SPACING_XS} 0` : "0"}>
+                    {modalBodyText}
+                  </Box>
+                )}
+              </Box>
+              {noButtons ? (
+                <></>
+              ) : (
+                <ButtonLayoutWrapper isMobile={isMobile}>
+                  {[
+                    hasCancelButton && (
+                      <CancelButton
+                        buttonExtraStyles={buttonExtraStyles}
+                        cancelAction={cancelAction}
+                        cancelButtonText={cancelButtonText}
+                        hideModal={hideModal}
+                        isMobile={isMobile}
+                      />
+                    ),
+                    hasContinueButton && (
+                      <ContinueButton
+                        buttonExtraStyles={buttonExtraStyles}
+                        continueAction={continueAction}
+                        continueButtonText={continueButtonText}
+                        continueURL={continueURL}
+                        isContinueActionDisabled={isContinueActionDisabled}
+                        isLoading={isLoading}
+                        isMobile={isMobile}
+                        useDangerButton={useDangerButton}
+                      />
+                    ),
+                    hasCloseButton && (
+                      <CloseButton
+                        buttonExtraStyles={buttonExtraStyles}
+                        closeButtonText={closeButtonText}
+                        hideModal={hideModal}
+                        isMobile={isMobile}
+                      />
+                    )
+                  ].filter(button => button)}
+                </ButtonLayoutWrapper>
+              )}
+            </Box>
+          </Box>
+        </AriaModal>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default withWindowSize(Modal);

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

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

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { CORNER_STANDARD } from "../../../../constants/style_constants";
+import { noop } from "../../../../util/general";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+
+export const CancelButton = ({
+  buttonExtraStyles = "",
+  cancelAction = noop,
+  cancelButtonText = "",
+  hideModal = noop,
+  isMobile = false
+}) => {
+  const fullWidth = isMobile ? "width: 100%;" : "";
+
+  return (
+    <ButtonWithAction
+      action={cancelAction ? cancelAction : hideModal}
+      borderRadius={CORNER_STANDARD}
+      className="modal-cancel-button"
+      dataQa={cancelButtonText}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${fullWidth}`}
+      name={cancelButtonText}
+      role="button"
+      text={cancelButtonText}
+      variant="secondary"
+    />
+  );
+};
+
+export default CancelButton;

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { CORNER_STANDARD } from "../../../../constants/style_constants";
+import { noop } from "../../../../util/general";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+
+export const CloseButton = ({
+  buttonExtraStyles = "",
+  closeButtonText = "",
+  hideModal = noop,
+  isMobile = false
+}) => {
+  const fullWidth = isMobile ? "width: 100%;" : "";
+
+  return (
+    <ButtonWithAction
+      action={hideModal}
+      borderRadius={CORNER_STANDARD}
+      className="modal-close-button"
+      dataQa={closeButtonText}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${fullWidth}`}
+      name={closeButtonText}
+      role="button"
+      text={closeButtonText}
+      variant="primary"
+    />
+  );
+};
+
+export default CloseButton;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { CORNER_STANDARD } 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";
+
+export const ContinueButton = ({
+  buttonExtraStyles = "",
+  continueAction = noop,
+  continueButtonText = "",
+  continueURL = "",
+  isContinueActionDisabled = false,
+  isLoading = false,
+  isMobile = false,
+  useDangerButton = false
+}) => {
+  const ContinueButtonAtom = continueURL ? ButtonWithLink : ButtonWithAction;
+  const fullWidth = isMobile ? "width: 100%;" : "";
+
+  return (
+    <ContinueButtonAtom
+      action={continueAction}
+      borderRadius={CORNER_STANDARD}
+      className="modal-continue-button"
+      dataQa={continueButtonText}
+      disabled={isContinueActionDisabled}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${fullWidth}`}
+      isLoading={isLoading}
+      linkExtraStyles={`display: inline-block; ${fullWidth}`}
+      name={continueButtonText}
+      role="button"
+      text={continueButtonText}
+      url={continueURL}
+      variant={useDangerButton ? "danger" : "primary"}
+    />
+  );
+};
+
+export default ContinueButton;

package/src/components/molecules/modal/__private__/index.d.ts

@@ -0,0 +1,46 @@
+import React from "react";
+import Expand from "../../../../util/expand";
+
+export interface ButtonLayoutWrapperProps {
+  isMobile?: boolean;
+}
+
+export declare const ButtonLayoutWrapper: React.FC<Expand<
+  ButtonLayoutWrapperProps
+> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export interface CancelButtonProps {
+  buttonExtraStyles?: string;
+  cancelAction?: Function;
+  cancelButtonText?: string;
+  hideModal?: Function;
+  isMobile?: boolean;
+}
+
+export declare const CancelButton: React.FC<Expand<CancelButtonProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export interface CloseButtonProps {
+  buttonExtraStyles?: string;
+  closeButtonText?: string;
+  hideModal?: Function;
+  isMobile?: boolean;
+}
+
+export declare const CloseButton: React.FC<Expand<CloseButtonProps> &
+  React.HTMLAttributes<HTMLElement>>;
+
+export interface ContinueButtonProps {
+  buttonExtraStyles?: string;
+  continueAction?: Function;
+  continueButtonText?: string;
+  continueURL?: string;
+  isContinueActionDisabled?: boolean;
+  isLoading?: boolean;
+  isMobile?: boolean;
+  useDangerButton?: boolean;
+}
+
+export declare const ContinueButton: React.FC<Expand<ContinueButtonProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -0,0 +1,4 @@
+export { default as ButtonLayoutWrapper } from "./ButtonLayoutWrapper";
+export { default as CancelButton } from "./CancelButton";
+export { default as CloseButton } from "./CloseButton";
+export { default as ContinueButton } from "./ContinueButton";

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

@@ -29,8 +29,7 @@ const ToastNotification = ({
   maxWidth = "350px",
   height = "56px",
   childGap = "1rem",
-  backgroundColor,
-  role = "alert"
+  backgroundColor
 }) => (
   <Box
     onClick={closeToastNotification}
@@ -56,21 +55,18 @@ const ToastNotification = ({
       ${extraStyles};
       cursor: pointer;
     `}
-    role={role}
   >
-    <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>
+    <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>
       <IconQuitLarge />
     </Cluster>
   </Box>

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

@@ -3,9 +3,6 @@ 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 {
@@ -29,9 +26,6 @@ export const toastNotificationSuccess = () => {
       message={toastMessage}
       toastOpen={isToastOpen}
       closeToastNotification={() => hideToast()}
-      role={text("role", "alert", groupId)}
-      minWidth={text("minWidth", null, groupId)}
-      maxWidth={text("maxWidth", null, groupId)}
     />
   );
 };
@@ -60,43 +54,11 @@ 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,11 +1,15 @@
 type StyleDeclaration = string;
 
-export const HEADER_HEIGHT: StyleDeclaration;
-export const FOOTER_HEIGHT: StyleDeclaration;
-export const SPACER_HEIGHT: StyleDeclaration;
-export const JUMBO_HEIGHT: StyleDeclaration;
-export const COMPACT_JUMBO_HEIGHT: StyleDeclaration;
+export const BORDER_THIN: StyleDeclaration;
+export const CORNER_STANDARD: StyleDeclaration;
 export const FONT_WEIGHT_REGULAR: StyleDeclaration;
-export const FONT_WEIGHT_BOLD: StyleDeclaration;
 export const FONT_WEIGHT_SEMIBOLD: StyleDeclaration;
+export const FONT_WEIGHT_BOLD: StyleDeclaration;
+export const FOOTER_HEIGHT: StyleDeclaration;
+export const HEADER_HEIGHT: StyleDeclaration;
+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;

package/src/constants/style_constants.js

@@ -1,23 +1,15 @@
 /* These are constants used by nav frontend components */
 
-const HEADER_HEIGHT = "104px";
-const FOOTER_HEIGHT = "100px";
-const SPACER_HEIGHT = "65px";
-const JUMBO_HEIGHT = "300px";
-const COMPACT_JUMBO_HEIGHT = "65px";
-const FONT_WEIGHT_REGULAR = "400";
-const FONT_WEIGHT_BOLD = "700";
-const FONT_WEIGHT_SEMIBOLD = "600";
-const LINK_TEXT_DECORATION = "underline solid 1px";
-
-export {
-  HEADER_HEIGHT,
-  FOOTER_HEIGHT,
-  SPACER_HEIGHT,
-  JUMBO_HEIGHT,
-  COMPACT_JUMBO_HEIGHT,
-  FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_BOLD,
-  FONT_WEIGHT_SEMIBOLD,
-  LINK_TEXT_DECORATION
-};
+export const BORDER_THIN = "1px";
+export const CORNER_STANDARD = "4px";
+export const FONT_WEIGHT_REGULAR = "400";
+export const FONT_WEIGHT_SEMIBOLD = "600";
+export const FONT_WEIGHT_BOLD = "700";
+export const FOOTER_HEIGHT = "100px";
+export const HEADER_HEIGHT = "104px";
+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";

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 && timeout > 0) {
+    if (toastState.isOpen) {
       setTimeout(() => {
         setToastState(initialToastState);
       }, timeout);