@servicetitan/marketing-ui 5.4.0 → 5.5.0
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/components/stat/stat-extended-card.d.ts +2 -1
- package/dist/components/stat/stat-extended-card.d.ts.map +1 -1
- package/dist/components/stat/stat-extended-card.js +2 -2
- package/dist/components/stat/stat-extended-card.js.map +1 -1
- package/package.json +2 -2
- package/src/components/stat/stat-extended-card.tsx +23 -16
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
export interface StatExtendedCardProps {
|
|
3
3
|
title: string;
|
|
4
4
|
description?: string;
|
|
@@ -13,6 +13,7 @@ export interface StatExtendedCardProps {
|
|
|
13
13
|
neutral?: boolean;
|
|
14
14
|
fill?: boolean;
|
|
15
15
|
className?: string;
|
|
16
|
+
actions?: ReactNode;
|
|
16
17
|
}
|
|
17
18
|
export declare const StatExtendedCard: FC<StatExtendedCardProps>;
|
|
18
19
|
//# sourceMappingURL=stat-extended-card.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-extended-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-extended-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOtC,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,SAAS,CAAC;CACvB;AACD,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA8EtD,CAAC"}
|
|
@@ -4,10 +4,10 @@ import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan
|
|
|
4
4
|
import { formatValue } from '../../utils/formatters';
|
|
5
5
|
import { StatDiff } from './stat-card';
|
|
6
6
|
import * as Styles from './stat-card.module.less';
|
|
7
|
-
export const StatExtendedCard = ({ title, title2, description, value, goal, prev, percent, money, rate, inverted, neutral, fill, className, }) => {
|
|
7
|
+
export const StatExtendedCard = ({ title, title2, description, value, goal, prev, percent, money, rate, inverted, neutral, fill, className, actions, }) => {
|
|
8
8
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
9
9
|
return (_jsxs("div", { className: classNames('p-3 bg-white border border-radius-2', {
|
|
10
10
|
'flex-grow-1 flex-basis-0': fill,
|
|
11
|
-
}, className), children: [_jsxs(Stack, { children: [_jsx(Headline, { size: "small", children: title }), !!description && (_jsx(Tooltip, { text: description, "data-cy": `marketing-stat-card-${title}-info-tooltip`, children: _jsx(Icon, { name: "info", size: 18, className: "c-neutral-80 m-l-half", "data-cy": `marketing-stat-card-${title}-info-icon` }) }))] }), _jsx(Eyebrow, { size: "small", className: "m-t-2 c-black", "data-cy": `marketing-stat-card-${title2}-title2`, children: title2 }), _jsx(Stack, { justifyContent: "space-between", className: "m-t-half", children: _jsxs(Stack, { alignItems: "flex-end", className: "flex-grow-1 flex-basis-0", children: [_jsx(Headline, { className: "m-b-0-i m-r-half fw-normal-i", size: "xlarge", children: formatValue(value, format) }), goal !== undefined ? (_jsxs(BodyText, { subdued: true, children: ["/ ", formatValue(goal, format), " (Goal)"] })) : prev !== undefined ? (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, className: classNames(Styles.statExtendedDiff, 'm-l-1') })) : undefined] }) })] }));
|
|
11
|
+
}, className), children: [_jsxs(Stack, { justifyContent: "space-between", alignItems: "center", children: [_jsx(Stack.Item, { fill: true, children: _jsxs(Stack, { children: [_jsx(Headline, { size: "small", children: title }), !!description && (_jsx(Tooltip, { text: description, "data-cy": `marketing-stat-card-${title}-info-tooltip`, children: _jsx(Icon, { name: "info", size: 18, className: "c-neutral-80 m-l-half", "data-cy": `marketing-stat-card-${title}-info-icon` }) }))] }) }), actions && _jsx(Stack.Item, { shrink: 0, children: actions })] }), _jsx(Eyebrow, { size: "small", className: "m-t-2 c-black", "data-cy": `marketing-stat-card-${title2}-title2`, children: title2 }), _jsx(Stack, { justifyContent: "space-between", className: "m-t-half", children: _jsxs(Stack, { alignItems: "flex-end", className: "flex-grow-1 flex-basis-0", children: [_jsx(Headline, { className: "m-b-0-i m-r-half fw-normal-i", size: "xlarge", children: formatValue(value, format) }), goal !== undefined ? (_jsxs(BodyText, { subdued: true, children: ["/ ", formatValue(goal, format), " (Goal)"] })) : prev !== undefined ? (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, className: classNames(Styles.statExtendedDiff, 'm-l-1') })) : undefined] }) })] }));
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=stat-extended-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-extended-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-extended-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-extended-card.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,MAAM,MAAM,yBAAyB,CAAC;AAkBlD,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EACxD,KAAK,EACL,MAAM,EACN,WAAW,EACX,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,OAAO,GACV,EAAE,EAAE;IACD,MAAM,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEhF,OAAO,CACH,eACI,SAAS,EAAE,UAAU,CACjB,qCAAqC,EACrC;YACI,0BAA0B,EAAE,IAAI;SACnC,EACD,SAAS,CACZ,aAED,MAAC,KAAK,IAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aACrD,KAAC,KAAK,CAAC,IAAI,IAAC,IAAI,kBACZ,MAAC,KAAK,eACF,KAAC,QAAQ,IAAC,IAAI,EAAC,OAAO,YAAE,KAAK,GAAY,EACxC,CAAC,CAAC,WAAW,IAAI,CACd,KAAC,OAAO,IACJ,IAAI,EAAE,WAAW,aACR,uBAAuB,KAAK,eAAe,YAEpD,KAAC,IAAI,IACD,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,EAAE,EACR,SAAS,EAAC,uBAAuB,aACxB,uBAAuB,KAAK,YAAY,GACnD,GACI,CACb,IACG,GACC,EACZ,OAAO,IAAI,KAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,CAAC,YAAG,OAAO,GAAc,IACrD,EACR,KAAC,OAAO,IACJ,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,eAAe,aAChB,uBAAuB,MAAM,SAAS,YAE9C,MAAM,GACD,EAEV,KAAC,KAAK,IAAC,cAAc,EAAC,eAAe,EAAC,SAAS,EAAC,UAAU,YACtD,MAAC,KAAK,IAAC,UAAU,EAAC,UAAU,EAAC,SAAS,EAAC,0BAA0B,aAC7D,KAAC,QAAQ,IAAC,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,YAC3D,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,GACpB,EACV,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAClB,MAAC,QAAQ,IAAC,OAAO,yBAAI,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC,eAAmB,CACpE,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACrB,KAAC,QAAQ,IACL,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,gBAAgB,EAAE,OAAO,CAAC,GACzD,CACL,CAAC,CAAC,CAAC,SAAS,IACT,GACJ,IACN,CACT,CAAC;AACN,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.0",
|
|
4
4
|
"description": "Marketing UI component and utils",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"less": true,
|
|
53
53
|
"webpack": false
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "9b1b75a1aaa10cdacb9bb363b99aa867f31320a8"
|
|
56
56
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan/design-system';
|
|
4
4
|
import { formatValue } from '../../utils/formatters';
|
|
@@ -19,6 +19,7 @@ export interface StatExtendedCardProps {
|
|
|
19
19
|
neutral?: boolean;
|
|
20
20
|
fill?: boolean;
|
|
21
21
|
className?: string;
|
|
22
|
+
actions?: ReactNode;
|
|
22
23
|
}
|
|
23
24
|
export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
24
25
|
title,
|
|
@@ -34,6 +35,7 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
|
34
35
|
neutral,
|
|
35
36
|
fill,
|
|
36
37
|
className,
|
|
38
|
+
actions,
|
|
37
39
|
}) => {
|
|
38
40
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
39
41
|
|
|
@@ -47,21 +49,26 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
|
|
|
47
49
|
className
|
|
48
50
|
)}
|
|
49
51
|
>
|
|
50
|
-
<Stack>
|
|
51
|
-
<
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
52
|
+
<Stack justifyContent="space-between" alignItems="center">
|
|
53
|
+
<Stack.Item fill>
|
|
54
|
+
<Stack>
|
|
55
|
+
<Headline size="small">{title}</Headline>
|
|
56
|
+
{!!description && (
|
|
57
|
+
<Tooltip
|
|
58
|
+
text={description}
|
|
59
|
+
data-cy={`marketing-stat-card-${title}-info-tooltip`}
|
|
60
|
+
>
|
|
61
|
+
<Icon
|
|
62
|
+
name="info"
|
|
63
|
+
size={18}
|
|
64
|
+
className="c-neutral-80 m-l-half"
|
|
65
|
+
data-cy={`marketing-stat-card-${title}-info-icon`}
|
|
66
|
+
/>
|
|
67
|
+
</Tooltip>
|
|
68
|
+
)}
|
|
69
|
+
</Stack>
|
|
70
|
+
</Stack.Item>
|
|
71
|
+
{actions && <Stack.Item shrink={0}>{actions}</Stack.Item>}
|
|
65
72
|
</Stack>
|
|
66
73
|
<Eyebrow
|
|
67
74
|
size="small"
|