@thecb/components 7.7.0-beta.5 → 7.7.1-beta.1

package/package.json

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

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -5,7 +5,7 @@ import Text from "../text";
 import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { renderCardStatus } from "../../../util/general";
+import { renderCardStatus } from "../../../util/formats";
 
 export const CreditCardWrapper = styled.div`
   display: flex;

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const HistoryIconSmall = ({ themeValues, iconIndex = 0 }) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M3.33337 8.33333C3.33337 7.8731 3.70647 7.5 4.16671 7.5H15.8334C16.2936 7.5 16.6667 7.8731 16.6667 8.33333V16.6667C16.6667 17.1269 16.2936 17.5 15.8334 17.5H4.16671C3.70647 17.5 3.33337 17.1269 3.33337 16.6667V8.33333Z"
+        fill={themeValues.singleIconColor}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.08337 4.75C4.66916 4.75 4.33337 5.08579 4.33337 5.5C4.33337 5.91421 4.66916 6.25 5.08337 6.25H14.9134C15.3276 6.25 15.6634 5.91421 15.6634 5.5C15.6634 5.08579 15.3276 4.75 14.9134 4.75H5.08337Z"
+        fill={themeValues.singleIconColor}
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.03337 2.25C5.64677 2.25 5.33337 2.5634 5.33337 2.95C5.33337 3.3366 5.64678 3.65 6.03337 3.65H13.9634C14.35 3.65 14.6634 3.3366 14.6634 2.95C14.6634 2.5634 14.35 2.25 13.9634 2.25H6.03337Z"
+        fill={themeValues.singleIconColor}
+      />
+    </svg>
+  );
+};
+
+export default themeComponent(
+  HistoryIconSmall,
+  "Icons",
+  fallbackValues,
+  "primary"
+);

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

@@ -62,6 +62,7 @@ import GuidedCheckoutImage from "./GuidedCheckoutImage";
 import ProfileImage from "./ProfileImage";
 import RevenueManagementImage from "./RevenueManagementImage";
 import FindIconSmall from "./FindIconSmall";
+import HistoryIconSmall from "./HistoryIconSmall";
 
 export {
   AccountsIcon,
@@ -127,5 +128,6 @@ export {
   GuidedCheckoutImage,
   ProfileImage,
   RevenueManagementImage,
-  FindIconSmall
+  FindIconSmall,
+  HistoryIconSmall
 };

package/src/util/formats.js

@@ -1,4 +1,7 @@
+import React from "react";
 import { createFormat } from "formatted-input";
+import Text from "../components/atoms/text";
+import { ASH_GREY, FIRE_YELLOW } from "../constants/colors";
 export const formatDelimiter = "_";
 
 export const phoneFormats = [
@@ -80,3 +83,53 @@ export const expirationDateFormat = createFormat(
 );
 export const phoneFormat = createFormat(phoneFormats, formatDelimiter);
 export const moneyFormat = createFormat(moneyFormats, formatDelimiter);
+
+export const renderCardStatus = (
+  expirationStatus,
+  expireDate,
+  textAlign = "right",
+  as = "span"
+) => {
+  const ACTIVE = "ACTIVE";
+  const EXPIRING_SOON = "EXPIRING_SOON";
+  const EXPIRED = "EXPIRED";
+  const textMargin = textAlign === "right" ? "auto" : "0";
+
+  switch (expirationStatus) {
+    case ACTIVE:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={ASH_GREY}
+          extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
+        >
+          Exp Date {expireDate}
+        </Text>
+      );
+    case EXPIRING_SOON:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={FIRE_YELLOW}
+          extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
+        >
+          Expiring Soon {expireDate}
+        </Text>
+      );
+    case EXPIRED:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={ASH_GREY}
+          extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
+        >
+          Expired
+        </Text>
+      );
+    default:
+      null;
+  }
+};

package/src/util/general.js

@@ -1,7 +1,6 @@
 import React, { Fragment } from "react";
 import numeral from "numeral";
-import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../constants/colors";
-import Text from "../components/atoms/text";
+import { CHARADE_GREY } from "../constants/colors";
 
 export const noop = () => {};
 
@@ -160,53 +159,3 @@ export const titleCaseString = string => {
     )
     .join(" ");
 };
-
-export const renderCardStatus = (
-  expirationStatus,
-  expireDate,
-  textAlign = "right",
-  as = "span"
-) => {
-  const ACTIVE = "ACTIVE";
-  const EXPIRING_SOON = "EXPIRING_SOON";
-  const EXPIRED = "EXPIRED";
-  const textMargin = textAlign === "right" ? "auto" : "0";
-
-  switch (expirationStatus) {
-    case ACTIVE:
-      return (
-        <Text
-          as={as}
-          variant="pXS"
-          color={ASH_GREY}
-          extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
-        >
-          Exp Date {expireDate}
-        </Text>
-      );
-    case EXPIRING_SOON:
-      return (
-        <Text
-          as={as}
-          variant="pXS"
-          color={FIRE_YELLOW}
-          extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
-        >
-          Expiring Soon {expireDate}
-        </Text>
-      );
-    case EXPIRED:
-      return (
-        <Text
-          as={as}
-          variant="pXS"
-          color={ASH_GREY}
-          extraStyles={`text-align: ${textAlign}; margin: ${textMargin};`}
-        >
-          Expired
-        </Text>
-      );
-    default:
-      null;
-  }
-};