linkedunion-design-kit 1.5.2 → 1.5.4

package/dist/src/components/Label/Label.stories.js

@@ -0,0 +1,36 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Label from "./Label";
+import { variant } from "../ui/label";
+export default {
+    title: "Components/Label",
+    component: Label,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Label, __assign({}, args)); };
+export var _Label = Template.bind({});
+_Label.args = {
+    children: "Label",
+    variant: "default",
+};
+_Label.argTypes = {
+    variant: {
+        control: { type: "select" },
+        options: Object.keys(variant),
+        description: "Label variant",
+        table: {
+            defaultValue: { summary: "default" },
+            type: { summary: "string" },
+        },
+    },
+};

package/dist/src/components/Label/type.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from "class-variance-authority";
+import React from "react";
+import { labelVariants } from "../ui/label";
+export interface LabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+    htmlFor?: string;
+    className?: string;
+    children: React.ReactNode;
+    variant?: VariantProps<typeof labelVariants>["variant"];
+}

package/dist/src/components/Label/type.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/MediaCard/Card.d.ts

@@ -0,0 +1,3 @@
+import { CardProps } from "./type";
+declare const Card: ({ type, layout, id, className, image, heading, body, href, btnLabel, cardStyle, }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export default Card;

package/dist/src/components/MediaCard/Card.js

@@ -0,0 +1,45 @@
+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);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { PostByCategory } from "./PostByCategory/PostByCategory";
+import { colors } from "../../utils/colors";
+import { defaultCardProps } from "../../utils";
+import { ContactProfile } from "./ContactProfile/ContactProfile";
+import { SectionTypeEnum } from "./index";
+import { OrientationEnum } from "../../utils/enums";
+var Card = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? SectionTypeEnum.postByCategoriesTheme : _b, _c = _a.layout, layout = _c === void 0 ? OrientationEnum.horizontal : _c, _d = _a.id, id = _d === void 0 ? 1 : _d, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.image, image = _f === void 0 ? defaultCardProps.image : _f, _g = _a.heading, heading = _g === void 0 ? defaultCardProps.heading : _g, _h = _a.body, body = _h === void 0 ? defaultCardProps.body : _h, _j = _a.href, href = _j === void 0 ? defaultCardProps.href : _j, _k = _a.btnLabel, btnLabel = _k === void 0 ? defaultCardProps.btnLabel : _k, _l = _a.cardStyle, cardStyle = _l === void 0 ? {
+        card_title_color: "",
+        card_description_color: "",
+        card_shadow_toggle: 1,
+        card_shadow_color: "rgba(52, 52, 52, 0.15)",
+        card_background_color: colors.white,
+        card_button_background_color: colors["neutral-0"],
+        card_button_text_color: colors.black,
+        card_image_border_color: colors === null || colors === void 0 ? void 0 : colors.black,
+        card_image_border_radius: "0",
+        card_image_border: "0",
+    } : _l;
+    var data = {
+        id: id,
+        image: image,
+        layout: layout,
+        heading: heading,
+        body: body,
+        className: className,
+        btnLabel: btnLabel,
+        href: href,
+        cardStyle: cardStyle,
+    };
+    return (_jsxs(_Fragment, { children: [type === SectionTypeEnum.postByCategoriesTheme && (_jsx(PostByCategory, __assign({}, data))), type === SectionTypeEnum.contactsProfileTheme && (_jsx(ContactProfile, __assign({}, data)))] }));
+};
+export default Card;

package/dist/src/components/MediaCard/Card.stories.js

