linkedunion-design-kit 1.1.5 → 1.1.6

package/dist/components/Avatar/Avatar.js

@@ -5,7 +5,7 @@ import { avtarBackgroundSize } from "../../utils";
 export var Avatar = function (_a) {
     var image = _a.image, _b = _a.icon, icon = _b === void 0 ? 'user' : _b, shape = _a.shape, size = _a.size, className = _a.className;
     var defaultIcon = iconList.find(function (item) { return item.key === (icon || "user"); });
-    return (_jsx(_Fragment, { children: _jsx("div", { className: "".concat(image ? 'bg-primary-200' : 'bg-gray-100', " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: avtarBackgroundSize(size), children: image ?
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "".concat(image ? 'bg-primary-200' : 'bg-gray-100', " flex items-center justify-center ").concat(shape, " overflow-hidden ").concat(className), style: avtarBackgroundSize(size), "data-testid": "lu-avatar", children: image ?
                 _jsx("img", { src: image, alt: "image", className: "w-full h-full object-cover" })
                 :
                     _jsx(LUIcon, { size: size, icon: defaultIcon === null || defaultIcon === void 0 ? void 0 : defaultIcon.key, fill: "lu-neutral-icon-dark", className: "" }) }) }));

package/dist/components/Avatar/Avatar.stories.js

@@ -19,7 +19,7 @@ export default {
 var Template = function (args) { return _jsx(Avatar, __assign({}, args)); };
 export var avatar = Template.bind({});
 avatar.args = {
-    image: '/images/sanjna.jpg',
+    image: '/images/avatar.png',
     shape: 'square',
     size: 'lu-avatar-massive',
     className: '',

package/dist/components/Images/LuImage.d.ts

@@ -1,2 +1,2 @@
 import { AspectRatioProps } from "@/types/interface";
-export declare const Image: ({ image, aspectRatio, className }: AspectRatioProps) => import("react/jsx-runtime").JSX.Element;
+export declare const LuImage: ({ image, aspectRatio, className }: AspectRatioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Images/LuImage.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-export var Image = function (_a) {
+import Image from "next/image";
+export var LuImage = function (_a) {
     var image = _a.image, aspectRatio = _a.aspectRatio, className = _a.className;
-    return (_jsx("div", { "data-testid": "lu-image", children: _jsx("img", { src: image || '', alt: "Image", className: "w-[240px] ".concat(aspectRatio, " ").concat(className) }) }));
+    return (_jsx(Image, { src: image || '', alt: "Image", width: 240, height: 160, className: "".concat(aspectRatio, " ").concat(className) }));
 };

package/dist/components/Images/LuImage.stories.js

@@ -10,12 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Image } from "./LuImage";
+import { LuImage } from "./LuImage";
 import { landscapeaspectRatioList, portraitaspectRatioList } from "../../utils";
 import { orientationEnum } from "../../utils/enum";
 export default {
     title: "Components/Image",
-    component: Image,
+    component: LuImage,
 };
 var Template = function (args, _a) {
     var argTypes = _a.argTypes;
@@ -26,7 +26,7 @@ var Template = function (args, _a) {
         ratio.key,
         ratio.label,
     ]; }));
-    return _jsx(Image, __assign({}, args));
+    return _jsx(LuImage, __assign({}, args));
 };
 export var image = Template.bind({});
 image.args = {

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

@@ -1,2 +1,2 @@
 import { CardProps } from "@/types/interface";
-export declare const Card: ({ image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ type, image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaCard/Card.js

@@ -1,10 +1,29 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Image } from "../Images/LuImage";
-import { Button } from "../Button/Button";
-import { cardLayoutEnum, contentTypeEnum, orientationEnum } from "../../utils/enum";
+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 { cardLayoutEnum, orientationEnum, sectionType } from "../../utils/enum";
+import { PostByCategory } from "./PostByCategory";
+import { ContactProfile } from "./ContactProfile";
 export var Card = function (_a) {
-    var _b = _a.image, image = _b === void 0 ? '/images/demo-image.jpg' : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? orientationEnum.landscape : _d, _e = _a.heading, heading = _e === void 0 ? 'Heading Text' : _e, _f = _a.body, body = _f === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.btnLabel, btnLabel = _h === void 0 ? 'View More' : _h;
-    return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
-            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] w-fit"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] })] })
-            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center w-full"), children: [_jsx(Image, { image: image, aspectRatio: "lu-aspect-square", className: "lu-border-rounded-lg", orientation: mediaPosition }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[175px]", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light vertical_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
+    var _b = _a.type, type = _b === void 0 ? sectionType.postByCategoriesTheme : _b, _c = _a.image, image = _c === void 0 ? '/images/demo-image.jpg' : _c, _d = _a.layout, layout = _d === void 0 ? cardLayoutEnum.horizontal : _d, _e = _a.mediaPosition, mediaPosition = _e === void 0 ? orientationEnum.landscape : _e, _f = _a.heading, heading = _f === void 0 ? 'Heading Text' : _f, _g = _a.body, body = _g === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _g, _h = _a.className, className = _h === void 0 ? '' : _h, _j = _a.btnLabel, btnLabel = _j === void 0 ? 'View More' : _j;
+    var data = {
+        type: type,
+        image: image,
+        layout: layout,
+        mediaPosition: mediaPosition,
+        heading: heading,
+        body: body,
+        className: className,
+        btnLabel: btnLabel,
+    };
+    return (_jsxs(_Fragment, { children: [type === sectionType.postByCategoriesTheme && _jsx(PostByCategory, __assign({}, data)), type === sectionType.contactsProfileTheme && _jsx(ContactProfile, __assign({}, data))] }));
 };

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

@@ -11,7 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Card } from "./Card";
-import { cardLayoutEnum, orientationEnum } from "../../utils/enum";
+import { cardLayoutEnum, orientationEnum, sectionType } from "../../utils/enum";
+import { sectionTypeList } from "../../utils";
 export default {
     title: "Components/Card",
     component: Card,
@@ -19,12 +20,13 @@ export default {
 var Template = function (args) { return _jsx(Card, __assign({}, args)); };
 export var card = Template.bind({});
 card.args = {
+    type: sectionType.postByCategoriesTheme,
     image: '/images/demo-image.jpg',
     heading: 'Heading Text',
     body: 'The quick brown fox jumps over the lazy dog.',
     mediaPosition: orientationEnum.landscape,
     layout: cardLayoutEnum.horizontal,
-    btnLabel: 'View More'
+    btnLabel: 'View More',
 };
 card.argTypes = {
     mediaPosition: {
@@ -35,4 +37,8 @@ card.argTypes = {
         control: { type: "select" },
         options: [cardLayoutEnum.horizontal, cardLayoutEnum.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/components/MediaCard/ContactProfile.d.ts

@@ -0,0 +1,2 @@
+import { CardProps } from "@/types/interface";
+export declare const ContactProfile: ({ image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaCard/ContactProfile.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cardLayoutEnum, contentTypeEnum, orientationEnum } from "../../utils/enum";
+import { LuImage } from "../Images/LuImage";
+import { Button } from "../Button/Button";
+export var ContactProfile = function (_a) {
+    var _b = _a.image, image = _b === void 0 ? '/images/demo-image.jpg' : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? orientationEnum.landscape : _d, _e = _a.heading, heading = _e === void 0 ? 'Heading Text' : _e, _f = _a.body, body = _f === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.btnLabel, btnLabel = _h === void 0 ? 'View More' : _h;
+    return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
+            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, aspectRatio: "", className: "lu-border-rounded-full lu-width-100 lu-height-100 object-cover", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] })] })
+            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, className: "lu-width-100 lu-height-100 object-cover lu-border-rounded-full", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light vertical_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
+};

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

@@ -0,0 +1,2 @@
+import { CardProps } from "@/types/interface";
+export declare const PostByCategory: ({ image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaCard/PostByCategory.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cardLayoutEnum, contentTypeEnum, orientationEnum } from "../../utils/enum";
+import { LuImage } from "../Images/LuImage";
+import { Button } from "../Button/Button";
+export var PostByCategory = function (_a) {
+    var _b = _a.image, image = _b === void 0 ? '/images/demo-image.jpg' : _b, _c = _a.layout, layout = _c === void 0 ? cardLayoutEnum.horizontal : _c, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? orientationEnum.landscape : _d, _e = _a.heading, heading = _e === void 0 ? 'Heading Text' : _e, _f = _a.body, body = _f === void 0 ? 'The quick brown fox jumps over the lazy dog.' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.btnLabel, btnLabel = _h === void 0 ? 'View More' : _h;
+    return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
+            _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px] lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, aspectRatio: "", className: "lu-border-rounded-lg lu-width-100 lu-height-100 object-cover", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-1 flex-col", children: [_jsxs("div", { className: "flex flex-col justify-center flex-1 h-full", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] })] })
+            : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex flex-col items-center lu-width-100"), children: [_jsx("div", { className: "lu-width-100 max-w-[240px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, className: "lu-width-100 lu-height-100 object-cover", orientation: mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "text-gray-950 lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light vertical_body_text", children: body })] }), _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: btnLabel, variant: 'lu-btn-gray', iconRight: "angle-right", rightIconSize: "lu-icon-small", size: "lu-btn-lg", className: "lu-border-rounded-sm justify-between lu-width-100" })] }) })) }));
+};

