@servicetitan/marketing-ui 6.1.0 → 7.0.1

package/dist/components/charts/funnel-chart/components/funnel-chart.js

@@ -59,7 +59,7 @@ export const FunnelChart = ({ sections, format, topSideLength = defaultTopSideLe
                                             children: /*#__PURE__*/ _jsx("div", {
                                                 className: Styles.percentTextWrapper,
                                                 children: /*#__PURE__*/ _jsx(BodyText, {
-                                                    className: classNames('m-x-2 m-b-0-i'),
+                                                    className: classNames(Styles.percentText),
                                                     "data-cy": `marketing-funnel-section-${id}-value`,
                                                     children: formatValue(value, format)
                                                 })

package/dist/components/charts/funnel-chart/components/funnel-chart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"sourcesContent":["import { useMemo, useState, FC, Fragment } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Eyebrow, Icon, Mask, Stack, Tooltip } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { formatValue } from '../../../../utils/formatters';\nimport { StatDiff } from '../../../stat/stat-card';\nimport { FunnelChartProps } from '../utils/interface';\nimport { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';\nimport { FunnelPyramidSvg } from './funnel-svg';\nimport * as Styles from './funnel-chart.module.less';\nimport { Popover } from '@servicetitan/anvil2';\nimport { ColorTag } from '../../common';\n\nexport const FunnelChart: FC<FunnelChartProps> = ({\n    sections,\n    format,\n    topSideLength = defaultTopSideLength,\n    bottomSideLength = defaultBottomSideLength,\n    popoverContent: PopoverContent,\n    loading,\n    className,\n}) => {\n    const [popoverShown, setPopoverShown] = useState<number | undefined>(undefined);\n    const [rowYs, setRowYs] = useState<number[]>([]);\n    const colors = useMemo(() => sections.map(s => s.color), [sections]);\n    const outlineColors = useMemo(() => sections.map(s => s.outlineColor), [sections]);\n    const hidePopover = () => setPopoverShown(undefined);\n\n    const rightStyles = useMemo(\n        () => ({\n            left: `${100 - topSideLength}%`,\n        }),\n        [topSideLength]\n    );\n\n    return (\n        <Mask\n            className={classNames(\n                'h-100 bg-white border border-radius-2 p-3 of-hidden position-relative',\n                className\n            )}\n            active={!!loading}\n        >\n            <div className={Styles.pyramidWrapper}>\n                <FunnelPyramidSvg\n                    colors={colors}\n                    outlineColors={outlineColors}\n                    topSideLength={topSideLength}\n                    bottomSideLength={bottomSideLength}\n                    onRowAnchors={setRowYs}\n                />\n            </div>\n\n            <div\n                className={classNames(\n                    'd-f flex-column justify-content-around',\n                    Styles.pyramidBoxRight\n                )}\n                style={rightStyles}\n            >\n                {sections.map(({ id, title, value, color, prev, data, outlineColor }) => (\n                    <Stack\n                        key={title}\n                        className={Styles.flex1}\n                        justifyContent=\"center\"\n                        alignItems=\"center\"\n                        onMouseEnter={() => setPopoverShown(id)}\n                        onMouseLeave={hidePopover}\n                    >\n                        <Popover open={popoverShown === id} openOnHover placement=\"right\">\n                            <Popover.Trigger>\n                                {props => (\n                                    <span {...props}>\n                                        <div className={Styles.percentTextWrapper}>\n                                            <BodyText\n                                                className={classNames('m-x-2 m-b-0-i')}\n                                                data-cy={`marketing-funnel-section-${id}-value`}\n                                            >\n                                                {formatValue(value, format)}\n                                            </BodyText>\n                                        </div>\n                                    </span>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <Stack\n                                    alignItems=\"flex-start\"\n                                    justifyContent=\"flex-start\"\n                                    direction=\"column\"\n                                    data-cy={`marketing-funnel-popover-${id}-content`}\n                                >\n                                    <Stack>\n                                        <ColorTag\n                                            label=\"\"\n                                            color={color}\n                                            outlineColor={outlineColor}\n                                            pattern={outlineColor ? 'outline' : 'solid'}\n                                        />\n                                        <BodyText bold className=\"m-r-half\">\n                                            {title} {formatValue(value, format)}\n                                        </BodyText>\n                                    </Stack>\n                                    <Stack.Item>\n                                        <StatDiff\n                                            value={value}\n                                            prev={prev}\n                                            size=\"xsmall\"\n                                            format={format}\n                                        />\n                                    </Stack.Item>\n                                </Stack>\n\n                                {!!PopoverContent && (\n                                    <PopoverContent\n                                        id={id}\n                                        value={value}\n                                        text={formatValue(value, format)}\n                                        data={data}\n                                    />\n                                )}\n                            </Popover.Content>\n                        </Popover>\n                    </Stack>\n                ))}\n            </div>\n            <div className={Styles.pyramidBoxLeft} style={{ width: `${100 - topSideLength}%` }}>\n                {sections.map((s, i) => {\n                    const y = rowYs[i] ?? 0;\n                    const TITLE_UP = 24;\n                    const DIFF_DOWN = 4;\n\n                    return (\n                        <Fragment key={s.id}>\n                            <div\n                                className={Styles.leftTitle}\n                                style={{ top: `calc(${y}% - ${TITLE_UP}px)` }}\n                            >\n                                <Eyebrow\n                                    size=\"small\"\n                                    className={classNames(Styles.statTitle, 'm-r-half')}\n                                >\n                                    {s.title}\n                                </Eyebrow>\n                                <Tooltip direction=\"t\" portal text={s.description}>\n                                    <Icon\n                                        name=\"info\"\n                                        className=\"m-r-1\"\n                                        size=\"14px\"\n                                        color={tokens.colorNeutral90}\n                                    />\n                                </Tooltip>\n                            </div>\n\n                            <div\n                                className={Styles.leftDiff}\n                                style={{ top: `calc(${y}% + ${DIFF_DOWN}px)` }}\n                            >\n                                <StatDiff\n                                    value={s.value}\n                                    prev={s.prev}\n                                    size=\"small\"\n                                    format={format}\n                                />\n                            </div>\n                        </Fragment>\n                    );\n                })}\n            </div>\n        </Mask>\n    );\n};\n"],"names":["useMemo","useState","Fragment","classNames","BodyText","Eyebrow","Icon","Mask","Stack","Tooltip","tokens","formatValue","StatDiff","defaultBottomSideLength","defaultTopSideLength","FunnelPyramidSvg","Styles","Popover","ColorTag","FunnelChart","sections","format","topSideLength","bottomSideLength","popoverContent","PopoverContent","loading","className","popoverShown","setPopoverShown","undefined","rowYs","setRowYs","colors","map","s","color","outlineColors","outlineColor","hidePopover","rightStyles","left","active","div","pyramidWrapper","onRowAnchors","pyramidBoxRight","style","id","title","value","prev","data","flex1","justifyContent","alignItems","onMouseEnter","onMouseLeave","open","openOnHover","placement","Trigger","props","span","percentTextWrapper","data-cy","Content","direction","label","pattern","bold","Item","size","text","pyramidBoxLeft","width","i","y","TITLE_UP","DIFF_DOWN","leftTitle","top","statTitle","portal","description","name","colorNeutral90","leftDiff"],"mappings":"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"}
+{"version":3,"sources":["../../../../../src/components/charts/funnel-chart/components/funnel-chart.tsx"],"sourcesContent":["import { useMemo, useState, FC, Fragment } from 'react';\nimport classNames from 'classnames';\nimport { BodyText, Eyebrow, Icon, Mask, Stack, Tooltip } from '@servicetitan/design-system';\nimport { tokens } from '@servicetitan/tokens/core';\nimport { formatValue } from '../../../../utils/formatters';\nimport { StatDiff } from '../../../stat/stat-card';\nimport { FunnelChartProps } from '../utils/interface';\nimport { defaultBottomSideLength, defaultTopSideLength } from '../utils/const';\nimport { FunnelPyramidSvg } from './funnel-svg';\nimport * as Styles from './funnel-chart.module.less';\nimport { Popover } from '@servicetitan/anvil2';\nimport { ColorTag } from '../../common';\n\nexport const FunnelChart: FC<FunnelChartProps> = ({\n    sections,\n    format,\n    topSideLength = defaultTopSideLength,\n    bottomSideLength = defaultBottomSideLength,\n    popoverContent: PopoverContent,\n    loading,\n    className,\n}) => {\n    const [popoverShown, setPopoverShown] = useState<number | undefined>(undefined);\n    const [rowYs, setRowYs] = useState<number[]>([]);\n    const colors = useMemo(() => sections.map(s => s.color), [sections]);\n    const outlineColors = useMemo(() => sections.map(s => s.outlineColor), [sections]);\n    const hidePopover = () => setPopoverShown(undefined);\n\n    const rightStyles = useMemo(\n        () => ({\n            left: `${100 - topSideLength}%`,\n        }),\n        [topSideLength]\n    );\n\n    return (\n        <Mask\n            className={classNames(\n                'h-100 bg-white border border-radius-2 p-3 of-hidden position-relative',\n                className\n            )}\n            active={!!loading}\n        >\n            <div className={Styles.pyramidWrapper}>\n                <FunnelPyramidSvg\n                    colors={colors}\n                    outlineColors={outlineColors}\n                    topSideLength={topSideLength}\n                    bottomSideLength={bottomSideLength}\n                    onRowAnchors={setRowYs}\n                />\n            </div>\n\n            <div\n                className={classNames(\n                    'd-f flex-column justify-content-around',\n                    Styles.pyramidBoxRight\n                )}\n                style={rightStyles}\n            >\n                {sections.map(({ id, title, value, color, prev, data, outlineColor }) => (\n                    <Stack\n                        key={title}\n                        className={Styles.flex1}\n                        justifyContent=\"center\"\n                        alignItems=\"center\"\n                        onMouseEnter={() => setPopoverShown(id)}\n                        onMouseLeave={hidePopover}\n                    >\n                        <Popover open={popoverShown === id} openOnHover placement=\"right\">\n                            <Popover.Trigger>\n                                {props => (\n                                    <span {...props}>\n                                        <div className={Styles.percentTextWrapper}>\n                                            <BodyText\n                                                className={classNames(Styles.percentText)}\n                                                data-cy={`marketing-funnel-section-${id}-value`}\n                                            >\n                                                {formatValue(value, format)}\n                                            </BodyText>\n                                        </div>\n                                    </span>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <Stack\n                                    alignItems=\"flex-start\"\n                                    justifyContent=\"flex-start\"\n                                    direction=\"column\"\n                                    data-cy={`marketing-funnel-popover-${id}-content`}\n                                >\n                                    <Stack>\n                                        <ColorTag\n                                            label=\"\"\n                                            color={color}\n                                            outlineColor={outlineColor}\n                                            pattern={outlineColor ? 'outline' : 'solid'}\n                                        />\n                                        <BodyText bold className=\"m-r-half\">\n                                            {title} {formatValue(value, format)}\n                                        </BodyText>\n                                    </Stack>\n                                    <Stack.Item>\n                                        <StatDiff\n                                            value={value}\n                                            prev={prev}\n                                            size=\"xsmall\"\n                                            format={format}\n                                        />\n                                    </Stack.Item>\n                                </Stack>\n\n                                {!!PopoverContent && (\n                                    <PopoverContent\n                                        id={id}\n                                        value={value}\n                                        text={formatValue(value, format)}\n                                        data={data}\n                                    />\n                                )}\n                            </Popover.Content>\n                        </Popover>\n                    </Stack>\n                ))}\n            </div>\n            <div className={Styles.pyramidBoxLeft} style={{ width: `${100 - topSideLength}%` }}>\n                {sections.map((s, i) => {\n                    const y = rowYs[i] ?? 0;\n                    const TITLE_UP = 24;\n                    const DIFF_DOWN = 4;\n\n                    return (\n                        <Fragment key={s.id}>\n                            <div\n                                className={Styles.leftTitle}\n                                style={{ top: `calc(${y}% - ${TITLE_UP}px)` }}\n                            >\n                                <Eyebrow\n                                    size=\"small\"\n                                    className={classNames(Styles.statTitle, 'm-r-half')}\n                                >\n                                    {s.title}\n                                </Eyebrow>\n                                <Tooltip direction=\"t\" portal text={s.description}>\n                                    <Icon\n                                        name=\"info\"\n                                        className=\"m-r-1\"\n                                        size=\"14px\"\n                                        color={tokens.colorNeutral90}\n                                    />\n                                </Tooltip>\n                            </div>\n\n                            <div\n                                className={Styles.leftDiff}\n                                style={{ top: `calc(${y}% + ${DIFF_DOWN}px)` }}\n                            >\n                                <StatDiff\n                                    value={s.value}\n                                    prev={s.prev}\n                                    size=\"small\"\n                                    format={format}\n                                />\n                            </div>\n                        </Fragment>\n                    );\n                })}\n            </div>\n        </Mask>\n    );\n};\n"],"names":["useMemo","useState","Fragment","classNames","BodyText","Eyebrow","Icon","Mask","Stack","Tooltip","tokens","formatValue","StatDiff","defaultBottomSideLength","defaultTopSideLength","FunnelPyramidSvg","Styles","Popover","ColorTag","FunnelChart","sections","format","topSideLength","bottomSideLength","popoverContent","PopoverContent","loading","className","popoverShown","setPopoverShown","undefined","rowYs","setRowYs","colors","map","s","color","outlineColors","outlineColor","hidePopover","rightStyles","left","active","div","pyramidWrapper","onRowAnchors","pyramidBoxRight","style","id","title","value","prev","data","flex1","justifyContent","alignItems","onMouseEnter","onMouseLeave","open","openOnHover","placement","Trigger","props","span","percentTextWrapper","percentText","data-cy","Content","direction","label","pattern","bold","Item","size","text","pyramidBoxLeft","width","i","y","TITLE_UP","DIFF_DOWN","leftTitle","top","statTitle","portal","description","name","colorNeutral90","leftDiff"],"mappings":"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"}

package/dist/components/charts/funnel-chart/components/funnel-chart.module.less

@@ -9,16 +9,20 @@
 }
 
 .percent-text-wrapper {
-    width: 32px;
-    height: 32px;
-    display: flex;
+    width: auto;
+    height: 28px;
+    padding: @spacing-0 @spacing-half;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: @border-radius-circular;
+    border-radius: 9999px;
     background: rgba(255, 255, 255, 0.8);
 
-    :global(.BodyText) {
+    .percent-text {
         font-size: @typescale-0;
+        margin: @spacing-0;
+        text-align: center;
+        white-space: nowrap;
     }
 }
 

package/dist/components/charts/funnel-chart/components/funnel-chart.module.less.d.ts

@@ -2,6 +2,7 @@ export const __esModule: true;
 export const flex1: string;
 export const leftDiff: string;
 export const leftTitle: string;
+export const percentText: string;
 export const percentTextWrapper: string;
 export const pyramidBoxLeft: string;
 export const pyramidBoxRight: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/marketing-ui",
-    "version": "6.1.0",
+    "version": "7.0.1",
     "description": "Marketing UI component and utils",
     "repository": {
         "type": "git",
@@ -32,7 +32,7 @@
     "devDependencies": {
         "@servicetitan/anvil2": "^1.42.0",
         "@servicetitan/design-system": "~14.5.1",
-        "@servicetitan/react-ioc": "^32.2.0",
+        "@servicetitan/react-ioc": "^33.0.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": "b2f96c9cebfe80c20a790d4a9490d2642224bc64"
+    "gitHead": "adf2c3ae6e37a646304d21b6701d358a52f8f2e7"
 }

package/src/components/charts/funnel-chart/components/funnel-chart.module.less

@@ -9,16 +9,20 @@
 }
 
 .percent-text-wrapper {
-    width: 32px;
-    height: 32px;
-    display: flex;
+    width: auto;
+    height: 28px;
+    padding: @spacing-0 @spacing-half;
+    display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: @border-radius-circular;
+    border-radius: 9999px;
     background: rgba(255, 255, 255, 0.8);
 
-    :global(.BodyText) {
+    .percent-text {
         font-size: @typescale-0;
+        margin: @spacing-0;
+        text-align: center;
+        white-space: nowrap;
     }
 }
 

package/src/components/charts/funnel-chart/components/funnel-chart.module.less.d.ts

@@ -2,6 +2,7 @@ export const __esModule: true;
 export const flex1: string;
 export const leftDiff: string;
 export const leftTitle: string;
+export const percentText: string;
 export const percentTextWrapper: string;
 export const pyramidBoxLeft: string;
 export const pyramidBoxRight: string;

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

@@ -73,7 +73,7 @@ export const FunnelChart: FC<FunnelChartProps> = ({
                                     <span {...props}>
                                         <div className={Styles.percentTextWrapper}>
                                             <BodyText
-                                                className={classNames('m-x-2 m-b-0-i')}
+                                                className={classNames(Styles.percentText)}
                                                 data-cy={`marketing-funnel-section-${id}-value`}
                                             >
                                                 {formatValue(value, format)}