@thecb/components 7.3.2-beta.5 → 7.4.0

package/dist/src/components/atoms/form-layouts/FormInput.js

@@ -1,116 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 React, { useState, useContext } from "react";
-import styled, { ThemeContext, css } from "styled-components";
-import { FormattedInput } from "formatted-input";
-import { fallbackValues } from "./FormLayouts.theme.js";
-import { themeComponent } from "../../../util/themeUtils";
-import { createIdFromString } from "../../../util/general.js";
-import Text from "../text";
-import { Box, Cluster, Stack } from "../layouts";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { ERROR_COLOR, ROYAL_BLUE } from "../../../constants/colors";
-var InputField = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n  ", "\n  transition: background 0.3s ease;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var field = _a.field, showErrors = _a.showErrors, themeValues = _a.themeValues;
-    return (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
-        ? ERROR_COLOR
-        : themeValues.borderColor;
-}, function (_a) {
-    var $customHeight = _a.$customHeight;
-    return ($customHeight ? $customHeight : "48px");
-}, FONT_WEIGHT_REGULAR, function (_a) {
-    var themeValues = _a.themeValues;
-    return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_a) {
-    var themeValues = _a.themeValues;
-    return themeValues.color && themeValues.color;
-}, function (_a) {
-    var background = _a.background, themeValues = _a.themeValues;
-    return background &&
-        "background: ".concat(themeValues.inputBackgroundColor, " url(").concat(background, ") no-repeat right 0.5rem center;");
-}, ROYAL_BLUE, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "], ["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "])));
-}, function (_a) {
-    var $extraStyles = _a.$extraStyles;
-    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), $extraStyles);
-});
-// eslint-disable-next-line no-unused-vars
-var FormattedInputField = styled(function (_a) {
-    var showErrors = _a.showErrors, themeValues = _a.themeValues, props = __rest(_a, ["showErrors", "themeValues"]);
-    return (React.createElement(FormattedInput, __assign({}, props)));
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: ", ";\n  width: 100%;\n  padding: 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    outline: 3px solid ", ";\n    outline-offset: 2px;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var field = _a.field, showErrors = _a.showErrors, themeValues = _a.themeValues;
-    return (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
-        ? ERROR_COLOR
-        : themeValues.borderColor;
-}, function (_a) {
-    var $customHeight = _a.$customHeight;
-    return ($customHeight ? $customHeight : "48px");
-}, FONT_WEIGHT_REGULAR, function (_a) {
-    var themeValues = _a.themeValues;
-    return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_a) {
-    var themeValues = _a.themeValues;
-    return themeValues.color && themeValues.color;
-}, ROYAL_BLUE, function (_a) {
-    var disabled = _a.disabled;
-    return disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "], ["\n      color: #6e727e;\n      background-color: #f7f7f7;\n    "])));
-}, function (_a) {
-    var extraStyles = _a.extraStyles;
-    return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), extraStyles);
-});
-var FormInput = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? "text" : _b, _c = _a.labelTextWhenNoError, labelTextWhenNoError = _c === void 0 ? "" : _c, errorMessages = _a.errorMessages, _d = _a.isNum, isNum = _d === void 0 ? false : _d, _e = _a.isEmail, isEmail = _e === void 0 ? false : _e, _f = _a.helperModal, helperModal = _f === void 0 ? false : _f, field = _a.field, fieldActions = _a.fieldActions, showErrors = _a.showErrors, _g = _a.formatter, formatter = _g === void 0 ? null : _g, decorator = _a.decorator, themeValues = _a.themeValues, background = _a.background, customHeight = _a.customHeight, autocomplete = _a.autocomplete, extraStyles = _a.extraStyles, removeFromValue = _a.removeFromValue, // regex of characters to remove before setting value
-    props = __rest(_a, ["type", "labelTextWhenNoError", "errorMessages", "isNum", "isEmail", "helperModal", "field", "fieldActions", "showErrors", "formatter", "decorator", "themeValues", "background", "customHeight", "autocomplete", "extraStyles", "removeFromValue"]);
-    var _h = useState(false), showPassword = _h[0], setShowPassword = _h[1];
-    var isMobile = useContext(ThemeContext).isMobile;
-    var setValue = function (value) {
-        if (removeFromValue !== undefined) {
-            return fieldActions.set(value.replace(removeFromValue, ""));
-        }
-        return fieldActions.set(value);
-    };
-    return (React.createElement(Stack, { childGap: "0.25rem" },
-        React.createElement(Box, { padding: "0" }, helperModal ? (React.createElement(Cluster, { justify: "space-between", align: "center" },
-            React.createElement(Text, { as: "label", color: themeValues.labelColor, variant: "pS", weight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n                  font-family: Public Sans;\n                  &::first-letter {\n                    text-transform: uppercase;\n                  }", id: createIdFromString(labelTextWhenNoError) }, labelTextWhenNoError),
-            React.createElement(Text, { color: themeValues.linkColor, variant: "pS", weight: themeValues.fontWeight }, helperModal()))) : (React.createElement(Box, { padding: "0", minWidth: "100%" },
-            React.createElement(Cluster, { justify: "space-between", align: "center" },
-                React.createElement(Text, { as: "label", color: themeValues.labelColor, variant: "pS", fontWeight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n                    font-family: Public Sans;\n                    &::first-letter {\n                      text-transform: uppercase;\n                    }", id: createIdFromString(labelTextWhenNoError) }, labelTextWhenNoError),
-                type === "password" && (React.createElement(Text, { variant: "pS", color: themeValues.linkColor, weight: themeValues.fontWeight, hoverStyles: themeValues.hoverFocusStyles, extraStyles: "cursor: pointer; &:focus { outline-offset: -2px; }", onClick: function () { return setShowPassword(!showPassword); }, "aria-label": "Show password", tabIndex: "0", onKeyPress: function (e) {
-                        return e.key === "Enter" && setShowPassword(!showPassword);
-                    } }, showPassword ? "Hide" : "Show")),
-                isMobile && decorator && (React.createElement(Box, { padding: "0 0 0 auto" }, decorator)))))),
-        React.createElement(Box, { padding: "0" }, formatter ? (React.createElement(FormattedInputField, __assign({ "aria-labelledby": createIdFromString(labelTextWhenNoError), "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"), "aria-invalid": (field.dirty && field.hasErrors) ||
-                (field.hasErrors && showErrors), onChange: function (value) { return setValue(value); }, type: type, value: field.rawValue, pattern: isNum ? "[0-9]*" : "", inputMode: isNum ? "numeric" : isEmail ? "email" : "text", field: field, formatter: formatter, showErrors: showErrors, "data-qa": labelTextWhenNoError, themeValues: themeValues, "$customHeight": customHeight, "$extraStyles": extraStyles, autocomplete: autocomplete }, props))) : (React.createElement(InputField, __assign({ "aria-labelledby": createIdFromString(labelTextWhenNoError), "aria-describedby": createIdFromString(labelTextWhenNoError, "error message"), "aria-invalid": (field.dirty && field.hasErrors) ||
-                (field.hasErrors && showErrors), onChange: function (e) { return setValue(e.target.value); }, type: type === "password" && showPassword ? "text" : type, value: field.rawValue, pattern: isNum ? "[0-9]*" : "", inputMode: isNum ? "numeric" : isEmail ? "email" : "text", field: field, showErrors: showErrors, "data-qa": labelTextWhenNoError, themeValues: themeValues, background: background, "$customHeight": customHeight, "$extraStyles": extraStyles, autocomplete: autocomplete }, props)))),
-        React.createElement(Stack, { direction: "row", justify: "space-between" },
-            (field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (React.createElement(Text, { color: ERROR_COLOR, variant: "pXS", weight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }", id: createIdFromString(labelTextWhenNoError, "error message") }, errorMessages[field.errors[0]])) : (React.createElement(Text, { extraStyles: "height: ".concat(themeValues.lineHeight, ";") })),
-            !isMobile && decorator && React.createElement(Box, { padding: "0 0 0 auto" }, decorator))));
-};
-export default themeComponent(FormInput, "FormInput", fallbackValues, "default");
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/src/components/atoms/form-layouts/FormInputColumn.d.ts

@@ -1,7 +0,0 @@
-export default FormInputColumn;
-declare function FormInputColumn({ childGap, bottomItem, children, ...rest }: {
-    [x: string]: any;
-    childGap?: string | undefined;
-    bottomItem: any;
-    children: any;
-}): JSX.Element;

package/dist/src/components/atoms/form-layouts/FormInputColumn.js

@@ -1,29 +0,0 @@
-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 React from "react";
-import { Stack } from "../layouts";
-var FormInputColumn = function (_a) {
-    var _b = _a.childGap, childGap = _b === void 0 ? "0.5rem" : _b, bottomItem = _a.bottomItem, children = _a.children, rest = __rest(_a, ["childGap", "bottomItem", "children"]);
-    return (React.createElement(Stack, __assign({ childGap: childGap, bottomItem: bottomItem }, rest), children));
-};
-export default FormInputColumn;

package/dist/src/components/atoms/form-layouts/FormInputRow.d.ts

@@ -1,9 +0,0 @@
-export default FormInputRow;
-declare function FormInputRow({ breakpoint, childGap, largeChild, largeChildSize, children, ...rest }: {
-    [x: string]: any;
-    breakpoint?: string | undefined;
-    childGap?: string | undefined;
-    largeChild: any;
-    largeChildSize: any;
-    children: any;
-}): JSX.Element;

package/dist/src/components/atoms/form-layouts/FormInputRow.js

@@ -1,30 +0,0 @@
-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 React from "react";
-import { Box, Switcher } from "../layouts";
-var FormInputRow = function (_a) {
-    var _b = _a.breakpoint, breakpoint = _b === void 0 ? "30rem" : _b, _c = _a.childGap, childGap = _c === void 0 ? "1rem" : _c, largeChild = _a.largeChild, largeChildSize = _a.largeChildSize, children = _a.children, rest = __rest(_a, ["breakpoint", "childGap", "largeChild", "largeChildSize", "children"]);
-    return (React.createElement(Box, __assign({ padding: "0" }, rest),
-        React.createElement(Switcher, { childGap: childGap, breakpoint: breakpoint, largeChild: largeChild, largeChildSize: largeChildSize }, children)));
-};
-export default FormInputRow;

package/dist/src/components/atoms/form-layouts/FormLayouts.stories.d.ts

@@ -1,7 +0,0 @@
-export function formLayouts(): JSX.Element;
-export default story;
-declare const story: {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};

package/dist/src/components/atoms/form-layouts/FormLayouts.stories.js

@@ -1,38 +0,0 @@
-import React from "react";
-import { select, text } from "@storybook/addon-knobs";
-import FormContainer from "./FormContainer";
-import FormInput from "./FormInput";
-import FormInputColumn from "./FormInputColumn";
-import FormInputRow from "./FormInputRow";
-import page from "../../../../.storybook/page";
-var variantsLabel = "variant";
-var variants = {
-    default: "default",
-    disabled: "disabled",
-    checkout: "checkout",
-    collapsible: "collapsible"
-};
-var defaultValue = "primary";
-var groupId = "props";
-var data = {
-    test: {
-        rawValue: "Form Layouts"
-    }
-};
-export var formLayouts = function () {
-    return (React.createElement(FormContainer, { variant: select(variantsLabel, variants, defaultValue, groupId), role: "form", "aria-label": "Storybook Form" },
-        React.createElement(FormInputRow, { childGap: text("rowChildGap", "1rem", "props") },
-            React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 1", errorMessages: "Error", field: data.test })),
-        React.createElement(FormInputRow, { childGap: text("rowChildGap", "1rem", "props") },
-            React.createElement(FormInputColumn, { childGap: text("columnChildGap", "0.5rem", "props") },
-                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 2", errorMessages: "Error", field: data.test }),
-                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 3", errorMessages: "Error", field: data.test })),
-            React.createElement(FormInputColumn, { childGap: text("columnChildGap", "0.5rem", "props") },
-                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 4", errorMessages: "Error", field: data.test }),
-                React.createElement(FormInput, { labelTextWhenNoError: "Form Layouts 5", errorMessages: "Error", field: data.test })))));
-};
-var story = page({
-    title: "Components|Atoms/FormContainer",
-    Component: FormContainer
-});
-export default story;

package/dist/src/components/atoms/form-layouts/FormLayouts.theme.d.ts

@@ -1,86 +0,0 @@
-export namespace fallbackValues {
-    export { linkColor };
-    export { formBackgroundColor };
-    export { inputBackgroundColor };
-    export { color };
-    export { labelColor };
-    export { borderColor };
-    export { lineHeight };
-    export { fontSize };
-    export { errorFontSize };
-    export { fontWeight };
-    export { hoverFocusStyles };
-    export { formFooterPanel };
-}
-declare namespace linkColor {
-    const _default: string;
-    export { _default as default };
-    export const disabled: string;
-}
-declare namespace formBackgroundColor {
-    const _default_1: string;
-    export { _default_1 as default };
-    const disabled_1: string;
-    export { disabled_1 as disabled };
-    export const checkout: string;
-    export const collapsible: string;
-}
-declare namespace inputBackgroundColor {
-    const _default_2: string;
-    export { _default_2 as default };
-    const disabled_2: string;
-    export { disabled_2 as disabled };
-}
-declare namespace color {
-    const _default_3: string;
-    export { _default_3 as default };
-    const disabled_3: string;
-    export { disabled_3 as disabled };
-}
-declare namespace labelColor {
-    const _default_4: string;
-    export { _default_4 as default };
-    const disabled_4: string;
-    export { disabled_4 as disabled };
-}
-declare namespace borderColor {
-    const _default_5: string;
-    export { _default_5 as default };
-    const disabled_5: string;
-    export { disabled_5 as disabled };
-}
-declare namespace lineHeight {
-    const _default_6: string;
-    export { _default_6 as default };
-    const disabled_6: string;
-    export { disabled_6 as disabled };
-}
-declare namespace fontSize {
-    const _default_7: string;
-    export { _default_7 as default };
-    const disabled_7: string;
-    export { disabled_7 as disabled };
-}
-declare namespace errorFontSize {
-    const _default_8: string;
-    export { _default_8 as default };
-    const disabled_8: string;
-    export { disabled_8 as disabled };
-}
-declare namespace fontWeight {
-    const _default_9: string;
-    export { _default_9 as default };
-    const disabled_9: string;
-    export { disabled_9 as disabled };
-}
-declare namespace hoverFocusStyles {
-    const _default_10: string;
-    export { _default_10 as default };
-    const disabled_10: string;
-    export { disabled_10 as disabled };
-}
-declare namespace formFooterPanel {
-    const _default_11: string;
-    export { _default_11 as default };
-}
-export {};

package/dist/src/components/atoms/form-layouts/FormLayouts.theme.js

@@ -1,44 +0,0 @@
-import { CHARADE_GREY, MATISSE_BLUE, WHITE, SEASHELL_WHITE, MINESHAFT_GREY, DUSTY_GREY, ATHENS_GREY, INFO_BLUE, STORM_GREY } from "../../../constants/colors";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-var linkColor = { default: "".concat(MATISSE_BLUE), disabled: "".concat(MATISSE_BLUE) };
-var formBackgroundColor = {
-    default: "".concat(WHITE),
-    disabled: "".concat(WHITE),
-    checkout: "".concat(ATHENS_GREY),
-    collapsible: "".concat(ATHENS_GREY)
-};
-var inputBackgroundColor = {
-    default: "".concat(WHITE),
-    disabled: "".concat(SEASHELL_WHITE)
-};
-var color = { default: "".concat(MINESHAFT_GREY), disabled: "".concat(DUSTY_GREY) };
-var labelColor = { default: "".concat(CHARADE_GREY), disabled: "".concat(CHARADE_GREY) };
-var borderColor = { default: "".concat(STORM_GREY), disabled: "".concat(STORM_GREY) };
-var lineHeight = { default: "1rem", disabled: "1rem" };
-var fontSize = { default: "0.875rem", disabled: "0.875rem" };
-var errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
-var fontWeight = {
-    default: "".concat(FONT_WEIGHT_REGULAR),
-    disabled: "".concat(FONT_WEIGHT_REGULAR)
-};
-var hoverFocusStyles = {
-    default: "color: #0E506D; outline: none; text-decoration: underline;  ",
-    disabled: "color: #6D717E;"
-};
-var formFooterPanel = {
-    default: "".concat(INFO_BLUE)
-};
-export var fallbackValues = {
-    linkColor: linkColor,
-    formBackgroundColor: formBackgroundColor,
-    inputBackgroundColor: inputBackgroundColor,
-    color: color,
-    labelColor: labelColor,
-    borderColor: borderColor,
-    lineHeight: lineHeight,
-    fontSize: fontSize,
-    errorFontSize: errorFontSize,
-    fontWeight: fontWeight,
-    hoverFocusStyles: hoverFocusStyles,
-    formFooterPanel: formFooterPanel
-};

package/dist/src/components/atoms/form-layouts/index.d.ts

@@ -1,6 +0,0 @@
-import FormInput from "./FormInput";
-import FormInputRow from "./FormInputRow";
-import FormInputColumn from "./FormInputColumn";
-import FormContainer from "./FormContainer";
-import FormFooterPanel from "./FormFooterPanel";
-export { FormInput, FormInputRow, FormInputColumn, FormContainer, FormFooterPanel };

package/dist/src/components/atoms/form-layouts/index.js

@@ -1,6 +0,0 @@
-import FormInput from "./FormInput";
-import FormInputRow from "./FormInputRow";
-import FormInputColumn from "./FormInputColumn";
-import FormContainer from "./FormContainer";
-import FormFooterPanel from "./FormFooterPanel";
-export { FormInput, FormInputRow, FormInputColumn, FormContainer, FormFooterPanel };

package/dist/src/components/atoms/form-select/FormSelect.d.ts

@@ -1,5 +0,0 @@
-declare const _default: ({ variant, ...props }: {
-    [x: string]: any;
-    variant?: any;
-}) => any;
-export default _default;

package/dist/src/components/atoms/form-select/FormSelect.js

@@ -1,36 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import Dropdown from "../dropdown";
-import Text from "../text";
-import { ERROR_COLOR } from "../../../constants/colors";
-import { SelectContainer } from "./FormSelect.styled";
-import { fallbackValues } from "./FormSelect.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import { Box, Cluster, Stack } from "../layouts";
-import { createIdFromString } from "../../../util/general";
-var FormSelect = function (_a) {
-    var fieldActions = _a.fieldActions, labelTextWhenNoError = _a.labelTextWhenNoError, errorMessages = _a.errorMessages, options = _a.options, field = _a.field, showErrors = _a.showErrors, onChange = _a.onChange, dropdownMaxHeight = _a.dropdownMaxHeight, disabledValues = _a.disabledValues, disabled = _a.disabled, themeValues = _a.themeValues, _b = _a.hasTitles, hasTitles = _b === void 0 ? false : _b, autocompleteValue = _a.autocompleteValue, // browser autofill value, like country-name or address-level1 for state
-    _c = _a.smoothScroll // whether the browser should animate scroll to selected item on first open
-    , // browser autofill value, like country-name or address-level1 for state
-    smoothScroll = _c === void 0 ? true : _c // whether the browser should animate scroll to selected item on first open
-    ;
-    var _d = useState(false), open = _d[0], setOpen = _d[1];
-    var dropdownRef = useRef(null);
-    var handleClickAway = function (event) {
-        if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
-            setOpen(false);
-        }
-    };
-    useEffect(function () {
-        document.addEventListener("mousedown", handleClickAway);
-        return function () {
-            document.removeEventListener("mousedown", handleClickAway);
-        };
-    });
-    return (React.createElement(SelectContainer, { ref: dropdownRef, disabled: disabled },
-        React.createElement(Box, { padding: "0", minWidth: "100%" },
-            React.createElement(Cluster, { justify: "space-between", align: "center" },
-                React.createElement(Text, { as: "label", variant: "pS", color: themeValues.labelColor, weight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n              font-family: Public Sans;\n              &::first-letter {\n                text-transform: uppercase;\n              }", id: createIdFromString(labelTextWhenNoError) }, labelTextWhenNoError))),
-        React.createElement(Dropdown, { ariaLabelledby: createIdFromString(labelTextWhenNoError), ariaDescribedby: createIdFromString(labelTextWhenNoError, "error message"), maxHeight: dropdownMaxHeight, hasTitles: hasTitles, placeholder: options[0] ? options[0].text : "", options: options, value: field.rawValue, disabledValues: disabledValues, isOpen: open, isError: (field.hasErrors && field.dirty) || (field.hasErrors && showErrors), onSelect: onChange ? function (value) { return onChange(value); } : function (value) { return fieldActions.set(value); }, onClick: function () { return setOpen(!open); }, disabled: disabled, autocompleteValue: autocompleteValue, smoothScroll: smoothScroll }),
-        React.createElement(Stack, { direction: "row", justify: "space-between" }, (field.hasErrors && field.dirty) || (field.hasErrors && showErrors) ? (React.createElement(Text, { color: ERROR_COLOR, variant: "pXS", weight: themeValues.fontWeight, extraStyles: "word-break: break-word;\n                font-family: Public Sans;\n                &::first-letter {\n                  text-transform: uppercase;\n                }", id: createIdFromString(labelTextWhenNoError, "error message") }, errorMessages[field.errors[0]])) : (React.createElement(Text, { extraStyles: "height: ".concat(themeValues.lineHeight, ";") })))));
-};
-export default themeComponent(FormSelect, "FormSelect", fallbackValues, "default");

package/dist/src/components/atoms/form-select/FormSelect.stories.d.ts

@@ -1,7 +0,0 @@
-export default story;
-export function formSelect(): JSX.Element;
-declare const story: {
-    title: any;
-    component: any;
-    decorators: ((storyFn: any) => JSX.Element)[];
-};

package/dist/src/components/atoms/form-select/FormSelect.stories.js

@@ -1,36 +0,0 @@
-var _a;
-import React from "react";
-import { connect } from "react-redux";
-import { createFormState, required } from "redux-freeform";
-import FormSelect from "./FormSelect";
-import page from "../../../../.storybook/page";
-var _b = createFormState({
-    thing: {
-        validators: [required()]
-    }
-}), mapStateToProps = _b.mapStateToProps, mapDispatchToProps = _b.mapDispatchToProps, reducer = _b.reducer;
-var errorMessages = (_a = {},
-    _a[required.error] = "thing is required",
-    _a);
-var options = [
-    { value: "", text: "choose name" },
-    { value: "foo", text: "foo" },
-    { value: "bar", text: "bar" },
-    { value: "baz", text: "baz" },
-    { value: "disabled", text: "disabled" }
-];
-var story = page({
-    title: "Components|Atoms/FormSelect",
-    Component: FormSelect,
-    reducer: reducer,
-    mapStateToProps: mapStateToProps,
-    mapDispatchToProps: mapDispatchToProps,
-    height: "500px"
-});
-var FormWrapper = function (_a) {
-    var fields = _a.fields, actions = _a.actions;
-    return (React.createElement(FormSelect, { labelTextWhenNoError: "Form Select", errorMessages: errorMessages, options: options, field: fields.thing, fieldActions: actions.fields.thing, disabledValues: ["disabled"] }));
-};
-export default story;
-var ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export var formSelect = function () { return React.createElement(ConnectedForm, null); };

package/dist/src/components/atoms/form-select/FormSelect.styled.d.ts

@@ -1,3 +0,0 @@
-export const SelectContainer: any;
-export const SelectField: any;
-export const SelectOption: any;

package/dist/src/components/atoms/form-select/FormSelect.styled.js

@@ -1,22 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import styled from "styled-components";
-import { GHOST_GREY, ERROR_COLOR, MATISSE_BLUE } from "../../../constants/colors";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-export var SelectContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  > * + * {\n    margin-top: 0.25rem;\n  }\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: flex-start;\n  > * + * {\n    margin-top: 0.25rem;\n  }\n"])));
-export var SelectField = styled.select(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"], ["\n  border: 1px solid\n    ", ";\n  border-radius: 2px;\n  height: 48px;\n  width: 100%;\n  padding: 0.75rem 1rem;\n  min-width: 100px;\n  margin: 0;\n  box-sizing: border-box;\n  position: relative;\n  font-size: 1.1rem;\n  font-family: Public Sans;\n  line-height: 2rem;\n  font-weight: ", ";\n  background-color: ", ";\n  color: ", ";\n  box-shadow: none;\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"])), function (_a) {
-    var field = _a.field, showErrors = _a.showErrors;
-    return (field.dirty && field.hasErrors) || (field.hasErrors && showErrors)
-        ? ERROR_COLOR
-        : GHOST_GREY;
-}, FONT_WEIGHT_REGULAR, function (_a) {
-    var themeValues = _a.themeValues;
-    return themeValues.inputBackgroundColor && themeValues.inputBackgroundColor;
-}, function (_a) {
-    var themeValues = _a.themeValues;
-    return themeValues.color && themeValues.color;
-}, MATISSE_BLUE);
-export var SelectOption = styled.option(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""])));
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/components/atoms/form-select/FormSelect.theme.d.ts

@@ -1,81 +0,0 @@
-export namespace fallbackValues {
-    export { linkColor };
-    export { formBackgroundColor };
-    export { inputBackgroundColor };
-    export { color };
-    export { labelColor };
-    export { borderColor };
-    export { lineHeight };
-    export { fontSize };
-    export { errorFontSize };
-    export { fontWeight };
-    export { hoverFocusStyles };
-}
-declare namespace linkColor {
-    const _default: string;
-    export { _default as default };
-    export const disabled: string;
-}
-declare namespace formBackgroundColor {
-    const _default_1: string;
-    export { _default_1 as default };
-    const disabled_1: string;
-    export { disabled_1 as disabled };
-    export const checkout: string;
-    export const collapsible: string;
-}
-declare namespace inputBackgroundColor {
-    const _default_2: string;
-    export { _default_2 as default };
-    const disabled_2: string;
-    export { disabled_2 as disabled };
-}
-declare namespace color {
-    const _default_3: string;
-    export { _default_3 as default };
-    const disabled_3: string;
-    export { disabled_3 as disabled };
-}
-declare namespace labelColor {
-    const _default_4: string;
-    export { _default_4 as default };
-    const disabled_4: string;
-    export { disabled_4 as disabled };
-}
-declare namespace borderColor {
-    const _default_5: string;
-    export { _default_5 as default };
-    const disabled_5: string;
-    export { disabled_5 as disabled };
-}
-declare namespace lineHeight {
-    const _default_6: string;
-    export { _default_6 as default };
-    const disabled_6: string;
-    export { disabled_6 as disabled };
-}
-declare namespace fontSize {
-    const _default_7: string;
-    export { _default_7 as default };
-    const disabled_7: string;
-    export { disabled_7 as disabled };
-}
-declare namespace errorFontSize {
-    const _default_8: string;
-    export { _default_8 as default };
-    const disabled_8: string;
-    export { disabled_8 as disabled };
-}
-declare namespace fontWeight {
-    const _default_9: string;
-    export { _default_9 as default };
-    const disabled_9: string;
-    export { disabled_9 as disabled };
-}
-declare namespace hoverFocusStyles {
-    const _default_10: string;
-    export { _default_10 as default };
-    const disabled_10: string;
-    export { disabled_10 as disabled };
-}
-export {};

package/dist/src/components/atoms/form-select/FormSelect.theme.js

@@ -1,40 +0,0 @@
-import { CHARADE_GREY, MATISSE_BLUE, WHITE, SEASHELL_WHITE, MINESHAFT_GREY, DUSTY_GREY, GREY_CHATEAU, ATHENS_GREY } from "../../../constants/colors";
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-var linkColor = { default: "".concat(MATISSE_BLUE), disabled: "".concat(MATISSE_BLUE) };
-var formBackgroundColor = {
-    default: "".concat(WHITE),
-    disabled: "".concat(WHITE),
-    checkout: "".concat(ATHENS_GREY),
-    collapsible: "".concat(ATHENS_GREY)
-};
-var inputBackgroundColor = {
-    default: "".concat(WHITE),
-    disabled: "".concat(SEASHELL_WHITE)
-};
-var color = { default: "".concat(MINESHAFT_GREY), disabled: "".concat(DUSTY_GREY) };
-var labelColor = { default: "".concat(CHARADE_GREY), disabled: "".concat(CHARADE_GREY) };
-var borderColor = { default: "".concat(GREY_CHATEAU), disabled: "".concat(GREY_CHATEAU) };
-var lineHeight = { default: "1rem", disabled: "1rem" };
-var fontSize = { default: "0.875rem", disabled: "0.875rem" };
-var errorFontSize = { default: "0.75rem", disabled: "0.75rem" };
-var fontWeight = {
-    default: "".concat(FONT_WEIGHT_REGULAR),
-    disabled: "".concat(FONT_WEIGHT_REGULAR)
-};
-var hoverFocusStyles = {
-    default: "color: #0E506D; outline: none; text-decoration: underline;  ",
-    disabled: "color: #6D717E;"
-};
-export var fallbackValues = {
-    linkColor: linkColor,
-    formBackgroundColor: formBackgroundColor,
-    inputBackgroundColor: inputBackgroundColor,
-    color: color,
-    labelColor: labelColor,
-    borderColor: borderColor,
-    lineHeight: lineHeight,
-    fontSize: fontSize,
-    errorFontSize: errorFontSize,
-    fontWeight: fontWeight,
-    hoverFocusStyles: hoverFocusStyles
-};

package/dist/src/components/atoms/form-select/index.d.ts

@@ -1,2 +0,0 @@
-export default FormSelect;
-import FormSelect from "./FormSelect";