oolib 2.1.7 → 2.1.11

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 (8) hide show
  1. package/dist/components/Breadcrumbs/index.js +24 -26
  2. package/dist/components/Breadcrumbs/index.styled.js +5 -4
  3. package/dist/components/Buttons/index.js +2 -2
  4. package/dist/themes/colors.d.ts +2 -0
  5. package/dist/themes/colors.js +2 -0
  6. package/dist/themes/mixins/index.d.ts +1 -0
  7. package/dist/themes/mixins/index.js +21 -10
  8. package/package.json +4 -4
package/dist/components/Breadcrumbs/index.js CHANGED
@@ -18,15 +18,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
18
18
  __setModuleDefault(result, mod);
19
19
  return result;
20
20
  };
21
- var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
22
- if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
23
- if (ar || !(i in from)) {
24
- if (!ar) ar = Array.prototype.slice.call(from, 0, i);
25
- ar[i] = from[i];
26
- }
27
- }
28
- return to.concat(ar || Array.prototype.slice.call(from));
29
- };
30
21
  Object.defineProperty(exports, "__esModule", { value: true });
31
22
  exports.Breadcrumbs = void 0;
32
23
  var react_1 = __importStar(require("react"));
@@ -34,8 +25,9 @@ var index_styled_1 = require("./index.styled");
34
25
  var Typo_1 = require("../Typo");
35
26
  var icons_1 = require("../../icons");
36
27
  var themes_1 = require("../../themes");
28
+ var mixins_1 = require("../../themes/mixins");
37
29
  var ArrowLeft = icons_1.phosphorIcons.ArrowLeft;
38
- var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100;
30
+ var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50;
39
31
  // links array will be taken from params in the future (react router)
40
32
  var Breadcrumbs = function (_a) {
41
33
  var links = _a.links, invert = _a.invert;
@@ -46,25 +38,31 @@ var Breadcrumbs = function (_a) {
46
38
  measuredContainer && setContainerWidth(measuredContainer.current.offsetWidth);
47
39
  }, []);
48
40
  (0, react_1.useLayoutEffect)(function () {
49
- var childrenWidth = __spreadArray([], measuredContainer.current.children, true).reduce(function (accum, el) { return accum + el.offsetWidth; }, 0);
50
- var isOverflowing = childrenWidth > (measuredContainer.current.offsetWidth * 0.88); // if exceeded 88% of the parent
41
+ if (containerWidth === 0)
42
+ return; // when the measuredRef isn't updated yet
43
+ var children = measuredContainer.current.children;
44
+ var isOverflowing = children[children.length - 1].getBoundingClientRect().right > containerWidth * 0.95; // if exceeds 87% of the parent
51
45
  if (isOverflowing)
52
46
  setBeConcise(true);
53
47
  }, [containerWidth]);
54
- if (containerWidth < 660) { // for small devices || the breadcrumbs is next to something and will only be < 660px
55
- return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
56
- react_1.default.createElement(index_styled_1.StyledLinkCrumb, { href: "#", invert: invert },
57
- react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor100 }),
58
- react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "Back"))));
48
+ if (containerWidth > (0, mixins_1.getBreakPoint)('md')) { // for large devices (not default since containerWidth is initialized to 0)
49
+ var linksDisplayed_1 = beConcise && links.length > 3 ? [links[0], { to: "", display: "..." }, links[links.length - 2], links[links.length - 1]] : links;
50
+ return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer }, linksDisplayed_1.map(function (link, ind) {
51
+ return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: link.to, invert: invert, key: ind, style: beConcise && ind == linksDisplayed_1.length - 1 ?
52
+ { width: (function () {
53
+ var children = measuredContainer.current.children;
54
+ var childrenCount = children.length;
55
+ var correctionFactor = 88;
56
+ return containerWidth - (children[0].scrollWidth + correctionFactor + (childrenCount > 2 &&
57
+ children[childrenCount - 2].scrollWidth)) + 'px';
58
+ })()
59
+ } : {} },
60
+ react_1.default.createElement(Typo_1.SANS_2, { style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, link.display)));
61
+ })));
59
62
  }
