@thecb/components 4.2.7-beta.8 → 4.2.7-beta.9

package/dist/index.cjs.js

@@ -13775,6 +13775,43 @@ var IconAdd = function IconAdd() {
   }))))));
 };
 
+var IconQuit = function IconQuit(_ref) {
+  var _ref$fill = _ref.fill,
+      fill = _ref$fill === void 0 ? MINESHAFT_GREY : _ref$fill,
+      _ref$width = _ref.width,
+      width = _ref$width === void 0 ? "24px" : _ref$width,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "24px" : _ref$height;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    width: width,
+    height: height,
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    id: "quit",
+    d: "M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "quitMask",
+    fill: "#fff"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#quit"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    fill: fill,
+    xlinkHref: "#quit"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    fill: fill,
+    mask: "url(#quitMask)"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M0 0H24V24H0z"
+  }))));
+};
+
 var TimeoutImage = function TimeoutImage() {
   return /*#__PURE__*/React__default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
@@ -14855,6 +14892,45 @@ var ShoppingCartIcon = function ShoppingCartIcon() {
   })))));
 };
 
+var TrashIcon = function TrashIcon(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "20px",
+    height: "20px",
+    viewBox: "0 0 20 20",
+    version: "1.1",
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlnsXlink: "http://www.w3.org/1999/xlink"
+  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
+    d: "M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z",
+    id: "trash-path-1"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    id: "trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px",
+    stroke: "none",
+    strokeWidth: "1",
+    fill: "none",
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React__default.createElement("mask", {
+    id: "trash-mask-2",
+    fill: "white"
+  }, /*#__PURE__*/React__default.createElement("use", {
+    xlinkHref: "#trash-path-1"
+  })), /*#__PURE__*/React__default.createElement("use", {
+    id: "trash-Mask",
+    fill: themeValues.singleIconColor,
+    fillRule: "nonzero",
+    xlinkHref: "#trash-path-1"
+  }), /*#__PURE__*/React__default.createElement("polygon", {
+    id: "trash-Path",
+    fill: themeValues.singleIconColor,
+    fillRule: "nonzero",
+    mask: "url(#trash-mask-2)",
+    points: "0 0 20 0 20 20 0 20"
+  })));
+};
+
+var TrashIcon$1 = themeComponent(TrashIcon, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -15209,43 +15285,6 @@ var AlertWarningIcon = function AlertWarningIcon() {
   })))));
 };
 
