@thecb/components 10.2.2 → 10.2.3-beta.0

package/package.json

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

package/src/components/atoms/icons/CloseIcon.d.ts

@@ -0,0 +1 @@
+export const CloseIcon: JSX.Element;

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

@@ -0,0 +1,48 @@
+import React from "react";
+
+export const CloseIcon = ({
+  iconFill = "#3B414D",
+  iconWidth = "24",
+  iconHeight = "24",
+  ...rest
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={iconWidth}
+      height={iconHeight}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...rest}
+    >
+      <title>Close Icon</title>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
+        fill={iconFill}
+      />
+      <mask
+        id="mask0_3727_16765"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="5"
+        y="5"
+        width="14"
+        height="14"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.3033 5.98982C17.108 5.79456 16.7915 5.79456 16.5962 5.98982L12 10.586L7.40381 5.98982C7.20854 5.79456 6.89196 5.79456 6.6967 5.98982L5.98959 6.69693C5.79433 6.89219 5.79433 7.20878 5.98959 7.40404L10.5858 12.0002L5.98959 16.5964C5.79433 16.7917 5.79433 17.1083 5.98959 17.3035L6.6967 18.0106C6.89196 18.2059 7.20854 18.2059 7.40381 18.0106L12 13.4144L16.5962 18.0106C16.7915 18.2059 17.108 18.2059 17.3033 18.0106L18.0104 17.3035C18.2057 17.1083 18.2057 16.7917 18.0104 16.5964L13.4142 12.0002L18.0104 7.40404C18.2057 7.20878 18.2057 6.89219 18.0104 6.69693L17.3033 5.98982Z"
+          fill="none"
+        />
+      </mask>
+      <g mask="url(#mask0_3727_16765)">
+        <path d="M0 0H24V24H0V0Z" fill={iconFill} />
+      </g>
+    </svg>
+  );
+};
+
+export default CloseIcon;

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

@@ -40,7 +40,8 @@ import {
   StatusUnknownIcon,
   AutopayIcon,
   KebabMenuIcon,
-  MultiCartIcon
+  MultiCartIcon,
+  CloseIcon
 } from "./index";
 
 const story = page({
@@ -88,3 +89,4 @@ export const statusUnknownIcon = () => <StatusUnknownIcon />;
 export const autopayIcon = () => <AutopayIcon />;
 export const kebabMenuIcon = () => <KebabMenuIcon />;
 export const multiCartIcon = () => <MultiCartIcon />;
+export const closeIcon = () => <CloseIcon />;

package/src/components/atoms/icons/index.d.ts

@@ -23,3 +23,4 @@ export * from "./XCircleIconMedium";
 export * from "./XCircleIconSmall";
 export * from "./KebabMenuIcon";
 export * from "./MultiCartIcon";
+export * from "./CloseIcon";

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

@@ -88,6 +88,7 @@ import ChargebackReversalIconMedium from "./ChargebackReversalIconMedium";
 import PlusCircleIcon from "./PlusCircleIcon";
 import KebabMenuIcon from "./KebabMenuIcon";
 import MultiCartIcon from "./MultiCartIcon";
+import CloseIcon from "./CloseIcon";
 
 export {
   AccountsIcon,
@@ -179,5 +180,6 @@ export {
   ChargebackReversalIconMedium,
   PlusCircleIcon,
   KebabMenuIcon,
-  MultiCartIcon
+  MultiCartIcon,
+  CloseIcon
 };

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

@@ -5,3 +5,4 @@ export * from "./footer-with-subfooter";
 export * from "./popover";
 export * from "./radio-group";
 export * from "./toast-notification";
+export * from "./popup-menu";

package/src/components/molecules/index.js

@@ -40,3 +40,4 @@ export { default as Timeout } from "./timeout";
 export { default as ToastNotification } from "./toast-notification";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";
+export { default as PopupMenu } from "./popup-menu";

package/src/components/templates/default-page-template/DefaultPageTemplate.js

@@ -15,7 +15,8 @@ const CenterSingle = ({
   themeValues,
   maxWidth = "75rem",
   gutters = "2rem",
-  fillPageVertical = false
+  fillPageVertical = false,
+  background = COOL_GREY_05
 }) => {
   const themeContext = useContext(ThemeContext);
   const { isMobile } = themeContext;
@@ -24,7 +25,7 @@ const CenterSingle = ({
     <Box
       padding="0"
       minWidth="100%"
-      background={COOL_GREY_05}
+      background={background}
       extraStyles="flex-grow: 1;"
     >
       <Cover