oolib 2.69.1 → 2.69.3
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.
|
@@ -26,6 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
26
26
|
exports.BannerInfo = exports.BannerAlert = void 0;
|
|
27
27
|
var react_1 = __importStar(require("react"));
|
|
28
28
|
var index_styled_1 = require("./index.styled");
|
|
29
|
+
var react_router_dom_1 = require("react-router-dom");
|
|
29
30
|
var Buttons_1 = require("../Buttons");
|
|
30
31
|
var icons_1 = require("../../icons");
|
|
31
32
|
var Typo_1 = require("../Typo");
|
|
@@ -61,12 +62,17 @@ var Banner = function (_a) {
|
|
|
61
62
|
handleRemove(e, id);
|
|
62
63
|
}, 300);
|
|
63
64
|
};
|
|
65
|
+
var genCTA = function (cta) {
|
|
66
|
+
var LinkWrapper = cta.to ? react_router_dom_1.Link : react_1.Fragment; //sometimes we wanna pass the cta as a 'to' string rather than a action function so that it is serializable
|
|
67
|
+
return (react_1.default.createElement(LinkWrapper, { to: cta.to },
|
|
68
|
+
react_1.default.createElement(Buttons_1.ButtonSecondary, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: !cta.to && cta.action, invert: color === "dark" ? true : false }, cta === null || cta === void 0 ? void 0 : cta.text)));
|
|
69
|
+
};
|
|
64
70
|
return (react_1.default.createElement(index_styled_1.BannerAnimateStyled, { key: id, ref: ContainerRef, height: height },
|
|
65
71
|
react_1.default.createElement(index_styled_1.BannerWrapperStyled, { bottomStroke: bottomStroke, color: color },
|
|
66
72
|
react_1.default.createElement(index_styled_1.BannerStyled, null,
|
|
67
73
|
showIcon && react_1.default.createElement(DisplayIcon, { color: color }),
|
|
68
74
|
react_1.default.createElement(Typo_1.SANS_2, null, msg),
|
|
69
|
-
cta && (
|
|
75
|
+
cta && genCTA(cta)),
|
|
70
76
|
hideCloseButton !== true && react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return remove(e, id); } }))));
|
|
71
77
|
};
|
|
72
78
|
var BannerAlert = function (_a) {
|
|
@@ -5,4 +5,12 @@ export function genColor({ color, theme, invert, disabled }: {
|
|
|
5
5
|
disabled: any;
|
|
6
6
|
}): any;
|
|
7
7
|
export const StyledLink: import("styled-components").StyledComponent<"a", any, {}, never>;
|
|
8
|
+
/**
|
|
9
|
+
* for use in Lexical LinkNode
|
|
10
|
+
* its different from the normal OKELink in that:
|
|
11
|
+
* 1// it is always black in color
|
|
12
|
+
* 2// it has NO disabled style
|
|
13
|
+
* 3// it has NO inverted style
|
|
14
|
+
*/
|
|
15
|
+
export const StyledOKELinkClass: any;
|
|
8
16
|
export const StyledLinkText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.StyledLinkText = exports.StyledLink = exports.genColor = void 0;
|
|
10
|
+
exports.StyledLinkText = exports.StyledOKELinkClass = exports.StyledLink = exports.genColor = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
13
|
var mixins_1 = require("../../themes/mixins");
|
|
@@ -23,7 +23,15 @@ var genColor = function (_a) {
|
|
|
23
23
|
: (0, utilsOolib_1.getPrimaryColorText)(theme === null || theme === void 0 ? void 0 : theme.colors);
|
|
24
24
|
};
|
|
25
25
|
exports.genColor = genColor;
|
|
26
|
-
exports.StyledLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n \n cursor: ", ";\n display: inline-flex;\n gap: 0.7rem;\n align-items: center;\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n position: relative;\n color: ", ";\n\n &::after{\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: ", ";\n height: ", ";\n pointer-events: ", ";\n ", ";\n background-color: ", ";\n }\n\n &:hover{\n color: ", ";\n &::after{ width: ", "; }\n }\n"], ["\n \n cursor: ", ";\n display: inline-flex;\n gap: 0.7rem;\n align-items: center;\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n position: relative;\n color: ", ";\n\n &::after{\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: ", ";\n height: ", ";\n pointer-events: ", ";\n ", ";\n background-color: ", ";\n }\n\n &:hover{\n color: ", ";\n &::after{ width: ", "; }\n }\n"
|
|
26
|
+
exports.StyledLink = styled_components_1.default.a(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n \n cursor: ", ";\n display: inline-flex;\n gap: 0.7rem;\n align-items: center;\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n position: relative;\n color: ", ";\n\n &::after{\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: ", ";\n height: ", ";\n pointer-events: ", ";\n ", ";\n background-color: ", ";\n }\n\n &:hover{\n color: ", ";\n &::after{ width: ", "; }\n }\n"], ["\n \n cursor: ", ";\n display: inline-flex;\n gap: 0.7rem;\n align-items: center;\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n position: relative;\n color: ", ";\n\n &::after{\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: ", ";\n height: ", ";\n pointer-events: ", ";\n ", ";\n background-color: ", ";\n }\n\n &:hover{\n color: ", ";\n &::after{ width: ", "; }\n }\n"
|
|
27
|
+
/**
|
|
28
|
+
* for use in Lexical LinkNode
|
|
29
|
+
* its different from the normal OKELink in that:
|
|
30
|
+
* 1// it is always black in color
|
|
31
|
+
* 2// it has NO disabled style
|
|
32
|
+
* 3// it has NO inverted style
|
|
33
|
+
*/
|
|
34
|
+
])), function (_a) {
|
|
27
35
|
var disabled = _a.disabled;
|
|
28
36
|
return !disabled ? 'pointer' : 'not-allowed';
|
|
29
37
|
}, exports.genColor, function (_a) {
|
|
@@ -39,5 +47,13 @@ exports.StyledLink = styled_components_1.default.a(templateObject_1 || (template
|
|
|
39
47
|
var invertUnderline = _a.invertUnderline;
|
|
40
48
|
return invertUnderline ? '100%' : 0;
|
|
41
49
|
});
|
|
42
|
-
|
|
43
|
-
|
|
50
|
+
/**
|
|
51
|
+
* for use in Lexical LinkNode
|
|
52
|
+
* its different from the normal OKELink in that:
|
|
53
|
+
* 1// it is always black in color
|
|
54
|
+
* 2// it has NO disabled style
|
|
55
|
+
* 3// it has NO inverted style
|
|
56
|
+
*/
|
|
57
|
+
exports.StyledOKELinkClass = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n .OKELink{\n cursor: pointer;\n display: inline-flex;\n gap: 0.7rem;\n align-items: center;\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n position: relative;\n color: ", ";\n\n &::after{\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n pointer-events: unset;\n ", ";\n background-color: ", ";\n }\n\n &:hover{\n color: ", ";\n &::after{ width: 0 }\n }\n\n &.-disabled-{\n cursor: 'not-allowed';\n &::after{\n height: 0;\n pointer-events: 'none';\n }\n }\n\n &.-invertUnderline-{\n &::after{\n width: 0\n }\n\n &:hover{\n &::after{\n width: 100%;\n }\n }\n }\n\n }\n"], ["\n .OKELink{\n cursor: pointer;\n display: inline-flex;\n gap: 0.7rem;\n align-items: center;\n max-width: calc(100vw - 4rem); //the margin on mobile is 2rem each on both sides \n text-decoration: none;\n position: relative;\n color: ", ";\n\n &::after{\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 1px;\n pointer-events: unset;\n ", ";\n background-color: ", ";\n }\n\n &:hover{\n color: ", ";\n &::after{ width: 0 }\n }\n\n &.-disabled-{\n cursor: 'not-allowed';\n &::after{\n height: 0;\n pointer-events: 'none';\n }\n }\n\n &.-invertUnderline-{\n &::after{\n width: 0\n }\n\n &:hover{\n &::after{\n width: 100%;\n }\n }\n }\n\n }\n"])), themes_1.colors.black, (0, mixins_1.transition)('width'), themes_1.colors.black, themes_1.colors.black);
|
|
58
|
+
exports.StyledLinkText = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n white-space: nowrap;\n /** might need some ellipsis stuff here. but it doesnt work with inline-flex. which is on StyledLink */ \n"], ["\n white-space: nowrap;\n /** might need some ellipsis stuff here. but it doesnt work with inline-flex. which is on StyledLink */ \n"])));
|
|
59
|
+
var templateObject_1, templateObject_2, templateObject_3;
|