60
- var linksDisplayed = beConcise && links.length > 3 ? [links[0], "...", links[links.length - 2], links[links.length - 1]] : links;
61
- return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer }, linksDisplayed.map(function (link, ind) {
62
- if (link === "...") {
63
- return (react_1.default.createElement(index_styled_1.StyledLinkCrumb, { invert: invert },
64
- react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "...")));
65
- }
66
- 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%') } : {} },
67
- react_1.default.createElement(Typo_1.SANS_2, { invert: invert, style: { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' } }, link.display)));
68
- })));
63
+ return (react_1.default.createElement(index_styled_1.StyledBreadcrumbs, { ref: measuredContainer },
64
+ react_1.default.createElement(index_styled_1.StyledLinkCrumb, { to: links[links.length - 2], invert: invert },
65
+ react_1.default.createElement(ArrowLeft, { size: 14, weight: "bold", color: invert ? white : greyColor50 }),
66
+ react_1.default.createElement(Typo_1.SANS_2, { invert: invert }, "Back"))));
69
67
  };
70
68
  exports.Breadcrumbs = Breadcrumbs;
package/dist/components/Breadcrumbs/index.styled.js CHANGED
@@ -9,16 +9,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  Object.defineProperty(exports, "__esModule", { value: true });
10
10
  exports.StyledLinkCrumb = exports.StyledBreadcrumbs = void 0;
11
11
  var styled_components_1 = __importDefault(require("styled-components"));
12
+ var react_router_dom_1 = require("react-router-dom");
12
13
  var themes_1 = require("../../themes");
13
- var white = themes_1.colors.white, greyColor100 = themes_1.colors.greyColor100;
14
- 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"])));
14
+ var white = themes_1.colors.white, greyColor50 = themes_1.colors.greyColor50, greyColor100 = themes_1.colors.greyColor100;
15
+ 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"])));
15
16
  exports.StyledBreadcrumbs = StyledBreadcrumbs;
16
- 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) {
17
+ 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) {
17
18
  var invert = _a.invert;
18
19
  return invert ? white : greyColor100;
19
20
  }, function (_a) {
20
21
  var invert = _a.invert;
21
22
  return invert ? white : greyColor100;
22
- });
23
+ }, greyColor50);
23
24
  exports.StyledLinkCrumb = StyledLinkCrumb;
24
25
  var templateObject_1, templateObject_2;
package/dist/components/Buttons/index.js CHANGED
@@ -52,11 +52,11 @@ var ButtonStyledWrapper = function (_a) {
52
52
  };
53
53
  var Button = function (_a) {
54
54
  var props = _a.props, variant = _a.variant;
55
- var link = props.link, onClick = props.onClick, submit = props.submit;
55
+ var link = props.link, onClick = props.onClick;
56
56
  var handleOpenLink = function () {
57
57
  window.open(link === null || link === void 0 ? void 0 : link.val);
58
58
  };
59
- var buttonAction = submit ? null : onClick || handleOpenLink;
59
+ var buttonAction = link ? handleOpenLink : onClick;
60
60
  return (react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: buttonAction }), variant: variant }));
61
61
  };
62
62
  var ButtonPrimary = function (props) { return (react_1.default.createElement(Button, { props: props, variant: 'primary' })); };
