oolib 2.15.3 → 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/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;
|
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,
|