oolib 2.145.0 → 2.147.0

package/dist/icons/index.d.ts

@@ -116,6 +116,7 @@ export namespace icons {
     export { CopySimple };
     export { PaperPlaneRight };
     export { Warning };
+    export { Star };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -295,6 +296,7 @@ import { ThumbsDown } from 'phosphor-react';
 import { CopySimple } from 'phosphor-react';
 import { PaperPlaneRight } from 'phosphor-react';
 import { Warning } from 'phosphor-react';
+import { Star } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -121,6 +121,7 @@ exports.icons = {
     CopySimple: phosphor_react_1.CopySimple,
     PaperPlaneRight: phosphor_react_1.PaperPlaneRight,
     Warning: phosphor_react_1.Warning,
+    Star: phosphor_react_1.Star,
     //custom
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,
@@ -182,5 +183,5 @@ exports.icons = {
     Inspiring: custom_1.Inspiring,
     Learning: custom_1.Learning,
     Like: custom_1.Like,
-    Reactions: custom_1.Reactions
+    Reactions: custom_1.Reactions,
 };

package/dist/index.d.ts

@@ -18,6 +18,9 @@ export * from "./utils/_EXPORTS";
 export * from "./v2/components/Buttons";
 export * from "./v2/components/Typo2";
 export * from "./v2/components/BlockLabel";
+export * from "./v2/components/cards/CardContent";
+export * from "./v2/components/Tags";
+export * from "./v2/components/ImagePlaceholder";
 export { colors } from "./themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";

package/dist/index.js

@@ -176,6 +176,9 @@ Object.defineProperty(exports, "TableCellResizerPlugin", { enumerable: true, get
 __exportStar(require("./v2/components/Buttons"), exports);
 __exportStar(require("./v2/components/Typo2"), exports);
 __exportStar(require("./v2/components/BlockLabel"), exports);
+__exportStar(require("./v2/components/cards/CardContent"), exports);
+__exportStar(require("./v2/components/Tags"), exports);
+__exportStar(require("./v2/components/ImagePlaceholder"), exports);
 var themes_2 = require("./v2/themes");
 Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });
 // v2 contexts

package/dist/stories/v2/components/BlockLabel.stories.js

@@ -1,4 +1,8 @@
 "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 __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,10 +14,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Block_Label = void 0;
 var BlockLabel_1 = require("../../../v2/components/BlockLabel");
 var themes_1 = require("../../../themes");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  /* #tempBlocklabelOverride p{\n    color: red;\n  } */\n"], ["\n\n  /* #tempBlocklabelOverride p{\n    color: red;\n  } */\n"])));
 exports.default = {
     title: "Oolib V 2.0/Components/BlockLabel",
     argTypes: {
@@ -91,7 +100,7 @@ var Block_Label = function (args) {
     // document.getElementsByTagName("body")[0].removeChild(hintsRootElem);
     // };
     var errorMsgs = args.errorMessage ? args.errorMessage.split(",") : undefined;
-    return (React.createElement("div", null,
+    return (React.createElement(Wrapper, null,
         React.createElement("div", { style: {
                 display: "flex",
                 justifyContent: "space-between",
@@ -105,3 +114,4 @@ var Block_Label = function (args) {
                 } }, (React.createElement(BlockLabel_1.BlockLabel, __assign({ id: "hints_1", hints: args.showHints ? dummyData2 : "" }, args, { errorMsgs: errorMsgs }))) || "no label provided"))));
 };
 exports.Block_Label = Block_Label;
+var templateObject_1;

package/dist/stories/v2/components/TagDisplay.stories.d.ts

@@ -0,0 +1,75 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace display {
+            let name: string;
+        }
+        namespace size {
+            let name_1: string;
+            export { name_1 as name };
+            export let options: string[];
+            export namespace mapping {
+                let ExtraSmall: string;
+                let Small: string;
+                let Medium: string;
+            }
+            export namespace control {
+                let type: string;
+            }
+        }
+        namespace tagColor {
+            let name_2: string;
+            export { name_2 as name };
+            export { availableColors as options };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace textColor {
+            let name_3: string;
+            export { name_3 as name };
+            export { availableTextColors as options };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+        namespace value {
+            let name_4: string;
+            export { name_4 as name };
+        }
+        namespace id {
+            let name_5: string;
+            export { name_5 as name };
+        }
+    }
+    namespace args {
+        let display_1: string;
+        export { display_1 as display };
+        let size_1: string;
+        export { size_1 as size };
+        let value_1: string;
+        export { value_1 as value };
+        let id_1: string;
+        export { id_1 as id };
+        let tagColor_1: string;
+        export { tagColor_1 as tagColor };
+        let textColor_1: string;
+        export { textColor_1 as textColor };
+    }
+}
+export default _default;
+export function Playground(args: any): import("react").JSX.Element;
+export function Tag_Display_Primary(args: any): import("react").JSX.Element;
+export function Tag_Display_Secondary(args: any): import("react").JSX.Element;
+export function Tag_Display_Grey(args: any): import("react").JSX.Element;
+export function Tag_Display_Positive(args: any): import("react").JSX.Element;
+export function Tag_Display_InProgress(args: any): import("react").JSX.Element;
+export function Tag_Display_Warning(args: any): import("react").JSX.Element;
+export function Tag_Display_Negative(args: any): import("react").JSX.Element;
+export function Tag_Display_Special(args: any): import("react").JSX.Element;
+declare const availableColors: string[];
+declare const availableTextColors: string[];

package/dist/stories/v2/components/TagDisplay.stories.js

@@ -0,0 +1,138 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag_Display_Special = exports.Tag_Display_Negative = exports.Tag_Display_Warning = exports.Tag_Display_InProgress = exports.Tag_Display_Positive = exports.Tag_Display_Grey = exports.Tag_Display_Secondary = exports.Tag_Display_Primary = exports.Playground = void 0;
+var Tags_1 = require("../../../v2/components/Tags");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var themes_1 = require("../../../v2/themes");
+var availableColors = __spreadArray([], Object.keys(themes_1.colors).sort(), true);
+var availableTextColors = __spreadArray([], Object.keys(themes_1.colors).sort(), true);
+exports.default = {
+    title: "Oolib V 2.0/Components/Tag Display",
+    argTypes: {
+        display: {
+            name: "Text",
+        },
+        size: {
+            name: "Size",
+            options: ["ExtraSmall", "Small", "Medium"],
+            mapping: {
+                ExtraSmall: "XS",
+                Small: "S",
+                Medium: "M",
+            },
+            control: { type: "inline-radio" },
+        },
+        tagColor: {
+            name: "Tag Color",
+            options: availableColors,
+            control: { type: "select" },
+        },
+        textColor: {
+            name: "Text Color",
+            options: availableTextColors,
+            control: { type: "select" },
+        },
+        value: {
+            name: "Value"
+        },
+        id: {
+            name: "Id"
+        }
+    },
+    args: {
+        display: "Tag Display",
+        size: "ExtraSmall",
+        value: "text",
+        id: "tags",
+        tagColor: "",
+        textColor: "",
+    },
+};
+var GenTag = function (_a) {
+    var args = _a.args, Comp = _a.Comp, variant = _a.variant;
+    args[args["size"]] = true;
+    args.tagColor = themes_1.colors[args.tagColor];
+    args.textColor = themes_1.colors[args.textColor];
+    return (React.createElement("div", { style: { margin: "2rem 10rem" } },
+        React.createElement(Comp, __assign({}, args, { variant: variant }))));
+};
+var Playground = function (args) {
+    return (React.createElement("div", { style: { display: 'flex', flexDirection: "column", gap: '3rem', margin: '2rem 10rem' } },
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Primary"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay })),
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Secondary"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "secondary" })),
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Grey"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "grey" })),
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Positive"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "positive" })),
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "In Progress"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "inProgress" })),
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Warning"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "warning" })),
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Negative"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "negative" })),
+        React.createElement("div", null,
+            React.createElement(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Special"),
+            React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "special" }))));
+};
+exports.Playground = Playground;
+var Tag_Display_Primary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay });
+};
+exports.Tag_Display_Primary = Tag_Display_Primary;
+var Tag_Display_Secondary = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "secondary" });
+};
+exports.Tag_Display_Secondary = Tag_Display_Secondary;
+var Tag_Display_Grey = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "grey" });
+};
+exports.Tag_Display_Grey = Tag_Display_Grey;
+var Tag_Display_Positive = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "positive" });
+};
+exports.Tag_Display_Positive = Tag_Display_Positive;
+var Tag_Display_InProgress = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "inProgress" });
+};
+exports.Tag_Display_InProgress = Tag_Display_InProgress;
+var Tag_Display_Warning = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "warning" });
+};
+exports.Tag_Display_Warning = Tag_Display_Warning;
+var Tag_Display_Negative = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "negative" });
+};
+exports.Tag_Display_Negative = Tag_Display_Negative;
+var Tag_Display_Special = function (args) {
+    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagDisplay, variant: "special" });
+};
+exports.Tag_Display_Special = Tag_Display_Special;

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

