oolib 2.18.2 → 2.19.1

package/dist/components/InlineAlert/index.js

@@ -18,18 +18,18 @@ exports.InlineAlert = void 0;
 var react_1 = __importDefault(require("react"));
 var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");
-var red = colors_1.colors.red, white = colors_1.colors.white, green = colors_1.colors.green, black = colors_1.colors.black, darkGrey = colors_1.colors.darkGrey, greyColor100 = colors_1.colors.greyColor100;
+var red = colors_1.colors.red, invertRed = colors_1.colors.invertRed, white = colors_1.colors.white, green = colors_1.colors.green, invertGreen = colors_1.colors.invertGreen, greyColor15 = colors_1.colors.greyColor15, greyColor70 = colors_1.colors.greyColor70, greyColor100 = colors_1.colors.greyColor100;
 var InlineAlert = function (_a) {
     var text = _a.text, link = _a.link, _b = _a.type, type = _b === void 0 ? 'neutral' : _b, style = _a.style, invert = _a.invert;
     var localize = (0, utilsOolib_1.useLocale)();
     var typeColor = {
-        success: green,
-        danger: red,
-        neutral: black,
-        neutralInactive: darkGrey,
+        success: { normal: green, invert: invertGreen },
+        danger: { normal: red, invert: invertRed },
+        neutral: { normal: greyColor100, invert: white },
+        neutralInactive: { normal: greyColor70, invert: greyColor15 },
     };
     return (react_1.default.createElement("h5", { style: __assign({ display: 'flex', alignItems: 'center', gap: '0.5rem' }, style) },
-        react_1.default.createElement("span", { className: 'SANS_2', style: { color: typeColor[type] } }, localize(text)),
-        link && (react_1.default.createElement("a", { style: { paddingLeft: '1rem', textDecoration: 'underline', color: invert ? white : greyColor100 }, href: link.url, target: "_blank" }, localize(link.text)))));
+        react_1.default.createElement("span", { className: 'SANS_2', style: { color: typeColor[type][invert ? 'invert' : 'normal'] } }, localize(text)),
+        link && (react_1.default.createElement("a", { className: 'SANS_2', style: { paddingLeft: '1rem', textDecoration: 'underline', color: invert ? white : greyColor100 }, href: link.url, target: "_blank" }, localize(link.text)))));
 };
 exports.InlineAlert = InlineAlert;

package/dist/components/Loader/BarLoader/index.d.ts

@@ -0,0 +1,7 @@
+export function BarLoader({ progress, text, children, isBlock, blockHeight, }: {
+    progress: any;
+    text: any;
+    children: any;
+    isBlock?: boolean;
+    blockHeight?: string;
+}): JSX.Element;

package/dist/components/Loader/BarLoader/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarLoader = void 0;
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../../Typo");
+var styled_1 = require("../styled");
+var BarLoader = function (_a) {
+    var progress = _a.progress, text = _a.text, children = _a.children, _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c;
+    var loaderWidth = 100; //maybe in the future this will be controlled by a size prop
+    var genLoader = function () { return (react_1.default.createElement(styled_1.StyledLoaderWrapper, { isBlock: isBlock },
+        react_1.default.createElement(styled_1.StyledHorLoader, { loaderWidth: loaderWidth },
+            react_1.default.createElement(styled_1.StyledHorLoadingBar, { loaderWidth: loaderWidth, progress: progress })),
+        (text || children) && react_1.default.createElement(Typo_1.SANS_2, { semibold: true }, text || children))); };
+    return !isBlock ? (genLoader()) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, { blockHeight: blockHeight }, genLoader()));
+};
+exports.BarLoader = BarLoader;

package/dist/components/Loader/CircleLoader/index.d.ts

@@ -0,0 +1,8 @@
+export function CircleLoader({ isBlock, blockHeight, L, S, M, ...props }: {
+    [x: string]: any;
+    isBlock?: boolean;
+    blockHeight?: string;
+    L: any;
+    S: any;
+    M: any;
+}): JSX.Element;

