oolib 2.15.1 → 2.15.4
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/ActionMenu/index.js +2 -2
- package/dist/components/ActionMenu/styled.js +19 -6
- package/dist/components/Banners/index.js +8 -1
- package/dist/components/Banners/index.styled.js +5 -3
- package/dist/components/Buttons/index.js +1 -1
- package/dist/components/Buttons/index.styled.js +1 -1
- package/dist/themes/colors.d.ts +2 -0
- package/dist/themes/colors.js +2 -0
- package/package.json +1 -1
|
@@ -56,14 +56,14 @@ var ActionMenu = function (_a) {
|
|
|
56
56
|
react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, children: buttonText, invert: invert, onClick: function (e) {
|
|
57
57
|
e.stopPropagation();
|
|
58
58
|
setShowActions(!showActions);
|
|
59
|
-
} }),
|
|
59
|
+
}, active: showActions }),
|
|
60
60
|
react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfold: showActions }, { align: align, invert: invert }), actions.map(function (action) {
|
|
61
61
|
var ActionButton = action.buttonComp || styled_1.StyledActionBtn;
|
|
62
62
|
return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
|
|
63
63
|
action.onClick && action.onClick(ev);
|
|
64
64
|
setShowActions(false);
|
|
65
65
|
}, key: action.display, invert: invert }),
|
|
66
|
-
react_1.default.createElement(Typo_1.SANS_2,
|
|
66
|
+
react_1.default.createElement(Typo_1.SANS_2, { style: { fontSize: '14px' } }, action.display)));
|
|
67
67
|
}))));
|
|
68
68
|
};
|
|
69
69
|
exports.ActionMenu = ActionMenu;
|
|
@@ -31,10 +31,11 @@ exports.StyledActionBtn = exports.StyledActionsDropMenu = exports.StyledActionMe
|
|
|
31
31
|
var styled_components_1 = __importStar(require("styled-components"));
|
|
32
32
|
var themes_1 = require("../../themes");
|
|
33
33
|
var mixins_1 = require("../../themes/mixins");
|
|
34
|
+
var utilsOolib_1 = require("../../utilsOolib");
|
|
34
35
|
var Buttons_1 = require("../Buttons");
|
|
35
|
-
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor100 = themes_1.colors.greyColor100;
|
|
36
|
+
var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100;
|
|
36
37
|
exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: max-content;\n"], ["\n position: relative;\n width: max-content;\n"])));
|
|
37
|
-
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"], ["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"])), function (_a) {
|
|
38
|
+
exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n padding: 0.6rem 0;\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"], ["\n position: absolute;\n bottom: -2px;\n z-index: 10;\n transform-origin: left top; \n transform: translateY(100%) ", ";\n ", "\n padding: 0.6rem 0;\n\n ", "\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border: 1px solid ", ";\n background-color: ", ";\n\n \n\n &::after{\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n bottom: 100%;\n\n ", "\n border: 1rem solid transparent;\n border-bottom: 1rem solid ", ";\n }\n"])), function (_a) {
|
|
38
39
|
var unfold = _a.unfold;
|
|
39
40
|
return "scaleY(".concat(Number(unfold), ")");
|
|
40
41
|
}, (0, mixins_1.transition)('transform'), function (_a) {
|
|
@@ -43,12 +44,24 @@ exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6
|
|
|
43
44
|
var unfold = _a.unfold;
|
|
44
45
|
return "scaleY(".concat(Number(unfold), ")");
|
|
45
46
|
}) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ": 0;"], ["", ": 0;"])), align);
|
|
46
|
-
}, greyColor5,
|
|
47
|
+
}, greyColor5, function (_a) {
|
|
48
|
+
var invert = _a.invert;
|
|
49
|
+
return invert ? greyColor70 : white;
|
|
50
|
+
}, function (_a) {
|
|
47
51
|
var align = _a.align;
|
|
48
52
|
return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n left: 50%;\n transform: translateX(-50%);\n "], ["\n left: 50%;\n transform: translateX(-50%);\n "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ": 1rem;"], ["", ": 1rem;"])), align);
|
|
49
|
-
},
|
|
50
|
-
|
|
53
|
+
}, function (_a) {
|
|
54
|
+
var invert = _a.invert;
|
|
55
|
+
return invert ? greyColor70 : white;
|
|
56
|
+
});
|
|
57
|
+
exports.StyledActionBtn = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n white-space: nowrap;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover{\n background-color: ", ";\n color: ", ";\n }\n"], ["\n white-space: nowrap;\n width: 100%;\n text-align: ", ";\n padding: 1rem 1.6rem;\n background-color: transparent;\n color: ", ";\n ", ";\n &:hover{\n background-color: ", ";\n color: ", ";\n }\n"])), function (_a) {
|
|
51
58
|
var align = _a.align;
|
|
52
59
|
return align === 'center' ? 'center' : 'left';
|
|
53
|
-
},
|
|
60
|
+
}, function (_a) {
|
|
61
|
+
var invert = _a.invert;
|
|
62
|
+
return invert ? white : greyColor100;
|
|
63
|
+
}, (0, mixins_1.transition)('background-color'), function (_a) {
|
|
64
|
+
var invert = _a.invert, theme = _a.theme;
|
|
65
|
+
return invert ? (0, utilsOolib_1.getPrimaryColor40)(theme.colors) : greyColor10;
|
|
66
|
+
}, greyColor100);
|
|
54
67
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -72,7 +72,14 @@ var Banner = function (_a) {
|
|
|
72
72
|
var BannerAlert = function (_a) {
|
|
73
73
|
var _b;
|
|
74
74
|
var BANNER_STATE = _a.BANNER_STATE, REMOVE_ALERT_BANNER = _a.REMOVE_ALERT_BANNER;
|
|
75
|
-
|
|
75
|
+
var _c = (0, react_1.useState)(0), top = _c[0], setTop = _c[1];
|
|
76
|
+
(0, react_1.useEffect)(function () {
|
|
77
|
+
setTimeout(function () {
|
|
78
|
+
var ele = document.getElementsByClassName("BannerInfoStickyPosition")[0];
|
|
79
|
+
setTop(ele.offsetHeight);
|
|
80
|
+
}, 100);
|
|
81
|
+
});
|
|
82
|
+
return (react_1.default.createElement(index_styled_1.BannerAlertStyled, { top: top }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.alertState) === null || _b === void 0 ? void 0 : _b.map(function (e) { return (react_1.default.createElement(Banner, { key: e.id, id: e.id, color: e.color, msg: e.msg, cta: e.cta, handleRemove: REMOVE_ALERT_BANNER, timeOut: e.timeOut, showIcon: e.showIcon })); })));
|
|
76
83
|
};
|
|
77
84
|
exports.BannerAlert = BannerAlert;
|
|
78
85
|
var BannerInfo = function (_a) {
|
|
@@ -63,6 +63,8 @@ exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 |
|
|
|
63
63
|
return (color === "dark" ? white : "");
|
|
64
64
|
}, (0, mixins_1.mediaQuery)("sm"));
|
|
65
65
|
exports.BannerStyled = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"], ["\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 1rem;\n width: 100%;\n"])));
|
|
66
|
-
exports.BannerAlertStyled = styled_components_1.default.div(
|
|
67
|
-
|
|
68
|
-
|
|
66
|
+
exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: sticky;\n z-index: 10000000;\n width: 100%;\n ", ";\n\n ", "\n"], ["\n position: sticky;\n z-index: 10000000;\n width: 100%;\n ", ";\n\n ", "\n"])), function (top) {
|
|
67
|
+
return top && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: ", "px;\n "], ["\n top: ", "px;\n "])), top);
|
|
68
|
+
}, (0, transitions_1.transition)("top"));
|
|
69
|
+
exports.BannerInfoStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: sticky;\n z-index: 10000000;\n top: 0;\n width: 100%;\n"], ["\n position: sticky;\n z-index: 10000000;\n top: 0;\n width: 100%;\n"])));
|
|
70
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -48,8 +48,8 @@ var ButtonStyledWrapper = function (_a) {
|
|
|
48
48
|
var props = _a.props, variant = _a.variant;
|
|
49
49
|
var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, S = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
|
|
50
50
|
var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
|
|
51
|
-
var size = (S && "S") || 'M';
|
|
52
51
|
var composition = (icon || iconAfter) && displayText ? 'icon+text' : !displayText && 'iconOnly';
|
|
52
|
+
var size = (S && "S") || 'M';
|
|
53
53
|
return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? 'submit' : 'button', onClick: onClick, onMouseDown: onMouseDown, composition: composition, width: width, color: color },
|
|
54
54
|
icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20 }),
|
|
55
55
|
displayText && react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, displayText),
|
|
@@ -92,7 +92,7 @@ var ButtonSecondary = (0, styled_components_2.css)(templateObject_7 || (template
|
|
|
92
92
|
var colors = _a.theme.colors;
|
|
93
93
|
return (0, utilsOolib_1.getPrimaryColorText)(colors);
|
|
94
94
|
});
|
|
95
|
-
var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n box-shadow: -4px 4px 1px\n ", "
|
|
95
|
+
var ButtonCustom = (0, styled_components_2.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n border: 2px solid\n ", ";\n box-shadow: -4px 4px 1px\n ", ";\n \n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n ", "\n &:hover {\n background-color: ", ";\n }\n"], ["\n border: 2px solid\n ", ";\n box-shadow: -4px 4px 1px\n ", ";\n \n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n ", "\n &:hover {\n background-color: ", ";\n }\n"])), function (_a) {
|
|
96
96
|
var invert = _a.invert, colors = _a.theme.colors;
|
|
97
97
|
return invert
|
|
98
98
|
? (0, utilsOolib_1.getPrimaryColor40)(colors)
|
package/dist/themes/colors.d.ts
CHANGED
|
@@ -19,6 +19,7 @@ export namespace colors {
|
|
|
19
19
|
export { black_opacity50 };
|
|
20
20
|
export { black_opacity80 };
|
|
21
21
|
export { greyColor100 };
|
|
22
|
+
export { greyColor90 };
|
|
22
23
|
export { greyColor80 };
|
|
23
24
|
export { greyColor70 };
|
|
24
25
|
export { greyColor40 };
|
|
@@ -58,6 +59,7 @@ declare const black_opacity30: "rgba(0, 0, 0, 0.3)";
|
|
|
58
59
|
declare const black_opacity50: "rgba(0, 0, 0, 0.5)";
|
|
59
60
|
declare const black_opacity80: "rgba(0, 0, 0, 0.8)";
|
|
60
61
|
declare const greyColor100: "#383838";
|
|
62
|
+
declare const greyColor90: "#4c4c4c";
|
|
61
63
|
declare const greyColor80: "#606060";
|
|
62
64
|
declare const greyColor70: "#747474";
|
|
63
65
|
declare const greyColor40: "#afafaf";
|
package/dist/themes/colors.js
CHANGED
|
@@ -27,6 +27,7 @@ var black_opacity30 = 'rgba(0, 0, 0, 0.3)';
|
|
|
27
27
|
var black_opacity05 = 'rgba(0, 0, 0, 0.05)';
|
|
28
28
|
var black_opacity50 = 'rgba(0, 0, 0, 0.5)';
|
|
29
29
|
var greyColor100 = '#383838';
|
|
30
|
+
var greyColor90 = '#4c4c4c';
|
|
30
31
|
var greyColor80 = '#606060';
|
|
31
32
|
var greyColor70 = '#747474';
|
|
32
33
|
var greyColor50 = '#9B9B9B';
|
|
@@ -60,6 +61,7 @@ exports.colors = {
|
|
|
60
61
|
black_opacity50: black_opacity50,
|
|
61
62
|
black_opacity80: black_opacity80,
|
|
62
63
|
greyColor100: greyColor100,
|
|
64
|
+
greyColor90: greyColor90,
|
|
63
65
|
greyColor80: greyColor80,
|
|
64
66
|
greyColor70: greyColor70,
|
|
65
67
|
greyColor40: greyColor40,
|