@servicetitan/marketing-ui 4.0.0 → 4.2.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-card.d.ts +2 -1
- package/dist/components/stat/stat-card.d.ts.map +1 -1
- package/dist/components/stat/stat-card.js +9 -5
- package/dist/components/stat/stat-card.js.map +1 -1
- package/dist/components/stat/stat-cards.stories.d.ts +1 -0
- package/dist/components/stat/stat-cards.stories.d.ts.map +1 -1
- package/dist/components/stat/stat-cards.stories.js +2 -0
- package/dist/components/stat/stat-cards.stories.js.map +1 -1
- package/package.json +2 -2
- package/src/components/stat/stat-card.tsx +15 -2
- package/src/components/stat/stat-cards.stories.tsx +9 -0
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
2
|
import { BodyTextPropsStrict } from '@servicetitan/design-system';
|
|
3
3
|
import { NumberFormatter } from '../../utils/formatters';
|
|
4
4
|
interface StatDiffProps {
|
|
@@ -15,6 +15,7 @@ export declare const StatDiff: FC<StatDiffProps>;
|
|
|
15
15
|
export interface StatCardProps {
|
|
16
16
|
title: string;
|
|
17
17
|
description?: string;
|
|
18
|
+
popoverContent?: ReactNode;
|
|
18
19
|
value?: number;
|
|
19
20
|
prev?: number;
|
|
20
21
|
percent?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAEhD,OAAO,EAEH,mBAAmB,EAKtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAgCtE,UAAU,aAAa;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAiDtC,CAAC;AAEF,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAyEtC,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from 'react';
|
|
2
3
|
import classNames from 'classnames';
|
|
3
|
-
import { BodyText, Eyebrow, Stack, Tooltip, } from '@servicetitan/design-system';
|
|
4
|
+
import { BodyText, Eyebrow, Popover, Stack, Tooltip, } from '@servicetitan/design-system';
|
|
4
5
|
import * as Styles from './stat-card.module.less';
|
|
5
6
|
import { formatValue } from '../../utils/formatters';
|
|
6
7
|
const calculateDiff = (value, prev, percents) => {
|
|
@@ -48,15 +49,18 @@ export const StatDiff = ({ value, prev, size, format, inverted, neutral, classNa
|
|
|
48
49
|
'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),
|
|
49
50
|
'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),
|
|
50
51
|
'c-neutral-200': !!neutral,
|
|
51
|
-
}, className), size: size !== null && size !== void 0 ? size : 'small' }, { children: [_jsx("span", { children: diff }), value === undefined ? '\u00A0' : text] })));
|
|
52
|
+
}, className), size: size !== null && size !== void 0 ? size : 'small', "data-cy": "stat-diff-value" }, { children: [_jsx("span", { children: diff }), value === undefined ? '\u00A0' : text] })));
|
|
52
53
|
};
|
|
53
|
-
export const StatCard = ({ title, description, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false, }) => {
|
|
54
|
+
export const StatCard = ({ title, description, popoverContent, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false, }) => {
|
|
55
|
+
const [popoverShown, setPopoverShown] = useState(false);
|
|
54
56
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
55
57
|
const val = value === undefined ? '\u00A0' : formatValue(value, format);
|
|
56
|
-
const eyebrow = (_jsx(Eyebrow, Object.assign({ className: classNames(Styles.title, 'ta-center'), "data-cy": `marketing-stat-${title}-title
|
|
58
|
+
const eyebrow = (_jsx(Eyebrow, Object.assign({ className: classNames(Styles.title, 'ta-center'), "data-cy": `marketing-stat-${title}-title`, onMouseEnter: () => {
|
|
59
|
+
setPopoverShown(true);
|
|
60
|
+
} }, { children: title })));
|
|
57
61
|
return (_jsxs(Stack, Object.assign({ direction: "column", alignItems: "center", className: classNames('p-y-3', {
|
|
58
62
|
'bg-white border-radius-2 border': !clean,
|
|
59
63
|
'flex-grow-1 flex-basis-0': fill,
|
|
60
|
-
}, className) }, { children: [description ? (_jsx(Tooltip, Object.assign({ text: description, "data-cy": `marketing-stat-${title}-tooltip` }, { children: eyebrow }))) : (eyebrow), _jsx(BodyText, Object.assign({ className: "fs-6-i ff-display", "data-cy": `marketing-stat-${title}-value` }, { children: val })), !valueOnly && (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, diffPercentOnly: diffPercentOnly }))] })));
|
|
64
|
+
}, className), onMouseLeave: () => setPopoverShown(false) }, { children: [popoverContent ? (_jsx(Popover, Object.assign({ open: popoverShown, trigger: eyebrow }, { children: popoverContent }))) : description ? (_jsx(Tooltip, Object.assign({ text: description, "data-cy": `marketing-stat-${title}-tooltip` }, { children: eyebrow }))) : (eyebrow), _jsx(BodyText, Object.assign({ className: "fs-6-i ff-display", "data-cy": `marketing-stat-${title}-value` }, { children: val })), !valueOnly && (_jsx(StatDiff, { value: value, prev: prev, format: format, inverted: inverted, neutral: neutral, diffPercentOnly: diffPercentOnly }))] })));
|
|
61
65
|
};
|
|
62
66
|
//# sourceMappingURL=stat-card.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"stat-card.js","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,6 +6,7 @@ declare const _default: {
|
|
|
6
6
|
};
|
|
7
7
|
export default _default;
|
|
8
8
|
export declare const statCardNumber: () => JSX.Element;
|
|
9
|
+
export declare const statCardPopoverDescription: () => JSX.Element;
|
|
9
10
|
export declare const statDiffNumberPercentOnly: () => JSX.Element;
|
|
10
11
|
export declare const statCardMoney: () => JSX.Element;
|
|
11
12
|
export declare const statCardPercentInverted: () => JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-cards.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"stat-cards.stories.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";;;;;;AAIA,wBAIE;AAIF,eAAO,MAAM,cAAc,mBAA+D,CAAC;AAC3F,eAAO,MAAM,0BAA0B,mBAOrC,CAAC;AACH,eAAO,MAAM,yBAAyB,mBAEpC,CAAC;AACH,eAAO,MAAM,aAAa,mBAAuE,CAAC;AAClG,eAAO,MAAM,uBAAuB,mBAElC,CAAC;AACH,eAAO,MAAM,YAAY,mBAAiE,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { StatCard } from './stat-card';
|
|
3
|
+
import { BodyText } from '@servicetitan/design-system';
|
|
3
4
|
export default {
|
|
4
5
|
title: 'Marketing UI/stat/StatCard',
|
|
5
6
|
component: StatCard,
|
|
@@ -7,6 +8,7 @@ export default {
|
|
|
7
8
|
};
|
|
8
9
|
const w = (cb) => () => _jsx("div", Object.assign({ style: { width: '400px' } }, { children: cb() }));
|
|
9
10
|
export const statCardNumber = w(() => _jsx(StatCard, { title: "number", value: 133, prev: 1000 }));
|
|
11
|
+
export const statCardPopoverDescription = w(() => (_jsx(StatCard, { title: "number", value: 133, prev: 1000, popoverContent: _jsx(BodyText, { children: "Description" }) })));
|
|
10
12
|
export const statDiffNumberPercentOnly = w(() => (_jsx(StatCard, { title: "number", value: 133, prev: 1000, diffPercentOnly: true })));
|
|
11
13
|
export const statCardMoney = w(() => _jsx(StatCard, { title: "money", value: 10000, prev: 11000, money: true }));
|
|
12
14
|
export const statCardPercentInverted = w(() => (_jsx(StatCard, { title: "percent", value: 0.27, prev: 0.27333, percent: true, inverted: true })));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stat-cards.stories.js","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"stat-cards.stories.js","sourceRoot":"","sources":["../../../src/components/stat/stat-cards.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,eAAe;IACX,KAAK,EAAE,4BAA4B;IACnC,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,CAAC,GAAG,CAAC,EAAsB,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,4BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAG,EAAE,EAAE,IAAO,CAAC;AAEzF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC,CAAC;AAC3F,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAC9C,KAAC,QAAQ,IACL,KAAK,EAAC,QAAQ,EACd,KAAK,EAAE,GAAG,EACV,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,KAAC,QAAQ,8BAAuB,GAClD,CACL,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAC7C,KAAC,QAAQ,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,eAAe,SAAG,CACtE,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,SAAG,CAAC,CAAC;AAClG,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,CAC3C,KAAC,QAAQ,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,QAAC,QAAQ,SAAG,CAC5E,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,SAAG,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/marketing-ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.2.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": "3637c177471cfb6c797cf6ce362a2a78c1f3b665"
|
|
56
56
|
}
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import { FC, ReactNode, useState } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import {
|
|
4
4
|
BodyText,
|
|
5
5
|
BodyTextPropsStrict,
|
|
6
6
|
Eyebrow,
|
|
7
|
+
Popover,
|
|
7
8
|
Stack,
|
|
8
9
|
Tooltip,
|
|
9
10
|
} from '@servicetitan/design-system';
|
|
@@ -94,6 +95,7 @@ export const StatDiff: FC<StatDiffProps> = ({
|
|
|
94
95
|
className
|
|
95
96
|
)}
|
|
96
97
|
size={size ?? 'small'}
|
|
98
|
+
data-cy="stat-diff-value"
|
|
97
99
|
>
|
|
98
100
|
<span>{diff}</span>
|
|
99
101
|
{value === undefined ? '\u00A0' : text}
|
|
@@ -104,6 +106,7 @@ export const StatDiff: FC<StatDiffProps> = ({
|
|
|
104
106
|
export interface StatCardProps {
|
|
105
107
|
title: string;
|
|
106
108
|
description?: string;
|
|
109
|
+
popoverContent?: ReactNode;
|
|
107
110
|
value?: number;
|
|
108
111
|
prev?: number;
|
|
109
112
|
percent?: boolean;
|
|
@@ -121,6 +124,7 @@ export interface StatCardProps {
|
|
|
121
124
|
export const StatCard: FC<StatCardProps> = ({
|
|
122
125
|
title,
|
|
123
126
|
description,
|
|
127
|
+
popoverContent,
|
|
124
128
|
value,
|
|
125
129
|
percent,
|
|
126
130
|
money,
|
|
@@ -134,6 +138,7 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
134
138
|
className,
|
|
135
139
|
diffPercentOnly = false,
|
|
136
140
|
}) => {
|
|
141
|
+
const [popoverShown, setPopoverShown] = useState(false);
|
|
137
142
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
138
143
|
const val = value === undefined ? '\u00A0' : formatValue(value, format);
|
|
139
144
|
|
|
@@ -141,6 +146,9 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
141
146
|
<Eyebrow
|
|
142
147
|
className={classNames(Styles.title, 'ta-center')}
|
|
143
148
|
data-cy={`marketing-stat-${title}-title`}
|
|
149
|
+
onMouseEnter={() => {
|
|
150
|
+
setPopoverShown(true);
|
|
151
|
+
}}
|
|
144
152
|
>
|
|
145
153
|
{title}
|
|
146
154
|
</Eyebrow>
|
|
@@ -158,8 +166,13 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
158
166
|
},
|
|
159
167
|
className
|
|
160
168
|
)}
|
|
169
|
+
onMouseLeave={() => setPopoverShown(false)}
|
|
161
170
|
>
|
|
162
|
-
{
|
|
171
|
+
{popoverContent ? (
|
|
172
|
+
<Popover open={popoverShown} trigger={eyebrow}>
|
|
173
|
+
{popoverContent}
|
|
174
|
+
</Popover>
|
|
175
|
+
) : description ? (
|
|
163
176
|
<Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>
|
|
164
177
|
{eyebrow}
|
|
165
178
|
</Tooltip>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ReactElement } from 'react';
|
|
2
2
|
import { StatCard } from './stat-card';
|
|
3
|
+
import { BodyText } from '@servicetitan/design-system';
|
|
3
4
|
|
|
4
5
|
export default {
|
|
5
6
|
title: 'Marketing UI/stat/StatCard',
|
|
@@ -10,6 +11,14 @@ export default {
|
|
|
10
11
|
const w = (cb: () => ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
|
|
11
12
|
|
|
12
13
|
export const statCardNumber = w(() => <StatCard title="number" value={133} prev={1000} />);
|
|
14
|
+
export const statCardPopoverDescription = w(() => (
|
|
15
|
+
<StatCard
|
|
16
|
+
title="number"
|
|
17
|
+
value={133}
|
|
18
|
+
prev={1000}
|
|
19
|
+
popoverContent={<BodyText>Description</BodyText>}
|
|
20
|
+
/>
|
|
21
|
+
));
|
|
13
22
|
export const statDiffNumberPercentOnly = w(() => (
|
|
14
23
|
<StatCard title="number" value={133} prev={1000} diffPercentOnly />
|
|
15
24
|
));
|