oolib 2.123.0 → 2.124.1

package/dist/components/Tags/Comps/TagDisplay/index.d.ts

@@ -7,6 +7,7 @@ export interface TagDisplayProps {
     XS?: boolean;
     tagColor?: string;
     textColor?: string;
+    color?: 'red' | 'green' | 'black';
     variant?: 'primary' | 'secondary';
 }
 /**
@@ -19,6 +20,7 @@ export interface TagDisplayProps {
  * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
  * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
  * @prop {string} [tagColor] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {red | green | black} [color] : A string indicating the background color of the component. Defaults to undefined.
  * @prop {string} [textColor] : A string indicating the text color of the component. Defaults to undefined.
  * @prop {('primary' | 'secondary')} [variant] : A string indicating the variant of the component. Defaults to "primary".
  * @return {ReactElement} The rendered TagDisplay component.

package/dist/components/Tags/Comps/TagDisplay/index.js

@@ -17,15 +17,16 @@ var getTypoComp_1 = require("../../utils/getTypoComp");
  * @prop {boolean} [M] : A boolean indicating whether the component should render at the large size. Defaults to false.
  * @prop {boolean} [XS] : A boolean indicating whether the component should render at the extra small size. Defaults to false.
  * @prop {string} [tagColor] : A string indicating the background color of the component. Defaults to undefined.
+ * @prop {red | green | black} [color] : A string indicating the background color of the component. Defaults to undefined.
  * @prop {string} [textColor] : A string indicating the text color of the component. Defaults to undefined.
  * @prop {('primary' | 'secondary')} [variant] : A string indicating the variant of the component. Defaults to "primary".
  * @return {ReactElement} The rendered TagDisplay component.
  */
 var TagDisplay = function (_a) {
-    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
+    var display = _a.display, style = _a.style, invert = _a.invert, M = _a.M, XS = _a.XS, tagColor = _a.tagColor, textColor = _a.textColor, color = _a.color, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b;
     var size = M ? 'M' : XS ? 'XS' : 'S';
     var TYPO_COMP = (0, getTypoComp_1.getTypoComp)(size);
-    return (react_1.default.createElement(styled_1.StyledTagDisplay, { variant: variant, invert: invert, textColor: textColor, tagColor: tagColor, size: size, style: style },
+    return (react_1.default.createElement(styled_1.StyledTagDisplay, { variant: variant, invert: invert, textColor: textColor, tagColor: tagColor, size: size, style: style, color: color },
         react_1.default.createElement(TYPO_COMP, null, display)));
 };
 exports.TagDisplay = TagDisplay;

package/dist/components/Tags/Comps/TagDisplay/styled.d.ts

@@ -5,5 +5,6 @@ export interface StyledTagDisplayProps {
     size: keyof typeof SIZES;
     textColor?: string;
     tagColor?: string;
+    color?: 'red' | 'green' | 'black';
 }
 export declare const StyledTagDisplay: import("styled-components").StyledComponent<"div", any, StyledTagDisplayProps, never>;

package/dist/components/Tags/Comps/TagDisplay/styled.js

@@ -31,14 +31,27 @@ exports.StyledTagDisplay = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var styled_1 = require("../styled");
 var themes_1 = require("../../../../themes");
-var greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80, greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40;
-exports.StyledTagDisplay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    ", "\n    ", "\n"], ["\n    ", "\n    ", "\n"])), function (_a) {
+var greyColor100 = themes_1.colors.greyColor100, greyColor80 = themes_1.colors.greyColor80, greyColor15 = themes_1.colors.greyColor15, greyColor40 = themes_1.colors.greyColor40, red = themes_1.colors.red, invertRed = themes_1.colors.invertRed, green = themes_1.colors.green, invertGreen = themes_1.colors.invertGreen;
+exports.StyledTagDisplay = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    ", "\n    ", "\n"], ["\n    ", "\n    ", "\n"])), function (_a) {
     var size = _a.size;
     return (0, styled_1.commonStyle)({ size: size });
 }, function (_a) {
-    var variant = _a.variant, invert = _a.invert, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor;
-    return variant === 'primary'
-        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n            background-color: ", ";\n            color: ", ";\n          "], ["\n            background-color: ", ";\n            color: ", ";\n          "])), tagColor ? tagColor : !invert ? greyColor15 : greyColor80, textColor ? textColor : !invert ? greyColor80 : greyColor40) : //secondary
-     (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n            background: none;\n            border: ", " solid\n            /* border: 2px solid */\n              ", ";\n            color: ", ";\n          "], ["\n            background: none;\n            border: ", " solid\n            /* border: 2px solid */\n              ", ";\n            color: ", ";\n          "])), size === 'XS' ? '1px' : '2px', tagColor ? tagColor : !invert ? (size === 'XS' ? greyColor100 : greyColor15) : greyColor80, textColor ? textColor : !invert ? (size === 'XS' ? greyColor100 : greyColor80) : greyColor15);
+    var variant = _a.variant, invert = _a.invert, size = _a.size, textColor = _a.textColor, tagColor = _a.tagColor, color = _a.color;
+    switch (variant) {
+        case 'primary':
+            switch (color) {
+                case 'red':
+                    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                width: max-content;\n                background-color: ", ";\n                ", "\n                ", "\n              "], ["\n                width: max-content;\n                background-color: ", ";\n                ", "\n                ", "\n              "])), !invert ? red : invertRed, (0, styled_1.textColor)({ invert: invert }), (0, styled_1.redHover)({ invert: invert }));
+                case 'green':
+                    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                width: max-content;\n                background-color: ", ";\n                ", "\n                ", "\n              "], ["\n                width: max-content;\n                background-color: ", ";\n                ", "\n                ", "\n              "])), !invert ? green : invertGreen, (0, styled_1.textColor)({ invert: invert }), (0, styled_1.greenHover)({ invert: invert }));
+                case 'black':
+                    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                width: max-content;\n                background-color: ", ";\n                ", "\n                ", "\n              "], ["\n                width: max-content;\n                background-color: ", ";\n                ", "\n                ", "\n              "])), !invert ? greyColor100 : greyColor15, (0, styled_1.textColor)({ invert: invert }), (0, styled_1.blackHover)({ invert: invert }));
+                default: //primary default
+                    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n              background-color: ", ";\n              color: ", ";\n            "], ["\n              background-color: ", ";\n              color: ", ";\n            "])), tagColor ? tagColor : !invert ? greyColor15 : greyColor80, textColor ? textColor : !invert ? greyColor80 : greyColor40);
+            }
+        //secondary
+        case 'secondary':
+            return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            background: none;\n            border: ", " solid\n            /* border: 2px solid */\n              ", ";\n            color: ", ";\n          "], ["\n            background: none;\n            border: ", " solid\n            /* border: 2px solid */\n              ", ";\n            color: ", ";\n          "])), size === 'XS' ? '1px' : '2px', tagColor ? tagColor : !invert ? (size === 'XS' ? greyColor100 : greyColor15) : greyColor80, textColor ? textColor : !invert ? (size === 'XS' ? greyColor100 : greyColor80) : greyColor15);
+    }
 });
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/cards/CardContent/index.d.ts

@@ -1,4 +1,4 @@
-export function CardContent({ id, data, config, to, onClick, openInNewTab, actions, }: {
+export function CardContent({ id, data, config, to, onClick, openInNewTab, actions, highlight }: {
     id: any;
     data: any;
     config: any;
@@ -6,5 +6,6 @@ export function CardContent({ id, data, config, to, onClick, openInNewTab, actio
     onClick: any;
     openInNewTab: any;
     actions: any;
+    highlight: any;
 }): React.JSX.Element;
 import React from "react";

package/dist/components/cards/CardContent/index.js

@@ -25,26 +25,26 @@ var icons_1 = require("../../../icons");
 var Tags_1 = require("../../Tags");
 var CrownSimple = icons_1.icons.CrownSimple;
 var CardContent = function (_a) {
-    var _b, _c, _d;
-    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions;
+    var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, highlight = _a.highlight;
     var theme = (0, styled_components_1.useTheme)();
+    var localize = (0, utilsOolib_1.useLocale)();
     var parseSpecialSyntax = (theme || {}).parseSpecialSyntax;
     var showEmbedSection = !!((config === null || config === void 0 ? void 0 : config.image) || (config === null || config === void 0 ? void 0 : config.video));
-    var _e = (0, parseCardConfig_1.parseCardConfig)({
+    var _b = (0, parseCardConfig_1.parseCardConfig)({
         config: config,
         data: data,
         parseSpecialSyntax: parseSpecialSyntax
-    }), cardLabel = _e.cardLabel, title = _e.title, video = _e.video, image = _e.image, metaBlock = _e.metaBlock, tagDisplay = _e.tagDisplay, variant = _e.variant;
+    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock, tagDisplay = _b.tagDisplay;
     var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
     if (dontRenderRes)
         return dontRenderRes;
-    var _f = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _f.LinkComp, target = _f.target, externalUrl = _f.externalUrl;
+    var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
     return (react_1.default.createElement(LinkComp, { target: target, href: (0, injectHttps_1.injectHttps)(to), to: to },
-        react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, variant: variant, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
-            (variant === "success") && react_1.default.createElement(styled_2.StyledCrownWrapper, null,
+        react_1.default.createElement(styled_2.StyledCardWrapper, { id: id, highlight: highlight, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
+            highlight && react_1.default.createElement(styled_2.StyledCrownWrapper, null,
                 react_1.default.createElement(styled_2.StyledCrown, null,
                     react_1.default.createElement(CrownSimple, { size: 24 }))),
-            react_1.default.createElement(styled_2.StyledUpperSection, { variant: variant },
+            react_1.default.createElement(styled_2.StyledUpperSection, { highlight: highlight },
                 react_1.default.createElement(styled_2.StyledContainer1, null,
                     cardLabel ? (react_1.default.createElement("div", { title: cardLabel, style: {
                             display: "flex",
@@ -61,8 +61,8 @@ var CardContent = function (_a) {
                         " ",
                         react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, title: title },
                             react_1.default.createElement(styled_1.StyledTitle, { capitalize: true, className: "StyledTitle" },
-                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, title))))) : null),
-                ((Array.isArray(tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data) && ((_b = tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data) === null || _b === void 0 ? void 0 : _b.length) > 0) || typeof tagDisplay === "string") && react_1.default.createElement(Tags_1.TagLink, { display: Array.isArray(tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data) ? (_c = tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data[0]) === null || _c === void 0 ? void 0 : _c.display : tagDisplay, to: (tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.collectionId) ? "/published-page/".concat(tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.collectionId, "?id=").concat((_d = tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data[0]) === null || _d === void 0 ? void 0 : _d._id) : "#", color: "green" }),
+                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null),
+                tagDisplay && react_1.default.createElement(Tags_1.TagDisplay, { display: tagDisplay, color: "green" }),
                 (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 ? (react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock }) //show only two meta for cardContent
                 ) : null),
             showEmbedSection && (react_1.default.createElement(styled_2.StyledEmbedSection, null,

package/dist/components/cards/CardContent/styled.js

@@ -38,15 +38,15 @@ exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (
 exports.StyledMetaBlock = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  gap: 0.5em;\n"])));
 exports.StyledEmbedSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"])));
 exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", "; \n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, function (_a) {
-    var variant = _a.variant;
-    return variant === "success" ? colors_1.colors.lightGreen : greyColor5;
+    var highlight = _a.highlight;
+    return highlight ? colors_1.colors.lightGreen : greyColor5;
 }, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
 exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n  padding: 2rem;\n  ", "\n  gap: ", ";\n  padding-top: ", ";\n"])), flexColumn, function (_a) {
-    var variant = _a.variant;
-    return variant === "success" ? '2rem' : '3rem';
+    var highlight = _a.highlight;
+    return highlight ? '2rem' : '3rem';
 }, function (_a) {
-    var variant = _a.variant;
-    return variant === "success" ? "1rem" : "2rem";
+    var highlight = _a.highlight;
+    return highlight ? "1rem" : "2rem";
 });
 exports.StyledCrownWrapper = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"], ["\n  width: 100%;\n  display: flex; \n  justify-content: flex-end\n"])));
 exports.StyledCrown = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"], ["\n  width: max-content;\n  background-color: ", ";\n  padding: 1rem;\n"])), invertGreen);

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

@@ -27,6 +27,7 @@ var mixins_1 = require("../../../themes/mixins");
 var ListContent = function (_a) {
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions, statusTag = _a.statusTag, _b = _a.variant, variant = _b === void 0 ? "content" : _b;
     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)({
@@ -54,7 +55,7 @@ var ListContent = function (_a) {
                     title ? (react_1.default.createElement("div", { style: { flexGrow: 1 } },
                         react_1.default.createElement(LineClampWrapper_1.LineClampWrapper, { noOfLines_M: 6, 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" }, title))))) : null,
+                                react_1.default.createElement(styled_1.StyledTitleSpan, { className: "StyledTitleSpan" }, localize(title)))))) : null,
                     (metaBlock === null || metaBlock === void 0 ? void 0 : metaBlock.length) > 0 && (react_1.default.createElement("div", { style: { width: "100%", paddingTop: "1rem" } },
                         react_1.default.createElement(MetaBlock_1.default, { data: data, config: metaBlock })))),
                 variant === "content" ? ((mediaConfigExists || actions) && (react_1.default.createElement(styled_js_1.StyledContentModule2, null,

package/dist/components/cards/utils/parseCardConfig.d.ts

@@ -6,7 +6,6 @@ export function parseCardConfig({ config, data, parseSpecialSyntax, }: {
     title: string;
     titleOptional: string;
     desc: string;
-    variant: any;
     cardLabel: any;
     video: any;
     image: any;

package/dist/components/cards/utils/parseCardConfig.js

@@ -18,12 +18,10 @@ var parseCardConfig = function (_a) {
     var tagDisplay = config.tagDisplay && (0, getVal_1.getVal)(data, config.tagDisplay);
     var image = config.image && (0, getVal_1.getVal)(data, ((_b = config.image) === null || _b === void 0 ? void 0 : _b.valuePath) || config.image); // cuz image config could be either `image: <valuePath>` or `image: { valuePath: <valuePath>, aspectRatio: <aspectRatio> }`
     var imageAspectRatio = (_c = config.image) === null || _c === void 0 ? void 0 : _c.aspectRatio;
-    var variant = (config.variant && Array.isArray((0, getVal_1.getVal)(data, config.variant)) && (0, getVal_1.getVal)(data, config.variant).length > 0) ? "success" : typeof config.variant === "string" ? config.variant : undefined;
     return {
         title: title,
         titleOptional: titleOptional,
         desc: desc,
-        variant: variant,
         cardLabel: cardLabel,
         video: video,
         image: image,

package/dist/stories/cards/CardContent.stories.d.ts

@@ -7,12 +7,11 @@ declare namespace _default {
                 type: string;
             };
         };
-        variant: {
+        highlight: {
             name: string;
             control: {
                 type: string;
             };
-            options: string[];
         };
         actions: {
             name: string;

package/dist/stories/cards/utils/cardArgTypes.d.ts

@@ -89,7 +89,7 @@ export namespace cardContentArgTypes {
         }
         export { control_8 as control };
     }
-    export namespace variant {
+    export namespace highlight {
         let name_9: string;
         export { name_9 as name };
         export namespace control_9 {
@@ -97,8 +97,6 @@ export namespace cardContentArgTypes {
             export { type_1 as type };
         }
         export { control_9 as control };
-        let options_1: string[];
-        export { options_1 as options };
     }
     export namespace actions_1 {
         let name_10: string;

package/dist/stories/cards/utils/cardArgTypes.js

@@ -57,10 +57,9 @@ exports.cardContentArgTypes = {
         name: "Status Tag",
         control: { type: "text" },
     },
-    variant: {
-        name: "Variant",
-        control: { type: "select" },
-        options: ["success", undefined]
+    highlight: {
+        name: "Highlight",
+        control: { type: "boolean" },
     },
     actions: {
         name: "Actions",

package/dist/stories/cards/utils/parseCardArgs.d.ts

@@ -1,4 +1,4 @@
-export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaText, metaName, metaDate, actions: _actions, statusTag, disabled, tagDisplay, variant, }: {
+export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaText, metaName, metaDate, actions: _actions, statusTag, disabled, tagDisplay, highlight, }: {
     cardLabel: any;
     title: any;
     mediaType: any;
@@ -11,12 +11,12 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaT
     statusTag: any;
     disabled: any;
     tagDisplay: any;
-    variant: any;
+    highlight: any;
 }): {
     data: {
         title: any;
         cardLabel: any;
-        variant: any;
+        highlight: any;
         image: {
             publicUrl: any;
         }[];
@@ -43,7 +43,7 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaT
         title: string;
         cardLabel: string;
         tagDisplay: string;
-        variant: any;
     };
     disabled: any;
+    highlight: any;
 };

package/dist/stories/cards/utils/parseCardArgs.js

@@ -22,11 +22,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseCardArgs = void 0;
 var parseCardArgs = function (_a) {
-    var cardLabel = _a.cardLabel, title = _a.title, mediaType = _a.mediaType, image = _a.image, video = _a.video, metaText = _a.metaText, metaName = _a.metaName, metaDate = _a.metaDate, _actions = _a.actions, statusTag = _a.statusTag, disabled = _a.disabled, tagDisplay = _a.tagDisplay, variant = _a.variant;
+    var cardLabel = _a.cardLabel, title = _a.title, mediaType = _a.mediaType, image = _a.image, video = _a.video, metaText = _a.metaText, metaName = _a.metaName, metaDate = _a.metaDate, _actions = _a.actions, statusTag = _a.statusTag, disabled = _a.disabled, tagDisplay = _a.tagDisplay, highlight = _a.highlight;
     var data = {
         title: title,
         cardLabel: cardLabel,
-        variant: variant,
+        highlight: highlight,
         image: image && [{ publicUrl: image }],
         video: video && [{ publicUrl: video }],
         text: metaText || undefined,
@@ -34,7 +34,7 @@ var parseCardArgs = function (_a) {
         date: metaDate || undefined,
         tagDisplay: tagDisplay,
     };
-    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay", variant: variant }, (mediaType === "image" ? { image: "image" } : {})), (mediaType === "video" ? { video: "video" } : {})), { metaBlock: __spreadArray(__spreadArray(__spreadArray([], (metaText ? [{ key: "text", valuePath: "text" }] : []), true), (metaName ? [{ key: "name", valuePath: "name" }] : []), true), (metaDate ? [{ key: "date", valuePath: "date" }] : []), true) });
+    var config = __assign(__assign(__assign({ title: "title", cardLabel: "cardLabel", tagDisplay: "tagDisplay" }, (mediaType === "image" ? { image: "image" } : {})), (mediaType === "video" ? { video: "video" } : {})), { metaBlock: __spreadArray(__spreadArray(__spreadArray([], (metaText ? [{ key: "text", valuePath: "text" }] : []), true), (metaName ? [{ key: "name", valuePath: "name" }] : []), true), (metaDate ? [{ key: "date", valuePath: "date" }] : []), true) });
     var actions = !_actions
         ? undefined
         : [
@@ -52,7 +52,8 @@ var parseCardArgs = function (_a) {
         actions: actions,
         statusTag: statusTag,
         config: config,
-        disabled: disabled
+        disabled: disabled,
+        highlight: highlight
     };
 };
 exports.parseCardArgs = parseCardArgs;

package/package.json

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