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

package/package.json

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

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -20,9 +20,9 @@ const HiddenToggleSwitchBox = styled.input`
 `;
 
 const VisibleSwitchComponent = styled.label`
-  width: 44px;
+  width: 48px;
   height: 24px;
-  border-radius: 12px;
+  border-radius: 48px;
   border: none;
   position: relative;
   box-sizing: border-box;
@@ -41,15 +41,27 @@ const VisibleSwitchComponent = styled.label`
   ${({ isMobile }) => (isMobile ? `transform: scale(0.75)` : ``)}
 `;
 
-const ToggleSwitchRingComponent = styled.div`
+const ToggleSwitchMiddleRingComponent = styled.div`
   position: absolute;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   border: none;
   border-radius: 50%;
   box-sizing: border-box;
 `;
 
+const ToggleSwitchInnerRingComponent = styled.div`
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  top: 3px;
+  left: 3px;
+  right: 3px;
+  bottom: 3px;
+  border-radius: 50%;
+  box-sizing: border-box;
+`;
+
 const ToggleSwitch = ({
   isOn = false,
   onToggle = noop,
@@ -61,32 +73,54 @@ const ToggleSwitch = ({
   isMobile,
   dataQa
 }) => {
-  const ToggleSwitchRing = posed(ToggleSwitchRingComponent)({
+  const ToggleSwitchInnerRing = posed(ToggleSwitchInnerRingComponent)({
+    off: {
+      backgroundColor: themeValues.offBackground,
+      transition: {
+        ease: "easeOut"
+      }
+    },
+    on: {
+      backgroundColor: themeValues.onBackground,
+      transition: {
+        ease: "easeIn"
+      }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
+    }
+  });
+
+  const ToggleSwitchMiddleRing = posed(ToggleSwitchMiddleRingComponent)({
     off: {
-      backgroundColor: disabled
-        ? themeValues.disabledBackground
-        : themeValues.onBackground,
-      left: "4px",
-      top: "3px",
-      bottom: "3px",
-      right: "20px",
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px",
       transition: {
         ease: "backIn"
       }
     },
     on: {
       backgroundColor: themeValues.white,
-      right: "8px",
-      top: "3px",
-      bottom: "4px",
-      left: "23px",
+      right: "1px",
+      top: "2px",
+      bottom: "2px",
+      left: "25px",
       transition: {
         ease: "backIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.white,
+      left: "2px",
+      top: "2px",
+      bottom: "2px",
+      right: "24px"
     }
   });
 
-  // to do: for disabled, background color should not be white (should be lighter disabled background)
   const VisibleSwitch = posed(VisibleSwitchComponent)({
     focusable: true,
     hoverable: true,
@@ -99,28 +133,19 @@ const ToggleSwitch = ({
       boxShadow: "0px 2px 5px 0px rgba(0,0,0,0.5)"
     },
     off: {
-      border: "1px solid",
-      backgroundColor: disabled
-        ? themeValues.disabledBackgroundLight
-        : themeValues.white,
-      borderColor: disabled
-        ? themeValues.disabledBackground
-        : themeValues.onBackground,
+      backgroundColor: themeValues.offBackground,
       transition: {
         ease: "easeOut"
       }
     },
     on: {
-      border: "1px solid",
-      backgroundColor: disabled
-        ? themeValues.disabledBackground
-        : themeValues.onBackground,
-      borderColor: disabled
-        ? themeValues.disabledBackground
-        : themeValues.onBackground,
+      backgroundColor: themeValues.onBackground,
       transition: {
         ease: "easeIn"
       }
+    },
+    disabled: {
+      backgroundColor: themeValues.disabledBackground
     }
   });
 
@@ -159,12 +184,14 @@ const ToggleSwitch = ({
                 htmlFor={`#toggle-${name}`}
                 onClick={disabled ? noop : onToggle}
                 onKeyDown={disabled ? noop : handleKeyDown}
-                pose={isOn ? "on" : "off"}
+                pose={disabled ? "disabled" : isOn ? "on" : "off"}
                 tabIndex={disabled ? -1 : 0}
                 disabled={disabled}
                 isMobile={isMobile}
               >
-                <ToggleSwitchRing />
+                <ToggleSwitchMiddleRing>
+                  <ToggleSwitchInnerRing />
+                </ToggleSwitchMiddleRing>
               </VisibleSwitch>
             </Box>
           </Cover>

package/src/components/atoms/toggle-switch/ToggleSwitch.stories.js

@@ -1,5 +1,5 @@
 import React, { useState, Fragment } from "react";
-import { boolean, text } from "@storybook/addon-knobs";
+import { boolean } from "@storybook/addon-knobs";
 import ToggleSwitch from "./ToggleSwitch";
 import page from "../../../../.storybook/page";
 
@@ -7,12 +7,12 @@ export const toggleSwitchDefault = () => {
   const [isOn, onToggle] = useState(false);
 
   const disabled = boolean("disabled", false, "props");
-  const label = text(label, "Toggle Switch Label", "props");
+
   return (
     <Fragment>
       <ToggleSwitch
         name="toggle-switch"
-        label={label}
+        label="Toggle Switch Label"
         isOn={isOn}
         onToggle={() => onToggle(!isOn)}
         disabled={disabled}

package/src/components/atoms/toggle-switch/ToggleSwitch.theme.js

@@ -1,14 +1,14 @@
 import {
   WHITE,
-  ATHENS_GREY,
-  MANATEE_GREY,
+  REGENT_GREY,
+  IRON_GREY,
   MATISSE_BLUE
 } from "../../../constants/colors";
 
 const onBackground = `${MATISSE_BLUE}`;
-const disabledBackground = `${MANATEE_GREY}`;
-const disabledBackgroundLight = `${ATHENS_GREY}`;
+const disabledBackground = `${IRON_GREY}`;
 const white = `${WHITE}`;
+const offBackground = `${REGENT_GREY}`;
 
 const labelStyles = `
   display: flex;
@@ -29,8 +29,8 @@ const leftLabelStyles = `
 export const fallbackValues = {
   onBackground,
   disabledBackground,
-  disabledBackgroundLight,
   white,
+  offBackground,
   rightLabelStyles,
   leftLabelStyles
 };

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

@@ -1,221 +1,10 @@
-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";
+import React from "react";
+import ModalControlV1 from "./ModalControlV1";
+import ModalControlV2 from "./ModalControlV2";
 
-/*
-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>
-  );
+const Modal = ({ version = "v1", ...rest }) => {
+  const ModalControl = version === "v1" ? ModalControlV1 : ModalControlV2;
+  return <ModalControl {...rest} />;
 };
 
 export default Modal;

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

@@ -1,16 +1,18 @@
 import React, { useEffect, useState } from "react";
 import { text, boolean } from "@storybook/addon-knobs";
 import Modal from "./Modal";
-
 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 = () => (
+
+export const modalV1 = () => (
   <Modal
+    version="v1"
     ModalLink={() => (
       <Text
         onClick={noop}
@@ -33,13 +35,50 @@ export const modal = () => (
     modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
     useDangerButton={boolean("useDangerButton", false, groupId)}
     defaultWrapper={boolean("defaultWrapper", true, groupId)}
+    noBorder={boolean("noBorder", true, groupId)}
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
+    onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
     maxHeight={text("maxHeight", null, groupId)}
     blurUnderlay={boolean("blurUnderlay", true, groupId)}
   />
 );
 
-modal.storyName = "Standard Modal";
+modalV1.storyName = "Standard Modal (V1)";
+
+export const modalV2 = () => (
+  <Modal
+    version="v2"
+    ModalLink={() => (
+      <Text
+        onClick={noop}
+        color={"#347BB2"}
+        fontSize="18px"
+        lineHeight="2rem"
+        extraStyles={`cursor: pointer;`}
+      >
+        Modal Link
+      </Text>
+    )}
+    blurUnderlay={boolean("blurUnderlay", true, groupId)}
+    cancelButtonText={text("cancelButtonText", "Cancel", groupId)}
+    continueAction={noop}
+    continueButtonText={text("continueButtonText", "Continue", groupId)}
+    defaultWrapper={boolean("defaultWrapper", true, groupId)}
+    hideModal={noop}
+    maxHeight={text("maxHeight", null, groupId)}
+    modalBodyBg={text("modalBodyBg", "#F6F6F9", groupId)}
+    modalBodyText={text("modalBodyText", "Modal Body Text", groupId)}
+    modalHeaderBg={text("modalHeaderBg", "white", groupId)}
+    modalHeaderText={text("modalHeaderText", "Modal Header Text", groupId)}
+    modalOpen={boolean("modalOpen", true, groupId)}
+    noButtons={boolean("noButtons", false, groupId)}
+    onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
+    onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
+    useDangerButton={boolean("useDangerButton", false, groupId)}
+  />
+);
+
+modalV2.storyName = "Standard Modal (V2)";
 
 export const modalWithoutButtons = () => {
   const [isModalOpen, setIsModalOpen] = useState(true);
@@ -51,6 +90,7 @@ export const modalWithoutButtons = () => {
   }, []);
   return (
     <Modal
+      version="v1"
       ModalLink={() => (
         <Text
           tabIndex={0}
@@ -86,10 +126,11 @@ export const modalWithoutButtons = () => {
   );
 };
 
-modalWithoutButtons.storyName = "Modal Without Buttons";
+modalWithoutButtons.storyName = "Modal (V1) Without Buttons";
 
 const story = page({
   title: "Components|Molecules/Modal",
   Component: Modal
 });
+
 export default story;