@@ -0,0 +1,57 @@
+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);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Card from "./Card";
+import { sectionTypeList } from "../../utils";
+import { SectionTypeEnum } from ".";
+import { OrientationEnum } from "../../utils/enums";
+export default {
+    title: "Components/Card",
+    component: Card,
+};
+var Template = function (args) { return (_jsx(Card, __assign({ image: "", href: "" }, args))); };
+export var _Card = Template.bind({});
+_Card.args = {
+    type: SectionTypeEnum.postByCategoriesTheme,
+    image: "/images/demo-image.jpg",
+    heading: "Heading Text",
+    body: "The quick brown fox jumps over the lazy dog.",
+    layout: OrientationEnum.horizontal,
+    btnLabel: "View More",
+    href: "https://www.google.com/",
+    cardStyle: {
+        card_title_color: "",
+        card_description_color: "",
+        card_shadow_toggle: 0,
+        card_shadow_color: "",
+        card_background_color: "",
+        card_button_background_color: "",
+        card_button_text_color: "",
+        card_image_border_color: "",
+        card_image_border_radius: "",
+        card_image_border: "",
+    },
+    id: 1,
+};
+_Card.argTypes = {
+    layout: {
+        control: { type: "select" },
+        options: [OrientationEnum.horizontal, OrientationEnum.vertical],
+    },
+    type: {
+        control: {
+            type: "select",
+            labels: Object.fromEntries(sectionTypeList.map(function (type) { return [type.key, type.label]; })),
+        },
+        options: sectionTypeList.map(function (type) { return type.key; }),
+    },
+};

package/dist/src/components/MediaCard/Card.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import Card from "./Card";
+import { SectionTypeEnum } from "./index";
+jest.mock("./PostByCategory/PostByCategory", function () { return ({
+    PostByCategory: jest.fn(function () { return _jsx("div", { children: "PostByCategory Component" }); }),
+}); });
+jest.mock("./ContactProfile/ContactProfile", function () { return ({
+    ContactProfile: jest.fn(function () { return _jsx("div", { children: "ContactProfile Component" }); }),
+}); });
+describe("Card Component", function () {
+    it("renders ContactProfile when no prop pass", function () {
+        render(_jsx(Card, { href: "#", image: "" }));
+        // Check that the PostByCategory component is rendered
+        expect(screen.getByText("PostByCategory Component")).toBeInTheDocument();
+    });
+    it("renders PostByCategory when type is postByCategoriesTheme", function () {
+        render(_jsx(Card, { type: SectionTypeEnum.postByCategoriesTheme, href: "#", image: "" }));
+        // Check that the PostByCategory component is rendered
+        expect(screen.getByText("PostByCategory Component")).toBeInTheDocument();
+    });
+    it("renders ContactProfile when type is contactsProfileTheme", function () {
+        render(_jsx(Card, { type: SectionTypeEnum.contactsProfileTheme, href: "#", image: "" }));
+        // Check that the ContactProfile component is rendered
+        expect(screen.getByText("ContactProfile Component")).toBeInTheDocument();
+    });
+});

package/dist/{components → src/components}/MediaCard/ContactProfile/ContactProfile.d.ts

@@ -1,2 +1,2 @@
-import { CardProps } from "@/types/interface";
+import { CardProps } from "../type";
 export declare const ContactProfile: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/MediaCard/ContactProfile/ContactProfile.js