package/dist/styles/global.css

@@ -613,8 +613,8 @@ video {
 .h-48 {
   height: 12rem;
 }
-.h-\[175px\] {
-  height: 175px;
+.h-\[100px\] {
+  height: 100px;
 }
 .h-full {
   height: 100%;
@@ -679,9 +679,6 @@ video {
 .w-10 {
   width: 2.5rem;
 }
-.w-\[240px\] {
-  width: 240px;
-}
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
@@ -746,6 +743,9 @@ video {
 .max-w-5xl {
   max-width: 64rem;
 }
+.max-w-\[240px\] {
+  max-width: 240px;
+}
 .max-w-\[30ch\] {
   max-width: 30ch;
 }
@@ -10632,17 +10632,18 @@ table, th, td {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-@media (max-width: 430px) {
-  .horizontal_body_text {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    /* Limits text to 2 lines */
-    line-clamp: 2;
-    /* Limits text to 2 lines */
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+.horizontal_body_text {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.horizontal_card_heading{
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-transform: capitalize;
 }
 .before\:absolute::before {
   content: var(--tw-content);

package/dist/utils/enum.d.ts

@@ -15,3 +15,11 @@ export declare const cardLayoutEnum: {
     horizontal: string;
     vertical: string;
 };
+export declare const sectionType: {
+    multiplePostsTheme: string;
+    singlePostTheme: string;
+    postByCategoriesTheme: string;
+    contactsProfileTheme: string;
+    galleryTheme: string;
+    albumTheme: string;
+};

package/dist/utils/enum.js

@@ -15,3 +15,11 @@ export var cardLayoutEnum = {
     horizontal: 'Horizontal',
     vertical: 'Vertical'
 };
+export var sectionType = {
+    multiplePostsTheme: "Multiple Posts",
+    singlePostTheme: 'Single Post',
+    postByCategoriesTheme: 'Post By Categories',
+    contactsProfileTheme: 'Contacts Profile',
+    galleryTheme: 'Gallery',
+    albumTheme: 'Album'
+};

package/dist/utils/index.d.ts

@@ -111,6 +111,10 @@ export declare const avtarBackgroundSize: (size: string) => {
     width: string;
     height: string;
 } | undefined;
+export declare const sectionTypeList: {
+    key: string;
+    label: string;
+}[];
 export default function generateUtilities(property: string, theme: (property: string) => Record<string, string>): Record<string, Record<string, string>>;
 export declare const customColors: {
     white: string;

package/dist/utils/index.js

@@ -1,3 +1,4 @@
+import { sectionType } from "./enum";
 //************Used for typography and color utilities Storybook************
 export var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
 export var colorGroups = {
@@ -416,6 +417,14 @@ export var avtarBackgroundSize = function (size) {
         };
     }
 };
+export var sectionTypeList = [
+    { key: sectionType.multiplePostsTheme, label: sectionType.multiplePostsTheme },
+    { key: sectionType.albumTheme, label: sectionType.albumTheme },
+    { key: sectionType.contactsProfileTheme, label: sectionType.contactsProfileTheme },
+    { key: sectionType.singlePostTheme, label: sectionType.singlePostTheme },
+    { key: sectionType.postByCategoriesTheme, label: sectionType.postByCategoriesTheme },
+    { key: sectionType.galleryTheme, label: sectionType.galleryTheme }
+];
 //Plugin for generating utilities (Used in tailwind.config.js)
 export default function generateUtilities(property, theme) {
     var utilities = theme(property);

package/package.json

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