@thecb/components 10.5.0 → 10.5.1-beta.1

package/package.json

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

package/src/components/atoms/icons/index.js

@@ -35,7 +35,7 @@ import ChargebackIcon from "./ChargebackIcon";
 import ChargebackReversalIcon from "./ChargebackReversalIcon";
 import DuplicateIcon from "./DuplicateIcon";
 import ErroredIcon from "./ErroredIcon";
-import ExternalLinkIcon from "./ExternalLinkIcon";
+import ExternalLinkIcon from "./ExternalLinkicon";
 import FailedIcon from "./FailedIcon";
 import PencilIcon from "./PencilIcon";
 import PendingIcon from "./PendingIcon";

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

@@ -77,6 +77,7 @@ export const modalV2 = () => (
     onlyCloseButton={boolean("onlyCloseButton", false, groupId)}
     onlyContinueButton={boolean("onlyContinueButton", false, groupId)}
     useDangerButton={boolean("useDangerButton", false, groupId)}
+    showCloseIconButton={boolean("showCloseIconButton", true, groupId)}
   />
 );
 

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

@@ -18,7 +18,8 @@ import {
   ButtonLayoutWrapper,
   CancelButton,
   CloseButton,
-  ContinueButton
+  ContinueButton,
+  CloseIconButton
 } from "./__private__";
 
 /*
@@ -61,7 +62,8 @@ const Modal = ({
   onlyCloseButton = false,
   onlyContinueButton = false,
   underlayClickExits = true,
-  useDangerButton = false
+  useDangerButton = false,
+  showCloseIconButton = false
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -108,7 +110,7 @@ const Modal = ({
             borderRadius: BORDER_RADIUS.MD,
             margin: SPACING.XS,
             overflow: "auto",
-            width: isMobile ? "" : customWidth || "615px"
+            width: isMobile ? "" : customWidth || "576px"
           }}
           underlayClickExits={underlayClickExits}
           aria-modal={true}
@@ -122,7 +124,11 @@ const Modal = ({
               borderWidthOverride={`0 0 ${BORDER_THIN} 0`}
               padding={`${SPACING.XS} ${SPACING.MD}`}
             >
-              <Cluster justify="flex-start" align="center">
+              <Cluster
+                justify={showCloseIconButton ? "space-between" : "flex-start"}
+                align="center"
+                nowrap
+              >
                 <Title
                   as="h2"
                   weight={FONT_WEIGHT_SEMIBOLD}
@@ -130,6 +136,22 @@ const Modal = ({
                 >
                   {modalHeaderText}
                 </Title>
+                {showCloseIconButton && (
+                  <CloseIconButton
+                    hideModal={hideModal}
+                    iconWidth={isMobile ? "20" : "24"}
+                    iconHeight={isMobile ? "20" : "24"}
+                    buttonExtraStyles={`
+                      min-height: auto;
+                      min-width: auto;
+                      height: 1.5rem;
+                      margin: 0;
+                      &:focus {
+                        outline-offset: -3px;
+                      }
+                  `}
+                  />
+                )}
               </Cluster>
             </Box>
             <Box background={modalBodyBg || ATHENS_GREY} padding="0">

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { noop } from "../../../../util/general";
+import ButtonWithAction from "../../../atoms/button-with-action/ButtonWithAction";
+import { CloseIcon } from "../../../atoms/icons/CloseIcon";
+import { button } from "@storybook/addon-knobs";
+
+export const CloseIconButton = ({
+  buttonExtraStyles = "",
+  hideModal = noop,
+  iconWidth = "24",
+  iconHeight = "24",
+  ariaLabel = ""
+}) => {
+  return (
+    <ButtonWithAction
+      variant="smallGhost"
+      action={hideModal}
+      contentOverride
+      extraStyles={buttonExtraStyles}
+      aria-label={ariaLabel ?? "Close Modal"}
+    >
+      <CloseIcon
+        role="img"
+        aria-hidden="true"
+        iconWidth={iconWidth}
+        iconHeight={iconHeight}
+      />
+    </ButtonWithAction>
+  );
+};
+
+export default CloseIconButton;

package/src/components/molecules/modal/__private__/index.d.ts

@@ -44,3 +44,14 @@ export interface ContinueButtonProps {
 
 export declare const ContinueButton: React.FC<Expand<ContinueButtonProps> &
   React.HTMLAttributes<HTMLElement>>;
+
+export interface CloseIconButtonProps {
+  buttonExtraStyles?: string;
+  hideModal?: action;
+  iconWidth?: string;
+  iconHeight?: string;
+  ariaLabel?: string;
+}
+
+export declare const CloseIconButton: React.FC<Expand<CloseIconButtonProps> &
+  React.HTMLAttributes<HTMLElement>>;

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

@@ -2,3 +2,4 @@ export { default as ButtonLayoutWrapper } from "./ButtonLayoutWrapper";
 export { default as CancelButton } from "./CancelButton";
 export { default as CloseButton } from "./CloseButton";
 export { default as ContinueButton } from "./ContinueButton";
+export { default as CloseIconButton } from "./CloseIconButton";

package/src/constants/style_constants.js

@@ -8,7 +8,8 @@ export const FONT_SIZE = {
   XS: "0.750rem", // 12px
   SM: "0.875rem", // 14px
   MD: "1.000rem", // 16px
-  LG: "1.125rem" // 18px
+  LG: "1.125rem", // 18px
+  XLG: "1.25rem" //20px
 };
 export const FONT_WEIGHT_REGULAR = "400";
 export const FONT_WEIGHT_SEMIBOLD = "600";