oolib 2.121.2 → 2.122.0

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

@@ -21,23 +21,30 @@ var mediaDataExists_1 = require("../utils/mediaDataExists");
 var styled_2 = require("./styled");
 var CardPlaceholder_1 = require("../comps/CardPlaceholder");
 var ImageInput_1 = require("../../ImageInput");
+var icons_1 = require("../../../icons");
+var Tags_1 = require("../../Tags");
+var CrownSimple = icons_1.icons.CrownSimple;
 var CardContent = function (_a) {
+    var _b, _c;
     var id = _a.id, data = _a.data, config = _a.config, to = _a.to, onClick = _a.onClick, openInNewTab = _a.openInNewTab, actions = _a.actions;
     var theme = (0, styled_components_1.useTheme)();
     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 _b = (0, parseCardConfig_1.parseCardConfig)({
+    var _d = (0, parseCardConfig_1.parseCardConfig)({
         config: config,
         data: data,
         parseSpecialSyntax: parseSpecialSyntax
-    }), cardLabel = _b.cardLabel, title = _b.title, video = _b.video, image = _b.image, metaBlock = _b.metaBlock;
+    }), cardLabel = _d.cardLabel, title = _d.title, video = _d.video, image = _d.image, metaBlock = _d.metaBlock, tagDisplay = _d.tagDisplay, variant = _d.variant;
     var dontRenderRes = (0, dontRenderIfBothOnClickAndTo_1.dontRenderIfBothOnClickAndTo)({ onClick: onClick, to: to });
     if (dontRenderRes)
         return dontRenderRes;
-    var _c = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _c.LinkComp, target = _c.target, externalUrl = _c.externalUrl;
+    var _e = (0, decideLinkCompAndTarget_1.decideLinkCompAndTarget)({ to: to, openInNewTab: openInNewTab }), LinkComp = _e.LinkComp, target = _e.target, externalUrl = _e.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, onClick: onClick ? function (e) { return onClick(e, data); } : undefined },
-            react_1.default.createElement(styled_2.StyledUpperSection, null,
+        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.StyledCrown, null,
+                    react_1.default.createElement(CrownSimple, { size: 24 }))),
+            react_1.default.createElement(styled_2.StyledUpperSection, { variant: variant },
                 react_1.default.createElement(styled_2.StyledContainer1, null,
                     cardLabel ? (react_1.default.createElement("div", { title: cardLabel, style: {
                             display: "flex",
@@ -55,6 +62,7 @@ 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),
+                tagDisplay && react_1.default.createElement(Tags_1.TagLink, { display: Array.isArray(tagDisplay.data) ? (_b = tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data[0]) === null || _b === void 0 ? void 0 : _b.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((_c = tagDisplay === null || tagDisplay === void 0 ? void 0 : tagDisplay.data[0]) === null || _c === void 0 ? void 0 : _c._id) : "#", 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.d.ts

@@ -3,3 +3,5 @@ export const StyledMetaBlock: import("styled-components").StyledComponent<"div",
 export const StyledEmbedSection: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledUpperSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledCrown: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -27,16 +27,27 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledUpperSection = exports.StyledCardWrapper = exports.StyledEmbedSection = exports.StyledMetaBlock = exports.StyledContainer1 = void 0;
+exports.StyledCrown = exports.StyledCrownWrapper = exports.StyledUpperSection = exports.StyledCardWrapper = exports.StyledEmbedSection = exports.StyledMetaBlock = exports.StyledContainer1 = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var colors_1 = require("../../../themes/colors");
 var transitions_1 = require("../../../themes/mixins/transitions");
 var styled_1 = require("../styled");
-var greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white;
+var greyColor5 = colors_1.colors.greyColor5, white = colors_1.colors.white, invertGreen = colors_1.colors.invertGreen;
 var flexColumn = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
 exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  gap: 1rem;\n"], ["\n  ", "\n  gap: 1rem;\n"])), flexColumn);
 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, 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\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"])), flexColumn);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+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;
+}, (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';
+}, function (_a) {
+    var variant = _a.variant;
+    return variant === "success" ? "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);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -6,6 +6,7 @@ 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,10 +18,12 @@ 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/icons/index.d.ts

@@ -109,6 +109,7 @@ export namespace icons {
     export { SquareHalf };
     export { SquareHalfBottom };
     export { MagicWand };
+    export { CrownSimple };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -278,6 +279,7 @@ import { SlackLogo } from 'phosphor-react';
 import { SquareHalf } from 'phosphor-react';
 import { SquareHalfBottom } from 'phosphor-react';
 import { MagicWand } from 'phosphor-react';
+import { CrownSimple } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -114,6 +114,7 @@ exports.icons = {
     SquareHalf: phosphor_react_1.SquareHalf,
     SquareHalfBottom: phosphor_react_1.SquareHalfBottom,
     MagicWand: phosphor_react_1.MagicWand,
+    CrownSimple: phosphor_react_1.CrownSimple,
     //custom
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

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

@@ -1,6 +1,19 @@
 declare namespace _default {
     let title: string;
     let argTypes: {
+        tagDisplay: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        variant: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+        };
         actions: {
             name: string;
             control: {

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

@@ -81,7 +81,7 @@ export namespace cardContentArgs {
     let actions: boolean;
 }
 export namespace cardContentArgTypes {
-    export namespace actions_1 {
+    export namespace tagDisplay {
         let name_8: string;
         export { name_8 as name };
         export namespace control_8 {
@@ -89,15 +89,7 @@ export namespace cardContentArgTypes {
         }
         export { control_8 as control };
     }
-    export { actions_1 as actions };
-}
-export namespace listContentArgs {
-    export let statusTag: any;
-    let actions_2: boolean;
-    export { actions_2 as actions };
-}
-export namespace listContentArgTypes {
-    export namespace statusTag_1 {
+    export namespace variant {
         let name_9: string;
         export { name_9 as name };
         export namespace control_9 {
@@ -105,9 +97,10 @@ export namespace listContentArgTypes {
             export { type_1 as type };
         }
         export { control_9 as control };
+        let options_1: string[];
+        export { options_1 as options };
     }
-    export { statusTag_1 as statusTag };
-    export namespace actions_3 {
+    export namespace actions_1 {
         let name_10: string;
         export { name_10 as name };
         export namespace control_10 {
@@ -116,6 +109,33 @@ export namespace listContentArgTypes {
         }
         export { control_10 as control };
     }
+    export { actions_1 as actions };
+}
+export namespace listContentArgs {
+    export let statusTag: any;
+    let actions_2: boolean;
+    export { actions_2 as actions };
+}
+export namespace listContentArgTypes {
+    export namespace statusTag_1 {
+        let name_11: string;
+        export { name_11 as name };
+        export namespace control_11 {
+            let type_3: string;
+            export { type_3 as type };
+        }
+        export { control_11 as control };
+    }
+    export { statusTag_1 as statusTag };
+    export namespace actions_3 {
+        let name_12: string;
+        export { name_12 as name };
+        export namespace control_12 {
+            let type_4: string;
+            export { type_4 as type };
+        }
+        export { control_12 as control };
+    }
     export { actions_3 as actions };
 }
 export namespace cardEmbedArgs {
@@ -123,15 +143,16 @@ export namespace cardEmbedArgs {
 }
 export namespace cardEmbedArgTypes {
     export namespace disabled_1 {
-        let name_11: string;
-        export { name_11 as name };
-        let control_11: string;
-        export { control_11 as control };
+        let name_13: string;
+        export { name_13 as name };
+        let control_13: string;
+        export { control_13 as control };
     }
     export { disabled_1 as disabled };
 }
 export namespace cardProfileArgs {
-    export let tagDisplay: any;
+    let tagDisplay_1: any;
+    export { tagDisplay_1 as tagDisplay };
     let image_2: string;
     export { image_2 as image };
     let title_2: string;
@@ -144,18 +165,18 @@ export namespace cardProfileArgs {
     export { metaName_2 as metaName };
 }
 export namespace cardProfileArgTypes {
-    export namespace tagDisplay_1 {
-        let name_12: string;
-        export { name_12 as name };
-        let control_12: string;
-        export { control_12 as control };
+    export namespace tagDisplay_2 {
+        let name_14: string;
+        export { name_14 as name };
+        let control_14: string;
+        export { control_14 as control };
     }
-    export { tagDisplay_1 as tagDisplay };
+    export { tagDisplay_2 as tagDisplay };
     export namespace image_3 {
-        let name_13: string;
-        export { name_13 as name };
-        let control_13: string;
-        export { control_13 as control };
+        let name_15: string;
+        export { name_15 as name };
+        let control_15: string;
+        export { control_15 as control };
     }
     export { image_3 as image };
 }
@@ -173,10 +194,10 @@ export namespace listProfileArgs {
 }
 export namespace listProfileArgTypes {
     export namespace image_5 {
-        let name_14: string;
-        export { name_14 as name };
-        let control_14: string;
-        export { control_14 as control };
+        let name_16: string;
+        export { name_16 as name };
+        let control_16: string;
+        export { control_16 as control };
     }
     export { image_5 as image };
 }

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

@@ -53,6 +53,15 @@ exports.cardContentArgs = {
     actions: false
 };
 exports.cardContentArgTypes = {
+    tagDisplay: {
+        name: "Status Tag",
+        control: { type: "text" },
+    },
+    variant: {
+        name: "Variant",
+        control: { type: "select" },
+        options: ["success", undefined]
+    },
     actions: {
         name: "Actions",
         control: { type: "boolean" },

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 }: {
+export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaText, metaName, metaDate, actions: _actions, statusTag, disabled, tagDisplay, variant, }: {
     cardLabel: any;
     title: any;
     mediaType: any;
@@ -11,10 +11,12 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaT
     statusTag: any;
     disabled: any;
     tagDisplay: any;
+    variant: any;
 }): {
     data: {
         title: any;
         cardLabel: any;
+        variant: any;
         image: {
             publicUrl: any;
         }[];
@@ -41,6 +43,7 @@ export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaT
         title: string;
         cardLabel: string;
         tagDisplay: string;
+        variant: any;
     };
     disabled: any;
 };

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

@@ -22,10 +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;
+    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 data = {
         title: title,
         cardLabel: cardLabel,
+        variant: variant,
         image: image && [{ publicUrl: image }],
         video: video && [{ publicUrl: video }],
         text: metaText || undefined,
@@ -33,7 +34,7 @@ var parseCardArgs = function (_a) {
         date: metaDate || undefined,
         tagDisplay: tagDisplay,
     };
-    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 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 actions = !_actions
         ? undefined
         : [

package/dist/utilsOolib/index.d.ts

@@ -12,7 +12,7 @@ import { ColorsType } from '../themes/colors';
  * @param {ReactNode} value - The value to be localized
  * @return {ReactNode} The localized value
  */
-export declare const useLocale: () => (value: ReactNode) => ReactNode;
+export declare const useLocale: () => ((value: ReactNode) => ReactNode);
 /**
  * Returns the primary color at 10% opacity from the provided colors object or falls back to a default primary color
  *

package/package.json

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