@@ -0,0 +1,27 @@
+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);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ContactProfileTheme1 } from "./ContactProfileTheme1";
+import { ContactProfileTheme2 } from "./ContactProfileTheme2";
+import { colors } from "../../../utils/colors";
+import { OrientationEnum } from "../../../utils/enums";
+export var ContactProfile = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    return (_jsxs("div", { children: [props.layout === OrientationEnum.horizontal ? (_jsx(ContactProfileTheme1, __assign({}, props))) : (_jsx(_Fragment, { children: _jsx(ContactProfileTheme2, __assign({}, props)) })), _jsx("style", { jsx: true, global: true, children: "\n          .card_ContactProfile_title_color_".concat(props.id, " {\n            color: ").concat(((_a = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _a === void 0 ? void 0 : _a.card_title_color) || (colors === null || colors === void 0 ? void 0 : colors.black), ";\n          }\n          .card_ContactProfile_designation_color_").concat(props.id, " {\n            color: ").concat(((_b = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _b === void 0 ? void 0 : _b.card_description_color) ||
+                    colors["neutral-500"], ";\n          }\n          .card_shadow_ContactProfile_").concat(props.id, " {\n            box-shadow: ").concat(((_c = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _c === void 0 ? void 0 : _c.card_shadow_toggle) === 1
+                    ? "0px 4px 12px 0px ".concat(((_d = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _d === void 0 ? void 0 : _d.card_shadow_color) || "rgba(52, 52, 52, 0.15)") //TODO: change shadow with our color theme
+                    : "0px 4px 12px 0px rgba(52, 52, 52, 0.15)", ";\n          }\n          .card_bg_ContactProfile_").concat(props.id, " {\n            background-color: ").concat(((_e = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _e === void 0 ? void 0 : _e.card_background_color) ||
+                    colors.white, " !important;\n          }\n          .card_ContactProfile_btn_").concat(props.id, " {\n            background-color: ").concat(((_f = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color) || colors["neutral-0"], ";\n            color: ").concat(((_g = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _g === void 0 ? void 0 : _g.card_button_text_color) ||
+                    colors["neutral-1000"], ";\n          }\n          .card_ContactProfile_btn_").concat(props.id, ":hover {\n            background-color: ").concat(((_h = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _h === void 0 ? void 0 : _h.card_button_background_color) || colors["neutral-0"], " !important;\n            color: ").concat(((_j = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _j === void 0 ? void 0 : _j.card_button_text_color) ||
+                    colors["neutral-1000"], " !important;\n            fill: ").concat(((_k = props === null || props === void 0 ? void 0 : props.cardStyle) === null || _k === void 0 ? void 0 : _k.card_button_text_color) ||
+                    colors["neutral-1000"], " !important;\n          }\n        ") })] }));
+};

package/dist/src/components/MediaCard/ContactProfile/ContactProfile.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{components → src/components}/MediaCard/ContactProfile/ContactProfile.test.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,14 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-var ContactProfile_1 = require("./ContactProfile");
-var enums_1 = require("../../../utils/enums");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { ContactProfile } from "./ContactProfile";
+import { OrientationEnum } from "../../../utils/enums";
 var mockProps = {
     id: 1,
-    layout: enums_1.OrientationEnum.horizontal,
+    layout: OrientationEnum.horizontal,
+    href: "",
+    image: "/images/demo-image.jpg",
     cardStyle: {
         card_title_color: "#000000",
         card_description_color: "#666666",
@@ -30,15 +30,15 @@ var mockProps = {
 };
 describe("ContactProfile Component", function () {
     it("renders ContactProfileTheme1 when layout is horizontal", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfile_1.ContactProfile, __assign({}, mockProps)));
-        expect(react_1.screen.getByTestId("contact-profile-theme1")).toBeInTheDocument();
+        render(_jsx(ContactProfile, __assign({}, mockProps)));
+        expect(screen.getByTestId("contact-profile-theme1")).toBeInTheDocument();
     });
     it("renders ContactProfileTheme2 when layout is vertical", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfile_1.ContactProfile, __assign({}, mockProps, { layout: enums_1.OrientationEnum.vertical })));
-        expect(react_1.screen.getByTestId("contact-profile-theme2")).toBeInTheDocument();
+        render(_jsx(ContactProfile, __assign({}, mockProps, { layout: OrientationEnum.vertical })));
+        expect(screen.getByTestId("contact-profile-theme2")).toBeInTheDocument();
     });
     it("applies correct styles based on id", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfile_1.ContactProfile, __assign({}, mockProps)));
+        render(_jsx(ContactProfile, __assign({}, mockProps, { layout: OrientationEnum.vertical })));
         var styles = document.styleSheets[document.styleSheets.length - 1].cssRules;
         expect(Array.from(styles).some(function (rule) {
             return rule.cssText.includes(".card_ContactProfile_title_color_1");
@@ -48,10 +48,14 @@ describe("ContactProfile Component", function () {
         })).toBeTruthy();
     });
     it("applies default shadow when card_shadow_toggle is not 1", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfile_1.ContactProfile, __assign({}, mockProps, { cardStyle: __assign(__assign({}, mockProps.cardStyle), { card_shadow_toggle: 0 }) })));
+        render(_jsx(ContactProfile, __assign({}, mockProps, { cardStyle: __assign(__assign({}, mockProps.cardStyle), { card_shadow_toggle: 0 }) })));
         var styles = document.styleSheets[document.styleSheets.length - 1].cssRules;
         expect(Array.from(styles).some(function (rule) {
             return rule.cssText.includes("box-shadow: 0px 4px 12px 0px rgba(52, 52, 52, 0.15)");
         })).toBeTruthy();
     });
+    it("renders correctly when cardStyle is undefined", function () {
+        render(_jsx(ContactProfile, __assign({}, mockProps, { cardStyle: undefined })));
+        expect(screen.getByTestId("contact-profile-theme1")).toBeInTheDocument();
+    });
 });

