@veracity/vui 2.30.0 → 2.30.1-beta.1
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/cjs/sidemenuV2/theme.d.ts.map +1 -1
- package/dist/cjs/sidemenuV2/theme.js +2 -3
- package/dist/cjs/sidemenuV2/theme.js.map +1 -1
- package/dist/cjs/tutorial/index.d.ts +0 -1
- package/dist/cjs/tutorial/index.d.ts.map +1 -1
- package/dist/cjs/tutorial/index.js +0 -1
- package/dist/cjs/tutorial/index.js.map +1 -1
- package/dist/cjs/tutorial/tutorial.d.ts +1 -1
- package/dist/cjs/tutorial/tutorial.d.ts.map +1 -1
- package/dist/cjs/tutorial/tutorial.js +2 -6
- package/dist/cjs/tutorial/tutorial.js.map +1 -1
- package/dist/cjs/tutorial/tutorial.types.d.ts +14 -2
- package/dist/cjs/tutorial/tutorial.types.d.ts.map +1 -1
- package/dist/cjs/tutorial/tutorialCard.d.ts +1 -1
- package/dist/cjs/tutorial/tutorialCard.d.ts.map +1 -1
- package/dist/cjs/tutorial/tutorialCard.js +5 -5
- package/dist/cjs/tutorial/tutorialCard.js.map +1 -1
- package/dist/cjs/tutorial/tutorialStep.d.ts +1 -1
- package/dist/cjs/tutorial/tutorialStep.d.ts.map +1 -1
- package/dist/cjs/tutorial/tutorialStep.js +1 -1
- package/dist/cjs/tutorial/tutorialStep.js.map +1 -1
- package/dist/esm/sidemenuV2/theme.d.ts.map +1 -1
- package/dist/esm/sidemenuV2/theme.js +2 -3
- package/dist/esm/sidemenuV2/theme.js.map +1 -1
- package/dist/esm/tutorial/index.d.ts +0 -1
- package/dist/esm/tutorial/index.d.ts.map +1 -1
- package/dist/esm/tutorial/index.js +0 -1
- package/dist/esm/tutorial/index.js.map +1 -1
- package/dist/esm/tutorial/tutorial.d.ts +1 -1
- package/dist/esm/tutorial/tutorial.d.ts.map +1 -1
- package/dist/esm/tutorial/tutorial.js +2 -6
- package/dist/esm/tutorial/tutorial.js.map +1 -1
- package/dist/esm/tutorial/tutorial.types.d.ts +14 -2
- package/dist/esm/tutorial/tutorial.types.d.ts.map +1 -1
- package/dist/esm/tutorial/tutorialCard.d.ts +1 -1
- package/dist/esm/tutorial/tutorialCard.d.ts.map +1 -1
- package/dist/esm/tutorial/tutorialCard.js +4 -4
- package/dist/esm/tutorial/tutorialCard.js.map +1 -1
- package/dist/esm/tutorial/tutorialStep.d.ts +1 -1
- package/dist/esm/tutorial/tutorialStep.d.ts.map +1 -1
- package/dist/esm/tutorial/tutorialStep.js +1 -1
- package/dist/esm/tutorial/tutorialStep.js.map +1 -1
- package/dist/tsconfig.legacy.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/sidemenuV2/theme.ts +2 -4
- package/src/tutorial/index.ts +0 -1
- package/src/tutorial/tutorial.tsx +5 -6
- package/src/tutorial/tutorial.types.ts +14 -2
- package/src/tutorial/tutorialCard.tsx +10 -7
- package/src/tutorial/tutorialStep.tsx +6 -4
- package/dist/cjs/tutorial/useTutorial.d.ts +0 -7
- package/dist/cjs/tutorial/useTutorial.d.ts.map +0 -1
- package/dist/cjs/tutorial/useTutorial.js +0 -15
- package/dist/cjs/tutorial/useTutorial.js.map +0 -1
- package/dist/esm/tutorial/useTutorial.d.ts +0 -7
- package/dist/esm/tutorial/useTutorial.d.ts.map +0 -1
- package/dist/esm/tutorial/useTutorial.js +0 -11
- package/dist/esm/tutorial/useTutorial.js.map +0 -1
- package/src/tutorial/useTutorial.ts +0 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,wBAMC"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const theme_1 = require("../theme");
|
|
4
3
|
const baseStyle = {
|
|
5
4
|
container: {
|
|
6
5
|
display: 'flex',
|
|
@@ -82,10 +81,10 @@ const variants = {
|
|
|
82
81
|
},
|
|
83
82
|
toggleButton: {
|
|
84
83
|
variant: 'tertiaryDark',
|
|
85
|
-
hoverBg:
|
|
84
|
+
hoverBg: 'sandstone.95',
|
|
86
85
|
},
|
|
87
86
|
item: {
|
|
88
|
-
color:
|
|
87
|
+
color: 'darkBlue.main',
|
|
89
88
|
},
|
|
90
89
|
},
|
|
91
90
|
dark: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":";;AAAA,
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG;IAChB,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,wBAAwB;KACrC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,QAAQ;KACpB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,uBAAuB;QAClC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,YAAY;QAC5B,aAAa,EAAE,KAAK;QACpB,CAAC,EAAE,MAAM;QACT,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,uCAAuC;QACnD,cAAc,EAAE,MAAM;QACtB,OAAO,EAAE,MAAM;QACf,EAAE,EAAE,CAAC;QACL,UAAU,EAAE,uBAAuB;KACpC;IACD,WAAW,EAAE;QACX,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,MAAM;KAClB;IACD,kCAAkC;IAClC,YAAY,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,WAAW,EAAE,CAAC;QACd,yBAAyB,EAAE,CAAC;QAC5B,cAAc,EAAE,MAAM;QACtB,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,kDAAkD;KAC/D;CACF,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,OAAO;CACjB,CAAA;AAED,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,CAAC,CAAA;AAEvF,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,GAAG;SACjB;KACF;IACD,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,CAAC;SACf;KACF;IACD,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,GAAG;SACjB;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE;QACL,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;SACZ;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,cAAc;SACxB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,eAAe;SACvB;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE;YACT,EAAE,EAAE,eAAe;YACnB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,8BAA8B;SAC1C;QACD,MAAM,EAAE;YACN,cAAc,EAAE,0BAA0B;SAC3C;QACD,WAAW,EAAE;YACX,YAAY,EAAE,oCAAoC;YAClD,EAAE,EAAE,eAAe;SACpB;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,eAAe;SACzB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;SACf;KACF;CACF,CAAA;AAED,kBAAe;IACb,SAAS;IACT,YAAY;IACZ,KAAK;IACL,KAAK;IACL,QAAQ;CACT,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,mBAAmB,kBAAkB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,mBAAmB,kBAAkB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
|
|
@@ -17,5 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
17
17
|
__exportStar(require("./tutorial"), exports);
|
|
18
18
|
__exportStar(require("./tutorialCard"), exports);
|
|
19
19
|
__exportStar(require("./tutorialStep"), exports);
|
|
20
|
-
__exportStar(require("./useTutorial"), exports);
|
|
21
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA0B;AAE1B,iDAA8B;AAC9B,iDAA8B
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,6CAA0B;AAE1B,iDAA8B;AAC9B,iDAA8B"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { TutorialProps } from './tutorial.types';
|
|
2
2
|
/** Popover Tutorial is used to display information about a new, or existing feature. */
|
|
3
|
-
export declare function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title,
|
|
3
|
+
export declare function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, placement, showSkipButton, isVisible, includeFinalPage, useContentTitle, }: TutorialProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare namespace Tutorial {
|
|
5
5
|
var displayName: string;
|
|
6
6
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAGjE,wFAAwF;AACxF,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAmB,EACnB,cAAc,EACd,SAAgB,EAChB,gBAAuB,EACvB,eAAuB,GACxB,EAAE,aAAa,2CAsCf;yBApDe,QAAQ"}
|
|
@@ -8,19 +8,15 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
8
8
|
const react_1 = __importDefault(require("@tippyjs/react"));
|
|
9
9
|
const utils_1 = require("../utils");
|
|
10
10
|
const tutorialCard_1 = require("./tutorialCard");
|
|
11
|
-
const useTutorial_1 = require("./useTutorial");
|
|
12
11
|
/** Popover Tutorial is used to display information about a new, or existing feature. */
|
|
13
|
-
function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title,
|
|
14
|
-
const { isVisible, setIsVisible, saveDisplayed } = (0, useTutorial_1.useTutorial)(id);
|
|
12
|
+
function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, placement = 'right', showSkipButton, isVisible = true, includeFinalPage = true, useContentTitle = false, }) {
|
|
15
13
|
const onClose = (e) => {
|
|
16
|
-
setIsVisible(false);
|
|
17
14
|
if (e === 'dismissed')
|
|
18
15
|
onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
|
|
19
16
|
if (e === 'finished')
|
|
20
17
|
onFinish === null || onFinish === void 0 ? void 0 : onFinish();
|
|
21
|
-
saveDisplayed(e);
|
|
22
18
|
};
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(react_1.default, { content: (0, jsx_runtime_1.jsx)(tutorialCard_1.TutorialCard, { actionLabel: actionLabel, className: (0, utils_1.cs)('vui-tutorial', className), onAction: onAction, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), showSkipButton: showSkipButton, steps: steps, title: title }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
|
|
19
|
+
return ((0, jsx_runtime_1.jsx)(react_1.default, { content: (0, jsx_runtime_1.jsx)(tutorialCard_1.TutorialCard, { actionLabel: actionLabel, className: (0, utils_1.cs)('vui-tutorial', className), onAction: onAction, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), showSkipButton: showSkipButton, steps: steps, title: title, includeFinalPage: includeFinalPage, useContentTitle: useContentTitle }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
|
|
24
20
|
modifiers: [
|
|
25
21
|
{
|
|
26
22
|
name: 'flip',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.js","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"tutorial.js","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":";;;;;AAQA,4BAoDC;;AA5DD,2DAAkC;AAGlC,oCAA6B;AAE7B,iDAA6C;AAE7C,wFAAwF;AACxF,SAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,cAAc,EACd,SAAS,GAAG,IAAI,EAChB,gBAAgB,GAAG,IAAI,EACvB,eAAe,GAAG,KAAK,GACT;IACd,MAAM,OAAO,GAAG,CAAC,CAAa,EAAE,EAAE;QAChC,IAAI,CAAC,KAAK,WAAW;YAAE,SAAS,aAAT,SAAS,uBAAT,SAAS,EAAI,CAAA;QACpC,IAAI,CAAC,KAAK,UAAU;YAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAA;IACpC,CAAC,CAAA;IAED,OAAO,CACL,uBAAC,eAAK,IACJ,OAAO,EACL,uBAAC,2BAAY,IACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,IAAA,UAAE,EAAC,cAAc,EAAE,SAAS,CAAC,EACxC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,EACnC,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,GAChC,EAEJ,WAAW,QACX,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EACd,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT;oBACE,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF,EACD,OAAO,EAAE,SAAS,YAEjB,QAA8E,GACzE,CACT,CAAA;AACH,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
|
|
@@ -4,7 +4,7 @@ export type TutorialDataStep = {
|
|
|
4
4
|
/** title of step */
|
|
5
5
|
title: string;
|
|
6
6
|
/** Content */
|
|
7
|
-
content?: string;
|
|
7
|
+
content?: string | React.ReactNode;
|
|
8
8
|
/** Link to page where they can read more */
|
|
9
9
|
readMoreLink?: string;
|
|
10
10
|
};
|
|
@@ -33,6 +33,12 @@ export type TutorialProps = {
|
|
|
33
33
|
title: string;
|
|
34
34
|
/** Link to page where they can read more */
|
|
35
35
|
readMoreLink?: string;
|
|
36
|
+
/** Decides if should show or hide tooltip */
|
|
37
|
+
isVisible?: boolean;
|
|
38
|
+
/** Should include last thank you page */
|
|
39
|
+
includeFinalPage?: boolean;
|
|
40
|
+
/** Should use dynamic header based on content */
|
|
41
|
+
useContentTitle?: boolean;
|
|
36
42
|
};
|
|
37
43
|
export type TutorialCardProps = {
|
|
38
44
|
/** Label for the action button @default `Action` */
|
|
@@ -53,6 +59,10 @@ export type TutorialCardProps = {
|
|
|
53
59
|
readMoreLink?: string;
|
|
54
60
|
/** Show the Skip button */
|
|
55
61
|
showSkipButton?: boolean;
|
|
62
|
+
/** Include the final page */
|
|
63
|
+
includeFinalPage?: boolean;
|
|
64
|
+
/** Should use dynamic header based on content */
|
|
65
|
+
useContentTitle?: boolean;
|
|
56
66
|
};
|
|
57
67
|
export type TutorialStepProps = {
|
|
58
68
|
/** If the step is active or not */
|
|
@@ -60,9 +70,11 @@ export type TutorialStepProps = {
|
|
|
60
70
|
/** Title of step */
|
|
61
71
|
title: string;
|
|
62
72
|
/** Step content */
|
|
63
|
-
content?: string;
|
|
73
|
+
content?: string | React.ReactNode;
|
|
64
74
|
/** Link to page where user can read more */
|
|
65
75
|
readMoreLink?: string;
|
|
76
|
+
/** Should use dynamic header based on content */
|
|
77
|
+
useContentTitle?: boolean;
|
|
66
78
|
};
|
|
67
79
|
export type TutorialStepWrapper = {
|
|
68
80
|
key: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAClC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAA;IACV,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAClC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,gBAAgB,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TutorialCardProps } from './tutorial.types';
|
|
2
|
-
export declare function TutorialCard({ actionLabel, className, title, readMoreLink, steps: propsSteps, showSkipButton, onAction, onDismiss, onFinish, }: TutorialCardProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function TutorialCard({ actionLabel, className, title, readMoreLink, steps: propsSteps, showSkipButton, onAction, onDismiss, onFinish, includeFinalPage, useContentTitle, }: TutorialCardProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare namespace TutorialCard {
|
|
4
4
|
var displayName: string;
|
|
5
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAGhG,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,
|
|
1
|
+
{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAGhG,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,eAAe,GAChB,EAAE,iBAAiB,2CAyHnB;yBArIe,YAAY"}
|
|
@@ -6,8 +6,8 @@ const react_1 = require("react");
|
|
|
6
6
|
const index_1 = require("../index");
|
|
7
7
|
const consts_1 = require("./consts");
|
|
8
8
|
const tutorialStep_1 = require("./tutorialStep");
|
|
9
|
-
function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish, }) {
|
|
10
|
-
var _a, _b;
|
|
9
|
+
function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish, includeFinalPage, useContentTitle, }) {
|
|
10
|
+
var _a, _b, _c, _d;
|
|
11
11
|
const [steps, setSteps] = (0, react_1.useState)([]);
|
|
12
12
|
const [activeStep, setActiveStep] = (0, react_1.useState)(0);
|
|
13
13
|
(0, react_1.useEffect)(() => {
|
|
@@ -19,12 +19,12 @@ function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink,
|
|
|
19
19
|
};
|
|
20
20
|
if (readMoreLink)
|
|
21
21
|
finalStep.readMoreLink = readMoreLink;
|
|
22
|
-
setSteps([...s, { step: finalStep, key: propsSteps.length }]);
|
|
22
|
+
includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s]);
|
|
23
23
|
}
|
|
24
24
|
}, [title, propsSteps]);
|
|
25
25
|
const isStartStep = activeStep === 0;
|
|
26
|
-
const isFinalStep = activeStep === propsSteps.length;
|
|
27
|
-
return ((0, jsx_runtime_1.jsxs)(index_1.Card, { bg: consts_1.tutorialColors.bg, className: className, color: consts_1.tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' }, children: [(0, jsx_runtime_1.jsx)(index_1.H4, { color: consts_1.tutorialColors.color, children: title }), !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "close", icon: "uiTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))] }), (0, jsx_runtime_1.jsx)(index_1.Box, { flex: 5, row: true, children: (
|
|
26
|
+
const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1;
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)(index_1.Card, { bg: consts_1.tutorialColors.bg, className: className, color: consts_1.tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' }, children: [(0, jsx_runtime_1.jsx)(index_1.H4, { color: consts_1.tutorialColors.color, children: useContentTitle ? (_b = (_a = steps[activeStep]) === null || _a === void 0 ? void 0 : _a.step) === null || _b === void 0 ? void 0 : _b.title : title }), !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "close", icon: "uiTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))] }), (0, jsx_runtime_1.jsx)(index_1.Box, { flex: 5, row: true, children: (_c = steps === null || steps === void 0 ? void 0 : steps.map) === null || _c === void 0 ? void 0 : _c.call(steps, s => ((0, jsx_runtime_1.jsx)(tutorialStep_1.TutorialStep, { active: s.key === activeStep, content: s.step.content, readMoreLink: s.step.readMoreLink, title: s.step.title, useContentTitle: useContentTitle }, s.step.title))) }), (0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", mt: 0, children: [(0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available", children: [(0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "previous", color: consts_1.tutorialColors.buttonColor, disabled: isStartStep, icon: "uiArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }), (0, jsx_runtime_1.jsx)(index_1.Box, { className: "vuiTutorialStepDots", children: (_d = steps === null || steps === void 0 ? void 0 : steps.map) === null || _d === void 0 ? void 0 : _d.call(steps, s => ((0, jsx_runtime_1.jsx)(index_1.Icon, { color: s.key === activeStep ? consts_1.tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: consts_1.tutorialColors.buttonColor, name: "uiDotFull", onClick: () => setActiveStep(s.key) }, s.key))) }), (0, jsx_runtime_1.jsx)(index_1.Button, { "aria-label": "next", color: consts_1.tutorialColors.buttonColor, disabled: isFinalStep, icon: "uiArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })] }), (showSkipButton || isFinalStep || !!onAction) && ((0, jsx_runtime_1.jsxs)(index_1.Box, { alignItems: "center", justifyContent: "space-between", children: [showSkipButton && !isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mx: 1, onClick: onDismiss, variant: "secondaryLight", children: "Skip" })), isFinalStep && ((0, jsx_runtime_1.jsx)(index_1.Button, { mx: 1, onClick: onFinish, variant: "primaryLight", children: "I got it" })), !!onAction && ((0, jsx_runtime_1.jsx)(index_1.Button, { ml: 1, mr: showSkipButton || isFinalStep ? 12 : 2, onClick: onAction, variant: "primaryLight", children: actionLabel }))] }))] })] }));
|
|
28
28
|
}
|
|
29
29
|
TutorialCard.displayName = 'TutorialCard';
|
|
30
30
|
//# sourceMappingURL=tutorialCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialCard.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":";;AAOA,
|
|
1
|
+
{"version":3,"file":"tutorialCard.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { TutorialStepProps } from './tutorial.types';
|
|
2
2
|
export declare const TutorialStep: {
|
|
3
|
-
({ active, content, title }: TutorialStepProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ active, content, title, useContentTitle }: TutorialStepProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
6
6
|
//# sourceMappingURL=tutorialStep.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialStep.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,eAAO,MAAM,YAAY;
|
|
1
|
+
{"version":3,"file":"tutorialStep.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,eAAO,MAAM,YAAY;kDAAiD,iBAAiB;;CAS1F,CAAA"}
|
|
@@ -4,7 +4,7 @@ exports.TutorialStep = void 0;
|
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
5
|
const index_1 = require("../index");
|
|
6
6
|
const consts_1 = require("./consts");
|
|
7
|
-
const TutorialStep = ({ active, content, title }) => ((0, jsx_runtime_1.jsxs)(index_1.v.div, { className: "vui-tutorialStep", hidden: !active, pb: 2, children: [(0, jsx_runtime_1.jsx)(index_1.H5, { color: consts_1.tutorialColors.color, fontWeight: "medium", mb: 1, children: title }), (0, jsx_runtime_1.jsx)(index_1.Box, { children: content })] }));
|
|
7
|
+
const TutorialStep = ({ active, content, title, useContentTitle }) => ((0, jsx_runtime_1.jsxs)(index_1.v.div, { className: "vui-tutorialStep", hidden: !active, pb: 2, children: [!useContentTitle && ((0, jsx_runtime_1.jsx)(index_1.H5, { color: consts_1.tutorialColors.color, fontWeight: "medium", mb: 1, children: title })), (0, jsx_runtime_1.jsx)(index_1.Box, { children: content })] }));
|
|
8
8
|
exports.TutorialStep = TutorialStep;
|
|
9
9
|
exports.TutorialStep.displayName = 'TutorialStep';
|
|
10
10
|
//# sourceMappingURL=tutorialStep.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialStep.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":";;;;AAAA,oCAAqC;AACrC,qCAAyC;AAGlC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAqB,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"tutorialStep.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":";;;;AAAA,oCAAqC;AACrC,qCAAyC;AAGlC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAqB,EAAE,EAAE,CAAC,CAC9F,wBAAC,SAAC,CAAC,GAAG,IAAC,SAAS,EAAC,kBAAkB,EAAC,MAAM,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,aACvD,CAAC,eAAe,IAAI,CACnB,uBAAC,UAAE,IAAC,KAAK,EAAE,uBAAc,CAAC,KAAK,EAAE,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,YACvD,KAAK,GACH,CACN,EACD,uBAAC,WAAG,cAAE,OAAO,GAAO,IACd,CACT,CAAA;AATY,QAAA,YAAY,gBASxB;AAED,oBAAY,CAAC,WAAW,GAAG,cAAc,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiHA,wBAMC"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { colors } from '../theme';
|
|
2
1
|
const baseStyle = {
|
|
3
2
|
container: {
|
|
4
3
|
display: 'flex',
|
|
@@ -80,10 +79,10 @@ const variants = {
|
|
|
80
79
|
},
|
|
81
80
|
toggleButton: {
|
|
82
81
|
variant: 'tertiaryDark',
|
|
83
|
-
hoverBg:
|
|
82
|
+
hoverBg: 'sandstone.95',
|
|
84
83
|
},
|
|
85
84
|
item: {
|
|
86
|
-
color:
|
|
85
|
+
color: 'darkBlue.main',
|
|
87
86
|
},
|
|
88
87
|
},
|
|
89
88
|
dark: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/sidemenuV2/theme.ts"],"names":[],"mappings":"AAAA,MAAM,SAAS,GAAG;IAChB,SAAS,EAAE;QACT,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;QACvB,QAAQ,EAAE,QAAQ;QAClB,UAAU,EAAE,wBAAwB;KACrC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;QACP,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,QAAQ;KACpB;IACD,MAAM,EAAE;QACN,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,uBAAuB;QAClC,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;KACrB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,YAAY;QAC5B,aAAa,EAAE,KAAK;QACpB,CAAC,EAAE,MAAM;QACT,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,SAAS;QACjB,UAAU,EAAE,uCAAuC;QACnD,cAAc,EAAE,MAAM;QACtB,OAAO,EAAE,MAAM;QACf,EAAE,EAAE,CAAC;QACL,UAAU,EAAE,uBAAuB;KACpC;IACD,WAAW,EAAE;QACX,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,OAAO,EAAE,WAAW;QACpB,SAAS,EAAE,MAAM;KAClB;IACD,kCAAkC;IAClC,YAAY,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,WAAW,EAAE,CAAC;QACd,yBAAyB,EAAE,CAAC;QAC5B,cAAc,EAAE,MAAM;QACtB,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,kDAAkD;KAC/D;CACF,CAAA;AAED,MAAM,YAAY,GAAG;IACnB,IAAI,EAAE,IAAI;IACV,OAAO,EAAE,OAAO;CACjB,CAAA;AAED,MAAM,KAAK,GAAG,CAAC,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,aAAa,CAAC,CAAA;AAEvF,MAAM,KAAK,GAAG;IACZ,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,GAAG;SACjB;KACF;IACD,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,CAAC;SACf;KACF;IACD,EAAE,EAAE;QACF,YAAY,EAAE;YACZ,UAAU,EAAE,EAAE;YACd,WAAW,EAAE,GAAG;SACjB;KACF;CACF,CAAA;AAED,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE;QACL,SAAS,EAAE;YACT,EAAE,EAAE,OAAO;SACZ;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,cAAc;YACvB,OAAO,EAAE,cAAc;SACxB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,eAAe;SACvB;KACF;IACD,IAAI,EAAE;QACJ,SAAS,EAAE;YACT,EAAE,EAAE,eAAe;YACnB,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,8BAA8B;SAC1C;QACD,MAAM,EAAE;YACN,cAAc,EAAE,0BAA0B;SAC3C;QACD,WAAW,EAAE;YACX,YAAY,EAAE,oCAAoC;YAClD,EAAE,EAAE,eAAe;SACpB;QACD,YAAY,EAAE;YACZ,OAAO,EAAE,eAAe;SACzB;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,OAAO;SACf;KACF;CACF,CAAA;AAED,eAAe;IACb,SAAS;IACT,YAAY;IACZ,KAAK;IACL,KAAK;IACL,QAAQ;CACT,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,mBAAmB,kBAAkB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,mBAAmB,kBAAkB,CAAA;AACrC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tutorial/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAE1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { TutorialProps } from './tutorial.types';
|
|
2
2
|
/** Popover Tutorial is used to display information about a new, or existing feature. */
|
|
3
|
-
export declare function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title,
|
|
3
|
+
export declare function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, placement, showSkipButton, isVisible, includeFinalPage, useContentTitle, }: TutorialProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
export declare namespace Tutorial {
|
|
5
5
|
var displayName: string;
|
|
6
6
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;
|
|
1
|
+
{"version":3,"file":"tutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAc,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAGjE,wFAAwF;AACxF,wBAAgB,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAmB,EACnB,cAAc,EACd,SAAgB,EAChB,gBAAuB,EACvB,eAAuB,GACxB,EAAE,aAAa,2CAsCf;yBApDe,QAAQ"}
|
|
@@ -2,19 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import Tippy from '@tippyjs/react';
|
|
3
3
|
import { cs } from '../utils';
|
|
4
4
|
import { TutorialCard } from './tutorialCard';
|
|
5
|
-
import { useTutorial } from './useTutorial';
|
|
6
5
|
/** Popover Tutorial is used to display information about a new, or existing feature. */
|
|
7
|
-
export function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title,
|
|
8
|
-
const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id);
|
|
6
|
+
export function Tutorial({ actionLabel, children, className, onAction, onDismiss, onFinish, steps, title, placement = 'right', showSkipButton, isVisible = true, includeFinalPage = true, useContentTitle = false, }) {
|
|
9
7
|
const onClose = (e) => {
|
|
10
|
-
setIsVisible(false);
|
|
11
8
|
if (e === 'dismissed')
|
|
12
9
|
onDismiss?.();
|
|
13
10
|
if (e === 'finished')
|
|
14
11
|
onFinish?.();
|
|
15
|
-
saveDisplayed(e);
|
|
16
12
|
};
|
|
17
|
-
return (_jsx(Tippy, { content: _jsx(TutorialCard, { actionLabel: actionLabel, className: cs('vui-tutorial', className), onAction: onAction, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), showSkipButton: showSkipButton, steps: steps, title: title }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
|
|
13
|
+
return (_jsx(Tippy, { content: _jsx(TutorialCard, { actionLabel: actionLabel, className: cs('vui-tutorial', className), onAction: onAction, onDismiss: () => onClose('dismissed'), onFinish: () => onClose('finished'), showSkipButton: showSkipButton, steps: steps, title: title, includeFinalPage: includeFinalPage, useContentTitle: useContentTitle }), interactive: true, offset: [0, 2], placement: placement, popperOptions: {
|
|
18
14
|
modifiers: [
|
|
19
15
|
{
|
|
20
16
|
name: 'flip',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.js","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAGlC,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;
|
|
1
|
+
{"version":3,"file":"tutorial.js","sourceRoot":"","sources":["../../../src/tutorial/tutorial.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAGlC,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,wFAAwF;AACxF,MAAM,UAAU,QAAQ,CAAC,EACvB,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,cAAc,EACd,SAAS,GAAG,IAAI,EAChB,gBAAgB,GAAG,IAAI,EACvB,eAAe,GAAG,KAAK,GACT;IACd,MAAM,OAAO,GAAG,CAAC,CAAa,EAAE,EAAE;QAChC,IAAI,CAAC,KAAK,WAAW;YAAE,SAAS,EAAE,EAAE,CAAA;QACpC,IAAI,CAAC,KAAK,UAAU;YAAE,QAAQ,EAAE,EAAE,CAAA;IACpC,CAAC,CAAA;IAED,OAAO,CACL,KAAC,KAAK,IACJ,OAAO,EACL,KAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,SAAS,CAAC,EACxC,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,EACrC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,EACnC,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,EAClC,eAAe,EAAE,eAAe,GAChC,EAEJ,WAAW,QACX,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EACd,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE;YACb,SAAS,EAAE;gBACT;oBACE,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF,EACD,OAAO,EAAE,SAAS,YAEjB,QAA8E,GACzE,CACT,CAAA;AACH,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA"}
|
|
@@ -4,7 +4,7 @@ export type TutorialDataStep = {
|
|
|
4
4
|
/** title of step */
|
|
5
5
|
title: string;
|
|
6
6
|
/** Content */
|
|
7
|
-
content?: string;
|
|
7
|
+
content?: string | React.ReactNode;
|
|
8
8
|
/** Link to page where they can read more */
|
|
9
9
|
readMoreLink?: string;
|
|
10
10
|
};
|
|
@@ -33,6 +33,12 @@ export type TutorialProps = {
|
|
|
33
33
|
title: string;
|
|
34
34
|
/** Link to page where they can read more */
|
|
35
35
|
readMoreLink?: string;
|
|
36
|
+
/** Decides if should show or hide tooltip */
|
|
37
|
+
isVisible?: boolean;
|
|
38
|
+
/** Should include last thank you page */
|
|
39
|
+
includeFinalPage?: boolean;
|
|
40
|
+
/** Should use dynamic header based on content */
|
|
41
|
+
useContentTitle?: boolean;
|
|
36
42
|
};
|
|
37
43
|
export type TutorialCardProps = {
|
|
38
44
|
/** Label for the action button @default `Action` */
|
|
@@ -53,6 +59,10 @@ export type TutorialCardProps = {
|
|
|
53
59
|
readMoreLink?: string;
|
|
54
60
|
/** Show the Skip button */
|
|
55
61
|
showSkipButton?: boolean;
|
|
62
|
+
/** Include the final page */
|
|
63
|
+
includeFinalPage?: boolean;
|
|
64
|
+
/** Should use dynamic header based on content */
|
|
65
|
+
useContentTitle?: boolean;
|
|
56
66
|
};
|
|
57
67
|
export type TutorialStepProps = {
|
|
58
68
|
/** If the step is active or not */
|
|
@@ -60,9 +70,11 @@ export type TutorialStepProps = {
|
|
|
60
70
|
/** Title of step */
|
|
61
71
|
title: string;
|
|
62
72
|
/** Step content */
|
|
63
|
-
content?: string;
|
|
73
|
+
content?: string | React.ReactNode;
|
|
64
74
|
/** Link to page where user can read more */
|
|
65
75
|
readMoreLink?: string;
|
|
76
|
+
/** Should use dynamic header based on content */
|
|
77
|
+
useContentTitle?: boolean;
|
|
66
78
|
};
|
|
67
79
|
export type TutorialStepWrapper = {
|
|
68
80
|
key: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"tutorial.types.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorial.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEzC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAClC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mDAAmD;IACnD,EAAE,EAAE,MAAM,CAAA;IACV,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,wBAAwB;IACxB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6BAA6B;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2BAA2B;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,mCAAmC;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB;IACnB,OAAO,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAClC,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kDAAkD;IAClD,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,gBAAgB,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { TutorialCardProps } from './tutorial.types';
|
|
2
|
-
export declare function TutorialCard({ actionLabel, className, title, readMoreLink, steps: propsSteps, showSkipButton, onAction, onDismiss, onFinish, }: TutorialCardProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function TutorialCard({ actionLabel, className, title, readMoreLink, steps: propsSteps, showSkipButton, onAction, onDismiss, onFinish, includeFinalPage, useContentTitle, }: TutorialCardProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export declare namespace TutorialCard {
|
|
4
4
|
var displayName: string;
|
|
5
5
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAGhG,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,
|
|
1
|
+
{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAGhG,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,gBAAgB,EAChB,eAAe,GAChB,EAAE,iBAAiB,2CAyHnB;yBArIe,YAAY"}
|
|
@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react';
|
|
|
3
3
|
import { Box, Button, Card, H4, Icon } from '../index';
|
|
4
4
|
import { tutorialColors } from './consts';
|
|
5
5
|
import { TutorialStep } from './tutorialStep';
|
|
6
|
-
export function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish, }) {
|
|
6
|
+
export function TutorialCard({ actionLabel = 'Action', className, title, readMoreLink, steps: propsSteps = [], showSkipButton, onAction, onDismiss, onFinish, includeFinalPage, useContentTitle, }) {
|
|
7
7
|
const [steps, setSteps] = useState([]);
|
|
8
8
|
const [activeStep, setActiveStep] = useState(0);
|
|
9
9
|
useEffect(() => {
|
|
@@ -15,12 +15,12 @@ export function TutorialCard({ actionLabel = 'Action', className, title, readMor
|
|
|
15
15
|
};
|
|
16
16
|
if (readMoreLink)
|
|
17
17
|
finalStep.readMoreLink = readMoreLink;
|
|
18
|
-
setSteps([...s, { step: finalStep, key: propsSteps.length }]);
|
|
18
|
+
includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s]);
|
|
19
19
|
}
|
|
20
20
|
}, [title, propsSteps]);
|
|
21
21
|
const isStartStep = activeStep === 0;
|
|
22
|
-
const isFinalStep = activeStep === propsSteps.length;
|
|
23
|
-
return (_jsxs(Card, { bg: tutorialColors.bg, className: className, color: tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580, children: [_jsxs(Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' }, children: [_jsx(H4, { color: tutorialColors.color, children: title }), !isFinalStep && (_jsx(Button, { "aria-label": "close", icon: "uiTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))] }), _jsx(Box, { flex: 5, row: true, children: steps?.map?.(s => (_jsx(TutorialStep, { active: s.key === activeStep, content: s.step.content, readMoreLink: s.step.readMoreLink, title: s.step.title }, s.step.title))) }), _jsxs(Box, { alignItems: "center", justifyContent: "space-between", mt: 0, children: [_jsxs(Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available", children: [_jsx(Button, { "aria-label": "previous", color: tutorialColors.buttonColor, disabled: isStartStep, icon: "uiArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }), _jsx(Box, { className: "vuiTutorialStepDots", children: steps?.map?.(s => (_jsx(Icon, { color: s.key === activeStep ? tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: tutorialColors.buttonColor, name: "uiDotFull", onClick: () => setActiveStep(s.key) }, s.key))) }), _jsx(Button, { "aria-label": "next", color: tutorialColors.buttonColor, disabled: isFinalStep, icon: "uiArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })] }), (showSkipButton || isFinalStep || !!onAction) && (_jsxs(Box, { alignItems: "center", justifyContent: "space-between", children: [showSkipButton && !isFinalStep && (_jsx(Button, {
|
|
22
|
+
const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1;
|
|
23
|
+
return (_jsxs(Card, { bg: tutorialColors.bg, className: className, color: tutorialColors.color, column: true, justifyContent: "space-between", minH: 400, p: 2, pt: 1, w: 580, children: [_jsxs(Box, { alignContent: "center", alignItems: "center", flex: 0, flexDirection: "row", flexGrow: 0, justifyContent: "space-between", minH: 48, row: true, style: { WebkitFlexGrow: '0' }, children: [_jsx(H4, { color: tutorialColors.color, children: useContentTitle ? steps[activeStep]?.step?.title : title }), !isFinalStep && (_jsx(Button, { "aria-label": "close", icon: "uiTimes", onClick: onDismiss, scale: 2, variant: "tertiaryLight" }))] }), _jsx(Box, { flex: 5, row: true, children: steps?.map?.(s => (_jsx(TutorialStep, { active: s.key === activeStep, content: s.step.content, readMoreLink: s.step.readMoreLink, title: s.step.title, useContentTitle: useContentTitle }, s.step.title))) }), _jsxs(Box, { alignItems: "center", justifyContent: "space-between", mt: 0, children: [_jsxs(Box, { alignItems: "center", justifyContent: "space-between", w: "-webkit-fill-available", children: [_jsx(Button, { "aria-label": "previous", color: tutorialColors.buttonColor, disabled: isStartStep, icon: "uiArrowLeft", onClick: () => setActiveStep(activeStep - 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" }), _jsx(Box, { className: "vuiTutorialStepDots", children: steps?.map?.(s => (_jsx(Icon, { color: s.key === activeStep ? tutorialColors.color : 'darkBlue.30', cursor: "pointer", hoverColor: tutorialColors.buttonColor, name: "uiDotFull", onClick: () => setActiveStep(s.key) }, s.key))) }), _jsx(Button, { "aria-label": "next", color: tutorialColors.buttonColor, disabled: isFinalStep, icon: "uiArrowRight", onClick: () => setActiveStep(activeStep + 1), scale: 2, transition: "none", variant: "tertiaryLight", w: "34" })] }), (showSkipButton || isFinalStep || !!onAction) && (_jsxs(Box, { alignItems: "center", justifyContent: "space-between", children: [showSkipButton && !isFinalStep && (_jsx(Button, { mx: 1, onClick: onDismiss, variant: "secondaryLight", children: "Skip" })), isFinalStep && (_jsx(Button, { mx: 1, onClick: onFinish, variant: "primaryLight", children: "I got it" })), !!onAction && (_jsx(Button, { ml: 1, mr: showSkipButton || isFinalStep ? 12 : 2, onClick: onAction, variant: "primaryLight", children: actionLabel }))] }))] })] }));
|
|
24
24
|
}
|
|
25
25
|
TutorialCard.displayName = 'TutorialCard';
|
|
26
26
|
//# sourceMappingURL=tutorialCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialCard.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,MAAM,UAAU,YAAY,CAAC,EAC3B,WAAW,GAAG,QAAQ,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAU,GAAG,EAAE,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,
|
|
1
|
+
{"version":3,"file":"tutorialCard.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { TutorialStepProps } from './tutorial.types';
|
|
2
2
|
export declare const TutorialStep: {
|
|
3
|
-
({ active, content, title }: TutorialStepProps): import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
({ active, content, title, useContentTitle }: TutorialStepProps): import("react/jsx-runtime").JSX.Element;
|
|
4
4
|
displayName: string;
|
|
5
5
|
};
|
|
6
6
|
//# sourceMappingURL=tutorialStep.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialStep.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,eAAO,MAAM,YAAY;
|
|
1
|
+
{"version":3,"file":"tutorialStep.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,eAAO,MAAM,YAAY;kDAAiD,iBAAiB;;CAS1F,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Box, H5, v } from '../index';
|
|
3
3
|
import { tutorialColors } from './consts';
|
|
4
|
-
export const TutorialStep = ({ active, content, title }) => (_jsxs(v.div, { className: "vui-tutorialStep", hidden: !active, pb: 2, children: [_jsx(H5, { color: tutorialColors.color, fontWeight: "medium", mb: 1, children: title }), _jsx(Box, { children: content })] }));
|
|
4
|
+
export const TutorialStep = ({ active, content, title, useContentTitle }) => (_jsxs(v.div, { className: "vui-tutorialStep", hidden: !active, pb: 2, children: [!useContentTitle && (_jsx(H5, { color: tutorialColors.color, fontWeight: "medium", mb: 1, children: title })), _jsx(Box, { children: content })] }));
|
|
5
5
|
TutorialStep.displayName = 'TutorialStep';
|
|
6
6
|
//# sourceMappingURL=tutorialStep.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tutorialStep.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAGzC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAqB,EAAE,EAAE,CAAC,
|
|
1
|
+
{"version":3,"file":"tutorialStep.js","sourceRoot":"","sources":["../../../src/tutorial/tutorialStep.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAGzC,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,eAAe,EAAqB,EAAE,EAAE,CAAC,CAC9F,MAAC,CAAC,CAAC,GAAG,IAAC,SAAS,EAAC,kBAAkB,EAAC,MAAM,EAAE,CAAC,MAAM,EAAE,EAAE,EAAE,CAAC,aACvD,CAAC,eAAe,IAAI,CACnB,KAAC,EAAE,IAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAE,CAAC,YACvD,KAAK,GACH,CACN,EACD,KAAC,GAAG,cAAE,OAAO,GAAO,IACd,CACT,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA"}
|