@xfers/design-system 4.4.2-dev.d2734e8765 → 4.4.2-dev.fe0cf9b6aa
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/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/dist/components/Coachmark/index.js +16 -5
- package/dist/components/Coachmark/index.js.map +1 -1
- package/dist/types/components/Coachmark/index.d.ts +28 -8
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
4
|
return cooked;
|
|
5
5
|
};
|
|
6
|
+
var __assign = (this && this.__assign) || function () {
|
|
7
|
+
__assign = Object.assign || function(t) {
|
|
8
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
9
|
+
s = arguments[i];
|
|
10
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
11
|
+
t[p] = s[p];
|
|
12
|
+
}
|
|
13
|
+
return t;
|
|
14
|
+
};
|
|
15
|
+
return __assign.apply(this, arguments);
|
|
16
|
+
};
|
|
6
17
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
18
|
exports.default = Coachmark;
|
|
8
19
|
var styled_1 = require("@emotion/styled");
|
|
@@ -12,13 +23,13 @@ var MaterialSymbols_1 = require("src/icons/MaterialSymbols");
|
|
|
12
23
|
var theme_1 = require("src/theme/theme");
|
|
13
24
|
var Link_1 = require("../Link");
|
|
14
25
|
function Coachmark(_a) {
|
|
15
|
-
var index = _a.index, primaryProps = _a.primaryProps, size = _a.size,
|
|
26
|
+
var index = _a.index, primaryProps = _a.primaryProps, size = _a.size, step = _a.step, tooltipProps = _a.tooltipProps, backProps = _a.backProps, closeProps = _a.closeProps;
|
|
16
27
|
var title = step.title, content = step.content, data = step.data;
|
|
17
|
-
return (react_1.default.createElement(Container, {
|
|
28
|
+
return (react_1.default.createElement(Container, __assign({}, tooltipProps),
|
|
18
29
|
react_1.default.createElement(TextContainer, null,
|
|
19
30
|
react_1.default.createElement(Header, null,
|
|
20
31
|
react_1.default.createElement(Typography_1.Typography.Label, { size: "md" }, title),
|
|
21
|
-
react_1.default.createElement(SkipAction, {
|
|
32
|
+
react_1.default.createElement(SkipAction, __assign({}, closeProps),
|
|
22
33
|
react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "close", size: "m" }))),
|
|
23
34
|
react_1.default.createElement(Typography_1.Typography.Body, { size: "md" }, content)),
|
|
24
35
|
react_1.default.createElement(Footer, null,
|
|
@@ -29,8 +40,8 @@ function Coachmark(_a) {
|
|
|
29
40
|
return react_1.default.createElement(Dot, { key: i, isActive: i === index });
|
|
30
41
|
})),
|
|
31
42
|
react_1.default.createElement(ButtonContainer, null,
|
|
32
|
-
backProps && (react_1.default.createElement(BackButton, { typographyType: "label", size: "md",
|
|
33
|
-
react_1.default.createElement(Link_1.default, { typographyType: "label", size: "md",
|
|
43
|
+
backProps && (react_1.default.createElement(BackButton, __assign({ typographyType: "label", size: "md" }, backProps, { isDisabled: index === 0, isUnderlined: false }), "Back")),
|
|
44
|
+
react_1.default.createElement(Link_1.default, __assign({ typographyType: "label", size: "md" }, primaryProps, { isUnderlined: false }), "Next")))));
|
|
34
45
|
}
|
|
35
46
|
var Container = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 12px;\n min-width: 200px;\n max-width: 260px;\n"], ["\n background-color: ", ";\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n gap: 24px;\n padding: 12px;\n min-width: 200px;\n max-width: 260px;\n"])), theme_1.straitsXTheme.color.surface.secondaryNeutral);
|
|
36
47
|
var TextContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: ", ";\n"], ["\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: ", ";\n"])), theme_1.straitsXTheme.color.base.onNeutral);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Coachmark/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Coachmark/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,29 +1,49 @@
|
|
|
1
|
-
import React, { ReactNode } from 'react';
|
|
1
|
+
import React, { ReactNode, RefCallback } from 'react';
|
|
2
2
|
type CoachmarkProps = {
|
|
3
|
+
continuous: boolean;
|
|
3
4
|
index: number;
|
|
5
|
+
isLastStep: boolean;
|
|
4
6
|
size: number;
|
|
5
7
|
step: {
|
|
6
|
-
title
|
|
8
|
+
title?: ReactNode;
|
|
7
9
|
content: ReactNode;
|
|
8
10
|
data?: {
|
|
9
11
|
skipZeroIndex?: boolean;
|
|
10
12
|
};
|
|
11
13
|
};
|
|
12
|
-
|
|
14
|
+
backProps: {
|
|
15
|
+
'aria-label': string;
|
|
16
|
+
'data-action': string;
|
|
17
|
+
onClick: () => void;
|
|
13
18
|
role: string;
|
|
19
|
+
title: string;
|
|
14
20
|
};
|
|
15
|
-
|
|
16
|
-
|
|
21
|
+
closeProps: {
|
|
22
|
+
'aria-label': string;
|
|
23
|
+
'data-action': string;
|
|
17
24
|
onClick: () => void;
|
|
25
|
+
role: string;
|
|
26
|
+
title: string;
|
|
18
27
|
};
|
|
19
28
|
primaryProps: {
|
|
29
|
+
'aria-label': string;
|
|
30
|
+
'data-action': string;
|
|
31
|
+
onClick: () => void;
|
|
20
32
|
role: string;
|
|
33
|
+
title: string;
|
|
34
|
+
};
|
|
35
|
+
skipProps: {
|
|
36
|
+
'aria-label': string;
|
|
37
|
+
'data-action': string;
|
|
21
38
|
onClick: () => void;
|
|
39
|
+
role: string;
|
|
40
|
+
title: string;
|
|
22
41
|
};
|
|
23
|
-
|
|
42
|
+
tooltipProps: {
|
|
43
|
+
'aria-modal': boolean;
|
|
44
|
+
ref: RefCallback<HTMLElement>;
|
|
24
45
|
role: string;
|
|
25
|
-
onClick: () => void;
|
|
26
46
|
};
|
|
27
47
|
};
|
|
28
|
-
export default function Coachmark({ index, primaryProps, size,
|
|
48
|
+
export default function Coachmark({ index, primaryProps, size, step, tooltipProps, backProps, closeProps, }: CoachmarkProps): React.JSX.Element;
|
|
29
49
|
export {};
|