package/dist/themes/colors.d.ts CHANGED
@@ -22,6 +22,7 @@ export namespace colors {
22
22
  export { greyColor80 };
23
23
  export { greyColor70 };
24
24
  export { greyColor40 };
25
+ export { greyColor50 };
25
26
  export { greyColor15 };
26
27
  export { greyColor10 };
27
28
  export { greyColor5 };
@@ -58,6 +59,7 @@ declare const greyColor100: "#383838";
58
59
  declare const greyColor80: "#606060";
59
60
  declare const greyColor70: "#747474";
60
61
  declare const greyColor40: "#afafaf";
62
+ declare const greyColor50: "#9B9B9B";
61
63
  declare const greyColor15: "#e1e1e1";
62
64
  declare const greyColor10: "#EBEBEB";
63
65
  declare const greyColor5: "#f5f5f5";
package/dist/themes/colors.js CHANGED
@@ -27,6 +27,7 @@ var black_opacity50 = 'rgba(0, 0, 0, 0.5)';
27
27
  var greyColor100 = '#383838';
28
28
  var greyColor80 = '#606060';
29
29
  var greyColor70 = '#747474';
30
+ var greyColor50 = '#9B9B9B';
30
31
  var greyColor40 = '#afafaf';
31
32
  var greyColor15 = '#e1e1e1';
32
33
  var greyColor10 = '#EBEBEB';
@@ -60,6 +61,7 @@ exports.colors = {
60
61
  greyColor80: greyColor80,
61
62
  greyColor70: greyColor70,
62
63
  greyColor40: greyColor40,
64
+ greyColor50: greyColor50,
63
65
  greyColor15: greyColor15,
64
66
  greyColor10: greyColor10,
65
67
  greyColor5: greyColor5,
package/dist/themes/mixins/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  export function mediaQuery(point: any): any;
2
+ export function getBreakPoint(point: any): 0 | 600 | 800 | 1000 | 1300 | 1600 | "pass a valid breakpoint";
2
3
  import { kpTransition } from "./kp-transitions";
3
4
  export { kpTransition };
package/dist/themes/mixins/index.js CHANGED
@@ -4,20 +4,31 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  return cooked;
5
5
  };
6
6
  Object.defineProperty(exports, "__esModule", { value: true });
7
- exports.kpTransition = exports.mediaQuery = void 0;
7
+ exports.kpTransition = exports.getBreakPoint = exports.mediaQuery = void 0;
8
8
  var styled_components_1 = require("styled-components");
9
9
  var kp_transitions_1 = require("./kp-transitions");
10
10
  Object.defineProperty(exports, "kpTransition", { enumerable: true, get: function () { return kp_transitions_1.kpTransition; } });
11
+ var getBreakPoint = function (point) {
12
+ switch (point) {
13
+ case "xs":
14
+ return 0;
15
+ case "sm":
16
+ return 600;
17
+ case "md":
18
+ return 800;
19
+ case "lg":
20
+ return 1000;
21
+ case "xl":
22
+ return 1300;
23
+ case "xxl":
24
+ return 1600;
25
+ default:
26
+ return 'pass a valid breakpoint';
27
+ }
28
+ };
29
+ exports.getBreakPoint = getBreakPoint;
11
30
  var mediaQuery = function (point) {
12
- var breakpoints = {
13
- xs: '0px',
14
- sm: '600px',
15
- md: '800px',
16
- lg: '1000px',
17
- xl: '1300px',
18
- xxl: '1600px',
19
- };
20
- 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]);
31
+ 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));
21
32
  };
22
33
  exports.mediaQuery = mediaQuery;
23
34
  var templateObject_1;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.1.7",
3
+ "version": "2.1.11",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -53,7 +53,8 @@
53
53
  },
54
54
  "peerDependencies": {
55
55
  "react": "^17.0.2",
56
- "react-dom": "^17.0.2"
56
+ "react-dom": "^17.0.2",
57
+ "react-router-dom": "^6.1.1"
57
58
  },
58
59
  "config": {
59
60
  "commitizen": {
@@ -69,7 +70,6 @@
69
70
  "draftjs-conductor": "^2.2.0",
70
71
  "immutable": "^3.7.6",
71
72
  "modularscale-js": "^3.0.1",
72
- "phosphor-react": "^1.3.1",
73
- "react-router-dom": "^6.1.1"
73
+ "phosphor-react": "^1.3.1"
74
74
  }
75
75
  }