@thecb/components 4.3.8 → 4.3.9

package/dist/index.cjs.js

@@ -12469,10 +12469,10 @@ var border = {
 };
 var hoverBackgroundColor = {
   primary: "#116285",
-  secondary: "transparent",
+  secondary: "#DBEAF0",
   back: "transparent",
   smallPrimary: "#116285",
-  smallSecondary: "transparent",
+  smallSecondary: "#DBEAF0",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12482,10 +12482,10 @@ var hoverBackgroundColor = {
 };
 var hoverBorderColor = {
   primary: "#116285",
-  secondary: "#DCEAF1",
+  secondary: "#15749D",
   back: "#DCEAF1",
   smallPrimary: "#116285",
-  smallSecondary: "#DCEAF1",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12508,10 +12508,10 @@ var hoverColor = {
 };
 var activeBackgroundColor = {
   primary: "#0E506D",
-  secondary: "transparent",
+  secondary: "#B8D5E1",
   back: "transparent",
   smallPrimary: "#0E506D",
-  smallSecondary: "transparent",
+  smallSecondary: "#B8D5E1",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12521,10 +12521,10 @@ var activeBackgroundColor = {
 };
 var activeBorderColor = {
   primary: "#0E506D",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#0E506D",
-  smallSecondary: "#0E506D",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -12534,7 +12534,7 @@ var activeBorderColor = {
 };
 var activeColor = {
   primary: "#FFFFFF",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",
@@ -12620,7 +12620,7 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
     xmlnsXlink: "http://www.w3.org/1999/xlink"
   }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
     d: "M72.1558149,36 C72.0733136,36 72.0151877,35.9981252 71.9829372,35.9970003 C66.1928468,35.9876262 60,31.1685779 60,23.9985001 C60,16.821298 66.204847,12 71.9998125,12 C78.2804106,12 84,17.7189638 84,23.9985001 C84,24.4124613 83.6639947,24.7484298 83.2499883,24.7484298 C82.8356068,24.7484298 82.4999766,24.4124613 82.4999766,23.9985001 C82.4999766,18.5041402 77.4951484,13.4998594 71.9998125,13.4998594 C66.9289833,13.4998594 61.5000234,17.7185889 61.5000234,23.9985001 C61.5000234,30.2784114 66.9289833,34.4971409 71.9998125,34.4971409 C72.0129377,34.4971409 72.0260629,34.4975159 72.0391881,34.4982658 C72.0789387,34.4990157 76.2268785,34.6471268 79.907186,30.9675968 C80.2000656,30.6747492 80.675198,30.6747492 80.9677026,30.9675968 C81.2605822,31.2604443 81.2605822,31.7351498 80.9677026,32.0279974 C77.2236441,35.7716464 73.1034547,36 72.1558149,36 L72.1558149,36 Z",
-    id: "path-1"
+    id: "spinner-path-1"
   })), /*#__PURE__*/React__default.createElement("g", {
     id: "Symbols",
     fill: "none",
@@ -12632,11 +12632,11 @@ var SpinnerIcon = function SpinnerIcon(_ref3) {
     id: "mask-2",
     fill: color || "white"
   }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#path-1"
+    xlinkHref: "#spinner-path-1"
   })), /*#__PURE__*/React__default.createElement("use", {
     id: "loader",
     fill: color || "white",
-    xlinkHref: "#path-1"
+    xlinkHref: "#spinner-path-1"
   }))))));
 };
 
@@ -38845,6 +38845,10 @@ var Modal$1 = function Modal(_ref) {
       maxHeight = _ref.maxHeight,
       _ref$underlayClickExi = _ref.underlayClickExits,
       underlayClickExits = _ref$underlayClickExi === void 0 ? true : _ref$underlayClickExi,
+      noBorder = _ref.noBorder,
+      customWidth = _ref.customWidth,
+      isLoading = _ref.isLoading,
+      buttonExtraStyles = _ref.buttonExtraStyles,
       children = _ref.children;
 
   var _useContext = React.useContext(styled.ThemeContext),
@@ -38861,7 +38865,7 @@ var Modal$1 = function Modal(_ref) {
       alignItems: "center"
     },
     dialogStyle: {
-      width: "615px"
+      width: customWidth || "615px"
     },
     underlayClickExits: underlayClickExits
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -38870,7 +38874,7 @@ var Modal$1 = function Modal(_ref) {
     boxShadow: "inset 0px -2px 0px 0px rgb(0, 80, 149)"
   }, /*#__PURE__*/React__default.createElement(Box, {
     background: modalHeaderBg,
-    padding: "1rem 1.5rem"
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "flex-start",
     align: "center"
@@ -38879,13 +38883,13 @@ var Modal$1 = function Modal(_ref) {
     weight: FONT_WEIGHT_SEMIBOLD
   }, modalHeaderText))), /*#__PURE__*/React__default.createElement(Box, {
     background: modalBodyBg,
-    padding: "1rem 1.5rem"
+    padding: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "1.5rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
-    borderWidthOverride: "0 0 2px 0",
-    borderColor: SILVER_GREY,
-    padding: "0 0 1.5rem 0",
+    borderWidthOverride: noBorder && "0 0 2px 0",
+    borderColor: !noBorder && SILVER_GREY,
+    padding: !noBorder && "0 0 1.5rem 0",
     extraStyles: maxHeight ? "max-height: ".concat(maxHeight, "; overflow: auto;") : ""
   }, defaultWrapper ? /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: "p"
@@ -38893,33 +38897,63 @@ var Modal$1 = function Modal(_ref) {
     padding: maxHeight ? "0 0 1rem 0" : "0"
   }, modalBodyText)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "0"
