oolib 2.15.2 → 2.16.0

package/dist/components/ActionMenu/index.js

@@ -56,14 +56,14 @@ var ActionMenu = function (_a) {
         react_1.default.createElement(Buttons_1.ButtonGhost, { icon: icon, children: buttonText, invert: invert, onClick: function (e) {
                 e.stopPropagation();
                 setShowActions(!showActions);
-            } }),
+            }, active: showActions }),
         react_1.default.createElement(styled_1.StyledActionsDropMenu, __assign({ unfold: showActions }, { align: align, invert: invert }), actions.map(function (action) {
             var ActionButton = action.buttonComp || styled_1.StyledActionBtn;
             return (react_1.default.createElement(ActionButton, __assign({ style: { justifyContent: 'left' } }, action, { onClick: function (ev) {
                     action.onClick && action.onClick(ev);
                     setShowActions(false);
                 }, key: action.display, invert: invert }),
-                react_1.default.createElement(Typo_1.SANS_2, null, action.display)));
+                react_1.default.createElement(Typo_1.SANS_2, { style: { fontSize: '14px' } }, action.display)));
         }))));
 };
 exports.ActionMenu = ActionMenu;

package/dist/components/ActionMenu/styled.js

@@ -31,10 +31,11 @@ exports.StyledActionBtn = exports.StyledActionsDropMenu = exports.StyledActionMe
 var styled_components_1 = __importStar(require("styled-components"));
 var themes_1 = require("../../themes");
 var mixins_1 = require("../../themes/mixins");
+var utilsOolib_1 = require("../../utilsOolib");
 var Buttons_1 = require("../Buttons");
-var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor100 = themes_1.colors.greyColor100;
+var greyColor5 = themes_1.colors.greyColor5, white = themes_1.colors.white, greyColor10 = themes_1.colors.greyColor10, greyColor70 = themes_1.colors.greyColor70, greyColor100 = themes_1.colors.greyColor100;
 exports.StyledActionMenu = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  width: max-content;\n"], ["\n  position: relative;\n  width: max-content;\n"])));
-exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: -2px;\n  z-index: 10;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"], ["\n  position: absolute;\n  bottom: -2px;\n  z-index: 10;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"])), function (_a) {
+exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  bottom: -2px;\n  z-index: 10;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n  padding: 0.6rem 0;\n\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"], ["\n  position: absolute;\n  bottom: -2px;\n  z-index: 10;\n  transform-origin: left top; \n  transform: translateY(100%) ", ";\n  ", "\n  padding: 0.6rem 0;\n\n  ", "\n  box-shadow: 2px 2px 10px   rgba(0, 0, 0, 0.05);\n  border: 1px solid ", ";\n  background-color: ", ";\n\n  \n\n  &::after{\n      content: '';\n      width: 0;\n      height: 0;\n      position: absolute;\n      bottom: 100%;\n\n      ", "\n      border: 1rem solid transparent;\n      border-bottom: 1rem solid ", ";\n  }\n"])), function (_a) {
     var unfold = _a.unfold;
     return "scaleY(".concat(Number(unfold), ")");
 }, (0, mixins_1.transition)('transform'), function (_a) {
@@ -43,12 +44,24 @@ exports.StyledActionsDropMenu = styled_components_1.default.div(templateObject_6
         var unfold = _a.unfold;
         return "scaleY(".concat(Number(unfold), ")");
     }) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ": 0;"], ["", ": 0;"])), align);
-}, greyColor5, white, function (_a) {
+}, greyColor5, function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor70 : white;
+}, function (_a) {
     var align = _a.align;
     return align == 'center' ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          left: 50%;\n          transform: translateX(-50%);\n        "], ["\n          left: 50%;\n          transform: translateX(-50%);\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ": 1rem;"], ["", ": 1rem;"])), align);
