oolib 2.27.4 → 2.27.5
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.
|
@@ -13,7 +13,7 @@ var toArray_1 = require("../../utils/toArray");
|
|
|
13
13
|
var Hints_1 = __importDefault(require("../Hints"));
|
|
14
14
|
var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
|
|
15
15
|
var BlockLabel = function (props) {
|
|
16
|
-
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, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id,
|
|
16
|
+
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, errorMsgs = props.errorMsgs, hints = props.hints, id = props.id, _a = props.hintsTitle, hintsTitle = _a === void 0 ? "Hints" : _a, hintsSubtitle = props.hintsSubtitle;
|
|
17
17
|
var shouldCompRender = label ||
|
|
18
18
|
(!readOnly &&
|
|
19
19
|
(sublabel ||
|
|
@@ -10,10 +10,33 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
};
|
|
11
11
|
return __assign.apply(this, arguments);
|
|
12
12
|
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
13
36
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
37
|
var styled_1 = require("./styled");
|
|
15
38
|
var Typo_1 = require("../Typo");
|
|
16
|
-
var react_1 = require("react");
|
|
39
|
+
var react_1 = __importStar(require("react"));
|
|
17
40
|
var contextApi_1 = require("../Hints/contextApi");
|
|
18
41
|
var colors_1 = require("../../themes/colors");
|
|
19
42
|
var comps_1 = require("../../utils/comps");
|
|
@@ -22,9 +45,10 @@ var ModalLarge_1 = require("../Modals/ModalLarge");
|
|
|
22
45
|
var mixins_1 = require("../../themes/mixins");
|
|
23
46
|
var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
|
|
24
47
|
var styled_2 = require("../Modals/ModalLarge/styled");
|
|
48
|
+
var OKELink_1 = require("../OKELink");
|
|
25
49
|
var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15, greyColor100 = colors_1.colors.greyColor100;
|
|
26
|
-
var TriangleIconComp = function (props) { return (
|
|
27
|
-
|
|
50
|
+
var TriangleIconComp = function (props) { return (react_1.default.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
51
|
+
react_1.default.createElement("path", { d: "m8.894 1.206-7.59 8.28C.422 10.448 1.104 12 2.41 12h15.18c1.305 0 1.988-1.552 1.106-2.514l-7.59-8.28a1.5 1.5 0 0 0-2.212 0Z", fill: "#fff", stroke: greyColor15 }))); };
|
|
28
52
|
var getPositionStyles = function (position) {
|
|
29
53
|
var styles = {
|
|
30
54
|
left: {
|
|
@@ -61,29 +85,31 @@ var Hints = function (_a) {
|
|
|
61
85
|
// });
|
|
62
86
|
}
|
|
63
87
|
}, [active]);
|
|
64
|
-
return (
|
|
88
|
+
return (react_1.default.createElement("div", null,
|
|
65
89
|
" ",
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
90
|
+
react_1.default.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
|
|
91
|
+
react_1.default.createElement(OKELink_1.OKELink, { icon: "LightbulbFilament", linkType: "action", onClick: function () { return setActive(id); }, iconSize: 16, invertUnderline: true },
|
|
92
|
+
" ",
|
|
93
|
+
react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, "Hints"))),
|
|
94
|
+
active === id ? (isDesktop ? (react_1.default.createElement("div", null,
|
|
95
|
+
react_1.default.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
|
|
96
|
+
react_1.default.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
|
|
97
|
+
react_1.default.createElement(styled_2.StyledModalHeaderStyle2Container, null,
|
|
98
|
+
react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem", fontSize: 0 } },
|
|
99
|
+
react_1.default.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
|
|
100
|
+
react_1.default.createElement(styled_2.StyledModalHeaderStyle2Title, null,
|
|
101
|
+
react_1.default.createElement(Typo_1.SANS_3, { semibold: true, capitalize: true }, title || "title"),
|
|
102
|
+
subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
|
|
103
|
+
react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
|
|
104
|
+
react_1.default.createElement(styled_1.StyledLightBoxContent, null,
|
|
105
|
+
react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
|
|
106
|
+
react_1.default.createElement("div", { style: { marginTop: ".5rem" } },
|
|
107
|
+
react_1.default.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
|
|
108
|
+
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
|
+
react_1.default.createElement("div", { style: { padding: ".5rem 2rem" } },
|
|
110
|
+
react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
|
|
111
|
+
react_1.default.createElement("div", { style: { marginTop: ".5rem" } },
|
|
112
|
+
react_1.default.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
|
|
113
|
+
react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
|
|
88
114
|
};
|
|
89
115
|
exports.default = Hints;
|
|
@@ -109,8 +109,8 @@ var KenyaFlag = function (props) { return (react_1.default.createElement("svg",
|
|
|
109
109
|
exports.KenyaFlag = KenyaFlag;
|
|
110
110
|
var ModalBulbIcon = function () {
|
|
111
111
|
return (react_1.default.createElement("div", { style: {
|
|
112
|
-
width: "
|
|
113
|
-
height: "
|
|
112
|
+
width: "4rem",
|
|
113
|
+
height: "4rem",
|
|
114
114
|
borderRadius: "50%",
|
|
115
115
|
backgroundColor: "#33a4ff",
|
|
116
116
|
position: "relative",
|
|
@@ -119,7 +119,7 @@ var ModalBulbIcon = function () {
|
|
|
119
119
|
justifyContent: "center",
|
|
120
120
|
} },
|
|
121
121
|
react_1.default.createElement("div", { style: { position: "absolute" } },
|
|
122
|
-
react_1.default.createElement(comps_1.DisplayIcon, { size:
|
|
122
|
+
react_1.default.createElement(comps_1.DisplayIcon, { size: 20, weight: "regular", color: "white", icon: "LightbulbFilament" }))));
|
|
123
123
|
};
|
|
124
124
|
exports.ModalBulbIcon = ModalBulbIcon;
|
|
125
125
|
// export const ModalBulbIcon = (props) => (
|