@thecb/components 10.4.7-beta.0 → 10.5.0-beta.0

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

@@ -0,0 +1,221 @@
+import React, { Fragment, useContext, 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);
+  const modalContainerRef = useRef(null);
+
+  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={{
+            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,249 @@
+import React, { Fragment, forwardRef, useContext, useRef } from "react";
+import { ThemeContext } from "styled-components";
+import AriaModal from "react-aria-modal";
+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 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 = ({
+  blurUnderlay = true,
+  buttonExtraStyles,
+  cancelAction,
+  cancelButtonText = "Cancel",
+  children,
+  closeButtonText = "Close",
+  continueAction,
+  continueButtonText = "Continue",
+  customWidth,
+  dataQa = null,
+  defaultWrapper = true,
+  hideModal,
+  initialFocusSelector = "",
+  isContinueActionDisabled = false,
+  isLoading,
+  maxHeight,
+  modalBodyBg = ATHENS_GREY,
+  modalBodyText,
+  modalHeaderBg = WHITE,
+  modalHeaderText,
+  modalOpen,
+  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 noButtonSection = noButtons;
+
+  const AllButtons = () =>
+    isMobile ? (
+      <Stack childGap="1rem" direction="row">
+        <Box width="100%" padding="0">
+          <ButtonWithAction
+            variant="secondary"
+            action={cancelAction ? cancelAction : hideModal}
+            text={cancelButtonText}
+            dataQa={cancelButtonText}
+            extraStyles={buttonExtraStyles}
+            borderRadius={CORNER_STANDARD}
+            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}
+            borderRadius={CORNER_STANDARD}
+            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}
+          borderRadius={CORNER_STANDARD}
+          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}
+          borderRadius={CORNER_STANDARD}
+          className="modal-continue-button"
+          role="button"
+          name={continueButtonText}
+        />
+      </Stack>
+    );
+
+  const CloseButton = () => (
+    <ButtonWithAction
+      action={hideModal}
+      variant="primary"
+      text={closeButtonText}
+      dataQa={closeButtonText}
+      extraStyles={buttonExtraStyles}
+      borderRadius={CORNER_STANDARD}
+      className="modal-close-button"
+      role="button"
+      name={closeButtonText}
+    />
+  );
+
+  const ContinueButton = () => (
+    <ButtonWithAction
+      variant={useDangerButton ? "danger" : "primary"}
+      action={continueAction}
+      text={continueButtonText}
+      dataQa={continueButtonText}
+      isLoading={isLoading}
+      disabled={isContinueActionDisabled}
+      extraStyles={buttonExtraStyles}
+      borderRadius={CORNER_STANDARD}
+      className="modal-continue-button"
+      role="button"
+      name={continueButtonText}
+    />
+  );
+
+  let MaybeButtons = forwardRef(() => <Fragment />);
+  if (!noButtons) {
+    if (onlyContinueButton) {
+      MaybeButtons = ContinueButton;
+    } else if (onlyCloseButton) {
+      MaybeButtons = CloseButton;
+    } else {
+      MaybeButtons = AllButtons;
+    }
+  }
+
+  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: 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">
+              <Stack childGap={SPACING_NORMAL}>
+                <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 ? (
+                  <MaybeButtons />
+                ) : (
+                  <Box padding={`0 ${SPACING_NORMAL} ${SPACING_NORMAL}`}>
+                    <Stack
+                      direction="row"
+                      justify="flex-end"
+                      align="center"
+                      childGap="0rem"
+                    >
+                      <MaybeButtons />
+                    </Stack>
+                  </Box>
+                )}
+              </Stack>
+            </Box>
+          </Box>
+        </AriaModal>
+      )}
+      {children}
+    </div>
+  );
+};
+
+export default Modal;

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