@servicetitan/marketing-ui 7.4.0 → 7.6.0

package/dist/components/stat/stat-card.d.ts

@@ -28,6 +28,8 @@ export interface StatCardProps {
     valueOnly?: boolean;
     className?: string;
     diffPercentOnly?: boolean;
+    centered?: boolean;
+    loading?: boolean;
 }
 export declare const StatCard: FC<StatCardProps>;
 export {};

package/dist/components/stat/stat-card.d.ts.map

@@ -1 +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,EAMtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAqCtE,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,CAyEtC,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,CA6EtC,CAAC"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../../../src/components/stat/stat-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAY,SAAS,EAAY,MAAM,OAAO,CAAC;AAE1D,OAAO,EAEH,mBAAmB,EAMtB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAe,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAqCtE,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,CAyEtC,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;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA6FtC,CAAC"}

package/dist/components/stat/stat-card.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import classNames from 'classnames';
 import { BodyText, Eyebrow, Headline, Popover, Stack, Tooltip } from '@servicetitan/design-system';
 import * as Styles from './stat-card.module.less';
 import { formatValue } from '../../utils/formatters';
-import { Icon } from '@servicetitan/anvil2';
+import { Icon, Skeleton } from '@servicetitan/anvil2';
 import TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';
 import TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';
 import InfoSVG from '@servicetitan/anvil2/assets/icons/material/round/info.svg';
@@ -80,7 +80,7 @@ export const StatDiff = ({ value, prev, size, format, inverted, neutral, classNa
         ]
     });
 };
