@servicetitan/marketing-ui 4.1.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 +8 -4
- 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 +14 -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) => {
|
|
@@ -50,13 +51,16 @@ export const StatDiff = ({ value, prev, size, format, inverted, neutral, classNa
|
|
|
50
51
|
'c-neutral-200': !!neutral,
|
|
51
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';
|
|
@@ -105,6 +106,7 @@ export const StatDiff: FC<StatDiffProps> = ({
|
|
|
105
106
|
export interface StatCardProps {
|
|
106
107
|
title: string;
|
|
107
108
|
description?: string;
|
|
109
|
+
popoverContent?: ReactNode;
|
|
108
110
|
value?: number;
|
|
109
111
|
prev?: number;
|
|
110
112
|
percent?: boolean;
|
|
@@ -122,6 +124,7 @@ export interface StatCardProps {
|
|
|
122
124
|
export const StatCard: FC<StatCardProps> = ({
|
|
123
125
|
title,
|
|
124
126
|
description,
|
|
127
|
+
popoverContent,
|
|
125
128
|
value,
|
|
126
129
|
percent,
|
|
127
130
|
money,
|
|
@@ -135,6 +138,7 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
135
138
|
className,
|
|
136
139
|
diffPercentOnly = false,
|
|
137
140
|
}) => {
|
|
141
|
+
const [popoverShown, setPopoverShown] = useState(false);
|
|
138
142
|
const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
|
|
139
143
|
const val = value === undefined ? '\u00A0' : formatValue(value, format);
|
|
140
144
|
|
|
@@ -142,6 +146,9 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
142
146
|
<Eyebrow
|
|
143
147
|
className={classNames(Styles.title, 'ta-center')}
|
|
144
148
|
data-cy={`marketing-stat-${title}-title`}
|
|
149
|
+
onMouseEnter={() => {
|
|
150
|
+
setPopoverShown(true);
|
|
151
|
+
}}
|
|
145
152
|
>
|
|
146
153
|
{title}
|
|
147
154
|
</Eyebrow>
|
|
@@ -159,8 +166,13 @@ export const StatCard: FC<StatCardProps> = ({
|
|
|
159
166
|
},
|
|
160
167
|
className
|
|
161
168
|
)}
|
|
169
|
+
onMouseLeave={() => setPopoverShown(false)}
|
|
162
170
|
>
|
|
163
|
-
{
|
|
171
|
+
{popoverContent ? (
|
|
172
|
+
<Popover open={popoverShown} trigger={eyebrow}>
|
|
173
|
+
{popoverContent}
|
|
174
|
+
</Popover>
|
|
175
|
+
) : description ? (
|
|
164
176
|
<Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>
|
|
165
177
|
{eyebrow}
|
|
166
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
|
));
|