@thecb/components 10.2.2 → 10.2.3-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.2",
+  "version": "10.2.3-beta.1",
   "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/TrashIconV2.d.ts

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

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

@@ -0,0 +1,41 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const TrashIconV2 = ({ themeValues, iconFill }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z"
+        fill={iconFill ?? themeValues.singleIconColor}
+      />
+      <mask
+        id="mask0_4292_11876"
+        style={{ maskType: "luminance" }}
+        maskUnits="userSpaceOnUse"
+        x="4"
+        y="3"
+        width="10"
+        height="12"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M11.5 4H14V6H4V4H6.5L7.21429 3H10.7857L11.5 4ZM6.99048 15C6.25714 15 5.65714 14.4857 5.65714 13.8571L4.85714 7H12.8571L12.0571 13.8571C12.0571 14.4857 11.4571 15 10.7238 15H6.99048Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_4292_11876)"></g>
+    </svg>
+  );
+};
+
+export default themeComponent(TrashIconV2, "Icons", fallbackValues, "primary");

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

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

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

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

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

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

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