-}, greyColor10);
-exports.StyledActionBtn = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n  }\n"])), function (_a) {
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? greyColor70 : white;
+});
+exports.StyledActionBtn = (0, styled_components_1.default)(Buttons_1.ButtonGhost)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n    color: ", ";\n  }\n"], ["\n  white-space: nowrap;\n  width: 100%;\n  text-align: ", ";\n  padding: 1rem 1.6rem;\n  background-color: transparent;\n  color: ", ";\n  ", ";\n  &:hover{\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_a) {
     var align = _a.align;
     return align === 'center' ? 'center' : 'left';
-}, greyColor100, (0, mixins_1.transition)('background-color'), greyColor10);
+}, function (_a) {
+    var invert = _a.invert;
+    return invert ? white : greyColor100;
+}, (0, mixins_1.transition)('background-color'), function (_a) {
+    var invert = _a.invert, theme = _a.theme;
+    return invert ? (0, utilsOolib_1.getPrimaryColor40)(theme.colors) : greyColor10;
+}, greyColor100);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Banners/index.js

@@ -72,7 +72,14 @@ var Banner = function (_a) {
 var BannerAlert = function (_a) {
     var _b;
     var BANNER_STATE = _a.BANNER_STATE, REMOVE_ALERT_BANNER = _a.REMOVE_ALERT_BANNER;
-    return (react_1.default.createElement(index_styled_1.BannerAlertStyled, null, (_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 })); })));
+    var _c = (0, react_1.useState)(0), top = _c[0], setTop = _c[1];
+    (0, react_1.useEffect)(function () {
+        setTimeout(function () {
+            var ele = document.getElementsByClassName("BannerInfoStickyPosition")[0];
+            setTop(ele.offsetHeight);
+        }, 100);
+    });
+    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 })); })));
 };
 exports.BannerAlert = BannerAlert;
 var BannerInfo = function (_a) {

package/dist/components/Banners/index.styled.js

@@ -63,6 +63,8 @@ exports.BannerWrapperStyled = styled_components_1.default.div(templateObject_3 |
     return (color === "dark" ? white : "");
 }, (0, mixins_1.mediaQuery)("sm"));
 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"])));
-exports.BannerAlertStyled = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n\n  .item-enter{\n\n  }\n\n\n  .item-enter-active {\n}\n.item-exit {\n  /* height: 0; */\n}\n.item-exit-active {\n  height: 0;\n  ", "\n}\n\n\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  gap: 0.2rem;\n  width: 100%;\n\n  .item-enter{\n\n  }\n\n\n  .item-enter-active {\n}\n.item-exit {\n  /* height: 0; */\n}\n.item-exit-active {\n  height: 0;\n  ", "\n}\n\n\n"])), (0, transitions_1.transition)("height"));
-exports.BannerInfoStyled = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+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 (top) {
+    return top && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      top: ", "px;\n    "], ["\n      top: ", "px;\n    "])), top);
+}, (0, transitions_1.transition)("top"));
+exports.BannerInfoStyled = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n"], ["\n  position: sticky;\n  z-index: 10000000;\n  top: 0;\n  width: 100%;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;

package/dist/components/Buttons/index.js

@@ -46,10 +46,9 @@ var DisplayIcon = function (_a) {
 };
 var ButtonStyledWrapper = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, SProp = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
+    var id = props.id, link = props.link, children = props.children, value = props.value, submit = props.submit, icon = props.icon, iconAfter = props.iconAfter, onClick = props.onClick, onMouseDown = props.onMouseDown, active = props.active, S = props.S, disabled = props.disabled, invert = props.invert, theme = props.theme, width = props.width, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, color = props.color, style = props.style, className = props.className;
     var displayText = (link === null || link === void 0 ? void 0 : link.displayText) || children || value;
     var composition = (icon || iconAfter) && displayText ? 'icon+text' : !displayText && 'iconOnly';
