oolib 2.164.0 → 2.165.0

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

@@ -49,7 +49,7 @@ exports.default = {
         }
     },
     args: {
-        display: "Tag Display",
+        display: "Tag Clear",
         // size: "ExtraSmall",
         value: "text",
         id: "tags",
@@ -62,7 +62,7 @@ var GenTag = function (_a) {
     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" } },
+    return (React.createElement("div", null,
         React.createElement(Comp, __assign({}, args, { variant: variant }))));
 };
 var Playground = function (args) {
@@ -73,6 +73,7 @@ var Playground = function (args) {
 };
 exports.Playground = Playground;
 var Tag_Clear = function (args) {
-    return React.createElement(GenTag, { args: args, Comp: Tags_1.TagClear });
+    return React.createElement("div", { style: { margin: "2rem 10rem" } },
+        React.createElement(GenTag, { args: args, Comp: Tags_1.TagClear }));
 };
 exports.Tag_Clear = Tag_Clear;

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

@@ -73,7 +73,7 @@ var GenTag = function (_a) {
     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" } },
+    return (React.createElement("div", null,
         React.createElement(Comp, __assign({}, args, { variant: variant }))));
 };
 var Playground = function (args) {

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

@@ -0,0 +1,28 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace display {
+            let name: string;
+        }
+        namespace value {
+            let name_1: string;
+            export { name_1 as name };
+        }
+        namespace id {
+            let name_2: string;
+            export { name_2 as name };
+        }
+    }
+    namespace args {
+        let display_1: string;
+        export { display_1 as display };
+        let value_1: string;
+        export { value_1 as value };
+        let id_1: string;
+        export { id_1 as id };
+        export let textColor: string;
+    }
+}
+export default _default;
+export function Playground(args: any): import("react").JSX.Element;
+export function Tag_Link(args: any): import("react").JSX.Element;

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

@@ -0,0 +1,79 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tag_Link = exports.Playground = void 0;
+var Tags_1 = require("../../../v2/components/Tags");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var themes_1 = require("../../../v2/themes");
+exports.default = {
+    title: "Oolib V 2.0/Components/Tags/Tag Link",
+    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 Link",
+        // 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", null,
+        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(Typo2_1.UI_BODY_SEMIBOLD_SM, null, "Tag Clear"),
+        React.createElement(GenTag, { args: args, Comp: Tags_1.TagLink })));
+};
+exports.Playground = Playground;
+var Tag_Link = function (args) {
+    return (React.createElement("div", { style: { margin: "2rem 10rem" } },
+        React.createElement(GenTag, { args: args, Comp: Tags_1.TagLink }),
+        ";"));
+};
+exports.Tag_Link = Tag_Link;

package/dist/v2/components/Tags/Comps/TagLink/index.d.ts

@@ -0,0 +1,24 @@
+import { FunctionComponent } from "react";
+export interface TagLinkProps {
+    display: string;
+    to: string;
+    invert?: boolean;
+    M?: boolean;
+    XS?: boolean;
+    variant?: 'primary' | 'secondary';
+    color?: 'red' | 'green' | 'black';
+}
+/**
+ * @component Renders a TagLink component with customizable text, URL, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagLink component.
+ * @prop {string} to: The URL to navigate to when the component is clicked.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @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} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @prop {string} [color] : A string indicating the background color of the component. Defaults to undefined.
+ * @return {ReactElement} The rendered TagLink component.
+ */
+export declare const TagLink: FunctionComponent<TagLinkProps>;