package/dist/{components → src/components}/MediaCard/ContactProfile/ContactProfileTheme1.d.ts

@@ -1,2 +1,2 @@
-import { CardProps } from "@/types/interface";
+import { CardProps } from "../type";
 export declare const ContactProfileTheme1: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/MediaCard/ContactProfile/ContactProfileTheme1.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import LuImage from "../../../components/Images/LuImage";
+import Button from "../../../components/Button/Button";
+import LUIcon from "../../../components/Icons/LUIcon";
+export var ContactProfileTheme1 = function (props) {
+    return (_jsxs("div", { "data-testid": "contact-profile-theme1", className: "p-5 card_bg_ContactProfile_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id), children: [_jsxs("div", { className: "flex gap-x-5", children: [_jsx("div", { className: "max-w-[240px] overflow-hidden aspect-square max-xs:hidden", children: _jsx(LuImage, { src: props.image, width: 160, height: 160, className: "rounded-full h-full object-cover", alt: "Contact Profile" }) }), _jsx("div", { className: "flex flex-1 flex-col", children: _jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "card_ContactProfile_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1"), children: props.heading }), _jsx("p", { className: "text-base font-extralight line-clamp-2 max-xs:line-clamp-1 max-xs:mt-[7px] card_ContactProfile_designation_color_".concat(props.id), children: props.body })] }) })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full mt-4 max-xs:mt-2.5 card_ContactProfile_btn_".concat(props.id), children: props.btnLabel }) })] }));
+};

package/dist/{components → src/components}/MediaCard/ContactProfile/ContactProfileTheme1.test.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -46,15 +45,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-require("@testing-library/jest-dom");
-var ContactProfileTheme1_1 = require("./ContactProfileTheme1");
-var user_event_1 = __importDefault(require("@testing-library/user-event"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ContactProfileTheme1 } from "./ContactProfileTheme1";
+import userEvent from "@testing-library/user-event";
 describe("ContactProfileTheme1 Component", function () {
     var mockProps = {
         id: 1,
@@ -65,37 +60,24 @@ describe("ContactProfileTheme1 Component", function () {
         href: "/profile",
         className: "custom-class",
     };
-    jest.mock("next/image", function () { return ({
-        __esModule: true,
-        default: function (props) {
-            var _a;
-            return ((0, jsx_runtime_1.jsx)("img", __assign({}, props, { alt: props.btnLabel || "", id: (_a = props.id) === null || _a === void 0 ? void 0 : _a.toString() })));
-        },
-    }); });
     it("Render the contact profile theme1 with correct body and heading text", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme1_1.ContactProfileTheme1, __assign({}, mockProps)));
-        var headingElement = react_1.screen.getByText(mockProps.heading);
-        var bodyElement = react_1.screen.getByText(mockProps.body);
+        render(_jsx(ContactProfileTheme1, __assign({}, mockProps)));
+        var headingElement = screen.getByText(mockProps.heading);
+        var bodyElement = screen.getByText(mockProps.body);
         expect(headingElement).toBeInTheDocument();
         expect(bodyElement).toBeInTheDocument();
     });
-    it("renders the profile image", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme1_1.ContactProfileTheme1, __assign({}, mockProps)));
-        var profileImage = react_1.screen.getByAltText("Image");
-        expect(profileImage).toBeInTheDocument();
-        expect(profileImage).toHaveAttribute("alt", "Image"); // Matches the default alt in LuImage
-    });
     it("renders the button with correct label and icon", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme1_1.ContactProfileTheme1, __assign({}, mockProps)));
