oolib 2.31.2 → 2.31.4

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 (7) hide show
  1. package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle1/index.d.ts +7 -0
  2. package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle1/index.js +26 -0
  3. package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle2/index.d.ts +7 -0
  4. package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle2/index.js +25 -0
  5. package/dist/components/Modals/ModalLarge/index.js +11 -33
  6. package/dist/components/Modals/ModalLarge/styled.js +1 -1
  7. package/package.json +1 -1
package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle1/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export function ModalHeaderStyle1({ title, linkTo, onClose, setAnimPos, initAnimPos, }: {
2
+ title: any;
3
+ linkTo: any;
4
+ onClose: any;
5
+ setAnimPos: any;
6
+ initAnimPos: any;
7
+ }): any;
package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle1/index.js ADDED
@@ -0,0 +1,26 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ModalHeaderStyle1 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var Buttons_1 = require("../../../../Buttons");
9
+ var OKELink_1 = require("../../../../OKELink");
10
+ var Typo_1 = require("../../../../Typo");
11
+ var styled_1 = require("../../styled");
12
+ var ModalHeaderStyle1 = function (_a) {
13
+ var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
14
+ return (react_1.default.createElement(styled_1.StyledModalLargeHeader, null,
15
+ react_1.default.createElement("div", { style: {
16
+ display: "flex",
17
+ gap: "2.5rem",
18
+ alignItems: "center",
19
+ } },
20
+ !linkTo && title && (react_1.default.createElement("div", null,
21
+ react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
22
+ linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
23
+ react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 15, color: "black" }, title)))),
24
+ onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
25
+ };
26
+ exports.ModalHeaderStyle1 = ModalHeaderStyle1;
package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle2/index.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ export function ModalHeaderStyle2({ title, subtitle, onClose, setAnimPos, initAnimPos, }: {
2
+ title: any;
3
+ subtitle: any;
4
+ onClose: any;
5
+ setAnimPos: any;
6
+ initAnimPos: any;
7
+ }): any;
package/dist/components/Modals/ModalLarge/comps/ModalHeaderStyle2/index.js ADDED
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ModalHeaderStyle2 = void 0;
7
+ var react_1 = __importDefault(require("react"));
8
+ var Buttons_1 = require("../../../../Buttons");
9
+ var OKELink_1 = require("../../../../OKELink");
10
+ var Typo_1 = require("../../../../Typo");
11
+ var themes_1 = require("../../../../../themes");
12
+ var comps_1 = require("../../../../../utils/comps");
13
+ var styled_1 = require("../../styled");
14
+ var greyColor80 = themes_1.colors.greyColor80;
15
+ var ModalHeaderStyle2 = function (_a) {
16
+ var title = _a.title, subtitle = _a.subtitle, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
17
+ return (react_1.default.createElement(styled_1.StyledModalHeaderStyle2Container, null,
18
+ react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
19
+ react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
20
+ react_1.default.createElement(styled_1.StyledModalHeaderStyle2Title, null,
21
+ react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
22
+ subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
23
+ onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
24
+ };
25
+ exports.ModalHeaderStyle2 = ModalHeaderStyle2;
package/dist/components/Modals/ModalLarge/index.js CHANGED
@@ -27,38 +27,10 @@ exports.ModalLarge = void 0;
27
27
  var framer_motion_1 = require("framer-motion");
28
28
  var react_1 = __importStar(require("react"));
29
29
  var mixins_1 = require("../../../themes/mixins");
30
- var Buttons_1 = require("../../Buttons");
31
- var OKELink_1 = require("../../OKELink");
32
- var Typo_1 = require("../../Typo");
33
- var themes_1 = require("../../../themes");
34
- var comps_1 = require("../../../utils/comps");
35
30
  var useScreenWidth_1 = require("../../../utils/customHooks/useScreenWidth");
31
+ var ModalHeaderStyle1_1 = require("./comps/ModalHeaderStyle1");
32
+ var ModalHeaderStyle2_1 = require("./comps/ModalHeaderStyle2");
36
33
  var styled_1 = require("./styled");
37
- var greyColor80 = themes_1.colors.greyColor80;
38
- var ModalHeaderStyle1 = function (_a) {
39
- var title = _a.title, linkTo = _a.linkTo, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
40
- return (react_1.default.createElement(styled_1.StyledModalLargeHeader, null,
41
- react_1.default.createElement("div", { style: {
42
- display: "flex",
43
- gap: "2.5rem",
44
- alignItems: "center",
45
- } },
46
- !linkTo && title && (react_1.default.createElement("div", null,
47
- react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true }, title))),
48
- linkTo && (react_1.default.createElement(Typo_1.SANS_4, { semibold: true },
49
- react_1.default.createElement(OKELink_1.OKELink, { iconAfter: "ArrowLineUpRight", linkType: "action", onClick: function () { return window.open(linkTo); }, iconSize: 15, color: "black" }, title)))),
50
- onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } }))));
51
- };
52
- var ModalHeaderStyle2 = function (_a) {
53
- var title = _a.title, subtitle = _a.subtitle, onClose = _a.onClose, setAnimPos = _a.setAnimPos, initAnimPos = _a.initAnimPos;
54
- return (react_1.default.createElement(styled_1.StyledModalHeaderStyle2Container, null,
55
- react_1.default.createElement("div", { style: { position: "absolute", top: "-2.5rem" } },
56
- react_1.default.createElement(comps_1.DisplayIcon, { size: 20, icon: "ModalBulbIcon" })),
57
- react_1.default.createElement(styled_1.StyledModalHeaderStyle2Title, null,
58
- react_1.default.createElement(Typo_1.SANS_4_5, { semibold: true, capitalize: true }, title || "title"),
59
- subtitle ? (react_1.default.createElement(Typo_1.SANS_3_4, { semibold: true, capitalize: true, style: { flexGrow: "1" }, color: greyColor80 }, subtitle)) : null,
60
- onClose && (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "X", onClick: function () { return setAnimPos(initAnimPos); } })))));
61
- };
62
34
  var ModalLarge = function (_a) {
63
35
  var title = _a.title, onClose = _a.onClose, children = _a.children, linkTo = _a.linkTo, _b = _a.desktopWidth, desktopWidth = _b === void 0 ? "80%" : _b, _c = _a.headerStyle, headerStyle = _c === void 0 ? "style1" : _c, subtitle = _a.subtitle;
64
36
  var screenWidth = (0, useScreenWidth_1.useScreenWidth)();
@@ -72,8 +44,8 @@ var ModalLarge = function (_a) {
72
44
  }, []);