-  }, /*#__PURE__*/React__default.createElement(Cluster, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
+    direction: "row",
     justify: "flex-end",
     align: "center",
     childGap: "0rem"
-  }, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem",
-    extraStyles: isMobile ? "flex-grow: 1" : ""
+  }, !onlyCloseButton ? /*#__PURE__*/React__default.createElement(React.Fragment, null, isMobile ? /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row"
+  }, /*#__PURE__*/React__default.createElement(Box, {
+    width: "100%",
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "secondary",
     action: cancelAction ? cancelAction : hideModal,
     text: cancelButtonText,
-    dataQa: cancelButtonText
+    dataQa: cancelButtonText,
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
   })), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.5rem",
-    extraStyles: isMobile ? "flex-grow: 1" : ""
+    width: "100%",
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: useDangerButton ? "danger" : "primary",
     action: continueAction,
     text: continueButtonText,
-    dataQa: continueButtonText
+    dataQa: continueButtonText,
+    isLoading: isLoading,
+    extraStyles: buttonExtraStyles,
+    className: "modal-continue-button"
+  }))) : /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "1rem",
+    direction: "row",
+    justify: "flex-end"
+  }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: "secondary",
+    action: cancelAction ? cancelAction : hideModal,
+    text: cancelButtonText,
+    dataQa: cancelButtonText,
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
+  }), /*#__PURE__*/React__default.createElement(ButtonWithAction, {
+    variant: useDangerButton ? "danger" : "primary",
+    action: continueAction,
+    text: continueButtonText,
+    dataQa: continueButtonText,
+    isLoading: isLoading,
+    extraStyles: buttonExtraStyles,
+    className: "modal-continue-button"
   }))) : /*#__PURE__*/React__default.createElement(Box, {
     padding: "0.5rem"
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     action: hideModal,
     variant: "primary",
     text: "Close",
-    dataQa: "Close"
+    dataQa: "Close",
+    extraStyles: buttonExtraStyles,
+    className: "modal-cancel-button"
   })))))))), children);
 };
 

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -117,10 +117,10 @@ const border = {
 
 const hoverBackgroundColor = {
   primary: "#116285",
-  secondary: "transparent",
+  secondary: "#DBEAF0",
   back: "transparent",
   smallPrimary: "#116285",
-  smallSecondary: "transparent",
+  smallSecondary: "#DBEAF0",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -131,10 +131,10 @@ const hoverBackgroundColor = {
 
 const hoverBorderColor = {
   primary: "#116285",
-  secondary: "#DCEAF1",
+  secondary: "#15749D",
   back: "#DCEAF1",
   smallPrimary: "#116285",
-  smallSecondary: "#DCEAF1",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -159,10 +159,10 @@ const hoverColor = {
 
 const activeBackgroundColor = {
   primary: "#0E506D",
-  secondary: "transparent",
+  secondary: "#B8D5E1",
   back: "transparent",
   smallPrimary: "#0E506D",
-  smallSecondary: "transparent",
+  smallSecondary: "#B8D5E1",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -173,10 +173,10 @@ const activeBackgroundColor = {
 
 const activeBorderColor = {
   primary: "#0E506D",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#0E506D",
-  smallSecondary: "#0E506D",
+  smallSecondary: "#15749D",
   smallGhost: "transparent",
   ghost: "transparent",
   tertiary: "transparent",
@@ -187,7 +187,7 @@ const activeBorderColor = {
 
 const activeColor = {
   primary: "#FFFFFF",
-  secondary: "#0E506D",
+  secondary: "#15749D",
   back: "#0E506D",
   smallPrimary: "#FFFFFF",
   smallSecondary: "#0E506D",

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

@@ -36,6 +36,10 @@ const Modal = ({
   onlyCloseButton = false,
   maxHeight,
   underlayClickExits = true,
+  noBorder,
+  customWidth,
+  isLoading,
+  buttonExtraStyles,
   children
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -53,7 +57,7 @@ const Modal = ({
             alignItems: "center"
           }}
           dialogStyle={{
-            width: "615px"
+            width: customWidth || "615px"
           }}
           underlayClickExits={underlayClickExits}
         >
@@ -62,19 +66,19 @@ const Modal = ({
             borderRadius="2px"
             boxShadow="inset 0px -2px 0px 0px rgb(0, 80, 149)"
           >
-            <Box background={modalHeaderBg} padding="1rem 1.5rem">
+            <Box background={modalHeaderBg} padding="1.5rem">
               <Cluster justify="flex-start" align="center">
                 <Heading variant="h6" weight={FONT_WEIGHT_SEMIBOLD}>
                   {modalHeaderText}
                 </Heading>
               </Cluster>
             </Box>
-            <Box background={modalBodyBg} padding="1rem 1.5rem">
+            <Box background={modalBodyBg} padding="1.5rem">
               <Stack childGap="1.5rem">
                 <Box
-                  borderWidthOverride="0 0 2px 0"
-                  borderColor={SILVER_GREY}
-                  padding="0 0 1.5rem 0"
+                  borderWidthOverride={noBorder && "0 0 2px 0"}
+                  borderColor={!noBorder && SILVER_GREY}
+                  padding={!noBorder && "0 0 1.5rem 0"}
                   extraStyles={
                     maxHeight ? `max-height: ${maxHeight}; overflow: auto;` : ``
                   }
@@ -88,31 +92,63 @@ const Modal = ({
                   )}
                 </Box>
                 <Box padding="0">
-                  <Cluster justify="flex-end" align="center" childGap="0rem">
+                  <Stack
+                    direction="row"
+                    justify="flex-end"
+                    align="center"
+                    childGap="0rem"
+                  >
                     {!onlyCloseButton ? (
                       <Fragment>
-                        <Box
-                          padding="0.5rem"
-                          extraStyles={isMobile ? "flex-grow: 1" : ""}
-                        >
-                          <ButtonWithAction
-                            variant="secondary"
-                            action={cancelAction ? cancelAction : hideModal}
-                            text={cancelButtonText}
-                            dataQa={cancelButtonText}
-                          />
-                        </Box>
-                        <Box
-                          padding="0.5rem"
-                          extraStyles={isMobile ? "flex-grow: 1" : ""}
-                        >
-                          <ButtonWithAction
-                            variant={useDangerButton ? "danger" : "primary"}
-                            action={continueAction}
-                            text={continueButtonText}
-                            dataQa={continueButtonText}
-                          />
-                        </Box>
+                        {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>
                     ) : (
                       <Box padding="0.5rem">
@@ -121,10 +157,12 @@ const Modal = ({
                           variant="primary"
                           text="Close"
                           dataQa="Close"
+                          extraStyles={buttonExtraStyles}
+                          className="modal-cancel-button"
                         />
                       </Box>
                     )}
-                  </Cluster>
+                  </Stack>
                 </Box>
               </Stack>
             </Box>

package/src/deprecated/spinner/Spinner.js

@@ -45,7 +45,7 @@ const SpinnerIcon = ({ color, isMobile }) => (
         <defs>
           <path
             d="M72.1558149,36 C72.0733136,36 72.0151877,35.9981252 71.9829372,35.9970003 C66.1928468,35.9876262 60,31.1685779 60,23.9985001 C60,16.821298 66.204847,12 71.9998125,12 C78.2804106,12 84,17.7189638 84,23.9985001 C84,24.4124613 83.6639947,24.7484298 83.2499883,24.7484298 C82.8356068,24.7484298 82.4999766,24.4124613 82.4999766,23.9985001 C82.4999766,18.5041402 77.4951484,13.4998594 71.9998125,13.4998594 C66.9289833,13.4998594 61.5000234,17.7185889 61.5000234,23.9985001 C61.5000234,30.2784114 66.9289833,34.4971409 71.9998125,34.4971409 C72.0129377,34.4971409 72.0260629,34.4975159 72.0391881,34.4982658 C72.0789387,34.4990157 76.2268785,34.6471268 79.907186,30.9675968 C80.2000656,30.6747492 80.675198,30.6747492 80.9677026,30.9675968 C81.2605822,31.2604443 81.2605822,31.7351498 80.9677026,32.0279974 C77.2236441,35.7716464 73.1034547,36 72.1558149,36 L72.1558149,36 Z"
-            id="path-1"
+            id="spinner-path-1"
           />
         </defs>
         <g id="Symbols" fill="none" fillRule="evenodd">
@@ -54,9 +54,13 @@ const SpinnerIcon = ({ color, isMobile }) => (
             transform="translate(-60 -12)"
           >
             <mask id="mask-2" fill={color || "white"}>
-              <use xlinkHref="#path-1" />
+              <use xlinkHref="#spinner-path-1" />
             </mask>
-            <use id="loader" fill={color || "white"} xlinkHref="#path-1" />
+            <use
+              id="loader"
+              fill={color || "white"}
+              xlinkHref="#spinner-path-1"
+            />
           </g>
         </g>
       </svg>