linkedunion-design-kit 1.7.2 → 1.7.3

package/dist/src/components/Card/MultipleNews/MultiNews.d.ts

@@ -0,0 +1,2 @@
+import { CardInterface } from "../type";
+export declare const MultiNews: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/MultipleNews/MultiNews.js

@@ -0,0 +1,48 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import LuImage from "../../Images/LuImage";
+import Link from "next/link";
+import { Button } from "../../Button/Button";
+import { Body } from "../../Typography/Body/body";
+import { Heading } from "../../Typography/Heading/heading";
+export var MultiNews = function (_a) {
+    var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? "https://www.google.com/" : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "right" : _d, orientation = _a.orientation;
+    // Create modified item with shuffled subtitle and description when mediaPosition is middle
+    var modifiedItem = mediaPosition === "middle"
+        ? __assign(__assign({}, item), { description: item.subtitle, subtitle: item.description }) : item;
+    // Common card media component
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(LuImage, { src: image, width: 240, height: 240, className: " object-cover w-full ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" }));
+    };
+    // Common content section
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h5-700", className: "line-clamp-1 capitalize ".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.title }), _jsx(Body, { variant: "body-xl", className: "".concat(mediaPosition === "middle" ? "line-clamp-1" : "line-clamp-2 h-16", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: modifiedItem === null || modifiedItem === void 0 ? void 0 : modifiedItem.description })] }));
+    };
+    // Common button component with conditional shape
+    var ActionButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(Link, { href: href, passHref: true, className: className, children: _jsx(Button, __assign({ endIcon: "angle-right", size: mediaPosition === "middle" ? "xl" : "lg" }, (mediaPosition === "middle" && { shape: "rounded-full" }), { className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel })) }));
+    };
+    // Optional subtitle component
+    var Subtitle = function () { return (_jsx(_Fragment, { children: mediaPosition === "middle" && (_jsx(Body, { variant: "body-xl", className: "line-clamp-4 h-32 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardSubtitle), dangerouslySetInnerHTML: {
+                __html: modifiedItem.subtitle || "",
+            } })) })); };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { className: "!p-5 bg-white rounded-2xl flex ".concat(mediaPosition === "right" ? "flex-row-reverse" : "", " !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "max-w-40 aspect-square rounded-lg" }), _jsxs("div", { className: "flex flex-col !gap-5 w-full", children: [_jsx(CardContent, {}), _jsx(ActionButton, {})] })] }));
+    }
+    // Vertical layout
+    return (_jsxs("div", { className: "p-8 bg-white rounded-2xl flex flex-col !gap-5 max-w-md shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex ".concat(mediaPosition === "top" ? "flex-col" : "flex-col-reverse", " !gap-5"), children: [_jsx(Subtitle, {}), _jsx(CardMedia, { className: "aspect-16/10" }), _jsx(CardContent, {})] }), _jsx(ActionButton, {})] }));
+};

package/dist/src/components/Card/MultipleNews/MultiNews.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { MultiNews } from "./MultiNews";
+declare const meta: Meta<typeof MultiNews>;
+export default meta;
+type Story = StoryObj<typeof MultiNews>;
+export declare const MultiNewsHorizontalLeft: Story;
+export declare const MultiNewsHorizontalRight: Story;
+export declare const MultiNewsVerticalTop: Story;
+export declare const MultiNewsVerticalBottom: Story;

package/dist/src/components/Card/MultipleNews/MultiNews.stories.js

@@ -0,0 +1,52 @@
+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 { MultiNews } from "./MultiNews";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+var meta = {
+    title: "Components/NewCard/MultiNews",
+    component: MultiNews,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+var baseCardArgs = {
+    type: "multipleNews",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        subtitle: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var MultiNewsHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var MultiNewsHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};
+export var MultiNewsVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
+};
+export var MultiNewsVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
+};

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

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { PostByCategory } from "./PostByCategory/PostByCategory";
-import { MultiNews } from "./MultiNews";
+import { MultiNews } from "./MultipleNews/MultiNews";
 import { SinglePost } from "./SinglePost";
 import { Dummy_Url } from "../../utils/constants";
 import { PhotoGallery } from "./PhotoGallery";

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

@@ -28,7 +28,7 @@ export var variant = {
     "label-xl": "!text-xl",
     "label-lg": "!text-lg",
     "label-md": "!text-base",
-    "label-sm": "!text-sm",
+    "label-sm": "!text-sm !font-normal",
 };
 var labelVariants = cva("flex items-center !gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 !font-medium !leading-normal m-0", {
     variants: { variant: variant },

package/dist/src/components/Typography/Heading/heading.js

@@ -64,6 +64,6 @@ function Heading(_a) {
     if (variant === null || variant === void 0 ? void 0 : variant.startsWith("h")) {
         Tag = variant.split("-")[0];
     }
-    return (_jsx(Tag, __assign({ className: cn(headingVariants({ variant: variant, className: className })) }, props, { children: children })));
+    return (_jsx(Tag, __assign({ className: cn(headingVariants({ variant: variant, className: className }), "m-0") }, props, { children: children })));
 }
 export { Heading, headingVariants };

package/dist/styles/global.css

@@ -284,9 +284,6 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
-  .mt-5 {
-    margin-top: calc(var(--spacing) * 5);
-  }
   .\!mb-4 {
     margin-bottom: calc(var(--spacing) * 4) !important;
   }
@@ -305,6 +302,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
   .block {
     display: block;
   }
@@ -3261,7 +3264,7 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
-  --primary: #276ab3;
+  --primary: oklch(0.205 0 0);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "private": false,
   "files": [
     "dist",