@popsure/dirty-swan 0.41.7 → 0.41.8
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.
- package/dist/cjs/index.js +7 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/components/card/index.d.ts +1 -0
- package/dist/esm/components/card/index.js +7 -6
- package/dist/esm/components/card/index.js.map +1 -1
- package/dist/esm/lib/components/card/index.d.ts +1 -0
- package/package.json +1 -1
- package/src/lib/components/card/index.tsx +28 -24
- package/src/lib/components/card/style.module.scss +2 -1
|
@@ -6,7 +6,7 @@ import { s as styleInject } from '../../style-inject.es-1f59c1d0.js';
|
|
|
6
6
|
import 'react';
|
|
7
7
|
import '../icon/IconWrapper/IconWrapper.js';
|
|
8
8
|
|
|
9
|
-
var css_248z = ".style-module_button__KWY7b {\n border: 1px solid transparent;\n color: #26262e;\n outline-color: #8e8cee;\n transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n border-color: #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n margin-left: 24px;\n}";
|
|
9
|
+
var css_248z = ".style-module_button__KWY7b {\n background-color: transparent;\n border: 1px solid transparent;\n color: #26262e;\n outline-color: #8e8cee;\n transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n border-color: #8e8cee;\n color: #8e8cee;\n}\n\n.style-module_icon__N6B2P {\n margin-right: 12px;\n}\n.style-module_iconbalanced__3JdKC {\n margin-right: 16px;\n}\n.style-module_iconspacious__36ovv {\n margin-right: 24px;\n}\n\n.style-module_actionIcon__2klnb {\n margin-left: 12px;\n}\n.style-module_actionIconbalanced__1duYl {\n margin-left: 16px;\n}\n.style-module_actionIconspacious__1sjsd {\n margin-left: 24px;\n}";
|
|
10
10
|
var styles = {"button":"style-module_button__KWY7b","icon":"style-module_icon__N6B2P","iconbalanced":"style-module_iconbalanced__3JdKC","iconspacious":"style-module_iconspacious__36ovv","actionIcon":"style-module_actionIcon__2klnb","actionIconbalanced":"style-module_actionIconbalanced__1duYl","actionIconspacious":"style-module_actionIconspacious__1sjsd"};
|
|
11
11
|
styleInject(css_248z);
|
|
12
12
|
|
|
@@ -15,9 +15,9 @@ var CardContent = function (_a) {
|
|
|
15
15
|
return (jsxs("section", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
|
|
16
16
|
compact: 'p16',
|
|
17
17
|
balanced: 'p24',
|
|
18
|
-
spacious: 'p32'
|
|
19
|
-
}[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className:
|
|
20
|
-
jsxs("div", __assign({ className:
|
|
18
|
+
spacious: 'p32',
|
|
19
|
+
}[density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.wrapper) }, { children: [jsxs("div", __assign({ className: "d-flex w100" }, { children: [icon && (jsx("div", __assign({ className: classNames("d-flex ai-center tc-primary-500", styles.icon, styles["icon" + density], classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.icon) }, { children: icon }), void 0)),
|
|
20
|
+
jsxs("div", __assign({ className: "d-flex jc-between w100" }, { children: [jsxs("div", __assign({ className: "d-flex jc-center gap8 fd-column tc-grey-900 w100" }, { children: [label && (jsx("h3", __assign({ className: classNames('p-p--small', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.label) }, { children: label }), void 0)),
|
|
21
21
|
title && (jsx("h2", __assign({ className: classNames(classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.title, {
|
|
22
22
|
large: 'p-h3',
|
|
23
23
|
medium: 'p-h4',
|
|
@@ -25,12 +25,13 @@ var CardContent = function (_a) {
|
|
|
25
25
|
}[titleVariant]) }, { children: title }), void 0)),
|
|
26
26
|
description && (jsx("div", __assign({ className: classNames('tc-grey-600', classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.description, descriptionVariant === 'small' ? 'p-p--small' : 'p-p') }, { children: description }), void 0))] }), void 0),
|
|
27
27
|
onClick && (jsx("div", __assign({ className: classNames(styles.actionIcon, classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.actionIcon, styles["actionIcon" + density], 'd-flex ai-center') }, { children: actionIcon || jsx(ChevronRightIcon, { size: 24 }, void 0) }), void 0))] }), void 0)] }), void 0),
|
|
28
|
-
children &&
|
|
28
|
+
children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0));
|
|
29
29
|
};
|
|
30
30
|
var Card = function (props) {
|
|
31
|
+
var _a;
|
|
31
32
|
var onClick = props.onClick;
|
|
32
33
|
if (onClick) {
|
|
33
|
-
return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8', styles.button), onClick: onClick, type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
|
|
34
|
+
return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8', styles.button, (_a = props.classNames) === null || _a === void 0 ? void 0 : _a.buttonWrapper), onClick: onClick, type: "button" }, { children: jsx(CardContent, __assign({}, props), void 0) }), void 0));
|
|
34
35
|
}
|
|
35
36
|
return jsx(CardContent, __assign({}, props), void 0);
|
|
36
37
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nexport interface CardProps {\n children?: ReactNode;\n classNames?: {\n wrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: 'balanced' | 'compact' | 'spacious';\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: 'small' | 'medium' | 'large';\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/card/index.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport classNamesUtil from 'classnames';\nimport { ChevronRightIcon } from '../icon';\n\nimport styles from './style.module.scss';\n\nexport interface CardProps {\n children?: ReactNode;\n classNames?: {\n buttonWrapper?: string;\n wrapper?: string;\n label?: string;\n title?: string;\n description?: string;\n children?: string;\n icon?: string;\n actionIcon?: string;\n };\n density?: 'balanced' | 'compact' | 'spacious';\n dropShadow?: boolean;\n icon?: ReactNode;\n title?: ReactNode;\n titleVariant?: 'small' | 'medium' | 'large';\n description?: ReactNode;\n descriptionVariant?: 'small' | 'large';\n label?: ReactNode;\n onClick?: () => void;\n actionIcon?: ReactNode;\n}\n\nconst CardContent = ({\n children,\n classNames,\n density = 'balanced',\n description,\n descriptionVariant = 'large',\n dropShadow = true,\n icon,\n label,\n onClick,\n actionIcon,\n title,\n titleVariant = 'large',\n}: CardProps) => (\n <section\n className={classNamesUtil(\n 'd-flex fd-column jc-center br8 bg-white w100 ta-left',\n { 'bs-sm': dropShadow },\n {\n compact: 'p16',\n balanced: 'p24',\n spacious: 'p32',\n }[density],\n classNames?.wrapper\n )}\n >\n <div className=\"d-flex w100\">\n {icon && (\n <div\n className={classNamesUtil(\n `d-flex ai-center tc-primary-500`,\n styles.icon,\n styles[`icon${density}`],\n classNames?.icon\n )}\n >\n {icon}\n </div>\n )}\n\n <div className=\"d-flex jc-between w100\">\n <div className=\"d-flex jc-center gap8 fd-column tc-grey-900 w100\">\n {label && (\n <h3 className={classNamesUtil('p-p--small', classNames?.label)}>\n {label}\n </h3>\n )}\n\n {title && (\n <h2\n className={classNamesUtil(\n classNames?.title,\n {\n large: 'p-h3',\n medium: 'p-h4',\n small: 'p-p',\n }[titleVariant]\n )}\n >\n {title}\n </h2>\n )}\n\n {description && (\n <div\n className={classNamesUtil(\n 'tc-grey-600',\n classNames?.description,\n descriptionVariant === 'small' ? 'p-p--small' : 'p-p'\n )}\n >\n {description}\n </div>\n )}\n </div>\n\n {onClick && (\n <div\n className={classNamesUtil(\n styles.actionIcon,\n classNames?.actionIcon,\n styles[`actionIcon${density}`],\n 'd-flex ai-center'\n )}\n >\n {actionIcon || <ChevronRightIcon size={24} />}\n </div>\n )}\n </div>\n </div>\n\n {children && <div className={classNames?.children}>{children}</div>}\n </section>\n);\n\nconst Card = (props: CardProps) => {\n const { onClick } = props;\n\n if (onClick) {\n return (\n <button\n className={classNamesUtil(\n 'c-pointer d-flex w100 br8',\n styles.button,\n props.classNames?.buttonWrapper\n )}\n onClick={onClick}\n type=\"button\"\n >\n <CardContent {...props} />\n </button>\n );\n }\n\n return <CardContent {...props} />;\n};\n\nexport { Card };\n"],"names":["classNames","_jsxs","classNamesUtil","_jsx"],"mappings":";;;;;;;;;;;;AA8BA,IAAM,WAAW,GAAG,UAAC,EAaT;QAZV,QAAQ,cAAA,EACRA,YAAU,gBAAA,EACV,eAAoB,EAApB,OAAO,mBAAG,UAAU,KAAA,EACpB,WAAW,iBAAA,EACX,0BAA4B,EAA5B,kBAAkB,mBAAG,OAAO,KAAA,EAC5B,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACP,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,oBAAsB,EAAtB,YAAY,mBAAG,OAAO,KAAA;IACP,QACfC,2BACE,SAAS,EAAEC,UAAc,CACvB,sDAAsD,EACtD,EAAE,OAAO,EAAE,UAAU,EAAE,EACvB;YACE,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;YACf,QAAQ,EAAE,KAAK;SAChB,CAAC,OAAO,CAAC,EACVF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,OAAO,CACpB,iBAEDC,uBAAK,SAAS,EAAC,aAAa,iBACzB,IAAI,KACHE,sBACE,SAAS,EAAED,UAAc,CACvB,iCAAiC,EACjC,MAAM,CAAC,IAAI,EACX,MAAM,CAAC,SAAO,OAAS,CAAC,EACxBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,IAAI,CACjB,gBAEA,IAAI,YACD,CACP;oBAEDC,uBAAK,SAAS,EAAC,wBAAwB,iBACrCA,uBAAK,SAAS,EAAC,kDAAkD,iBAC9D,KAAK,KACJE,qBAAI,SAAS,EAAED,UAAc,CAAC,YAAY,EAAEF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,CAAC,gBAC3D,KAAK,YACH,CACN;oCAEA,KAAK,KACJG,qBACE,SAAS,EAAED,UAAc,CACvBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,KAAK,EACjB;4CACE,KAAK,EAAE,MAAM;4CACb,MAAM,EAAE,MAAM;4CACd,KAAK,EAAE,KAAK;yCACb,CAAC,YAAY,CAAC,CAChB,gBAEA,KAAK,YACH,CACN;oCAEA,WAAW,KACVG,sBACE,SAAS,EAAED,UAAc,CACvB,aAAa,EACbF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,WAAW,EACvB,kBAAkB,KAAK,OAAO,GAAG,YAAY,GAAG,KAAK,CACtD,gBAEA,WAAW,YACR,CACP,aACG;4BAEL,OAAO,KACNG,sBACE,SAAS,EAAED,UAAc,CACvB,MAAM,CAAC,UAAU,EACjBF,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,UAAU,EACtB,MAAM,CAAC,eAAa,OAAS,CAAC,EAC9B,kBAAkB,CACnB,gBAEA,UAAU,IAAIG,IAAC,gBAAgB,IAAC,IAAI,EAAE,EAAE,WAAI,YACzC,CACP,aACG,aACF;YAEL,QAAQ,IAAIA,sBAAK,SAAS,EAAEH,YAAU,aAAVA,YAAU,uBAAVA,YAAU,CAAE,QAAQ,gBAAG,QAAQ,YAAO,aAC3D;AA/EK,CAgFhB,CAAC;IAEI,IAAI,GAAG,UAAC,KAAgB;;IACpB,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAE1B,IAAI,OAAO,EAAE;QACX,QACEG,yBACE,SAAS,EAAED,UAAc,CACvB,2BAA2B,EAC3B,MAAM,CAAC,MAAM,EACb,MAAA,KAAK,CAAC,UAAU,0CAAE,aAAa,CAChC,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,QAAQ,gBAEbC,IAAC,WAAW,eAAK,KAAK,UAAI,YACnB,EACT;KACH;IAED,OAAOA,IAAC,WAAW,eAAK,KAAK,UAAI,CAAC;AACpC;;;;"}
|
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import styles from './style.module.scss';
|
|
|
7
7
|
export interface CardProps {
|
|
8
8
|
children?: ReactNode;
|
|
9
9
|
classNames?: {
|
|
10
|
+
buttonWrapper?: string;
|
|
10
11
|
wrapper?: string;
|
|
11
12
|
label?: string;
|
|
12
13
|
title?: string;
|
|
@@ -25,9 +26,9 @@ export interface CardProps {
|
|
|
25
26
|
label?: ReactNode;
|
|
26
27
|
onClick?: () => void;
|
|
27
28
|
actionIcon?: ReactNode;
|
|
28
|
-
}
|
|
29
|
+
}
|
|
29
30
|
|
|
30
|
-
const CardContent = ({
|
|
31
|
+
const CardContent = ({
|
|
31
32
|
children,
|
|
32
33
|
classNames,
|
|
33
34
|
density = 'balanced',
|
|
@@ -43,19 +44,19 @@ const CardContent = ({
|
|
|
43
44
|
}: CardProps) => (
|
|
44
45
|
<section
|
|
45
46
|
className={classNamesUtil(
|
|
46
|
-
'd-flex fd-column jc-center br8 bg-white w100 ta-left',
|
|
47
|
+
'd-flex fd-column jc-center br8 bg-white w100 ta-left',
|
|
47
48
|
{ 'bs-sm': dropShadow },
|
|
48
49
|
{
|
|
49
50
|
compact: 'p16',
|
|
50
51
|
balanced: 'p24',
|
|
51
|
-
spacious: 'p32'
|
|
52
|
+
spacious: 'p32',
|
|
52
53
|
}[density],
|
|
53
|
-
classNames?.wrapper
|
|
54
|
+
classNames?.wrapper
|
|
54
55
|
)}
|
|
55
56
|
>
|
|
56
|
-
<div className=
|
|
57
|
+
<div className="d-flex w100">
|
|
57
58
|
{icon && (
|
|
58
|
-
<div
|
|
59
|
+
<div
|
|
59
60
|
className={classNamesUtil(
|
|
60
61
|
`d-flex ai-center tc-primary-500`,
|
|
61
62
|
styles.icon,
|
|
@@ -67,23 +68,24 @@ const CardContent = ({
|
|
|
67
68
|
</div>
|
|
68
69
|
)}
|
|
69
70
|
|
|
70
|
-
<div className=
|
|
71
|
-
<div className=
|
|
71
|
+
<div className="d-flex jc-between w100">
|
|
72
|
+
<div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
|
|
72
73
|
{label && (
|
|
73
|
-
<h3
|
|
74
|
-
className={classNamesUtil('p-p--small', classNames?.label)}
|
|
75
|
-
>
|
|
74
|
+
<h3 className={classNamesUtil('p-p--small', classNames?.label)}>
|
|
76
75
|
{label}
|
|
77
76
|
</h3>
|
|
78
77
|
)}
|
|
79
78
|
|
|
80
79
|
{title && (
|
|
81
80
|
<h2
|
|
82
|
-
className={classNamesUtil(
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
81
|
+
className={classNamesUtil(
|
|
82
|
+
classNames?.title,
|
|
83
|
+
{
|
|
84
|
+
large: 'p-h3',
|
|
85
|
+
medium: 'p-h4',
|
|
86
|
+
small: 'p-p',
|
|
87
|
+
}[titleVariant]
|
|
88
|
+
)}
|
|
87
89
|
>
|
|
88
90
|
{title}
|
|
89
91
|
</h2>
|
|
@@ -117,9 +119,7 @@ const CardContent = ({
|
|
|
117
119
|
</div>
|
|
118
120
|
</div>
|
|
119
121
|
|
|
120
|
-
{children &&
|
|
121
|
-
<div className={classNames?.children}>{children}</div>
|
|
122
|
-
)}
|
|
122
|
+
{children && <div className={classNames?.children}>{children}</div>}
|
|
123
123
|
</section>
|
|
124
124
|
);
|
|
125
125
|
|
|
@@ -129,16 +129,20 @@ const Card = (props: CardProps) => {
|
|
|
129
129
|
if (onClick) {
|
|
130
130
|
return (
|
|
131
131
|
<button
|
|
132
|
-
className={classNamesUtil(
|
|
133
|
-
|
|
132
|
+
className={classNamesUtil(
|
|
133
|
+
'c-pointer d-flex w100 br8',
|
|
134
|
+
styles.button,
|
|
135
|
+
props.classNames?.buttonWrapper
|
|
136
|
+
)}
|
|
137
|
+
onClick={onClick}
|
|
134
138
|
type="button"
|
|
135
139
|
>
|
|
136
140
|
<CardContent {...props} />
|
|
137
141
|
</button>
|
|
138
|
-
)
|
|
142
|
+
);
|
|
139
143
|
}
|
|
140
144
|
|
|
141
145
|
return <CardContent {...props} />;
|
|
142
|
-
}
|
|
146
|
+
};
|
|
143
147
|
|
|
144
148
|
export { Card };
|