@thecb/components 7.7.0-beta.4 → 7.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "7.7.0-beta.4",
+  "version": "7.7.0",
   "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/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;
-  }
-};