@servicetitan/feature-spotlight 3.3.0 → 3.4.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.js +6 -2
- package/dist/components/feature-modal.js.map +1 -1
- package/dist/components/feature-popover.js +23 -2
- package/dist/components/feature-popover.js.map +1 -1
- package/dist/components/feature-toast.js +6 -2
- package/dist/components/feature-toast.js.map +1 -1
- package/dist/components/tour-popover.js +49 -3
- package/dist/components/tour-popover.js.map +1 -1
- package/dist/feature-spotlight.module.css.d.ts +9 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/dist/feature-spotlight.stories.js +0 -91
- package/dist/feature-spotlight.stories.js.map +0 -1
|
@@ -2,7 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { Modal } from '@servicetitan/design-system';
|
|
4
4
|
import * as Styles from '../feature-spotlight.module.css';
|
|
5
|
-
export const FeatureModal = ({ ...rest })
|
|
6
|
-
return _jsx(Modal, {
|
|
5
|
+
export const FeatureModal = ({ ...rest })=>{
|
|
6
|
+
return /*#__PURE__*/ _jsx(Modal, {
|
|
7
|
+
className: classNames(Styles.featureModalHeader),
|
|
8
|
+
...rest
|
|
9
|
+
});
|
|
7
10
|
};
|
|
11
|
+
|
|
8
12
|
//# sourceMappingURL=feature-modal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../src/components/feature-modal.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport { Modal, ModalProps } 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;AACpC,SAASC,KAAK,QAAoB,8BAA8B;AAChE,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"}
|
|
@@ -2,7 +2,28 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { Popover } from '@servicetitan/design-system';
|
|
4
4
|
import * as Styles from '../feature-spotlight.module.css';
|
|
5
|
-
export const FeaturePopover = ({ children, footer, header, ...rest })
|
|
6
|
-
return
|
|
5
|
+
export const FeaturePopover = ({ children, footer, header, ...rest })=>{
|
|
6
|
+
return /*#__PURE__*/ _jsxs(Popover, {
|
|
7
|
+
className: classNames(Styles.featurePopover),
|
|
8
|
+
caret: {
|
|
9
|
+
show: true,
|
|
10
|
+
className: Styles.featurePopoverCaret
|
|
11
|
+
},
|
|
12
|
+
padding: "m",
|
|
13
|
+
...rest,
|
|
14
|
+
children: [
|
|
15
|
+
header && /*#__PURE__*/ _jsx(Popover.Header, {
|
|
16
|
+
className: classNames(Styles.featurePopoverHeader),
|
|
17
|
+
children: header
|
|
18
|
+
}),
|
|
19
|
+
children,
|
|
20
|
+
footer && /*#__PURE__*/ _jsx(Popover.Footer, {
|
|
21
|
+
className: classNames(Styles.featurePopoverFooter),
|
|
22
|
+
align: "right",
|
|
23
|
+
children: footer
|
|
24
|
+
})
|
|
25
|
+
]
|
|
26
|
+
});
|
|
7
27
|
};
|
|
28
|
+
|
|
8
29
|
//# sourceMappingURL=feature-popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../src/components/feature-popover.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport { Popover, PopoverProps } 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;AACpC,SAASC,OAAO,QAAsB,8BAA8B;AACpE,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"}
|
|
@@ -2,7 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import classNames from 'classnames';
|
|
3
3
|
import { Toast } from '@servicetitan/design-system';
|
|
4
4
|
import * as Styles from '../feature-spotlight.module.css';
|
|
5
|
-
export const FeatureToast = ({ center, ...rest })
|
|
6
|
-
return
|
|
5
|
+
export const FeatureToast = ({ center, ...rest })=>{
|
|
6
|
+
return /*#__PURE__*/ _jsx(Toast, {
|
|
7
|
+
className: classNames(Styles.featureToast, center && Styles.featureToastCenter),
|
|
8
|
+
...rest
|
|
9
|
+
});
|
|
7
10
|
};
|
|
11
|
+
|
|
8
12
|
//# sourceMappingURL=feature-toast.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../src/components/feature-toast.tsx"],"sourcesContent":["import { FC } from 'react';\nimport classNames from 'classnames';\nimport { Toast, ToastProps } 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;AACpC,SAASC,KAAK,QAAoB,8BAA8B;AAChE,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,8 +1,54 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import classNames from 'classnames';
|
|
3
|
-
import { Stack, Headline, BodyText, Button, ButtonGroup
|
|
3
|
+
import { Stack, Headline, BodyText, Button, ButtonGroup } from '@servicetitan/design-system';
|
|
4
4
|
import * as Styles from '../feature-spotlight.module.css';
|
|
5
|
-
export const TourPopover = ({ children, currentStep = 1, endText = 'Close', headerText, nextText = 'Next', onClose, onNext, totalStepCount = 1
|
|
6
|
-
return
|
|
5
|
+
export const TourPopover = ({ children, currentStep = 1, endText = 'Close', headerText, nextText = 'Next', onClose, onNext, totalStepCount = 1 })=>{
|
|
6
|
+
return /*#__PURE__*/ _jsx(Stack, {
|
|
7
|
+
direction: "column",
|
|
8
|
+
className: classNames(Styles.featurePopover, 'Popper__body Popover__body Popover__body--open Popover--w-s p-x-3 p-y-2'),
|
|
9
|
+
children: /*#__PURE__*/ _jsxs(Stack.Item, {
|
|
10
|
+
className: "m-t-half",
|
|
11
|
+
children: [
|
|
12
|
+
headerText && /*#__PURE__*/ _jsx(Headline, {
|
|
13
|
+
size: "small",
|
|
14
|
+
children: headerText
|
|
15
|
+
}),
|
|
16
|
+
children,
|
|
17
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
18
|
+
direction: "row",
|
|
19
|
+
alignItems: "center",
|
|
20
|
+
justifyContent: "space-between",
|
|
21
|
+
className: "m-t-2 m-b-half",
|
|
22
|
+
children: [
|
|
23
|
+
/*#__PURE__*/ _jsxs(BodyText, {
|
|
24
|
+
subdued: true,
|
|
25
|
+
children: [
|
|
26
|
+
currentStep + 1,
|
|
27
|
+
"/",
|
|
28
|
+
totalStepCount
|
|
29
|
+
]
|
|
30
|
+
}),
|
|
31
|
+
/*#__PURE__*/ _jsxs(ButtonGroup, {
|
|
32
|
+
children: [
|
|
33
|
+
currentStep !== totalStepCount - 1 && /*#__PURE__*/ _jsx(Button, {
|
|
34
|
+
fill: "subtle",
|
|
35
|
+
size: "small",
|
|
36
|
+
onClick: onClose,
|
|
37
|
+
children: "Skip"
|
|
38
|
+
}),
|
|
39
|
+
/*#__PURE__*/ _jsx(Button, {
|
|
40
|
+
size: "small",
|
|
41
|
+
onClick: onNext,
|
|
42
|
+
primary: true,
|
|
43
|
+
children: currentStep !== totalStepCount - 1 ? nextText : endText
|
|
44
|
+
})
|
|
45
|
+
]
|
|
46
|
+
})
|
|
47
|
+
]
|
|
48
|
+
})
|
|
49
|
+
]
|
|
50
|
+
})
|
|
51
|
+
});
|
|
7
52
|
};
|
|
53
|
+
|
|
8
54
|
//# sourceMappingURL=tour-popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../../src/components/tour-popover.tsx"],"sourcesContent":["import { FC, SyntheticEvent, ReactNode } from 'react';\nimport classNames from 'classnames';\nimport {\n PopoverProps,\n Stack,\n Headline,\n BodyText,\n Button,\n ButtonGroup,\n} 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;AACpC,SAEIC,KAAK,EACLC,QAAQ,EACRC,QAAQ,EACRC,MAAM,EACNC,WAAW,QACR,8BAA8B;AACrC,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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export const __esModule: true;
|
|
2
|
+
export const featureModalHeader: string;
|
|
3
|
+
export const featurePopover: string;
|
|
4
|
+
export const featurePopoverCaret: string;
|
|
5
|
+
export const featurePopoverFooter: string;
|
|
6
|
+
export const featurePopoverHeader: string;
|
|
7
|
+
export const featureToast: string;
|
|
8
|
+
export const featureToastCenter: string;
|
|
9
|
+
|
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export * from './components/feature-popover';\nexport * from './components/feature-modal';\nexport * from './components/feature-toast';\n"],"names":[],"mappings":"AAAA,cAAc,+BAA+B;AAC7C,cAAc,6BAA6B;AAC3C,cAAc,6BAA6B"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@servicetitan/feature-spotlight",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"description": "Provides specific styles to Anvil components to highlight a feature",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"@types/history": "~4.7.10",
|
|
20
20
|
"@types/react": "~18.2.55",
|
|
21
21
|
"@types/react-router": "~5.1.17",
|
|
22
|
-
"react": "
|
|
22
|
+
"react": "^18.2.0",
|
|
23
23
|
"react-dom": "~18.2.0"
|
|
24
24
|
},
|
|
25
25
|
"peerDependencies": {
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@reactour/tour": "^3.1.4",
|
|
32
|
-
"classnames": "
|
|
32
|
+
"classnames": "^2.3.1"
|
|
33
33
|
},
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"cli": {
|
|
38
38
|
"webpack": false
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "7fc7b9cbf766fe23879ae81831f28bdd96559bce"
|
|
41
41
|
}
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
// eslint-disable-next-line spaced-comment, @typescript-eslint/triple-slash-reference
|
|
3
|
-
/// <reference path="../../../storybook-static/index.d.ts" />
|
|
4
|
-
import { memo, useCallback } from 'react';
|
|
5
|
-
import { BodyText, Stack, Button, ButtonGroup, Link, Checkbox, Toast, Frame, Headline, Page, Layout, Card, } from '@servicetitan/design-system';
|
|
6
|
-
import { FeaturePopover } from './components/feature-popover';
|
|
7
|
-
import { FeatureModal } from './components/feature-modal';
|
|
8
|
-
import { FeatureToast } from './components/feature-toast';
|
|
9
|
-
import { TourPopover } from './components/tour-popover';
|
|
10
|
-
import geofence from '../../../storybook-static/geofence.png';
|
|
11
|
-
import dashboard from '../../../storybook-static/dashboard.png';
|
|
12
|
-
import { TourProvider, useTour } from '@reactour/tour';
|
|
13
|
-
const image = {
|
|
14
|
-
src: geofence,
|
|
15
|
-
alt: 'alt text description',
|
|
16
|
-
};
|
|
17
|
-
const imageDashboard = {
|
|
18
|
-
src: dashboard,
|
|
19
|
-
alt: 'alt text description',
|
|
20
|
-
};
|
|
21
|
-
export default {
|
|
22
|
-
title: 'Feature Spotlight/Demos',
|
|
23
|
-
};
|
|
24
|
-
export const Popover = () => (_jsxs(Stack, { direction: "column", spacing: 5, alignItems: "center", justifyContent: "center", className: "p-4", style: { height: '800px' }, children: [_jsx(FeaturePopover, { trigger: _jsx(Button, { inactive: true, children: "Top" }), open: true, direction: "t", header: "\uD83D\uDC4B Bills has moved", footer: _jsx(ButtonGroup, { children: _jsx(Button, { small: true, primary: true, children: "Take me there" }) }), footerAlign: "right", offset: { distance: 200 }, children: _jsxs(Stack, { spacing: 1, direction: "column", children: [_jsxs(BodyText, { size: "small", children: ["Bills has a new home in Accounting. It is still the same feature you know and love except now something goes here.", _jsx(Link, { primary: true, children: "Learn More" })] }), _jsx(Checkbox, { size: "small", label: "Don\u2019t show me again" })] }) }), _jsx(FeaturePopover, { trigger: _jsx(Button, { inactive: true, children: "Right" }), open: true, direction: "r", header: "\uD83D\uDC4B Bills has moved", footer: _jsx(ButtonGroup, { children: _jsx(Button, { small: true, primary: true, children: "Take me there" }) }), footerAlign: "right", offset: { distance: 200 }, children: _jsxs(Stack, { spacing: 1, direction: "column", children: [_jsxs(BodyText, { size: "small", children: ["Bills has a new home in Accounting. It is still the same feature you know and love except now something goes here.", _jsx(Link, { primary: true, children: "Learn More" })] }), _jsx(Checkbox, { size: "small", label: "Don\u2019t show me again" })] }) }), _jsx(FeaturePopover, { trigger: _jsx(Button, { inactive: true, children: "Left" }), open: true, direction: "l", header: "\uD83D\uDC4B Bills has moved", footer: _jsx(ButtonGroup, { children: _jsx(Button, { small: true, primary: true, children: "Take me there" }) }), footerAlign: "right", offset: { distance: 200 }, children: _jsxs(Stack, { spacing: 1, direction: "column", children: [_jsxs(BodyText, { size: "small", children: ["Bills has a new home in Accounting. It is still the same feature you know and love except now something goes here.", _jsx(Link, { primary: true, children: "Learn More" })] }), _jsx(Checkbox, { size: "small", label: "Don\u2019t show me again" })] }) }), _jsx(FeaturePopover, { trigger: _jsx(Button, { inactive: true, children: "Bottom" }), open: true, direction: "b", header: "\uD83D\uDC4B Bills has moved", footer: _jsx(ButtonGroup, { children: _jsx(Button, { small: true, primary: true, children: "Take me there" }) }), footerAlign: "right", offset: { distance: 200 }, children: _jsxs(Stack, { spacing: 1, direction: "column", children: [_jsxs(BodyText, { size: "small", children: ["Bills has a new home in Accounting. It is still the same feature you know and love except now something goes here.", _jsx(Link, { primary: true, children: "Learn More" })] }), _jsx(Checkbox, { size: "small", label: "Don\u2019t show me again" })] }) })] }));
|
|
25
|
-
const closeMethod = () => alert('closing');
|
|
26
|
-
export const modal = (args) => _jsx(FeatureModal, { ...args });
|
|
27
|
-
modal.args = {
|
|
28
|
-
open: true,
|
|
29
|
-
title: 'FleetPro Has Launched!',
|
|
30
|
-
closable: true,
|
|
31
|
-
onClose: closeMethod,
|
|
32
|
-
scrollable: true,
|
|
33
|
-
children: (_jsxs(Stack, { direction: "column", alignItems: "center", spacing: 4, children: [_jsx("img", { src: image.src, alt: image.alt, className: "p-t-4" }), _jsxs(BodyText, { size: "large", className: "ta-center", children: ["We\u2019re excited to announce that FleetPro is now live in ServiceTitan! With FleetPro, you can manage and track your company\u2019s vehicles all in one place. Add FleetPro to your existing tenant now for $100 /mo or view the", ' ', _jsx(Link, { primary: true, children: "Knowledge Base" }), " to learn more."] })] })),
|
|
34
|
-
footer: (_jsxs(ButtonGroup, { children: [_jsx(Button, { onClick: closeMethod, children: "No, Thank You" }), _jsx(Button, { primary: true, onClick: closeMethod, children: "Add FleetPro Now" })] })),
|
|
35
|
-
};
|
|
36
|
-
export const toast = () => {
|
|
37
|
-
return (_jsx(Frame, { children: _jsxs(Toast.Group, { children: [_jsx(FeatureToast, { title: "\u2728 This page has a new look and feel", onPrimaryActionClick: () => { }, primaryActionName: "Got it", onSecondaryActionClick: () => { }, secondaryActionName: "Revert to Old View", onClose: closeMethod, portal: false, children: _jsx(BodyText, { children: "We\u2019ve updated this page with some cool stuff...but if you don\u2019t like it you can go back to the old one for now. This can be changed later in settings." }) }), _jsx(Toast, { status: "info", title: "Ordinary toast", portal: false, children: "In progress" }), _jsx(FeatureToast, { center: true, title: "Dashboards", onPrimaryActionClick: () => { }, primaryActionName: "Learn more", onClose: closeMethod, portal: false, children: _jsxs(Stack, { direction: "column", spacing: 2, alignItems: "center", children: [_jsx("img", { src: imageDashboard.src, alt: image.alt, width: "166px", className: "p-t-1" }), _jsx(BodyText, { children: "We noticed you don\u2019t really use this thing, but did you know it could increase your profit margins by 10%?" })] }) }), _jsx(FeatureToast, { center: true, title: "Slightly longer line that wraps to a second", onPrimaryActionClick: () => { }, primaryActionName: "Learn More", onClose: closeMethod, portal: false, children: _jsxs(Stack, { direction: "column", spacing: 2, alignItems: "center", children: [_jsx("img", { src: imageDashboard.src, alt: image.alt, width: "166px", className: "p-t-1" }), _jsx(BodyText, { children: "We noticed you don\u2019t really use this thing, but did you know it could increase your profit margins by 10%?" })] }) })] }) }));
|
|
38
|
-
};
|
|
39
|
-
const InternalTourControls = memo(({ children, headerText }) => {
|
|
40
|
-
const { setCurrentStep, currentStep, steps, setIsOpen } = useTour();
|
|
41
|
-
const handleClose = useCallback(() => {
|
|
42
|
-
setIsOpen(false);
|
|
43
|
-
}, [setIsOpen]);
|
|
44
|
-
const handleNext = useCallback(() => {
|
|
45
|
-
if (currentStep === steps.length - 1) {
|
|
46
|
-
handleClose();
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
setCurrentStep(currentStep + 1);
|
|
50
|
-
}
|
|
51
|
-
}, [currentStep, handleClose, setCurrentStep, steps.length]);
|
|
52
|
-
return (_jsx(TourPopover, { currentStep: currentStep, onClose: handleClose, onNext: handleNext, totalStepCount: steps.length, headerText: headerText, children: children }));
|
|
53
|
-
});
|
|
54
|
-
const ReactTour = ({ children }) => {
|
|
55
|
-
const steps = [
|
|
56
|
-
{
|
|
57
|
-
selector: '.step-1',
|
|
58
|
-
content: (_jsxs(InternalTourControls, { headerText: "\u26A0\uFE0F This is now a required field", children: [_jsx(BodyText, { size: "small", className: "m-b-2", children: "You must now select a date range beforehand because of reasons." }), _jsx(BodyText, { size: "small", children: _jsx(Link, { primary: true, children: "Learn More" }) })] })),
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
selector: '.step-2',
|
|
62
|
-
content: _jsx(InternalTourControls, { headerText: "Give it up for step 2" }),
|
|
63
|
-
},
|
|
64
|
-
{
|
|
65
|
-
selector: '.step-3',
|
|
66
|
-
content: (_jsx(InternalTourControls, { children: "This is the final step with just body text." })),
|
|
67
|
-
},
|
|
68
|
-
];
|
|
69
|
-
const styles = {
|
|
70
|
-
popover: (base) => ({
|
|
71
|
-
...base,
|
|
72
|
-
borderRadius: '6px',
|
|
73
|
-
padding: 'inherit',
|
|
74
|
-
margin: 'inherit',
|
|
75
|
-
maxWidth: 'inherit',
|
|
76
|
-
}),
|
|
77
|
-
};
|
|
78
|
-
return (_jsx(TourProvider, { defaultOpen: true, steps: steps, showBadge: false, showPrevNextButtons: false, showCloseButton: false, showNavigation: false, showDots: false, styles: styles, children: children }));
|
|
79
|
-
};
|
|
80
|
-
const StartTourButton = () => {
|
|
81
|
-
const { setIsOpen, setCurrentStep } = useTour();
|
|
82
|
-
const handleTourClick = useCallback(() => {
|
|
83
|
-
setCurrentStep(0);
|
|
84
|
-
setIsOpen(true);
|
|
85
|
-
}, [setCurrentStep, setIsOpen]);
|
|
86
|
-
return _jsx(Button, { onClick: handleTourClick, children: "Start Tour" });
|
|
87
|
-
};
|
|
88
|
-
export const tour = () => {
|
|
89
|
-
return (_jsx(Frame, { children: _jsx(ReactTour, { children: _jsx(Page, { header: _jsxs(Stack, { justifyContent: "space-between", alignItems: "center", children: [_jsx(Headline, { size: "large", className: "step-3", children: "Page Title" }), _jsx(StartTourButton, {})] }), children: _jsxs(Layout, { type: "3Col", children: [_jsx(Layout.Section, { children: _jsx(Card, { className: "step-1", children: "Card 1" }) }), _jsx(Layout.Section, { children: _jsx(Card, { className: "step-2", children: "Card 2" }) }), _jsx(Layout.Section, { children: _jsx(Card, { children: "Card 3" }) })] }) }) }) }));
|
|
90
|
-
};
|
|
91
|
-
//# sourceMappingURL=feature-spotlight.stories.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"feature-spotlight.stories.js","sourceRoot":"","sources":["../src/feature-spotlight.stories.tsx"],"names":[],"mappings":"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"}
|