-    var S = composition === 'iconOnly' ? true : SProp;
     var size = (S && "S") || 'M';
     return (react_1.default.createElement(index_styled_1.ButtonStyled, { id: id, style: style, className: className, variant: variant, size: size, active: active, invert: invert, disabled: disabled, theme: theme, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, type: submit ? 'submit' : 'button', onClick: onClick, onMouseDown: onMouseDown, composition: composition, width: width, color: color },
         icon && react_1.default.createElement(DisplayIcon, { icon: icon, size: S ? 15 : 20 }),

package/dist/icons/custom/index.d.ts

@@ -15,3 +15,5 @@ export function BadgeAdmin(props: any): JSX.Element;
 export function BadgeSuperAdmin(props: any): JSX.Element;
 export function BadgeMod(props: any): JSX.Element;
 export function BadgeVetted(props: any): JSX.Element;
+export function IndiaFlag(props: any): JSX.Element;
+export function KenyaFlag(props: any): JSX.Element;

package/dist/icons/custom/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
+exports.KenyaFlag = exports.IndiaFlag = exports.BadgeVetted = exports.BadgeMod = exports.BadgeSuperAdmin = exports.BadgeAdmin = exports.OkeGoogleIcon = exports.LetterH = exports.LanguageIcon = exports.IndexIcon = void 0;
 var react_1 = __importDefault(require("react"));
 var themes_1 = require("../../themes");
 var yellow = themes_1.colors.yellow, greyColor100 = themes_1.colors.greyColor100;
@@ -80,3 +80,43 @@ var BadgeVetted = function (props) {
         react_1.default.createElement("path", { d: "M5.324 8.774l1.79 2.127c1.678-1.992 2.755-3.27 4.21-5", stroke: "#fff", strokeLinecap: "round", strokeLinejoin: "round" })));
 };
 exports.BadgeVetted = BadgeVetted;
+var IndiaFlag = function (props) { return (react_1.default.createElement("svg", { width: props.size || 40, height: props.size || 40, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 900 600" },
+    react_1.default.createElement("path", { fill: "#f93", d: "M0 0h900v200H0z" }),
+    react_1.default.createElement("path", { fill: "#fff", d: "M0 200h900v200H0z" }),
+    react_1.default.createElement("path", { fill: "#128807", d: "M0 400h900v200H0z" }),
+    react_1.default.createElement("g", { transform: "translate(450 300)" },
+        react_1.default.createElement("circle", { r: 92.5, fill: "#008" }),
+        react_1.default.createElement("circle", { r: 80, fill: "#fff" }),
+        react_1.default.createElement("circle", { r: 16, fill: "#008" }),
+        react_1.default.createElement("g", { id: "d" },
+            react_1.default.createElement("g", { id: "c" },
+                react_1.default.createElement("g", { id: "b" },
+                    react_1.default.createElement("g", { id: "a", fill: "#008" },
+                        react_1.default.createElement("circle", { r: 3.5, transform: "rotate(7.5 -40 610.282)" }),
+                        react_1.default.createElement("path", { d: "m0 80 3-48-2-16.031V15h-2v.969L-3 32l3 48z" })),
+                    react_1.default.createElement("use", { xlinkHref: "#a", transform: "rotate(15)" })),
+                react_1.default.createElement("use", { xlinkHref: "#b", transform: "rotate(30)" })),
+            react_1.default.createElement("use", { xlinkHref: "#c", transform: "rotate(60)" })),
+        react_1.default.createElement("use", { xlinkHref: "#d", transform: "rotate(120)" }),
+        react_1.default.createElement("use", { xlinkHref: "#d", transform: "rotate(-120)" })))); };
+exports.IndiaFlag = IndiaFlag;
+var KenyaFlag = function (props) { return (react_1.default.createElement("svg", { width: props.size || 40, height: props.size || 40, xmlns: "http://www.w3.org/2000/svg", xlink: "http://www.w3.org/1999/xlink", viewBox: "-120 -80 240 160" },
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("path", { id: "spearshape", d: "M -1,55.4256258422040733928782829281879157421699 h 2 V -38 C 3,-40 3,-43 3,-46 C 3,-48 3,-56 0,-64.6632301492380856250246634162192350325315 C -3,-56 -3,-48 -3,-46 C -3,-43 -3,-40 -1,-38 z", "stroke-miterlimit": "10", transform: "rotate(30)" })),
+    react_1.default.createElement("rect", { x: "-120", y: "-80", width: "240", height: "160", fill: "#fff" }),
+    react_1.default.createElement("rect", { x: "-120", y: "-80", width: "240", height: "48" }),
+    react_1.default.createElement("rect", { x: "-120", y: "32", width: "240", height: "48", fill: "#060" }),
+    react_1.default.createElement("g", { id: "spear" },
+        react_1.default.createElement("use", { href: "#spearshape", stroke: "#000" }),
+        react_1.default.createElement("use", { href: "#spearshape", fill: "#fff" })),
+    react_1.default.createElement("use", { href: "#spear", transform: "scale(-1,1)" }),
+    react_1.default.createElement("path", { fill: "#b00", d: "M -120,-24 V 24 H -19 c 3,8 13,24 19,24 s 16,-16 19,-24 H 120 V -24 H 19 c -3,-8 -13,-24 -19,-24 s -16,16 -19,24 z" }),
+    react_1.default.createElement("path", { id: "deco_r", d: "M 19,24 c 3,-8 5,-16 5,-24 s -2,-16 -5,-24 c -3,8 -5,16 -5,24 s 2,16 5,24" }),
+    react_1.default.createElement("use", { href: "#deco_r", transform: "scale(-1,1)" }),
+    react_1.default.createElement("g", { fill: "#fff" },
+        react_1.default.createElement("ellipse", { rx: "4", ry: "6" }),
+        react_1.default.createElement("path", { id: "deco_br", d: "M 1,5.85 c 0,0 4,8 4,21 s -4,21 -4,21 z" }),
+        react_1.default.createElement("use", { href: "#deco_br", transform: "scale(-1)" }),
+        react_1.default.createElement("use", { href: "#deco_br", transform: "scale(-1,1)" }),
+        react_1.default.createElement("use", { href: "#deco_br", transform: "scale(1,-1)" })))); };
+exports.KenyaFlag = KenyaFlag;

