oolib 2.8.4 → 2.9.2
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/BlockLabel/index.js +19 -20
- package/dist/components/Tags/index.d.ts +8 -8
- package/dist/components/Tags/index.js +31 -18
- package/dist/components/Tags/index.styled.d.ts +1 -1
- package/dist/components/Tags/index.styled.js +59 -29
- package/dist/components/TextInputs/index.js +1 -1
- package/dist/components/Typo/index.js +3 -3
- package/dist/globalStyles/index.js +1 -1
- package/dist/icons/LangIcon.js +3 -3
- package/dist/themes/mixins/index.d.ts +1 -1
- package/dist/themes/mixins/index.js +1 -7
- package/dist/{components/utils.d.ts → utils/index.d.ts} +0 -0
- package/dist/{components/utils.js → utils/index.js} +0 -0
- package/dist/utilsOolib/index.d.ts +5 -0
- package/dist/utilsOolib/index.js +38 -0
- package/package.json +1 -1
|
@@ -16,31 +16,30 @@ var BlockLabel = function (props) {
|
|
|
16
16
|
/*
|
|
17
17
|
missing parts of this component compared to kPlabel:
|
|
18
18
|
- deployment._ShowOptionalTag configuration
|
|
19
|
-
|
|
19
|
+
|
|
20
20
|
*/
|
|
21
21
|
var label = props.label, sublabel = props.sublabel, inputOnlyLabel = props.inputOnlyLabel, invert = props.invert, isRequired = props.isRequired, readOnly = props.readOnly, className = props.className, style = props.style, error = props.error, //for storybook view purposes
|
|
22
22
|
errorMsgs = props.errorMsgs;
|
|
23
|
-
var shouldCompRender =
|
|
24
|
-
!readOnly &&
|
|
23
|
+
var shouldCompRender = label ||
|
|
24
|
+
(!readOnly &&
|
|
25
|
+
(sublabel ||
|
|
26
|
+
inputOnlyLabel ||
|
|
27
|
+
isRequired === false ||
|
|
28
|
+
(errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0));
|
|
25
29
|
var optional = readOnly ? false : isRequired === false;
|
|
26
|
-
var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return typeof er ===
|
|
30
|
+
var errText = errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.map(function (er) { return (typeof er === "object" ? er.text : er); }).join(", ");
|
|
27
31
|
//next 2 vars is for 'test link' usecase
|
|
28
32
|
var errLink = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? undefined : errorMsgs[0].link;
|
|
29
|
-
var errType = (
|
|
30
|
-
return (shouldCompRender &&
|
|
31
|
-
react_1.default.createElement(
|
|
32
|
-
react_1.default.createElement(
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
: (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ?
|
|
41
|
-
react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })
|
|
42
|
-
:
|
|
43
|
-
null)),
|
|
44
|
-
!readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel))));
|
|
33
|
+
var errType = (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) !== 1 ? "danger" : errorMsgs[0].type || "danger";
|
|
34
|
+
return (shouldCompRender && (react_1.default.createElement(index_styled_1.StyledBlockLabel, { style: style, className: className },
|
|
35
|
+
react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
|
|
36
|
+
(label || inputOnlyLabel) && (react_1.default.createElement(Typo_1.SANS_3, { invert: invert, bold: true, capitalize: true }, label || inputOnlyLabel)),
|
|
37
|
+
optional && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, '(optional)')),
|
|
38
|
+
!readOnly &&
|
|
39
|
+
(error ? (react_1.default.createElement(Typo_1.SANS_3, { color: red },
|
|
40
|
+
" ",
|
|
41
|
+
error,
|
|
42
|
+
" ")) : (errorMsgs === null || errorMsgs === void 0 ? void 0 : errorMsgs.length) > 0 ? (react_1.default.createElement(InlineAlert_1.InlineAlert, { text: errText, type: errType, link: errLink, invert: invert })) : null)),
|
|
43
|
+
!readOnly && sublabel && (react_1.default.createElement(Typo_1.SANS_3, { color: invert ? greyColor40 : greyColor80 }, sublabel)))));
|
|
45
44
|
};
|
|
46
45
|
exports.BlockLabel = BlockLabel;
|
|
@@ -1,37 +1,37 @@
|
|
|
1
|
-
export function TagDisplay({ display, style, invert, M,
|
|
1
|
+
export function TagDisplay({ display, style, invert, M, XS, variant }: {
|
|
2
2
|
display: any;
|
|
3
3
|
style: any;
|
|
4
4
|
invert: any;
|
|
5
5
|
M: any;
|
|
6
|
-
|
|
6
|
+
XS: any;
|
|
7
7
|
variant?: string;
|
|
8
8
|
}): JSX.Element;
|
|
9
|
-
export function TagClear({ id, display, value, M, invert, onClick,
|
|
9
|
+
export function TagClear({ id, display, value, M, XS, invert, onClick, variant, grey, }: {
|
|
10
10
|
id: any;
|
|
11
11
|
display: any;
|
|
12
12
|
value: any;
|
|
13
13
|
M: any;
|
|
14
|
+
XS: any;
|
|
14
15
|
invert: any;
|
|
15
16
|
onClick?: () => void;
|
|
16
|
-
theme: any;
|
|
17
17
|
variant?: string;
|
|
18
18
|
grey: any;
|
|
19
19
|
}): JSX.Element;
|
|
20
|
-
export function TagSelect({ onClick, isSelected, display, value, M,
|
|
20
|
+
export function TagSelect({ onClick, isSelected, display, value, M, XS, style, onMouseDown }: {
|
|
21
21
|
onClick: any;
|
|
22
22
|
isSelected?: boolean;
|
|
23
23
|
display: any;
|
|
24
24
|
value: any;
|
|
25
25
|
M: any;
|
|
26
|
-
|
|
26
|
+
XS: any;
|
|
27
27
|
style: any;
|
|
28
28
|
onMouseDown: any;
|
|
29
29
|
}): JSX.Element;
|
|
30
|
-
export function TagLink({ display, to, invert, M,
|
|
30
|
+
export function TagLink({ display, to, invert, M, XS, variant }: {
|
|
31
31
|
display: any;
|
|
32
32
|
to: any;
|
|
33
33
|
invert: any;
|
|
34
34
|
M: any;
|
|
35
|
-
|
|
35
|
+
XS: any;
|
|
36
36
|
variant?: string;
|
|
37
37
|
}): JSX.Element;
|
|
@@ -24,25 +24,36 @@ var react_1 = __importStar(require("react"));
|
|
|
24
24
|
var index_styled_1 = require("./index.styled");
|
|
25
25
|
var Typo_1 = require("../Typo");
|
|
26
26
|
var icons_1 = require("../../icons");
|
|
27
|
+
var getTypoComp = function (size) { return size === 'XS'
|
|
28
|
+
? function (_a) {
|
|
29
|
+
var children = _a.children;
|
|
30
|
+
return react_1.default.createElement(Typo_1.SANS_2, null, children);
|
|
31
|
+
}
|
|
32
|
+
: function (_a) {
|
|
33
|
+
var children = _a.children;
|
|
34
|
+
return react_1.default.createElement(Typo_1.SANS_3, null, children);
|
|
35
|
+
}; };
|
|
27
36
|
function TagDisplay(_a) {
|
|
28
|
-
var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M,
|
|
29
|
-
var size = M ? 'M' : 'S';
|
|
30
|
-
|
|
31
|
-
|
|
37
|
+
var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
|
|
38
|
+
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
39
|
+
var TYPO_COMP = getTypoComp(size);
|
|
40
|
+
return (react_1.default.createElement(index_styled_1.StyledTagDisplay, { variant: variant, invert: invert, size: size, style: style },
|
|
41
|
+
react_1.default.createElement(TYPO_COMP, null, display)));
|
|
32
42
|
}
|
|
33
43
|
exports.TagDisplay = TagDisplay;
|
|
34
44
|
function TagClear(_a) {
|
|
35
|
-
var id = _a.id, display = _a.display, value = _a.value, M = _a.M, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b,
|
|
45
|
+
var id = _a.id, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, invert = _a.invert, _b = _a.onClick, onClick = _b === void 0 ? function () { } : _b, _c = _a.variant, variant = _c === void 0 ? 'primary' : _c, grey = _a.grey;
|
|
36
46
|
var XIconCom = icons_1.icons['X'];
|
|
37
|
-
var size = M ? 'M' : 'S';
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
react_1.default.createElement(
|
|
41
|
-
|
|
47
|
+
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
48
|
+
var TYPO_COMP = getTypoComp(size);
|
|
49
|
+
return (react_1.default.createElement(index_styled_1.StyledTagClear, { invert: invert, size: size, grey: grey, variant: variant },
|
|
50
|
+
react_1.default.createElement(TYPO_COMP, null, display),
|
|
51
|
+
react_1.default.createElement(index_styled_1.StyledTagClearIconWrapper, { invert: invert, grey: grey, variant: variant, onClick: function () { return onClick(id, { display: display, value: value }); } },
|
|
52
|
+
react_1.default.createElement(XIconCom, { size: size === 'XS' ? '12' : '15', weight: 'bold' }))));
|
|
42
53
|
}
|
|
43
54
|
exports.TagClear = TagClear;
|
|
44
55
|
function TagSelect(_a) {
|
|
45
|
-
var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M,
|
|
56
|
+
var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, XS = _a.XS, style = _a.style, onMouseDown = _a.onMouseDown;
|
|
46
57
|
var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
|
|
47
58
|
var handleOnClick = function () {
|
|
48
59
|
setSelected(!selected);
|
|
@@ -53,16 +64,18 @@ function TagSelect(_a) {
|
|
|
53
64
|
setSelected(isSelected);
|
|
54
65
|
}
|
|
55
66
|
}, [isSelected]);
|
|
56
|
-
var size = M ? 'M' : 'S';
|
|
57
|
-
|
|
58
|
-
|
|
67
|
+
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
68
|
+
var TYPO_COMP = getTypoComp(size);
|
|
69
|
+
return (react_1.default.createElement(index_styled_1.StyledTagSelect, { onClick: onMouseDown ? function () { return null; } : handleOnClick, selected: selected, size: size, style: style, onMouseDown: onMouseDown },
|
|
70
|
+
react_1.default.createElement(TYPO_COMP, null, display)));
|
|
59
71
|
}
|
|
60
72
|
exports.TagSelect = TagSelect;
|
|
61
73
|
function TagLink(_a) {
|
|
62
|
-
var display = _a.display, to = _a.to, invert = _a.invert, M = _a.M,
|
|
63
|
-
var size = M ? 'M' : 'S';
|
|
74
|
+
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;
|
|
75
|
+
var size = M ? 'M' : XS ? 'XS' : 'S';
|
|
76
|
+
var TYPO_COMP = getTypoComp(size);
|
|
64
77
|
return (react_1.default.createElement(index_styled_1.StyledLink, { to: to },
|
|
65
|
-
react_1.default.createElement(index_styled_1.StyledTagLink, {
|
|
66
|
-
react_1.default.createElement(
|
|
78
|
+
react_1.default.createElement(index_styled_1.StyledTagLink, { variant: variant, invert: invert, size: size },
|
|
79
|
+
react_1.default.createElement(TYPO_COMP, null, display))));
|
|
67
80
|
}
|
|
68
81
|
exports.TagLink = TagLink;
|
|
@@ -23,12 +23,15 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
25
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
|
-
exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.
|
|
26
|
+
exports.StyledTagLink = exports.StyledTagSelect = exports.StyledTagClear = exports.StyledTagDisplay = exports.StyledLink = exports.StyledTagClearIconWrapper = void 0;
|
|
27
27
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
28
28
|
var colors_1 = require("../../themes/colors");
|
|
29
29
|
var react_router_dom_1 = require("react-router-dom");
|
|
30
|
-
var
|
|
30
|
+
var mixins_1 = require("../../themes/mixins");
|
|
31
|
+
var utilsOolib_1 = require("../../utilsOolib");
|
|
32
|
+
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;
|
|
31
33
|
var SIZES = {
|
|
34
|
+
XS: '2rem',
|
|
32
35
|
S: "3rem",
|
|
33
36
|
M: "4rem",
|
|
34
37
|
};
|
|
@@ -36,53 +39,80 @@ var commonStyle = function (_a) {
|
|
|
36
39
|
var size = _a.size;
|
|
37
40
|
return "\n padding: 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");
|
|
38
41
|
};
|
|
39
|
-
var
|
|
42
|
+
var blueHover = function (_a) {
|
|
43
|
+
var invert = _a.invert, colors = _a.colors;
|
|
44
|
+
return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\t\t\n\t}\n"], ["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\t\t\n\t}\n"])), invert
|
|
45
|
+
? (0, utilsOolib_1.getPrimaryColor10)(colors)
|
|
46
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors), invert
|
|
47
|
+
? greyColor100
|
|
48
|
+
: (0, utilsOolib_1.getPrimaryColorText)(colors));
|
|
49
|
+
};
|
|
50
|
+
var greyHover = function (_a) {
|
|
51
|
+
var invert = _a.invert;
|
|
52
|
+
return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t}\n"], ["\n\t&:hover {\n\t\tbackground-color: ", ";\n\t}\n"])), invert
|
|
53
|
+
? greyColor80
|
|
54
|
+
: greyColor10);
|
|
55
|
+
};
|
|
56
|
+
var StyledTagDisplay = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), function (_a) {
|
|
40
57
|
var size = _a.size;
|
|
41
58
|
return commonStyle({ size: size });
|
|
42
59
|
}, function (_a) {
|
|
43
|
-
var variant = _a.variant, invert = _a.invert;
|
|
44
|
-
return variant ===
|
|
45
|
-
|
|
60
|
+
var variant = _a.variant, invert = _a.invert, size = _a.size;
|
|
61
|
+
return variant === "primary"
|
|
62
|
+
? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor40) : //secondary
|
|
63
|
+
(0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __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 ? greyColor15 : greyColor80, !invert ? greyColor80 : greyColor15);
|
|
46
64
|
});
|
|
47
65
|
exports.StyledTagDisplay = StyledTagDisplay;
|
|
48
|
-
var StyledTagClear = styled_components_1.default.div(
|
|
66
|
+
var StyledTagClear = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __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) {
|
|
49
67
|
var size = _a.size;
|
|
50
68
|
return commonStyle({ size: size });
|
|
51
69
|
}, function (_a) {
|
|
52
|
-
var variant = _a.variant, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
53
|
-
if (variant ===
|
|
54
|
-
return grey
|
|
70
|
+
var variant = _a.variant, size = _a.size, invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
71
|
+
if (variant === "primary") {
|
|
72
|
+
return grey
|
|
73
|
+
? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __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_7 || (templateObject_7 = __makeTemplateObject(["\n background-color: ", ";\n color: ", ";\n "], ["\n background-color: ", ";\n color: ", ";\n "])), !invert
|
|
74
|
+
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
75
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100);
|
|
55
76
|
}
|
|
56
|
-
else {
|
|
57
|
-
|
|
77
|
+
else {
|
|
78
|
+
// secondry
|
|
79
|
+
return grey
|
|
80
|
+
? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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
|
|
81
|
+
? (0, utilsOolib_1.getPrimaryColorText)(colors)
|
|
82
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors));
|
|
58
83
|
}
|
|
59
84
|
}, function (_a) {
|
|
60
85
|
var variant = _a.variant;
|
|
61
|
-
return variant === "ghost" && (0, styled_components_1.css)(
|
|
86
|
+
return variant === "ghost" && (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background: none;\n\t border: none;\n "], ["\n background: none;\n\t border: none;\n "])));
|
|
62
87
|
});
|
|
63
88
|
exports.StyledTagClear = StyledTagClear;
|
|
64
|
-
var
|
|
89
|
+
var StyledTagClearIconWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __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.multiTransition)('color', 'background-color'), function (_a) {
|
|
90
|
+
var invert = _a.invert, grey = _a.grey, colors = _a.theme.colors;
|
|
91
|
+
return grey
|
|
92
|
+
? greyHover({ invert: invert, colors: colors })
|
|
93
|
+
: blueHover({ invert: invert, colors: colors });
|
|
94
|
+
});
|
|
95
|
+
exports.StyledTagClearIconWrapper = StyledTagClearIconWrapper;
|
|
96
|
+
var StyledTagSelect = styled_components_1.default.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n ", "\n\n\t", "\n \n"], ["\n ", "\n ", "\n\n\t", "\n \n"])), function (_a) {
|
|
65
97
|
var size = _a.size;
|
|
66
98
|
return commonStyle({ size: size });
|
|
67
|
-
}, function (_a) {
|
|
68
|
-
var selected = _a.selected, colors = _a.theme.colors;
|
|
69
|
-
return "\n border:
|
|
99
|
+
}, (0, mixins_1.multiTransition)("background-color"), function (_a) {
|
|
100
|
+
var selected = _a.selected, size = _a.size, colors = _a.theme.colors;
|
|
101
|
+
return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "], ["\n border: ", " solid ", ";\n cursor: pointer;\n background-color: ", ";\n\tcolor: ", ";\n\t\t", "\n "])), size === "XS" ? "1px" : "2px", (0, utilsOolib_1.getPrimaryColor100)(colors), selected ? (0, utilsOolib_1.getPrimaryColor100)(colors) : null, !selected ? (0, utilsOolib_1.getPrimaryColorText)(colors) : white, !selected && (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"], ["&:hover {\n\t\tbackground-color: ", ";\n\t\tcolor: ", ";\n\t\t\t\n\t\t}"])), (0, utilsOolib_1.getPrimaryColor40)(colors), (0, utilsOolib_1.getPrimaryColorText)(colors)));
|
|
70
102
|
});
|
|
71
103
|
exports.StyledTagSelect = StyledTagSelect;
|
|
72
|
-
var StyledTagLink = styled_components_1.default.div(
|
|
104
|
+
var StyledTagLink = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n \t", "\n\t", ";\n ", "\n"], ["\n \t", "\n\t", ";\n ", "\n"])), function (_a) {
|
|
73
105
|
var size = _a.size;
|
|
74
106
|
return commonStyle({ size: size });
|
|
75
|
-
}, function (_a) {
|
|
76
|
-
var variant = _a.variant, invert = _a.invert, colors = _a.theme.colors;
|
|
77
|
-
return variant ===
|
|
78
|
-
|
|
107
|
+
}, (0, mixins_1.multiTransition)("background-color", "color"), function (_a) {
|
|
108
|
+
var variant = _a.variant, invert = _a.invert, size = _a.size, colors = _a.theme.colors;
|
|
109
|
+
return variant === "primary"
|
|
110
|
+
? (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __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
|
|
111
|
+
? (0, utilsOolib_1.getPrimaryColor100)(colors)
|
|
112
|
+
: (0, utilsOolib_1.getPrimaryColor40)(colors), !invert ? white : greyColor100, blueHover({ invert: invert, colors: colors })) : // secondary
|
|
113
|
+
(0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __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 }));
|
|
79
114
|
});
|
|
80
115
|
exports.StyledTagLink = StyledTagLink;
|
|
81
|
-
var
|
|
82
|
-
var invert = _a.invert, grey = _a.grey;
|
|
83
|
-
return grey && (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["color: ", ";"], ["color: ", ";"])), !invert ? greyColor100 : white);
|
|
84
|
-
});
|
|
85
|
-
exports.StyledIconWrapper = StyledIconWrapper;
|
|
86
|
-
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n text-decoration: none;\n"], ["\n text-decoration: none;\n"])));
|
|
116
|
+
var StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n text-decoration: none;\n"], ["\n text-decoration: none;\n"])));
|
|
87
117
|
exports.StyledLink = StyledLink;
|
|
88
|
-
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;
|
|
118
|
+
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;
|
|
@@ -74,7 +74,7 @@ var Loader_1 = require("../Loader");
|
|
|
74
74
|
var BlockLabel_1 = require("../BlockLabel");
|
|
75
75
|
var Typo_1 = require("../Typo");
|
|
76
76
|
var Buttons_1 = require("../Buttons");
|
|
77
|
-
var utils_1 = require("
|
|
77
|
+
var utils_1 = require("../../utils");
|
|
78
78
|
var DisplayIcon = function (_a) {
|
|
79
79
|
var icon = _a.icon, onClick = _a.onClick, size = _a.size;
|
|
80
80
|
var IconComp = icons_1.icons[icon];
|
|
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
exports.TypoClassesProvider = exports.BLOCKQUOTE = exports.SERIF_9_10 = exports.SERIF_7_8 = exports.SERIF_5_6 = exports.SERIF_4_5 = exports.SERIF_3_4 = exports.SERIF_3 = exports.SANS_7_8 = exports.SANS_5_6 = exports.SANS_4_5 = exports.SANS_4 = exports.SANS_3 = exports.SANS_2 = exports.SANS_0 = exports.LABEL = void 0;
|
|
18
18
|
var react_1 = __importDefault(require("react"));
|
|
19
19
|
var index_styled_1 = require("./index.styled");
|
|
20
|
-
var
|
|
20
|
+
var utilsOolib_1 = require("../../utilsOolib");
|
|
21
21
|
var genFontStylingProps = function (props) {
|
|
22
22
|
var _a;
|
|
23
23
|
var fontSetting = {
|
|
@@ -47,10 +47,10 @@ var genFontStylingProps = function (props) {
|
|
|
47
47
|
};
|
|
48
48
|
var GenComp = function (_a) {
|
|
49
49
|
var props = _a.props, Comp = _a.Comp;
|
|
50
|
-
var
|
|
50
|
+
var localize = (0, utilsOolib_1.useLocale)();
|
|
51
51
|
var invert = props.invert, value = props.value, suffix = props.suffix, color = props.color, children = props.children, theme = props.theme, style = props.style, className = props.className;
|
|
52
52
|
var displayText = children || value;
|
|
53
|
-
var localText =
|
|
53
|
+
var localText = localize(displayText);
|
|
54
54
|
return (react_1.default.createElement(Comp, __assign({}, genFontStylingProps(props), { color: color, theme: theme, className: className, style: style, invert: invert }),
|
|
55
55
|
localText,
|
|
56
56
|
suffix || ''));
|
|
@@ -10,5 +10,5 @@ var themes_1 = require("../themes");
|
|
|
10
10
|
var normalize_1 = require("./normalize");
|
|
11
11
|
require("../assets/fonts/style.css");
|
|
12
12
|
var greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, greyColor80 = themes_1.colors.greyColor80, greyColor100 = themes_1.colors.greyColor100;
|
|
13
|
-
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
|
|
13
|
+
exports.GlobalStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"], ["\n\n//some normalize code picked off the internet\n", "\n\nhtml{\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-rendering: optimizeLegibility;\n font-size:10px;\n color: ", ";\n scroll-behavior: smooth;\n}\n\n::-webkit-scrollbar { width: 1rem}\n::-webkit-scrollbar-track {background-color: ", ";}\n::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 0.5rem;\n}\n::-webkit-scrollbar-thumb:hover {background-color: ", ";}\n\n\nbutton:focus, input:focus, textarea:focus{\n outline: none;\n}\n\n// be sure never to add 'span' to this list.. ( it will mess with base typo styling on RTE )\nh1, h2, h3, h4, h5, h6,\n.h1, .h2, .h3, .h4, .h5, .h6, .p,\np, ul, li, input, label, button {\n ", "\n font-weight: normal;\n font-style: normal;\n margin: 0;\n padding: 0;\n}\n\nul, ol { padding-left: 2rem; margin-bottom: 0;}\nli { list-style: none }\n\n.sansSerif{\n ", "\n}\n\n.serif{\n ", "\n}\n\n.medium {\n font-weight: 500;\n}\n\n.semibold {\n font-weight: 600;\n}\n\n.bold{\n font-weight:bold;\n}\n\n.italic{\n font-style: italic;\n}\n\nb, strong {\n font-weight: bold;\n}\n\n \n"])), normalize_1.normalize, greyColor100, greyColor15, greyColor40, greyColor80, themes_1.typo.sansSerif, themes_1.typo.sansSerif, themes_1.typo.serif);
|
|
14
14
|
var templateObject_1;
|
package/dist/icons/LangIcon.js
CHANGED
|
@@ -8,11 +8,11 @@ var themes_1 = require("../themes");
|
|
|
8
8
|
var LanguageIcon = function (_a) {
|
|
9
9
|
var _b = _a.color, color = _b === void 0 ? themes_1.colors.greyColor100 : _b, _c = _a.size, size = _c === void 0 ? 20 : _c;
|
|
10
10
|
return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
|
|
11
|
-
react_1.default.createElement("path", { d: "M7.96924 10.0556C9.06013 10.0556 9.94447 9.25962 9.94447 8.27778C9.94447 7.29594 9.06013 6.5 7.96924 6.5C7.32302 6.5 6.74928 6.77931 6.38892 7.21111", stroke: color,
|
|
12
|
-
react_1.default.createElement("path", { d: "M7.82804 10.0557C8.9969 10.0557 9.94444 10.8516 9.94444 11.8334C9.94444 12.8153 8.9969 13.6112 7.82804 13.6112C6.64286 13.6112 5.78219 12.426 5.5 11.8334", stroke: color,
|
|
11
|
+
react_1.default.createElement("path", { d: "M7.96924 10.0556C9.06013 10.0556 9.94447 9.25962 9.94447 8.27778C9.94447 7.29594 9.06013 6.5 7.96924 6.5C7.32302 6.5 6.74928 6.77931 6.38892 7.21111", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
12
|
+
react_1.default.createElement("path", { d: "M7.82804 10.0557C8.9969 10.0557 9.94444 10.8516 9.94444 11.8334C9.94444 12.8153 8.9969 13.6112 7.82804 13.6112C6.64286 13.6112 5.78219 12.426 5.5 11.8334", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
|
|
13
13
|
react_1.default.createElement("path", { d: "M8.16666 9.05566C7.61438 9.05566 7.16666 9.50338 7.16666 10.0557C7.16666 10.6079 7.61438 11.0557 8.16666 11.0557V9.05566ZM11.7222 11.0557C12.2745 11.0557 12.7222 10.6079 12.7222 10.0557C12.7222 9.50338 12.2745 9.05566 11.7222 9.05566V11.0557ZM8.16666 11.0557H11.7222V9.05566H8.16666V11.0557Z", fill: color }),
|
|
14
14
|
react_1.default.createElement("path", { d: "M11.5 5.5C10.9477 5.5 10.5 5.94772 10.5 6.5C10.5 7.05228 10.9477 7.5 11.5 7.5V5.5ZM14.1667 7.5C14.719 7.5 15.1667 7.05228 15.1667 6.5C15.1667 5.94772 14.719 5.5 14.1667 5.5V7.5ZM11.5 7.5H14.1667V5.5H11.5V7.5Z", fill: color }),
|
|
15
15
|
react_1.default.createElement("path", { d: "M14 6.5C14 5.94772 13.5523 5.5 13 5.5C12.4477 5.5 12 5.94772 12 6.5L14 6.5ZM12 13.6111C12 14.1634 12.4477 14.6111 13 14.6111C13.5523 14.6111 14 14.1634 14 13.6111L12 13.6111ZM12 6.5L12 13.6111L14 13.6111L14 6.5L12 6.5Z", fill: color }),
|
|
16
|
-
react_1.default.createElement("circle", { cx: "10", cy: "10", r: "9", stroke: color,
|
|
16
|
+
react_1.default.createElement("circle", { cx: "10", cy: "10", r: "9", stroke: color, strokeWidth: "2" })));
|
|
17
17
|
};
|
|
18
18
|
exports.default = LanguageIcon;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export function mediaQuery(point: any):
|
|
1
|
+
export function mediaQuery(point: any): string;
|
|
2
2
|
export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 | "pass a valid breakpoint";
|
|
3
3
|
import { transition } from "./transitions";
|
|
4
4
|
import { transitionWithDuration } from "./transitions";
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
-
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
-
return cooked;
|
|
5
|
-
};
|
|
6
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
3
|
exports.isElementInViewport = exports.multiTransition = exports.transitionWithDelay = exports.transitionWithDuration = exports.transition = exports.getBreakPoint = exports.mediaQuery = void 0;
|
|
8
|
-
var styled_components_1 = require("styled-components");
|
|
9
4
|
var transitions_1 = require("./transitions");
|
|
10
5
|
Object.defineProperty(exports, "transition", { enumerable: true, get: function () { return transitions_1.transition; } });
|
|
11
6
|
Object.defineProperty(exports, "transitionWithDuration", { enumerable: true, get: function () { return transitions_1.transitionWithDuration; } });
|
|
@@ -31,7 +26,7 @@ var getBreakPoint = function (point) {
|
|
|
31
26
|
};
|
|
32
27
|
exports.getBreakPoint = getBreakPoint;
|
|
33
28
|
var mediaQuery = function (point) {
|
|
34
|
-
return
|
|
29
|
+
return "@media only screen and (min-width: ".concat(getBreakPoint(point), "px)");
|
|
35
30
|
};
|
|
36
31
|
exports.mediaQuery = mediaQuery;
|
|
37
32
|
var isElementInViewport = function (el) {
|
|
@@ -44,4 +39,3 @@ var isElementInViewport = function (el) {
|
|
|
44
39
|
rect.right <= (window.innerWidth || document.documentElement.clientWidth));
|
|
45
40
|
};
|
|
46
41
|
exports.isElementInViewport = isElementInViewport;
|
|
47
|
-
var templateObject_1;
|
|
File without changes
|
|
File without changes
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/**
|
|
3
|
+
* @note : THESE ARE NOT MEANT TO BE EXPORTED
|
|
4
|
+
*
|
|
5
|
+
* These are utility functions that make certain tasks
|
|
6
|
+
* within oolib easier
|
|
7
|
+
*/
|
|
8
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
+
exports.getPrimaryColorText = exports.getPrimaryColor100 = exports.getPrimaryColor40 = exports.getPrimaryColor10 = exports.useLocale = void 0;
|
|
10
|
+
var styled_components_1 = require("styled-components");
|
|
11
|
+
var colors_1 = require("../themes/colors");
|
|
12
|
+
var primaryColor10 = colors_1.colors.primaryColor10, primaryColor40 = colors_1.colors.primaryColor40, primaryColor100 = colors_1.colors.primaryColor100, primaryColorText = colors_1.colors.primaryColorText;
|
|
13
|
+
var useLocale = function () {
|
|
14
|
+
var currentTheme = (0, styled_components_1.useTheme)();
|
|
15
|
+
var localize = function (text) {
|
|
16
|
+
return (currentTheme === null || currentTheme === void 0 ? void 0 : currentTheme.localize)
|
|
17
|
+
? currentTheme.localize(text)
|
|
18
|
+
: text;
|
|
19
|
+
};
|
|
20
|
+
return localize;
|
|
21
|
+
};
|
|
22
|
+
exports.useLocale = useLocale;
|
|
23
|
+
var getPrimaryColor10 = function (colors) {
|
|
24
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColor10) || primaryColor10;
|
|
25
|
+
};
|
|
26
|
+
exports.getPrimaryColor10 = getPrimaryColor10;
|
|
27
|
+
var getPrimaryColor40 = function (colors) {
|
|
28
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColor40) || primaryColor40;
|
|
29
|
+
};
|
|
30
|
+
exports.getPrimaryColor40 = getPrimaryColor40;
|
|
31
|
+
var getPrimaryColor100 = function (colors) {
|
|
32
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColor100) || primaryColor100;
|
|
33
|
+
};
|
|
34
|
+
exports.getPrimaryColor100 = getPrimaryColor100;
|
|
35
|
+
var getPrimaryColorText = function (colors) {
|
|
36
|
+
return (colors === null || colors === void 0 ? void 0 : colors.primaryColorText) || primaryColorText;
|
|
37
|
+
};
|
|
38
|
+
exports.getPrimaryColorText = getPrimaryColorText;
|