@ludo.ninja/components 2.3.6 → 2.3.8

package/build/system/ActiveLink/ActiveLink.test.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+describe('ActiveLink Component', () => {
+    const useRouterMock = router_1.useRouter;
+    beforeEach(() => {
+        useRouterMock.mockReturnValue({
+            asPath: '/test-path',
+        });
+    });
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    test('renders child component', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toBeInTheDocument();
+    });
+    test('applies activeClassName when href matches asPath', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { className: "link", children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toHaveClass('link active');
+    });
+    test('does not apply activeClassName when href does not match asPath', () => {
+        useRouterMock.mockReturnValueOnce({
+            asPath: '/different-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { className: "link", children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toHaveClass('link');
+        expect(linkElement).not.toHaveClass('active');
+    });
+    test('applies activeClassName when as prop matches asPath', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { href: "/test-path", as: "/test-path", activeClassName: "active", children: (0, jsx_runtime_1.jsx)("span", { className: "link", children: "Test Link" }) }));
+        const linkElement = react_1.screen.getByText('Test Link');
+        expect(linkElement).toHaveClass('link active');
+    });
+});

package/build/system/ActiveLink/index.d.ts

@@ -0,0 +1,9 @@
+import { ReactElement } from 'react';
+interface Props {
+    children: ReactElement;
+    activeClassName?: string;
+    href: string;
+    as?: string;
+}
+declare const ActiveLink: ({ children, activeClassName, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ActiveLink;

package/build/system/ActiveLink/index.js

@@ -0,0 +1,49 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const link_1 = __importDefault(require("next/link"));
+const router_1 = require("next/router");
+const path_to_regexp_1 = require("path-to-regexp");
+const ActiveLink = ({ children, activeClassName, ...props }) => {
+    const { asPath } = (0, router_1.useRouter)();
+    const child = react_1.Children.only(children);
+    const childClassName = child.props.className || '';
+    const isActive = (0, path_to_regexp_1.pathToRegexp)(props.href || props.as, [], {
+        sensitive: true,
+    }).test(asPath);
+    const className = props.href || asPath === props.as
+        ? `${childClassName} ${isActive ? activeClassName : ''}`.trim()
+        : childClassName;
+    return ((0, jsx_runtime_1.jsx)(link_1.default, { ...props, children: react_1.default.cloneElement(child, {
+            className: className || null,
+        }) }));
+};
+// Export
+exports.default = ActiveLink;

package/build/system/Alert/index.d.ts

@@ -0,0 +1,2 @@
+declare const Alert: () => import("react/jsx-runtime").JSX.Element | null;
+export default Alert;

package/build/system/Alert/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Alert_1 = __importDefault(require("@ludo.ninja/ui/build/system/Alert"));
+const ui_1 = require("../../store/ui");
+// Component
+const Alert = () => {
+    const { closeAlert, updateData, isAlertOpen } = (0, ui_1.useUiStore)((state) => ({
+        closeAlert: state.closeAlert,
+        updateData: state.alertType,
+        isAlertOpen: state.isAlertOpen,
+    }));
+    if (!(isAlertOpen && updateData))
+        return null;
+    return (0, jsx_runtime_1.jsx)(Alert_1.default, { closeAlert: closeAlert, updateData: updateData });
+};
+// Export
+exports.default = Alert;

package/build/system/Alert/type.d.ts

@@ -0,0 +1,2 @@
+export { alertVariants, alertCaptions, alertBgColors, alertDefaultText, } from '@ludo.ninja/ui/build/system/Alert/type';
+export type { alertTypeProps, alertType, } from '@ludo.ninja/ui/build/system/Alert/type';

package/build/system/Alert/type.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.alertDefaultText = exports.alertBgColors = exports.alertCaptions = exports.alertVariants = void 0;
+var type_1 = require("@ludo.ninja/ui/build/system/Alert/type");
+Object.defineProperty(exports, "alertVariants", { enumerable: true, get: function () { return type_1.alertVariants; } });
+Object.defineProperty(exports, "alertCaptions", { enumerable: true, get: function () { return type_1.alertCaptions; } });
+Object.defineProperty(exports, "alertBgColors", { enumerable: true, get: function () { return type_1.alertBgColors; } });
+Object.defineProperty(exports, "alertDefaultText", { enumerable: true, get: function () { return type_1.alertDefaultText; } });

package/build/system/Badge/index.d.ts

@@ -0,0 +1,10 @@
+import { identitySchema as schema } from '@ludo.ninja/api';
+import { CSSProperties } from "react";
+type BadgeProps = {
+    color?: schema.IReftypeColor | null;
+    title?: string | null;
+    className?: string;
+    style?: CSSProperties;
+};
+declare const Badge: ({ color, title, className, style }: BadgeProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Badge;

package/build/system/Badge/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const api_1 = require("@ludo.ninja/api");
+const Badge = ({ color, title = '', className, style }) => {
+    const COLOR_MAP = {
+        [api_1.identitySchema.IReftypeColor.Green]: '#5FD068',
+        [api_1.identitySchema.IReftypeColor.Blue]: '#43A5FF',
+        [api_1.identitySchema.IReftypeColor.Purple]: '#A533FF',
+    };
+    if (!color || !COLOR_MAP[color])
+        return null;
+    return ((0, jsx_runtime_1.jsxs)("svg", { className: className, style: style, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("title", { children: title }), (0, jsx_runtime_1.jsx)("circle", { cx: "10", cy: "10", r: "10", fill: "url(#paint0_radial_16741_41169)" }), (0, jsx_runtime_1.jsx)("g", { filter: "url(#filter0_d_16741_41169)", children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.55904 10C5.94956 9.60952 6.58272 9.60952 6.97325 10L8.82167 11.7641L13.5858 7C13.9763 6.60947 14.6095 6.60948 15 7C15.3905 7.39052 15.3905 8.02369 15 8.41421L9.52877 13.8854C9.13825 14.276 8.50508 14.276 8.11456 13.8854L5.55904 11.4143C5.16851 11.0237 5.16851 10.3906 5.55904 10Z", fill: "white" }) }), (0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("filter", { id: "filter0_d_16741_41169", x: "1.26614", y: "2.70715", width: "18.0267", height: "15.4712", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB", children: [(0, jsx_runtime_1.jsx)("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), (0, jsx_runtime_1.jsx)("feOffset", {}), (0, jsx_runtime_1.jsx)("feGaussianBlur", { stdDeviation: "2" }), (0, jsx_runtime_1.jsx)("feComposite", { in2: "hardAlpha", operator: "out" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { type: "matrix", values: "0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_16741_41169" }), (0, jsx_runtime_1.jsx)("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow_16741_41169", result: "shape" })] }), (0, jsx_runtime_1.jsxs)("radialGradient", { id: "paint0_radial_16741_41169", cx: "0", cy: "0", r: "1", gradientUnits: "userSpaceOnUse", gradientTransform: "translate(10 10) rotate(90) scale(10)", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0.748", stopColor: COLOR_MAP[color] }), (0, jsx_runtime_1.jsx)("stop", { offset: "1", stopColor: COLOR_MAP[color], stopOpacity: "0" })] })] })] }));
+};
+exports.default = Badge;