-        var buttonElement = react_1.screen.getByRole("button", {
+        render(_jsx(ContactProfileTheme1, __assign({}, mockProps)));
+        var buttonElement = screen.getByRole("button", {
             name: mockProps.btnLabel,
         });
         expect(buttonElement).toBeInTheDocument();
         expect(buttonElement).toHaveTextContent(mockProps.btnLabel);
     });
     it("renders the link with the correct href", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme1_1.ContactProfileTheme1, __assign({}, mockProps)));
-        var linkElement = react_1.screen.getByRole("link");
+        render(_jsx(ContactProfileTheme1, __assign({}, mockProps)));
+        var linkElement = screen.getByRole("link");
         expect(linkElement).toHaveAttribute("href", mockProps.href);
     });
     it("triggers navigation when the button is clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -103,9 +85,9 @@ describe("ContactProfileTheme1 Component", function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme1_1.ContactProfileTheme1, __assign({}, mockProps)));
-                    user = user_event_1.default.setup();
-                    linkElement = react_1.screen.getByRole("link");
+                    render(_jsx(ContactProfileTheme1, __assign({}, mockProps)));
+                    user = userEvent.setup();
+                    linkElement = screen.getByRole("link");
                     return [4 /*yield*/, user.click(linkElement)];
                 case 1:
                     _a.sent();
@@ -114,9 +96,4 @@ describe("ContactProfileTheme1 Component", function () {
             }
         });
     }); });
-    it("renders without crashing when href is undefined", function () {
-        var propsWithoutHref = __assign(__assign({}, mockProps), { href: undefined });
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme1_1.ContactProfileTheme1, __assign({}, propsWithoutHref)));
-        expect(react_1.screen.getByRole("button")).toBeInTheDocument();
-    });
 });

package/dist/{components → src/components}/MediaCard/ContactProfile/ContactProfileTheme2.d.ts

@@ -1,2 +1,2 @@
-import { CardProps } from "@/types/interface";
+import { CardProps } from "../type";
 export declare const ContactProfileTheme2: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/MediaCard/ContactProfile/ContactProfileTheme2.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import LuImage from "../../../components/Images/LuImage";
+import Button from "../../../components/Button/Button";
+import LUIcon from "../../../components/Icons/LUIcon";
+export var ContactProfileTheme2 = function (props) {
+    return (_jsxs("div", { "data-testid": "contact-profile-theme2", className: "p-8 card_bg_ContactProfile_".concat(props.id, " rounded-xl ").concat(props.className, " card_shadow_ContactProfile_").concat(props.id, " flex flex-col items-center"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden aspect-square", children: _jsx(LuImage, { src: props.image, width: 160, height: 160, className: "h-full object-cover rounded-full", alt: "Contact Profile" }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow m-5 text-center h-[100px]", children: [_jsx("div", { className: "card_ContactProfile_title_color_".concat(props.id, " text-2xl font-semibold line-clamp-1 capitalize"), children: props.heading }), _jsx("p", { className: "text-base\tfont-extralight\tcard_ContactProfile_designation_color_".concat(props.id, " line-clamp-2"), children: props.body })] }), _jsx(Link, { href: props.href, passHref: true, className: "w-full no-underline", children: _jsx(Button, { endIcon: _jsx(LUIcon, { icon: "angle-right", size: "sm" }), size: "lg", className: "rounded justify-between w-full card_ContactProfile_btn_".concat(props.id), children: props.btnLabel }) })] }));
+};

