@thecb/components 7.7.0-beta.0 → 7.7.0-beta.2

package/src/util/general.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from "react";
 import numeral from "numeral";
-import { CHARADE_GREY } from "../constants/colors";
+import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../constants/colors";
+import Text from "../components/atoms/text";
 
 export const noop = () => {};
 
@@ -144,3 +145,67 @@ export const throttle = (delay, fn) => {
     return fn(...args);
   };
 };
+
+export const titleCaseWord = word => {
+  return word.charAt(0).toUpperCase() + word.slice(1);
+};
+
+export const titleCaseString = string => {
+  return string
+    .split(" ")
+    .map((word, index, string) =>
+      index === 0 || index === string.length - 1 || word.length > 3
+        ? titleCaseWord(word.toLowerCase())
+        : word
+    )
+    .join(" ");
+};
+
+export const renderCardStatus = (
+  expirationStatus,
+  expireDate,
+  textAlign = "right",
+  as = "span"
+) => {
+  const ACTIVE = "ACTIVE";
+  const EXPIRING_SOON = "EXPIRING_SOON";
+  const EXPIRED = "EXPIRED";
+
+  switch (expirationStatus) {
+    case ACTIVE:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={ASH_GREY}
+          extraStyles={`text-align: ${textAlign};`}
+        >
+          Exp Date {expireDate}
+        </Text>
+      );
+    case EXPIRING_SOON:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={FIRE_YELLOW}
+          extraStyles={`text-align: ${textAlign};`}
+        >
+          Expiring Soon {expireDate}
+        </Text>
+      );
+    case EXPIRED:
+      return (
+        <Text
+          as={as}
+          variant="pXS"
+          color={ASH_GREY}
+          extraStyles={`text-align: ${textAlign};`}
+        >
+          Expired
+        </Text>
+      );
+    default:
+      null;
+  }
+};