package/build/system/BasicOverlay/index.d.ts

@@ -0,0 +1,2 @@
+declare const BasicOverlay: () => import("react/jsx-runtime").JSX.Element;
+export default BasicOverlay;

package/build/system/BasicOverlay/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledBasicOverlay = styled_components_1.default.div `
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 3;
+  user-select: none;
+`;
+// Component
+const BasicOverlay = () => {
+    return (0, jsx_runtime_1.jsx)(StyledBasicOverlay, { "data-testid": "basic-overlay" });
+};
+// Export
+exports.default = BasicOverlay;

package/build/system/Buttons/IconButton/index.d.ts

@@ -0,0 +1,2 @@
+import IconButton from '@ludo.ninja/ui/build/system/Buttons/IconButton';
+export default IconButton;

package/build/system/Buttons/IconButton/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const IconButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/IconButton"));
+exports.default = IconButton_1.default;

package/build/system/Buttons/IconWithButton/index.d.ts

@@ -0,0 +1,2 @@
+import IconWithButton from '@ludo.ninja/ui/build/system/Buttons/IconWithButton';
+export default IconWithButton;

package/build/system/Buttons/IconWithButton/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const IconWithButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/IconWithButton"));
+exports.default = IconWithButton_1.default;

package/build/system/Buttons/IconWithButton/themes.js