73
45
  var genHeader = function () {
74
46
  var headerStyles = {
75
- style1: ModalHeaderStyle1,
76
- style2: ModalHeaderStyle2,
47
+ style1: ModalHeaderStyle1_1.ModalHeaderStyle1,
48
+ style2: ModalHeaderStyle2_1.ModalHeaderStyle2,
77
49
  };
78
50
  var Comp = headerStyles[headerStyle];
79
51
  return (react_1.default.createElement(Comp, { title: title, subtitle: subtitle, setAnimPos: setAnimPos, linkTo: linkTo, onClose: onClose, initAnimPos: initAnimPos }));
@@ -95,7 +67,13 @@ var ModalLarge = function (_a) {
95
67
  type: "tween",
96
68
  ease: "easeOut",
97
69
  } }),
98
- screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(framer_motion_1.motion.div, { style: { position: "relative" }, initial: { marginTop: initAnimPos.marginTop }, animate: { marginTop: animPos.marginTop }, transition: {
70
+ screenWidth < (0, mixins_1.getBreakPoint)("sm") ? (react_1.default.createElement(framer_motion_1.motion.div, { style: {
71
+ position: "relative",
72
+ // --- the below ensures that if modal content is less that screen height, it only grow enough to fit content (from bottom)
73
+ minHeight: '100vh',
74
+ display: 'flex',
75
+ alignItems: 'flex-end'
76
+ }, initial: { marginTop: initAnimPos.marginTop }, animate: { marginTop: animPos.marginTop }, transition: {
99
77
  type: "tween",
100
78
  ease: "easeOut",
101
79
  }, onAnimationComplete: function () {
package/dist/components/Modals/ModalLarge/styled.js CHANGED
@@ -38,7 +38,7 @@ exports.StyledModalLargeBgColor = (0, styled_components_1.default)(framer_motion
38
38
  exports.StyledModalLargeContentWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n min-height: 50vh;\n max-height: 90vh;\n position: relative;\n overflow: ", ";\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"], ["\n width: 100%;\n margin-top: 4rem;\n background-color: ", ";\n ", "\n\n ", " {\n margin-top: 0;\n border: 2px solid ", ";\n width: ", ";\n min-height: 50vh;\n max-height: 90vh;\n position: relative;\n overflow: ", ";\n border-radius: 0.2rem;\n margin: 0 auto;\n }\n"])), white, function (_a) {
39
39
  var takeFullScreenOnScroll = _a.takeFullScreenOnScroll;
40
40
  return takeFullScreenOnScroll
41
- ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n min-height: calc(100vh - 4rem);\n "], ["\n min-height: calc(100vh - 4rem);\n "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "], ["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "])));
41
+ ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n /* min-height: calc(100vh - 4rem); */\n "], ["\n /* min-height: calc(100vh - 4rem); */\n "]))) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "], ["\n height: calc(100vh - 4rem);\n display: flex;\n flex-direction: column;\n "])));
42
42
  }, (0, mixins_1.mediaQuery)("sm"), white, function (_a) {
43
43
  var desktopWidth = _a.desktopWidth;
44
44
  return desktopWidth;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "2.31.2",
3
+ "version": "2.31.4",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",