package/dist/{components → src/components}/MediaCard/ContactProfile/ContactProfileTheme2.test.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -46,15 +45,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-require("@testing-library/jest-dom");
-var ContactProfileTheme2_1 = require("./ContactProfileTheme2");
-var user_event_1 = __importDefault(require("@testing-library/user-event"));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { ContactProfileTheme2 } from "./ContactProfileTheme2";
+import userEvent from "@testing-library/user-event";
 describe("ContactProfileTheme1 Component", function () {
     var mockProps = {
         id: 1,
@@ -65,37 +60,24 @@ describe("ContactProfileTheme1 Component", function () {
         href: "/profile",
         className: "custom-class",
     };
-    jest.mock("next/image", function () { return ({
-        __esModule: true,
-        default: function (props) {
-            var _a;
-            return ((0, jsx_runtime_1.jsx)("img", __assign({}, props, { alt: props.btnLabel || "", id: (_a = props.id) === null || _a === void 0 ? void 0 : _a.toString() })));
-        }, // Renders a normal <img> tag
-    }); });
     it("Render the contact profile theme1 with correct body and heading text", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme2_1.ContactProfileTheme2, __assign({}, mockProps)));
-        var headingElement = react_1.screen.getByText(mockProps.heading);
-        var bodyElement = react_1.screen.getByText(mockProps.body);
+        render(_jsx(ContactProfileTheme2, __assign({}, mockProps)));
+        var headingElement = screen.getByText(mockProps.heading);
+        var bodyElement = screen.getByText(mockProps.body);
         expect(headingElement).toBeInTheDocument();
         expect(bodyElement).toBeInTheDocument();
     });
-    it("renders the profile image", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme2_1.ContactProfileTheme2, __assign({}, mockProps)));
-        var profileImage = react_1.screen.getByAltText("Image");
-        expect(profileImage).toBeInTheDocument();
-        expect(profileImage).toHaveAttribute("alt", "Image"); // Matches the default alt in LuImage
-    });
     it("renders the button with correct label and icon", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme2_1.ContactProfileTheme2, __assign({}, mockProps)));
-        var buttonElement = react_1.screen.getByRole("button", {
+        render(_jsx(ContactProfileTheme2, __assign({}, mockProps)));
+        var buttonElement = screen.getByRole("button", {
             name: mockProps.btnLabel,
         });
         expect(buttonElement).toBeInTheDocument();
         expect(buttonElement).toHaveTextContent(mockProps.btnLabel);
     });
     it("renders the link with the correct href", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme2_1.ContactProfileTheme2, __assign({}, mockProps)));
-        var linkElement = react_1.screen.getByRole("link");
+        render(_jsx(ContactProfileTheme2, __assign({}, mockProps)));
+        var linkElement = screen.getByRole("link");
         expect(linkElement).toHaveAttribute("href", mockProps.href);
     });
     it("triggers navigation when the button is clicked", function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -103,9 +85,9 @@ describe("ContactProfileTheme1 Component", function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme2_1.ContactProfileTheme2, __assign({}, mockProps)));
-                    user = user_event_1.default.setup();
-                    linkElement = react_1.screen.getByRole("link");
+                    render(_jsx(ContactProfileTheme2, __assign({}, mockProps)));
+                    user = userEvent.setup();
+                    linkElement = screen.getByRole("link");
                     return [4 /*yield*/, user.click(linkElement)];
                 case 1:
                     _a.sent();
@@ -114,9 +96,4 @@ describe("ContactProfileTheme1 Component", function () {
             }
         });
     }); });
