@servicetitan/feature-spotlight 1.1.0

package/dist/bundle/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>ServiceTitan</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="runtime.fc8958b2.bundle.js?bd39b39acdeeee4ffef3"></script><script defer="defer" src="main.7cdd1723.bundle.js?bd39b39acdeeee4ffef3"></script></head><body></body></html>

package/dist/bundle/main.7cdd1723.bundle.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunk_servicetitan_feature_spotlight=self.webpackChunk_servicetitan_feature_spotlight||[]).push([[0],[()=>{}],e=>{e(e.s=0)}]);

package/dist/bundle/runtime.fc8958b2.bundle.js

@@ -0,0 +1,2 @@
+(()=>{"use strict";var r,e={},t={};function o(r){var i=t[r];if(void 0!==i)return i.exports;var n=t[r]={exports:{}};return e[r](n,n.exports,o),n.exports}o.m=e,r=[],o.O=(e,t,i,n)=>{if(!t){var a=1/0;for(v=0;v<r.length;v++){for(var[t,i,n]=r[v],s=!0,f=0;f<t.length;f++)(!1&n||a>=n)&&Object.keys(o.O).every((r=>o.O[r](t[f])))?t.splice(f--,1):(s=!1,n<a&&(a=n));if(s){r.splice(v--,1);var l=i();void 0!==l&&(e=l)}}return e}n=n||0;for(var v=r.length;v>0&&r[v-1][2]>n;v--)r[v]=r[v-1];r[v]=[t,i,n]},o.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),(()=>{var r={1:0};o.O.j=e=>0===r[e];var e=(e,t)=>{var i,n,[a,s,f]=t,l=0;if(a.some((e=>0!==r[e]))){for(i in s)o.o(s,i)&&(o.m[i]=s[i]);if(f)var v=f(o)}for(e&&e(t);l<a.length;l++)n=a[l],o.o(r,n)&&r[n]&&r[n][0](),r[n]=0;return o.O(v)},t=self.webpackChunk_servicetitan_feature_spotlight=self.webpackChunk_servicetitan_feature_spotlight||[];t.forEach(e.bind(null,0)),t.push=e.bind(null,t.push.bind(t))})()})();
+//# sourceMappingURL=runtime.fc8958b2.bundle.js.map

