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

package/dist/src/index.js

@@ -0,0 +1,4 @@
+export * from "./components";
+import * as constants from "./constants";
+import * as util from "./util";
+export { constants, util };

package/dist/src/util/focusFirstInvalidInputHook.d.ts

@@ -0,0 +1,2 @@
+export default useFocusInvalidInput;
+declare function useFocusInvalidInput(hasErrors: any, resetHasErrors?: () => void): void;

package/dist/src/util/focusFirstInvalidInputHook.js

@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+var useFocusInvalidInput = function (hasErrors, resetHasErrors) {
+    if (resetHasErrors === void 0) { resetHasErrors = function () { }; }
+    // Only move focus when "hasErrors" is true
+    // "hasErrors" is managed by container page of form
+    // typically set to "true" on attempted form submission, if errors exist
+    // Reset errors, if provided, resets the error state tracking in order to properly re-run
+    useEffect(function () {
+        var _a;
+        if (hasErrors) {
+            var inputsWithErrors = document.querySelectorAll("input[aria-invalid=true]");
+            (_a = inputsWithErrors === null || inputsWithErrors === void 0 ? void 0 : inputsWithErrors[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return function () { return resetHasErrors(false); };
+    });
+};
+export default useFocusInvalidInput;

package/dist/src/util/formats.d.ts

@@ -0,0 +1,9 @@
+export const formatDelimiter: "_";
+export const phoneFormats: string[];
+export const moneyFormats: string[];
+export const expirationDateFormats: string[];
+export const zipFormat: any;
+export const creditCardFormat: any;
+export const expirationDateFormat: any;
+export const phoneFormat: any;
+export const moneyFormat: any;

package/dist/src/util/formats.js

@@ -0,0 +1,70 @@
+import { createFormat } from "formatted-input";
+export var formatDelimiter = "_";
+export var phoneFormats = [
+    "",
+    "_",
+    "__",
+    "(___) ",
+    "(___) _",
+    "(___) __",
+    "(___) ___-",
+    "(___) ___-_",
+    "(___) ___-__",
+    "(___) ___-___",
+    "(___) ___-____"
+];
+var zipFormats = [
+    "",
+    "_",
+    "__",
+    "___",
+    "____",
+    "_____",
+    "______",
+    "_____-__",
+    "_____-___",
+    "_____-____"
+];
+var creditCardFormats = [
+    "",
+    "_",
+    "__",
+    "___",
+    "____",
+    "____ _",
+    "____ __",
+    "____ ___",
+    "____ ____",
+    "____ ____ _",
+    "____ ____ __",
+    "____ ____ ___",
+    "____ ____ ____",
+    "____ ____ ____ _",
+    "____ ____ ____ __",
+    "____ ____ ____ ___",
+    "____ ____ ____ ____"
+];
+export var moneyFormats = [
+    "",
+    "$0.0_",
+    "$0.__",
+    "$_.__",
+    "$__.__",
+    "$___.__",
+    "$_,___.__",
+    "$__,___.__",
+    "$___,___.__",
+    "$_,___,___.__",
+    "$__,___,___.__",
+    "$___,___,___.__",
+    "$_,___,___,___.__",
+    "$__,___,___,___.__",
+    "$___,___,___,___.__",
+    "$_,___,___,___,___.__"
+];
+export var expirationDateFormats = ["", "_", "__/", "__/_", "__/__"];
+export var zipFormat = createFormat(zipFormats, formatDelimiter);
+export var creditCardFormat = createFormat(creditCardFormats, formatDelimiter);
+export var expirationDateFormat = createFormat(expirationDateFormats, formatDelimiter);
+export var phoneFormat = createFormat(phoneFormats, formatDelimiter);
+export var moneyFormat = createFormat(moneyFormats, formatDelimiter);

package/dist/src/util/general.d.ts

@@ -0,0 +1,13 @@
+export function noop(): void;
+export function displayCurrency(cents: any): any;
+export function convertCentsToMoneyInt(n: any): string;
+export function formatPercent(decimal: any): string;
+export function createIdFromString(text: any, postscript: any, unique?: boolean): string;
+export function safeChildren(children: any, replacement?: any[]): any;
+export function generateClickHandler(form: any, handleErrors: any, submitForm: any): (e: any) => any;
+export function checkCardBrand(number: any): "DISCOVER" | "MASTERCARD" | "VISA" | "AMEX" | "UNKNOWN";
+export function displayCardBrand(number: any): "Discover" | "Mastercard" | "Visa" | "American Express" | "Unknown Card";
+export function checkDeniedCards(name: any): RegExp | "";
+export const screenReaderOnlyStyle: "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
+export const inputPlaceholderTextStyle: string;
+export const inputDisabledStyle: "\n  color: #6e727e;\n  background-color: #f7f7f7;\n  pointer-events: none;\n";

package/dist/src/util/general.js

@@ -0,0 +1,101 @@
+import React, { Fragment } from "react";
+import numeral from "numeral";
+import { CHARADE_GREY } from "../constants/colors";
+export var noop = function () { };
+var formatMoneyString = function (s) { return numeral(s).format("$0,0.00"); };
+var convertCentsToMoneyDecimal = function (n) { return (n / 100).toFixed(2); };
+export var displayCurrency = function (cents) {
+    return formatMoneyString(convertCentsToMoneyDecimal(cents));
+};
+export var convertCentsToMoneyInt = function (n) { return (n / 100).toFixed(0); };
+export var formatPercent = function (decimal) { return Number.parseFloat(decimal).toFixed(2); };
+var createUniqueId = function () {
+    return "_" +
+        Math.random()
+            .toString(36)
+            .substr(2, 9);
+};
+export var createIdFromString = function (text, postscript, unique) {
+    if (unique === void 0) { unique = false; }
+    if (text === undefined) {
+        return createUniqueId();
+    }
+    else {
+        // "first name", undefined, false -> "first-name"
+        // "email address", "error message", false -> "email-address-error-message"
+        // "shopping cart", "order item", true -> "shopping-cart-order-item_2ahtlz608"
+        return "".concat(text === null || text === void 0 ? void 0 : text.replace(/\s+/g, "-")).concat(postscript ? "-".concat(postscript === null || postscript === void 0 ? void 0 : postscript.replace(/\s+/g, "-")) : "").concat(unique ? createUniqueId() : "");
+    }
+};
+export var safeChildren = function (children, replacement) {
+    if (replacement === void 0) { replacement = []; }
+    var unsafeValues = [false, undefined, NaN, null];
+    if (children && children instanceof Array) {
+        return children.map(function (child) {
+            return unsafeValues.includes(child) ? (React.createElement(Fragment, { key: createUniqueId() }, replacement)) : (child);
+        });
+    }
+    return unsafeValues.includes(children) ? replacement : children;
+};
+export var generateClickHandler = function (form, handleErrors, submitForm) { return function (e) {
+    e.preventDefault();
+    var formHasError = Object.values(form.fields).reduce(function (acc, curr) { return acc || curr.hasErrors; }, false);
+    return formHasError ? handleErrors() : submitForm();
+}; };
+export var checkCardBrand = function (number) {
+    if (/^6011/.test(number)) {
+        return "DISCOVER";
+    }
+    else if (/^5[1-5]/.test(number)) {
+        return "MASTERCARD";
+    }
+    else if (/^4/.test(number)) {
+        return "VISA";
+    }
+    else if (/^3[4,7]/.test(number)) {
+        return "AMEX";
+    }
+    else
+        return "UNKNOWN";
+};
+export var displayCardBrand = function (number) {
+    if (/^6011/.test(number)) {
+        return "Discover";
+    }
+    else if (/^5[1-5]/.test(number)) {
+        return "Mastercard";
+    }
+    else if (/^4/.test(number)) {
+        return "Visa";
+    }
+    else if (/^3[4,7]/.test(number)) {
+        return "American Express";
+    }
+    else
+        return "Unknown Card";
+};
+export var checkDeniedCards = function (name) {
+    switch (name) {
+        case "DISCOVER":
+            return /^(?!6011)/;
+        case "MASTERCARD":
+            return /^(?!5[1-5])/;
+        case "VISA":
+            return /^(?!4)/;
+        case "AMEX":
+            return /^(?!3[4,7])/;
+        default:
+            return "";
+    }
+};
+/*
+  An optional style for layout atoms that positions the atom completely off screen
+  This will *not* be visible or accessible to sighted users
+  Use to contain text content or a11y interactive content (skip links when not visible)
+  that is only for users of assistive technologies (screen readers)
+
+  Currently implemented on the Box atom via the srOnly prop
+*/
+export var screenReaderOnlyStyle = "\n  position: absolute;\n  left: -10000px;\n  top: auto;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n";
+export var inputPlaceholderTextStyle = "\n  ::-webkit-input-placeholder {\n    color: ".concat(CHARADE_GREY, ";\n  }\n  ::-moz-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::-ms-placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n  ::placeholder {\n    color: ").concat(CHARADE_GREY, ";\n  }\n");
+export var inputDisabledStyle = "\n  color: #6e727e;\n  background-color: #f7f7f7;\n  pointer-events: none;\n";

package/dist/src/util/index.d.ts

@@ -0,0 +1,5 @@
+import * as formats from "./formats";
+import * as general from "./general";
+import * as theme from "./themeUtils";
+import useFocusInvalidInput from "./focusFirstInvalidInputHook";
+export { formats, general, theme, useFocusInvalidInput };

package/dist/src/util/index.js

@@ -0,0 +1,5 @@
+import * as formats from "./formats";
+import * as general from "./general";
+import * as theme from "./themeUtils";
+import useFocusInvalidInput from "./focusFirstInvalidInputHook";
+export { formats, general, theme, useFocusInvalidInput };

package/dist/src/util/inputValidationUtils.d.ts

@@ -0,0 +1,43 @@
+export const MIN_LENGTH_ERROR: "error/HAS_LENGTH";
+export const MAX_LENGTH_ERROR: "max_length_error";
+export const EXACT_LENGTH_ERROR: "exact_length_error";
+export const MULTIPLE_LENGTHS_ERROR: "multiple_lengths_error";
+export const EMAIL_ERROR: "email_error";
+export const HAS_NUMBER_ERROR: "error/HAS_NUMBER";
+export const HAS_UPPERCASE_LETTER_ERROR: "error/HAS_UPPERCASE_LETTER";
+export const HAS_LOWERCASE_LETTER_ERROR: "error/HAS_LOWERCASE_LETTER";
+export const HAS_SPECIAL_CHARACTER_ERROR: "error/HAS_SPECIAL_CHARACTER";
+export const ONLY_NUMBERS_ERROR: "only_numbers_error";
+export const ONLY_LETTERS_ERROR: "only_letters_error";
+export const REQUIRED_FIELD_ERROR: "required_field_error";
+export const NUM_GREATER_THAN_ERROR: "num_greater_than_error";
+export const NUM_LESS_THAN_ERROR: "num_less_than_error";
+export const MATCHES_FIELD_ERROR: "matches_field_error";
+export const VALID_SELECT_OPTION_ERROR: "valid_select_option_error";
+export const DEFAULT_ERROR_MESSAGES: {
+    "error/HAS_LENGTH": (inputState: any) => any;
+    max_length_error: (inputState: any) => any;
+    exact_length_error: (inputState: any) => any;
+    multiple_lengths_error: (inputState: any) => any;
+    email_error: (inputState: any) => any;
+    "error/HAS_NUMBER": (inputState: any) => any;
+    "error/HAS_UPPERCASE_LETTER": (inputState: any) => any;
+    "error/HAS_LOWERCASE_LETTER": (inputState: any) => any;
+    "error/HAS_SPECIAL_CHARACTER": (inputState: any) => any;
+    only_numbers_error: (inputState: any) => any;
+    only_letters_error: (inputState: any) => any;
+    required_field_error: (inputState: any) => any;
+    num_greater_than_error: (inputState: any) => any;
+    num_less_than_error: (inputState: any) => any;
+    matches_field_error: (inputState: any) => any;
+    valid_select_option_error: (inputState: any) => any;
+};
+export const INPUT_STATE_NEUTRAL: "NEUTRAL";
+export const INPUT_STATE_INVALID: "INVALID";
+export const INPUT_STATE_VALID: "VALID";
+export function getInputState({ dirty, hasErrors, errors, rawValue }: {
+    dirty: any;
+    hasErrors: any;
+    errors: any;
+    rawValue: any;
+}, errorsToCheck?: any[]): "NEUTRAL" | "INVALID" | "VALID";

package/dist/src/util/inputValidationUtils.js

@@ -0,0 +1,92 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var _a;
+import * as R from "ramda";
+// Constants to reprsent input error types
+export var MIN_LENGTH_ERROR = "error/HAS_LENGTH";
+export var MAX_LENGTH_ERROR = "max_length_error";
+export var EXACT_LENGTH_ERROR = "exact_length_error";
+export var MULTIPLE_LENGTHS_ERROR = "multiple_lengths_error";
+export var EMAIL_ERROR = "email_error";
+export var HAS_NUMBER_ERROR = "error/HAS_NUMBER";
+export var HAS_UPPERCASE_LETTER_ERROR = "error/HAS_UPPERCASE_LETTER";
+export var HAS_LOWERCASE_LETTER_ERROR = "error/HAS_LOWERCASE_LETTER";
+export var HAS_SPECIAL_CHARACTER_ERROR = "error/HAS_SPECIAL_CHARACTER";
+export var ONLY_NUMBERS_ERROR = "only_numbers_error";
+export var ONLY_LETTERS_ERROR = "only_letters_error";
+export var REQUIRED_FIELD_ERROR = "required_field_error";
+export var NUM_GREATER_THAN_ERROR = "num_greater_than_error";
+export var NUM_LESS_THAN_ERROR = "num_less_than_error";
+export var MATCHES_FIELD_ERROR = "matches_field_error";
+export var VALID_SELECT_OPTION_ERROR = "valid_select_option_error";
+// Array<String>, Array<String> -> Object -> String
+var genErrorMessage = function (strings) {
+    var argKeys = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        argKeys[_i - 1] = arguments[_i];
+    }
+    return function (inputState) {
+        return strings.reduce(function (accum, current, index) {
+            return "".concat(accum).concat(current).concat(argKeys[index] ? R.pathOr("", [argKeys[index]], inputState) : "");
+        }, []);
+    };
+};
+/*
+What's going on here? This looks weird, you may ask...
+DEFAULT_ERROR_MESSAGES is a map between the error constants (which are returned by validators)
+and some tagged template literals.
+In this case, the template tag function is curried and returns a function which accepts an args object
+I'm calling that object inputState, but it could really be anything.
+When the error message string fucntion is called with that arg, it's reduced to produce a custom error message
+with interpolation.
+*/
+export var DEFAULT_ERROR_MESSAGES = (_a = {},
+    _a[MIN_LENGTH_ERROR] = genErrorMessage(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", " is too short"], ["", " is too short"])), "fieldLabel"),
+    _a[MAX_LENGTH_ERROR] = genErrorMessage(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", " is too long"], ["", " is too long"])), "fieldLabel"),
+    _a[EXACT_LENGTH_ERROR] = genErrorMessage(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", " is not the right length"], ["", " is not the right length"])), "fieldLabel"),
+    _a[MULTIPLE_LENGTHS_ERROR] = genErrorMessage(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", " is not a valid length"], ["", " is not a valid length"])), "fieldLabel"),
+    _a[EMAIL_ERROR] = genErrorMessage(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", " is not a valid email address"], ["", " is not a valid email address"])), "fieldLabel"),
+    _a[HAS_NUMBER_ERROR] = genErrorMessage(templateObject_6 || (templateObject_6 = __makeTemplateObject(["", " needs a number"], ["", " needs a number"])), "fieldLabel"),
+    _a[HAS_UPPERCASE_LETTER_ERROR] = genErrorMessage(templateObject_7 || (templateObject_7 = __makeTemplateObject(["", " needs an uppercase letter"], ["", " needs an uppercase letter"])), "fieldLabel"),
+    _a[HAS_LOWERCASE_LETTER_ERROR] = genErrorMessage(templateObject_8 || (templateObject_8 = __makeTemplateObject(["", " needs a lowercase letter"], ["", " needs a lowercase letter"])), "fieldLabel"),
+    _a[HAS_SPECIAL_CHARACTER_ERROR] = genErrorMessage(templateObject_9 || (templateObject_9 = __makeTemplateObject(["", " needs a special character"], ["", " needs a special character"])), "fieldLabel"),
+    _a[ONLY_NUMBERS_ERROR] = genErrorMessage(templateObject_10 || (templateObject_10 = __makeTemplateObject(["", " must be only numbers"], ["", " must be only numbers"])), "fieldLabel"),
+    _a[ONLY_LETTERS_ERROR] = genErrorMessage(templateObject_11 || (templateObject_11 = __makeTemplateObject(["", " must be only letters"], ["", " must be only letters"])), "fieldLabel"),
+    _a[REQUIRED_FIELD_ERROR] = genErrorMessage(templateObject_12 || (templateObject_12 = __makeTemplateObject(["", " is required"], ["", " is required"])), "fieldLabel"),
+    _a[NUM_GREATER_THAN_ERROR] = genErrorMessage(templateObject_13 || (templateObject_13 = __makeTemplateObject(["", " is too high"], ["", " is too high"])), "fieldLabel"),
+    _a[NUM_LESS_THAN_ERROR] = genErrorMessage(templateObject_14 || (templateObject_14 = __makeTemplateObject(["", " is too low"], ["", " is too low"])), "fieldLabel"),
+    _a[MATCHES_FIELD_ERROR] = genErrorMessage(templateObject_15 || (templateObject_15 = __makeTemplateObject(["", " must match ", ""], ["", " must match ", ""])), "fieldLabel", "matchField"),
+    _a[VALID_SELECT_OPTION_ERROR] = genErrorMessage(templateObject_16 || (templateObject_16 = __makeTemplateObject(["", " is not a valid option"], ["", " is not a valid option"])), "fieldLabel"),
+    _a);
+// Constants to represent an input's state
+// Neutral - has not been validated
+// Invalid - has been validated and has an error
+// Valid - has been validated and has no error
+export var INPUT_STATE_NEUTRAL = "NEUTRAL";
+export var INPUT_STATE_INVALID = "INVALID";
+export var INPUT_STATE_VALID = "VALID";
+// Function to check the state of an input
+// This function is intended to be used with inputs that have multiple validators
+// Takes an input's state value, destructures for the input's error and showError booleans, list of errors
+// Also takes a list of the specific error constants to look for
+// If the input's showError property is false, the input has not been validated, and input state is NEUTRAL
+// If the input has an error, and showError is true, check if the errors we care about are in the input's error list
+// If yes, input state is INVALID
+// If input has no error and showError is true, or the errors we're looking for aren't present in the list
+// then input state is VALID
+// { error: Boolean, showError: Boolean, errorsList: Array<String> }, Array<String> -> String
+export var getInputState = function (_a, errorsToCheck) {
+    var dirty = _a.dirty, hasErrors = _a.hasErrors, errors = _a.errors, rawValue = _a.rawValue;
+    if (errorsToCheck === void 0) { errorsToCheck = []; }
+    if (!dirty) {
+        return INPUT_STATE_NEUTRAL;
+    }
+    else if ((dirty && rawValue === "") ||
+        (hasErrors && errorsToCheck.some(function (error) { return errors.includes(error); }))) {
+        return INPUT_STATE_INVALID;
+    }
+    return INPUT_STATE_VALID;
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;

package/dist/src/util/themeUtils.d.ts

@@ -0,0 +1,5 @@
+export function createThemeValues(themeContext: any, fallbackValues: any, componentName: any, variant: any): {};
+export function themeComponent(component: any, componentThemeId: any, fallbackValues: any, defaultVariant: any): ({ variant, ...props }: {
+    [x: string]: any;
+    variant?: any;
+}) => any;

package/dist/src/util/themeUtils.js

@@ -0,0 +1,129 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import theme from "styled-theming";
+import { useContext } from "react";
+import { ThemeContext } from "styled-components";
+/*
+themeContext: { name: "default", values: {JSON_THEME_VALUES_HERE} }
+
+fallbackValues: {
+  padding: {
+    primary: "2rem 1rem",
+    secondary: "1rem 0.5rem"
+  },
+  fontWeight: "600"
+}
+
+componentName: "Button"
+
+Iterates over a component's fallback values, checks to see if any of those values
+are present in the theme values available in the app's theme context.
+If they are, those values override the fallback value.
+
+We use the resuting values as an argument to the styled-theming lib functions
+to create new functions that can be called with theme props to produce values.
+Typically, those functions are passed back to components and used in styled-component files.
+We do things a bit differently...
+
+Before returning, we call the styled-theming functions with relevant theme props (name, variant...)
+The styled-theming API then returns the value
+Ultimately, an object of property values ({ color: "red", fontWeight: "600" })
+is returned to the component, which can be passed
+to whatever layout atoms / other atoms the component is using to build itself
+
+Why do things this way? It's powerful. Right now we're always using "default" as our theme name
+And only expecting one set of theme value in our context (one theme per client)
+
+However, this function can easily be modified to allow for multiple themes per client and
+allow for toggling those themes on the fly via state values
+
+Future use cases for the above:
+  -Different themes per agency/sub-division of client
+  -Extra themes designed for accessibility (high contrast / color blindness)
+  -Superfluous extra themes (dark mode)
+  -Toggling between many client themes / proposed client themes in a live demo
+
+The above functionality is not available right now, but it is trivial to enable it with this approach.
+*/
+export var createThemeValues = function (themeContext, fallbackValues, componentName, variant) {
+    var themeValues = themeContext.values;
+    var themeProps = { theme: __assign({ name: "default" }, themeContext), variant: variant };
+    var mergedValues = Object.entries(fallbackValues).reduce(function (acc, _a) {
+        var _b, _c;
+        var _d, _e;
+        var propName = _a[0], propValue = _a[1];
+        if (typeof propValue === "object") {
+            var mergedPropValues = Object.entries(propValue).reduce(function (innerAcc, _a) {
+                var _b;
+                var _c, _d, _e;
+                var variantName = _a[0], defaultVariantValue = _a[1];
+                var variantValue = (_e = (_d = (_c = themeValues === null || themeValues === void 0 ? void 0 : themeValues[componentName]) === null || _c === void 0 ? void 0 : _c[propName]) === null || _d === void 0 ? void 0 : _d[variantName]) !== null && _e !== void 0 ? _e : defaultVariantValue;
+                return __assign(__assign({}, innerAcc), (_b = {}, _b[variantName] = {
+                    default: variantValue
+                }, _b));
+            }, {});
+            // Always using "default" as our theme name right now
+            // In the future if we want to toggle themes on the fly, change this
+            return __assign(__assign({}, acc), (_b = {}, _b[propName] = mergedPropValues, _b));
+        }
+        var mergedSinglePropValue = (_e = (_d = themeValues === null || themeValues === void 0 ? void 0 : themeValues[componentName]) === null || _d === void 0 ? void 0 : _d[propName]) !== null && _e !== void 0 ? _e : propValue;
+        return __assign(__assign({}, acc), (_c = {}, _c[propName] = { default: mergedSinglePropValue }, _c));
+    }, {});
+    var createdTheme = Object.entries(mergedValues).reduce(function (acc, _a) {
+        var _b, _c;
+        var propName = _a[0], propValue = _a[1];
+        if (propValue[variant]) {
+            return __assign(__assign({}, acc), (_b = {}, _b[propName] = theme.variants("name", "variant", propValue)(themeProps), _b));
+        }
+        return __assign(__assign({}, acc), (_c = {}, _c[propName] = theme("name", propValue)(themeProps), _c));
+    }, {});
+    return createdTheme;
+};
+export var themeComponent = function (component, componentThemeId, fallbackValues, defaultVariant) { return function (_a) {
+    var _b;
+    var _c = _a.variant, variant = _c === void 0 ? defaultVariant : _c, props = __rest(_a, ["variant"]);
+    var themeContext = useContext(ThemeContext);
+    var metadata = (_b = themeContext === null || themeContext === void 0 ? void 0 : themeContext.metadata) !== null && _b !== void 0 ? _b : {};
+    var themeValues = themeContext
+        ? createThemeValues(themeContext, fallbackValues, componentThemeId, variant)
+        : fallbackValues;
+    return component(__assign(__assign({}, props), { themeValues: themeValues, variant: variant, metadata: metadata }));
+}; };
+/*
+Keeping this around for now in case we need it later...
+
+export const generateImgSrc = (
+  configAssetsEndpoint,
+  clientSlug,
+  agency = ""
+) => filename => {
+  if (configAssetsEndpoint === "http://localhost:8080/assets") {
+    return agency !== ""
+      ? `${configAssetsEndpoint}/${clientSlug}/${agency}/${filename}`
+      : `${configAssetsEndpoint}/${clientSlug}/${filename}`;
+  }
+  return agency !== ""
+    ? `${configAssetsEndpoint}/${agency}/${filename}`
+    : `${configAssetsEndpoint}/${filename}`;
+};
+*/

package/package.json

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

package/src/components/atoms/card/Card.js

@@ -6,12 +6,16 @@ import withWindowSize from "../../withWindowSize";
 import { fallbackValues } from "./Card.theme";
 
 import BoxWithShadow from "../box-with-shadow";
+import Center from "../layouts/Center";
 import Cover from "../layouts/Cover";
 import Stack from "../layouts/Stack";
 
 import CardImage from "./CardImage.styled";
 import CardText from "./CardText";
 import CardHeader from "./CardHeader";
+import ProfileImage from "../icons/ProfileImage";
+import GuidedCheckoutImage from "../icons/GuidedCheckoutImage";
+import StandardCheckoutImage from "../icons/StandardCheckoutImage";
 
 const Card = ({
   borderRadius = "4px",
@@ -20,6 +24,7 @@ const Card = ({
   headerText,
   headerVariant = "small",
   imgSrc,
+  imgName,
   imgHeight = "150px",
   imgObjectFit = "none",
   imgAltText,
@@ -31,10 +36,17 @@ const Card = ({
   width = "276px",
   children
 }) => {
+  const imageComponents = {
+    ProfileImage: ProfileImage,
+    GuidedCheckoutImage: GuidedCheckoutImage,
+    StandardCheckoutImage: StandardCheckoutImage
+  };
+  const ImageComponent = imageComponents[imgName];
+  const hasImage = ImageComponent || imgSrc;
   const numberOfChildren =
     (Array.isArray(children) ? children.length : 1) +
     (text ? 1 : 0) +
-    (imgSrc ? 1 : 0) +
+    (hasImage ? 1 : 0) +
     (headerText ? 1 : 0);
 
   return (
@@ -60,6 +72,17 @@ const Card = ({
               as={headerAs}
             ></CardHeader>
           )}
+          {ImageComponent && !imgSrc && (
+            <Cover
+              singleChild
+              minHeight={imgHeight}
+              style={{ background: themeValues.imageBackgroundColor }}
+            >
+              <Center intrinsic>
+                <ImageComponent alt={imgAltText} />
+              </Center>
+            </Cover>
+          )}
           {imgSrc && (
             <CardImage
               height={imgHeight}

package/src/components/atoms/card/index.d.ts

@@ -7,6 +7,7 @@ export interface CardProps {
   titleVariant?: string;
   extraStyles?: string;
   imgSrc?: string;
+  imgName?: string;
   imgHeight?: string;
   imgAltText?: string;
   imgObjectFit?:

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

@@ -0,0 +1,39 @@
+import React from "react";
+
+const GuidedCheckoutImage = () => {
+  return (
+    <svg
+      width="186"
+      height="96"
+      viewBox="0 0 186 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        x="48.6582"
+        y="12.7822"
+        width="86.9263"
+        height="65.0716"
+        rx="5"
+        fill="white"
+      />
+      <path
+        opacity="0.3"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M157.658 6.96909C158.29 5.32214 159.882 4.15137 161.751 4.15137C163.788 4.15137 165.496 5.54154 165.991 7.42414C166.168 7.38839 166.352 7.36921 166.54 7.36921C168.076 7.36921 169.32 8.61442 169.32 10.1505C169.32 11.6866 168.076 12.9319 166.54 12.9319H154.54C153.004 12.9319 151.759 11.6866 151.759 10.1505C151.759 8.61442 153.004 7.36921 154.54 7.36921C154.946 7.36921 155.331 7.4586 155.679 7.61526C156.022 7.17907 156.554 6.89791 157.151 6.89791C157.327 6.89791 157.496 6.92359 157.658 6.96909ZM29.9007 45.3418C30.0511 43.7052 31.414 42.4238 33.0737 42.4238C34.5347 42.4238 35.765 43.4168 36.1417 44.7708C36.5175 44.4868 36.9822 44.3165 37.4875 44.3165C38.7303 44.3165 39.738 45.3343 39.738 46.5896C39.738 47.8451 38.7303 48.8629 37.4875 48.8629H28.783C27.721 48.8629 26.86 47.9932 26.86 46.9206C26.86 45.8478 27.721 44.9781 28.783 44.9781C29.2002 44.9781 29.5853 45.1138 29.9007 45.3418ZM27.3073 7.16256C25.3138 7.16256 23.6159 8.41138 22.9411 10.1681C22.7693 10.1196 22.5883 10.0922 22.4008 10.0922C21.7628 10.0922 21.1962 10.3921 20.8302 10.8574C20.459 10.6903 20.0486 10.5949 19.6151 10.5949C17.9772 10.5949 16.6494 11.9231 16.6494 13.5617C16.6494 15.2002 17.9772 16.5284 19.6151 16.5284H32.4158C34.0534 16.5284 35.3811 15.2002 35.3811 13.5617C35.3811 11.9231 34.0534 10.5949 32.4158 10.5949C32.2148 10.5949 32.019 10.6154 31.8294 10.6535C31.3019 8.64541 29.4803 7.16256 27.3073 7.16256ZM112.12 87.6601C112.12 85.2362 103.187 83.2712 92.1679 83.2712C81.149 83.2712 72.2157 85.2362 72.2157 87.6601C72.2157 90.084 81.149 92.049 92.1679 92.049C103.187 92.049 112.12 90.084 112.12 87.6601ZM171.486 29.0796C171.486 27.8253 170.469 26.8086 169.215 26.8086H145.438C145.347 26.8086 145.256 26.8141 145.165 26.8251C143.92 26.9761 143.033 28.1079 143.184 29.353L145.146 45.5311C145.284 46.6712 146.252 47.5287 147.401 47.5287H167.252C168.401 47.5287 169.369 46.6712 169.507 45.5311L171.469 29.353C171.48 29.2623 171.486 29.171 171.486 29.0796ZM133.401 12.7851L133.282 12.7822H51.0491C49.7687 12.7822 48.7236 13.7791 48.6615 15.0321L48.6585 15.1503V20.3601H135.672V15.1503C135.672 13.882 134.666 12.8467 133.401 12.7851Z"
+        fill="#3B5BDB"
+      />
+      <path
+        d="M89.5104 77.7962C90.2778 77.7962 90.9044 78.3932 90.9429 79.1439L90.9447 79.217V87.6425C90.9447 88.4027 90.3421 89.0235 89.5842 89.0615L89.5104 89.0634H84.0843C83.2921 89.0634 82.6499 88.4272 82.6499 87.6425C82.6499 86.8824 83.2526 86.2616 84.0104 86.2236L84.0843 86.2217L88.0759 86.2216L88.0761 79.217C88.0761 78.4568 88.6788 77.8361 89.4366 77.798L89.5104 77.7962ZM94.825 77.5318C95.5924 77.5318 96.219 78.1288 96.2574 78.8795L96.2593 78.9527L96.2589 86.2216L100.251 86.2218C101.019 86.2218 101.645 86.8188 101.684 87.5695L101.685 87.6427C101.685 88.4028 101.083 89.0236 100.325 89.0616L100.251 89.0635H94.825C94.0576 89.0635 93.431 88.4665 93.3926 87.7158L93.3907 87.6427V78.9527C93.3907 78.1679 94.0328 77.5318 94.825 77.5318ZM48.3193 58.0547C47.1765 59.0379 45.5982 60.3956 43.5845 62.1279L59.6704 65.8774C60.4641 64.8028 61.7449 64.1047 63.1907 64.1047C64.0309 64.1047 64.7119 64.7794 64.7119 65.6116C64.7119 66.4186 64.0715 67.0775 63.2666 67.1167L63.1907 67.1185C62.4628 67.1185 61.8703 67.7076 61.8703 68.4369C61.8703 69.1422 62.4239 69.7162 63.1184 69.7537L63.1907 69.7556H65.6733C66.5134 69.7556 67.1945 70.4303 67.1945 71.2625C67.1945 72.0696 66.5541 72.7284 65.7492 72.7676L65.6733 72.7695H63.1907C60.8966 72.7695 59.0179 71.0118 58.8414 68.7808L40.2249 64.4414C39.4805 64.2679 38.9937 63.5802 39.0573 62.8472C39.021 62.4108 39.1765 61.9645 39.5143 61.6406L39.5759 61.5847L48.0414 54.3022C48.6758 53.7565 48.8917 57.5624 48.3193 58.0547ZM163.601 50.3541C164.441 50.3541 165.123 51.0288 165.123 51.861C165.123 52.6681 164.482 53.3269 163.677 53.3661L163.601 53.3679L158.396 53.3677L146.317 66.1842C145.798 66.7342 144.954 66.8185 144.337 66.3933L144.272 66.3458C140.542 63.4754 137.745 61.3226 135.88 59.8874C135.492 59.5886 135.856 56.1092 136.515 56.5623L136.582 56.6113L145.041 63.1214L154.234 53.3677L151.051 53.3679C150.211 53.3679 149.53 52.6933 149.53 51.861C149.53 51.054 150.17 50.3951 150.975 50.356L151.051 50.3541H163.601ZM170.063 26.8086C170.903 26.8086 171.584 27.4833 171.584 28.3155C171.584 28.3756 171.58 28.4356 171.573 28.4953L169.425 46.2015C169.334 46.9588 168.685 47.5287 167.915 47.5287H146.737C145.967 47.5287 145.319 46.9588 145.227 46.2015L143.079 28.4953C142.979 27.669 143.574 26.9186 144.408 26.8194C144.468 26.8122 144.529 26.8086 144.59 26.8086H170.063ZM147.196 43.4878L147.412 45.2683L148.993 45.2683L147.196 43.4878ZM153.523 42.2217L150.447 45.2683H156.598L153.523 42.2217ZM161.129 42.2217L158.054 45.2683H164.204L161.129 42.2217ZM167.456 43.489L165.66 45.2683L167.24 45.2683L167.456 43.489ZM164.932 38.4548L161.667 41.6892L164.932 44.9236L167.603 42.2774L167.73 41.2271L164.932 38.4548ZM153.523 34.6878L150.258 37.9222L153.523 41.1567L155.676 39.0242C155.824 38.8771 156.065 38.8771 156.214 39.0242C156.351 39.16 156.361 39.3737 156.245 39.5215L156.214 39.557L154.061 41.6892L157.326 44.9236L160.591 41.6892L153.523 34.6878ZM149.72 38.4548L146.921 41.2276L147.048 42.2768L149.72 44.9236L152.985 41.6892L149.72 38.4548ZM157.326 30.9202L154.061 34.1547L161.129 41.1567L164.395 37.9222L161.117 34.6753L160.098 35.6903C159.95 35.8378 159.709 35.8383 159.56 35.6916C159.411 35.5448 159.411 35.3063 159.559 35.1588L160.579 34.1427L157.326 30.9202ZM149.72 30.9202L146.105 34.5004L146.806 40.2755L149.182 37.9216L148.136 36.8855L148.104 36.85C147.988 36.7022 147.999 36.4885 148.136 36.3527C148.27 36.2203 148.478 36.207 148.627 36.313L148.674 36.3527L149.72 37.3891L152.985 34.1547L149.72 30.9202ZM164.911 30.8986L161.653 34.141L164.932 37.3891L165.793 36.5365C165.942 36.3894 166.182 36.3894 166.331 36.5365C166.468 36.6723 166.479 36.886 166.363 37.0338L166.331 37.0693L165.47 37.9216L167.846 40.2749L168.546 34.4998L164.911 30.8986ZM155.838 29.0688H151.209L151.399 29.2573L150.258 30.3871L153.523 33.6215L156.788 30.3871L155.648 29.2573L155.838 29.0688ZM163.444 29.0688H158.814L159.005 29.2573L157.864 30.3871L161.116 33.6085L164.373 30.3661L163.254 29.2573L163.444 29.0688ZM148.231 29.0688L145.447 29.069L145.99 33.5494L149.182 30.3877L148.041 29.2573L148.231 29.0688ZM169.205 29.069L166.593 29.0692C166.593 29.1652 166.556 29.2612 166.483 29.3347L165.447 30.365L168.661 33.5489L169.205 29.069ZM150.513 29.0688H148.927L149.72 29.8545L150.513 29.0688ZM158.119 29.0688H156.533L157.326 29.8545L158.119 29.0688ZM165.676 29.0688H164.139L164.91 29.8318L165.676 29.0688Z"
+        fill="#3B5BDB"
+      />
+      <path
+        d="M132.372 11.7393C134.772 11.7393 136.73 13.6217 136.789 15.9719L136.791 16.0824L136.79 72.3274L143.659 72.2195C144.319 72.2092 144.863 72.7308 144.873 73.3847C144.884 74.016 144.393 74.5397 143.765 74.5844L143.697 74.5873L136.79 74.6954L136.791 74.8305C136.791 77.195 134.87 79.1138 132.484 79.1723L132.372 79.1736H51.8381C49.4378 79.1736 47.4805 77.2912 47.4208 74.941L47.4194 74.8305L47.4194 74.5938L35.0075 74.7057C34.3474 74.7117 33.8074 74.1864 33.8014 73.5325C33.7956 72.9011 34.2898 72.3807 34.918 72.3402L34.9858 72.3377L47.4194 72.2257L47.4194 66.1561L49.7013 66.5329V74.8305C49.7013 75.9509 50.6103 76.8686 51.754 76.9117L51.8381 76.9133H132.372C133.526 76.9133 134.463 76.0221 134.507 74.9121L134.509 74.8305L134.508 21.1882H49.7008L49.7013 63.5861L47.4194 63.2093V16.0824C47.4194 13.7179 49.3398 11.7991 51.7259 11.7406L51.8381 11.7393H132.372ZM160.689 72.2195C161.349 72.2118 161.89 72.7357 161.898 73.3896C161.905 74.021 161.413 74.5427 160.784 74.5848L160.717 74.5874L150.482 74.7057C149.822 74.7133 149.281 74.1894 149.273 73.5355C149.265 72.9042 149.758 72.3825 150.386 72.3404L150.454 72.3378L160.689 72.2195ZM28.2594 72.2197C28.9194 72.2047 29.4666 72.7225 29.4818 73.3763C29.4964 74.0075 29.0096 74.5347 28.382 74.5838L28.3142 74.5872L23.1075 74.7055C22.4475 74.7205 21.9002 74.2026 21.8851 73.5489C21.8705 72.9177 22.3573 72.3905 22.9849 72.3414L23.0527 72.338L28.2594 72.2197ZM99.0101 51.6069C99.5383 51.6069 99.9664 52.031 99.9664 52.5542C99.9664 54.3368 98.5343 55.7877 96.7477 55.8399L96.6481 55.8414H87.5851C85.7524 55.8414 84.2667 54.3698 84.2667 52.5542C84.2667 52.031 84.6949 51.6069 85.223 51.6069C85.73 51.6069 86.1449 51.9978 86.1772 52.4919L86.1793 52.5542C86.1793 53.2986 86.7686 53.9064 87.5104 53.9449L87.5851 53.9468H96.6481C97.3995 53.9468 98.0131 53.363 98.0519 52.6282L98.0538 52.5542C98.0538 52.031 98.482 51.6069 99.0101 51.6069ZM83.2558 36.9091C84.8477 36.9091 86.2424 37.9324 86.7856 39.4308C86.964 39.9232 86.7058 40.4657 86.2087 40.6425C85.7316 40.8123 85.2078 40.5833 85.0087 40.1291L84.9856 40.0711C84.709 39.3083 84.0213 38.8037 83.2558 38.8037C82.4903 38.8037 81.8026 39.3083 81.5265 40.0709C81.3481 40.5633 80.8006 40.8193 80.3034 40.6426C79.8063 40.466 79.5479 39.9236 79.7263 39.4311C80.2689 37.9326 81.6637 36.9091 83.2558 36.9091ZM101.489 36.9146C103.23 36.9146 104.785 37.9008 105.409 39.3896C105.611 39.87 105.381 40.4212 104.896 40.6207C104.431 40.812 103.901 40.6109 103.68 40.1711L103.653 40.1123C103.329 39.3398 102.475 38.7982 101.489 38.7982C100.536 38.7982 99.7074 39.3032 99.3597 40.0333L99.3244 40.1123C99.1229 40.5927 98.5665 40.8203 98.0816 40.6207C97.5967 40.4212 97.3669 39.87 97.5684 39.3896C98.1928 37.9009 99.748 36.9146 101.489 36.9146ZM158.093 21.1575C158.72 21.1575 159.228 21.6658 159.228 22.293L159.228 26.8082L171.596 26.8084C172.537 26.8084 173.3 27.571 173.3 28.5116V28.8724C173.3 29.8131 172.537 30.5757 171.596 30.5757H143.058C142.117 30.5757 141.354 29.8131 141.354 28.8724V28.5116C141.354 27.571 142.117 26.8084 143.058 26.8084L155.425 26.8082L155.425 22.293C155.425 21.6658 155.934 21.1575 156.561 21.1575H158.093ZM132.372 13.9996H51.8381C50.6833 13.9996 49.7468 14.8907 49.7029 16.0008L49.7013 16.0824L49.7008 19.7677H134.508L134.509 16.0824C134.509 14.9621 133.6 14.0443 132.456 14.0012L132.372 13.9996ZM55.8307 15.6237L55.9131 15.6272C56.3734 15.6662 56.7412 16.0285 56.7829 16.4846L56.7868 16.5712L56.7833 16.6529C56.7439 17.109 56.3775 17.4728 55.9179 17.514L55.8307 17.5179L55.7482 17.5144C55.2586 17.473 54.8743 17.0666 54.8743 16.5712C54.8743 16.0475 55.3025 15.6237 55.8307 15.6237ZM52.4837 15.6237L52.5661 15.6272C53.0266 15.6662 53.3942 16.0285 53.4358 16.4846L53.4398 16.5712L53.4362 16.6529C53.3969 17.109 53.0308 17.4728 52.5709 17.514L52.4837 17.5179L52.4012 17.5144C51.9119 17.473 51.5276 17.0666 51.5276 16.5712C51.5276 16.0475 51.9558 15.6237 52.4837 15.6237ZM59.1774 15.6237L59.2598 15.6272C59.72 15.6662 60.0878 16.0285 60.1295 16.4846L60.1335 16.5712L60.13 16.6529C60.0905 17.109 59.7242 17.4728 59.2646 17.514L59.1774 17.5179L59.0949 17.5144C58.6053 17.473 58.2213 17.0666 58.2213 16.5712C58.2213 16.0475 58.6491 15.6237 59.1774 15.6237Z"
+        fill="#3B414D"
+      />
+    </svg>
+  );
+};
+
+export default GuidedCheckoutImage;