linkedunion-design-kit 1.2.1 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,2 +1,2 @@
1
1
  import { CardProps } from "@/types/interface";
2
- export declare const Card: ({ type, image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const Card: ({ type, ...defaultCardProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
@@ -9,21 +9,23 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
12
23
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { cardLayoutEnum, orientationEnum, sectionType } from "../../utils/enum";
24
+ import { sectionType } from "../../utils/enum";
14
25
  import { PostByCategory } from "./PostByCategory";
15
26
  import { ContactProfile } from "./ContactProfile";
16
27
  export var Card = function (_a) {
17
- 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;
18
- var data = {
19
- type: type,
20
- image: image,
21
- layout: layout,
22
- mediaPosition: mediaPosition,
23
- heading: heading,
24
- body: body,
25
- className: className,
26
- btnLabel: btnLabel,
27
- };
28
+ var _b = _a.type, type = _b === void 0 ? sectionType.postByCategoriesTheme : _b, defaultCardProps = __rest(_a, ["type"]);
29
+ var data = __assign({ type: type }, defaultCardProps);
28
30
  return (_jsxs(_Fragment, { children: [type === sectionType.postByCategoriesTheme && _jsx(PostByCategory, __assign({}, data)), type === sectionType.contactsProfileTheme && _jsx(ContactProfile, __assign({}, data))] }));
29
31
  };
@@ -27,6 +27,7 @@ card.args = {
27
27
  mediaPosition: orientationEnum.landscape,
28
28
  layout: cardLayoutEnum.horizontal,
29
29
  btnLabel: 'View More',
30
+ href: 'https://www.google.com/',
30
31
  };
31
32
  card.argTypes = {
32
33
  mediaPosition: {
@@ -1,2 +1,2 @@
1
1
  import { CardProps } from "@/types/interface";
2
- export declare const ContactProfile: ({ image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const ContactProfile: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { cardLayoutEnum, contentTypeEnum, orientationEnum } from "../../utils/enum";
2
+ import { cardLayoutEnum, contentTypeEnum } from "../../utils/enum";
3
3
  import { LuImage } from "../Images/LuImage";
4
4
  import { Button } from "../Button/Button";
5
- export var ContactProfile = function (_a) {
6
- 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;
7
- return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
8
- _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(className, " lu-shadow-md flex gap-x-[20px]"), children: [_jsx("div", { className: "max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image", children: _jsx(LuImage, { image: image, aspectRatio: "", width: 160, height: 160, className: "lu-border-rounded-full 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: "lu-text-default 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 lu-text-caption 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 card_button" })] })] })
9
- : (_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"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: image, width: 160, height: 160, className: "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: "lu-text-default 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 lu-text-caption 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" })] }) })) }));
5
+ import Link from "next/link";
6
+ export var ContactProfile = function (props) {
7
+ return (_jsx(_Fragment, { children: props.layout === cardLayoutEnum.horizontal ?
8
+ _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(props.className, " lu-shadow-md flex gap-x-[20px]"), children: [_jsx("div", { className: "max-w-[240px] overflow-hidden lu-aspect-square horizontal_card_image", children: _jsx(LuImage, { image: props.image, aspectRatio: "", width: 160, height: 160, className: "lu-border-rounded-full lu-height-100 object-cover", orientation: props.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: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption horizontal_body_text", children: props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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 card_button" }) })] })] })
9
+ : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(props.className, " lu-shadow-md flex flex-col items-center"), children: [_jsx("div", { className: "max-w-[160px] overflow-hidden lu-aspect-square", children: _jsx(LuImage, { image: props.image, width: 160, height: 160, className: "lu-height-100 object-cover lu-border-rounded-full", orientation: props.mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text", children: props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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" }) })] }) })) }));
10
10
  };
@@ -1,2 +1,2 @@
1
1
  import { CardProps } from "@/types/interface";
