oolib 2.27.4 → 2.27.6

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.
Files changed (7) hide show
  1. package/dist/components/Banners/index.js +5 -6
  2. package/dist/components/Banners/index.styled.js +1 -1
  3. package/dist/components/BlockLabel/index.js +1 -1
  4. package/dist/components/Hints/index.js +52 -26
  5. package/dist/components/Hints/styled.js +1 -1
  6. package/dist/icons/custom/index.js +3 -3
  7. package/package.json +1 -1
package/dist/components/Banners/index.js CHANGED
@@ -42,8 +42,8 @@ var DisplayIcon = function (_a) {
42
42
  return react_1.default.createElement(react_1.default.Fragment, null, IconComp && react_1.default.createElement(IconComp, { size: 20, weight: "bold" }));
43
43
  };
44
44
  var Banner = function (_a) {
45
- var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon, _b = _a.bottomStroke, bottomStroke = _b === void 0 ? true : _b;
46
- var _c = (0, react_1.useState)(0), height = _c[0], setHeight = _c[1];
45
+ var color = _a.color, cta = _a.cta, msg = _a.msg, handleRemove = _a.handleRemove, id = _a.id, timeOut = _a.timeOut, showIcon = _a.showIcon, _b = _a.bottomStroke, bottomStroke = _b === void 0 ? true : _b, _c = _a.hideCloseButton, hideCloseButton = _c === void 0 ? false : _c;
46
+ var _d = (0, react_1.useState)(0), height = _d[0], setHeight = _d[1];
47
47
  var ContainerRef = (0, react_1.useRef)();
48
48
  (0, react_1.useEffect)(function () {
49
49
  var timer;
@@ -67,7 +67,7 @@ var Banner = function (_a) {
67
67
  showIcon && react_1.default.createElement(DisplayIcon, { color: color }),
68
68
  react_1.default.createElement(Typo_1.SANS_2, null, msg),
69
69
  cta && (react_1.default.createElement(Buttons_1.ButtonSecondary, { style: { marginTop: "0.5rem", marginBottom: "0.5rem" }, S: true, onClick: cta.action, invert: color === "dark" ? true : false }, cta === null || cta === void 0 ? void 0 : cta.text))),
70
- react_1.default.createElement(Buttons_1.ButtonGhost, { S: true, icon: "X", invert: color === "dark" ? true : false, onClick: function (e) { return remove(e, id); } }))));
70
+ 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
71
  };
72
72
  var BannerAlert = function (_a) {
73
73
  var _b;
@@ -76,16 +76,15 @@ var BannerAlert = function (_a) {
76
76
  (0, react_1.useEffect)(function () {
77
77
  setTimeout(function () {
78
78
  var ele = document.getElementById("bannerInfo");
79
- console.log({ ele: ele, h: ele.offsetHeight });
80
79
  setTop(ele.offsetHeight);
81
80
  }, 100);
82
81
  });
83
- 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 })); })));
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, hideCloseButton: e.hideCloseButton })); })));
84
83
  };
85
84
  exports.BannerAlert = BannerAlert;
86
85
  var BannerInfo = function (_a) {
87
86
  var _b;
88
87
  var BANNER_STATE = _a.BANNER_STATE, REMOVE_INFO_BANNER = _a.REMOVE_INFO_BANNER;
89
- return (react_1.default.createElement(index_styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === 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_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, bottomStroke: false })); })));
88
+ return (react_1.default.createElement(index_styled_1.BannerInfoStyled, { id: "bannerInfo" }, (_b = BANNER_STATE === null || BANNER_STATE === void 0 ? void 0 : BANNER_STATE.infoState) === 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_INFO_BANNER, timeOut: e.timeOut, showIcon: e.showIcon, bottomStroke: false, hideCloseButton: e.hideCloseButton })); })));
90
89
  };
91
90
  exports.BannerInfo = BannerInfo;
package/dist/components/Banners/index.styled.js CHANGED
@@ -62,7 +62,7 @@ exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 |
62
62
  return (color === "dark" ? white : "");
63
63
  }, (0, mixins_1.mediaQuery)("sm"));
64
64
  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"])));
65
- 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 (_a) {
65
+ exports.BannerAlertStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: sticky;\n z-index: 100000000; //whatever this is, it should be more than modal\n width: 100%;\n ", ";\n\n ", "\n"], ["\n position: sticky;\n z-index: 100000000; //whatever this is, it should be more than modal\n width: 100%;\n ", ";\n\n ", "\n"])), function (_a) {
66
66
  var top = _a.top;
67
67
  return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n top: ", "px;\n "], ["\n top: ", "px;\n "])), top);
68
68
  }, (0, mixins_1.transition)("top"));
package/dist/components/BlockLabel/index.js CHANGED
@@ -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, hintsTitle = props.hintsTitle, hintsSubtitle = props.hintsSubtitle;
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 ||
package/dist/components/Hints/index.js CHANGED
@@ -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 (React.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
27
- React.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 }))); };
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 (React.createElement("div", null,
88
+ return (react_1.default.createElement("div", null,
65
89
  " ",
66
- React.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
67
- React.createElement(Buttons_1.ButtonGhost, { S: true, active: active === id ? true : false, icon: "LightbulbFilament" }, "Hints")),
68
- active === id ? (isDesktop ? (React.createElement("div", null,
69
- React.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
70
- React.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
71
- React.createElement(styled_2.StyledModalHeaderStyle2Container, null,
72
- React.createElement("div", { style: { position: "absolute", top: "-2.5rem", fontSize: 0 } },
73
- React.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
74
- React.createElement(styled_2.StyledModalHeaderStyle2Title, null,
75
- React.createElement(Typo_1.SANS_3, { semibold: true, capitalize: true }, title || "title"),
76
- subtitle ? (React.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
77
- React.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
78
- React.createElement(styled_1.StyledLightBoxContent, null,
79
- React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
80
- React.createElement("div", { style: { marginTop: ".5rem" } },
81
- React.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
82
- React.createElement(Typo_1.SANS_3, null, d))); })))))) : (React.createElement(ModalLarge_1.ModalLarge, { isStorybook: true, headerStyle: "style2", id: "modal", title: "title", onClose: function () { return setActive(""); } },
83
- React.createElement("div", { style: { padding: ".5rem 2rem" } },
84
- React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
85
- React.createElement("div", { style: { marginTop: ".5rem" } },
86
- React.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
87
- React.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
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;
package/dist/components/Hints/styled.js CHANGED
@@ -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(["\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\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 background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\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) {
15
+ exports.StyledLightbox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\nz-index: 1000;\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\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"], ["\nz-index: 1000;\n background: ", ";\n position: absolute;\n\n border: 1px solid ", ";\n z-index: 2;\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) {
package/dist/icons/custom/index.js CHANGED
@@ -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: "4.4rem",
113
- height: "4.4rem",
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: 28, color: "white", icon: "LightbulbFilament" }))));
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) => (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.27.4",
3
+ "version": "2.27.6",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",