package/dist/v2/components/Tags/Comps/TagLink/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagLink = void 0;
+var react_1 = __importStar(require("react"));
+var styled_1 = require("./styled");
+var icons_1 = require("../../../../../icons");
+var styled_components_1 = require("styled-components");
+var getTypoComp_1 = require("../../utils/getTypoComp");
+var ArrowLineUpRight = icons_1.icons.ArrowLineUpRight;
+/**
+ * @component Renders a TagLink component with customizable text, URL, style and variant.
+ *
+ * - The props object containing the following properties:
+ * @prop {string} display: The text to be displayed inside the TagLink component.
+ * @prop {string} to: The URL to navigate to when the component is clicked.
+ * @prop {boolean} [invert] : A boolean indicating whether to invert the colors of the component. Defaults to false.
+ * @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} [variant] : A string indicating the variant of the component. Defaults to "primary".
+ * @prop {string} [color] : A string indicating the background color of the component. Defaults to undefined.
+ * @return {ReactElement} The rendered TagLink component.
+ */
+var TagLink = function (_a) {
+    var display = _a.display, to = _a.to, M = _a.M, XS = _a.XS, _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, color = _a.color;
+    var size = M ? 'M' : XS ? 'XS' : 'S';
+    var TYPO_COMP = (0, getTypoComp_1.getTypoComp)({ typo: "captionSemiBold" });
+    var _c = (0, react_1.useState)(false), hoverTag = _c[0], setHoverOnTag = _c[1];
+    var theme = (0, styled_components_1.useTheme)();
+    return (react_1.default.createElement(styled_1.StyledLink, { to: to },
+        react_1.default.createElement(styled_1.StyledTagLink, { color: color, variant: variant, size: size, onMouseEnter: function () { return setHoverOnTag(true); }, onMouseLeave: function () { return setHoverOnTag(false); } },
+            react_1.default.createElement(TYPO_COMP, null, display),
+            hoverTag &&
+                react_1.default.createElement(styled_1.StyledLinkIconWrapper, { theme: theme },
+                    react_1.default.createElement(ArrowLineUpRight, { style: { marginRight: '-0.3rem' }, size: 14, weight: 'bold' })))));
+};
+exports.TagLink = TagLink;

package/dist/v2/components/Tags/Comps/TagLink/styled.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SIZES } from "../styled";
+export declare const StyledLink: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react-router-dom").NavLinkProps & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;
+export interface TagLinkStyleProps {
+    variant: 'primary' | 'secondary';
+    invert?: boolean;
+    color?: 'red' | 'green' | 'black';
+    size: keyof typeof SIZES;
+    theme: any;
+}
+interface StyledTagLinkProps extends TagLinkStyleProps {
+    invert?: boolean;
+}
+export declare const tagLinkStyle: ({ variant, theme: { colors } }: TagLinkStyleProps) => import("styled-components").FlattenSimpleInterpolation;
+export declare const StyledTagLink: import("styled-components").StyledComponent<"div", any, StyledTagLinkProps, never>;
+export declare const StyledLinkIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/v2/components/Tags/Comps/TagLink/styled.js

@@ -0,0 +1,51 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledLinkIconWrapper = exports.StyledTagLink = exports.tagLinkStyle = exports.StyledLink = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var react_router_dom_1 = require("react-router-dom");
+var styled_1 = require("../styled");
+var utils_1 = require("../../../../themes/utils");
+var themes_1 = require("../../../../themes");
+var grey5 = themes_1.colors.grey5, grey80 = themes_1.colors.grey80;
+exports.StyledLink = (0, styled_components_1.default)(react_router_dom_1.NavLink)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n"], ["\n  text-decoration: none;\n"])));
+var tagLinkStyle = function (_a) {
+    var variant = _a.variant, colors = _a.theme.colors;
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "], [" // variant primary\n      background: ", ";\n      color: ", ";\n\n      &:hover{\n        background-color: ", ";\n        color: ", ";\n      }\n\n    "])), grey5, grey80, (0, utils_1.getSecondaryContainer)(colors), (0, utils_1.getOnSecondary)(colors));
+};
+exports.tagLinkStyle = tagLinkStyle;
+exports.StyledTagLink = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  ", "\n  ", "\n  padding: 0.1rem 0.5rem;\n"], ["\n  position: relative;\n  ", "\n  ", "\n  padding: 0.1rem 0.5rem;\n"])), function (_a) {
+    var size = _a.size;
+    return (0, styled_1.commonStyle)({ size: size });
+}, function (props) { return (0, exports.tagLinkStyle)(props); });
+exports.StyledLinkIconWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  height: 100%;\n  padding: 0 0.5rem;\n  border-radius: 0.4rem;\n  position: absolute;\n  right: 0;\n  ", "\n  \n"], ["\n  border: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  height: 100%;\n  padding: 0 0.5rem;\n  border-radius: 0.4rem;\n  position: absolute;\n  right: 0;\n  ", "\n  \n"])), function (_a) {
+    var colors = _a.theme.colors;
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "], ["\n    background: linear-gradient(90deg, rgba(255, 227, 227, 0.00) 0%, ", " 28.76%);\n    color: ", ";\n  "])), (0, utils_1.getSecondaryContainer)(colors), (0, utils_1.getOnSecondary)(colors));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/v2/components/Tags/index.d.ts