@@ -0,0 +1,78 @@
+declare namespace _default {
+    let title: string;
+    let argTypes: {
+        tagDisplay: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        highlight: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        desc: {
+            name: string;
+            control: {
+                type: string;
+            };
+        };
+        statusTagVariant: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        cardLabel: {
+            name: string;
+            control: string;
+        };
+        title: {
+            name: string;
+            control: string;
+        };
+        mediaType: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        image: {
+            name: string;
+            control: string;
+            if: {
+                arg: string;
+                eq: string;
+            };
+        };
+        video: {
+            name: string;
+            control: string;
+            if: {
+                arg: string;
+                eq: string;
+            };
+        };
+        metaName: {
+            name: string;
+            control: string;
+        };
+        metaDate: {
+            name: string;
+            control: string;
+        };
+    };
+    let args: {
+        cardLabel: string;
+        title: string;
+        metaName: string;
+        metaDate: number;
+        mediaType: string;
+        image: string;
+        video: string;
+    };
+}
+export default _default;
+export function CardContent(args: any): React.JSX.Element;
+export function Playground(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/v2/components/cards/CardContent.stories.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Playground = exports.CardContent = void 0;
+var react_1 = __importDefault(require("react"));
+var Container_1 = require("../../../../components/Container");
+var Paddings_1 = require("../../../../components/Paddings");
+var WrapperCardGrid_1 = require("../../../../components/Wrappers/WrapperCardGrid");
+var Wrappers_1 = require("../../../../components/Wrappers");
+var index_1 = require("../../../../v2/components/cards/CardContent/index");
+var cardArgTypes_1 = require("./utils/cardArgTypes");
+var parseCardArgs_1 = require("./utils/parseCardArgs");
+var makeArrayFromLength_1 = require("../../../../utils/makeArrayFromLength");
+exports.default = {
+    title: "Oolib V 2.0/Components/CardContent",
+    argTypes: __assign(__assign({}, cardArgTypes_1.commonCardArgTypes), cardArgTypes_1.cardContentArgTypes),
+    args: __assign({}, cardArgTypes_1.commonCardArgs),
+};
+var CardContent = function (args) {
+    var props = (0, parseCardArgs_1.parseCardArgs)(args);
+    console.log({ propscardcontent: props });
+    return (react_1.default.createElement(Container_1.Container, null,
+        react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
+            react_1.default.createElement(WrapperCardGrid_1.WrapperCardGrid, null,
+                react_1.default.createElement(index_1.CardContent, __assign({}, props, { config: props.config }))))));
+};
+exports.CardContent = CardContent;
+var Playground = function (args) {
+    var props = (0, parseCardArgs_1.parseCardArgs)(args);
+    return (react_1.default.createElement(Container_1.Container, null,
+        react_1.default.createElement(Paddings_1.PaddingTopBottom30, null,
+            react_1.default.createElement(Wrappers_1.Wrapper1500, { left: true },
+                react_1.default.createElement(WrapperCardGrid_1.WrapperCardGrid, null, (0, makeArrayFromLength_1.makeArrayFromLength)(50).map(function (d) { return (react_1.default.createElement(index_1.CardContent, __assign({}, props, { config: props.config }))); }))))));
+};
+exports.Playground = Playground;

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