package/dist/bundle/runtime.fc8958b2.bundle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.fc8958b2.bundle.js","mappings":"uBAAIA,E,KCCAC,EAA2B,CAAC,EAGhC,SAASC,EAAoBC,GAE5B,IAAIC,EAAeH,EAAyBE,GAC5C,QAAqBE,IAAjBD,EACH,OAAOA,EAAaE,QAGrB,IAAIC,EAASN,EAAyBE,GAAY,CAGjDG,QAAS,CAAC,GAOX,OAHAE,EAAoBL,GAAUI,EAAQA,EAAOD,QAASJ,GAG/CK,EAAOD,OACf,CAGAJ,EAAoBO,EAAID,EDzBpBR,EAAW,GACfE,EAAoBQ,EAAI,CAACC,EAAQC,EAAUC,EAAIC,KAC9C,IAAGF,EAAH,CAMA,IAAIG,EAAeC,IACnB,IAASC,EAAI,EAAGA,EAAIjB,EAASkB,OAAQD,IAAK,CAGzC,IAFA,IAAKL,EAAUC,EAAIC,GAAYd,EAASiB,GACpCE,GAAY,EACPC,EAAI,EAAGA,EAAIR,EAASM,OAAQE,MACpB,EAAXN,GAAsBC,GAAgBD,IAAaO,OAAOC,KAAKpB,EAAoBQ,GAAGa,OAAOC,GAAStB,EAAoBQ,EAAEc,GAAKZ,EAASQ,MAC9IR,EAASa,OAAOL,IAAK,IAErBD,GAAY,EACTL,EAAWC,IAAcA,EAAeD,IAG7C,GAAGK,EAAW,CACbnB,EAASyB,OAAOR,IAAK,GACrB,IAAIS,EAAIb,SACER,IAANqB,IAAiBf,EAASe,EAC/B,CACD,CACA,OAAOf,CAnBP,CAJCG,EAAWA,GAAY,EACvB,IAAI,IAAIG,EAAIjB,EAASkB,OAAQD,EAAI,GAAKjB,EAASiB,EAAI,GAAG,GAAKH,EAAUG,IAAKjB,EAASiB,GAAKjB,EAASiB,EAAI,GACrGjB,EAASiB,GAAK,CAACL,EAAUC,EAAIC,EAqBjB,EE1BdZ,EAAoByB,EAAI,CAACC,EAAKC,IAAUR,OAAOS,UAAUC,eAAeC,KAAKJ,EAAKC,G,MCKlF,IAAII,EAAkB,CACrB,EAAG,GAaJ/B,EAAoBQ,EAAEU,EAAKc,GAA0C,IAA7BD,EAAgBC,GAGxD,IAAIC,EAAuB,CAACC,EAA4BC,KACvD,IAGIlC,EAAU+B,GAHTtB,EAAU0B,EAAaC,GAAWF,EAGhBpB,EAAI,EAC3B,GAAGL,EAAS4B,MAAMC,GAAgC,IAAxBR,EAAgBQ,KAAa,CACtD,IAAItC,KAAYmC,EACZpC,EAAoByB,EAAEW,EAAanC,KACrCD,EAAoBO,EAAEN,GAAYmC,EAAYnC,IAGhD,GAAGoC,EAAS,IAAI5B,EAAS4B,EAAQrC,EAClC,CAEA,IADGkC,GAA4BA,EAA2BC,GACrDpB,EAAIL,EAASM,OAAQD,IACzBiB,EAAUtB,EAASK,GAChBf,EAAoByB,EAAEM,EAAiBC,IAAYD,EAAgBC,IACrED,EAAgBC,GAAS,KAE1BD,EAAgBC,GAAW,EAE5B,OAAOhC,EAAoBQ,EAAEC,EAAO,EAGjC+B,EAAqBC,KAAkD,4CAAIA,KAAkD,6CAAK,GACtID,EAAmBE,QAAQT,EAAqBU,KAAK,KAAM,IAC3DH,EAAmBI,KAAOX,EAAqBU,KAAK,KAAMH,EAAmBI,KAAKD,KAAKH,G","sources":["webpack://@servicetitan/feature-spotlight/webpack/runtime/chunk loaded","webpack://@servicetitan/feature-spotlight/webpack/bootstrap","webpack://@servicetitan/feature-spotlight/webpack/runtime/hasOwnProperty shorthand","webpack://@servicetitan/feature-spotlight/webpack/runtime/jsonp chunk loading"],"sourcesContent":["var deferred = [];\n__webpack_require__.O = (result, chunkIds, fn, priority) => {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar [chunkIds, fn, priority] = deferred[i];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t1: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = (parentChunkLoadingFunction, data) => {\n\tvar [chunkIds, moreModules, runtime] = data;\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some((id) => (installedChunks[id] !== 0))) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunk_servicetitan_feature_spotlight\"] = self[\"webpackChunk_servicetitan_feature_spotlight\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));"],"names":["deferred","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","exports","module","__webpack_modules__","m","O","result","chunkIds","fn","priority","notFulfilled","Infinity","i","length","fulfilled","j","Object","keys","every","key","splice","r","o","obj","prop","prototype","hasOwnProperty","call","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","data","moreModules","runtime","some","id","chunkLoadingGlobal","self","forEach","bind","push"],"sourceRoot":""}

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@servicetitan/feature-spotlight",
+    "version": "1.1.0",
+    "description": "Provides specific styles to Anvil components to highlight a feature",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/servicetitan/anvil-uikit-contrib",
+        "directory": "packages/marketing-ui"
+    },
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "sideEffects": false,
+    "files": [
+        "dist",
+        "src"
+    ],
+    "devDependencies": {
+        "@servicetitan/design-system": ">=12.4.1",
+        "@types/history": "~4.7.10",
+        "@types/react": "~17.0.38",
+        "@types/react-router": "~5.1.17",
+        "react": "~17.0.2",
+        "react-router-dom": "~5.3.0"
+    },
+    "peerDependencies": {
+        "@servicetitan/design-system": ">=12.4.1",
+        "react": "~17.0.2",
+        "react-router-dom": "~5.3.0"
+    },
+    "dependencies": {
+        "@reactour/tour": "^3.1.4",
+        "classnames": "~2.3.1"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "1acc525c3516017ff8dc26cfe8a3988ec76678d4"
+}

package/src/components/feature-modal.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+import { Modal, ModalProps } from '@servicetitan/design-system';
+import * as Styles from '../feature-spotlight.module.css';
+
+export const FeatureModal: FC<ModalProps> = ({ ...rest }) => {
+    return <Modal className={classNames(Styles.featureModalHeader)} {...rest} />;
+};

