@thecb/components 2.2.1 → 2.3.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@thecb/components",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "source": "src/index.js",
   "scripts": {
-    "build": "rollup -c",
-    "dev": "microbundle watch"
+    "build": "rollup -c"
   },
   "repository": {
     "type": "git",
@@ -36,61 +35,42 @@
     "babel-eslint": "^10.1.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
-    "connected-react-router": "^6.8.0",
-    "dompurify": "^2.0.11",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
-    "formatted-input": "^0.1.3",
-    "framer-motion": "^1.11.0",
-    "html-react-parser": "^0.10.3",
     "husky": "^4.2.3",
-    "numeral": "^2.0.6",
     "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
-    "react-aria-modal": "^4.0.0",
-    "react-helmet": "^6.0.0",
-    "react-pose": "^4.0.10",
-    "react-router-dom": "^5.2.0",
-    "redux-freeform": "^4.1.2",
     "rollup": "^1.21.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.1.0",
-    "sanctuary": "^3.0.0",
-    "storybook": "^5.3.14",
-    "styled-components": "^5.1.1",
-    "styled-media-query": "^2.1.2",
-    "styled-theming": "^2.2.0"
+    "rollup-plugin-visualizer": "^4.0.4",
+    "storybook": "^5.3.14"
   },
   "peerDependencies": {
-    "connected-react-router": "^6.8.0",
-    "dompurify": "^2.0.11",
-    "formatted-input": "^0.1.3",
-    "framer-motion": "^1.11.0",
-    "html-react-parser": "^0.10.3",
-    "numeral": "^2.0.6",
     "ramda": "^0.27.0",
     "react": "^16.13.1",
-    "react-aria-modal": "^4.0.0",
     "react-dom": "^16.13.1",
-    "react-helmet": "^6.0.0",
-    "react-is": "^16.13.1",
-    "react-pose": "^4.0.10",
     "react-router-dom": "^5.2.0",
-    "redux-freeform": "^4.1.2",
-    "sanctuary": "^3.0.0",
-    "sanctuary-def": "^0.21.1",
-    "styled-components": ">=4.0.0",
-    "styled-media-query": ">=2.1.2",
-    "styled-theming": ">=2.2.0"
+    "styled-components": "^5.1.1",
+    "styled-theming": "^2.2.0"
   },
   "husky": {
     "hooks": {
       "pre-commit": "pretty-quick --staged"
     }
+  },
+  "dependencies": {
+    "formatted-input": "^0.1.3",
+    "framer-motion": "^1.11.0",
+    "numeral": "^2.0.6",
+    "react-aria-modal": "^4.0.0",
+    "react-pose": "^4.0.10",
+    "redux-freeform": "^4.1.3",
+    "sanctuary": "^3.0.0"
   }
 }

package/rollup.config.js

@@ -2,6 +2,7 @@ import resolve from "rollup-plugin-node-resolve";
 import commonjs from "rollup-plugin-commonjs";
 import babel from "rollup-plugin-babel";
 import json from "rollup-plugin-json";
+import visualizer from "rollup-plugin-visualizer";
 import pkg from "./package.json";
 
 import * as sanctuary from "sanctuary";
@@ -25,7 +26,8 @@ const plugins = [
       sanctuary: Object.keys(sanctuary),
       "formatted-input": Object.keys(formattedInput)
     }