2
- export declare const PostByCategory: ({ image, layout, mediaPosition, heading, body, className, btnLabel }: CardProps) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const PostByCategory: (props: CardProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { cardLayoutEnum, contentTypeEnum, orientationEnum } from "../../utils/enum";
2
+ import { cardLayoutEnum, contentTypeEnum } from "../../utils/enum";
3
3
  import { LuImage } from "../Images/LuImage";
4
4
  import { Button } from "../Button/Button";
5
- export var PostByCategory = function (_a) {
6
- 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;
7
- return (_jsx(_Fragment, { children: layout === cardLayoutEnum.horizontal ?
8
- _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 horizontal_card_image", children: _jsx(LuImage, { image: image, aspectRatio: "", width: 240, height: 240, 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: "lu-text-default 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 lu-text-caption", 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 card_button" })] })] })
9
- : (_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, width: 240, height: 240, 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: "lu-text-default 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 lu-text-caption 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" })] }) })) }));
5
+ import Link from "next/link";
6
+ export var PostByCategory = function (props) {
7
+ return (_jsx(_Fragment, { children: (props === null || props === void 0 ? void 0 : props.layout) === cardLayoutEnum.horizontal ?
8
+ _jsxs("div", { className: "lu-pd-250 bg-white lu-border-rounded-xl ".concat(props === null || props === void 0 ? void 0 : props.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 horizontal_card_image", children: _jsx(LuImage, { image: props === null || props === void 0 ? void 0 : props.image, aspectRatio: "", width: 240, height: 240, className: "lu-border-rounded-lg lu-width-100 lu-height-100 object-cover", orientation: props === null || props === void 0 ? void 0 : props.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: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold horizontal_card_heading", children: props === null || props === void 0 ? void 0 : props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light horizontal_body_text lu-text-caption", children: props === null || props === void 0 ? void 0 : props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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 card_button" }) })] })] })
9
+ : (_jsx(_Fragment, { children: _jsxs("div", { className: "lu-pd-400 bg-white lu-border-rounded-xl ".concat(props.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: props.image, width: 240, height: 240, className: "lu-width-100 lu-height-100 object-cover", orientation: props.mediaPosition }) }), _jsxs("div", { className: "flex flex-col items-center flex-grow lu-m-250 text-center h-[100px]", children: [_jsx("div", { className: "lu-text-default lu-font-size-2x-large lu-font-weight-semibold vertical_card_heading", children: props.heading }), _jsx("p", { className: "lu-base-font-size lu-font-weight-extra-light lu-text-caption vertical_body_text", children: props.body })] }), _jsx(Link, { href: props.href || '', className: "lu-width-100", children: _jsx(Button, { contentType: contentTypeEnum.text_with_icon, label: props.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" }) })] }) })) }));
10
10
  };
package/dist/index.d.ts CHANGED
@@ -6,4 +6,5 @@ export { LUIcon } from './components/Icons/LUIcon';
6
6
  export { Card } from './components/MediaCard/Card';
7
7
  export { Button } from './components/Button/Button';
8
8
  export { LuImage } from './components/Images/LuImage';
9
+ export { Avatar } from './components/Avatar/Avatar';
9
10
  import './styles/global.css';
package/dist/index.js CHANGED
@@ -6,4 +6,5 @@ export { LUIcon } from './components/Icons/LUIcon';
6
6
  export { Card } from './components/MediaCard/Card';
7
7
  export { Button } from './components/Button/Button';
8
8
  export { LuImage } from './components/Images/LuImage';
9
+ export { Avatar } from './components/Avatar/Avatar';
9
10
  import './styles/global.css';
@@ -1,4 +1,15 @@
1
1
  export declare const 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.";
2
+ export declare const defaultCardProps: {
3
+ type: string;
4
+ image: string;
5
+ layout: string;
6
+ mediaPosition: string;
7
+ heading: string;
8
+ body: string;
9
+ className: string;
10
+ btnLabel: string;
11
+ href: string;
12
+ };
2
13
  export declare const colorGroups: {
3
14
  primary: string[];
4
15
  gray: string[];
@@ -1,6 +1,17 @@
1
- import { sectionType } from "./enum";
1
+ import { cardLayoutEnum, orientationEnum, sectionType } from "./enum";
2
2
  //************Used for typography and color utilities Storybook************
3
3
  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.";
4
+ export var defaultCardProps = {
5
+ type: sectionType.postByCategoriesTheme,
6
+ image: '/images/demo-image.jpg',
7
+ layout: cardLayoutEnum.horizontal,
8
+ mediaPosition: orientationEnum.landscape,
9
+ heading: 'Heading Text',
10
+ body: 'The quick brown fox jumps over the lazy dog.',
11
+ className: '',
12
+ btnLabel: 'View More',
13
+ href: 'https://www.google.com/'
14
+ };
4
15
  export var colorGroups = {
5
16
  primary: [
6
17
  "bg-primary-0",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "linkedunion-design-kit",
3
- "version": "1.2.1",
3
+ "version": "1.2.3",
4
4
  "private": false,
5
5
  "files": [
6
6
  "dist",