package/dist/icons/index.d.ts

@@ -81,6 +81,8 @@ export namespace icons {
     export { SortAscending };
     export { Crosshair };
     export { MicrophoneStage };
+    export { IndiaFlag };
+    export { KenyaFlag };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -164,3 +166,5 @@ import { SortDescending } from "phosphor-react";
 import { SortAscending } from "phosphor-react";
 import { Crosshair } from "phosphor-react";
 import { MicrophoneStage } from "phosphor-react";
+import { IndiaFlag } from "./custom";
+import { KenyaFlag } from "./custom";

package/dist/icons/index.js

@@ -85,5 +85,7 @@ exports.icons = {
     SortDescending: phosphor_react_1.SortDescending,
     SortAscending: phosphor_react_1.SortAscending,
     Crosshair: phosphor_react_1.Crosshair,
-    MicrophoneStage: phosphor_react_1.MicrophoneStage
+    MicrophoneStage: phosphor_react_1.MicrophoneStage,
+    IndiaFlag: custom_1.IndiaFlag,
+    KenyaFlag: custom_1.KenyaFlag
 };

package/dist/themes/colors.d.ts

@@ -19,6 +19,7 @@ export namespace colors {
     export { black_opacity50 };
     export { black_opacity80 };
     export { greyColor100 };
+    export { greyColor90 };
     export { greyColor80 };
     export { greyColor70 };
     export { greyColor40 };
@@ -58,6 +59,7 @@ declare const black_opacity30: "rgba(0, 0, 0, 0.3)";
 declare const black_opacity50: "rgba(0, 0, 0, 0.5)";
 declare const black_opacity80: "rgba(0, 0, 0, 0.8)";
 declare const greyColor100: "#383838";
+declare const greyColor90: "#4c4c4c";
 declare const greyColor80: "#606060";
 declare const greyColor70: "#747474";
 declare const greyColor40: "#afafaf";

package/dist/themes/colors.js

@@ -27,6 +27,7 @@ var black_opacity30 = 'rgba(0, 0, 0, 0.3)';
 var black_opacity05 = 'rgba(0, 0, 0, 0.05)';
 var black_opacity50 = 'rgba(0, 0, 0, 0.5)';
 var greyColor100 = '#383838';
+var greyColor90 = '#4c4c4c';
 var greyColor80 = '#606060';
 var greyColor70 = '#747474';
 var greyColor50 = '#9B9B9B';
@@ -60,6 +61,7 @@ exports.colors = {
     black_opacity50: black_opacity50,
     black_opacity80: black_opacity80,
     greyColor100: greyColor100,
+    greyColor90: greyColor90,
     greyColor80: greyColor80,
     greyColor70: greyColor70,
     greyColor40: greyColor40,

package/package.json

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