@servicetitan/marketing-ui 1.6.1 → 1.10.0

package/src/components/charts/line-chart/components/svg-bars.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { ChartMetric } from '../utils/internal-interfaces';
@@ -10,7 +10,7 @@ interface SvgBarsProps {
     isStackedBarChart?: boolean;
 }
 
-export const SvgBars: React.FC<SvgBarsProps> = observer(({ metrics, isStackedBarChart }) => {
+export const SvgBars: FC<SvgBarsProps> = observer(({ metrics, isStackedBarChart }) => {
     const [store] = useDependencies(SvgStore);
     const { fpx, fpy, barWidth, length } = store;
     const barWidthHalf = barWidth / 2;
@@ -65,7 +65,7 @@ interface SvgBarsHoverProps {
     onLeave(ind: number): void;
 }
 
-export const SvgBarsHover: React.FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {
+export const SvgBarsHover: FC<SvgBarsHoverProps> = observer(({ onHover, onLeave }) => {
     const [store] = useDependencies(SvgStore);
     const { fpx, fpy, barWidth, length } = store;
     const barWidthHalf = barWidth / 2;

package/src/components/charts/line-chart/components/svg-body.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { observer } from 'mobx-react';
 import tokens from '@servicetitan/tokens';
 import { useDependencies } from '@servicetitan/react-ioc';
@@ -11,7 +11,7 @@ import { SvgBars, SvgBarsHover } from './svg-bars';
 import { SvgLines } from './svg-lines';
 import * as Styles from './svg.module.less';
 
-const SvgGrid: React.FC = () => {
+const SvgGrid: FC = () => {
     const lines = [];
 
     for (let i = 1; i <= 10; i += 1) {
@@ -39,7 +39,7 @@ interface SvgBodyProps {
     metrics: ChartMetric[];
 }
 
-export const SvgBody: React.FC<SvgBodyProps> = observer(({ horizontalGrid, metrics }) => {
+export const SvgBody: FC<SvgBodyProps> = observer(({ horizontalGrid, metrics }) => {
     const [{ key }] = useDependencies(SvgStore);
     const barMetrics = metrics.filter(m => m.type === 'bar');
     const stackedBarMetrics = metrics.filter(m => m.type === 'stacked-bar');
@@ -71,7 +71,7 @@ interface SvgBodyHoverProps {
     onValueLeave(ind: number): void;
 }
 
-export const SvgBodyHover: React.FC<SvgBodyHoverProps> = ({ onValueHover, onValueLeave }) => (
+export const SvgBodyHover: FC<SvgBodyHoverProps> = ({ onValueHover, onValueLeave }) => (
     <svg className={Styles.svgHover} viewBox="0 0 100 100" preserveAspectRatio="none">
         <SvgBarsHover onHover={onValueHover} onLeave={onValueLeave} />
     </svg>

package/src/components/charts/line-chart/components/svg-lines.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import { useMemo, FC } from 'react';
 import { observer } from 'mobx-react';
 import { useDependencies } from '@servicetitan/react-ioc';
 import { ChartMetric } from '../utils/internal-interfaces';
@@ -11,7 +11,7 @@ interface SvgLineProps {
     dashed: boolean;
 }
 
-const SvgLine: React.FC<SvgLineProps> = ({ color, points, dashed }) => (
+const SvgLine: FC<SvgLineProps> = ({ color, points, dashed }) => (
     <path
         className={Styles.line}
         d={points.map(([px, py], ind) => (ind === 0 ? 'M' : 'L') + `${px} ${py}`).join(' ')}
@@ -26,7 +26,7 @@ interface SvgLinesProps {
     metrics: ChartMetric[];
 }
 
-export const SvgLines: React.FC<SvgLinesProps> = observer(({ metrics }) => {
+export const SvgLines: FC<SvgLinesProps> = observer(({ metrics }) => {
     const [store] = useDependencies(SvgStore);
 
     const lines = useMemo(

package/src/components/charts/line-chart/line-chart.stories.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from 'react';
+import { FC, useState } from 'react';
 import { Form } from '@servicetitan/design-system';
 import { LineChart, LineChartPeriod } from './index';
 

package/src/components/charts/line-chart/utils/interfaces.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 
 export type LineChartResolution = 'hour' | 'day' | 'week' | 'month';
 export type LineChartMetricType = 'line' | 'bar' | 'stacked-bar';
@@ -74,7 +74,7 @@ export interface LineChartProps extends LineChartData {
 
 export interface LineChartCardProps extends LineChartProps {
     title: string;
-    headerRight?: React.ReactElement;
+    headerRight?: ReactElement;
     loading?: boolean;
     grayControls?: boolean;
 }

package/src/components/charts/pie-chart/components/pie-chart.tsx

@@ -1,12 +1,12 @@
-import React, { useMemo } from 'react';
+import { useMemo, FC } from 'react';
 import classNames from 'classnames';
 import { BodyText, Stack, StatusLight } from '@servicetitan/design-system';
 import { PieChartProps, PiePiece } from '../utils/interface';
-import { convertSessionsToPieces } from '../utils/const';
+import { convertSessionsToPieces, radiusRelativeDefault } from '../utils/const';
 import { Pie } from './pie';
 import * as Styles from './pie-chart.module.less';
 
-const PieTitles: React.FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {
+const PieTitles: FC<{ title: string; pieces: PiePiece[] }> = ({ title, pieces }) => {
     return (
         <div className={classNames(Styles.titleWrapper, 'of-y-auto p-t-2')}>
             <div>
@@ -28,20 +28,33 @@ const PieTitles: React.FC<{ title: string; pieces: PiePiece[] }> = ({ title, pie
     );
 };
 
-export const PieChart: React.FC<PieChartProps> = ({
+export const PieChart: FC<PieChartProps> = ({
     height,
     width,
     title,
     sections,
     popoverContent,
+    content,
+    radiusRelative = radiusRelativeDefault,
+    hideTitles = false,
 }) => {
-    const pieces = useMemo(() => convertSessionsToPieces(sections), [sections]);
+    const pieces = useMemo(
+        () => convertSessionsToPieces(sections, radiusRelative),
+        [sections, radiusRelative]
+    );
     const style = useMemo(() => ({ height, width }), [height, width]);
 
     return (
         <div className="d-f flex-row" style={style}>
-            <Pie title={title} pieces={pieces} popoverContent={popoverContent} />
-            <PieTitles title={title} pieces={pieces} />
+            <Pie
+                title={title}
+                pieces={pieces}
+                content={content}
+                popoverContent={popoverContent}
+                radiusRelative={radiusRelative}
+                hideTitles={hideTitles}
+            />
+            {!hideTitles && <PieTitles title={title} pieces={pieces} />}
         </div>
     );
 };

package/src/components/charts/pie-chart/components/pie.tsx

@@ -1,15 +1,14 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import { useCallback, useMemo, useState, FC, Fragment } from 'react';
 import tokens from '@servicetitan/tokens';
 import { BodyText, Popover, Stack, StatusLight } from '@servicetitan/design-system';
 
 import { useClientRect } from '../../../../utils/use-client-rect';
-import { radiusRelative } from '../utils/const';
 import { PieChartPopoverContentType, PiePiece } from '../utils/interface';
 
 const chartPadding = 8;
 const px = (value?: number) => `${value ?? 0}px`;
 
-const PiePieceSvg: React.FC<{
+const PiePieceSvg: FC<{
     piece: PiePiece;
     selected?: boolean;
 }> = ({ piece: { id, color, opacity, points, text, path }, selected }) =>
@@ -48,7 +47,7 @@ const PiePieceSvg: React.FC<{
         </g>
     ) : null;
 
-const PiePieceHover: React.FC<{
+const PiePieceHover: FC<{
     piece: PiePiece;
     onMouse(id: string, isEnter: boolean): void;
 }> = ({ piece, onMouse }) => {
@@ -66,10 +65,11 @@ const PiePieceHover: React.FC<{
     );
 };
 
-const PieSvg: React.FC<{
+const PieSvg: FC<{
     pieces: PiePiece[];
     selectedIndex: number;
-}> = ({ pieces, selectedIndex }) => (
+    radiusRelative: number;
+}> = ({ pieces, selectedIndex, radiusRelative }) => (
     <svg
         className="position-absolute"
         style={{ inset: px(chartPadding) }}
@@ -87,10 +87,11 @@ const PieSvg: React.FC<{
     </svg>
 );
 
-const PieSvgHover: React.FC<{
+const PieSvgHover: FC<{
     pieces: PiePiece[];
+    radiusRelative: number;
     onMouse(id: string, isEnter: boolean): void;
-}> = ({ pieces, onMouse }) => (
+}> = ({ pieces, onMouse, radiusRelative }) => (
     <svg
         className="position-absolute z-global-nav"
         style={{ inset: px(chartPadding) }}
@@ -104,11 +105,20 @@ const PieSvgHover: React.FC<{
     </svg>
 );
 
-export const Pie: React.FC<{
+export const Pie: FC<{
     title: string;
     pieces: PiePiece[];
+    radiusRelative: number;
+    content?: FC;
     popoverContent?: PieChartPopoverContentType;
-}> = ({ pieces, popoverContent: PopoverContent }) => {
+    hideTitles?: boolean;
+}> = ({
+    pieces,
+    popoverContent: PopoverContent,
+    content: PieContent,
+    radiusRelative,
+    hideTitles,
+}) => {
     const [selectedIndex, setSelectedIndex] = useState(-1);
     const [rect, ref] = useClientRect();
 
@@ -153,7 +163,7 @@ export const Pie: React.FC<{
                           : { top: '', left: '' }
                   )
                 : [],
-        [pieces, container]
+        [pieces, container, radiusRelative]
     );
 
     return (
@@ -163,7 +173,7 @@ export const Pie: React.FC<{
                     No Data
                 </Stack>
             ) : (
-                <React.Fragment>
+                <Fragment>
                     {triggersStyles
                         .filter(ts => !!ts.left && !!ts.top)
                         .map((ts, ind) => (
@@ -178,12 +188,14 @@ export const Pie: React.FC<{
                                 >
                                     {selectedIndex === ind && (
                                         <Stack direction="column">
-                                            <Stack alignItems="center">
-                                                <StatusLight color={pieces[ind].color} />
-                                                <BodyText size="small" bold>
-                                                    {pieces[ind].title}
-                                                </BodyText>
-                                            </Stack>
+                                            {!hideTitles && (
+                                                <Stack alignItems="center">
+                                                    <StatusLight color={pieces[ind].color} />
+                                                    <BodyText size="small" bold>
+                                                        {pieces[ind].title}
+                                                    </BodyText>
+                                                </Stack>
+                                            )}
                                             {!!PopoverContent && (
                                                 <Stack.Item className="m-l-1">
                                                     <PopoverContent
@@ -199,10 +211,18 @@ export const Pie: React.FC<{
                                 </Popover>
                             </div>
                         ))}
-
-                    <PieSvg pieces={pieces} selectedIndex={selectedIndex} />
-                    <PieSvgHover pieces={pieces} onMouse={onMouse} />
-                </React.Fragment>
+                    {!!PieContent && <PieContent />}
+                    <PieSvg
+                        pieces={pieces}
+                        selectedIndex={selectedIndex}
+                        radiusRelative={radiusRelative}
+                    />
+                    <PieSvgHover
+                        pieces={pieces}
+                        onMouse={onMouse}
+                        radiusRelative={radiusRelative}
+                    />
+                </Fragment>
             )}
         </div>
     );

package/src/components/charts/pie-chart/pie-chart.stories.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
 import { PieChart } from './index';
+import { Eyebrow, Stack, BodyText } from '@servicetitan/design-system';
 
 export default {
     title: 'Marketing UI/charts/PieChart',
@@ -21,6 +21,25 @@ export const pieChart5AutoColor = () => (
     />
 );
 
+export const pieChartWithContent = () => (
+    <PieChart
+        title="Pie Chart"
+        height={300}
+        sections={[
+            { title: 'New Customer', value: 61 },
+            { title: 'Existing Customer', value: 90 },
+        ]}
+        content={() => (
+            <Stack className="h-100" justifyContent="center" alignItems="center" direction="column">
+                <BodyText bold>244</BodyText>
+                <Eyebrow size="small">Total Leads</Eyebrow>
+            </Stack>
+        )}
+        radiusRelative={45}
+        hideTitles
+    />
+);
+
 export const pieChart1CustomColor = () => (
     <PieChart
         title="Pie Chart"

package/src/components/charts/pie-chart/utils/const.ts

@@ -1,10 +1,10 @@
 import { PiecePoints, PieChartSection, PiePiece } from './interface';
 import { formatNumber } from 'accounting';
 
-export const radiusRelative = 50;
+export const radiusRelativeDefault = 50;
 const radiusInt = 20;
-const radiusExt = radiusRelative - 5; // need to have some space to stroke selected piece
-const radiusMid = (3 * radiusRelative) / 4;
+const getRadiusExt = (radiusRelative: number) => radiusRelative - 5; // need to have some space to stroke selected piece
+const getRadiusMid = (radiusRelative: number) => (3 * radiusRelative) / 4;
 
 const angleInitial = -0.5;
 const lowestOpacity = 0.1;
@@ -25,7 +25,7 @@ const formatValue = (val: number): string => {
     return `0.${valueDecimal}%`;
 };
 
-const convertPointsToPath = (points: PiecePoints, wideAngle: boolean): string =>
+const convertPointsToPath = (points: PiecePoints, wideAngle: boolean, radiusExt: number): string =>
     `M ${points[3][0]},${points[3][1]} ` +
     `L ${points[0][0]},${points[0][1]} ` +
     `A ${radiusExt},${radiusExt} 0 ${wideAngle ? 1 : 0} 1 ${points[1][0]},${points[1][1]} ` +
@@ -33,10 +33,15 @@ const convertPointsToPath = (points: PiecePoints, wideAngle: boolean): string =>
     `A ${radiusInt},${radiusInt} 0 ${wideAngle ? 1 : 0} 0 ${points[3][0]},${points[3][1]} ` +
     `L ${points[0][0]},${points[0][1]} `;
 
-export const convertSessionsToPieces = <T>(sections: PieChartSection<T>[]): PiePiece<T>[] => {
+export const convertSessionsToPieces = <T>(
+    sections: PieChartSection<T>[],
+    radiusRelative: number
+): PiePiece<T>[] => {
     const total = sections.reduce((sum, curr) => sum + curr.value, 0);
     const opacityStep = (1 - lowestOpacity) / (Math.max(sections.length, 2) - 1);
     let angleSum = 0;
+    const radiusExt = getRadiusExt(radiusRelative);
+    const radiusMid = getRadiusMid(radiusRelative);
 
     const pieces = sections
         .slice()
@@ -71,7 +76,7 @@ export const convertSessionsToPieces = <T>(sections: PieChartSection<T>[]): PieP
                 value: s.value,
                 points,
                 path: points
-                    ? convertPointsToPath(points, angleEnd - angleStart >= Math.PI)
+                    ? convertPointsToPath(points, angleEnd - angleStart >= Math.PI, radiusExt)
                     : undefined,
             };
         });

package/src/components/charts/pie-chart/utils/interface.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 
 export interface PieChartSection<T> {
     title: string;
@@ -7,7 +7,7 @@ export interface PieChartSection<T> {
     data?: T;
 }
 
-export type PieChartPopoverContentType<T = any> = React.FC<{
+export type PieChartPopoverContentType<T = any> = FC<{
     index: number;
     value: number;
     data?: T;
@@ -18,8 +18,11 @@ export interface PieChartProps<T = any> {
     title: string;
     sections: PieChartSection<T>[];
     popoverContent?: PieChartPopoverContentType<T>;
+    content?: FC<T>;
     height?: number;
     width?: number;
+    radiusRelative?: number;
+    hideTitles?: boolean;
 }
 
 export type PiecePoint = [number, number];

package/src/components/image-cropper/image-cropper.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC, ChangeEvent, useRef, useState, Fragment } from 'react';
 import { ImageCropper } from './image-cropper';
 
 export default {
@@ -7,13 +7,13 @@ export default {
     parameters: {},
 };
 
-const BasicExample: React.FC = () => {
-    const [imageToEdit, setImageToEdit] = React.useState<File>();
-    const [croppedImage, setCroppedImage] = React.useState<string>();
+const BasicExample: FC = () => {
+    const [imageToEdit, setImageToEdit] = useState<File>();
+    const [croppedImage, setCroppedImage] = useState<string>();
 
-    const imageCropper = React.useRef<ImageCropper>(null);
+    const imageCropper = useRef<ImageCropper>(null);
 
-    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
         const file = e.target.files?.[0];
         if (!file) {
             return;
@@ -38,7 +38,7 @@ const BasicExample: React.FC = () => {
     };
 
     return (
-        <React.Fragment>
+        <Fragment>
             <input type="file" accept="image/png, image/jpeg" onChange={handleFileChange} />
             {imageToEdit && (
                 <div style={{ marginTop: 30 }}>
@@ -62,7 +62,7 @@ const BasicExample: React.FC = () => {
                     </div>
                 </div>
             )}
-        </React.Fragment>
+        </Fragment>
     );
 };
 

package/src/components/image-cropper/image-cropper.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Component } from 'react';
 import { observable, action, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import ReactCrop, { Crop } from 'react-image-crop';
@@ -13,7 +13,7 @@ interface ImageCropperProps {
 }
 
 @observer
-export class ImageCropper extends React.Component<ImageCropperProps> {
+export class ImageCropper extends Component<ImageCropperProps> {
     @observable private src?: string;
     @observable private crop?: Crop;
     @observable private image?: HTMLImageElement;

package/src/components/stat/stat-card.module.less

@@ -2,6 +2,13 @@
 
 .stat-diff {
     white-space: nowrap;
+    span {
+        font-size: @typescale-0;
+    }
+}
+
+.stat-extended-diff {
+    margin-bottom: 2px;
 }
 
 .title {

package/src/components/stat/stat-card.module.less.d.ts

@@ -1,4 +1,5 @@
 export const __esModule: true;
 export const statDiff: string;
+export const statExtendedDiff: string;
 export const title: string;
 

package/src/components/stat/stat-card.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import {
     BodyText,
@@ -42,9 +42,10 @@ interface StatDiffProps {
     inverted?: boolean;
     neutral?: boolean;
     className?: string;
+    diffPercentOnly?: boolean;
 }
 
-export const StatDiff: React.FC<StatDiffProps> = ({
+export const StatDiff: FC<StatDiffProps> = ({
     value,
     prev,
     size,
@@ -52,18 +53,26 @@ export const StatDiff: React.FC<StatDiffProps> = ({
     inverted,
     neutral,
     className,
+    diffPercentOnly = false,
 }) => {
     const percents = format === 'percent';
     const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);
-    let text = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    const diff = absDiff === 0 ? '' : isIncrease ? '▲ ' : '▼ ';
+    let text = '';
 
     if (percents) {
         text += formatDifferencePercentage(absDiff, isIncrease);
     } else {
-        text += formatDifference(absDiff, isIncrease, format);
+        const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);
 
-        if (diffPercent !== 0) {
-            text += ` (${formatDifferencePercentage(diffPercent, isIncrease)})`;
+        if (diffPercentOnly) {
+            text += `${diffPercentage}`;
+        } else {
+            text += `${formatDifference(absDiff, isIncrease, format)}`;
+
+            if (diffPercent !== 0) {
+                text += ` (${diffPercentage})`;
+            }
         }
     }
 
@@ -80,6 +89,7 @@ export const StatDiff: React.FC<StatDiffProps> = ({
             )}
             size={size ?? 'small'}
         >
+            <span>{diff}</span>
             {value === undefined ? '\u00A0' : text}
         </BodyText>
     );
@@ -99,9 +109,10 @@ export interface StatCardProps {
     fill?: boolean;
     valueOnly?: boolean;
     className?: string;
+    diffPercentOnly?: boolean;
 }
 
-export const StatCard: React.FC<StatCardProps> = ({
+export const StatCard: FC<StatCardProps> = ({
     title,
     description,
     value,
@@ -115,6 +126,7 @@ export const StatCard: React.FC<StatCardProps> = ({
     fill,
     valueOnly,
     className,
+    diffPercentOnly = false,
 }) => {
     const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
     const val = value === undefined ? '\u00A0' : formatValue(value, format);
@@ -143,6 +155,7 @@ export const StatCard: React.FC<StatCardProps> = ({
                     format={format}
                     inverted={inverted}
                     neutral={neutral}
+                    diffPercentOnly={diffPercentOnly}
                 />
             )}
         </Stack>

package/src/components/stat/stat-cards.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { StatCard } from './stat-card';
 
 export default {
@@ -7,9 +7,12 @@ export default {
     parameters: {},
 };
 
-const w = (cb: () => React.ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
+const w = (cb: () => ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
 
 export const statCardNumber = w(() => <StatCard title="number" value={133} prev={1000} />);
+export const statDiffNumberPercentOnly = w(() => (
+    <StatCard title="number" value={133} prev={1000} diffPercentOnly />
+));
 export const statCardMoney = w(() => <StatCard title="money" value={10000} prev={11000} money />);
 export const statCardPercentInverted = w(() => (
     <StatCard title="percent" value={0.27} prev={0.27333} percent inverted />

package/src/components/stat/stat-extended-card.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { StatExtendedCard } from './stat-extended-card';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (cb: () => React.ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
+const w = (cb: () => ReactElement) => () => <div style={{ width: '400px' }}>{cb()}</div>;
 
 export const statCardMoneyWithPrev = w(() => (
     <StatExtendedCard

package/src/components/stat/stat-extended-card.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 import classNames from 'classnames';
 import { BodyText, Icon, Headline, Eyebrow, Stack, Tooltip } from '@servicetitan/design-system';
 import { formatValue } from '../../utils/formatters';
 import { StatDiff } from './stat-card';
+import * as Styles from './stat-card.module.less';
 
 export interface StatExtendedCardProps {
     title: string;
@@ -54,11 +55,11 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
                     </Tooltip>
                 )}
             </Stack>
-            <Eyebrow size="small" className="m-t-3 c-black">
+            <Eyebrow size="small" className="m-t-2 c-black">
                 {title2}
             </Eyebrow>
 
-            <Stack justifyContent="space-between">
+            <Stack justifyContent="space-between" className="m-t-half">
                 <Stack alignItems="flex-end" className="flex-grow-1 flex-basis-0">
                     <Headline className="m-b-0-i m-r-half fw-normal-i" size="xlarge">
                         {formatValue(value, format)}
@@ -72,7 +73,7 @@ export const StatExtendedCard: FC<StatExtendedCardProps> = ({
                             format={format}
                             inverted={inverted}
                             neutral={neutral}
-                            className="m-l-1"
+                            className={classNames(Styles.statExtendedDiff, 'm-l-1')}
                         />
                     ) : undefined}
                 </Stack>

package/src/components/ui/centered-spinner.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ReactElement } from 'react';
 import { CenteredSpinner } from './centered-spinner';
 
 export default {
@@ -7,7 +7,7 @@ export default {
     parameters: {},
 };
 
-const w = (style: { width?: string; height?: string }, cb: () => React.ReactElement) => () =>
+const w = (style: { width?: string; height?: string }, cb: () => ReactElement) => () =>
     <div style={style}>{cb()}</div>;
 
 export const centeredSpinnerTiny = w({}, () => <CenteredSpinner size="tiny" />);