@popsure/dirty-swan 0.41.9 → 0.41.11
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 +13 -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/components/comparisonTable/index.js +10 -1
- package/dist/esm/components/comparisonTable/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/components/comparisonTable/hooks/useComparisonTable.ts +13 -1
- 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":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { b as __awaiter, c as __generator, _ as __assign } from '../../tslib.es6-5bc94358.js';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { c as classNames } from '../../index-6ea95111.js';
|
|
4
|
-
import require$$0__default, { useState, useRef, useCallback, useEffect, Fragment } from 'react';
|
|
4
|
+
import require$$0__default, { useState, useRef, useCallback, useEffect, useLayoutEffect, Fragment } from 'react';
|
|
5
5
|
import { c as commonjsGlobal } from '../../_commonjsHelpers-e7f67fd8.js';
|
|
6
6
|
import Chevron from './components/Chevron.js';
|
|
7
7
|
import Row from './components/Row/index.js';
|
|
@@ -1577,6 +1577,15 @@ var useComparisonTable = function () {
|
|
|
1577
1577
|
(_b = observerRef.current) === null || _b === void 0 ? void 0 : _b.disconnect();
|
|
1578
1578
|
};
|
|
1579
1579
|
}, []);
|
|
1580
|
+
useLayoutEffect(function () {
|
|
1581
|
+
var resetHeaderWidth = function () {
|
|
1582
|
+
if (headerRef.current) {
|
|
1583
|
+
setHeaderWidth(headerRef.current.clientWidth);
|
|
1584
|
+
}
|
|
1585
|
+
};
|
|
1586
|
+
window.addEventListener('resize', resetHeaderWidth);
|
|
1587
|
+
return function () { return window.removeEventListener('resize', resetHeaderWidth); };
|
|
1588
|
+
}, []);
|
|
1580
1589
|
var handleTableScroll = function () {
|
|
1581
1590
|
if (!headerRef.current) {
|
|
1582
1591
|
return;
|