@thecb/components 6.0.0 → 6.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "6.0.0",
+  "version": "6.0.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/dropdown/Dropdown.js

@@ -1,7 +1,11 @@
 import React, { useEffect, Fragment, useState, useRef, createRef } from "react";
 import { Box, Stack } from "../layouts";
 import Text from "../text";
-import { noop } from "../../../util/general";
+import {
+  noop,
+  inputDisabledStyle,
+  inputPlaceholderTextStyle
+} from "../../../util/general";
 import DropdownIcon from "./DropdownIcon";
 import styled from "styled-components";
 // support for Array.prototype.at() in older browsers
@@ -12,7 +16,8 @@ import {
   GREY_CHATEAU,
   STORM_GREY,
   MINESHAFT_GREY,
-  ERROR_COLOR
+  ERROR_COLOR,
+  CHARADE_GREY
 } from "../../../constants/colors";
 import { fallbackValues } from "./Dropdown.theme";
 import { themeComponent } from "../../../util/themeUtils";
@@ -300,10 +305,9 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         extraStyles={
-          disabled &&
-          `color: #6e727e;
-            background-color: #f7f7f7;
-            pointer-events: none;`
+          disabled
+            ? `${inputPlaceholderTextStyle}${inputDisabledStyle}`
+            : inputPlaceholderTextStyle
         }
         hoverStyles={`background-color: ${themeValues.hoverColor};`}
         isOpen={isOpen}

package/src/components/molecules/highlight-tab-row/HighlightTabRow.js

