@thecb/components 10.6.1-beta.0 → 10.6.2-beta.0

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

@@ -0,0 +1,234 @@
+import React, { Fragment, useContext, useEffect, useRef } from "react";
+import { ThemeContext } from "styled-components";
+import AriaModal from "react-aria-modal";
+import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import Paragraph from "../../atoms/paragraph";
+import Title from "../../atoms/title";
+import ButtonWithAction from "../../atoms/button-with-action";
+import { Box, Stack, Cluster } from "../../atoms/layouts";
+
+/*
+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 = ({
+  hideModal,
+  onExit = hideModal,
+  continueAction,
+  isContinueActionDisabled = false,
+  cancelAction,
+  modalOpen,
+  modalHeaderText,
+  modalBodyText,
+  cancelButtonText = "Cancel",
+  continueButtonText = "Continue",
+  closeButtonText = "Close",
+  modalHeaderBg = WHITE,
+  modalBodyBg = ATHENS_GREY,
+  useDangerButton = false,
+  defaultWrapper = true,
+  onlyCloseButton = false,
+  noButtons = false, // for instances where modal is closed automatically
+  maxHeight,
+  underlayClickExits = true,
+  noBorder,
+  customWidth,
+  isLoading,
+  buttonExtraStyles,
+  children,
+  dataQa = null,
+  initialFocusSelector = "",
+  blurUnderlay = true
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
+  // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
+  // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
+  // this option will be populated on initial render when `focus-trap` is checking
+  // these option. When there are no buttons in the modal, this causes an error.
+  // Because `focus-trap` cannot be disabled, the ref itself requires a default value
+  // to satisfy `focus-trap` until React populates it with the real ref value.
+  //
+  // See:
+  //   - https://react.dev/reference/react/useRef#caveats
+  //   - https://github.com/davidtheclark/react-aria-modal/pull/103
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  const modalContainerRef = useRef("#react-aria-modal-dialog");
+
+  return (
+    <div ref={modalContainerRef} tabIndex="-1" data-qa={dataQa}>
+      {modalOpen && (
+        <AriaModal
+          focusTrapOptions={{
+            // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
+            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={{
+            width: 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"
+            borderRadius="2px"
+            boxShadow="inset 0px -2px 0px 0px rgb(0, 80, 149)"
+          >
+            <Box background={modalHeaderBg} padding="1.5rem">
+              <Cluster justify="flex-start" align="center">
+                <Title as="h2" weight={FONT_WEIGHT_SEMIBOLD} fontSize="1.25rem">
+                  {modalHeaderText}
+                </Title>
+              </Cluster>
+            </Box>
+            <Box background={modalBodyBg} padding="1.5rem">
+              <Stack childGap="1.5rem">
+                <Box
+                  borderWidthOverride={noBorder && "0 0 2px 0"}
+                  borderColor={!noBorder && SILVER_GREY}
+                  padding={!noBorder && "0 0 1.5rem 0"}
+                  extraStyles={
+                    maxHeight ? `max-height: ${maxHeight}; overflow: auto;` : ``
+                  }
+                >
+                  {defaultWrapper ? (
+                    <Paragraph variant="p">{modalBodyText}</Paragraph>
+                  ) : (
+                    <Box padding={maxHeight ? "0 0 1rem 0" : "0"}>
+                      {modalBodyText}
+                    </Box>
+                  )}
+                </Box>
+                <Box padding="0">
+                  <Stack
+                    direction="row"
+                    justify="flex-end"
+                    align="center"
+                    childGap="0rem"
+                  >
+                    {!noButtons && (
+                      <>
+                        {!onlyCloseButton ? (
+                          <Fragment>
+                            {isMobile ? (
+                              <Stack childGap="1rem" direction="row">
+                                <Box width="100%" padding="0">
+                                  <ButtonWithAction
+                                    variant="secondary"
+                                    action={
+                                      cancelAction ? cancelAction : hideModal
+                                    }
+                                    text={cancelButtonText}
+                                    dataQa={cancelButtonText}
+                                    extraStyles={buttonExtraStyles}
+                                    className="modal-cancel-button"
+                                    role="button"
+                                    name={cancelButtonText}
+                                  />
+                                </Box>
+                                <Box width="100%" padding="0">
+                                  <ButtonWithAction
+                                    variant={
+                                      useDangerButton ? "danger" : "primary"
+                                    }
+                                    action={continueAction}
+                                    text={continueButtonText}
+                                    dataQa={continueButtonText}
+                                    isLoading={isLoading}
+                                    disabled={isContinueActionDisabled}
+                                    extraStyles={buttonExtraStyles}
+                                    className="modal-continue-button"
+                                    role="button"
+                                    name={continueButtonText}
+                                  />
+                                </Box>
+                              </Stack>
+                            ) : (
+                              <Stack
+                                childGap="1rem"
+                                direction="row"
+                                justify="flex-end"
+                              >
+                                <ButtonWithAction
+                                  variant="secondary"
+                                  action={
+                                    cancelAction ? cancelAction : hideModal
+                                  }
+                                  text={cancelButtonText}
+                                  dataQa={cancelButtonText}
+                                  extraStyles={buttonExtraStyles}
+                                  className="modal-cancel-button"
+                                  role="button"
+                                  name={cancelButtonText}
+                                />
+                                <ButtonWithAction
+                                  variant={
+                                    useDangerButton ? "danger" : "primary"
+                                  }
+                                  action={continueAction}
+                                  text={continueButtonText}
+                                  dataQa={continueButtonText}
+                                  isLoading={isLoading}
+                                  disabled={isContinueActionDisabled}
+                                  extraStyles={buttonExtraStyles}
+                                  className="modal-continue-button"
+                                  role="button"
+                                  name={continueButtonText}
+                                />
+                              </Stack>
+                            )}
+                          </Fragment>
+                        ) : (
+                          <Box padding="0.5rem">
+                            <ButtonWithAction
+                              action={hideModal}
+                              variant="primary"
+                              text={closeButtonText}
+                              dataQa={closeButtonText}
+                              extraStyles={buttonExtraStyles}
+                              className="modal-close-button"
+                              role="button"
+                              name={closeButtonText}
+                            />
+                          </Box>
+                        )}
+                      </>
+                    )}
+                  </Stack>
+                </Box>
+              </Stack>
+            </Box>
+          </Box>
+        </AriaModal>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Modal;

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

@@ -0,0 +1,218 @@
+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_RADIUS,
+  BORDER_THIN,
+  FONT_SIZE,
+  FONT_WEIGHT_SEMIBOLD,
+  SPACING
+} 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,
+  CloseIconButton,
+  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",
+  cancelButtonVariant = "secondary",
+  children = [],
+  closeButtonText = "Close",
+  continueAction = noop,
+  continueButtonText = "Continue",
+  continueButtonVariant = "primary",
+  continueURL = "",
+  customWidth = "",
+  dataQa = null,
+  defaultWrapper = true,
+  hideModal = noop,
+  initialFocusSelector = "",
+  isContinueActionDisabled = false,
+  isLoading = false,
+  maxHeight = "",
+  modalBodyBg = "",
+  modalBodyText = "",
+  modalHeaderBg = "",
+  modalHeaderText = "",
+  modalOpen = false,
+  noButtons = false, // for instances where modal is closed automatically
+  onExit = hideModal,
+  onlyCloseButton = false,
+  onlyContinueButton = false,
+  showCloseIconButton = false,
+  underlayClickExits = true,
+  useDangerButton = false
+}) => {
+  const { isMobile } = useContext(ThemeContext);
+
+  // `AriaModal` uses `focus-trap` as a transient dependency. It automatically looks
+  // for a tabbable node when the modal mounts. When it doesn't find one, it looks to
+  // the `fallbackFocus` option. However, React does not guarantee the ref supplied to
+  // this option will be populated on initial render when `focus-trap` is checking
+  // these option. When there are no buttons in the modal, this causes an error.
+  // Because `focus-trap` cannot be disabled, the ref itself requires a default value
+  // to satisfy `focus-trap` until React populates it with the real ref value.
+  //
+  // See:
+  //   - https://react.dev/reference/react/useRef#caveats
+  //   - https://github.com/davidtheclark/react-aria-modal/pull/103
+  //   - https://github.com/focus-trap/focus-trap?tab=readme-ov-file#createoptions
+  const modalContainerRef = useRef("#react-aria-modal-dialog");
+
+  const hasCloseButton = onlyCloseButton && !noButtons;
+  const hasCancelButton = !onlyContinueButton && !onlyCloseButton && !noButtons;
+  const hasContinueButton =
+    (onlyContinueButton && !noButtons) || (!onlyCloseButton && !noButtons);
+
+  return (
+    <div ref={modalContainerRef} tabIndex="-1" data-qa={dataQa}>
+      {modalOpen && (
+        <AriaModal
+          focusTrapOptions={{
+            // fallback to resolve Jest unit test errors when tabbable doesn't exist in jsdom https://github.com/focus-trap/focus-trap-react/issues/91
+            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: BORDER_RADIUS.MD,
+            margin: SPACING.XS,
+            overflow: "auto",
+            width: isMobile ? "" : customWidth || "576px"
+          }}
+          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 || WHITE}
+              borderColor={SILVER_GREY}
+              borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
+              padding={`${SPACING.XS} ${SPACING.MD}`}
+            >
+              <Cluster
+                justify={showCloseIconButton ? "space-between" : "flex-start"}
+                align={
+                  showCloseIconButton && isMobile ? "flex-start" : "center"
+                }
+                nowrap
+              >
+                <Title
+                  as="h2"
+                  weight={FONT_WEIGHT_SEMIBOLD}
+                  fontSize={isMobile ? FONT_SIZE.MD : FONT_SIZE.LG}
+                >
+                  {modalHeaderText}
+                </Title>
+                {showCloseIconButton && (
+                  <CloseIconButton hideModal={hideModal} />
+                )}
+              </Cluster>
+            </Box>
+            <Box background={modalBodyBg || ATHENS_GREY} padding="0">
+              <Box
+                padding={SPACING.MD}
+                borderWidthOverride={!noButtons && `0 0 ${BORDER_THIN} 0`}
+                borderColor={!noButtons && SILVER_GREY}
+                extraStyles={
+                  maxHeight ? `max-height: ${maxHeight}; overflow: auto;` : ``
+                }
+              >
+                {defaultWrapper ? (
+                  <Paragraph variant={isMobile ? "pS" : "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}
+                        cancelButtonVariant={cancelButtonVariant}
+                        hideModal={hideModal}
+                        isMobile={isMobile}
+                        key="cancel"
+                      />
+                    ),
+                    hasContinueButton && (
+                      <ContinueButton
+                        buttonExtraStyles={buttonExtraStyles}
+                        continueAction={continueAction}
+                        continueButtonText={continueButtonText}
+                        continueURL={continueURL}
+                        continueButtonVariant={continueButtonVariant}
+                        isContinueActionDisabled={isContinueActionDisabled}
+                        isLoading={isLoading}
+                        isMobile={isMobile}
+                        key="continue"
+                        useDangerButton={useDangerButton}
+                      />
+                    ),
+                    hasCloseButton && (
+                      <CloseButton
+                        buttonExtraStyles={buttonExtraStyles}
+                        closeButtonText={closeButtonText}
+                        hideModal={hideModal}
+                        isMobile={isMobile}
+                        key="close"
+                      />
+                    )
+                  ].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 } 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.MD}>
+      <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,36 @@
+import React from "react";
+import {
+  BORDER_RADIUS,
+  FONT_SIZE
+} from "../../../../constants/style_constants";
+import { noop } from "../../../../util/general";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+
+export const CancelButton = ({
+  buttonExtraStyles = "",
+  cancelAction = noop,
+  cancelButtonText = "",
+  cancelButtonVariant = "secondary",
+  hideModal = noop,
+  isMobile = false
+}) => {
+  const fontSize = `font-size: ${isMobile ? FONT_SIZE.XS : FONT_SIZE.SM};`;
+  const width = isMobile ? "width: 100%;" : "";
+
+  return (
+    <ButtonWithAction
+      action={cancelAction ? cancelAction : hideModal}
+      borderRadius={BORDER_RADIUS.MD}
+      className="modal-cancel-button"
+      dataQa={cancelButtonText}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${width}`}
+      name={cancelButtonText}
+      role="button"
+      text={cancelButtonText}
+      textExtraStyles={`${fontSize}`}
+      variant={cancelButtonVariant}
+    />
+  );
+};
+
+export default CancelButton;

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

@@ -0,0 +1,34 @@
+import React from "react";
+import {
+  BORDER_RADIUS,
+  FONT_SIZE
+} 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 fontSize = `font-size: ${isMobile ? FONT_SIZE.XS : FONT_SIZE.SM};`;
+  const width = isMobile ? "width: 100%;" : "";
+
+  return (
+    <ButtonWithAction
+      action={hideModal}
+      borderRadius={BORDER_RADIUS.MD}
+      className="modal-close-button"
+      dataQa={closeButtonText}
+      extraStyles={`${buttonExtraStyles}; margin: 0; ${width}`}
+      name={closeButtonText}
+      role="button"
+      text={closeButtonText}
+      textExtraStyles={`${fontSize}`}
+      variant="primary"
+    />
+  );
+};
+
+export default CloseButton;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { noop } from "../../../../util/general";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+import { CloseIcon } from "../../../atoms/icons/CloseIcon";
+
+export const CloseIconButton = ({
+  buttonExtraStyles = "",
+  hideModal = noop,
+  iconWidth = "24",
+  iconHeight = "24",
+  ariaLabel = "Close Modal"
+}) => {
+  return (
+    <ButtonWithAction
+      action={hideModal}
+      aria-label={ariaLabel}
+      contentOverride
+      extraStyles={`
+        min-height: auto;
+        min-width: auto;
+        height: 1.5rem;
+        margin: 0 0 0 0.5rem;
+        &:focus {
+            outline-offset: -3px;
+        }
+     `}
+      variant="smallGhost"
+    >
+      <CloseIcon
+        role="img"
+        aria-hidden="true"
+        iconWidth={iconWidth}
+        iconHeight={iconHeight}
+      />
+    </ButtonWithAction>
+  );
+};
+
+export default CloseIconButton;

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

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