oolib 2.1.8 → 2.2.0

package/dist/components/Breadcrumbs/index.js

@@ -18,15 +18,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Breadcrumbs = void 0;
 var react_1 = __importStar(require("react"));
@@ -34,8 +25,9 @@ var index_styled_1 = require("./index.styled");
 var Typo_1 = require("../Typo");
 var icons_1 = require("../../icons");
 var themes_1 = require("../../themes");
+var mixins_1 = require("../../themes/mixins");
 var ArrowLeft = icons_1.phosphorIcons.ArrowLeft;
-var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100;
+var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50;
 // links array will be taken from params in the future (react router)
 var Breadcrumbs = function (_a) {
     var links = _a.links, invert = _a.invert;
@@ -46,25 +38,31 @@ var Breadcrumbs = function (_a) {
         measuredContainer && setContainerWidth(measuredContainer.current.offsetWidth);
     }, []);
     (0, react_1.useLayoutEffect)(function () {
-        var childrenWidth = __spreadArray([], measuredContainer.current.children, true).reduce(function (accum, el) { return accum + el.offsetWidth; }, 0);
-        var isOverflowing = childrenWidth > (measuredContainer.current.offsetWidth * 0.88); // if exceeded 88% of the parent
+        if (containerWidth === 0)
+            return; // when the measuredRef isn't updated yet
+        var children = measuredContainer.current.children;
+        var isOverflowing = children[children.length - 1].getBoundingClientRect().right > containerWidth * 0.95; // if exceeds 87% of the parent
         if (isOverflowing)
             setBeConcise(true);
     }, [containerWidth]);
-    if (containerWidth < 660) { // for small devices || the breadcrumbs is next to something and will only be < 660px
-        return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
-            react_1.default.createElement(index_styled_1.StyledLinkCrumb, { href: "#", invert: invert },
-                react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor100 }),
-                react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "Back"))));
+    if (containerWidth > (0, mixins_1.getBreakPoint)('md')) { // for large devices (not default since containerWidth is initialized to 0)
+        var linksDisplayed_1 = beConcise && links.length > 3 ? [links[0], { to: "", display: "..." }, links[links.length - 2], links[links.length - 1]] : links;
+        return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer }, linksDisplayed_1.map(function (link, ind) {
+            return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: beConcise && ind == linksDisplayed_1.length - 1 ?
+                    { width: (function () {
+                            var children = measuredContainer.current.children;
+                            var childrenCount = children.length;
+                            var correctionFactor = 88;
+                            return containerWidth - (children[0].scrollWidth + correctionFactor + (childrenCount > 2 &&
+                                children[childrenCount - 2].scrollWidth)) + 'px';
+                        })()
+                    } : {} },
+                react_1.default.createElement(Typo_1.SANS_2, { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, link.display)));
+        })));
     }
-    var linksDisplayed = beConcise && links.length > 3 ? [links[0], "...", links[links.length - 2], links[links.length - 1]] : links;
-    return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer }, linksDisplayed.map(function (link, ind) {
-        if (link === "...") {
-            return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { invert: invert },
-                react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "...")));
-        }
-        return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { href: link.to, invert: invert, key: ind, style: beConcise && ind == linksDisplayed.length - 1 ? { width: (links.length >= 3 ? '40%' : '70%') } : {} },
-            react_1.default.createElement(Typo_1.SANS_2, { invert: invert, style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, link.display)));
-    })));
+    return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
+        react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: links[links.length - 2], invert: invert },
+            react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor50 }),
+            react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "Back"))));
 };
 exports.Breadcrumbs = Breadcrumbs;

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

@@ -9,16 +9,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLinkCrumb = exports.StyledBreadcrumbs = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
+var react_router_dom_1 = require("react-router-dom");
 var themes_1 = require("../../themes");
-var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100;
-var StyledBreadcrumbs = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0;\n  gap: 15px;\n  & a:last-child {\n    text-decoration: none;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0;\n  gap: 15px;\n  & a:last-child {\n    text-decoration: none;\n  }\n"])));
+var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50, greyColor100 = themes_1.colors.greyColor100;
+var StyledBreadcrumbs = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  gap: 15px;\n  overflow: hidden;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0.5rem 0;\n  gap: 15px;\n  overflow: hidden;\n"])));
 exports.StyledBreadcrumbs = StyledBreadcrumbs;
-var StyledLinkCrumb = styled_components_1.default.a(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child::after {content: none;}\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child::after {content: none;}\n"])), function (_a) {
+var StyledLinkCrumb = (0, styled_components_1.default)(react_router_dom_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child {color: ", "}\n  &:last-child::after {content: none;}\n"], ["\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  position: relative;\n  text-decoration: none;\n  color: ", ";\n  &::after {\n    content: \"\";\n    width: 1px;\n    height: 60%;\n    border-right: 1px solid ", ";\n    cursor: default;\n    position: absolute;\n    left: calc(100% + 7px);\n    top: 25%;\n  }\n  &:last-child {color: ", "}\n  &:last-child::after {content: none;}\n"])), function (_a) {
     var invert = _a.invert;
     return invert ? white : greyColor100;
 }, function (_a) {
     var invert = _a.invert;
     return invert ? white : greyColor100;
-});
+}, greyColor50);
 exports.StyledLinkCrumb = StyledLinkCrumb;
 var templateObject_1, templateObject_2;