package/dist/components/Loader/CircleLoader/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CircleLoader = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
+var utils_1 = require("../utils");
+var styled_1 = require("../styled");
+function CircleLoader(_a) {
+    var _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c, L = _a.L, S = _a.S, M = _a.M, props = __rest(_a, ["isBlock", "blockHeight", "L", "S", "M"]);
+    var size = L ? 'L' : S ? 'S' : 'M'; //defaults to M if no L or S, so techinically, the M prop isnt really required..
+    var renderLoaderDiv = function () { return react_1.default.createElement(LoaderDiv, __assign({}, __assign(__assign({}, props), { isBlock: isBlock, size: size }))); };
+    return !isBlock ? (renderLoaderDiv()) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, { blockHeight: blockHeight }, renderLoaderDiv()));
+}
+exports.CircleLoader = CircleLoader;
+var LoaderDiv = function (_a) {
+    var size = _a.size, children = _a.children, _text = _a.text, debug = _a.debug, invert = _a.invert, isBlock = _a.isBlock;
+    var theme = (0, styled_components_1.useTheme)();
+    var text = _text || children;
+    var _b = (0, utils_1.getTypoAndLoaderDimensions)(size), TypoComp = _b.TypoComp, trackThickness = _b.trackThickness, diameter = _b.diameter;
+    return (react_1.default.createElement(styled_1.StyledLoaderWrapper, { isBlock: isBlock },
+        react_1.default.createElement(styled_1.StyledCircLoader, __assign({}, { diameter: diameter, trackThickness: trackThickness, invert: invert })),
+        (text || ((theme === null || theme === void 0 ? void 0 : theme.ENV) === "dev" && debug)) && (react_1.default.createElement(TypoComp, __assign({ invert: invert }, (size === 'L' ? { bold: true } : { semibold: true })), "".concat((theme === null || theme === void 0 ? void 0 : theme.ENV) === "dev" && debug ? "".concat(debug, " ") : "").concat(text || '')))));
+};

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

@@ -1,8 +1,2 @@
-export function Loader({ isBlock, blockHeight, L, S, M, ...props }: {
-    [x: string]: any;
-    isBlock?: boolean;
-    blockHeight?: string;
-    L: any;
-    S: any;
-    M: any;
-}): JSX.Element;
+export { BarLoader } from "./BarLoader";
+export { CircleLoader } from "./CircleLoader";

package/dist/components/Loader/index.js

@@ -1,48 +1,7 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Loader = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = require("styled-components");
-var utils_1 = require("./utils");
-var styled_1 = require("./styled");
-function Loader(_a) {
-    var _b = _a.isBlock, isBlock = _b === void 0 ? true : _b, _c = _a.blockHeight, blockHeight = _c === void 0 ? '100%' : _c, L = _a.L, S = _a.S, M = _a.M, props = __rest(_a, ["isBlock", "blockHeight", "L", "S", "M"]);
-    var size = L ? 'L' : S ? 'S' : 'M'; //defaults to M if no L or S, so techinically, the M prop isnt really required..
-    var renderLoaderDiv = function () { return react_1.default.createElement(LoaderDiv, __assign({}, __assign(__assign({}, props), { isBlock: isBlock, size: size }))); };
-    return !isBlock ? (renderLoaderDiv()) : (react_1.default.createElement(styled_1.StyledLoaderOverlay, { blockHeight: blockHeight }, renderLoaderDiv()));
-}
-exports.Loader = Loader;
-var LoaderDiv = function (_a) {
-    var size = _a.size, children = _a.children, _text = _a.text, debug = _a.debug, invert = _a.invert, isBlock = _a.isBlock;
-    var theme = (0, styled_components_1.useTheme)();
-    var text = _text || children;
-    var _b = (0, utils_1.getTypoAndLoaderDimensions)(size), TypoComp = _b.TypoComp, trackThickness = _b.trackThickness, diameter = _b.diameter;
-    return (react_1.default.createElement(styled_1.StyledLoaderWrapper, { isBlock: isBlock },
-        react_1.default.createElement(styled_1.StyledLoader, __assign({}, { diameter: diameter, trackThickness: trackThickness, invert: invert })),
-        (text || ((theme === null || theme === void 0 ? void 0 : theme.ENV) === "dev" && debug)) && (react_1.default.createElement(TypoComp, __assign({ invert: invert }, (size === 'L' ? { bold: true } : { semibold: true })), "".concat((theme === null || theme === void 0 ? void 0 : theme.ENV) === "dev" && debug ? "".concat(debug, " ") : "").concat(text || '')))));
-};
+exports.CircleLoader = exports.BarLoader = void 0;
+var BarLoader_1 = require("./BarLoader");
+Object.defineProperty(exports, "BarLoader", { enumerable: true, get: function () { return BarLoader_1.BarLoader; } });
+var CircleLoader_1 = require("./CircleLoader");
+Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return CircleLoader_1.CircleLoader; } });

package/dist/components/Loader/styled.d.ts

@@ -1,3 +1,5 @@
-export const StyledLoaderOverlay: any;
+export const StyledCircLoader: any;
 export const StyledLoaderWrapper: any;
-export const StyledLoader: any;
+export const StyledLoaderOverlay: any;
+export const StyledHorLoader: any;
+export const StyledHorLoadingBar: any;

package/dist/components/Loader/styled.js