-export const StatCard = ({ title, description, popoverContent, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false })=>{
+export const StatCard = ({ title, description, popoverContent, value, percent, money, rate, prev, clean, inverted, neutral, fill, valueOnly, className, diffPercentOnly = false, centered, loading })=>{
     const [popoverShown, setPopoverShown] = useState(false);
     const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
     const val = value === undefined ? '\u00A0' : formatValue(value, format);
@@ -93,15 +93,21 @@ export const StatCard = ({ title, description, popoverContent, value, percent, m
         svg: InfoSVG,
         color: tokens.colorNeutral100
     });
-    const infoContent = popoverContent ? /*#__PURE__*/ _jsx(Popover, {
-        open: popoverShown,
-        trigger: infoIcon,
-        onMouseEnter: ()=>setPopoverShown(true),
-        children: popoverContent
-    }) : description ? /*#__PURE__*/ _jsx(Tooltip, {
-        text: description,
-        "data-cy": `marketing-stat-${title}-tooltip`,
-        children: infoIcon
+    const infoContent = popoverContent ? /*#__PURE__*/ _jsx("div", {
+        className: Styles.infoIcon,
+        children: /*#__PURE__*/ _jsx(Popover, {
+            open: popoverShown,
+            trigger: infoIcon,
+            onMouseEnter: ()=>setPopoverShown(true),
+            children: popoverContent
+        })
+    }) : description ? /*#__PURE__*/ _jsx("div", {
+        className: Styles.infoIcon,
+        children: /*#__PURE__*/ _jsx(Tooltip, {
+            text: description,
+            "data-cy": `marketing-stat-${title}-tooltip`,
+            children: infoIcon
+        })
     }) : null;
     return /*#__PURE__*/ _jsx(Stack, {
         direction: "column",
@@ -112,33 +118,42 @@ export const StatCard = ({ title, description, popoverContent, value, percent, m
         }, className),
         onMouseLeave: ()=>setPopoverShown(false),
         children: /*#__PURE__*/ _jsxs("div", {
-            className: "p-3",
+            className: classNames('p-3', Styles.content),
             children: [
                 /*#__PURE__*/ _jsxs("div", {
-                    className: Styles.titleRow,
+                    className: classNames(Styles.titleRow, {
+                        [Styles.centered]: centered
+                    }),
                     children: [
                         eyebrow,
                         hasInfo && infoContent
                     ]
                 }),
-                /*#__PURE__*/ _jsxs("div", {
-                    className: Styles.valueRow,
-                    children: [
-                        /*#__PURE__*/ _jsx(Headline, {
-                            size: "xlarge",
-                            className: "m-b-0-i",
-                            "data-cy": `marketing-stat-${title}-value`,
-                            children: val
-                        }),
-                        !valueOnly && /*#__PURE__*/ _jsx(StatDiff, {
-                            value: value,
-                            prev: prev,
-                            format: format,
-                            inverted: inverted,
-                            neutral: neutral,
-                            diffPercentOnly: diffPercentOnly
-                        })
-                    ]
+                /*#__PURE__*/ _jsx("div", {
+                    className: classNames(Styles.valueRow, {
+                        [Styles.centered]: centered
+                    }),
+                    children: loading ? /*#__PURE__*/ _jsx(Skeleton.Text, {
+                        variant: "headline",
+                        className: "w-33"
+                    }) : /*#__PURE__*/ _jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Headline, {
+                                size: "xlarge",
+                                className: "m-b-0-i",
+                                "data-cy": `marketing-stat-${title}-value`,
+                                children: val
+                            }),
+                            !valueOnly && /*#__PURE__*/ _jsx(StatDiff, {
+                                value: value,
+                                prev: prev,
+                                format: format,
+                                inverted: inverted,
+                                neutral: neutral,
+                                diffPercentOnly: diffPercentOnly
+                            })
+                        ]
+                    })
                 })
             ]
         })

package/dist/components/stat/stat-card.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/stat/stat-card.tsx"],"sourcesContent":["import { FC, ReactNode, useState } from 'react';\nimport classNames from 'classnames';\nimport {\n    BodyText,\n    BodyTextPropsStrict,\n    Eyebrow,\n    Headline,\n    Popover,\n    Stack,\n    Tooltip,\n} from '@servicetitan/design-system';\nimport * as Styles from './stat-card.module.less';\nimport { formatValue, NumberFormatter } from '../../utils/formatters';\nimport { Icon } from '@servicetitan/anvil2';\nimport TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';\nimport TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';\nimport InfoSVG from '@servicetitan/anvil2/assets/icons/material/round/info.svg';\nimport { tokens } from '@servicetitan/tokens/core/index';\n\nconst calculateDiff = (\n    value: number,\n    prev: number,\n    percents?: boolean\n): [number, number, boolean] => {\n    const diff = (value - prev) * (percents ? 100 : 1);\n    const absDiff = Math.abs(diff);\n    let diffPercent = 0;\n\n    if (percents) {\n        diffPercent = diff;\n    } else if (absDiff) {\n        diffPercent = prev ? (100 * absDiff) / prev : 100;\n    }\n\n    return [absDiff, diffPercent, diff >= 0];\n};\n\nconst formatDifference = (value: number, isPlus: boolean, format: NumberFormatter): string => {\n    return (isPlus ? '+' : '-') + formatValue(value, format);\n};\n\nconst formatDifferencePercentage = (value: number, isPlus: boolean): string => {\n    if (!value) {\n        return '';\n    }\n\n    return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');\n};\n\ninterface StatDiffProps {\n    value?: number;\n    prev?: number;\n    size?: BodyTextPropsStrict['size'];\n    format: NumberFormatter;\n    inverted?: boolean;\n    neutral?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatDiff: FC<StatDiffProps> = ({\n    value,\n    prev,\n    size,\n    format,\n    inverted,\n    neutral,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const percents = format === 'percent';\n    const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);\n    const diff =\n        absDiff === 0 ? (\n            ''\n        ) : (\n            <Icon\n                svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}\n                color={\n                    neutral\n                        ? 'neutral-200'\n                        : inverted\n                          ? isIncrease\n                              ? 'red'\n                              : 'green'\n                          : isIncrease\n                            ? 'green'\n                            : 'red'\n                }\n            />\n        );\n    let text = '';\n\n    if (percents) {\n        text += formatDifferencePercentage(absDiff, isIncrease);\n    } else {\n        const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);\n\n        if (diffPercentOnly) {\n            text += `${diffPercentage}`;\n        } else {\n            text += `${formatDifference(absDiff, isIncrease, format)}`;\n\n            if (diffPercent !== 0) {\n                text += ` (${diffPercentage})`;\n            }\n        }\n    }\n\n    return (\n        <Stack\n            className={classNames(Styles.statDiff, className)}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n        >\n            <Stack.Item className=\"m-r-half m-t-half\">\n                <span>{diff}</span>\n            </Stack.Item>\n            <Stack.Item>\n                <BodyText\n                    size={size ?? 'small'}\n                    data-cy=\"stat-diff-value\"\n                    className={classNames({\n                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n                        'c-neutral-200': !!neutral,\n                    })}\n                >\n                    {value === undefined ? '\\u00A0' : text}\n                </BodyText>\n            </Stack.Item>\n        </Stack>\n    );\n};\n\nexport interface StatCardProps {\n    title: string;\n    description?: string;\n    popoverContent?: ReactNode;\n    value?: number;\n    prev?: number;\n    percent?: boolean;\n    money?: boolean;\n    rate?: boolean;\n    clean?: boolean;\n    inverted?: boolean;\n    neutral?: boolean;\n    fill?: boolean;\n    valueOnly?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatCard: FC<StatCardProps> = ({\n    title,\n    description,\n    popoverContent,\n    value,\n    percent,\n    money,\n    rate,\n    prev,\n    clean,\n    inverted,\n    neutral,\n    fill,\n    valueOnly,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const [popoverShown, setPopoverShown] = useState(false);\n    const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n    const val = value === undefined ? '\\u00A0' : formatValue(value, format);\n    const hasInfo = !!description || !!popoverContent;\n\n    const eyebrow = <Eyebrow data-cy={`marketing-stat-${title}-title`}>{title}</Eyebrow>;\n\n    const infoIcon = <Icon svg={InfoSVG} color={tokens.colorNeutral100} />;\n\n    const infoContent = popoverContent ? (\n        <Popover open={popoverShown} trigger={infoIcon} onMouseEnter={() => setPopoverShown(true)}>\n            {popoverContent}\n        </Popover>\n    ) : description ? (\n        <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>\n            {infoIcon}\n        </Tooltip>\n    ) : null;\n\n    return (\n        <Stack\n            direction=\"column\"\n            className={classNames(\n                'p-2',\n                {\n                    'bg-white border': !clean,\n                    [Styles.card]: !clean,\n                    'flex-grow-1 flex-basis-0': fill,\n                },\n                className\n            )}\n            onMouseLeave={() => setPopoverShown(false)}\n        >\n            <div className=\"p-3\">\n                <div className={Styles.titleRow}>\n                    {eyebrow}\n                    {hasInfo && infoContent}\n                </div>\n                <div className={Styles.valueRow}>\n                    <Headline\n                        size=\"xlarge\"\n                        className=\"m-b-0-i\"\n                        data-cy={`marketing-stat-${title}-value`}\n                    >\n                        {val}\n                    </Headline>\n                    {!valueOnly && (\n                        <StatDiff\n                            value={value}\n                            prev={prev}\n                            format={format}\n                            inverted={inverted}\n                            neutral={neutral}\n                            diffPercentOnly={diffPercentOnly}\n                        />\n                    )}\n                </div>\n            </div>\n        </Stack>\n    );\n};\n"],"names":["useState","classNames","BodyText","Eyebrow","Headline","Popover","Stack","Tooltip","Styles","formatValue","Icon","TrendingUpSVG","TrendingDownSVG","InfoSVG","tokens","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","svg","color","text","diffPercentage","statDiff","justifyContent","alignItems","Item","span","data-cy","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","popoverShown","setPopoverShown","val","hasInfo","eyebrow","infoIcon","colorNeutral100","infoContent","open","trigger","onMouseEnter","direction","card","onMouseLeave","div","titleRow","valueRow"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/stat/stat-card.tsx"],"sourcesContent":["import { FC, Fragment, ReactNode, useState } from 'react';\nimport classNames from 'classnames';\nimport {\n    BodyText,\n    BodyTextPropsStrict,\n    Eyebrow,\n    Headline,\n    Popover,\n    Stack,\n    Tooltip,\n} from '@servicetitan/design-system';\nimport * as Styles from './stat-card.module.less';\nimport { formatValue, NumberFormatter } from '../../utils/formatters';\nimport { Icon, Skeleton } from '@servicetitan/anvil2';\nimport TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';\nimport TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';\nimport InfoSVG from '@servicetitan/anvil2/assets/icons/material/round/info.svg';\nimport { tokens } from '@servicetitan/tokens/core/index';\n\nconst calculateDiff = (\n    value: number,\n    prev: number,\n    percents?: boolean\n): [number, number, boolean] => {\n    const diff = (value - prev) * (percents ? 100 : 1);\n    const absDiff = Math.abs(diff);\n    let diffPercent = 0;\n\n    if (percents) {\n        diffPercent = diff;\n    } else if (absDiff) {\n        diffPercent = prev ? (100 * absDiff) / prev : 100;\n    }\n\n    return [absDiff, diffPercent, diff >= 0];\n};\n\nconst formatDifference = (value: number, isPlus: boolean, format: NumberFormatter): string => {\n    return (isPlus ? '+' : '-') + formatValue(value, format);\n};\n\nconst formatDifferencePercentage = (value: number, isPlus: boolean): string => {\n    if (!value) {\n        return '';\n    }\n\n    return (isPlus ? '+' : '-') + formatValue(value, 'percent-100');\n};\n\ninterface StatDiffProps {\n    value?: number;\n    prev?: number;\n    size?: BodyTextPropsStrict['size'];\n    format: NumberFormatter;\n    inverted?: boolean;\n    neutral?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n}\n\nexport const StatDiff: FC<StatDiffProps> = ({\n    value,\n    prev,\n    size,\n    format,\n    inverted,\n    neutral,\n    className,\n    diffPercentOnly = false,\n}) => {\n    const percents = format === 'percent';\n    const [absDiff, diffPercent, isIncrease] = calculateDiff(value ?? 0, prev ?? 0, percents);\n    const diff =\n        absDiff === 0 ? (\n            ''\n        ) : (\n            <Icon\n                svg={isIncrease ? TrendingUpSVG : TrendingDownSVG}\n                color={\n                    neutral\n                        ? 'neutral-200'\n                        : inverted\n                          ? isIncrease\n                              ? 'red'\n                              : 'green'\n                          : isIncrease\n                            ? 'green'\n                            : 'red'\n                }\n            />\n        );\n    let text = '';\n\n    if (percents) {\n        text += formatDifferencePercentage(absDiff, isIncrease);\n    } else {\n        const diffPercentage = formatDifferencePercentage(diffPercent, isIncrease);\n\n        if (diffPercentOnly) {\n            text += `${diffPercentage}`;\n        } else {\n            text += `${formatDifference(absDiff, isIncrease, format)}`;\n\n            if (diffPercent !== 0) {\n                text += ` (${diffPercentage})`;\n            }\n        }\n    }\n\n    return (\n        <Stack\n            className={classNames(Styles.statDiff, className)}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n        >\n            <Stack.Item className=\"m-r-half m-t-half\">\n                <span>{diff}</span>\n            </Stack.Item>\n            <Stack.Item>\n                <BodyText\n                    size={size ?? 'small'}\n                    data-cy=\"stat-diff-value\"\n                    className={classNames({\n                        'c-red-500': !neutral && (inverted ? isIncrease : !isIncrease),\n                        'c-green-500': !neutral && (inverted ? !isIncrease : isIncrease),\n                        'c-neutral-200': !!neutral,\n                    })}\n                >\n                    {value === undefined ? '\\u00A0' : text}\n                </BodyText>\n            </Stack.Item>\n        </Stack>\n    );\n};\n\nexport interface StatCardProps {\n    title: string;\n    description?: string;\n    popoverContent?: ReactNode;\n    value?: number;\n    prev?: number;\n    percent?: boolean;\n    money?: boolean;\n    rate?: boolean;\n    clean?: boolean;\n    inverted?: boolean;\n    neutral?: boolean;\n    fill?: boolean;\n    valueOnly?: boolean;\n    className?: string;\n    diffPercentOnly?: boolean;\n    centered?: boolean;\n    loading?: boolean;\n}\n\nexport const StatCard: FC<StatCardProps> = ({\n    title,\n    description,\n    popoverContent,\n    value,\n    percent,\n    money,\n    rate,\n    prev,\n    clean,\n    inverted,\n    neutral,\n    fill,\n    valueOnly,\n    className,\n    diffPercentOnly = false,\n    centered,\n    loading,\n}) => {\n    const [popoverShown, setPopoverShown] = useState(false);\n    const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';\n    const val = value === undefined ? '\\u00A0' : formatValue(value, format);\n    const hasInfo = !!description || !!popoverContent;\n\n    const eyebrow = <Eyebrow data-cy={`marketing-stat-${title}-title`}>{title}</Eyebrow>;\n\n    const infoIcon = <Icon svg={InfoSVG} color={tokens.colorNeutral100} />;\n\n    const infoContent = popoverContent ? (\n        <div className={Styles.infoIcon}>\n            <Popover\n                open={popoverShown}\n                trigger={infoIcon}\n                onMouseEnter={() => setPopoverShown(true)}\n            >\n                {popoverContent}\n            </Popover>\n        </div>\n    ) : description ? (\n        <div className={Styles.infoIcon}>\n            <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>\n                {infoIcon}\n            </Tooltip>\n        </div>\n    ) : null;\n\n    return (\n        <Stack\n            direction=\"column\"\n            className={classNames(\n                'p-2',\n                {\n                    'bg-white border': !clean,\n                    [Styles.card]: !clean,\n                    'flex-grow-1 flex-basis-0': fill,\n                },\n                className\n            )}\n            onMouseLeave={() => setPopoverShown(false)}\n        >\n            <div className={classNames('p-3', Styles.content)}>\n                <div className={classNames(Styles.titleRow, { [Styles.centered]: centered })}>\n                    {eyebrow}\n                    {hasInfo && infoContent}\n                </div>\n                <div className={classNames(Styles.valueRow, { [Styles.centered]: centered })}>\n                    {loading ? (\n                        <Skeleton.Text variant=\"headline\" className=\"w-33\" />\n                    ) : (\n                        <Fragment>\n                            <Headline\n                                size=\"xlarge\"\n                                className=\"m-b-0-i\"\n                                data-cy={`marketing-stat-${title}-value`}\n                            >\n                                {val}\n                            </Headline>\n                            {!valueOnly && (\n                                <StatDiff\n                                    value={value}\n                                    prev={prev}\n                                    format={format}\n                                    inverted={inverted}\n                                    neutral={neutral}\n                                    diffPercentOnly={diffPercentOnly}\n                                />\n                            )}\n                        </Fragment>\n                    )}\n                </div>\n            </div>\n        </Stack>\n    );\n};\n"],"names":["Fragment","useState","classNames","BodyText","Eyebrow","Headline","Popover","Stack","Tooltip","Styles","formatValue","Icon","Skeleton","TrendingUpSVG","TrendingDownSVG","InfoSVG","tokens","calculateDiff","value","prev","percents","diff","absDiff","Math","abs","diffPercent","formatDifference","isPlus","format","formatDifferencePercentage","StatDiff","size","inverted","neutral","className","diffPercentOnly","isIncrease","svg","color","text","diffPercentage","statDiff","justifyContent","alignItems","Item","span","data-cy","undefined","StatCard","title","description","popoverContent","percent","money","rate","clean","fill","valueOnly","centered","loading","popoverShown","setPopoverShown","val","hasInfo","eyebrow","infoIcon","colorNeutral100","infoContent","div","open","trigger","onMouseEnter","direction","card","onMouseLeave","content","titleRow","valueRow","Text","variant"],"mappings":"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"}

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

@@ -11,9 +11,15 @@
     margin-bottom: 2px;
 }
 
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
 .title-row {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 8px;
 }
 
@@ -22,7 +28,17 @@
     flex-wrap: wrap;
     align-items: flex-end;
     gap: 8px;
-    margin-top: @spacing-1;
+    min-height: 40px;
+}
+
+.info-icon {
+    display: flex;
+    align-items: center;
+    line-height: 0;
+}
+
+.centered {
+    justify-content: center;
 }
 
 .card {

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

@@ -1,5 +1,8 @@
 export const __esModule: true;
 export const card: string;
+export const centered: string;
+export const content: string;
+export const infoIcon: string;
 export const statDiff: string;
 export const statExtendedDiff: string;
 export const titleRow: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "7.4.0",
+    "version": "7.6.0",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -32,7 +32,7 @@
     "devDependencies": {
         "@servicetitan/anvil2": "^2.0.1",
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/react-ioc": "^34.0.1",
+        "@servicetitan/react-ioc": "^34.2.0",
         "@servicetitan/tokens": ">=12.2.1",
         "@testing-library/react": "^14.2.1",
         "@types/accounting": "~0.4.2",
@@ -53,5 +53,5 @@
         "less": true,
         "webpack": false
     },
-    "gitHead": "7e2b147613dc2f96854d2e2c4458a4891dc6aadc"
+    "gitHead": "0ce9b839d487b5520516bb11e16816b0ede0f6c0"
 }

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

@@ -11,9 +11,15 @@
     margin-bottom: 2px;
 }
 
+.content {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
 .title-row {
     display: flex;
-    align-items: flex-start;
+    align-items: center;
     gap: 8px;
 }
 
@@ -22,7 +28,17 @@
     flex-wrap: wrap;
     align-items: flex-end;
     gap: 8px;
-    margin-top: @spacing-1;
+    min-height: 40px;
+}
+
+.info-icon {
+    display: flex;
+    align-items: center;
+    line-height: 0;
+}
+
+.centered {
+    justify-content: center;
 }
 
 .card {

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

@@ -1,5 +1,8 @@
 export const __esModule: true;
 export const card: string;
+export const centered: string;
+export const content: string;
+export const infoIcon: string;
 export const statDiff: string;
 export const statExtendedDiff: string;
 export const titleRow: string;

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode, useState } from 'react';
+import { FC, Fragment, ReactNode, useState } from 'react';
 import classNames from 'classnames';
 import {
     BodyText,
@@ -11,7 +11,7 @@ import {
 } from '@servicetitan/design-system';
 import * as Styles from './stat-card.module.less';
 import { formatValue, NumberFormatter } from '../../utils/formatters';
-import { Icon } from '@servicetitan/anvil2';
+import { Icon, Skeleton } from '@servicetitan/anvil2';
 import TrendingUpSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_up.svg';
 import TrendingDownSVG from '@servicetitan/anvil2/assets/icons/material/round/trending_down.svg';
 import InfoSVG from '@servicetitan/anvil2/assets/icons/material/round/info.svg';
@@ -149,6 +149,8 @@ export interface StatCardProps {
     valueOnly?: boolean;
     className?: string;
     diffPercentOnly?: boolean;
+    centered?: boolean;
+    loading?: boolean;
 }
 
 export const StatCard: FC<StatCardProps> = ({
@@ -167,6 +169,8 @@ export const StatCard: FC<StatCardProps> = ({
     valueOnly,
     className,
     diffPercentOnly = false,
+    centered,
+    loading,
 }) => {
     const [popoverShown, setPopoverShown] = useState(false);
     const format = money ? 'money' : percent ? 'percent' : rate ? 'rate' : 'number';
@@ -178,13 +182,21 @@ export const StatCard: FC<StatCardProps> = ({
     const infoIcon = <Icon svg={InfoSVG} color={tokens.colorNeutral100} />;
 
     const infoContent = popoverContent ? (
-        <Popover open={popoverShown} trigger={infoIcon} onMouseEnter={() => setPopoverShown(true)}>
-            {popoverContent}
-        </Popover>
+        <div className={Styles.infoIcon}>
+            <Popover
+                open={popoverShown}
+                trigger={infoIcon}
+                onMouseEnter={() => setPopoverShown(true)}
+            >
+                {popoverContent}
+            </Popover>
+        </div>
     ) : description ? (
-        <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>
-            {infoIcon}
-        </Tooltip>
+        <div className={Styles.infoIcon}>
+            <Tooltip text={description} data-cy={`marketing-stat-${title}-tooltip`}>
+                {infoIcon}
+            </Tooltip>
+        </div>
     ) : null;
 
     return (
@@ -201,28 +213,34 @@ export const StatCard: FC<StatCardProps> = ({
             )}
             onMouseLeave={() => setPopoverShown(false)}
         >
-            <div className="p-3">
-                <div className={Styles.titleRow}>
+            <div className={classNames('p-3', Styles.content)}>
+                <div className={classNames(Styles.titleRow, { [Styles.centered]: centered })}>
                     {eyebrow}
                     {hasInfo && infoContent}
                 </div>
-                <div className={Styles.valueRow}>
-                    <Headline
-                        size="xlarge"
-                        className="m-b-0-i"
-                        data-cy={`marketing-stat-${title}-value`}
-                    >
-                        {val}
-                    </Headline>
-                    {!valueOnly && (
-                        <StatDiff
-                            value={value}
-                            prev={prev}
-                            format={format}
-                            inverted={inverted}
-                            neutral={neutral}
-                            diffPercentOnly={diffPercentOnly}
-                        />
+                <div className={classNames(Styles.valueRow, { [Styles.centered]: centered })}>
+                    {loading ? (
+                        <Skeleton.Text variant="headline" className="w-33" />
+                    ) : (
+                        <Fragment>
+                            <Headline
+                                size="xlarge"
+                                className="m-b-0-i"
+                                data-cy={`marketing-stat-${title}-value`}
+                            >
+                                {val}
+                            </Headline>
+                            {!valueOnly && (
+                                <StatDiff
+                                    value={value}
+                                    prev={prev}
+                                    format={format}
+                                    inverted={inverted}
+                                    neutral={neutral}
+                                    diffPercentOnly={diffPercentOnly}
+                                />
+                            )}
+                        </Fragment>
                     )}
                 </div>
             </div>