oolib 2.61.4 → 2.62.0
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.
package/.babelrc.json
ADDED
|
@@ -39,7 +39,7 @@ var ListContent = function (_a) {
|
|
|
39
39
|
}), LinkComp = _d.LinkComp, target = _d.target, externalUrl = _d.externalUrl;
|
|
40
40
|
return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
|
|
41
41
|
react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick },
|
|
42
|
-
react_1.default.createElement(styled_js_1.StyledListWrapper,
|
|
42
|
+
react_1.default.createElement(styled_js_1.StyledListWrapper, { mediaConfigExists: config.video || config.image /*cuz if it does space needs to be allocated for it */ },
|
|
43
43
|
react_1.default.createElement(styled_js_1.StyledHeader, null,
|
|
44
44
|
react_1.default.createElement(styled_js_1.StyledStatusTagCardLabelWrapper, null,
|
|
45
45
|
cardLabel && (react_1.default.createElement("div", { title: cardLabel },
|
|
@@ -53,7 +53,7 @@ var ListContent = function (_a) {
|
|
|
53
53
|
react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, noOfLines_D: 3, title: title },
|
|
54
54
|
react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
|
|
55
55
|
react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null,
|
|
56
|
-
react_1.default.createElement(
|
|
56
|
+
react_1.default.createElement("div", { style: { width: '100%' } }, (metaBlockData === null || metaBlockData === void 0 ? void 0 : metaBlockData.length) > 0 && (react_1.default.createElement(CardMetaBlock_1.default, { value: metaBlockData.slice(0, 3) }) // show only three metas for listContent
|
|
57
57
|
))),
|
|
58
58
|
react_1.default.createElement(styled_js_1.StyledContentModule2, null,
|
|
59
59
|
(video === null || video === void 0 ? void 0 : video.length) > 0 && (react_1.default.createElement(styled_js_1.StyledMediaWrapper, null,
|
|
@@ -5,4 +5,3 @@ export const StyledLabel: import("styled-components").StyledComponent<(props: an
|
|
|
5
5
|
export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
6
|
export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
7
|
export const StyledMediaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
|
-
export const StyledMeta: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
8
8
|
};
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
|
-
exports.
|
|
10
|
+
exports.StyledMediaWrapper = exports.StyledContentModule2 = exports.StyledListWrapper = exports.StyledLabel = exports.StyledHeader = exports.StyledStatusTagCardLabelWrapper = exports.StyledListElemContainer = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var themes_1 = require("../../../themes");
|
|
13
13
|
var mixins_1 = require("../../../themes/mixins");
|
|
@@ -16,9 +16,20 @@ var styled_1 = require("../styled");
|
|
|
16
16
|
exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-bottom: 1px solid ", ";\n margin-bottom: 2rem;\n padding-bottom: 2rem;\n cursor: pointer;\n &:hover {\n ", ";\n }\n"], ["\n border-bottom: 1px solid ", ";\n margin-bottom: 2rem;\n padding-bottom: 2rem;\n cursor: pointer;\n &:hover {\n ", ";\n }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
|
|
17
17
|
exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n"], ["\n display: flex;\n gap: 1rem;\n align-items: center;\n flex-wrap: wrap;\n"])));
|
|
18
18
|
exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n gap: .7rem;\n"], ["\n display: flex;\n align-items: flex-start;\n flex-direction: column;\n flex-wrap: wrap;\n gap: .7rem;\n"])));
|
|
19
|
-
exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n max-width: 23rem;\n ", "{\n max-width: 40rem;\n }\n"], ["\n ", ";\n max-width: 23rem;\n ", "{\n max-width: 40rem;\n }\n"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var
|
|
19
|
+
exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n ", ";\n max-width: 23rem;\n ", "{\n max-width: 40rem;\n }\n"], ["\n ", ";\n max-width: 23rem;\n ", "{\n max-width: 40rem;\n }\n"
|
|
20
|
+
/** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
|
|
21
|
+
])), mixins_1.ellipsis, (0, mixins_1.mediaQuery)("sm"));
|
|
22
|
+
/** the absolute positioning based approach is required, else the ellipsis causes UI glitches */
|
|
23
|
+
var mediaPadding = 20;
|
|
24
|
+
var mediaContainerWidth = 70;
|
|
25
|
+
var mediaContainerWidth_SM = 60;
|
|
26
|
+
exports.StyledListWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: auto;\n padding-right: ", ";\n position: relative;\n ", " {\n padding-right: ", ";\n }\n"], ["\n width: auto;\n padding-right: ", ";\n position: relative;\n ", " {\n padding-right: ", ";\n }\n"])), function (_a) {
|
|
27
|
+
var mediaConfigExists = _a.mediaConfigExists;
|
|
28
|
+
return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth, "px");
|
|
29
|
+
}, (0, mixins_1.mediaQuery)("sm"), function (_a) {
|
|
30
|
+
var mediaConfigExists = _a.mediaConfigExists;
|
|
31
|
+
return mediaConfigExists && "".concat((2 * mediaPadding) + mediaContainerWidth_SM, "px");
|
|
32
|
+
});
|
|
33
|
+
exports.StyledContentModule2 = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n right: 0;\n top: 0;\n transform: translateY(0);\n justify-content: center;\n display: flex;\n align-items: flex-end;\n padding: 0 ", "px;\n row-gap: 1rem;\n column-gap: 0;\n flex-direction: column-reverse;\n ", " {\n top: 50%;\n transform: translateY(-50%); \n flex-direction: row;\n align-items: center;\n row-gap: 0;\n column-gap: 1rem;\n }\n"], ["\n position: absolute;\n right: 0;\n top: 0;\n transform: translateY(0);\n justify-content: center;\n display: flex;\n align-items: flex-end;\n padding: 0 ", "px;\n row-gap: 1rem;\n column-gap: 0;\n flex-direction: column-reverse;\n ", " {\n top: 50%;\n transform: translateY(-50%); \n flex-direction: row;\n align-items: center;\n row-gap: 0;\n column-gap: 1rem;\n }\n"])), mediaPadding, (0, mixins_1.mediaQuery)("sm"));
|
|
34
|
+
exports.StyledMediaWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: ", "px;\n height: 84px;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n flex-wrap: wrap;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"], ["\n width: ", "px;\n height: 84px;\n display: flex;\n flex-direction: column;\n align-items: center;\n overflow: hidden;\n flex-wrap: wrap;\n ", " {\n width: ", "px;\n height: 6rem;\n }\n"])), mediaContainerWidth, (0, mixins_1.mediaQuery)("sm"), mediaContainerWidth_SM);
|
|
35
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
@@ -34,16 +34,18 @@ var react_1 = __importStar(require("react"));
|
|
|
34
34
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
35
35
|
var themes_1 = require("../../../../themes");
|
|
36
36
|
var Typo_1 = require("../../../Typo");
|
|
37
|
+
var mixins_1 = require("../../../../themes/mixins");
|
|
37
38
|
var greyColor100 = themes_1.colors.greyColor100;
|
|
38
39
|
var StyledContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n"], ["\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-wrap: wrap;\n"])));
|
|
39
|
-
var StyledMetaWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex; \n align-items: center;\n"], ["\n display: flex; \n align-items: center;\n"])));
|
|
40
|
-
var
|
|
40
|
+
var StyledMetaWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex; \n align-items: center;\n max-width: 50%;\n"], ["\n display: flex; \n align-items: center;\n max-width: 50%;\n"])));
|
|
41
|
+
var STYLED_SANS_2 = (0, styled_components_1.default)(Typo_1.SANS_2)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mixins_1.ellipsis);
|
|
42
|
+
var StyledSeparator = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 0.3rem;\n height: 0.3rem;\n border-radius: 50%;\n background-color: ", ";\n"], ["\n width: 0.3rem;\n height: 0.3rem;\n border-radius: 50%;\n background-color: ", ";\n"])), greyColor100);
|
|
41
43
|
var CardMetaBlock = function (_a) {
|
|
42
44
|
var value = _a.value;
|
|
43
45
|
return (react_1.default.createElement(StyledContainer, null, value.map(function (v, i) { return (react_1.default.createElement(react_1.Fragment, null,
|
|
44
46
|
react_1.default.createElement(StyledMetaWrapper, { key: i },
|
|
45
|
-
react_1.default.createElement(
|
|
47
|
+
react_1.default.createElement(STYLED_SANS_2, { capitalize: true }, v)),
|
|
46
48
|
i + 1 === value.length ? null : react_1.default.createElement(StyledSeparator, null))); })));
|
|
47
49
|
};
|
|
48
50
|
exports.default = CardMetaBlock;
|
|
49
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
51
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "oolib",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.62.0",
|
|
4
4
|
"description": " OKE Component Library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"scripts": {
|
|
8
8
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
9
9
|
"copy-files": "copyfiles --up 1 src/assets/*/* dist",
|
|
10
|
-
"start": "
|
|
11
|
-
"build-storybook": "build
|
|
10
|
+
"start": "storybook dev -p 6006",
|
|
11
|
+
"build-storybook": "storybook build",
|
|
12
12
|
"build": "npx tsc",
|
|
13
13
|
"prebuild": "rm -rf dist",
|
|
14
14
|
"postbuild": "npm run copy-files",
|
|
@@ -44,15 +44,16 @@
|
|
|
44
44
|
"homepage": "https://github.com/ooloi-labs/oolib#readme",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@babel/core": "^7.15.5",
|
|
47
|
-
"@babel/preset-env": "^7.
|
|
48
|
-
"@babel/preset-react": "^7.
|
|
49
|
-
"@
|
|
50
|
-
"@storybook/addon-
|
|
51
|
-
"@storybook/addon-
|
|
52
|
-
"@storybook/addon-
|
|
53
|
-
"@storybook/
|
|
54
|
-
"@storybook/
|
|
55
|
-
"@storybook/react": "^
|
|
47
|
+
"@babel/preset-env": "^7.22.9",
|
|
48
|
+
"@babel/preset-react": "^7.22.5",
|
|
49
|
+
"@babel/preset-typescript": "^7.22.5",
|
|
50
|
+
"@storybook/addon-actions": "^7.2.1",
|
|
51
|
+
"@storybook/addon-docs": "^7.2.1",
|
|
52
|
+
"@storybook/addon-essentials": "^7.2.1",
|
|
53
|
+
"@storybook/addon-links": "^7.2.1",
|
|
54
|
+
"@storybook/mdx2-csf": "^1.1.0",
|
|
55
|
+
"@storybook/react": "^7.2.1",
|
|
56
|
+
"@storybook/react-webpack5": "^7.2.1",
|
|
56
57
|
"@types/styled-components": "^5.1.26",
|
|
57
58
|
"babel-loader": "^8.2.2",
|
|
58
59
|
"babel-plugin-styled-components": "^1.13.2",
|
|
@@ -64,7 +65,8 @@
|
|
|
64
65
|
"react-dom": "^17.0.2",
|
|
65
66
|
"react-json-view": "^1.21.3",
|
|
66
67
|
"react-router-dom": "^5.1.2",
|
|
67
|
-
"semantic-release": "^18.0.0"
|
|
68
|
+
"semantic-release": "^18.0.0",
|
|
69
|
+
"storybook": "^7.2.1"
|
|
68
70
|
},
|
|
69
71
|
"peerDependencies": {
|
|
70
72
|
"framer-motion": "^4.1.17",
|