oolib 2.92.5 → 2.94.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Dropdowns/DropdownMulti/index.d.ts +2 -1
- package/dist/components/Dropdowns/DropdownMulti/index.js +2 -2
- package/dist/components/Dropdowns/DropdownSingle/index.d.ts +2 -1
- package/dist/components/Dropdowns/DropdownSingle/index.js +3 -3
- package/dist/components/Dropdowns/comps/SelectTagsInput/index.d.ts +2 -1
- package/dist/components/Dropdowns/comps/SelectTagsInput/index.js +3 -2
- package/dist/components/Dropdowns/utils/genTagComp.js +1 -1
- package/dist/components/PDFInput/index.js +1 -1
- package/dist/components/Tags/index.d.ts +2 -1
- package/dist/components/Tags/index.js +2 -2
- package/dist/components/Tags/index.styled.js +81 -28
- package/dist/themes/colors.d.ts +8 -0
- package/dist/themes/colors.js +8 -0
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions }: {
|
|
1
|
+
export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChange: parentOnChange, className, readOnly, invert, selectClassName, optionsClassName, selectStyleOverride, optionsFn, options: optionsProp, isTagsStyle, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, label, optionsModalLabel, genCreateTagButton, placeholder, genCustomSelectComp, disableSelectTextUpdate, selectConfig, lightboxHeight, lightboxStyle, optionsAnchor, popOutOfOverflowHiddenParent, S, disabled, broadcastShowOptions, tagColor }: {
|
|
2
2
|
saveValueAsString: any;
|
|
3
3
|
value: any;
|
|
4
4
|
id: any;
|
|
@@ -31,5 +31,6 @@ export function DropdownMulti({ saveValueAsString, value: valueProp, id, onChang
|
|
|
31
31
|
S: any;
|
|
32
32
|
disabled: any;
|
|
33
33
|
broadcastShowOptions: any;
|
|
34
|
+
tagColor: any;
|
|
34
35
|
}, ...args: any[]): React.JSX.Element;
|
|
35
36
|
import React from "react";
|
|
@@ -62,7 +62,7 @@ function DropdownMulti(_a) {
|
|
|
62
62
|
optionsClassName = _a.optionsClassName, //used to override font size in priimary header
|
|
63
63
|
selectStyleOverride = _a.selectStyleOverride, optionsFn = _a.optionsFn, optionsProp = _a.options, isTagsStyle = _a.isTagsStyle, isSearchable = _a.isSearchable, searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, label = _a.label, optionsModalLabel = _a.optionsModalLabel, genCreateTagButton = _a.genCreateTagButton, placeholder = _a.placeholder, genCustomSelectComp = _a.genCustomSelectComp, disableSelectTextUpdate = _a.disableSelectTextUpdate, selectConfig = _a.selectConfig,
|
|
64
64
|
//props whose existence needs to be questioned:
|
|
65
|
-
lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions;
|
|
65
|
+
lightboxHeight = _a.lightboxHeight, lightboxStyle = _a.lightboxStyle, optionsAnchor = _a.optionsAnchor, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, disabled = _a.disabled, broadcastShowOptions = _a.broadcastShowOptions, tagColor = _a.tagColor;
|
|
66
66
|
var theme = (0, styled_components_1.useTheme)();
|
|
67
67
|
var props = arguments[0];
|
|
68
68
|
var value = (0, getValue_1.getValue_MULTI)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
|
|
@@ -136,7 +136,7 @@ function DropdownMulti(_a) {
|
|
|
136
136
|
var genDisplayComp = function () {
|
|
137
137
|
if (!(value === null || value === void 0 ? void 0 : value.length) > 0)
|
|
138
138
|
return null;
|
|
139
|
-
return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme }); }))) : (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
|
|
139
|
+
return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, value.map(function (d) { return (0, genTagComp_1.genTagComp)(id, d, { display: true, invert: invert, theme: theme, color: tagColor }); }))) : (react_1.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "0.5rem" } }, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
|
|
140
140
|
react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, { value: v, invert: invert, injectComma: i !== value.length - 1, S: S }))); })));
|
|
141
141
|
};
|
|
142
142
|
var _e = (0, react_1.useState)(false), focusSelectTagsInput = _e[0], setFocusSelectTagsInput = _e[1];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, genCreateTagButton, popOutOfOverflowHiddenParent, S, disabled }: {
|
|
1
|
+
export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, selectClassName, optionsClassName, disableSelectTextUpdate, selectStyleOverride, value: valueProp, id, onChange: parentOnChange, className, style, readOnly, invert, optionsFn, options: optionsProp, saveValueAsString, isTagsStyle, selectConfig, label, optionsModalLabel, broadcastShowOptions, isSearchable, searchFieldsConfig, setFilteredOptions: setFilteredOptionsInParent, setSearchString: setSearchStringInParent, searchString: searchStringInParent, genCustomSelectComp, placeholder, genCreateTagButton, popOutOfOverflowHiddenParent, S, disabled, tagColor }: {
|
|
2
2
|
optionsAnchor: any;
|
|
3
3
|
lightboxHeight: any;
|
|
4
4
|
lightboxStyle: any;
|
|
@@ -32,5 +32,6 @@ export function DropdownSingle({ optionsAnchor, lightboxHeight, lightboxStyle, s
|
|
|
32
32
|
popOutOfOverflowHiddenParent: any;
|
|
33
33
|
S: any;
|
|
34
34
|
disabled: any;
|
|
35
|
+
tagColor: any;
|
|
35
36
|
}, ...args: any[]): React.JSX.Element;
|
|
36
37
|
import React from "react";
|
|
@@ -71,8 +71,8 @@ function DropdownSingle(_a) {
|
|
|
71
71
|
isSearchable = _a.isSearchable, //
|
|
72
72
|
searchFieldsConfig = _a.searchFieldsConfig, setFilteredOptionsInParent = _a.setFilteredOptions, setSearchStringInParent = _a.setSearchString, searchStringInParent = _a.searchString, genCustomSelectComp = _a.genCustomSelectComp, placeholder = _a.placeholder, //
|
|
73
73
|
genCreateTagButton = _a.genCreateTagButton, popOutOfOverflowHiddenParent = _a.popOutOfOverflowHiddenParent, S = _a.S, //
|
|
74
|
-
disabled = _a.disabled //
|
|
75
|
-
;
|
|
74
|
+
disabled = _a.disabled, //
|
|
75
|
+
tagColor = _a.tagColor;
|
|
76
76
|
var theme = (0, styled_components_1.useTheme)();
|
|
77
77
|
var props = arguments[0];
|
|
78
78
|
var value = (0, getValue_1.getValue_SINGLE)({ valueProp: valueProp, optionsFn: optionsFn, options: optionsProp, theme: theme, saveValueAsString: saveValueAsString });
|
|
@@ -159,7 +159,7 @@ function DropdownSingle(_a) {
|
|
|
159
159
|
var genDisplayComp = function () {
|
|
160
160
|
if (!value)
|
|
161
161
|
return null;
|
|
162
|
-
return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert, S: S })));
|
|
162
|
+
return isTagsStyle ? (react_1.default.createElement(styled_1.StyledTagsInputWrapper, null, (0, genTagComp_1.genTagComp)(id, value, { display: true, invert: invert, theme: theme, color: tagColor }))) : (react_1.default.createElement(DisplayCompSingle_1.DisplayCompSingle, __assign({}, { value: value, invert: invert, S: S })));
|
|
163
163
|
};
|
|
164
164
|
return (react_1.default.createElement("div", { className: "OKE-Dropdown ".concat(className, " OKE-Dropdown--").concat(readOnly ? "displayComp" : "inputComp", " ").concat(invert ? "-invert-" : ""), style: style },
|
|
165
165
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props) /** in other words, props. */)),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function SelectTagsInput({ invert, id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S }: {
|
|
1
|
+
export function SelectTagsInput({ invert, id, value, disabled, handleSelect, searchString, setSearchString, placeholder, setFocusSelectTagsInput, focusSelectTagsInput, single_multi, showOptions, S, tagColor, }: {
|
|
2
2
|
invert: any;
|
|
3
3
|
id: any;
|
|
4
4
|
value: any;
|
|
@@ -12,5 +12,6 @@ export function SelectTagsInput({ invert, id, value, disabled, handleSelect, sea
|
|
|
12
12
|
single_multi: any;
|
|
13
13
|
showOptions: any;
|
|
14
14
|
S: any;
|
|
15
|
+
tagColor: any;
|
|
15
16
|
}): React.JSX.Element;
|
|
16
17
|
import React from "react";
|
|
@@ -42,7 +42,7 @@ var SelectTagsInput = function (_a) {
|
|
|
42
42
|
handleSelect = _a.handleSelect, searchString = _a.searchString, setSearchString = _a.setSearchString, placeholder = _a.placeholder,
|
|
43
43
|
// minHeight, // standard | wide | actual height in rem
|
|
44
44
|
setFocusSelectTagsInput = _a.setFocusSelectTagsInput, focusSelectTagsInput = _a.focusSelectTagsInput, //force focus when after an option is selected in multiselect
|
|
45
|
-
single_multi = _a.single_multi, showOptions = _a.showOptions, S = _a.S;
|
|
45
|
+
single_multi = _a.single_multi, showOptions = _a.showOptions, S = _a.S, tagColor = _a.tagColor;
|
|
46
46
|
var inputRef = (0, react_1.useRef)(null);
|
|
47
47
|
var theme = (0, styled_components_1.useTheme)();
|
|
48
48
|
var localize = (0, utilsOolib_1.useLocale)();
|
|
@@ -100,7 +100,8 @@ var SelectTagsInput = function (_a) {
|
|
|
100
100
|
invert: invert,
|
|
101
101
|
showOptions: showOptions,
|
|
102
102
|
theme: theme,
|
|
103
|
-
S: S
|
|
103
|
+
S: S,
|
|
104
|
+
color: tagColor
|
|
104
105
|
});
|
|
105
106
|
}),
|
|
106
107
|
// isCombobox ? (
|
|
@@ -19,7 +19,7 @@ var genTagComp = function (id, d, options) {
|
|
|
19
19
|
options.handleSelect(options.single_multi === "single" ? undefined : d);
|
|
20
20
|
} })));
|
|
21
21
|
case !!link:
|
|
22
|
-
return react_1.default.createElement(Tags_1.TagLink, { XS: options.S, invert: options.invert, to: link, display: d.display });
|
|
22
|
+
return react_1.default.createElement(Tags_1.TagLink, { XS: options.S, invert: options.invert, to: link, display: d.display, color: options.color });
|
|
23
23
|
default:
|
|
24
24
|
return react_1.default.createElement(Tags_1.TagDisplay, { XS: options.S, invert: options.invert, display: d.display });
|
|
25
25
|
}
|
|
@@ -104,7 +104,7 @@ function PDFInput(_a) {
|
|
|
104
104
|
}, []);
|
|
105
105
|
return (react_1.default.createElement(react_3.Fragment, null,
|
|
106
106
|
react_1.default.createElement(BlockLabel_1.BlockLabel, __assign({}, (0, getBlockLabelProps_1.getBlockLabelProps)(props), { invert: invert })),
|
|
107
|
-
readOnly
|
|
107
|
+
(readOnly && value) ? (value === null || value === void 0 ? void 0 : value.map(function (d, i) { return (react_1.default.createElement(PDFEmbed_1.default, { key: i, filePath: d.publicUrl, fileName: d.originalFilename, fileID: d.generation })); }))
|
|
108
108
|
: !value || (value === null || value === void 0 ? void 0 : value.length) === 0 && !isLoading ? (react_1.default.createElement(UploadWrapper_1.UploadWrapper, { invert: invert },
|
|
109
109
|
react_1.default.createElement(Buttons_1.ButtonSecondary, { onClick: function () { return inputRef.current.click(); }, icon: "UploadSimple", value: "Upload Pdf", invert: invert }))) : isLoading ? (react_1.default.createElement(UploadWrapper_1.UploadWrapper, null,
|
|
110
110
|
react_1.default.createElement(ProgressBar_1.ProgressBar, { progress: uploadProgress, text: uploadProgress && uploadProgress !== 100
|
|
@@ -30,12 +30,13 @@ export function TagSelect({ onClick, isSelected, display, value, M, XS, invert,
|
|
|
30
30
|
style: any;
|
|
31
31
|
onMouseDown: any;
|
|
32
32
|
}): React.JSX.Element;
|
|
33
|
-
export function TagLink({ display, to, invert, M, XS, variant }: {
|
|
33
|
+
export function TagLink({ display, to, invert, M, XS, variant, color }: {
|
|
34
34
|
display: any;
|
|
35
35
|
to: any;
|
|
36
36
|
invert: any;
|
|
37
37
|
M: any;
|
|
38
38
|
XS: any;
|
|
39
39
|
variant?: string;
|
|
40
|
+
color: any;
|
|
40
41
|
}): React.JSX.Element;
|
|
41
42
|
import React from "react";
|
|
@@ -79,11 +79,11 @@ function TagSelect(_a) {
|
|
|
79
79
|
}
|
|
80
80
|
exports.TagSelect = TagSelect;
|
|
81
81
|
function TagLink(_a) {
|
|
82
|
-
var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
|
|
82
|
+
var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, color = _a.color;
|
|
83
83
|
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
84
84
|
var TYPO_COMP = getTypoComp(size);
|
|
85
85
|
return (react_1.default.createElement(index_styled_1.StyledLink, { to: to },
|
|
86
|
-
react_1.default.createElement(index_styled_1.StyledTagLink, { variant: variant, invert: invert, size: size },
|
|
86
|
+
react_1.default.createElement(index_styled_1.StyledTagLink, { color: color, variant: variant, invert: invert, size: size },
|
|
87
87
|
react_1.default.createElement(TYPO_COMP, null, display))));
|
|
88
88
|
}
|
|
89
89
|
exports.TagLink = TagLink;
|
|
@@ -34,7 +34,7 @@ var react_router_dom_1 = require("react-router-dom");
|
|
|
34
34
|
var mixins_1 = require("../../themes/mixins");
|
|
35
35
|
var Typo_1 = require("../Typo");
|
|
36
36
|
var utilsOolib_1 = require("../../utilsOolib");
|
|
37
|
-
var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white;
|
|
37
|
+
var greyColor100 = colors_1.colors.greyColor100, greyColor80 = colors_1.colors.greyColor80, greyColor10 = colors_1.colors.greyColor10, greyColor15 = colors_1.colors.greyColor15, greyColor40 = colors_1.colors.greyColor40, white = colors_1.colors.white, red = colors_1.colors.red, invertRed = colors_1.colors.invertRed, green = colors_1.colors.green, invertGreen = colors_1.colors.invertGreen, greyColor5 = colors_1.colors.greyColor5, hoverRed = colors_1.colors.hoverRed, hoverInvertRed = colors_1.colors.hoverInvertRed, hoverGreen = colors_1.colors.hoverGreen, invertHoverGreen = colors_1.colors.invertHoverGreen;
|
|
38
38
|
var SIZES = {
|
|
39
39
|
XS: '2rem',
|
|
40
40
|
S: "3rem",
|
|
@@ -44,67 +44,89 @@ var commonStyle = function (_a) {
|
|
|
44
44
|
var size = _a.size;
|
|
45
45
|
return "\n padding: ".concat(size === "XS" ? "0 .5rem" : "0 1rem", ";\n position: relative;\n display: inline-flex;\n column-gap: 1rem;\n align-items: center;\n border-radius:0.2rem;\n white-space: nowrap;\n\theight: ").concat(SIZES[size], ";\n max-width: 100%;\n");
|
|
46
46
|
};
|
|
47
|
+
var textColor = function (_a) {
|
|
48
|
+
var invert = _a.invert;
|
|
49
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n color: ", ";\n"], ["\n color: ", ";\n"])), invert ? greyColor100 : white);
|
|
50
|
+
};
|
|
47
51
|
var blueHover = function (_a) {
|
|
48
52
|
var invert = _a.invert, colors = _a.colors;
|
|
49
|
-
return (0, styled_components_1.css)(
|
|
53
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n @media (hover: hover){\n &:hover {\n background-color: ", ";\n color: ", ";\t\t\n }\n }\n"], ["\n @media (hover: hover){\n &:hover {\n background-color: ", ";\n color: ", ";\t\t\n }\n }\n"])), invert
|
|
50
54
|
? (0, utilsOolib_1.getPrimaryColor10)(colors)
|
|
51
55
|
: (0, utilsOolib_1.getPrimaryColor40)(colors), invert
|
|
52
56
|
? greyColor100
|
|
53
57
|
: (0, utilsOolib_1.getPrimaryColorText)(colors));
|
|
54
58
|
};
|
|
59
|
+
var redHover = function (_a) {
|
|
60
|
+
var invert = _a.invert;
|
|
61
|
+
return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n @media (hover: hover){\n &:hover {\n background-color: ", "; \n }\n }\n"], ["\n @media (hover: hover){\n &:hover {\n background-color: ", "; \n }\n }\n"])), invert
|
|
62
|
+
? hoverInvertRed
|
|
63
|
+
: hoverRed);
|
|
64
|
+
};
|
|
65
|
+
var greenHover = function (_a) {
|
|
66
|
+
var invert = _a.invert;
|
|
67
|
+
return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n @media (hover: hover){\n &:hover {\n background-color: ", ";\n }\n }\n"], ["\n @media (hover: hover){\n &:hover {\n background-color: ", ";\n }\n }\n"])), invert
|
|
68
|
+
? invertHoverGreen
|
|
69
|
+
: hoverGreen);
|
|
70
|
+
};
|
|
71
|
+
var blackHover = function (_a) {
|
|
72
|
+
var invert = _a.invert;
|
|
73
|
+
return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n @media (hover: hover){\n &:hover{\n background-color: ", ";\n }\n }\n"], ["\n @media (hover: hover){\n &:hover{\n background-color: ", ";\n }\n }\n"])), invert
|
|
74
|
+
? greyColor5
|
|
75
|
+
: greyColor80);
|
|
76
|
+
};
|
|
55
77
|
var greyHover = function (_a) {
|
|
56
78
|
var invert = _a.invert;
|
|
57
|
-
return (0, styled_components_1.css)(
|
|
79
|
+
return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n @media (hover: hover){\n &:hover {\n background-color: ", ";\n }\n }\n"], ["\n @media (hover: hover){\n &:hover {\n background-color: ", ";\n }\n }\n"])), invert
|
|
58
80
|
? greyColor80
|
|
59
81
|
: greyColor10);
|
|
60
82
|
};
|
|
61
|
-
exports.STYLED_ELLIPSIS_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(
|
|
62
|
-
exports.STYLED_ELLIPSIS_SANS_3 = (0, styled_components_1.default)(Typo_1.SANS_3)(
|
|
63
|
-
var StyledTagDisplay = styled_components_1.default.div(
|
|
83
|
+
exports.STYLED_ELLIPSIS_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins_1.ellipsis);
|
|
84
|
+
exports.STYLED_ELLIPSIS_SANS_3 = (0, styled_components_1.default)(Typo_1.SANS_3)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n ", ";\n"], ["\n ", ";\n"])), mixins_1.ellipsis);
|
|
85
|
+
var StyledTagDisplay = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), function (_a) {
|
|
64
86
|
var size = _a.size;
|
|
65
87
|
return commonStyle({ size: size });
|
|
66
88
|
}, function (_a) {
|
|
67
89
|
var variant = _a.variant, invert = _a.invert, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
|
|
68
90
|
return variant === "primary"
|
|
69
|
-
? (0, styled_components_1.css)(
|
|
91
|
+
? (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), tagColor
|
|
70
92
|
? tagColor
|
|
71
93
|
: !invert
|
|
72
94
|
? greyColor15
|
|
73
95
|
: greyColor80, textColor ? textColor : !invert ? greyColor80 : greyColor40) : //secondary
|
|
74
|
-
(0, styled_components_1.css)(
|
|
96
|
+
(0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background: none;\n border: ", " solid\n /* border: 2px solid */\n ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid\n /* border: 2px solid */\n ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", tagColor ? tagColor : !invert ? size === "XS" ? greyColor100 : greyColor15 : greyColor80, textColor ? textColor : !invert ? size === "XS" ? greyColor100 : greyColor80 : greyColor15);
|
|
75
97
|
});
|
|
76
98
|
exports.StyledTagDisplay = StyledTagDisplay;
|
|
77
|
-
var StyledTagClear = styled_components_1.default.div(
|
|
99
|
+
var StyledTagClear = styled_components_1.default.div(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n\n \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n \n\t\n\t", "\n"], ["\n\n \t", "\n\t//overrides of commonStyle\n\tpadding-right: 0;\n\tgap: 0.5rem;\n\t//--\n\n\t", "\n \n\t\n\t", "\n"])), function (_a) {
|
|
78
100
|
var size = _a.size;
|
|
79
101
|
return commonStyle({ size: size });
|
|
80
102
|
}, function (_a) {
|
|
81
103
|
var variant = _a.variant, size = _a.size, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
82
104
|
if (variant === "primary") {
|
|
83
105
|
return grey
|
|
84
|
-
? (0, styled_components_1.css)(
|
|
106
|
+
? (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert
|
|
85
107
|
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
86
108
|
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100);
|
|
87
109
|
}
|
|
88
110
|
else {
|
|
89
111
|
// secondry
|
|
90
112
|
return grey
|
|
91
|
-
? (0, styled_components_1.css)(
|
|
113
|
+
? (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15) : (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "], ["\n background: none;\n border: ", " solid\n ", ";\n color: ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert
|
|
92
114
|
? (0, utilsOolib_1.getPrimaryColorText)(colors)
|
|
93
115
|
: (0, utilsOolib_1.getPrimaryColor40)(colors));
|
|
94
116
|
}
|
|
95
117
|
}, function (_a) {
|
|
96
118
|
var variant = _a.variant;
|
|
97
|
-
return variant === "ghost" && (0, styled_components_1.css)(
|
|
119
|
+
return variant === "ghost" && (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background: none;\n\t border: none;\n "], ["\n background: none;\n\t border: none;\n "])));
|
|
98
120
|
});
|
|
99
121
|
exports.StyledTagClear = StyledTagClear;
|
|
100
|
-
var StyledTagClearIconWrapper = styled_components_1.default.div(
|
|
122
|
+
var StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"], ["\n \tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n \theight: 100%;\n\tpadding-right: 0.75rem;\n\tpadding-left: 0.75rem;\n\t", ";\n\t", "\n"])), (0, mixins_1.transition)('color', 'background-color'), function (_a) {
|
|
101
123
|
var invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
102
124
|
return grey
|
|
103
125
|
? greyHover({ invert: invert, colors: colors })
|
|
104
126
|
: blueHover({ invert: invert, colors: colors });
|
|
105
127
|
});
|
|
106
128
|
exports.StyledTagClearIconWrapper = StyledTagClearIconWrapper;
|
|
107
|
-
var StyledTagSelect = styled_components_1.default.div(
|
|
129
|
+
var StyledTagSelect = styled_components_1.default.div(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n ", "\n ", "\n\n cursor: ", ";\n border-style: solid;\n border-width: ", ";\n \n\n ", "\n \n @media (hover: hover){\n &:hover {\n ", "\n }\n }\n \n"], ["\n ", "\n ", "\n\n cursor: ", ";\n border-style: solid;\n border-width: ", ";\n \n\n ", "\n \n @media (hover: hover){\n &:hover {\n ", "\n }\n }\n \n"])), function (_a) {
|
|
108
130
|
var size = _a.size;
|
|
109
131
|
return commonStyle({ size: size });
|
|
110
132
|
}, (0, mixins_1.transition)("background-color"), function (_a) {
|
|
@@ -116,26 +138,57 @@ var StyledTagSelect = styled_components_1.default.div(templateObject_20 || (temp
|
|
|
116
138
|
}, function (_a) {
|
|
117
139
|
var disabled = _a.disabled, selected = _a.selected, invert = _a.invert, colors = _a.theme.colors;
|
|
118
140
|
if (disabled) {
|
|
119
|
-
return invert ? (0, styled_components_1.css)(
|
|
141
|
+
return invert ? (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n "], ["\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n "])), greyColor40, greyColor80, greyColor40) : (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n border-color: ", ";\n color: ", ";\n "], ["\n border-color: ", ";\n color: ", ";\n "])), greyColor15, greyColor40);
|
|
120
142
|
}
|
|
121
|
-
return invert ? (0, styled_components_1.css)(
|
|
143
|
+
return invert ? (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n "], ["\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n "])), (0, utilsOolib_1.getPrimaryColor40)(colors), selected ? (0, utilsOolib_1.getPrimaryColor40)(colors) : 'unset', selected ? greyColor100 : (0, utilsOolib_1.getPrimaryColor40)(colors)) : (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n "], ["\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n "])), (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor100)(colors) : 'unset', selected ? white : (0, utilsOolib_1.getPrimaryColorText)(colors));
|
|
122
144
|
}, function (_a) {
|
|
123
145
|
var selected = _a.selected, invert = _a.invert, disabled = _a.disabled, colors = _a.theme.colors;
|
|
124
|
-
return !selected && !disabled && (0, styled_components_1.css)(
|
|
146
|
+
return !selected && !disabled && (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), invert ? greyColor80 : (0, utilsOolib_1.getPrimaryColor40)(colors), invert ? (0, utilsOolib_1.getPrimaryColor40)(colors) : (0, utilsOolib_1.getPrimaryColorText)(colors));
|
|
125
147
|
});
|
|
126
148
|
exports.StyledTagSelect = StyledTagSelect;
|
|
127
|
-
var
|
|
149
|
+
var tagLinkStyle = function (_a) {
|
|
150
|
+
var variant = _a.variant, invert = _a.invert, color = _a.color, size = _a.size, colors = _a.theme.colors;
|
|
151
|
+
switch (true) {
|
|
152
|
+
case variant === "primary":
|
|
153
|
+
switch (color) {
|
|
154
|
+
case 'red':
|
|
155
|
+
return (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background-color: ", ";\n ", "\n ", ";\n "], ["\n background-color: ", ";\n ", "\n ", ";\n "])), !invert ? red : invertRed, textColor({ invert: invert }), redHover({ invert: invert, color: color }));
|
|
156
|
+
case 'green':
|
|
157
|
+
return (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n background-color: ", ";\n ", "\n ", ";\n "], ["\n background-color: ", ";\n ", "\n ", ";\n "])), !invert ? green : invertGreen, textColor({ invert: invert }), greenHover({ invert: invert }));
|
|
158
|
+
case 'black':
|
|
159
|
+
return (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n background-color: ", ";\n ", "\n ", "\n "], ["\n background-color: ", ";\n ", "\n ", "\n "])), !invert ? greyColor100 : greyColor15, textColor({ invert: invert }), blackHover({ invert: invert }));
|
|
160
|
+
default:
|
|
161
|
+
return (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n background-color: ", ";\n ", "\n ", ";\n "], ["\n background-color: ", ";\n ", "\n ", ";\n "])), !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), textColor({ invert: invert }), blueHover({ invert: invert }));
|
|
162
|
+
}
|
|
163
|
+
default: // variant secondary
|
|
164
|
+
return (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n background: none;\n border: ", " solid \n ", ";\n color: ", ";\n ", ";\n "], ["\n background: none;\n border: ", " solid \n ", ";\n color: ", ";\n ", ";\n "])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), blueHover({ invert: invert, colors: colors }));
|
|
165
|
+
}
|
|
166
|
+
};
|
|
167
|
+
var StyledTagLink = styled_components_1.default.div(templateObject_30 || (templateObject_30 = __makeTemplateObject(["\n \t", "\n ", "\n\t ", ";\n"], ["\n \t", "\n ", "\n\t ", ";\n"])), function (_a) {
|
|
128
168
|
var size = _a.size;
|
|
129
169
|
return commonStyle({ size: size });
|
|
130
|
-
}, (0, mixins_1.transition)("background-color", "color")
|
|
131
|
-
var variant = _a.variant, invert = _a.invert, size = _a.size, colors = _a.theme.colors;
|
|
132
|
-
return variant === "primary"
|
|
133
|
-
? (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n \t\tbackground-color: ", ";\n \t\tcolor: ", ";\n\t\t\t\t", ";\n \t"], ["\n \t\tbackground-color: ", ";\n \t\tcolor: ", ";\n\t\t\t\t", ";\n \t"])), !invert
|
|
134
|
-
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
135
|
-
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100, blueHover({ invert: invert, colors: colors })) : // secondary
|
|
136
|
-
(0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"], ["\n \t\tbackground: none;\n \t\tborder: ", " solid ", ";\n \t\tcolor: ", ";\n\t\t\t\t", "\n \t"])), size === "XS" ? "1px" : "2px", !invert ? (0, utilsOolib_1.getPrimaryColor100)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? (0, utilsOolib_1.getPrimaryColorText)(colors) : (0, utilsOolib_1.getPrimaryColor40)(colors), blueHover({ invert: invert, colors: colors }));
|
|
137
|
-
});
|
|
170
|
+
}, function (props) { return tagLinkStyle(props); }, (0, mixins_1.transition)("background-color", "color"));
|
|
138
171
|
exports.StyledTagLink = StyledTagLink;
|
|
139
|
-
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(
|
|
172
|
+
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["\n text-decoration: none;\n"], ["\n text-decoration: none;\n"])));
|
|
140
173
|
exports.StyledLink = StyledLink;
|
|
141
|
-
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, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
|
|
174
|
+
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, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31;
|
|
175
|
+
/* ${({ variant, invert, color, size, theme: { colors } }) => {
|
|
176
|
+
|
|
177
|
+
return variant === "primary"
|
|
178
|
+
? css`
|
|
179
|
+
background-color: ${ !invert
|
|
180
|
+
? getPrimaryColor100(colors)
|
|
181
|
+
: getPrimaryColor40(colors)};
|
|
182
|
+
color: ${ !invert ? white : greyColor100 };
|
|
183
|
+
${blueHover({invert, colors})};
|
|
184
|
+
`
|
|
185
|
+
: // secondary
|
|
186
|
+
css`
|
|
187
|
+
background: none;
|
|
188
|
+
border: ${
|
|
189
|
+
size === "XS" ? "1px" : "2px"} solid ${
|
|
190
|
+
!invert ? getPrimaryColor100(colors) : getPrimaryColor40(colors) };
|
|
191
|
+
color: ${!invert ? getPrimaryColorText(colors) : getPrimaryColor40(colors)};
|
|
192
|
+
${blueHover({invert, colors})}
|
|
193
|
+
`;
|
|
194
|
+
}} */
|
package/dist/themes/colors.d.ts
CHANGED
|
@@ -7,11 +7,15 @@ export namespace colors {
|
|
|
7
7
|
export { red };
|
|
8
8
|
export { lightRed };
|
|
9
9
|
export { invertRed };
|
|
10
|
+
export { hoverRed };
|
|
11
|
+
export { hoverInvertRed };
|
|
10
12
|
export { yellow };
|
|
11
13
|
export { lightYellow };
|
|
12
14
|
export { green };
|
|
13
15
|
export { lightGreen };
|
|
14
16
|
export { invertGreen };
|
|
17
|
+
export { hoverGreen };
|
|
18
|
+
export { invertHoverGreen };
|
|
15
19
|
export { blue };
|
|
16
20
|
export { lightBlue };
|
|
17
21
|
export { black };
|
|
@@ -48,11 +52,15 @@ declare const white_opacity60: "rgba(255, 255, 255, 0.6)";
|
|
|
48
52
|
declare const red: "#e60000";
|
|
49
53
|
declare const lightRed: "#FCE6E6";
|
|
50
54
|
declare const invertRed: "#FF9999";
|
|
55
|
+
declare const hoverRed: "#B70000";
|
|
56
|
+
declare const hoverInvertRed: "FBC3C3";
|
|
51
57
|
declare const yellow: "#FFCC00";
|
|
52
58
|
declare const lightYellow: "#FFFAE6";
|
|
53
59
|
declare const green: "#08A84B";
|
|
54
60
|
declare const lightGreen: "#E6F6ED";
|
|
55
61
|
declare const invertGreen: "#8AE5B0";
|
|
62
|
+
declare const hoverGreen: "#00953F";
|
|
63
|
+
declare const invertHoverGreen: "#BDF4D4";
|
|
56
64
|
declare const blue: "#33A4FF";
|
|
57
65
|
declare const lightBlue: "#EBF6FF";
|
|
58
66
|
declare const black: "#000";
|
package/dist/themes/colors.js
CHANGED
|
@@ -13,11 +13,15 @@ var white_opacity60 = 'rgba(255, 255, 255, 0.6)';
|
|
|
13
13
|
var red = '#e60000';
|
|
14
14
|
var lightRed = '#FCE6E6';
|
|
15
15
|
var invertRed = '#FF9999';
|
|
16
|
+
var hoverRed = '#B70000'; // rarely used, TagLink comp
|
|
17
|
+
var hoverInvertRed = 'FBC3C3'; // rarely used, TagLink comp
|
|
16
18
|
var yellow = '#FFCC00';
|
|
17
19
|
var lightYellow = '#FFFAE6';
|
|
18
20
|
var green = '#08A84B';
|
|
19
21
|
var lightGreen = '#E6F6ED';
|
|
20
22
|
var invertGreen = '#8AE5B0';
|
|
23
|
+
var hoverGreen = '#00953F'; // rarely used, TagLink comp
|
|
24
|
+
var invertHoverGreen = '#BDF4D4'; // rarely used, TagLink comp
|
|
21
25
|
var cyan = '#B5F2FA';
|
|
22
26
|
var lightPink = '#FFE5F2';
|
|
23
27
|
var blue = '#33A4FF';
|
|
@@ -50,11 +54,15 @@ exports.colors = {
|
|
|
50
54
|
red: red,
|
|
51
55
|
lightRed: lightRed,
|
|
52
56
|
invertRed: invertRed,
|
|
57
|
+
hoverRed: hoverRed,
|
|
58
|
+
hoverInvertRed: hoverInvertRed,
|
|
53
59
|
yellow: yellow,
|
|
54
60
|
lightYellow: lightYellow,
|
|
55
61
|
green: green,
|
|
56
62
|
lightGreen: lightGreen,
|
|
57
63
|
invertGreen: invertGreen,
|
|
64
|
+
hoverGreen: hoverGreen,
|
|
65
|
+
invertHoverGreen: invertHoverGreen,
|
|
58
66
|
blue: blue,
|
|
59
67
|
lightBlue: lightBlue,
|
|
60
68
|
black: black,
|