@servicetitan/feature-spotlight 3.7.0 → 3.9.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/feature-modal.d.ts +2 -2
- package/dist/components/feature-modal.d.ts.map +1 -1
- package/dist/components/feature-modal.js.map +1 -1
- package/dist/components/feature-popover.d.ts +2 -2
- package/dist/components/feature-popover.d.ts.map +1 -1
- package/dist/components/feature-popover.js.map +1 -1
- package/dist/components/feature-toast.d.ts +2 -2
- package/dist/components/feature-toast.d.ts.map +1 -1
- package/dist/components/feature-toast.js.map +1 -1
- package/dist/components/tour-popover.d.ts +2 -2
- package/dist/components/tour-popover.d.ts.map +1 -1
- package/dist/components/tour-popover.js.map +1 -1
- package/dist/feature-spotlight.stories.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/components/feature-modal.tsx +3 -2
- package/src/components/feature-popover.tsx +3 -2
- package/src/components/feature-toast.tsx +3 -2
- package/src/components/tour-popover.tsx +3 -9
- package/src/feature-spotlight.stories.tsx +4 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { ModalProps } from '@servicetitan/design-system';
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { ModalProps } from '@servicetitan/design-system';
|
|
3
3
|
export declare const FeatureModal: FC<ModalProps>;
|
|
4
4
|
//# sourceMappingURL=feature-modal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feature-modal.d.ts","sourceRoot":"","sources":["../../src/components/feature-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"feature-modal.d.ts","sourceRoot":"","sources":["../../src/components/feature-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAI9D,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,UAAU,CAEvC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/feature-modal.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/feature-modal.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport classNames from 'classnames';\nimport type { ModalProps } from '@servicetitan/design-system';\nimport { Modal } from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport const FeatureModal: FC<ModalProps> = ({ ...rest }) => {\n return <Modal className={classNames(Styles.featureModalHeader)} {...rest} />;\n};\n"],"names":["classNames","Modal","Styles","FeatureModal","rest","className","featureModalHeader"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AAEpC,SAASC,KAAK,QAAQ,8BAA8B;AACpD,YAAYC,YAAY,kCAAkC;AAE1D,OAAO,MAAMC,eAA+B,CAAC,EAAE,GAAGC,MAAM;IACpD,qBAAO,KAACH;QAAMI,WAAWL,WAAWE,OAAOI,kBAAkB;QAAI,GAAGF,IAAI;;AAC5E,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { PopoverProps } from '@servicetitan/design-system';
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { PopoverProps } from '@servicetitan/design-system';
|
|
3
3
|
export interface FeaturePopoverProps extends PopoverProps {
|
|
4
4
|
footer?: PopoverProps['footer'];
|
|
5
5
|
header?: PopoverProps['header'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feature-popover.d.ts","sourceRoot":"","sources":["../../src/components/feature-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"feature-popover.d.ts","sourceRoot":"","sources":["../../src/components/feature-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAIhE,MAAM,WAAW,mBAAoB,SAAQ,YAAY;IACrD,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,YAAY,CAAC,QAAQ,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,YAAY,CAAC,UAAU,CAAC,CAAC;CACvC;AAED,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAqBlD,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/feature-popover.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/feature-popover.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport classNames from 'classnames';\nimport type { PopoverProps } from '@servicetitan/design-system';\nimport { Popover } from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport interface FeaturePopoverProps extends PopoverProps {\n footer?: PopoverProps['footer'];\n header?: PopoverProps['header'];\n children?: PopoverProps['children'];\n}\n\nexport const FeaturePopover: FC<FeaturePopoverProps> = ({ children, footer, header, ...rest }) => {\n return (\n <Popover\n className={classNames(Styles.featurePopover)}\n caret={{ show: true, className: Styles.featurePopoverCaret }}\n padding=\"m\"\n {...rest}\n >\n {header && (\n <Popover.Header className={classNames(Styles.featurePopoverHeader)}>\n {header}\n </Popover.Header>\n )}\n {children}\n {footer && (\n <Popover.Footer className={classNames(Styles.featurePopoverFooter)} align=\"right\">\n {footer}\n </Popover.Footer>\n )}\n </Popover>\n );\n};\n"],"names":["classNames","Popover","Styles","FeaturePopover","children","footer","header","rest","className","featurePopover","caret","show","featurePopoverCaret","padding","Header","featurePopoverHeader","Footer","featurePopoverFooter","align"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AAEpC,SAASC,OAAO,QAAQ,8BAA8B;AACtD,YAAYC,YAAY,kCAAkC;AAQ1D,OAAO,MAAMC,iBAA0C,CAAC,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,MAAM,EAAE,GAAGC,MAAM;IACzF,qBACI,MAACN;QACGO,WAAWR,WAAWE,OAAOO,cAAc;QAC3CC,OAAO;YAAEC,MAAM;YAAMH,WAAWN,OAAOU,mBAAmB;QAAC;QAC3DC,SAAQ;QACP,GAAGN,IAAI;;YAEPD,wBACG,KAACL,QAAQa,MAAM;gBAACN,WAAWR,WAAWE,OAAOa,oBAAoB;0BAC5DT;;YAGRF;YACAC,wBACG,KAACJ,QAAQe,MAAM;gBAACR,WAAWR,WAAWE,OAAOe,oBAAoB;gBAAGC,OAAM;0BACrEb;;;;AAKrB,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { ToastProps } from '@servicetitan/design-system';
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import type { ToastProps } from '@servicetitan/design-system';
|
|
3
3
|
export interface FeatureToastProps extends ToastProps {
|
|
4
4
|
center?: boolean;
|
|
5
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feature-toast.d.ts","sourceRoot":"","sources":["../../src/components/feature-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"feature-toast.d.ts","sourceRoot":"","sources":["../../src/components/feature-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAI9D,MAAM,WAAW,iBAAkB,SAAQ,UAAU;IACjD,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,iBAAiB,CAO9C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/feature-toast.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/feature-toast.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport classNames from 'classnames';\nimport type { ToastProps } from '@servicetitan/design-system';\nimport { Toast } from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport interface FeatureToastProps extends ToastProps {\n center?: boolean;\n}\n\nexport const FeatureToast: FC<FeatureToastProps> = ({ center, ...rest }) => {\n return (\n <Toast\n className={classNames(Styles.featureToast, center && Styles.featureToastCenter)}\n {...rest}\n />\n );\n};\n"],"names":["classNames","Toast","Styles","FeatureToast","center","rest","className","featureToast","featureToastCenter"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AAEpC,SAASC,KAAK,QAAQ,8BAA8B;AACpD,YAAYC,YAAY,kCAAkC;AAM1D,OAAO,MAAMC,eAAsC,CAAC,EAAEC,MAAM,EAAE,GAAGC,MAAM;IACnE,qBACI,KAACJ;QACGK,WAAWN,WAAWE,OAAOK,YAAY,EAAEH,UAAUF,OAAOM,kBAAkB;QAC7E,GAAGH,IAAI;;AAGpB,EAAE"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { FC, SyntheticEvent, ReactNode } from 'react';
|
|
2
|
-
import { PopoverProps } from '@servicetitan/design-system';
|
|
1
|
+
import type { FC, SyntheticEvent, ReactNode } from 'react';
|
|
2
|
+
import type { PopoverProps } from '@servicetitan/design-system';
|
|
3
3
|
export interface TourPopoverProps extends PopoverProps {
|
|
4
4
|
children?: ReactNode;
|
|
5
5
|
currentStep?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tour-popover.d.ts","sourceRoot":"","sources":["../../src/components/tour-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"tour-popover.d.ts","sourceRoot":"","sources":["../../src/components/tour-popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAIhE,MAAM,WAAW,gBAAiB,SAAQ,YAAY;IAClD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACnD,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA4C5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/tour-popover.tsx"],"sourcesContent":["import { FC, SyntheticEvent, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/components/tour-popover.tsx"],"sourcesContent":["import type { FC, SyntheticEvent, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport type { PopoverProps } from '@servicetitan/design-system';\nimport { Stack, Headline, BodyText, Button, ButtonGroup } from '@servicetitan/design-system';\nimport * as Styles from '../feature-spotlight.module.css';\n\nexport interface TourPopoverProps extends PopoverProps {\n children?: ReactNode;\n currentStep?: number;\n endText?: string;\n headerText?: string;\n nextText?: string;\n onClose?: (e?: SyntheticEvent<HTMLElement>) => void;\n onNext?: (e?: SyntheticEvent<HTMLElement>) => void;\n totalStepCount?: number;\n}\n\nexport const TourPopover: FC<TourPopoverProps> = ({\n children,\n currentStep = 1,\n endText = 'Close',\n headerText,\n nextText = 'Next',\n onClose,\n onNext,\n totalStepCount = 1,\n}) => {\n return (\n <Stack\n direction=\"column\"\n className={classNames(\n Styles.featurePopover,\n 'Popper__body Popover__body Popover__body--open Popover--w-s p-x-3 p-y-2'\n )}\n >\n <Stack.Item className=\"m-t-half\">\n {headerText && <Headline size=\"small\">{headerText}</Headline>}\n {children}\n <Stack\n direction=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n className=\"m-t-2 m-b-half\"\n >\n <BodyText subdued>\n {currentStep + 1}/{totalStepCount}\n </BodyText>\n <ButtonGroup>\n {currentStep !== totalStepCount - 1 && (\n <Button fill=\"subtle\" size=\"small\" onClick={onClose}>\n Skip\n </Button>\n )}\n <Button size=\"small\" onClick={onNext} primary>\n {currentStep !== totalStepCount - 1 ? nextText : endText}\n </Button>\n </ButtonGroup>\n </Stack>\n </Stack.Item>\n </Stack>\n );\n};\n"],"names":["classNames","Stack","Headline","BodyText","Button","ButtonGroup","Styles","TourPopover","children","currentStep","endText","headerText","nextText","onClose","onNext","totalStepCount","direction","className","featurePopover","Item","size","alignItems","justifyContent","subdued","fill","onClick","primary"],"mappings":";AACA,OAAOA,gBAAgB,aAAa;AAEpC,SAASC,KAAK,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,WAAW,QAAQ,8BAA8B;AAC7F,YAAYC,YAAY,kCAAkC;AAa1D,OAAO,MAAMC,cAAoC,CAAC,EAC9CC,QAAQ,EACRC,cAAc,CAAC,EACfC,UAAU,OAAO,EACjBC,UAAU,EACVC,WAAW,MAAM,EACjBC,OAAO,EACPC,MAAM,EACNC,iBAAiB,CAAC,EACrB;IACG,qBACI,KAACd;QACGe,WAAU;QACVC,WAAWjB,WACPM,OAAOY,cAAc,EACrB;kBAGJ,cAAA,MAACjB,MAAMkB,IAAI;YAACF,WAAU;;gBACjBN,4BAAc,KAACT;oBAASkB,MAAK;8BAAST;;gBACtCH;8BACD,MAACP;oBACGe,WAAU;oBACVK,YAAW;oBACXC,gBAAe;oBACfL,WAAU;;sCAEV,MAACd;4BAASoB,OAAO;;gCACZd,cAAc;gCAAE;gCAAEM;;;sCAEvB,MAACV;;gCACII,gBAAgBM,iBAAiB,mBAC9B,KAACX;oCAAOoB,MAAK;oCAASJ,MAAK;oCAAQK,SAASZ;8CAAS;;8CAIzD,KAACT;oCAAOgB,MAAK;oCAAQK,SAASX;oCAAQY,OAAO;8CACxCjB,gBAAgBM,iBAAiB,IAAIH,WAAWF;;;;;;;;;AAO7E,EAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"feature-spotlight.stories.d.ts","sourceRoot":"","sources":["../src/feature-spotlight.stories.tsx"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"feature-spotlight.stories.d.ts","sourceRoot":"","sources":["../src/feature-spotlight.stories.tsx"],"names":[],"mappings":";;;AAsCA,wBAEE;AAEF,eAAO,MAAM,OAAO,+CA6GnB,CAAC;AAIF,eAAO,MAAM,KAAK;WAAU,GAAG;;;;;;;;;;CAA+B,CAAC;AA4B/D,eAAO,MAAM,KAAK,+CAkEjB,CAAC;AAqGF,eAAO,MAAM,IAAI,+CA6BhB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/feature-spotlight",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.9.0",
|
|
4
4
|
"description": "Provides specific styles to Anvil components to highlight a feature",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"src"
|
|
16
16
|
],
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@servicetitan/design-system": "~14.5.
|
|
18
|
+
"@servicetitan/design-system": "~14.5.3",
|
|
19
19
|
"@types/history": "~4.7.10",
|
|
20
20
|
"@types/react": "~18.2.55",
|
|
21
21
|
"@types/react-router": "^5.1.20",
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"cli": {
|
|
38
38
|
"webpack": false
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "dbd5a0ceb6d095a850191fe3539eaaad7ab6a779"
|
|
41
41
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import type { FC } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import {
|
|
3
|
+
import type { ModalProps } from '@servicetitan/design-system';
|
|
4
|
+
import { Modal } from '@servicetitan/design-system';
|
|
4
5
|
import * as Styles from '../feature-spotlight.module.css';
|
|
5
6
|
|
|
6
7
|
export const FeatureModal: FC<ModalProps> = ({ ...rest }) => {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import type { FC } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import {
|
|
3
|
+
import type { PopoverProps } from '@servicetitan/design-system';
|
|
4
|
+
import { Popover } from '@servicetitan/design-system';
|
|
4
5
|
import * as Styles from '../feature-spotlight.module.css';
|
|
5
6
|
|
|
6
7
|
export interface FeaturePopoverProps extends PopoverProps {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
1
|
+
import type { FC } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import {
|
|
3
|
+
import type { ToastProps } from '@servicetitan/design-system';
|
|
4
|
+
import { Toast } from '@servicetitan/design-system';
|
|
4
5
|
import * as Styles from '../feature-spotlight.module.css';
|
|
5
6
|
|
|
6
7
|
export interface FeatureToastProps extends ToastProps {
|
|
@@ -1,13 +1,7 @@
|
|
|
1
|
-
import { FC, SyntheticEvent, ReactNode } from 'react';
|
|
1
|
+
import type { FC, SyntheticEvent, ReactNode } from 'react';
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
Stack,
|
|
6
|
-
Headline,
|
|
7
|
-
BodyText,
|
|
8
|
-
Button,
|
|
9
|
-
ButtonGroup,
|
|
10
|
-
} from '@servicetitan/design-system';
|
|
3
|
+
import type { PopoverProps } from '@servicetitan/design-system';
|
|
4
|
+
import { Stack, Headline, BodyText, Button, ButtonGroup } from '@servicetitan/design-system';
|
|
11
5
|
import * as Styles from '../feature-spotlight.module.css';
|
|
12
6
|
|
|
13
7
|
export interface TourPopoverProps extends PopoverProps {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
// eslint-disable-next-line spaced-comment, @typescript-eslint/triple-slash-reference
|
|
2
2
|
/// <reference path="../storybook/index.d.ts" />
|
|
3
|
-
import { FC, PropsWithChildren, ReactNode
|
|
3
|
+
import type { FC, PropsWithChildren, ReactNode } from 'react';
|
|
4
|
+
import { memo, useCallback } from 'react';
|
|
4
5
|
import {
|
|
5
6
|
BodyText,
|
|
6
7
|
Stack,
|
|
@@ -22,7 +23,8 @@ import { TourPopover } from './components/tour-popover';
|
|
|
22
23
|
import geofence from '../storybook/geofence.png';
|
|
23
24
|
import dashboard from '../storybook/dashboard.png';
|
|
24
25
|
|
|
25
|
-
import {
|
|
26
|
+
import type { StepType } from '@reactour/tour';
|
|
27
|
+
import { TourProvider, useTour } from '@reactour/tour';
|
|
26
28
|
|
|
27
29
|
const image = {
|
|
28
30
|
src: geofence,
|