@@ -0,0 +1 @@
+"use strict";

package/build/system/Buttons/MainButton/index.d.ts

@@ -0,0 +1,2 @@
+import MainButton from '@ludo.ninja/ui/build/system/Buttons/MainButton';
+export default MainButton;

package/build/system/Buttons/MainButton/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const MainButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/MainButton"));
+exports.default = MainButton_1.default;

package/build/system/Buttons/MainButton/themes.js

@@ -0,0 +1 @@
+"use strict";

package/build/system/Buttons/SecondaryButton/index.d.ts

@@ -0,0 +1,2 @@
+import SecondaryButton from '@ludo.ninja/ui/build/system/Buttons/SecondaryButton';
+export default SecondaryButton;

package/build/system/Buttons/SecondaryButton/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const SecondaryButton_1 = __importDefault(require("@ludo.ninja/ui/build/system/Buttons/SecondaryButton"));
+exports.default = SecondaryButton_1.default;

package/build/system/Cards/CardCheckbox/index.d.ts

@@ -0,0 +1,5 @@
+declare const CardCheckBox: ({ isActiveCheckbox, onChange }: {
+    isActiveCheckbox: boolean;
+    onChange: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export default CardCheckBox;

package/build/system/Cards/CardCheckbox/index.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScreenWidth_1 = require("../../../styles/ScreenWidth");
+const colors_1 = require("../../../styles/colors");
+const constants_1 = require("@ludo.ninja/core/build/constants");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledCardCheckBox = styled_components_1.default.button `
+  display: flex;
+  padding: 0;
+  margin: 0;
+  border: unset;
+  background: unset;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 10;
+
+  .cardCustomCheckbox {
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    border: 2px solid ${colors_1.WhiteColor};
+    background-color: #12183a33;
+    border-radius: 50%;
+    display: inline-block;
+
+    &.active::after {
+      opacity: 1;
+    }
+
+    &::after {
+      content: "";
+      display: block;
+      background-image: url("${constants_1.staticLink}/forms/checkbox/checked.svg");
+      background-size: cover;
+      background-repeat: no-repeat;
+      width: 32px;
+      height: 32px;
+      opacity: 0;
+      transition: opacity 0.2s;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    @media (max-width: 767px) {
+      width: 24px;
+      height: 24px;
+
+      &::after {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    top: ${(0, _4k_1.adaptiveValueCalc)(16)};
+    right: ${(0, _4k_1.adaptiveValueCalc)(16)};
+
+    .cardCustomCheckbox {
+      width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      border-width: ${(0, _4k_1.adaptiveValueCalc)(2)};
+
+      &::after {
+        width: ${(0, _4k_1.adaptiveValueCalc)(32)};
+        height: ${(0, _4k_1.adaptiveValueCalc)(32)};
+      }
+    }
+  }
+`;
+// Component
+const CardCheckBox = ({ isActiveCheckbox, onChange }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledCardCheckBox, { onClick: (e) => {
+            console.log("StyledCardCheckBox click");
+            e.preventDefault();
+            e.stopPropagation();
+            onChange();
+        }, children: (0, jsx_runtime_1.jsx)("span", { className: `cardCustomCheckbox ${isActiveCheckbox ? "active" : ""}` }) }));
+};
+// Export
+exports.default = CardCheckBox;

