linkedunion-design-kit 1.5.2 → 1.5.3

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

@@ -0,0 +1,36 @@
+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 (<>
+      {type === SectionTypeEnum.postByCategoriesTheme && (<PostByCategory {...data}/>)}
+      {type === SectionTypeEnum.contactsProfileTheme && (<ContactProfile {...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.stories.jsx

@@ -0,0 +1,56 @@
+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 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 (<Card image={""} {...__assign({ 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/src/components/MediaCard/Card.test.jsx

@@ -0,0 +1,27 @@
+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 <div>PostByCategory Component</div>; }),
+}); });
+jest.mock("./ContactProfile/ContactProfile", function () { return ({
+    ContactProfile: jest.fn(function () { return <div>ContactProfile Component</div>; }),
+}); });
+describe("Card Component", function () {
+    it("renders ContactProfile when no prop pass", function () {
+        render(<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(<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(<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.jsx

@@ -0,0 +1,22 @@
+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 (<div>
+      {props.layout === OrientationEnum.horizontal ? (<ContactProfileTheme1 {...props}/>) : (<>
+          <ContactProfileTheme2 {...props}/>
+        </>)}
+      <style jsx global>
+        {"\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        ")}
+      </style>
+    </div>);
+};

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

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

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

@@ -0,0 +1,61 @@
+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 { render, screen } from "@testing-library/react";
+import { ContactProfile } from "./ContactProfile";
+import { OrientationEnum } from "../../../utils/enums";
+var mockProps = {
+    id: 1,
+    layout: OrientationEnum.horizontal,
+    href: "",
+    image: "/images/demo-image.jpg",
+    cardStyle: {
+        card_title_color: "#000000",
+        card_description_color: "#666666",
+        card_shadow_toggle: 1,
+        card_shadow_color: "rgba(0,0,0,0.2)",
+        card_background_color: "#ffffff",
+        card_button_background_color: "#f5f5f5",
+        card_button_text_color: "#333333",
+    },
+};
+describe("ContactProfile Component", function () {
+    it("renders ContactProfileTheme1 when layout is horizontal", function () {
+        render(_jsx(ContactProfile, __assign({}, mockProps)));
+        expect(screen.getByTestId("contact-profile-theme1")).toBeInTheDocument();
+    });
+    it("renders ContactProfileTheme2 when layout is vertical", function () {
+        render(_jsx(ContactProfile, __assign({}, mockProps, { layout: OrientationEnum.vertical })));
+        expect(screen.getByTestId("contact-profile-theme2")).toBeInTheDocument();
+    });
+    it("applies correct styles based on id", function () {
+        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");
+        })).toBeTruthy();
+        expect(Array.from(styles).some(function (rule) {
+            return rule.cssText.includes(".card_bg_ContactProfile_1");
+        })).toBeTruthy();
+    });
+    it("applies default shadow when card_shadow_toggle is not 1", function () {
+        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/MediaCard/ContactProfile/ContactProfile.test.js → src/components/MediaCard/ContactProfile/ContactProfile.test.jsx}

@@ -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,14 @@ 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 { 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 +29,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(<ContactProfile {...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(<ContactProfile {...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(<ContactProfile {...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 +47,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(<ContactProfile {...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(<ContactProfile {...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/src/components/MediaCard/ContactProfile/ContactProfileTheme1.jsx

@@ -0,0 +1,28 @@
+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 (<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)}>
+      <div className={"flex gap-x-5"}>
+        <div className={"max-w-[240px] overflow-hidden aspect-square max-xs:hidden"}>
+          <LuImage src={props.image} width={160} height={160} className="rounded-full h-full object-cover" alt="Contact Profile"/>
+        </div>
+        <div className="flex flex-1 flex-col">
+          <div className={"flex flex-col justify-center flex-1 h-full"}>
+            <div className={"card_ContactProfile_title_color_".concat(props.id, " text-2xl font-semibold capitalize line-clamp-1")}>
+              {props.heading}
+            </div>
+            <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)}>
+              {props.body}
+            </p>
+          </div>
+        </div>
+      </div>
+      <Link href={props.href} passHref className="w-full no-underline">
+        <Button endIcon={<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)}>
+          {props.btnLabel}
+        </Button>
+      </Link>
+    </div>);
+};

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/src/components/MediaCard/ContactProfile/ContactProfileTheme1.test.jsx

@@ -0,0 +1,87 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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,
+        heading: "John Doe",
+        body: "Software Engineer",
+        image: "https://via.placeholder.com/150",
+        btnLabel: "View Profile",
+        href: "/profile",
+        className: "custom-class",
+    };
+    it("Render the contact profile theme1 with correct body and heading text", function () {
+        render(<ContactProfileTheme1 {...mockProps}/>);
+        var headingElement = screen.getByText(mockProps.heading);
+        var bodyElement = screen.getByText(mockProps.body);
+        expect(headingElement).toBeInTheDocument();
+        expect(bodyElement).toBeInTheDocument();
+    });
+    it("renders the button with correct label and icon", function () {
+        render(<ContactProfileTheme1 {...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 () {
+        render(<ContactProfileTheme1 {...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 () {
+        var user, linkElement;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    render(<ContactProfileTheme1 {...mockProps}/>);
+                    user = userEvent.setup();
+                    linkElement = screen.getByRole("link");
+                    return [4 /*yield*/, user.click(linkElement)];
+                case 1:
+                    _a.sent();
+                    expect(linkElement).toHaveAttribute("href", mockProps.href);
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+});

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;