oolib 2.27.3 → 2.27.5

package/dist/components/BlockLabel/index.js

@@ -13,7 +13,7 @@ var toArray_1 = require("../../utils/toArray");
 var Hints_1 = __importDefault(require("../Hints"));
 var greyColor40 = colors_1.colors.greyColor40, greyColor80 = colors_1.colors.greyColor80;
 var BlockLabel = function (props) {
-    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;
+    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;
     var shouldCompRender = label ||
         (!readOnly &&
             (sublabel ||

package/dist/components/Hints/index.js

@@ -10,10 +10,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var styled_1 = require("./styled");
 var Typo_1 = require("../Typo");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var contextApi_1 = require("../Hints/contextApi");
 var colors_1 = require("../../themes/colors");
 var comps_1 = require("../../utils/comps");
@@ -22,9 +45,10 @@ var ModalLarge_1 = require("../Modals/ModalLarge");
 var mixins_1 = require("../../themes/mixins");
 var useScreenWidth_1 = require("../../utils/customHooks/useScreenWidth");
 var styled_2 = require("../Modals/ModalLarge/styled");
+var OKELink_1 = require("../OKELink");
 var greyColor80 = colors_1.colors.greyColor80, greyColor15 = colors_1.colors.greyColor15, greyColor100 = colors_1.colors.greyColor100;
-var TriangleIconComp = function (props) { return (React.createElement("svg", __assign({ width: 20, height: 13, fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
-    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 }))); };
+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),
+    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 }))); };
 var getPositionStyles = function (position) {
     var styles = {
         left: {
@@ -61,29 +85,31 @@ var Hints = function (_a) {
             // });
         }
     }, [active]);
-    return (React.createElement("div", null,
+    return (react_1.default.createElement("div", null,
         " ",
-        React.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
-            React.createElement(Buttons_1.ButtonGhost, { S: true, active: active === id ? true : false, icon: "LightbulbFilament" }, "Hints")),
-        active === id ? (isDesktop ? (React.createElement("div", null,
-            React.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
-            React.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
-                React.createElement(styled_2.StyledModalHeaderStyle2Container, null,
-                    React.createElement("div", { style: { position: "absolute", top: "-2.5rem", fontSize: 0 } },
-                        React.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
-                    React.createElement(styled_2.StyledModalHeaderStyle2Title, null,
-                        React.createElement(Typo_1.SANS_3, { semibold: true, capitalize: true }, title || "title"),
-                        subtitle ? (React.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
-                        React.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
-                React.createElement(styled_1.StyledLightBoxContent, null,
-                    React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
-                        React.createElement("div", { style: { marginTop: ".5rem" } },
-                            React.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
-                        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(""); } },
-            React.createElement("div", { style: { padding: ".5rem 2rem" } },
-                React.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (React.createElement("li", null,
-                    React.createElement("div", { style: { marginTop: ".5rem" } },
-                        React.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
-                    React.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
+        react_1.default.createElement(styled_1.StyledHints, { onClick: function () { return setActive(id); } },
+            react_1.default.createElement(OKELink_1.OKELink, { icon: "LightbulbFilament", linkType: "action", onClick: function () { return setActive(id); }, iconSize: 16, invertUnderline: true },
+                " ",
+                react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, "Hints"))),
+        active === id ? (isDesktop ? (react_1.default.createElement("div", null,
+            react_1.default.createElement(styled_1.StyledTriangle, { style: styles.arrow, id: id }),
+            react_1.default.createElement(styled_1.StyledLightbox, { style: styles.lightBox, ref: lightBoxRef, id: id },
+                react_1.default.createElement(styled_2.StyledModalHeaderStyle2Container, null,
+                    react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem", fontSize: 0 } },
+                        react_1.default.createElement(comps_1.DisplayIcon, { icon: "ModalBulbIcon" })),
+                    react_1.default.createElement(styled_2.StyledModalHeaderStyle2Title, null,
+                        react_1.default.createElement(Typo_1.SANS_3, { semibold: true, capitalize: true }, title || "title"),
+                        subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { capitalize: true, semibold: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
+                        react_1.default.createElement(Buttons_1.ButtonGhost, { onClick: function () { return setActive(""); }, icon: "X" }))),
+                react_1.default.createElement(styled_1.StyledLightBoxContent, null,
+                    react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
+                        react_1.default.createElement("div", { style: { marginTop: ".5rem" } },
+                            react_1.default.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
+                        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(""); } },
+            react_1.default.createElement("div", { style: { padding: ".5rem 2rem" } },
+                react_1.default.createElement(styled_1.StyledLightBoxList, null, hints.map(function (d) { return (react_1.default.createElement("li", null,
+                    react_1.default.createElement("div", { style: { marginTop: ".5rem" } },
+                        react_1.default.createElement(comps_1.DisplayIcon, { color: greyColor100, weight: "fill", icon: "Circle", size: 8 })),
+                    react_1.default.createElement(Typo_1.SANS_3, null, d))); })))))) : null));
 };
 exports.default = Hints;

package/dist/components/OKELink/index.d.ts

@@ -1 +1,17 @@
-export function OKELink(props: any): any;
+export function OKELink({ to: _to, link, onClick, icon, iconAfter, text, children, invertUnderline, color, invert, disabled, className, style, avatar, iconSize, }: {
+    to: any;
+    link: any;
+    onClick: any;
+    icon: any;
+    iconAfter: any;
+    text: any;
+    children: any;
+    invertUnderline: any;
+    color: any;
+    invert: any;
+    disabled: any;
+    className: any;
+    style: any;
+    avatar: any;
+    iconSize: any;
+}): any;

package/dist/components/OKELink/index.js

@@ -45,11 +45,11 @@ var styled_components_1 = require("styled-components");
 var themes_1 = require("../../themes");
 var injectHttps_1 = require("../../utils/injectHttps");
 var comps_1 = require("../../utils/comps");
-var OKELink = function (props) {
-    var _to = props.to, link = props.link, //link is deprecated. use to instead 
-    onClick = props.onClick, icon = props.icon, iconAfter = props.iconAfter, text = props.text, children = props.children, invertUnderline = props.invertUnderline, color = props.color, invert = props.invert, disabled = props.disabled, className = props.className, style = props.style, avatar = props.avatar, // imageData // [ {...} ] OR {...}
+var OKELink = function (_a) {
+    var _to = _a.to, link = _a.link, //link is deprecated. use to instead 
+    onClick = _a.onClick, icon = _a.icon, iconAfter = _a.iconAfter, text = _a.text, children = _a.children, invertUnderline = _a.invertUnderline, color = _a.color, invert = _a.invert, disabled = _a.disabled, className = _a.className, style = _a.style, avatar = _a.avatar, // imageData // [ {...} ] OR {...}
     //imageSize ??
-    iconSize = props.iconSize;
+    iconSize = _a.iconSize;
     var to = link || _to;
     var theme = (0, styled_components_1.useTheme)();
     var localize = (0, utilsOolib_1.useLocale)();

package/dist/icons/custom/index.js

@@ -109,8 +109,8 @@ var KenyaFlag = function (props) { return (react_1.default.createElement("svg",
 exports.KenyaFlag = KenyaFlag;
 var ModalBulbIcon = function () {
     return (react_1.default.createElement("div", { style: {
-            width: "4.4rem",
-            height: "4.4rem",
+            width: "4rem",
+            height: "4rem",
             borderRadius: "50%",
             backgroundColor: "#33a4ff",
             position: "relative",
@@ -119,7 +119,7 @@ var ModalBulbIcon = function () {
             justifyContent: "center",
         } },
         react_1.default.createElement("div", { style: { position: "absolute" } },
-            react_1.default.createElement(comps_1.DisplayIcon, { size: 28, color: "white", icon: "LightbulbFilament" }))));
+            react_1.default.createElement(comps_1.DisplayIcon, { size: 20, weight: "regular", color: "white", icon: "LightbulbFilament" }))));
 };
 exports.ModalBulbIcon = ModalBulbIcon;
 // export const ModalBulbIcon = (props) => (

package/dist/icons/index.d.ts

@@ -11,6 +11,7 @@ export namespace icons {
     export { DownloadSimple };
     export { ArrowLineUpRight };
     export { User };
+    export { UserCirclePlus };
     export { MapPinLine };
     export { WarningCircle };
     export { Paperclip };
@@ -108,6 +109,7 @@ import { XSquare } from "phosphor-react";
 import { DownloadSimple } from "phosphor-react";
 import { ArrowLineUpRight } from "phosphor-react";
 import { User } from "phosphor-react";
+import { UserCirclePlus } from "phosphor-react";
 import { MapPinLine } from "phosphor-react";
 import { WarningCircle } from "phosphor-react";
 import { Paperclip } from "phosphor-react";

package/dist/icons/index.js

@@ -16,6 +16,7 @@ exports.icons = {
     DownloadSimple: phosphor_react_1.DownloadSimple,
     ArrowLineUpRight: phosphor_react_1.ArrowLineUpRight,
     User: phosphor_react_1.User,
+    UserCirclePlus: phosphor_react_1.UserCirclePlus,
     MapPinLine: phosphor_react_1.MapPinLine,
     WarningCircle: phosphor_react_1.WarningCircle,
     Paperclip: phosphor_react_1.Paperclip,

package/dist/index.d.ts

@@ -27,5 +27,5 @@ export { SkeletonLoader } from "./components/LoadersAndProgress/SkeletonLoader";
 export { ModalConfirm } from "./components/Modals/derivedComps/ModalConfirm";
 export { ModalLarge } from "./components/Modals/ModalLarge";
 export { ModalSmall } from "./components/Modals/ModalSmall";
-export { HintsContext } from "./components/Hints/contextApi";
+export { HintsProvider } from "./components/Hints/contextApi";
 export { LoaderCircle, ProgressBar, LoaderCircle as Loader } from "./components/LoadersAndProgress";

package/dist/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HintsContext = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.HintsProvider = exports.ModalSmall = exports.ModalLarge = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentCompletedPie = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -67,7 +67,7 @@ var ModalSmall_1 = require("./components/Modals/ModalSmall");
 Object.defineProperty(exports, "ModalSmall", { enumerable: true, get: function () { return ModalSmall_1.ModalSmall; } });
 // context
 var contextApi_1 = require("./components/Hints/contextApi");
-Object.defineProperty(exports, "HintsContext", { enumerable: true, get: function () { return contextApi_1.HintsContext; } });
+Object.defineProperty(exports, "HintsProvider", { enumerable: true, get: function () { return contextApi_1.HintsProvider; } });
 // export this
 //utility functions
 __exportStar(require("./utils/_EXPORTS"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.27.3",
+  "version": "2.27.5",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",