@@ -27,25 +27,36 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledLoader = exports.StyledLoaderWrapper = exports.StyledLoaderOverlay = void 0;
+exports.StyledHorLoadingBar = exports.StyledHorLoader = exports.StyledLoaderOverlay = exports.StyledLoaderWrapper = exports.StyledCircLoader = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../themes/colors");
 var utilsOolib_1 = require("../../utilsOolib");
 var greyColor10 = colors_1.colors.greyColor10, greyColor70 = colors_1.colors.greyColor70, white = colors_1.colors.white;
 var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"], ["\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n"])));
-var StyledLoader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"], ["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"])), spin, function (_a) {
+exports.StyledCircLoader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"], ["\n  flex-shrink: 0;\n  display: inline-block;\n  animation: ", " 1.2s linear infinite;\n  border-radius: 50%;\n  ", "\n"])), spin, function (_a) {
     var diameter = _a.diameter, trackThickness = _a.trackThickness, invert = _a.invert, colors = _a.theme.colors;
     return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      width: ", "px;\n      height: ", "px;\n      border-style: solid;\n      border-width: ", "px;\n      border-color: ", ";\n      border-top-color: ", ";\n    "], ["\n      width: ", "px;\n      height: ", "px;\n      border-style: solid;\n      border-width: ", "px;\n      border-color: ", ";\n      border-top-color: ", ";\n    "])), diameter, diameter, trackThickness, invert ? greyColor70 : greyColor10, invert ? white : (0, utilsOolib_1.getPrimaryColor100)(colors));
 });
-exports.StyledLoader = StyledLoader;
-var StyledLoaderWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"])), function (_a) {
+exports.StyledLoaderWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n\n  ", ";\n"])), function (_a) {
     var isBlock = _a.isBlock;
     return isBlock && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "], ["\n    flex-direction: column;\n    justify-content: center;\n    gap: 1.2rem;\n    text-align: center;\n  "])));
 });
-exports.StyledLoaderWrapper = StyledLoaderWrapper;
-var StyledLoaderOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"], ["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"])), function (_a) {
+exports.StyledLoaderOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"], ["\n  background-color: transparent;\n  width: 100%;\n  height: ", ";\n  display: grid;\n  place-items: center;\n"])), function (_a) {
     var blockHeight = _a.blockHeight;
     return blockHeight;
 });
-exports.StyledLoaderOverlay = StyledLoaderOverlay;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+exports.StyledHorLoader = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"], ["\n  width: ", ";\n  height: 1rem;\n  position: relative;\n  border-radius: 1rem;\n  overflow: hidden;\n  border: 1px solid ", ";\n"])), function (_a) {
+    var loaderWidth = _a.loaderWidth;
+    return loaderWidth + 'px';
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
+});
+exports.StyledHorLoadingBar = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 100%;\n  background-color: ", ";\n  width: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return (0, utilsOolib_1.getPrimaryColor100)(theme.colors);
+}, function (_a) {
+    var progress = _a.progress, loaderWidth = _a.loaderWidth;
+    return (progress / 100) * loaderWidth + "px";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { GlobalStyles } from "./globalStyles";
 export * from "./themes/mixins";
 export * from "./components/Typo";
-export * from "./components/Loader";
 export * from "./components/Buttons";
 export * from "./components/Tags";
 export * from "./components/Breadcrumbs";
@@ -22,3 +21,4 @@ export { OKELink } from "./components/OKELink";
 export { Tooltip } from "./components/Tooltip";
 export { ActionMenu } from "./components/ActionMenu";
 export { PercentCompletedPi } from "./components/PercentCompletedPi";
+export { CircleLoader, BarLoader, CircleLoader as Loader } from "./components/Loader";

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.PercentCompletedPi = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.icons = exports.colors = exports.GlobalStyles = void 0;
+exports.PercentCompletedPi = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.Loader = exports.BarLoader = exports.CircleLoader = 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; } });
@@ -26,7 +26,11 @@ var icons_1 = require("./icons");
 Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return icons_1.icons; } });
 __exportStar(require("./components/Typo"), exports);
 //components
-__exportStar(require("./components/Loader"), exports);
+var Loader_1 = require("./components/Loader");
+Object.defineProperty(exports, "CircleLoader", { enumerable: true, get: function () { return Loader_1.CircleLoader; } });
+Object.defineProperty(exports, "BarLoader", { enumerable: true, get: function () { return Loader_1.BarLoader; } });
+var Loader_2 = require("./components/Loader"); //backwards compat till shen verifies
+Object.defineProperty(exports, "Loader", { enumerable: true, get: function () { return Loader_2.CircleLoader; } });
 __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);

package/package.json

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