oolib 2.153.1 → 2.154.0

package/dist/v2/components/cards/ListContent/index.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListContent = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = require("styled-components");
+var injectHttps_1 = require("../../../../utils/injectHttps");
+var utilsOolib_1 = require("../../../../utilsOolib");
+var ImageInput_1 = require("../../../../components/ImageInput");
+var Tags_1 = require("../../Tags");
+var VideoInput_1 = __importDefault(require("../../../../components/VideoInput"));
+var MetaBlock_1 = __importDefault(require("../../MetaBlock"));
+var ImagePlaceholder_1 = require("../../ImagePlaceholder");
+var LineClampWrapper_1 = require("../comps/LineClampWrapper");
+var styled_1 = require("../styled");
+var decideLinkCompAndTarget_1 = require("../utils/decideLinkCompAndTarget");
+var dontRenderIfBothOnClickAndTo_1 = require("../utils/dontRenderIfBothOnClickAndTo");
+var mediaDataExists_1 = require("../utils/mediaDataExists");
+var parseCardConfig_1 = require("../utils/parseCardConfig");
+var ProfileImageInput_1 = require("../../../../components/ImageInput/derivedComps/ProfileImageInput");
+var _EXPORTS_1 = require("../../../../utils/_EXPORTS");
+var mixins_1 = require("../../../../themes/mixins");
+var themes_1 = require("../../../themes");
+var icons_1 = require("../../../../icons");
+var styled_js_1 = require("./styled.js");
+var white = themes_1.colors.white;
+var Star = icons_1.icons.Star;
+var CustomTag = function (_a) {
+    var displayText = _a.displayText, tagVariant = _a.tagVariant, bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
+    return displayText ? (react_1.default.createElement(styled_js_1.StyledTagWrapper, { bothTagsDisplayTogether: bothTagsDisplayTogether },
+        react_1.default.createElement(Tags_1.TagDisplay, { display: displayText, title: displayText, variant: tagVariant || "primary", XS: true }))) : null;
+};
+var ListContent = function (_a) {
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b, //alt = profile
+    highlight = _a.highlight;
+    var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
+    var screenWidth = (0, _EXPORTS_1.useScreenWidth)();
+    var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
+    var _c = (0, parseCardConfig_1.parseCardConfig)({
+        config: config,
+        data: data,
+        parseSpecialSyntax: parseSpecialSyntax,
+    }), cardLabel = _c.cardLabel, title = _c.title, video = _c.video, image = _c.image, metaBlock = _c.metaBlock;
+    var bothTagsDisplayTogether = cardLabel && statusTag;
+    var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
+    if (dontRenderRes)
+        return dontRenderRes;
+    var _d = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({
+        to: to,
+        openInNewTab: openInNewTab,
+    }), LinkComp = _d.LinkComp, target = _d.target;
+    var mediaConfigExists = config.video || config.image;
+    return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
+        react_1.default.createElement(styled_js_1.StyledListElemContainer, { id: id, onClick: onClick ? function (e) { return onClick(e, data); } : undefined, mediaConfigExists: mediaConfigExists },
+            react_1.default.createElement(styled_js_1.StyledListWrapper, null,
+                variant === "content" ? (mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledContentModule, null, (0, mediaDataExists_1.imageDataExists)(image) ? (react_1.default.createElement(ImageInput_1.ImageInput, { stretchToFullHeight: true, value: image, aspectRatio: "5/3", readOnly: true, enableCaptions: false, disableImageBorder: true, defaultImageSpread: "cover" })) : (0, mediaDataExists_1.videoDataExists)(video) ? (react_1.default.createElement(styled_js_1.StyledVideoWrapper, null,
+                    react_1.default.createElement(VideoInput_1.default, { value: video, readOnly: true, light: true, height: "100%" }),
+                    react_1.default.createElement(styled_js_1.StyledVideoOverlay, null))) : (react_1.default.createElement(ImagePlaceholder_1.ImagePlaceholder, { title: title, aspectRatio: "13/10", height: "100%" }))))) : (react_1.default.createElement(styled_js_1.StyledContentModule2, null,
+                    react_1.default.createElement(ProfileImageInput_1.ProfileImageInput, { readOnly: true, value: image, size: screenWidth >= (0, mixins_1.getBreakPoint)('sm') ? 60 : 70, imageTitle: title }))),
+                react_1.default.createElement(styled_js_1.StyledMainSection, null,
+                    react_1.default.createElement("div", null,
+                        (cardLabel || statusTag) && mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { mediaConfigExists: mediaConfigExists, highlight: highlight },
+                            react_1.default.createElement(CustomTag, { displayText: cardLabel, bothTagsDisplayTogether: bothTagsDisplayTogether }),
+                            react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: "positive", bothTagsDisplayTogether: bothTagsDisplayTogether }))),
+                        title ? (react_1.default.createElement(styled_js_1.StyledTitleWrapper, { highlight: highlight, mediaConfigExists: mediaConfigExists },
+                            react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 4, noOfLines_D: 3, title: title },
+                                react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
+                                    react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
+                    (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledMetaBlockWrapper, { mediaConfigExists: mediaConfigExists },
+                        react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }))),
+                    ((metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 || cardLabel || statusTag) && !mediaConfigExists && (react_1.default.createElement(styled_js_1.StyledMetaBlockAndTagsWrapper, null,
+                        react_1.default.createElement(styled_js_1.StyledLabelAndStatusTagWrapper, { highlight: highlight },
+                            react_1.default.createElement(CustomTag, { displayText: cardLabel, bothTagsDisplayTogether: bothTagsDisplayTogether }),
+                            react_1.default.createElement(CustomTag, { displayText: statusTag, tagVariant: "positive", bothTagsDisplayTogether: bothTagsDisplayTogether })),
+                        (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement(styled_js_1.StyledMetaBlockWrapper, { mediaConfigExists: mediaConfigExists },
+                            react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock, align: "right" })))))),
+                highlight && (react_1.default.createElement(styled_js_1.StyledStarWrapper, null,
+                    react_1.default.createElement(Star, { size: 16, color: white, weight: "fill", style: { filter: "drop-shadow(0px 2px 8.2px rgba(0, 0, 0, 0.50 ))" } })))))));
+};
+exports.ListContent = ListContent;