package/dist/components/Buttons/index.js

@@ -52,11 +52,11 @@ var ButtonStyledWrapper = function (_a) {
 };
 var Button = function (_a) {
     var props = _a.props, variant = _a.variant;
-    var link = props.link, onClick = props.onClick, submit = props.submit;
+    var link = props.link, onClick = props.onClick;
     var handleOpenLink = function () {
         window.open(link === null || link === void 0 ? void 0 : link.val);
     };
-    var buttonAction = submit ? null : onClick || handleOpenLink;
+    var buttonAction = link ? handleOpenLink : onClick;
     return (react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }));
 };
 var ButtonPrimary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: 'primary' })); };

package/dist/icons/LetterH.d.ts

@@ -0,0 +1,4 @@
+export default LetterH;
+declare function LetterH({ role }: {
+    role: any;
+}): JSX.Element;

package/dist/icons/LetterH.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var LetterH = function (_a) {
+    var role = _a.role;
+    return (react_1.default.createElement("svg", { role: role, xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-letter-h", width: "14", height: "14", viewBox: "0 0 24 24", strokeWidth: "2.5", stroke: "currentColor", fill: "none", strokeLinejoin: "round" },
+        react_1.default.createElement("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+        react_1.default.createElement("line", { x1: "17", y1: "4", x2: "17", y2: "21" }),
+        react_1.default.createElement("line", { x1: "7", y1: "12", x2: "17", y2: "12" }),
+        react_1.default.createElement("line", { x1: "7", y1: "4", x2: "7", y2: "21" })));
+};
+exports.default = LetterH;

package/dist/icons/LetterP.d.ts

@@ -0,0 +1,6 @@
+export default LetterP;
+declare function LetterP({ role, dataStyle, dataStyleScope }: {
+    role: any;
+    dataStyle: any;
+    dataStyleScope: any;
+}): JSX.Element;

package/dist/icons/LetterP.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var LetterP = function (_a) {
+    var role = _a.role, dataStyle = _a.dataStyle, dataStyleScope = _a.dataStyleScope;
+    return (react_1.default.createElement("svg", { role: role, "data-style": dataStyle, "data-style-scope": dataStyleScope, xmlns: "http://www.w3.org/2000/svg", className: "icon icon-tabler icon-tabler-letter-p", width: "14", height: "14", viewBox: "0 0 24 24", strokeWidth: "2.5", stroke: "currentColor", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" },
+        react_1.default.createElement("path", { stroke: "none", d: "M0 0h24v24H0z" }),
+        react_1.default.createElement("path", { d: "M7 20v-16h5.5a4 4 0 0 1 0 9h-5.5" })));
+};
+exports.default = LetterP;

package/dist/icons/index.d.ts

@@ -57,7 +57,15 @@ export namespace phosphorIcons {
     export { Eye };
     export { EyeClosed };
     export { Minus };
+    export { TextHOne };
+    export { TextHTwo };
+    export { TextHThree };
+    export { TextBolder };
+    export { TextItalic };
+    export { TextUnderline };
     export { OkeGoogleIcon };
+    export { LetterH };
+    export { LetterP };
 }
 import { PencilSimple } from "phosphor-react";
 import { PencilLine } from "phosphor-react";
@@ -117,4 +125,12 @@ import { MagnifyingGlass } from "phosphor-react";
 import { Eye } from "phosphor-react";
 import { EyeClosed } from "phosphor-react";
 import { Minus } from "phosphor-react";
+import { TextHOne } from "phosphor-react";
+import { TextHTwo } from "phosphor-react";
+import { TextHThree } from "phosphor-react";
+import { TextBolder } from "phosphor-react";
+import { TextItalic } from "phosphor-react";
+import { TextUnderline } from "phosphor-react";
 import OkeGoogleIcon from "./OkeGoogleIcon";
+import LetterH from "./LetterH";
+import LetterP from "./LetterP";

package/dist/icons/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.phosphorIcons = void 0;
 var phosphor_react_1 = require("phosphor-react");
 var OkeGoogleIcon_1 = __importDefault(require("./OkeGoogleIcon"));
+var LetterH_1 = __importDefault(require("./LetterH"));
+var LetterP_1 = __importDefault(require("./LetterP"));
 exports.phosphorIcons = {
     PencilSimple: phosphor_react_1.PencilSimple,
     PencilLine: phosphor_react_1.PencilLine,
@@ -65,5 +67,13 @@ exports.phosphorIcons = {
     Eye: phosphor_react_1.Eye,
     EyeClosed: phosphor_react_1.EyeClosed,
     Minus: phosphor_react_1.Minus,
-    OkeGoogleIcon: OkeGoogleIcon_1.default
+    TextHOne: phosphor_react_1.TextHOne,
+    TextHTwo: phosphor_react_1.TextHTwo,
+    TextHThree: phosphor_react_1.TextHThree,
+    TextBolder: phosphor_react_1.TextBolder,
+    TextItalic: phosphor_react_1.TextItalic,
+    TextUnderline: phosphor_react_1.TextUnderline,
+    OkeGoogleIcon: OkeGoogleIcon_1.default,
+    LetterH: LetterH_1.default,
+    LetterP: LetterP_1.default
 };

package/dist/index.d.ts

@@ -6,3 +6,4 @@ export * from "./components/Tags";
 export * from "./components/Breadcrumbs";
 export * from "./components/BlockLabel";
 export { colors } from "./themes";
+export { phosphorIcons } from "./icons";

package/dist/index.js

@@ -10,13 +10,15 @@ 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.colors = exports.GlobalStyles = void 0;
+exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
 __exportStar(require("./components/Typo"), exports);
 __exportStar(require("./components/Loader"), exports);
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return themes_1.colors; } });
+var icons_1 = require("./icons");
+Object.defineProperty(exports, "phosphorIcons", { enumerable: true, get: function () { return icons_1.phosphorIcons; } });
 __exportStar(require("./components/Buttons"), exports);
 __exportStar(require("./components/Tags"), exports);
 __exportStar(require("./components/Breadcrumbs"), exports);

package/dist/themes/colors.d.ts

@@ -22,6 +22,7 @@ export namespace colors {
     export { greyColor80 };
     export { greyColor70 };
     export { greyColor40 };
+    export { greyColor50 };
     export { greyColor15 };
     export { greyColor10 };
     export { greyColor5 };
@@ -58,6 +59,7 @@ declare const greyColor100: "#383838";
 declare const greyColor80: "#606060";
 declare const greyColor70: "#747474";
 declare const greyColor40: "#afafaf";
+declare const greyColor50: "#9B9B9B";
 declare const greyColor15: "#e1e1e1";
 declare const greyColor10: "#EBEBEB";
 declare const greyColor5: "#f5f5f5";

package/dist/themes/colors.js

@@ -61,6 +61,7 @@ exports.colors = {
     greyColor80: greyColor80,
     greyColor70: greyColor70,
     greyColor40: greyColor40,
+    greyColor50: greyColor50,
     greyColor15: greyColor15,
     greyColor10: greyColor10,
     greyColor5: greyColor5,

package/dist/themes/mixins/index.d.ts

@@ -1,3 +1,4 @@
 export function mediaQuery(point: any): any;
+export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 | "pass a valid breakpoint";
 import { kpTransition } from "./kp-transitions";
 export { kpTransition };

package/dist/themes/mixins/index.js

@@ -4,20 +4,31 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.kpTransition = exports.mediaQuery = void 0;
+exports.kpTransition = exports.getBreakPoint = exports.mediaQuery = void 0;
 var styled_components_1 = require("styled-components");
 var kp_transitions_1 = require("./kp-transitions");
 Object.defineProperty(exports, "kpTransition", { enumerable: true, get: function () { return kp_transitions_1.kpTransition; } });
+var getBreakPoint = function (point) {
+    switch (point) {
+        case "xs":
+            return 0;
+        case "sm":
+            return 600;
+        case "md":
+            return 800;
+        case "lg":
+            return 1000;
+        case "xl":
+            return 1300;
+        case "xxl":
+            return 1600;
+        default:
+            return 'pass a valid breakpoint';
+    }
+};
+exports.getBreakPoint = getBreakPoint;
 var mediaQuery = function (point) {
-    var breakpoints = {
-        xs: '0px',
-        sm: '600px',
-        md: '800px',
-        lg: '1000px',
-        xl: '1300px',
-        xxl: '1600px',
-    };
-    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["@media only screen and (min-width: ", ")"], ["@media only screen and (min-width: ", ")"])), breakpoints[point]);
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["@media only screen and (min-width: ", "px)"], ["@media only screen and (min-width: ", "px)"])), getBreakPoint(point));
 };
 exports.mediaQuery = mediaQuery;
 var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.1.8",
+  "version": "2.2.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,7 +53,8 @@
   },
   "peerDependencies": {
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.1.1"
   },
   "config": {
     "commitizen": {
@@ -69,7 +70,6 @@
     "draftjs-conductor": "^2.2.0",
     "immutable": "^3.7.6",
     "modularscale-js": "^3.0.1",
-    "phosphor-react": "^1.3.1",
-    "react-router-dom": "^6.1.1"
+    "phosphor-react": "^1.3.1"
   }
 }