@@ -35,6 +35,9 @@ const HighlightTabRow = ({
       role="region"
       aria-label="Payment step"
     >
+      <Box srOnly padding="0">
+        <Text>{`Current step: ${tabs[highlightIndex]}`}</Text>
+      </Box>
       <Center maxWidth="76.5rem">
         <Reel
           padding="0"

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

@@ -34,6 +34,7 @@ const Modal = ({
   useDangerButton = false,
   defaultWrapper = true,
   onlyCloseButton = false,
+  noButtons = false, // for instances where modal is closed automatically
   maxHeight,
   underlayClickExits = true,
   noBorder,
@@ -98,69 +99,81 @@ const Modal = ({
                     align="center"
                     childGap="0rem"
                   >
-                    {!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"
-                              />
-                            </Box>
-                            <Box width="100%" padding="0">
-                              <ButtonWithAction
-                                variant={useDangerButton ? "danger" : "primary"}
-                                action={continueAction}
-                                text={continueButtonText}
-                                dataQa={continueButtonText}
-                                isLoading={isLoading}
-                                extraStyles={buttonExtraStyles}
-                                className="modal-continue-button"
-                              />
-                            </Box>
-                          </Stack>
+                    {!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"
+                                  />
+                                </Box>
+                                <Box width="100%" padding="0">
+                                  <ButtonWithAction
+                                    variant={
+                                      useDangerButton ? "danger" : "primary"
+                                    }
+                                    action={continueAction}
+                                    text={continueButtonText}
+                                    dataQa={continueButtonText}
+                                    isLoading={isLoading}
+                                    extraStyles={buttonExtraStyles}
+                                    className="modal-continue-button"
+                                  />
+                                </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"
+                                />
+                                <ButtonWithAction
+                                  variant={
+                                    useDangerButton ? "danger" : "primary"
+                                  }
+                                  action={continueAction}
+                                  text={continueButtonText}
+                                  dataQa={continueButtonText}
+                                  isLoading={isLoading}
+                                  extraStyles={buttonExtraStyles}
+                                  className="modal-continue-button"
+                                />
+                              </Stack>
+                            )}
+                          </Fragment>
                         ) : (
-                          <Stack
-                            childGap="1rem"
-                            direction="row"
-                            justify="flex-end"
-                          >
+                          <Box padding="0.5rem">
                             <ButtonWithAction
-                              variant="secondary"
-                              action={cancelAction ? cancelAction : hideModal}
-                              text={cancelButtonText}
-                              dataQa={cancelButtonText}
+                              action={hideModal}
+                              variant="primary"
+                              text="Close"
+                              dataQa="Close"
                               extraStyles={buttonExtraStyles}
                               className="modal-cancel-button"
                             />
-                            <ButtonWithAction
-                              variant={useDangerButton ? "danger" : "primary"}
-                              action={continueAction}
-                              text={continueButtonText}
-                              dataQa={continueButtonText}
-                              isLoading={isLoading}
-                              extraStyles={buttonExtraStyles}
-                              className="modal-continue-button"
-                            />
-                          </Stack>
+                          </Box>
                         )}
-                      </Fragment>
-                    ) : (
-                      <Box padding="0.5rem">
-                        <ButtonWithAction
-                          action={hideModal}
-                          variant="primary"
-                          text="Close"
-                          dataQa="Close"
-                          extraStyles={buttonExtraStyles}
-                          className="modal-cancel-button"
-                        />
-                      </Box>
+                      </>
                     )}
                   </Stack>
                 </Box>

package/src/components/molecules/modal/Modal.stories.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { text, boolean } from "@storybook/addon-knobs";
 import Modal from "./Modal";
 
@@ -6,7 +6,8 @@ import page from "../../../../.storybook/page";
 
 import Text from "../../atoms/text";
 import { noop } from "../../../util/general";
-
+import Spinner from "../../atoms/spinner/Spinner";
+import { Center } from "../../atoms/layouts";
 const groupId = "props";
 export const modal = () => (
   <Modal
@@ -23,7 +24,7 @@ export const modal = () => (
     )}
     hideModal={noop}
     continueAction={noop}
-    modalOpen={boolean("modalOpen", false, groupId)}
+    modalOpen={boolean("modalOpen", true, groupId)}
     modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
     modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
     cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
@@ -37,6 +38,54 @@ export const modal = () => (
   />
 );
 
+modal.storyName = "Standard Modal";
+
+export const modalWithoutButtons = () => {
+  const [isModalOpen, setIsModalOpen] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      // some async action or timer closes the modal instead
+      setIsModalOpen(false);
+    }, 3000);
+  }, []);
+  return (
+    <Modal
+      ModalLink={() => (
+        <Text
+          tabIndex={0}
+          onClick={noop}
+          color={"#347BB2"}
+          fontSize="18px"
+          lineHeight="2rem"
+          extraStyles={`cursor: pointer;`}
+        >
+          Modal Link
+        </Text>
+      )}
+      hideModal={noop}
+      continueAction={noop}
+      modalOpen={isModalOpen}
+      modalHeaderText={text(
+        "modalHeaderText",
+        "Modal Without Buttons",
+        groupId
+      )}
+      modalBodyText={
+        <Center tabIndex={0}>
+          <Spinner size="100" />
+        </Center>
+      }
+      modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+      modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+      defaultWrapper={boolean("defaultWrapper", true, groupId)}
+      noButtons={boolean("noButtons", true, groupId)}
+      maxHeight={text("maxHeight", null, groupId)}
+    />
+  );
+};
+
+modalWithoutButtons.storyName = "Modal Without Buttons";
+
 const story = page({
   title: "Components|Molecules/Modal",
   Component: Modal

package/src/util/general.js

@@ -1,5 +1,6 @@
 import React, { Fragment } from "react";
 import numeral from "numeral";
+import { CHARADE_GREY } from "../constants/colors";
 
 export const noop = () => {};
 
@@ -96,3 +97,23 @@ export const screenReaderOnlyStyle = `
   height: 1px;
   overflow: hidden;
 `;
+
+export const inputPlaceholderTextStyle = `
+  ::-webkit-input-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::-moz-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::-ms-placeholder {
+    color: ${CHARADE_GREY};
+  }
+  ::placeholder {
+    color: ${CHARADE_GREY};
+  }
+`;
+export const inputDisabledStyle = `
+  color: #6e727e;
+  background-color: #f7f7f7;
+  pointer-events: none;
+`;