package/dist/v2/components/cards/ListContent/styled.d.ts

@@ -0,0 +1,13 @@
+export const StyledListElemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledListWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledStarWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledContentModule: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledVideoWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledVideoOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMainSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTitleWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledLabelAndStatusTagWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTagWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMetaBlockWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMetaBlockAndTagsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledContentModule2: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/v2/components/cards/ListContent/styled.js

@@ -0,0 +1,56 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledContentModule2 = exports.StyledMetaBlockAndTagsWrapper = exports.StyledMetaBlockWrapper = exports.StyledTagWrapper = exports.StyledLabelAndStatusTagWrapper = exports.StyledTitleWrapper = exports.StyledMainSection = exports.StyledVideoOverlay = exports.StyledVideoWrapper = exports.StyledContentModule = exports.StyledStarWrapper = exports.StyledListWrapper = exports.StyledListElemContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var themes_1 = require("../../../themes");
+var mixins_1 = require("../../../../themes/mixins");
+var grey50 = themes_1.colors.grey50, yellow = themes_1.colors.yellow, white = themes_1.colors.white;
+var SIZE_OF_HIGHLIGHT = "28px";
+var SIZE_OF_META_BLOCK_WRAPPER = "19rem";
+exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  padding-inline: 12px;\n  padding-block: ", ";\n  cursor: pointer;\n  border-radius: 8px;\n  border: 1px solid ", ";\n\n  ", " {\n    &:hover {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n    }\n  }\n"], ["\n  height: 100%;\n  width: 100%;\n  padding-inline: 12px;\n  padding-block: ", ";\n  cursor: pointer;\n  border-radius: 8px;\n  border: 1px solid ", ";\n\n  ", " {\n    &:hover {\n      border: 1px solid ", ";\n      box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.12);\n    }\n  }\n"])), function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "12px" : "14px";
+}, white, (0, mixins_1.mediaQuery)("sm"), grey50);
+exports.StyledListWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 12px;\n  position: relative;\n"], ["\n  display: flex;\n  gap: 12px;\n  position: relative;\n"])));
+exports.StyledStarWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: ", ";\n  height: ", ";\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n  background-color: ", "; \n  border-radius: 4px;\n"], ["\n  width: ", ";\n  height: ", ";\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex; \n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n  background-color: ", "; \n  border-radius: 4px;\n"])), SIZE_OF_HIGHLIGHT, SIZE_OF_HIGHLIGHT, yellow);
+exports.StyledContentModule = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  min-height: 91px;\n  min-width: 121px;\n  width: 121px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: 4px;\n\n  ", " {\n    min-height: 120px;\n    min-width: 159px;\n    width: 159px;\n  }\n"], ["\n  min-height: 91px;\n  min-width: 121px;\n  width: 121px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  position: relative;\n  border-radius: 4px;\n\n  ", " {\n    min-height: 120px;\n    min-width: 159px;\n    width: 159px;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+exports.StyledVideoWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  height: 100%;\n  position: relative;\n"])));
+exports.StyledVideoOverlay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n"])));
+exports.StyledMainSection = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: hidden;\n"], ["\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: hidden;\n"])));
+exports.StyledTitleWrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: ", " ; // this condition avoids title from being cutoff\n"], ["\n  width: ", " ; // this condition avoids title from being cutoff\n"])), function (_a) {
+    var highlight = _a.highlight, mediaConfigExists = _a.mediaConfigExists;
+    return highlight && !mediaConfigExists ? "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)") : '100%';
+});
+exports.StyledLabelAndStatusTagWrapper = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  width: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  gap: 6px;\n"], ["\n  width: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  gap: 6px;\n"])), function (_a) {
+    var highlight = _a.highlight, mediaConfigExists = _a.mediaConfigExists;
+    if (mediaConfigExists && highlight)
+        return "calc(100% - ".concat(SIZE_OF_HIGHLIGHT, " - 6px)"); // 6px gap between highlight and tag
+    else if (mediaConfigExists && !highlight)
+        return "100%";
+    else if (!mediaConfigExists)
+        return "calc(100% - ".concat(SIZE_OF_META_BLOCK_WRAPPER, ")");
+}, function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "8px" : "0px";
+});
+exports.StyledTagWrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  max-width: ", "; // 3px is the half of the space between tags\n"], ["\n  max-width: ", "; // 3px is the half of the space between tags\n"])), function (_a) {
+    var bothTagsDisplayTogether = _a.bothTagsDisplayTogether;
+    return bothTagsDisplayTogether ? "calc(50% - 3px)" : "100%";
+});
+exports.StyledMetaBlockWrapper = styled_components_1.default.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  width: ", ";\n  margin-top: ", ";\n"], ["\n  width: ", ";\n  margin-top: ", ";\n"])), function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "auto" : SIZE_OF_META_BLOCK_WRAPPER;
+}, function (_a) {
+    var mediaConfigExists = _a.mediaConfigExists;
+    return mediaConfigExists ? "4px" : "0px";
+});
+exports.StyledMetaBlockAndTagsWrapper = styled_components_1.default.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  width: 100%;\n  margin-top: 10px;\n  display: flex;\n  justify-content: space-between;\n"], ["\n  width: 100%;\n  margin-top: 10px;\n  display: flex;\n  justify-content: space-between;\n"])));
+exports.StyledContentModule2 = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  flex-direction: column-reverse;\n  justify-content: flex-end;\n  align-items: flex-end;\n  gap: 1rem;\n  flex-shrink: 0;\n  ", " {\n    flex-direction: row;\n    align-items: center;\n  }\n"])), (0, mixins_1.mediaQuery)("sm"));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/package.json

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