@servicetitan/feature-spotlight 3.2.1 → 3.3.0

package/dist/components/feature-modal.js

@@ -1,20 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Modal } from '@servicetitan/design-system';
 import * as Styles from '../feature-spotlight.module.css';
-export const FeatureModal = (_a) => {
-    var rest = __rest(_a, []);
-    return _jsx(Modal, Object.assign({ className: classNames(Styles.featureModalHeader) }, rest));
+export const FeatureModal = ({ ...rest }) => {
+    return _jsx(Modal, { className: classNames(Styles.featureModalHeader), ...rest });
 };
 //# sourceMappingURL=feature-modal.js.map

package/dist/components/feature-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-modal.js","sourceRoot":"","sources":["../../src/components/feature-modal.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAc,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,YAAY,GAAmB,CAAC,EAAW,EAAE,EAAE;QAAV,IAAI,cAAT,EAAW,CAAF;IAClD,OAAO,KAAC,KAAK,kBAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,IAAM,IAAI,EAAI,CAAC;AACjF,CAAC,CAAC"}
+{"version":3,"file":"feature-modal.js","sourceRoot":"","sources":["../../src/components/feature-modal.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAc,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAE1D,MAAM,CAAC,MAAM,YAAY,GAAmB,CAAC,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,KAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,KAAM,IAAI,GAAI,CAAC;AACjF,CAAC,CAAC"}

package/dist/components/feature-popover.js

@@ -1,20 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Popover } from '@servicetitan/design-system';
 import * as Styles from '../feature-spotlight.module.css';
-export const FeaturePopover = (_a) => {
-    var { children, footer, header } = _a, rest = __rest(_a, ["children", "footer", "header"]);
-    return (_jsxs(Popover, Object.assign({ className: classNames(Styles.featurePopover), caret: { show: true, className: Styles.featurePopoverCaret }, padding: "m" }, rest, { children: [header && (_jsx(Popover.Header, { className: classNames(Styles.featurePopoverHeader), children: header })), children, footer && (_jsx(Popover.Footer, { className: classNames(Styles.featurePopoverFooter), align: "right", children: footer }))] })));
+export const FeaturePopover = ({ children, footer, header, ...rest }) => {
+    return (_jsxs(Popover, { className: classNames(Styles.featurePopover), caret: { show: true, className: Styles.featurePopoverCaret }, padding: "m", ...rest, children: [header && (_jsx(Popover.Header, { className: classNames(Styles.featurePopoverHeader), children: header })), children, footer && (_jsx(Popover.Footer, { className: classNames(Styles.featurePopoverFooter), align: "right", children: footer }))] }));
 };
 //# sourceMappingURL=feature-popover.js.map

package/dist/components/feature-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-popover.js","sourceRoot":"","sources":["../../src/components/feature-popover.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAQ1D,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAqC,EAAE,EAAE;QAAzC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,OAAW,EAAN,IAAI,cAAnC,gCAAqC,CAAF;IACvF,OAAO,CACH,MAAC,OAAO,kBACJ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,EAC5C,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAE,EAC5D,OAAO,EAAC,GAAG,IACP,IAAI,eAEP,MAAM,IAAI,CACP,KAAC,OAAO,CAAC,MAAM,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC,YAC7D,MAAM,GACM,CACpB,EACA,QAAQ,EACR,MAAM,IAAI,CACP,KAAC,OAAO,CAAC,MAAM,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAC,OAAO,YAC5E,MAAM,GACM,CACpB,KACK,CACb,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"feature-popover.js","sourceRoot":"","sources":["../../src/components/feature-popover.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,OAAO,EAAgB,MAAM,6BAA6B,CAAC;AACpE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAQ1D,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IAC7F,OAAO,CACH,MAAC,OAAO,IACJ,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,cAAc,CAAC,EAC5C,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,mBAAmB,EAAE,EAC5D,OAAO,EAAC,GAAG,KACP,IAAI,aAEP,MAAM,IAAI,CACP,KAAC,OAAO,CAAC,MAAM,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC,YAC7D,MAAM,GACM,CACpB,EACA,QAAQ,EACR,MAAM,IAAI,CACP,KAAC,OAAO,CAAC,MAAM,IAAC,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,oBAAoB,CAAC,EAAE,KAAK,EAAC,OAAO,YAC5E,MAAM,GACM,CACpB,IACK,CACb,CAAC;AACN,CAAC,CAAC"}

package/dist/components/feature-toast.js

@@ -1,20 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { Toast } from '@servicetitan/design-system';
 import * as Styles from '../feature-spotlight.module.css';
-export const FeatureToast = (_a) => {
-    var { center } = _a, rest = __rest(_a, ["center"]);
-    return (_jsx(Toast, Object.assign({ className: classNames(Styles.featureToast, center && Styles.featureToastCenter) }, rest)));
+export const FeatureToast = ({ center, ...rest }) => {
+    return (_jsx(Toast, { className: classNames(Styles.featureToast, center && Styles.featureToastCenter), ...rest }));
 };
 //# sourceMappingURL=feature-toast.js.map

package/dist/components/feature-toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"feature-toast.js","sourceRoot":"","sources":["../../src/components/feature-toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAc,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAM1D,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAmB,EAAE,EAAE;QAAvB,EAAE,MAAM,OAAW,EAAN,IAAI,cAAjB,UAAmB,CAAF;IACjE,OAAO,CACH,KAAC,KAAK,kBACF,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,IAAI,MAAM,CAAC,kBAAkB,CAAC,IAC3E,IAAI,EACV,CACL,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"file":"feature-toast.js","sourceRoot":"","sources":["../../src/components/feature-toast.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,KAAK,EAAc,MAAM,6BAA6B,CAAC;AAChE,OAAO,KAAK,MAAM,MAAM,iCAAiC,CAAC;AAM1D,MAAM,CAAC,MAAM,YAAY,GAA0B,CAAC,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE;IACvE,OAAO,CACH,KAAC,KAAK,IACF,SAAS,EAAE,UAAU,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,IAAI,MAAM,CAAC,kBAAkB,CAAC,KAC3E,IAAI,GACV,CACL,CAAC;AACN,CAAC,CAAC"}

package/dist/feature-spotlight.stories.d.ts

@@ -0,0 +1,20 @@
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const Popover: () => import("react/jsx-runtime").JSX.Element;
+export declare const modal: {
+    (args: any): import("react/jsx-runtime").JSX.Element;
+    args: {
+        open: boolean;
+        title: string;
+        closable: boolean;
+        onClose: () => void;
+        scrollable: boolean;
+        children: import("react/jsx-runtime").JSX.Element;
+        footer: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export declare const toast: () => import("react/jsx-runtime").JSX.Element;
+export declare const tour: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=feature-spotlight.stories.d.ts.map

package/dist/feature-spotlight.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-spotlight.stories.d.ts","sourceRoot":"","sources":["../src/feature-spotlight.stories.tsx"],"names":[],"mappings":";;;AAoCA,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/dist/feature-spotlight.stories.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// eslint-disable-next-line spaced-comment, @typescript-eslint/triple-slash-reference
+/// <reference path="../../../storybook-static/index.d.ts" />
+import { memo, useCallback } 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, 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 = () => (_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" })] }) })] }));
+const closeMethod = () => alert('closing');
+export const modal = (args) => _jsx(FeatureModal, { ...args });
+modal.args = {
+    open: true,
+    title: 'FleetPro Has Launched!',
+    closable: true,
+    onClose: closeMethod,
+    scrollable: true,
+    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."] })] })),
+    footer: (_jsxs(ButtonGroup, { children: [_jsx(Button, { onClick: closeMethod, children: "No, Thank You" }), _jsx(Button, { primary: true, onClick: closeMethod, children: "Add FleetPro Now" })] })),
+};
+export const toast = () => {
+    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%?" })] }) })] }) }));
+};
+const InternalTourControls = memo(({ children, headerText }) => {
+    const { setCurrentStep, currentStep, steps, setIsOpen } = useTour();
+    const handleClose = useCallback(() => {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    const handleNext = useCallback(() => {
+        if (currentStep === steps.length - 1) {
+            handleClose();
+        }
+        else {
+            setCurrentStep(currentStep + 1);
+        }
+    }, [currentStep, handleClose, setCurrentStep, steps.length]);
+    return (_jsx(TourPopover, { currentStep: currentStep, onClose: handleClose, onNext: handleNext, totalStepCount: steps.length, headerText: headerText, children: children }));
+});
+const ReactTour = ({ children }) => {
+    const steps = [
+        {
+            selector: '.step-1',
+            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" }) })] })),
+        },
+        {
+            selector: '.step-2',
+            content: _jsx(InternalTourControls, { headerText: "Give it up for step 2" }),
+        },
+        {
+            selector: '.step-3',
+            content: (_jsx(InternalTourControls, { children: "This is the final step with just body text." })),
+        },
+    ];
+    const styles = {
+        popover: (base) => ({
+            ...base,
+            borderRadius: '6px',
+            padding: 'inherit',
+            margin: 'inherit',
+            maxWidth: 'inherit',
+        }),
+    };
+    return (_jsx(TourProvider, { defaultOpen: true, steps: steps, showBadge: false, showPrevNextButtons: false, showCloseButton: false, showNavigation: false, showDots: false, styles: styles, children: children }));
+};
+const StartTourButton = () => {
+    const { setIsOpen, setCurrentStep } = useTour();
+    const handleTourClick = useCallback(() => {
+        setCurrentStep(0);
+        setIsOpen(true);
+    }, [setCurrentStep, setIsOpen]);
+    return _jsx(Button, { onClick: handleTourClick, children: "Start Tour" });
+};
+export const tour = () => {
+    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" }) })] }) }) }) }));
+};
+//# sourceMappingURL=feature-spotlight.stories.js.map

package/dist/feature-spotlight.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feature-spotlight.stories.js","sourceRoot":"","sources":["../src/feature-spotlight.stories.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@servicetitan/feature-spotlight",
-    "version": "3.2.1",
+    "version": "3.3.0",
     "description": "Provides specific styles to Anvil components to highlight a feature",
     "repository": {
         "type": "git",
@@ -37,5 +37,5 @@
     "cli": {
         "webpack": false
     },
-    "gitHead": "17fc7d50aebf18316775bddae960a29a2c79b1b0"
+    "gitHead": "c1d645b3e5643ba5a50e4898d9f786212334792a"
 }

package/src/feature-spotlight.stories.tsx

@@ -1,5 +1,6 @@
+// eslint-disable-next-line spaced-comment, @typescript-eslint/triple-slash-reference
 /// <reference path="../../../storybook-static/index.d.ts" />
-import React, { FC } from 'react';
+import { FC, PropsWithChildren, ReactNode, memo, useCallback } from 'react';
 import {
     BodyText,
     Stack,
@@ -38,116 +39,114 @@ export default {
 };
 
 export const Popover = () => (
-    <React.Fragment>
-        <Stack
-            direction="column"
-            spacing={5}
-            alignItems="center"
-            justifyContent="center"
-            className="p-4"
-            style={{ height: '800px' }}
+    <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 }}
         >
-            <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>
+            <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>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>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>
+        <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>
 );
 
 const closeMethod = () => alert('closing');
@@ -249,18 +248,18 @@ export const toast = () => {
 };
 
 interface InternalTourProps {
-    children?: React.ReactNode;
+    children?: ReactNode;
     headerText?: string;
 }
 
-const InternalTourControls: FC<InternalTourProps> = React.memo(({ children, headerText }) => {
+const InternalTourControls: FC<InternalTourProps> = memo(({ children, headerText }) => {
     const { setCurrentStep, currentStep, steps, setIsOpen } = useTour();
 
-    const handleClose = React.useCallback(() => {
+    const handleClose = useCallback(() => {
         setIsOpen(false);
     }, [setIsOpen]);
 
-    const handleNext = React.useCallback(() => {
+    const handleNext = useCallback(() => {
         if (currentStep === steps.length - 1) {
             handleClose();
         } else {
@@ -281,7 +280,7 @@ const InternalTourControls: FC<InternalTourProps> = React.memo(({ children, head
     );
 });
 
-const ReactTour: FC = ({ children }) => {
+const ReactTour: FC<PropsWithChildren> = ({ children }) => {
     const steps: StepType[] = [
         {
             selector: '.step-1',
@@ -298,9 +297,7 @@ const ReactTour: FC = ({ children }) => {
         },
         {
             selector: '.step-2',
-            content: (
-                <InternalTourControls headerText="Give it up for step 2"></InternalTourControls>
-            ),
+            content: <InternalTourControls headerText="Give it up for step 2" />,
         },
         {
             selector: '.step-3',
@@ -341,7 +338,7 @@ const ReactTour: FC = ({ children }) => {
 const StartTourButton = () => {
     const { setIsOpen, setCurrentStep } = useTour();
 
-    const handleTourClick = React.useCallback(() => {
+    const handleTourClick = useCallback(() => {
         setCurrentStep(0);
         setIsOpen(true);
     }, [setCurrentStep, setIsOpen]);
@@ -352,11 +349,13 @@ const StartTourButton = () => {
 export const tour = () => {
     return (
         <Frame>
-             <ReactTour>
+            <ReactTour>
                 <Page
                     header={
                         <Stack justifyContent="space-between" alignItems="center">
-                            <Headline size="large" className="step-3">Page Title</Headline>
+                            <Headline size="large" className="step-3">
+                                Page Title
+                            </Headline>
                             <StartTourButton />
                         </Stack>
                     }