@@ -0,0 +1,107 @@
+export namespace commonCardArgs {
+    let cardLabel: string;
+    let title: string;
+    let metaName: string;
+    let metaDate: number;
+    let mediaType: string;
+    let image: string;
+    let video: string;
+}
+export namespace commonCardArgTypes {
+    export namespace cardLabel_1 {
+        let name: string;
+        let control: string;
+    }
+    export { cardLabel_1 as cardLabel };
+    export namespace title_1 {
+        let name_1: string;
+        export { name_1 as name };
+        let control_1: string;
+        export { control_1 as control };
+    }
+    export { title_1 as title };
+    export namespace mediaType_1 {
+        let name_2: string;
+        export { name_2 as name };
+        let control_2: string;
+        export { control_2 as control };
+        export let options: string[];
+    }
+    export { mediaType_1 as mediaType };
+    export namespace image_1 {
+        let name_3: string;
+        export { name_3 as name };
+        let control_3: string;
+        export { control_3 as control };
+        export namespace _if {
+            let arg: string;
+            let eq: string;
+        }
+        export { _if as if };
+    }
+    export { image_1 as image };
+    export namespace video_1 {
+        let name_4: string;
+        export { name_4 as name };
+        let control_4: string;
+        export { control_4 as control };
+        export namespace _if_1 {
+            let arg_1: string;
+            export { arg_1 as arg };
+            let eq_1: string;
+            export { eq_1 as eq };
+        }
+        export { _if_1 as if };
+    }
+    export { video_1 as video };
+    export namespace metaName_1 {
+        let name_5: string;
+        export { name_5 as name };
+        let control_5: string;
+        export { control_5 as control };
+    }
+    export { metaName_1 as metaName };
+    export namespace metaDate_1 {
+        let name_6: string;
+        export { name_6 as name };
+        let control_6: string;
+        export { control_6 as control };
+    }
+    export { metaDate_1 as metaDate };
+}
+export namespace cardContentArgTypes {
+    namespace tagDisplay {
+        let name_7: string;
+        export { name_7 as name };
+        export namespace control_7 {
+            let type: string;
+        }
+        export { control_7 as control };
+    }
+    namespace highlight {
+        let name_8: string;
+        export { name_8 as name };
+        export namespace control_8 {
+            let type_1: string;
+            export { type_1 as type };
+        }
+        export { control_8 as control };
+    }
+    namespace desc {
+        let name_9: string;
+        export { name_9 as name };
+        export namespace control_9 {
+            let type_2: string;
+            export { type_2 as type };
+        }
+        export { control_9 as control };
+    }
+    namespace statusTagVariant {
+        let name_10: string;
+        export { name_10 as name };
+        let control_10: string;
+        export { control_10 as control };
+        let options_1: string[];
+        export { options_1 as options };
+    }
+}

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cardContentArgTypes = exports.commonCardArgTypes = exports.commonCardArgs = void 0;
+//this order decides the order of the controls
+exports.commonCardArgs = {
+    cardLabel: "Stories",
+    title: "North East India Sand Mining 2018: Emerging threat to Rivers",
+    metaName: "John Doe",
+    metaDate: 1689618600000,
+    mediaType: 'noMedia',
+    image: "https://img-getpocket.cdn.mozilla.net/592x296/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fs3.us-east-1.amazonaws.com%2Fpocket-curatedcorpusapi-prod-images%2Fea9abf6e-f4d2-472a-9438-1d49be1249e6.jpeg",
+    video: "https://www.youtube.com/watch?v=4iQmPv_dTI0"
+};
+exports.commonCardArgTypes = {
+    cardLabel: {
+        name: "Label",
+        control: "text",
+    },
+    title: {
+        name: "Title",
+        control: "text",
+    },
+    mediaType: {
+        name: 'Media Type',
+        control: 'select',
+        options: ["no media", "image", "video"],
+    },
+    image: {
+        name: "Image",
+        control: "text",
+        if: { arg: 'mediaType', eq: 'image' }
+    },
+    video: {
+        name: "Video",
+        control: "text",
+        if: { arg: 'mediaType', eq: 'video' }
+    },
+    metaName: {
+        name: "Meta (Name)",
+        control: "text",
+    },
+    metaDate: {
+        name: "Meta (Date)",
+        control: "date",
+    }
+};
+exports.cardContentArgTypes = {
+    tagDisplay: {
+        name: "Status Tag",
+        control: { type: "text" },
+    },
+    highlight: {
+        name: "Highlight",
+        control: { type: "boolean" },
+    },
+    desc: {
+        name: "Description",
+        control: { type: "text" },
+    },
+    statusTagVariant: {
+        name: "Status Tag Variant",
+        control: 'select',
+        options: ['primary', 'secondary', 'positive', 'inProgress', 'warning', 'negative', 'special', 'grey'],
+    }
+};

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

@@ -0,0 +1,48 @@
+export function parseCardArgs({ cardLabel, title, mediaType, image, video, metaName, metaDate, statusTag, disabled, tagDisplay, highlight, desc, statusTagVariant }: {
+    cardLabel: any;
+    title: any;
+    mediaType: any;
+    image: any;
+    video: any;
+    metaName: any;
+    metaDate: any;
+    statusTag: any;
+    disabled: any;
+    tagDisplay: any;
+    highlight: any;
+    desc: any;
+    statusTagVariant: any;
+}): {
+    data: {
+        title: any;
+        cardLabel: any;
+        highlight: any;
+        image: {
+            publicUrl: any;
+        }[];
+        video: {
+            publicUrl: any;
+        }[];
+        name: any;
+        date: any;
+        tagDisplay: any;
+        desc: any;
+    };
+    statusTag: any;
+    config: {
+        metaBlock: {
+            key: string;
+            valuePath: string;
+        }[];
+        video?: string;
+        image?: string;
+        title: string;
+        cardLabel: string;
+        tagDisplay: string;
+        statusTagVariant: string;
+        desc: string;
+    };
+    disabled: any;
+    highlight: any;
+    statusTagVariant: any;
+};