-  })
+  }),
+  visualizer()
 ];
 
 const external = [...Object.keys(pkg.peerDependencies || {})];

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -83,6 +83,27 @@ const ButtonWithAction = ({
     variant
   );
   const loadingExtraStyles = `${extraStyles}; padding-top: 0.75rem; padding-bottom: 0.75rem;`;
+  const hoverStyles = `
+    outline: none;
+    background-color: ${themeValues.hoverBackgroundColor};
+    border-color: ${themeValues.hoverBorderColor};
+    color: ${themeValues.hoverColor};
+  `;
+  const activeStyles = `
+    outline: none;
+    background-color: ${themeValues.activeBackgroundColor};
+    border-color: ${themeValues.activeBorderColor};
+    color: ${themeValues.activeColor};
+  `;
+  const disabledStyles = `
+    background-clor: #6E727E;
+    border-clor: #6E727E;
+    color: #FFFFFF;
+    &:focus {
+      box-shadow: 0 0 10px #6E727E;
+      outline: none;
+    }
+  `;
 
   return (
     <Box
@@ -92,10 +113,10 @@ const ButtonWithAction = ({
       minWidth={themeValues.minWidth}
       background={themeValues.backgroundColor}
       border={themeValues.border}
-      hoverStyles={themeValues.hover}
-      focusStyles={themeValues.focus}
-      activeStyles={themeValues.active}
-      disabledStyles={themeValues.disabled}
+      hoverStyles={hoverStyles}
+      focusStyles={hoverStyles}
+      activeStyles={activeStyles}
+      disabledStyles={disabledStyles}
       as="button"
       onClick={action}
       borderRadius="2px"

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -106,242 +106,70 @@ const border = {
   whitePrimary: "2px solid transparent"
 };
 
-const focus = {
-  primary: `
-    outline: none;
-    background-color: #0E506D;
-    border: 2px solid #0E506D;
-    box-shadow: 0 0 10px #15749D;
-`,
-  secondary: `
-    outline: none;
-    background-color: #DCEAF1;
-    box-shadow: 0 0 10px #DCEAF1;
-`,
-  back: `
-    outline: none;
-    background-color: #DCEAF1;
-    box-shadow: 0 0 10px #DCEAF1;
-`,
-  smallPrimary: `
-    outline: none;
-    background-color: #0E506D;
-    border: 2px solid #0E506D;
-    box-shadow: 0 0 10px #15749D;
-`,
-  smallSecondary: `
-    outline: none;
-    background-color: #DCEAF1;
-    box-shadow: 0 0 10px #DCEAF1;
-`,
-  smallGhost: `
-    outline: none;
-    box-shadow: none;
-    color: #0E506D;
-  `,
-  ghost: `
-    outline: none;
-    box-shadow: none;
-    color: #0E506D;
-  `,
-  danger: `
-    outline: none;
-    background-color: #BA002C;
-    border: 2px solid #BA002C;
-    box-shadow: 0 0 10px #ED125F;
-  `,
-  whiteSecondary: `
-    outline: none;
-    background-color: #ffffff4D;
-    > div > span {
-      background-color: transparent;
-    }
-  `,
-  whitePrimary: `
-    outline: none;
-    background-color: #ffffff4D;
-    border: 2px solid transparent;
-    > div > span {
-      background-color: transparent;
-    }
-  `
+const hoverBackgroundColor = {
+  primary: "#116285",
+  secondary: "transparent",
+  back: "transparent",
+  smallPrimary: "#116285",
+  smallSecondary: "transparent",
+  ghost: "transparent",
+  smallGhost: "transparent",
+  danger: "#BA002C"
+};
+
+const hoverBorderColor = {
+  primary: "#116285",
+  secondary: "#DCEAF1",
+  back: "#DCEAF1",
+  smallPrimary: "#116285",
+  smallSecondary: "#DCEAF1",
+  ghost: "transparent",
+  smallGhost: "transparent",
+  danger: "#BA002C"
+};
+
+const hoverColor = {
+  primary: "#FFFFFF",
+  secondary: "#116285",
+  back: "#116285",
+  smallPrimary: "#FFFFFF",
+  smallSecondary: "#116285",
+  ghost: "#116285",
+  smallGhost: "#116285",
+  danger: "#FFFFFF"
 };
 
-const hover = {
-  primary: `
-    cursor: pointer;
-    background-color: #116285;
-    border: 2px solid #116285;
-    box-shadow: 0 0 10px #15749D;
-  `,
-  secondary: `
-    cursor: pointer;
-    background-color: #DCEAF1;
-    box-shadow: 0 0 10px #DCEAF1;
-  `,
-  back: `
-    cursor: pointer;
-    background-color: #DCEAF1;
-    box-shadow: 0 0 10px #DCEAF1;
-  `,
-  smallPrimary: `
-    cursor: pointer;
-    background-color: #116285;
-    border: 2px solid #116285;
-    box-shadow: 0 0 10px #15749D;
-  `,
-  smallSecondary: `
-    cursor: pointer;
-    background-color: #DCEAF1;
-    box-shadow: 0 0 10px #DCEAF1;
-  `,
-  smallGhost: `
-    cursor: pointer;
-    color: #0E506D;
-  `,
-  ghost: `
-    cursor: pointer;
-    color: #0E506D;
-  `,
-  danger: `
-    outline: none;
-    background-color: #BA002C;
-    border: 2px solid #BA002C;
-    box-shadow: 0 0 10px #ED125F;
-  `,
-  whiteSecondary: `
-    outline: none;
-    background-color: #ffffff4D;
-    > div > span {
-      background-color: transparent;
-    }
-  `,
-  whitePrimary: `
-    outline: none;
-    background-color: #ffffff4D;
-    border: 2px solid transparent;
-    > div > span {
-      background-color: transparent;
-    }
-  `
+const activeBackgroundColor = {
+  primary: "#0E506D",
+  secondary: "transparent",
+  back: "transparent",
+  smallPrimary: "#0E506D",
+  smallSecondary: "transparent",
+  ghost: "transparent",
+  smallGhost: "transparent",
+  danger: "#870000"
 };
 
-const active = {
-  primary: `
-    background-color: #0E506D;
-    border: 2px solid #0E506D;
-    box-shadow: 0 0 10px #15749D;
-  `,
-  secondary: `
-    background-color: #B8D5E1;
-    box-shadow: 0 0 10px #B8D5E1;
-  `,
-  back: `
-    background-color: #B8D5E1;
-    box-shadow: 0 0 10px #B8D5E1;
-  `,
-  smallPrimary: `
-    background-color: #0E506D;
-    border: 2px solid #0E506D;
-    box-shadow: 0 0 10px #15749D;
-  `,
-  smallSecondary: `
-    background-color: #B8D5E1;
-    box-shadow: 0 0 10px #B8D5E1;
-  `,
-  smallGhost: `
-    background-color: transparent;
-    color: #15749D;
-    box-shadow: none;
-  `,
-  ghost: `
-    background-color: transparent;
-    color: #15749D;
-    box-shadow: none;
-  `,
-  danger: `
-    outline: none;
-    background-color: #870000;
-    border: 2px solid #870000;
-    box-shadow: 0 0 10px #ED125F;
-  `,
-  whiteSecondary: `
-    outline: none;
-    background-color: #00000033;
-    box-shadow: 0 0 10px #00000033;
-    > div > span {
-      background-color: transparent;
-    }
-  `,
-  whitePrimary: `
-    outline: none;
-    background-color: #00000033;
-    box-shadow: 0 0 10px #00000033;
-    border: 2px solid transparent;
-    > div > span {
-      background-color: transparent;
-    }
-  `
+const activeBorderColor = {
+  primary: "#0E506D",
+  secondary: "#0E506D",
+  back: "#0E506D",
+  smallPrimary: "#0E506D",
+  smallSecondary: "#0E506D",
+  ghost: "transparent",
+  smallGhost: "transparent",
+  danger: "#870000"
 };
 
-const disabled = {
-  primary: `
-    background-color: #6E727E;
-    border: 2px solid #6E727E;
-    &:focus {
-      box-shadow: 0 0 10px #6E727E;
-    }
-  `,
-  secondary: `
-    color: #6E727E;
-    border: 2px solid #6E727E;
-    &:focus {
-      box-shadow: 0 0 10px #6E727E;
-    }
-  `,
-  back: `
-    color: #6E727E;
-    border: 2px solid #6E727E;
-    &:focus {
-      box-shadow: 0 0 10px #6E727E;
-    }
-  `,
-  smallPrimary: `
-    background-color: #6E727E;
-    border: 2px solid #6E727E;
-    &:focus {
-      box-shadow: 0 0 10px #6E727E;
-    }
-   `,
-  smallSecondary: `
-    color: #6E727E;
-    border: 2px solid #6E727E;
-    &:focus {
-      box-shadow: 0 0 10px #6E727E;
-    }
-  `,
-  smallGhost: `
-    color: #6E727E;
-    border: none;
-  `,
-  ghost: `
-    color: #6E727E; 
-    border: none;
-  `,
-  whiteSecondary: `
-    color: #6E727E;
-    border: 2px solid #6E727E;
-    &:focus {
-      box-shadow: 0 0 10px #6E727E;
-    }
-  `,
-  whitePrimary: `
-    color: #6E727E;
-    border: 2px solid #6E727E;
-    &:focus {
-      box-shadow: 0 0 10px #6E727E;
-    }
-  `
+const activeColor = {
+  primary: "#FFFFFF",
+  secondary: "#0E506D",
+  back: "#0E506D",
+  smallPrimary: "#FFFFFF",
+  smallSecondary: "#0E506D",
+  ghost: "#0E506D",
+  smallGhost: "#0E506D",
+  danger: "#FFFFFF"
 };
 
 export const fallbackValues = {
@@ -353,8 +181,10 @@ export const fallbackValues = {
   minWidth,
   backgroundColor,
   border,
-  hover,
-  focus,
-  active,
-  disabled
+  hoverBackgroundColor,
+  hoverBorderColor,
+  hoverColor,
+  activeBackgroundColor,
+  activeBorderColor,
+  activeColor
 };

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

@@ -0,0 +1,53 @@
+import React from "react";
+import styled from "styled-components";
+import GenericCard from "../icons/GenericCard";
+import Text from "../text";
+import { Stack } from "../layouts";
+import { fallbackValues } from "./FormattedCreditCard.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+export const CreditCardWrapper = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+export const CCIconWrapper = styled.div`
+  margin-right: 16px;
+  width: 30px;
+  height: auto;
+  display: flex;
+`;
+
+const FormattedCreditCard = ({ lastFour, autoPay, themeValues }) => (
+  <CreditCardWrapper>
+    <CCIconWrapper>
+      <GenericCard />
+    </CCIconWrapper>
+    <Stack childGap="0">
+      <Text
+        variant="p"
+        padding="0 0 0 8px"
+        color={themeValues.textColor}
+        textAlign="left"
+        extraStyles={`display: inline-block;`}
+      >
+        {`Card ending in ${lastFour}`}
+      </Text>
+      {autoPay && (
+        <Text
+          variant="p"
+          color={themeValues.autopayTextColor}
+          extraStyles={`font-style: italic;`}
+        >{`Autopay Enabled`}</Text>
+      )}
+    </Stack>
+  </CreditCardWrapper>
+);
+
+export default themeComponent(
+  FormattedCreditCard,
+  "FormattedCreditCard",
+  fallbackValues,
+  "default"
+);

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

@@ -0,0 +1,9 @@
+import { CHARADE_GREY, REGENT_GREY } from "../../../constants/colors";
+
+const textColor = `${CHARADE_GREY}`;
+const autopayTextColor = `${REGENT_GREY}`;
+
+export const fallbackValues = {
+  textColor,
+  autopayTextColor
+};

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

@@ -0,0 +1,3 @@
+import FormattedCreditCard from "./FormattedCreditCard";
+
+export default FormattedCreditCard;