package/src/components/feature-popover.tsx

@@ -0,0 +1,33 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+import { Popover, PopoverProps } from '@servicetitan/design-system';
+import * as Styles from '../feature-spotlight.module.css';
+
+export interface FeaturePopoverProps extends PopoverProps {
+    footer?: PopoverProps['footer'];
+    header?: PopoverProps['header'];
+    children?: PopoverProps['children'];
+}
+
+export const FeaturePopover: FC<FeaturePopoverProps> = ({ children, footer, header, ...rest }) => {
+    return (
+        <Popover
+            className={classNames(Styles.featurePopover)}
+            caret={{ show: true, className: Styles.featurePopoverCaret }}
+            padding="m"
+            {...rest}
+        >
+            {header && (
+                <Popover.Header className={classNames(Styles.featurePopoverHeader)}>
+                    {header}
+                </Popover.Header>
+            )}
+            {children}
+            {footer && (
+                <Popover.Footer className={classNames(Styles.featurePopoverFooter)} align="right">
+                    {footer}
+                </Popover.Footer>
+            )}
+        </Popover>
+    );
+};

package/src/components/feature-toast.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import classNames from 'classnames';
+import { Toast, ToastProps } from '@servicetitan/design-system';
+import * as Styles from '../feature-spotlight.module.css';
+
+export interface FeatureToastProps extends ToastProps {
+    center?: boolean;
+}
+
+export const FeatureToast: FC<FeatureToastProps> = ({ center, ...rest }) => {
+    return (
+        <Toast
+            className={classNames(Styles.featureToast, center && Styles.featureToastCenter)}
+            {...rest}
+        />
+    );
+};

package/src/components/tour-popover.tsx

@@ -0,0 +1,68 @@
+import { FC, SyntheticEvent, ReactNode } from 'react';
+import classNames from 'classnames';
+import {
+    PopoverProps,
+    Stack,
+    Headline,
+    BodyText,
+    Button,
+    ButtonGroup,
+} from '@servicetitan/design-system';
+import * as Styles from '../feature-spotlight.module.css';
+
+export interface TourPopoverProps extends PopoverProps {
+    children?: ReactNode;
+    currentStep?: number;
+    endText?: string;
+    headerText?: string;
+    nextText?: string;
+    onClose?: (e?: SyntheticEvent<HTMLElement>) => void;
+    onNext?: (e?: SyntheticEvent<HTMLElement>) => void;
+    totalStepCount?: number;
+}
+
+export const TourPopover: FC<TourPopoverProps> = ({
+    children,
+    currentStep = 1,
+    endText = 'Close',
+    headerText,
+    nextText = 'Next',
+    onClose,
+    onNext,
+    totalStepCount = 1,
+}) => {
+    return (
+        <Stack
+            direction="column"
+            className={classNames(
+                Styles.featurePopover,
+                'Popper__body Popover__body Popover__body--open Popover--w-s p-x-3 p-y-2'
+            )}
+        >
+            <Stack.Item className="m-t-half">
+                {headerText && <Headline size="small">{headerText}</Headline>}
+                {children}
+                <Stack
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="space-between"
+                    className="m-t-2 m-b-half"
+                >
+                    <BodyText subdued>
+                        {currentStep + 1}/{totalStepCount}
+                    </BodyText>
+                    <ButtonGroup>
+                        {currentStep !== totalStepCount - 1 && (
+                            <Button fill="subtle" size="small" onClick={onClose}>
+                                Skip
+                            </Button>
+                        )}
+                        <Button size="small" onClick={onNext} primary>
+                            {currentStep !== totalStepCount - 1 ? nextText : endText}
+                        </Button>
+                    </ButtonGroup>
+                </Stack>
+            </Stack.Item>
+        </Stack>
+    );
+};

package/src/feature-spotlight.module.css