package/build/system/Cards/CardContent/CardCategory/CardCategory.test.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/extend-expect";

package/build/system/Cards/CardContent/CardCategory/CardCategory.test.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const index_1 = __importDefault(require("./index"));
+const types_1 = require("../../../../entities/labelCreationType/types");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+describe("CardCategory Component", () => {
+    const labelMock = {
+        text: types_1.LabelText.opportunity,
+        backgroundColor: types_1.LabelBackground.opportunity,
+        color: types_1.LabelColor.opportunity,
+    };
+    test("renders the component with the provided label", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { label: labelMock }));
+        const labelElement = react_1.screen.getByText(types_1.LabelText.opportunity);
+        expect(labelElement).toBeInTheDocument();
+        expect(labelElement).toHaveStyle(`background: ${labelMock.backgroundColor}`);
+        expect(labelElement).toHaveStyle(`color: ${labelMock.color}`);
+    });
+    test("does not render the component when no label is provided", () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { label: undefined }));
+        expect(container.firstChild).toBeNull();
+    });
+});

package/build/system/Cards/CardContent/CardCategory/index.d.ts

@@ -0,0 +1,5 @@
+import { LabelType } from '../../../../entities/labelCreationType/types';
+declare const CardCategory: ({ label }: {
+    label: LabelType | undefined;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default CardCategory;

package/build/system/Cards/CardContent/CardCategory/index.js

@@ -0,0 +1,54 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ScreenWidth_1 = require("../../../../styles/ScreenWidth");
+const typography_1 = require("../../../../styles/typography");
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const styled_components_1 = __importDefault(require("styled-components"));
+// Styles
+const StyledCardCategory = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 8px;
+
+  .category {
+    .label {
+      ${typography_1.FH6};
+      display: inline-block;
+      background: ${(props) => props.background};
+      padding: 1px 5px;
+      line-height: 1.35em;
+      color: ${(props) => props.color};
+      user-select: none;
+      border-radius: 2px;
+      text-transform: uppercase;
+    }
+  }
+
+  @media (max-width: 1040px) {
+    margin-top: 6px;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    margin-top: ${(0, _4k_1.adaptiveValueCalc)(8)};
+
+    .category {
+      .label {
+        padding: ${(0, _4k_1.adaptiveValueCalc)(1)} ${(0, _4k_1.adaptiveValueCalc)(5)};
+        border-radius: ${(0, _4k_1.adaptiveValueCalc)(2)};
+      }
+    }
+  }
+`;
+// Component
+const CardCategory = ({ label }) => {
+    if (!label)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledCardCategory, { background: label.backgroundColor, color: label.color, children: (0, jsx_runtime_1.jsx)("div", { className: "category", children: (0, jsx_runtime_1.jsx)("span", { className: "label", children: label.text }) }) }));
+};
+// Export
+exports.default = CardCategory;

package/build/system/Cards/CardContent/CardContent.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/build/system/Cards/CardContent/CardContent.test.js

@@ -0,0 +1,103 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const router_1 = require("next/router");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const utils_1 = require("@ludo.ninja/utils");
+const index_1 = __importDefault(require("./index"));
+jest.mock('next/router', () => ({
+    useRouter: jest.fn(),
+}));
+jest.mock('@/system/Cards/CardContent/CardShowMore', () => {
+    return function ShowMore() {
+        return (0, jsx_runtime_1.jsx)("div", { "data-testid": "card-show-more", children: "Show More" });
+    };
+});
+describe('CardContent Component', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test('renders correctly with all props', () => {
+        const props = {
+            href: '/test-link',
+            creationName: 'Creation Name',
+            firstName: 'First Name',
+            secondName: 'Second Name',
+            cuttedSecondName: 'Cutted Second Name',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+            isNeedShowMoreButton: true,
+            itemId: '123',
+            // wallets: [{ address: 'wallet-address' }],
+            creatorName: 'Creator Name',
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText(props.creatorName)).toBeInTheDocument();
+        expect(react_1.screen.getByText(props.cuttedSecondName)).toBeInTheDocument();
+        expect(react_1.screen.getByText('Child Component')).toBeInTheDocument();
+        expect(react_1.screen.getByTestId('card-show-more')).toBeInTheDocument();
+    });
+    test('renders shortened firstName and cuttedSecondName if they exceed length', () => {
+        const props = {
+            firstName: 'A very long first name that exceeds twenty characters',
+            cuttedSecondName: 'A very long second name that exceeds twenty characters',
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props, children: props.children }));
+        expect(react_1.screen.getByText((0, utils_1.shortenedText)(props.firstName))).toBeInTheDocument();
+        expect(react_1.screen.getByText(props.cuttedSecondName)).toBeInTheDocument();
+    });
+    test('shows creatorName if provided', () => {
+        const props = {
+            creatorName: 'Creator Name',
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText('Creator Name')).toBeInTheDocument();
+    });
+    test('renders correctly when isGalleryAndFavPage is true', () => {
+        const props = {
+            firstName: 'First Name',
+            cuttedSecondName: 'Cutted Second Name',
+            // wallets: [{ address: 'wallet-address' }],
+            isNeedShowMoreButton: false,
+            itemId: '123',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/galleries',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.getByText('First Name')).toBeInTheDocument();
+    });
+    test('does not render "Show More" button if isNeedShowMoreButton is false', () => {
+        const props = {
+            firstName: 'First Name',
+            cuttedSecondName: 'Cutted Second Name',
+            children: (0, jsx_runtime_1.jsx)("div", { children: "Child Component" }),
+            isNeedShowMoreButton: false,
+            itemId: '123',
+        };
+        router_1.useRouter.mockReturnValue({
+            pathname: '/some-path',
+        });
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { ...props }));
+        expect(react_1.screen.queryByTestId('card-show-more')).not.toBeInTheDocument();
+    });
+});

package/build/system/Cards/CardContent/CardLikes/CardLikes.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/build/system/Cards/CardContent/CardLikes/CardLikes.test.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+require("@testing-library/jest-dom/extend-expect");
+const react_1 = require("@testing-library/react");
+const index_1 = __importDefault(require("./index"));
+jest.mock('@/utils/screen', () => ({
+    useWindowDimensionsWithServerInitial: () => ({
+        windowDimensions: { width: 800, height: 600 },
+    }),
+}));
+// Mock the HeartIcon
+jest.mock('@/public/showCaseIcons/heart.svg', () => function SVG() {
+    return (0, jsx_runtime_1.jsx)("svg", { "data-testid": "heart-icon" });
+});
+// Mock the StyledLikes component
+jest.mock('@/system/Cards/Styles/Likes', () => function Like({ children, isLiked }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-testid": `likes-${isLiked ? 'liked' : 'not-liked'}`, children: children }));
+});
+describe('CardLikes Component', () => {
+    test('renders correctly with likes and liked status', () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { likes: 10, isLiked: true }));
+        const likesElement = react_1.screen.getByTestId('likes-liked');
+        const heartIcon = react_1.screen.getByTestId('heart-icon');
+        const counter = react_1.screen.getByText('10');
+        expect(likesElement).toBeInTheDocument();
+        expect(heartIcon).toBeInTheDocument();
+        expect(counter).toBeInTheDocument();
+    });
+    test('does not render when likes is 0', () => {
+        const { container } = (0, react_1.render)((0, jsx_runtime_1.jsx)(index_1.default, { likes: 0, isLiked: false }));
+        expect(container.firstChild).toBeNull();
+    });
+});

package/build/system/Cards/CardContent/CardLikes/index.d.ts

@@ -0,0 +1,5 @@
+declare const CardLikes: ({ likes, isLiked }: {
+    likes: number;
+    isLiked: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default CardLikes;