@popsure/dirty-swan 0.41.9 → 0.41.10
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 +4 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/card/index.js +4 -3
- package/dist/esm/components/card/index.js.map +1 -1
- package/dist/esm/scss/public/demo.js +5 -0
- package/dist/esm/scss/public/demo.js.map +1 -1
- package/dist/lib/scss/public/demo.tsx +5 -0
- package/package.json +1 -1
- package/src/lib/components/card/index.tsx +73 -69
- package/src/lib/components/card/style.module.scss +7 -3
- package/src/lib/scss/public/demo.tsx +5 -0
|
@@ -6,12 +6,13 @@ 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 background-color: transparent;\n
|
|
9
|
+
var css_248z = ".style-module_button__KWY7b {\n background-color: transparent;\n color: #26262e;\n outline: 1px solid transparent;\n transition: all 0.2s ease-in-out;\n}\n.style-module_button__KWY7b:hover {\n outline: 1px solid #8e8cee;\n color: #8e8cee;\n}\n.style-module_button__KWY7b:focus-visible {\n outline: 2px solid #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
|
|
|
13
13
|
var CardContent = function (_a) {
|
|
14
14
|
var children = _a.children, classNames$1 = _a.classNames, _b = _a.density, density = _b === void 0 ? 'balanced' : _b, description = _a.description, _c = _a.descriptionVariant, descriptionVariant = _c === void 0 ? 'large' : _c, _d = _a.dropShadow, dropShadow = _d === void 0 ? true : _d, icon = _a.icon, label = _a.label, onClick = _a.onClick, actionIcon = _a.actionIcon, title = _a.title, _e = _a.titleVariant, titleVariant = _e === void 0 ? 'large' : _e;
|
|
15
|
+
var hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
|
|
15
16
|
return (jsxs("section", __assign({ className: classNames('d-flex fd-column jc-center br8 bg-white w100 ta-left', { 'bs-sm': dropShadow }, {
|
|
16
17
|
compact: 'p16',
|
|
17
18
|
balanced: 'p24',
|
|
@@ -24,14 +25,14 @@ var CardContent = function (_a) {
|
|
|
24
25
|
small: 'p-p',
|
|
25
26
|
}[titleVariant]) }, { children: title }), void 0)),
|
|
26
27
|
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
|
-
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
|
+
onClick && !hideActionIcon && (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
29
|
children && jsx("div", __assign({ className: classNames$1 === null || classNames$1 === void 0 ? void 0 : classNames$1.children }, { children: children }), void 0)] }), void 0));
|
|
29
30
|
};
|
|
30
31
|
var Card = function (props) {
|
|
31
32
|
var _a;
|
|
32
33
|
var onClick = props.onClick;
|
|
33
34
|
if (onClick) {
|
|
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));
|
|
35
|
+
return (jsx("button", __assign({ className: classNames('c-pointer d-flex w100 br8 ai-stretch', 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));
|
|
35
36
|
}
|
|
36
37
|
return jsx(CardContent, __assign({}, props), void 0);
|
|
37
38
|
};
|
|
@@ -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 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
|
|
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 const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;\n\n return (\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 && !hideActionIcon && (\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};\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 ai-stretch',\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;IAEtB,IAAM,cAAc,GAAG,OAAO,UAAU,KAAK,WAAW,IAAI,CAAC,UAAU,CAAC;IAExE,QACEC,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,IAAI,CAAC,cAAc,KACzBG,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,EACV;AACJ,CAAC,CAAC;IAEI,IAAI,GAAG,UAAC,KAAgB;;IACpB,IAAA,OAAO,GAAK,KAAK,QAAV,CAAW;IAE1B,IAAI,OAAO,EAAE;QACX,QACEG,yBACE,SAAS,EAAED,UAAc,CACvB,sCAAsC,EACtC,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;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"demo.js","sources":["../../../../../src/lib/scss/public/demo.tsx"],"sourcesContent":["import React from 'react';\n\nconst colors = [\n {\n name: 'Transparent',\n code: 'transparent',\n hex: 'transparent',\n },\n {\n name: 'White',\n code: 'white',\n hex: '#fff',\n },\n {\n name: 'Primary 25',\n code: 'primary-25',\n hex: '#fcfcff',\n },\n {\n name: 'Primary 50',\n code: 'primary-50',\n hex: '#f7f7ff',\n },\n {\n name: 'Primary 100',\n code: 'primary-100',\n hex: '#ebebff',\n },\n {\n name: 'Primary 300',\n code: 'primary-300',\n hex: '#b1b0f5',\n },\n {\n name: 'Primary 500',\n code: 'primary-500',\n hex: '#8e8cee',\n },\n {\n name: 'Primary 700',\n code: 'primary-700',\n hex: '#6160a2',\n },\n {\n name: 'Primary 900',\n code: 'primary-900',\n hex: '#2e2e4c',\n },\n {\n name: 'Blue 100',\n code: 'blue-100',\n hex: '#e5f0ff',\n },\n {\n name: 'Blue 300',\n code: 'blue-300',\n hex: '#b0cdf3',\n },\n {\n name: 'Blue 500',\n code: 'blue-500',\n hex: '#8bb4ea',\n },\n {\n name: 'Blue 700',\n code: 'blue-700',\n hex: '#5f7ba0',\n },\n {\n name: 'Blue 900',\n code: 'blue-900',\n hex: '#2d394a',\n },\n {\n name: 'Glacier 100',\n code: 'glacier-100',\n hex: '#e0f7fe',\n },\n {\n name: 'Glacier 300',\n code: 'glacier-300',\n hex: '#aeddec',\n },\n {\n name: 'Glacier 500',\n code: 'glacier-500',\n hex: '#8bcbdf',\n },\n {\n name: 'Glacier 700',\n code: 'glacier-700',\n hex: '#5d8896',\n },\n {\n name: 'Glacier 900',\n code: 'glacier-900',\n hex: '#2d4148',\n },\n {\n name: 'Red 100',\n code: 'red-100',\n hex: '#fedede',\n },\n {\n name: 'Red 300',\n code: 'red-300',\n hex: '#faa0a0',\n },\n {\n name: 'Red 500',\n code: 'red-500',\n hex: '#e55454',\n },\n {\n name: 'Red 700',\n code: 'red-700',\n hex: '#c64848',\n },\n {\n name: 'Red 900',\n code: 'red-900',\n hex: '#4b2525',\n },\n {\n name: 'Pink 100',\n code: 'pink-100',\n hex: '#ffebf1',\n },\n {\n name: 'Pink 300',\n code: 'pink-300',\n hex: '#ffb1cb',\n },\n {\n name: 'Pink 500',\n code: 'pink-500',\n hex: '#f96092',\n },\n {\n name: 'Pink 700',\n code: 'pink-700',\n hex: '#c0305f',\n },\n {\n name: 'Pink 900',\n code: 'pink-900',\n hex: '#700024',\n },\n {\n name: 'Grey 100',\n code: 'grey-100',\n hex: '#fafaff',\n },\n {\n name: 'Grey 200',\n code: 'grey-200',\n hex: '#f5f6fb',\n },\n {\n name: 'Grey 300',\n code: 'grey-300',\n hex: '#d2d2d8',\n },\n {\n name: 'Grey 500',\n code: 'grey-500',\n hex: '#91919c',\n },\n {\n name: 'Grey 600',\n code: 'grey-600',\n hex: '#696970',\n },\n {\n name: 'Grey 700',\n code: 'grey-700',\n hex: '#4c4c53',\n },\n {\n name: 'Grey 900',\n code: 'grey-900',\n hex: '#26262e',\n },\n {\n name: 'Green 100',\n code: 'green-100',\n hex: '#e4ffe6',\n },\n {\n name: 'Green 300',\n code: 'green-300',\n hex: '#c4f5c8',\n },\n {\n name: 'Green 500',\n code: 'green-500',\n hex: '#84de8a',\n },\n {\n name: 'Green 700',\n code: 'green-700',\n hex: '#5b985f',\n },\n {\n name: 'Green 900',\n code: 'green-900',\n hex: '#354a2d',\n },\n {\n name: 'Spearmint 100',\n code: 'spearmint-100',\n hex: '#e3fff2',\n },\n {\n name: 'Spearmint 300',\n code: 'spearmint-300',\n hex: '#aaeacc',\n },\n {\n name: 'Spearmint 500',\n code: 'spearmint-500',\n hex: '#85dcb4',\n },\n {\n name: 'Spearmint 700',\n code: 'spearmint-700',\n hex: '#599278',\n },\n {\n name: 'Spearmint 900',\n code: 'spearmint-900',\n hex: '#2b4639',\n },\n {\n name: 'Yellow 100',\n code: 'yellow-100',\n hex: '#fff8e3',\n },\n {\n name: 'Yellow 300',\n code: 'yellow-300',\n hex: '#fae3a5',\n },\n {\n name: 'Yellow 500',\n code: 'yellow-500',\n hex: '#f7ce5c',\n },\n {\n name: 'Yellow 700',\n code: 'yellow-700',\n hex: '#cc9e21',\n },\n {\n name: 'Yellow 900',\n code: 'yellow-900',\n hex: '#4a3d10',\n },\n];\n\nexport const Colors = () => (\n <table style={{ width: '100%' }}>\n <tr\n style={{\n height: '40px',\n lineHeight: '40px',\n textAlign: 'left',\n }}\n >\n <th style={{ fontWeight: 'bold' }}>Color</th>\n <th style={{ fontWeight: 'bold' }}>Name</th>\n <th style={{ fontWeight: 'bold' }}>Sass</th>\n <th style={{ fontWeight: 'bold' }}>Text color class</th>\n <th style={{ fontWeight: 'bold' }}>BG color class</th>\n <th style={{ fontWeight: 'bold' }}>Hex</th>\n </tr>\n {colors.map((color) => (\n <tr style={{ height: '40px', lineHeight: '40px' }}>\n <td>\n <div\n style={{\n width: '24px',\n height: '24px',\n borderRadius: '4px',\n backgroundColor: color.hex,\n }}\n />\n </td>\n <td>{color.name}</td>\n <td>{`$ds-${color.code}`}</td>\n <td>{`tc-${color.code}`}</td>\n <td>{`bg-${color.code}`}</td>\n <td>{color.hex}</td>\n </tr>\n ))}\n </table>\n);\n\nexport const BoxShadows = () => {\n return (\n <div className=\"d-flex fd-row f-wrap gap16\">\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-xs p-p\"\n style={{ height: '136px' }}\n >\n .bx-xs\n </div>\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-sm p-p\"\n style={{ height: '136px' }}\n >\n .bx-sm\n </div>\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-md p-p\"\n style={{ height: '136px' }}\n >\n .bx-md\n </div>\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-lg p-p\"\n style={{ height: '136px' }}\n >\n .bx-lg\n </div>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"demo.js","sources":["../../../../../src/lib/scss/public/demo.tsx"],"sourcesContent":["import React from 'react';\n\nconst colors = [\n {\n name: 'Transparent',\n code: 'transparent',\n hex: 'transparent',\n },\n {\n name: 'White',\n code: 'white',\n hex: '#fff',\n },\n {\n name: 'Primary 25',\n code: 'primary-25',\n hex: '#fcfcff',\n },\n {\n name: 'Primary 50',\n code: 'primary-50',\n hex: '#f7f7ff',\n },\n {\n name: 'Primary 100',\n code: 'primary-100',\n hex: '#ebebff',\n },\n {\n name: 'Primary 300',\n code: 'primary-300',\n hex: '#b1b0f5',\n },\n {\n name: 'Primary 500',\n code: 'primary-500',\n hex: '#8e8cee',\n },\n {\n name: 'Primary 700',\n code: 'primary-700',\n hex: '#6160a2',\n },\n {\n name: 'Primary 900',\n code: 'primary-900',\n hex: '#2e2e4c',\n },\n {\n name: 'Blue 100',\n code: 'blue-100',\n hex: '#e5f0ff',\n },\n {\n name: 'Blue 300',\n code: 'blue-300',\n hex: '#b0cdf3',\n },\n {\n name: 'Blue 500',\n code: 'blue-500',\n hex: '#8bb4ea',\n },\n {\n name: 'Blue 700',\n code: 'blue-700',\n hex: '#5f7ba0',\n },\n {\n name: 'Blue 900',\n code: 'blue-900',\n hex: '#2d394a',\n },\n {\n name: 'Glacier 100',\n code: 'glacier-100',\n hex: '#e0f7fe',\n },\n {\n name: 'Glacier 300',\n code: 'glacier-300',\n hex: '#aeddec',\n },\n {\n name: 'Glacier 500',\n code: 'glacier-500',\n hex: '#8bcbdf',\n },\n {\n name: 'Glacier 700',\n code: 'glacier-700',\n hex: '#5d8896',\n },\n {\n name: 'Glacier 900',\n code: 'glacier-900',\n hex: '#2d4148',\n },\n {\n name: 'Red 100',\n code: 'red-100',\n hex: '#fedede',\n },\n {\n name: 'Red 300',\n code: 'red-300',\n hex: '#faa0a0',\n },\n {\n name: 'Red 500',\n code: 'red-500',\n hex: '#e55454',\n },\n {\n name: 'Red 700',\n code: 'red-700',\n hex: '#c64848',\n },\n {\n name: 'Red 900',\n code: 'red-900',\n hex: '#4b2525',\n },\n {\n name: 'Pink 100',\n code: 'pink-100',\n hex: '#ffebf1',\n },\n {\n name: 'Pink 300',\n code: 'pink-300',\n hex: '#ffb1cb',\n },\n {\n name: 'Pink 500',\n code: 'pink-500',\n hex: '#f96092',\n },\n {\n name: 'Pink 700',\n code: 'pink-700',\n hex: '#c0305f',\n },\n {\n name: 'Pink 900',\n code: 'pink-900',\n hex: '#700024',\n },\n {\n name: 'Grey 100',\n code: 'grey-100',\n hex: '#fafaff',\n },\n {\n name: 'Grey 200',\n code: 'grey-200',\n hex: '#f5f6fb',\n },\n {\n name: 'Grey 300',\n code: 'grey-300',\n hex: '#ededf2',\n },\n {\n name: 'Grey 400',\n code: 'grey-400',\n hex: '#d2d2d8',\n },\n {\n name: 'Grey 500',\n code: 'grey-500',\n hex: '#91919c',\n },\n {\n name: 'Grey 600',\n code: 'grey-600',\n hex: '#696970',\n },\n {\n name: 'Grey 700',\n code: 'grey-700',\n hex: '#4c4c53',\n },\n {\n name: 'Grey 900',\n code: 'grey-900',\n hex: '#26262e',\n },\n {\n name: 'Green 100',\n code: 'green-100',\n hex: '#e4ffe6',\n },\n {\n name: 'Green 300',\n code: 'green-300',\n hex: '#c4f5c8',\n },\n {\n name: 'Green 500',\n code: 'green-500',\n hex: '#84de8a',\n },\n {\n name: 'Green 700',\n code: 'green-700',\n hex: '#5b985f',\n },\n {\n name: 'Green 900',\n code: 'green-900',\n hex: '#354a2d',\n },\n {\n name: 'Spearmint 100',\n code: 'spearmint-100',\n hex: '#e3fff2',\n },\n {\n name: 'Spearmint 300',\n code: 'spearmint-300',\n hex: '#aaeacc',\n },\n {\n name: 'Spearmint 500',\n code: 'spearmint-500',\n hex: '#85dcb4',\n },\n {\n name: 'Spearmint 700',\n code: 'spearmint-700',\n hex: '#599278',\n },\n {\n name: 'Spearmint 900',\n code: 'spearmint-900',\n hex: '#2b4639',\n },\n {\n name: 'Yellow 100',\n code: 'yellow-100',\n hex: '#fff8e3',\n },\n {\n name: 'Yellow 300',\n code: 'yellow-300',\n hex: '#fae3a5',\n },\n {\n name: 'Yellow 500',\n code: 'yellow-500',\n hex: '#f7ce5c',\n },\n {\n name: 'Yellow 700',\n code: 'yellow-700',\n hex: '#cc9e21',\n },\n {\n name: 'Yellow 900',\n code: 'yellow-900',\n hex: '#4a3d10',\n },\n];\n\nexport const Colors = () => (\n <table style={{ width: '100%' }}>\n <tr\n style={{\n height: '40px',\n lineHeight: '40px',\n textAlign: 'left',\n }}\n >\n <th style={{ fontWeight: 'bold' }}>Color</th>\n <th style={{ fontWeight: 'bold' }}>Name</th>\n <th style={{ fontWeight: 'bold' }}>Sass</th>\n <th style={{ fontWeight: 'bold' }}>Text color class</th>\n <th style={{ fontWeight: 'bold' }}>BG color class</th>\n <th style={{ fontWeight: 'bold' }}>Hex</th>\n </tr>\n {colors.map((color) => (\n <tr style={{ height: '40px', lineHeight: '40px' }}>\n <td>\n <div\n style={{\n width: '24px',\n height: '24px',\n borderRadius: '4px',\n backgroundColor: color.hex,\n }}\n />\n </td>\n <td>{color.name}</td>\n <td>{`$ds-${color.code}`}</td>\n <td>{`tc-${color.code}`}</td>\n <td>{`bg-${color.code}`}</td>\n <td>{color.hex}</td>\n </tr>\n ))}\n </table>\n);\n\nexport const BoxShadows = () => {\n return (\n <div className=\"d-flex fd-row f-wrap gap16\">\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-xs p-p\"\n style={{ height: '136px' }}\n >\n .bx-xs\n </div>\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-sm p-p\"\n style={{ height: '136px' }}\n >\n .bx-sm\n </div>\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-md p-p\"\n style={{ height: '136px' }}\n >\n .bx-md\n </div>\n <div\n className=\"d-flex ai-center jc-center ws2 border br8 bs-lg p-p\"\n style={{ height: '136px' }}\n >\n .bx-lg\n </div>\n </div>\n );\n};\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -41,87 +41,91 @@ const CardContent = ({
|
|
|
41
41
|
actionIcon,
|
|
42
42
|
title,
|
|
43
43
|
titleVariant = 'large',
|
|
44
|
-
}: CardProps) =>
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
{icon && (
|
|
59
|
-
<div
|
|
60
|
-
className={classNamesUtil(
|
|
61
|
-
`d-flex ai-center tc-primary-500`,
|
|
62
|
-
styles.icon,
|
|
63
|
-
styles[`icon${density}`],
|
|
64
|
-
classNames?.icon
|
|
65
|
-
)}
|
|
66
|
-
>
|
|
67
|
-
{icon}
|
|
68
|
-
</div>
|
|
44
|
+
}: CardProps) => {
|
|
45
|
+
const hideActionIcon = typeof actionIcon !== 'undefined' && !actionIcon;
|
|
46
|
+
|
|
47
|
+
return (
|
|
48
|
+
<section
|
|
49
|
+
className={classNamesUtil(
|
|
50
|
+
'd-flex fd-column jc-center br8 bg-white w100 ta-left',
|
|
51
|
+
{ 'bs-sm': dropShadow },
|
|
52
|
+
{
|
|
53
|
+
compact: 'p16',
|
|
54
|
+
balanced: 'p24',
|
|
55
|
+
spacious: 'p32',
|
|
56
|
+
}[density],
|
|
57
|
+
classNames?.wrapper
|
|
69
58
|
)}
|
|
59
|
+
>
|
|
60
|
+
<div className="d-flex w100">
|
|
61
|
+
{icon && (
|
|
62
|
+
<div
|
|
63
|
+
className={classNamesUtil(
|
|
64
|
+
`d-flex ai-center tc-primary-500`,
|
|
65
|
+
styles.icon,
|
|
66
|
+
styles[`icon${density}`],
|
|
67
|
+
classNames?.icon
|
|
68
|
+
)}
|
|
69
|
+
>
|
|
70
|
+
{icon}
|
|
71
|
+
</div>
|
|
72
|
+
)}
|
|
70
73
|
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
74
|
+
<div className="d-flex jc-between w100">
|
|
75
|
+
<div className="d-flex jc-center gap8 fd-column tc-grey-900 w100">
|
|
76
|
+
{label && (
|
|
77
|
+
<h3 className={classNamesUtil('p-p--small', classNames?.label)}>
|
|
78
|
+
{label}
|
|
79
|
+
</h3>
|
|
80
|
+
)}
|
|
78
81
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
82
|
+
{title && (
|
|
83
|
+
<h2
|
|
84
|
+
className={classNamesUtil(
|
|
85
|
+
classNames?.title,
|
|
86
|
+
{
|
|
87
|
+
large: 'p-h3',
|
|
88
|
+
medium: 'p-h4',
|
|
89
|
+
small: 'p-p',
|
|
90
|
+
}[titleVariant]
|
|
91
|
+
)}
|
|
92
|
+
>
|
|
93
|
+
{title}
|
|
94
|
+
</h2>
|
|
95
|
+
)}
|
|
93
96
|
|
|
94
|
-
|
|
97
|
+
{description && (
|
|
98
|
+
<div
|
|
99
|
+
className={classNamesUtil(
|
|
100
|
+
'tc-grey-600',
|
|
101
|
+
classNames?.description,
|
|
102
|
+
descriptionVariant === 'small' ? 'p-p--small' : 'p-p'
|
|
103
|
+
)}
|
|
104
|
+
>
|
|
105
|
+
{description}
|
|
106
|
+
</div>
|
|
107
|
+
)}
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
{onClick && !hideActionIcon && (
|
|
95
111
|
<div
|
|
96
112
|
className={classNamesUtil(
|
|
97
|
-
|
|
98
|
-
classNames?.
|
|
99
|
-
|
|
113
|
+
styles.actionIcon,
|
|
114
|
+
classNames?.actionIcon,
|
|
115
|
+
styles[`actionIcon${density}`],
|
|
116
|
+
'd-flex ai-center'
|
|
100
117
|
)}
|
|
101
118
|
>
|
|
102
|
-
{
|
|
119
|
+
{actionIcon || <ChevronRightIcon size={24} />}
|
|
103
120
|
</div>
|
|
104
121
|
)}
|
|
105
122
|
</div>
|
|
106
|
-
|
|
107
|
-
{onClick && (
|
|
108
|
-
<div
|
|
109
|
-
className={classNamesUtil(
|
|
110
|
-
styles.actionIcon,
|
|
111
|
-
classNames?.actionIcon,
|
|
112
|
-
styles[`actionIcon${density}`],
|
|
113
|
-
'd-flex ai-center'
|
|
114
|
-
)}
|
|
115
|
-
>
|
|
116
|
-
{actionIcon || <ChevronRightIcon size={24} />}
|
|
117
|
-
</div>
|
|
118
|
-
)}
|
|
119
123
|
</div>
|
|
120
|
-
</div>
|
|
121
124
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
);
|
|
125
|
+
{children && <div className={classNames?.children}>{children}</div>}
|
|
126
|
+
</section>
|
|
127
|
+
);
|
|
128
|
+
};
|
|
125
129
|
|
|
126
130
|
const Card = (props: CardProps) => {
|
|
127
131
|
const { onClick } = props;
|
|
@@ -130,7 +134,7 @@ const Card = (props: CardProps) => {
|
|
|
130
134
|
return (
|
|
131
135
|
<button
|
|
132
136
|
className={classNamesUtil(
|
|
133
|
-
'c-pointer d-flex w100 br8',
|
|
137
|
+
'c-pointer d-flex w100 br8 ai-stretch',
|
|
134
138
|
styles.button,
|
|
135
139
|
props.classNames?.buttonWrapper
|
|
136
140
|
)}
|
|
@@ -2,13 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
.button {
|
|
4
4
|
background-color: transparent;
|
|
5
|
-
border: 1px solid transparent;
|
|
6
5
|
color: $ds-grey-900;
|
|
7
|
-
outline
|
|
6
|
+
outline: 1px solid transparent;
|
|
8
7
|
transition: all 0.2s ease-in-out;
|
|
9
8
|
|
|
10
9
|
&:hover {
|
|
11
|
-
|
|
10
|
+
outline: 1px solid $ds-primary-500;
|
|
11
|
+
color: $ds-primary-500;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&:focus-visible {
|
|
15
|
+
outline: 2px solid $ds-primary-500;
|
|
12
16
|
color: $ds-primary-500;
|
|
13
17
|
}
|
|
14
18
|
}
|