@thecb/components 7.5.2 → 7.6.0

package/dist/src/components/atoms/searchable-select/SearchableSelect.js

@@ -1,37 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { fallbackValues } from "./SearchableSelect.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import { Box, Stack } from "../layouts";
-import { FormInput } from "../form-layouts";
-import Checkbox from "../checkbox";
-var SELECT_ALL = "Select All";
-var SearchableSelect = function (_a) {
-    var items = _a.items, selectedItems = _a.selectedItems, allSelected = _a.allSelected, toggleSelectAllItems = _a.toggleSelectAllItems, selectItem = _a.selectItem, fields = _a.fields, actions = _a.actions, disabled = _a.disabled, themeValues = _a.themeValues;
-    var _b = useState([]), itemList = _b[0], setItemList = _b[1];
-    useEffect(function () { return setItemList(items); }, [items, selectedItems]);
-    useEffect(function () {
-        var filteredItems = items.filter(function (item) {
-            var _a, _b, _c;
-            return (_a = item === null || item === void 0 ? void 0 : item.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes((_c = (_b = fields === null || fields === void 0 ? void 0 : fields.searchTerm) === null || _b === void 0 ? void 0 : _b.rawValue) === null || _c === void 0 ? void 0 : _c.toLowerCase());
-        });
-        setItemList(filteredItems);
-    }, [fields.searchTerm.rawValue]);
-    var handleSelect = function (value) {
-        if (value.name === SELECT_ALL) {
-            allSelected ? toggleSelectAllItems(false) : toggleSelectAllItems(true);
-        }
-        else {
-            selectItem(value);
-        }
-    };
-    return (React.createElement(Box, { padding: "1rem", border: themeValues.border, extraStyles: disabled &&
-            "color: #6e727e; background-color: #f7f7f7; pointer-events: none;" },
-        React.createElement(Stack, null,
-            React.createElement(FormInput, { errorMessages: {}, field: fields.searchTerm, fieldActions: actions.fields.searchTerm, placeholder: "Search agencies", disabled: disabled }),
-            React.createElement(Box, { padding: "0.5rem 0", extraStyles: "overflow-y: scroll; height: 250px;" },
-                React.createElement(Stack, null, itemList.map(function (value) {
-                    var _a;
-                    return (React.createElement(Checkbox, { key: value.name, title: value.name, name: value.name, checked: (_a = selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(function (item) { return (item === null || item === void 0 ? void 0 : item.name) === (value === null || value === void 0 ? void 0 : value.name); })) !== null && _a !== void 0 ? _a : false, onChange: function () { return handleSelect(value); }, textExtraStyles: "margin: 0;", disabled: disabled, extraStyles: "margin: 0 0.5rem;" }));
-                }))))));
-};
-export default themeComponent(SearchableSelect, "SearchableSelect", fallbackValues, "default");

package/dist/src/components/atoms/searchable-select/SearchableSelect.theme.d.ts

@@ -1,8 +0,0 @@
-export namespace fallbackValues {
-    export { border };
-}
-declare namespace border {
-    const _default: string;
-    export { _default as default };
-}
-export {};

package/dist/src/components/atoms/searchable-select/SearchableSelect.theme.js

@@ -1,6 +0,0 @@
-var border = {
-    default: "1px solid #caced8"
-};
-export var fallbackValues = {
-    border: border
-};

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

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

package/dist/src/components/atoms/searchable-select/index.js

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

package/dist/src/components/atoms/solid-divider/SolidDivider.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/solid-divider/SolidDivider.js

@@ -1,9 +0,0 @@
-import React from "react";
-import { fallbackValues } from "./SolidDivider.theme";
-import { themeComponent } from "../../../util/themeUtils";
-import { Box } from "../layouts";
-var SolidDivider = function (_a) {
-    var themeValues = _a.themeValues;
-    return (React.createElement(Box, { padding: "0", minWidth: "100%", minHeight: "1px", borderColor: themeValues.borderColor, borderSize: themeValues.borderSize, borderWidthOverride: "0px 0px ".concat(themeValues.borderSize, " 0px") }));
-};
-export default themeComponent(SolidDivider, "SolidDivider", fallbackValues, "default");

package/dist/src/components/atoms/solid-divider/SolidDivider.stories.d.ts

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

package/dist/src/components/atoms/solid-divider/SolidDivider.stories.js

@@ -1,9 +0,0 @@
-import React from "react";
-import SolidDivider from "./SolidDivider";
-import page from "../../../../.storybook/page";
-export var solidDivider = function () { return React.createElement(SolidDivider, null); };
-var story = page({
-    title: "Components|Atoms/SolidDivider",
-    Component: SolidDivider
-});
-export default story;

package/dist/src/components/atoms/solid-divider/SolidDivider.theme.d.ts

@@ -1,13 +0,0 @@
-export namespace fallbackValues {
-    export { borderColor };
-    export { borderSize };
-}
-declare namespace borderColor {
-    const _default: string;
-    export { _default as default };
-}
-declare namespace borderSize {
-    const _default_1: string;
-    export { _default_1 as default };
-}
-export {};

package/dist/src/components/atoms/solid-divider/SolidDivider.theme.js

@@ -1,7 +0,0 @@
-import { GREY_CHATEAU } from "../../../constants/colors";
-var borderColor = { default: "".concat(GREY_CHATEAU) };
-var borderSize = { default: "1px" };
-export var fallbackValues = {
-    borderColor: borderColor,
-    borderSize: borderSize
-};

package/dist/src/components/atoms/solid-divider/index.d.ts

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

package/dist/src/components/atoms/solid-divider/index.js

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

package/dist/src/components/atoms/spinner/Spinner.d.ts

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

package/dist/src/components/atoms/spinner/Spinner.js

@@ -1,27 +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 React from "react";
-import styled from "styled-components";
-import { fallbackValues } from "./Spinner.theme";
-import { themeComponent } from "../../../util/themeUtils";
-var SpinnerSvgAnimation = styled.svg(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  animation: rotate 2s linear infinite;\n  margin: -25px 0 0 -25px;\n  width: ", "px;\n  height: ", "px;\n  & .path {\n    stroke: ", ";\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"], ["\n  animation: rotate 2s linear infinite;\n  margin: -25px 0 0 -25px;\n  width: ", "px;\n  height: ", "px;\n  & .path {\n    stroke: ", ";\n    stroke-linecap: round;\n    animation: dash 1.5s ease-in-out infinite;\n  }\n  @keyframes rotate {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  @keyframes dash {\n    0% {\n      stroke-dasharray: 1, 150;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -35;\n    }\n    100% {\n      stroke-dasharray: 90, 150;\n      stroke-dashoffset: -124;\n    }\n  }\n"])), function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var size = _a.size;
-    return size;
-}, function (_a) {
-    var color = _a.color;
-    return color;
-});
-export var SpinnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  line-height: 1;\n"])));
-var Spinner = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? "24" : _b, themeValues = _a.themeValues;
-    return (React.createElement(SpinnerContainer, null,
-        React.createElement(SpinnerSvgAnimation, { size: size, color: themeValues.color },
-            React.createElement("circle", { className: "path", cx: "50", cy: "50", r: "25", fill: "none", strokeWidth: "6" }))));
-};
-export default themeComponent(Spinner, "Spinner", fallbackValues);
-var templateObject_1, templateObject_2;

package/dist/src/components/atoms/spinner/Spinner.stories.d.ts

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

package/dist/src/components/atoms/spinner/Spinner.stories.js

@@ -1,12 +0,0 @@
-import React from "react";
-import { text } from "@storybook/addon-knobs";
-import Spinner from "./Spinner";
-import { Box } from "../layouts";
-import page from "../../../../.storybook/page";
-export var spinner = function () { return (React.createElement(Box, null,
-    React.createElement(Spinner, { size: text("size", "100", "props") }))); };
-var story = page({
-    title: "Components|Atoms/Spinner",
-    Component: Spinner
-});
-export default story;

package/dist/src/components/atoms/spinner/Spinner.theme.d.ts

@@ -1,5 +0,0 @@
-export namespace fallbackValues {
-    export { color };
-}
-declare const color: "#15749D";
-export {};

package/dist/src/components/atoms/spinner/Spinner.theme.js

@@ -1,4 +0,0 @@
-var color = "#15749D";
-export var fallbackValues = {
-    color: color
-};

package/dist/src/components/atoms/spinner/index.d.ts

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

package/dist/src/components/atoms/spinner/index.js

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

package/dist/src/components/atoms/state-province-dropdown/StateProvinceDropdown.d.ts

@@ -1,10 +0,0 @@
-export default FormStateDropdown;
-declare function FormStateDropdown({ labelTextWhenNoError, errorMessages, field, fieldActions, showErrors, countryCode, autocomplete }: {
-    labelTextWhenNoError: any;
-    errorMessages: any;
-    field: any;
-    fieldActions: any;
-    showErrors: any;
-    countryCode: any;
-    autocomplete: any;
-}): JSX.Element;

package/dist/src/components/atoms/state-province-dropdown/StateProvinceDropdown.js

@@ -1,19 +0,0 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React from "react";
-import FormSelect from "../form-select";
-import { placeHolderOption, placeHolderOptionUS, getOptions } from "./options";
-var FormStateDropdown = function (_a) {
-    var labelTextWhenNoError = _a.labelTextWhenNoError, errorMessages = _a.errorMessages, field = _a.field, fieldActions = _a.fieldActions, showErrors = _a.showErrors, countryCode = _a.countryCode, autocomplete = _a.autocomplete;
-    var placeholder = countryCode === "US" ? placeHolderOptionUS : placeHolderOption;
-    var options = __spreadArray([placeholder], getOptions(countryCode), true);
-    return (React.createElement(FormSelect, { options: options, field: field, fieldActions: fieldActions, labelTextWhenNoError: labelTextWhenNoError, errorMessages: errorMessages, showErrors: showErrors, autocompleteValue: autocomplete }));
-};
-export default FormStateDropdown;

package/dist/src/components/atoms/state-province-dropdown/StateProvinceDropdown.stories.d.ts

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

package/dist/src/components/atoms/state-province-dropdown/StateProvinceDropdown.stories.js

@@ -1,30 +0,0 @@
-var _a;
-import React from "react";
-import { connect } from "react-redux";
-import { text, boolean } from "@storybook/addon-knobs";
-import { createFormState, required } from "redux-freeform";
-import StateProvinceDropDown from ".";
-import page from "../../../../.storybook/page";
-var _b = createFormState({
-    state: {
-        validators: [required()]
-    }
-}), mapStateToProps = _b.mapStateToProps, mapDispatchToProps = _b.mapDispatchToProps, reducer = _b.reducer;
-var errorMessages = (_a = {},
-    _a[required.error] = "State is required",
-    _a);
-var story = page({
-    title: "Components|Atoms/StateProvinceDropDown",
-    Component: StateProvinceDropDown,
-    reducer: reducer,
-    mapStateToProps: mapStateToProps,
-    mapDispatchToProps: mapDispatchToProps,
-    height: "500px"
-});
-var FormWrapper = function (_a) {
-    var fields = _a.fields, actions = _a.actions, countryCode = _a.countryCode, labelTextWhenNoError = _a.labelTextWhenNoError, showErrors = _a.showErrors;
-    return (React.createElement(StateProvinceDropDown, { errorMessages: errorMessages, field: fields.state, fieldActions: actions.fields.state, countryCode: countryCode, labelTextWhenNoError: labelTextWhenNoError, showErrors: showErrors }));
-};
-export default story;
-var ConnectedForm = connect(mapStateToProps, mapDispatchToProps)(FormWrapper);
-export var stateProvinceDropDown = function () { return (React.createElement(ConnectedForm, { labelTextWhenNoError: text("State/Province", "", "props"), countryCode: text("countryCode", "US", "props"), showErrors: boolean("showErrors", false, "props") })); };

package/dist/src/components/atoms/state-province-dropdown/index.d.ts

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

package/dist/src/components/atoms/state-province-dropdown/index.js

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

package/dist/src/components/atoms/state-province-dropdown/options.d.ts

@@ -1,11 +0,0 @@
-export namespace placeHolderOptionUS {
-    const text: string;
-    const value: string;
-}
-export namespace placeHolderOption {
-    const text_1: string;
-    export { text_1 as text };
-    const value_1: string;
-    export { value_1 as value };
-}
-export function getOptions(countryCode: any): any;