@@ -1,2 +1,3 @@
 export { TagDisplay } from './Comps/TagDisplay';
 export { TagClear } from './Comps/TagClear';
+export { TagLink } from './Comps/TagLink';

package/dist/v2/components/Tags/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TagClear = exports.TagDisplay = void 0;
+exports.TagLink = exports.TagClear = exports.TagDisplay = void 0;
 var TagDisplay_1 = require("./Comps/TagDisplay");
 Object.defineProperty(exports, "TagDisplay", { enumerable: true, get: function () { return TagDisplay_1.TagDisplay; } });
 var TagClear_1 = require("./Comps/TagClear");
 Object.defineProperty(exports, "TagClear", { enumerable: true, get: function () { return TagClear_1.TagClear; } });
+var TagLink_1 = require("./Comps/TagLink");
+Object.defineProperty(exports, "TagLink", { enumerable: true, get: function () { return TagLink_1.TagLink; } });

package/dist/v2/components/Tags/utils/getTypoComp.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 export declare const STYLED_ELLIPSIS_UI_TAG: import("styled-components").StyledComponent<React.FunctionComponent<import("../../Typo2").TypoCompProps>, any, {}, never>;
 export declare const STYLED_ELLIPSIS_UI_CAPTION: import("styled-components").StyledComponent<React.FunctionComponent<import("../../Typo2").TypoCompProps>, any, {}, never>;
-type TypoVariant = 'tag' | 'caption';
+export declare const STYLED_ELLIPSIS_UI_CAPTION_SEMIBOLD: import("styled-components").StyledComponent<React.FunctionComponent<import("../../Typo2").TypoCompProps>, any, {}, never>;
+type TypoVariant = 'tag' | 'caption' | 'captionSemiBold';
 type TypoComponent = (props: React.HTMLAttributes<HTMLSpanElement>) => JSX.Element;
 type GetTypoComp = (config?: {
     typo?: TypoVariant;

package/dist/v2/components/Tags/utils/getTypoComp.js

@@ -18,20 +18,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTypoComp = exports.STYLED_ELLIPSIS_UI_CAPTION = exports.STYLED_ELLIPSIS_UI_TAG = void 0;
+exports.getTypoComp = exports.STYLED_ELLIPSIS_UI_CAPTION_SEMIBOLD = exports.STYLED_ELLIPSIS_UI_CAPTION = exports.STYLED_ELLIPSIS_UI_TAG = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var mixins_1 = require("../../../../themes/mixins");
 var Typo2_1 = require("../../Typo2");
 exports.STYLED_ELLIPSIS_UI_TAG = (0, styled_components_1.default)(Typo2_1.UI_TAG)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
 exports.STYLED_ELLIPSIS_UI_CAPTION = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
+exports.STYLED_ELLIPSIS_UI_CAPTION_SEMIBOLD = (0, styled_components_1.default)(Typo2_1.UI_CAPTION_SEMIBOLD_DF)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), mixins_1.ellipsis);
 var getTypoComp = function (_a) {
     var _b = _a.typo, typo = _b === void 0 ? "tag" : _b;
     return function (props) {
-        return (typo === "caption"
-            ? react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_CAPTION, __assign({}, props))
-            : react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_TAG, __assign({}, props)));
+        return (typo === "caption" ? react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_CAPTION, __assign({}, props))
+            : typo === "captionSemiBold" ? react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_CAPTION_SEMIBOLD, __assign({}, props))
+                : react_1.default.createElement(exports.STYLED_ELLIPSIS_UI_TAG, __assign({}, props)));
     };
 };
 exports.getTypoComp = getTypoComp;
-var templateObject_1, templateObject_2;
+var templateObject_1, templateObject_2, templateObject_3;

package/package.json

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