-var IconQuit = function IconQuit(_ref) {
-  var _ref$fill = _ref.fill,
-      fill = _ref$fill === void 0 ? MINESHAFT_GREY : _ref$fill,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? "24px" : _ref$width,
-      _ref$height = _ref.height,
-      height = _ref$height === void 0 ? "24px" : _ref$height;
-  return /*#__PURE__*/React__default.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: width,
-    height: height,
-    viewBox: "0 0 24 24"
-  }, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("path", {
-    id: "quit",
-    d: "M18.9999989 6.40999946L17.589999 4.9999997 11.9999993 10.5899995 6.40999946 4.9999997 4.9999997 6.40999946 10.5899995 11.9999993 4.9999997 17.589999 6.40999946 18.9999989 11.9999993 13.409999 17.589999 18.9999989 18.9999989 17.589999 13.409999 11.9999993z"
-  })), /*#__PURE__*/React__default.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    stroke: "none",
-    strokeWidth: "1"
-  }, /*#__PURE__*/React__default.createElement("mask", {
-    id: "quitMask",
-    fill: "#fff"
-  }, /*#__PURE__*/React__default.createElement("use", {
-    xlinkHref: "#quit"
-  })), /*#__PURE__*/React__default.createElement("use", {
-    fill: fill,
-    xlinkHref: "#quit"
-  }), /*#__PURE__*/React__default.createElement("g", {
-    fill: fill,
-    mask: "url(#quitMask)"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M0 0H24V24H0z"
-  }))));
-};
-
 var AlertIcons = {
   error: AlertErrorIcon,
   info: AlertInfoIcon,
@@ -40893,6 +40932,7 @@ exports.HamburgerButton = HamburgerButton;
 exports.Heading = Heading$1;
 exports.HighlightTabRow = HighlightTabRow$1;
 exports.IconAdd = IconAdd;
+exports.IconQuit = IconQuit;
 exports.Imposter = Imposter;
 exports.InternalLink = InternalLink;
 exports.Jumbo = Jumbo$1;
@@ -40962,6 +41002,7 @@ exports.Text = Text$1;
 exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
 exports.ToggleSwitch = ToggleSwitch$1;
+exports.TrashIcon = TrashIcon$1;
 exports.TypeaheadInput = TypeaheadInput;
 exports.VerifiedEmailIcon = VerifiedEmailIcon$1;
 exports.VoidedIcon = VoidedIcon;

package/package.json

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

package/src/components/atoms/alert/Alert.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { AlertIcons, IconQuit } from "../../../deprecated/icons";
+import { AlertIcons } from "../../../deprecated/icons";
+import { IconQuit } from "../icons";
 import { Box, Center, Cluster, Stack, Cover, Sidebar } from "../layouts";
 import Text from "../text";
 import { fallbackValues } from "./Alert.theme";

package/src/{deprecated → components/atoms}/icons/IconQuit.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { MINESHAFT_GREY } from "../../constants/colors";
+import { MINESHAFT_GREY } from "../../../constants/colors";
 
-export const IconQuit = ({
+const IconQuit = ({
   fill = MINESHAFT_GREY,
   width = "24px",
   height = "24px"
@@ -30,3 +30,5 @@ export const IconQuit = ({
     </g>
   </svg>
 );
+
+export default IconQuit;

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

@@ -0,0 +1,47 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const TrashIcon = ({ themeValues }) => (
+  <svg
+    width="20px"
+    height="20px"
+    viewBox="0 0 20 20"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+  >
+    <defs>
+      <path
+        d="M15,7 L14,15.5714286 C14,16.3571429 13.25,17 12.3333333,17 L12.3333333,17 L7.66666667,17 C6.75,17 6,16.3571429 6,15.5714286 L6,15.5714286 L5,7 L15,7 Z M12.1428571,3 L13,4 L16,4 L16,6 L4,6 L4,4 L7,4 L7.85714286,3 L12.1428571,3 Z"
+        id="trash-path-1"
+      ></path>
+    </defs>
+    <g
+      id="trash-Icons-/-Small-/-20px-S-/-Trash---Mobile---20px"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <mask id="trash-mask-2" fill="white">
+        <use xlinkHref="#trash-path-1"></use>
+      </mask>
+      <use
+        id="trash-Mask"
+        fill={themeValues.singleIconColor}
+        fillRule="nonzero"
+        xlinkHref="#trash-path-1"
+      ></use>
+      <polygon
+        id="trash-Path"
+        fill={themeValues.singleIconColor}
+        fillRule="nonzero"
+        mask="url(#trash-mask-2)"
+        points="0 0 20 0 20 20 0 20"
+      ></polygon>
+    </g>
+  </svg>
+);
+
+export default themeComponent(TrashIcon, "Icons", fallbackValues, "primary");

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

@@ -19,6 +19,7 @@ import BankIcon from "./BankIcon";
 import GenericCard from "./GenericCard";
 import PaymentIcon from "./PaymentIcon";
 import IconAdd from "./IconAdd";
+import IconQuit from "./IconQuit";
 import TimeoutImage from "./TimeoutImage";
 import AutopayOnIcon from "./AutopayOnIcon";
 import NotFoundIcon from "./NotFoundIcon";
@@ -44,6 +45,7 @@ import ProfileIcon from "./ProfileIcon";
 import GenericCardLarge from "./GenericCardLarge";
 import EmptyCartIcon from "./EmptyCartIcon";
 import ShoppingCartIcon from "./ShoppingCartIcon";
+import TrashIcon from "./TrashIcon";
 
 export {
   AccountsIcon,
@@ -67,6 +69,7 @@ export {
   GenericCard,
   PaymentIcon,
   IconAdd,
+  IconQuit,
   TimeoutImage,
   AutopayOnIcon,
   NotFoundIcon,
@@ -91,5 +94,6 @@ export {
   ProfileIcon,
   GenericCardLarge,
   EmptyCartIcon,
-  ShoppingCartIcon
+  ShoppingCartIcon,
+  TrashIcon
 };

package/src/deprecated/icons/index.js

@@ -13,7 +13,6 @@ import { AlertInfoIcon } from "./AlertInfoIcon";
 import { AlertErrorIcon } from "./AlertErrorIcon";
 import { AlertSuccessIcon } from "./AlertSuccessIcon";
 import { AlertWarningIcon } from "./AlertWarningIcon";
-import { IconQuit } from "./IconQuit";
 
 const AlertIcons = {
   error: AlertErrorIcon,
@@ -33,6 +32,5 @@ export {
   IconNeutral,
   IconValid,
   IconInvalid,
-  AlertIcons,
-  IconQuit
+  AlertIcons
 };