@@ -0,0 +1,74 @@
+/* Popover-specific */
+
+.feature-popover {
+    border-color: var(--colorsSurfacePrimarySubdued, var(--color-blue));
+}
+
+.feature-popover .featurePopoverHeader {
+    border: none;
+    padding: var(--spacing-half) 0 var(--spacing-1);
+}
+
+.feature-popover .featurePopoverFooter {
+    border: none;
+    padding: var(--spacing-2) 0 var(--spacing-half);
+}
+
+.feature-popover-caret::before {
+    background: var(--colorsSurfaceDefault, var(--color-white));
+    box-shadow: -1px 1px var(--colorsSurfacePrimarySubdued, var(--color-blue));
+}
+
+/* Creates the Popover caret's border, which changes based on the position of the caret */
+
+[data-popper-placement^='top'] .feature-popover-caret::before {
+    box-shadow: 1px 1px var(--colorsSurfacePrimarySubdued, var(--color-blue));
+}
+
+[data-popper-placement^='bottom'] .feature-popover-caret::before {
+    box-shadow: -1px -1px var(--colorsSurfacePrimarySubdued, var(--color-blue));
+}
+
+[data-popper-placement^='right'] .feature-popover-caret::before {
+    box-shadow: -1px 1px var(--colorsSurfacePrimarySubdued, var(--color-blue));
+}
+
+[data-popper-placement^='left'] .feature-popover-caret::before {
+    box-shadow: 1px -1px var(--colorsSurfacePrimarySubdued, var(--color-blue));
+}
+
+/* Modal-specific */
+.feature-modal-header :global(.Modal__header) {
+    background: var(--colorsSurfacePrimarySubdued, var(--color-blue));
+    color: white;
+    fill: white;
+}
+.feature-modal-header :global(.Modal__header > *) {
+    color: var(--colorsTextInverted, var(--color-white));
+    fill: var(--colorsTextInverted, var(--color-white));
+}
+
+/* Toast-specific */
+.feature-toast {
+    border-color: var(--colorsSurfacePrimarySubdued, var(--color-blue));
+}
+.feature-toast :global(.Toast__icon) {
+    display: none;
+}
+.feature-toast :global(.Toast__text) {
+    min-width: auto;
+}
+.feature-toast :global(.Toast__title) {
+    color: var(--colorsText, var(--color-black));
+}
+
+.feature-toast-center {
+    text-align: center;
+}
+.feature-toast-center :global(.Toast__action) {
+    text-align: center;
+}
+
+.feature-toast-center :global(.Toast__title) {
+    padding-left: var(--spacing-5);
+}

package/src/feature-spotlight.module.css.d.ts

@@ -0,0 +1,9 @@
+export const __esModule: true;
+export const featurePopover: string;
+export const featurePopoverHeader: string;
+export const featurePopoverFooter: string;
+export const featurePopoverCaret: string;
+export const featureModalHeader: string;
+export const featureToast: string;
+export const featureToastCenter: string;
+

package/src/feature-spotlight.stories.tsx

