oolib 2.27.6 → 2.27.8
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.
|
@@ -62,6 +62,9 @@ var getPositionStyles = function (position) {
|
|
|
62
62
|
};
|
|
63
63
|
return styles[position];
|
|
64
64
|
};
|
|
65
|
+
var BulletIcon = function () { return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column" } },
|
|
66
|
+
react_1.default.createElement("div", { style: { marginTop: "10.5px", transform: "translateY(-50%)" } },
|
|
67
|
+
react_1.default.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })))); };
|
|
65
68
|
var Hints = function (_a) {
|
|
66
69
|
var id = _a.id, hints = _a.hints, title = _a.title, subtitle = _a.subtitle;
|
|
67
70
|
//get the context state
|
|
@@ -88,9 +91,8 @@ var Hints = function (_a) {
|
|
|
88
91
|
return (react_1.default.createElement("div", null,
|
|
89
92
|
" ",
|
|
90
93
|
react_1.default.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
|
|
91
|
-
react_1.default.createElement(
|
|
92
|
-
" ",
|
|
93
|
-
react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, "Hints"))),
|
|
94
|
+
react_1.default.createElement(Typo_1.SANS_3, { semibold: true },
|
|
95
|
+
react_1.default.createElement(OKELink_1.OKELink, { icon: "LightbulbFilament", linkType: "action", onClick: function () { return setActive(id); }, iconSize: 16, invertUnderline: true }, "Hints"))),
|
|
94
96
|
active === id ? (isDesktop ? (react_1.default.createElement("div", null,
|
|
95
97
|
react_1.default.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
|
|
96
98
|
react_1.default.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
|
|
@@ -103,8 +105,7 @@ var Hints = function (_a) {
|
|
|
103
105
|
react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
|
|
104
106
|
react_1.default.createElement(styled_1.StyledLightBoxContent, null,
|
|
105
107
|
react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
|
|
106
|
-
react_1.default.createElement(
|
|
107
|
-
react_1.default.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
|
|
108
|
+
react_1.default.createElement(BulletIcon, null),
|
|
108
109
|
react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : (react_1.default.createElement(ModalLarge_1.ModalLarge, { isStorybook: true, headerStyle: "style2", id: "modal", title: title, onClose: function () { return setActive(""); } },
|
|
109
110
|
react_1.default.createElement("div", { style: { padding: ".5rem 2rem" } },
|
|
110
111
|
react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
|
|
@@ -12,7 +12,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
|
|
|
12
12
|
var themes_1 = require("../../themes");
|
|
13
13
|
var white = themes_1.colors.white, greyColor15 = themes_1.colors.greyColor15, greyColor100 = themes_1.colors.greyColor100;
|
|
14
14
|
exports.StyledHints = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
|
|
15
|
-
exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\
|
|
15
|
+
exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n z-index: 1000;\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n width: 30rem;\n height: 35rem;\n background-color: white;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"], ["\n z-index: 1000;\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n width: 30rem;\n height: 35rem;\n background-color: white;\n box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);\n border-radius: 2px;\n /* top: ", "; */\n /* right: ", "; */\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n\n display: flex;\n flex-direction: column;\n"])), white, greyColor15, function (_a) {
|
|
16
16
|
var style = _a.style;
|
|
17
17
|
return ((style === null || style === void 0 ? void 0 : style.top) ? style.top : "-1rem");
|
|
18
18
|
}, function (_a) {
|
|
@@ -34,7 +34,7 @@ exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (te
|
|
|
34
34
|
exports.StyledLightBoxHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 2px;\n gap: 1rem;\n\n padding: 1rem 1.5rem;\n"], ["\n height: 4rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-radius: 2px;\n gap: 1rem;\n\n padding: 1rem 1.5rem;\n"])));
|
|
35
35
|
exports.StyledLightBoxContent = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n padding: 0.5rem 2rem 2rem 1.5rem;\n overflow-y: auto;\n"], ["\n padding: 0.5rem 2rem 2rem 1.5rem;\n overflow-y: auto;\n"])));
|
|
36
36
|
exports.StyledLightBoxList = styled_components_1.default.ul(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n padding: 0;\n li {\n list-style-type: none;\n padding: 0.5rem 0;\n display: flex;\n gap: 1rem;\n /* align-items: center; */\n /* ::before {\n content: \"\";\n margin-top: 0.5rem;\n flex: 0 0 .5rem;\n width: .5rem;\n padding: 0%.5r;\n height: .5rem;\n background-color: ", ";\n border-radius: 50%;\n flex-shrink: 0;\n } */\n }\n"], ["\n padding: 0;\n li {\n list-style-type: none;\n padding: 0.5rem 0;\n display: flex;\n gap: 1rem;\n /* align-items: center; */\n /* ::before {\n content: \"\";\n margin-top: 0.5rem;\n flex: 0 0 .5rem;\n width: .5rem;\n padding: 0%.5r;\n height: .5rem;\n background-color: ", ";\n border-radius: 50%;\n flex-shrink: 0;\n } */\n }\n"])), greyColor100);
|
|
37
|
-
exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n\n width:10px;\n height:10px;\n border-style:solid;\n
|
|
37
|
+
exports.StyledTriangle = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index: 3;\n background-color: white;\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n transform: ", ";\n\n /* position:absolute; */\n /* top:.7rem; */\n /* left:-2rem; */\n /* transform :rotate(90deg); */\n"], ["\n position: absolute;\n\n width: 10px;\n height: 10px;\n border-style: solid;\n\n border-width: 1px;\n border-color: ", " ", " transparent transparent;\n /* transform:rotate(-45deg); */\n z-index: 3;\n background-color: white;\n\n top: ", ";\n left: ", ";\n bottom: ", ";\n right: ", ";\n transform: ", ";\n\n /* position:absolute; */\n /* top:.7rem; */\n /* left:-2rem; */\n /* transform :rotate(90deg); */\n"])), greyColor15, greyColor15, function (_a) {
|
|
38
38
|
var top = _a.style.top;
|
|
39
39
|
return top;
|
|
40
40
|
}, function (_a) {
|