-    it("renders without crashing when href is undefined", function () {
-        var propsWithoutHref = __assign(__assign({}, mockProps), { href: undefined });
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(ContactProfileTheme2_1.ContactProfileTheme2, __assign({}, propsWithoutHref)));
-        expect(react_1.screen.getByRole("button")).toBeInTheDocument();
-    });
 });

package/dist/{components → src/components}/MediaCard/PostByCategory/PostByCategory.d.ts

@@ -1,2 +1,2 @@
-import { CardProps } from "@/types/interface";
+import { CardProps } from "../type";
 export declare const PostByCategory: (props: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/MediaCard/PostByCategory/PostByCategory.js

@@ -0,0 +1,31 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { colors } from "../../../utils/colors";
+import { PostByCategoryTheme1 } from "./PostByCategoryTheme1";
+import { PostByCategoryTheme2 } from "./PostByCategoryTheme2";
+import { OrientationEnum } from "../../../utils/enums";
+export var PostByCategory = function (props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    return (_jsxs("div", { children: [props.layout === OrientationEnum.horizontal ? (_jsx(PostByCategoryTheme1, __assign({}, props))) : (_jsx(PostByCategoryTheme2, __assign({}, props))), _jsx("style", { jsx: true, global: true, children: "\n          .card_PostByCategory_title_color_".concat(props.id, " {\n            color: ").concat(((_a = props.cardStyle) === null || _a === void 0 ? void 0 : _a.card_title_color) || colors.black, ";\n          }\n          .card_PostByCategory_description_color_").concat(props.id, " {\n            color: ").concat(((_b = props.cardStyle) === null || _b === void 0 ? void 0 : _b.card_description_color) ||
+                    colors["neutral-500"], ";\n          }\n          .card_shadow_PostByCategory_").concat(props.id, " {\n            box-shadow: ").concat(((_c = props.cardStyle) === null || _c === void 0 ? void 0 : _c.card_shadow_toggle) === 1
+                    ? "0px 4px 12px 0px ".concat(((_d = props.cardStyle) === null || _d === void 0 ? void 0 : _d.card_shadow_color) || "rgba(52, 52, 52, 0.15)") //TODO: change shadow color with our color theme
+                    : "0px 4px 12px 0px rgba(52, 52, 52, 0.15)", ";\n          }\n          .card_bg_PostByCategory_").concat(props.id, " {\n            background-color: ").concat(((_e = props.cardStyle) === null || _e === void 0 ? void 0 : _e.card_background_color) ||
+                    colors.white, " !important;\n          }\n          .card_PostByCategory_btn_").concat(props.id, " {\n            background-color: ").concat(((_f = props.cardStyle) === null || _f === void 0 ? void 0 : _f.card_button_background_color) ||
+                    colors["neutral-0"], " !important;\n            color: ").concat(((_g = props.cardStyle) === null || _g === void 0 ? void 0 : _g.card_button_text_color) ||
+                    colors["neutral-1000"], " !important;\n            fill: ").concat(((_h = props.cardStyle) === null || _h === void 0 ? void 0 : _h.card_button_text_color) ||
+                    colors["neutral-1000"], " !important;\n          }\n          .card_PostByCategory_btn_").concat(props.id, ":hover {\n            background-color: ").concat(((_j = props.cardStyle) === null || _j === void 0 ? void 0 : _j.card_button_background_color) ||
+                    colors["neutral-0"], " !important;\n            color: ").concat(((_k = props.cardStyle) === null || _k === void 0 ? void 0 : _k.card_button_text_color) ||
+                    colors["neutral-1000"], " !important;\n            fill: ").concat(((_l = props.cardStyle) === null || _l === void 0 ? void 0 : _l.card_button_text_color) ||
+                    colors["neutral-1000"], " !important;\n          }\n          .card_PostByCategory_theme2_image_").concat(props === null || props === void 0 ? void 0 : props.id, " {\n            border-color: ").concat(((_m = props.cardStyle) === null || _m === void 0 ? void 0 : _m.card_image_border_color) ||
+                    (colors === null || colors === void 0 ? void 0 : colors.black), " !important;\n            border-radius: ").concat(((_o = props.cardStyle) === null || _o === void 0 ? void 0 : _o.card_image_border_radius) || "0", "%;\n            border: ").concat(((_p = props.cardStyle) === null || _p === void 0 ? void 0 : _p.card_image_border) || "0", "px solid;\n          }\n        ") })] }));
+};

package/dist/src/components/MediaCard/PostByCategory/PostByCategory.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{components → src/components}/MediaCard/PostByCategory/PostByCategory.test.js

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,14 +9,15 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-var PostByCategory_1 = require("./PostByCategory");
-var enums_1 = require("../../../utils/enums");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { PostByCategory } from "./PostByCategory";
+import { OrientationEnum } from "../../../utils/enums";
+import { Dummy_Url } from "../../../utils/constants";
 var mockProps = {
     id: 1,
-    layout: enums_1.OrientationEnum.horizontal,
+    layout: OrientationEnum.horizontal,
+    image: "/images/demo-image.jpg",
     cardStyle: {
         card_title_color: "#000000",
         card_description_color: "#666666",
@@ -27,18 +27,19 @@ var mockProps = {
         card_button_background_color: "#f5f5f5",
         card_button_text_color: "#333333",
     },
+    href: Dummy_Url,
 };
 describe("PostByCategory Component", function () {
     it("renders PostByCategoryTheme1 when layout is horizontal", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(PostByCategory_1.PostByCategory, __assign({}, mockProps)));
-        expect(react_1.screen.getByTestId("postByCategory-theme1")).toBeInTheDocument();
+        render(_jsx(PostByCategory, __assign({}, mockProps)));
+        expect(screen.getByTestId("postByCategory-theme1")).toBeInTheDocument();
     });
     it("renders PostByCategoryTheme2 when layout is vertical", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(PostByCategory_1.PostByCategory, __assign({}, mockProps, { layout: enums_1.OrientationEnum.vertical })));
-        expect(react_1.screen.getByTestId("postByCategory-theme2")).toBeInTheDocument();
+        render(_jsx(PostByCategory, __assign({}, mockProps, { layout: OrientationEnum.vertical })));
+        expect(screen.getByTestId("postByCategory-theme2")).toBeInTheDocument();
     });
     it("applies correct styles based on id", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(PostByCategory_1.PostByCategory, __assign({}, mockProps)));