@@ -0,0 +1,378 @@
+import React, { FC } from 'react';
+import {
+    BodyText,
+    Stack,
+    Button,
+    ButtonGroup,
+    Link,
+    Checkbox,
+    Toast,
+    Frame,
+    Headline,
+    Page,
+    Layout,
+    Card,
+} from '@servicetitan/design-system';
+import { FeaturePopover } from './components/feature-popover';
+import { FeatureModal } from './components/feature-modal';
+import { FeatureToast } from './components/feature-toast';
+import { TourPopover } from './components/tour-popover';
+import geofence from '../../../storybook-static/geofence.png';
+import dashboard from '../../../storybook-static/dashboard.png';
+
+import { TourProvider, StepType, useTour } from '@reactour/tour';
+
+const image = {
+    src: geofence,
+    alt: 'alt text description',
+};
+
+const imageDashboard = {
+    src: dashboard,
+    alt: 'alt text description',
+};
+
+export default {
+    title: 'Feature Spotlight/Demos',
+};
+
+export const Popover = () => (
+    <React.Fragment>
+        <Stack
+            direction="column"
+            spacing={5}
+            alignItems="center"
+            justifyContent="center"
+            className="p-4"
+            style={{ height: '800px' }}
+        >
+            <FeaturePopover
+                trigger={<Button inactive>Top</Button>}
+                open
+                direction="t"
+                header="👋 Bills has moved"
+                footer={
+                    <ButtonGroup>
+                        <Button small primary>
+                            Take me there
+                        </Button>
+                    </ButtonGroup>
+                }
+                footerAlign="right"
+                offset={{ distance: 200 }}
+            >
+                <Stack spacing={1} direction="column">
+                    <BodyText size="small">
+                        Bills has a new home in Accounting. It is still the same feature you know
+                        and love except now something goes here.
+                        <Link primary>Learn More</Link>
+                    </BodyText>
+                    <Checkbox size="small" label="Don’t show me again" />
+                </Stack>
+            </FeaturePopover>
+
+            <FeaturePopover
+                trigger={<Button inactive>Right</Button>}
+                open
+                direction="r"
+                header="👋 Bills has moved"
+                footer={
+                    <ButtonGroup>
+                        <Button small primary>
+                            Take me there
+                        </Button>
+                    </ButtonGroup>
+                }
+                footerAlign="right"
+                offset={{ distance: 200 }}
+            >
+                <Stack spacing={1} direction="column">
+                    <BodyText size="small">
+                        Bills has a new home in Accounting. It is still the same feature you know
+                        and love except now something goes here.
+                        <Link primary>Learn More</Link>
+                    </BodyText>
+                    <Checkbox size="small" label="Don’t show me again" />
+                </Stack>
+            </FeaturePopover>
+
+            <FeaturePopover
+                trigger={<Button inactive>Left</Button>}
+                open
+                direction="l"
+                header="👋 Bills has moved"
+                footer={
+                    <ButtonGroup>
+                        <Button small primary>
+                            Take me there
+                        </Button>
+                    </ButtonGroup>
+                }
+                footerAlign="right"
+                offset={{ distance: 200 }}
+            >
+                <Stack spacing={1} direction="column">
+                    <BodyText size="small">
+                        Bills has a new home in Accounting. It is still the same feature you know
+                        and love except now something goes here.
+                        <Link primary>Learn More</Link>
+                    </BodyText>
+                    <Checkbox size="small" label="Don’t show me again" />
+                </Stack>
+            </FeaturePopover>
+
+            <FeaturePopover
+                trigger={<Button inactive>Bottom</Button>}
+                open
+                direction="b"
+                header="👋 Bills has moved"
+                footer={
+                    <ButtonGroup>
+                        <Button small primary>
+                            Take me there
+                        </Button>
+                    </ButtonGroup>
+                }
+                footerAlign="right"
+                offset={{ distance: 200 }}
+            >
+                <Stack spacing={1} direction="column">
+                    <BodyText size="small">
+                        Bills has a new home in Accounting. It is still the same feature you know
+                        and love except now something goes here.
+                        <Link primary>Learn More</Link>
+                    </BodyText>
+                    <Checkbox size="small" label="Don’t show me again" />
+                </Stack>
+            </FeaturePopover>
+        </Stack>
+    </React.Fragment>
+);
+
+const closeMethod = () => alert('closing');
+
+export const modal = (args: any) => <FeatureModal {...args} />;
+modal.args = {
+    open: true,
+    title: 'FleetPro Has Launched!',
+    closable: true,
+    onClose: closeMethod,
+    scrollable: true,
+    children: (
+        <Stack direction="column" alignItems="center" spacing={4}>
+            <img src={image.src} alt={image.alt} className="p-t-4" />
+            <BodyText size="large" className="ta-center">
+                We’re excited to announce that FleetPro is now live in ServiceTitan! With FleetPro,
+                you can manage and track your company’s vehicles all in one place. Add FleetPro to
+                your existing tenant now for $100 /mo or view the{' '}
+                <Link primary>Knowledge Base</Link> to learn more.
+            </BodyText>
+        </Stack>
+    ),
+    footer: (
+        <ButtonGroup>
+            <Button onClick={closeMethod}>No, Thank You</Button>
+            <Button primary onClick={closeMethod}>
+                Add FleetPro Now
+            </Button>
+        </ButtonGroup>
+    ),
+};
+
+export const toast = () => {
+    return (
+        <Frame>
+            <Toast.Group>
+                <FeatureToast
+                    title="✨ This page has a new look and feel"
+                    onPrimaryActionClick={() => {}}
+                    primaryActionName="Got it"
+                    onSecondaryActionClick={() => {}}
+                    secondaryActionName="Revert to Old View"
+                    onClose={closeMethod}
+                    portal={false}
+                >
+                    <BodyText>
+                        We’ve updated this page with some cool stuff...but if you don’t like it you
+                        can go back to the old one for now. This can be changed later in settings.
+                    </BodyText>
+                </FeatureToast>
+                <Toast status="info" title="Ordinary toast" portal={false}>
+                    In progress
+                </Toast>
+                <FeatureToast
+                    center
+                    title="Dashboards"
+                    onPrimaryActionClick={() => {}}
+                    primaryActionName="Learn more"
+                    onClose={closeMethod}
+                    portal={false}
+                >
+                    <Stack direction="column" spacing={2} alignItems="center">
+                        <img
+                            src={imageDashboard.src}
+                            alt={image.alt}
+                            width="166px"
+                            className="p-t-1"
+                        />
+                        <BodyText>
+                            We noticed you don’t really use this thing, but did you know it could
+                            increase your profit margins by 10%?
+                        </BodyText>
+                    </Stack>
+                </FeatureToast>
+                <FeatureToast
+                    center
+                    title="Slightly longer line that wraps to a second"
+                    onPrimaryActionClick={() => {}}
+                    primaryActionName="Learn More"
+                    onClose={closeMethod}
+                    portal={false}
+                >
+                    <Stack direction="column" spacing={2} alignItems="center">
+                        <img
+                            src={imageDashboard.src}
+                            alt={image.alt}
+                            width="166px"
+                            className="p-t-1"
+                        />
+                        <BodyText>
+                            We noticed you don’t really use this thing, but did you know it could
+                            increase your profit margins by 10%?
+                        </BodyText>
+                    </Stack>
+                </FeatureToast>
+            </Toast.Group>
+        </Frame>
+    );
+};
+
+interface InternalTourProps {
+    children?: React.ReactNode;
+    headerText?: string;
+}
+
+const InternalTourControls: FC<InternalTourProps> = React.memo(({ children, headerText }) => {
+    const { setCurrentStep, currentStep, steps, setIsOpen } = useTour();
+
+    const handleClose = React.useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+
+    const handleNext = React.useCallback(() => {
+        if (currentStep === steps.length - 1) {
+            handleClose();
+        } else {
+            setCurrentStep(currentStep + 1);
+        }
+    }, [currentStep, handleClose, setCurrentStep, steps.length]);
+
+    return (
+        <TourPopover
+            currentStep={currentStep}
+            onClose={handleClose}
+            onNext={handleNext}
+            totalStepCount={steps.length}
+            headerText={headerText}
+        >
+            {children}
+        </TourPopover>
+    );
+});
+
+const ReactTour: FC = ({ children }) => {
+    const steps: StepType[] = [
+        {
+            selector: '.step-1',
+            content: (
+                <InternalTourControls headerText="⚠️ This is now a required field">
+                    <BodyText size="small" className="m-b-2">
+                        You must now select a date range beforehand because of reasons.
+                    </BodyText>
+                    <BodyText size="small">
+                        <Link primary>Learn More</Link>
+                    </BodyText>
+                </InternalTourControls>
+            ),
+        },
+        {
+            selector: '.step-2',
+            content: (
+                <InternalTourControls headerText="Give it up for step 2"></InternalTourControls>
+            ),
+        },
+        {
+            selector: '.step-3',
+            content: (
+                <InternalTourControls>
+                    This is the final step with just body text.
+                </InternalTourControls>
+            ),
+        },
+    ];
+
+    const styles = {
+        popover: (base: any) => ({
+            ...base,
+            borderRadius: '6px',
+            padding: 'inherit',
+            margin: 'inherit',
+            maxWidth: 'inherit',
+        }),
+    };
+
+    return (
+        <TourProvider
+            defaultOpen
+            steps={steps}
+            showBadge={false}
+            showPrevNextButtons={false}
+            showCloseButton={false}
+            showNavigation={false}
+            showDots={false}
+            styles={styles}
+        >
+            {children}
+        </TourProvider>
+    );
+};
+
+const StartTourButton = () => {
+    const { setIsOpen, setCurrentStep } = useTour();
+
+    const handleTourClick = React.useCallback(() => {
+        setCurrentStep(0);
+        setIsOpen(true);
+    }, [setCurrentStep, setIsOpen]);
+
+    return <Button onClick={handleTourClick}>Start Tour</Button>;
+};
+
+export const tour = () => {
+    return (
+        <Frame>
+             <ReactTour>
+                <Page
+                    header={
+                        <Stack justifyContent="space-between" alignItems="center">
+                            <Headline size="large" className="step-3">Page Title</Headline>
+                            <StartTourButton />
+                        </Stack>
+                    }
+                >
+                    <Layout type="3Col">
+                        <Layout.Section>
+                            <Card className="step-1">Card 1</Card>
+                        </Layout.Section>
+                        <Layout.Section>
+                            <Card className="step-2">Card 2</Card>
+                        </Layout.Section>
+                        <Layout.Section>
+                            <Card>Card 3</Card>
+                        </Layout.Section>
+                    </Layout>
+                </Page>
+            </ReactTour>
+        </Frame>
+    );
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './components/feature-popover';
+export * from './components/feature-modal';
+export * from './components/feature-toast';