+        render(_jsx(PostByCategory, __assign({}, mockProps)));
         var styles = document.styleSheets[document.styleSheets.length - 1].cssRules;
         expect(Array.from(styles).some(function (rule) {
             return rule.cssText.includes(".card_PostByCategory_title_color_1");
@@ -48,10 +49,14 @@ describe("PostByCategory Component", function () {
         })).toBeTruthy();
     });
     it("applies default shadow when card_shadow_toggle is not 1", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(PostByCategory_1.PostByCategory, __assign({}, mockProps, { cardStyle: __assign(__assign({}, mockProps.cardStyle), { card_shadow_toggle: 0 }) })));
+        render(_jsx(PostByCategory, __assign({}, mockProps, { cardStyle: __assign(__assign({}, mockProps.cardStyle), { card_shadow_toggle: 0 }) })));
         var styles = document.styleSheets[document.styleSheets.length - 1].cssRules;
         expect(Array.from(styles).some(function (rule) {
             return rule.cssText.includes("box-shadow: 0px 4px 12px 0px rgba(52, 52, 52, 0.15)");
         })).toBeTruthy();
     });
+    it("renders correctly when cardStyle is undefined", function () {
+        render(_jsx(PostByCategory, __assign({}, mockProps, { cardStyle: undefined })));
+        expect(screen.getByTestId("postByCategory-theme1")).toBeInTheDocument();
+    });
 });