@xfers/design-system 4.4.2 → 4.4.3-dev.b38cceafe1
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/StraitsXPersonalAccountLightLogo-b6f06da0.js.map +1 -1
- package/cjs/index.js +1 -1
- package/cjs/index.js.map +1 -1
- package/dist/components/Banner/index.js +0 -12
- package/dist/components/Banner/index.js.map +1 -1
- package/dist/components/Coachmark/getJoyrideConfig.js +36 -0
- package/dist/components/Coachmark/getJoyrideConfig.js.map +1 -0
- package/dist/components/Coachmark/index.js +53 -0
- package/dist/components/Coachmark/index.js.map +1 -0
- package/dist/components/Note/index.js +9 -32
- package/dist/components/Note/index.js.map +1 -1
- package/dist/index.js +7 -2
- package/dist/index.js.map +1 -1
- package/dist/logos/EmptyStraitsX.js.map +1 -1
- package/dist/types/components/Banner/index.d.ts +1 -1
- package/dist/types/components/Coachmark/getJoyrideConfig.d.ts +32 -0
- package/dist/types/components/Coachmark/index.d.ts +29 -0
- package/dist/types/components/Note/index.d.ts +3 -2
- package/dist/types/index.d.ts +5 -3
- package/es/StraitsXPersonalAccountLightLogo-88865b98.js.map +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +3 -3
|
@@ -44,7 +44,6 @@ var Banner = function (_a) {
|
|
|
44
44
|
var warningStyle = "\n color: ".concat(theme_1.straitsXTheme.color.status.warning, ";\n background: ").concat(theme_1.straitsXTheme.color.surface.subdueWarning, ";\n ");
|
|
45
45
|
var errorStyle = "\n color: ".concat(theme_1.straitsXTheme.color.status.critical, ";\n background: ").concat(theme_1.straitsXTheme.color.surface.subdueCritical, ";\n ");
|
|
46
46
|
var notificationStyle = "\n color: ".concat(theme_1.straitsXTheme.color.base.onNeutral, "};\n background: ").concat(theme_1.straitsXTheme.color.surface.SubdueInfo, ";\n ");
|
|
47
|
-
var importantStyle = "\n color: ".concat(theme_1.straitsXTheme.color.base.onNeutral, "};\n background: ").concat(theme_1.straitsXTheme.color.surface.SubdueInfo, ";\n ");
|
|
48
47
|
var getTypeStyle = function () {
|
|
49
48
|
switch (type) {
|
|
50
49
|
case 'primary':
|
|
@@ -58,8 +57,6 @@ var Banner = function (_a) {
|
|
|
58
57
|
return errorStyle;
|
|
59
58
|
case 'notification':
|
|
60
59
|
return notificationStyle;
|
|
61
|
-
case 'important':
|
|
62
|
-
return importantStyle;
|
|
63
60
|
}
|
|
64
61
|
};
|
|
65
62
|
var StyledBanner = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: ", ";\n border-radius: 5px;\n display: flex;\n vertical-align: middle;\n ", " ol {\n padding-left: 20px;\n margin: 0;\n\n > li {\n margin-bottom: 5px;\n }\n }\n "], ["\n padding: ", ";\n border-radius: 5px;\n display: flex;\n vertical-align: middle;\n ", " ol {\n padding-left: 20px;\n margin: 0;\n\n > li {\n margin-bottom: 5px;\n }\n }\n "])), spacing.sm, getTypeStyle());
|
|
@@ -80,15 +77,6 @@ var Banner = function (_a) {
|
|
|
80
77
|
else if (type === 'notification') {
|
|
81
78
|
return (react_1.default.createElement(InfoFilled_1.default, { style: { minHeight: '18px', minWidth: '18px' }, color: theme_1.straitsXTheme.color.status.info, className: (0, emotion_1.cx)(svgStyle) }));
|
|
82
79
|
}
|
|
83
|
-
else if (type === 'important') {
|
|
84
|
-
return (react_1.default.createElement("div", { style: {
|
|
85
|
-
display: 'block',
|
|
86
|
-
minWidth: '5px',
|
|
87
|
-
margin: '0 15px 0 3px',
|
|
88
|
-
borderRadius: '10px',
|
|
89
|
-
background: theme_1.straitsXTheme.color.status.info
|
|
90
|
-
} }));
|
|
91
|
-
}
|
|
92
80
|
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
93
81
|
};
|
|
94
82
|
return (react_1.default.createElement(StyledBanner, __assign({}, rest),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,mCAAiC;AACjC,uDAAiD;AACjD,uCAAiC;AACjC,yDAAmD;AACnD,iDAA2C;AAC3C,mDAA6C;AAC7C,yCAA+C;AAC/C,kEAAgE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Banner/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.getCoachmarkJoyrideConfig = getCoachmarkJoyrideConfig;
|
|
4
|
+
var theme_1 = require("src/theme/theme");
|
|
5
|
+
/**
|
|
6
|
+
* Get the default Joyride configuration for Coachmark component.
|
|
7
|
+
* This includes the arrow styling that matches the Coachmark design.
|
|
8
|
+
*
|
|
9
|
+
* @param options - Optional configuration overrides
|
|
10
|
+
* @returns Joyride configuration object with floaterProps and styles
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* ```tsx
|
|
14
|
+
* import { Coachmark, getCoachmarkJoyrideConfig } from '@xfers/design-system'
|
|
15
|
+
* import Joyride from 'react-joyride'
|
|
16
|
+
*
|
|
17
|
+
* <Joyride
|
|
18
|
+
* {...getCoachmarkJoyrideConfig()}
|
|
19
|
+
* />
|
|
20
|
+
* ```
|
|
21
|
+
*/
|
|
22
|
+
function getCoachmarkJoyrideConfig(options) {
|
|
23
|
+
var _a = options || {}, _b = _a.arrowColor, arrowColor = _b === void 0 ? theme_1.straitsXTheme.color.surface.secondaryNeutral : _b, _c = _a.arrowLength, arrowLength = _c === void 0 ? 8 : _c, _d = _a.arrowSpread, arrowSpread = _d === void 0 ? 16 : _d;
|
|
24
|
+
return {
|
|
25
|
+
floaterProps: {
|
|
26
|
+
styles: {
|
|
27
|
+
arrow: {
|
|
28
|
+
length: arrowLength,
|
|
29
|
+
spread: arrowSpread,
|
|
30
|
+
color: arrowColor,
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=getJoyrideConfig.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"getJoyrideConfig.js","sourceRoot":"","sources":["../../../src/components/Coachmark/getJoyrideConfig.ts"],"names":[],"mappings":";;AAoBA,8DAsBC;AA1CD,yCAA+C;AAE/C;;;;;;;;;;;;;;;;GAgBG;AAEH,SAAgB,yBAAyB,CAAC,OAIzC;IACO,IAAA,KAIF,OAAO,IAAI,EAAE,EAHf,kBAAyD,EAAzD,UAAU,mBAAG,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB,KAAA,EACzD,mBAAe,EAAf,WAAW,mBAAG,CAAC,KAAA,EACf,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KACD,CAAA;IAEjB,OAAO;QACL,YAAY,EAAE;YACZ,MAAM,EAAE;gBACN,KAAK,EAAE;oBACL,MAAM,EAAE,WAAW;oBACnB,MAAM,EAAE,WAAW;oBACnB,KAAK,EAAE,UAAU;iBAClB;aACF;SACF;KACF,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
3
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
4
|
+
return cooked;
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.default = Coachmark;
|
|
8
|
+
var styled_1 = require("@emotion/styled");
|
|
9
|
+
var react_1 = require("react");
|
|
10
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
11
|
+
var MaterialSymbols_1 = require("src/icons/MaterialSymbols");
|
|
12
|
+
var theme_1 = require("src/theme/theme");
|
|
13
|
+
var Link_1 = require("../Link");
|
|
14
|
+
function Coachmark(_a) {
|
|
15
|
+
var index = _a.index, primaryProps = _a.primaryProps, size = _a.size, skipProps = _a.skipProps, step = _a.step, tooltipProps = _a.tooltipProps, backProps = _a.backProps;
|
|
16
|
+
var title = step.title, content = step.content, data = step.data;
|
|
17
|
+
return (react_1.default.createElement(Container, { role: tooltipProps.role },
|
|
18
|
+
react_1.default.createElement(TextContainer, null,
|
|
19
|
+
react_1.default.createElement(Header, null,
|
|
20
|
+
react_1.default.createElement(Typography_1.Typography.Label, { size: "md" }, title),
|
|
21
|
+
react_1.default.createElement(SkipAction, { role: skipProps.role, onClick: skipProps.onClick },
|
|
22
|
+
react_1.default.createElement(MaterialSymbols_1.MaterialSymbols, { icon: "close", size: "m" }))),
|
|
23
|
+
react_1.default.createElement(Typography_1.Typography.Body, { size: "md" }, content)),
|
|
24
|
+
react_1.default.createElement(Footer, null,
|
|
25
|
+
react_1.default.createElement(Dots, null, Array.from({ length: size }, function (_, i) {
|
|
26
|
+
if (index === 0 && (data === null || data === void 0 ? void 0 : data.skipZeroIndex) === true) {
|
|
27
|
+
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
28
|
+
}
|
|
29
|
+
return react_1.default.createElement(Dot, { key: i, isActive: i === index });
|
|
30
|
+
})),
|
|
31
|
+
react_1.default.createElement(ButtonContainer, null,
|
|
32
|
+
backProps && (react_1.default.createElement(BackButton, { typographyType: "label", size: "md", role: backProps === null || backProps === void 0 ? void 0 : backProps.role, isDisabled: index === 0, onClick: backProps.onClick, isUnderlined: false }, "Back")),
|
|
33
|
+
react_1.default.createElement(Link_1.default, { typographyType: "label", size: "md", role: primaryProps.role, onClick: primaryProps.onClick, isUnderlined: false }, "Next")))));
|
|
34
|
+
}
|
|
35
|
+
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
|
+
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);
|
|
37
|
+
var Header = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
38
|
+
var SkipAction = (0, styled_1.default)(Link_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n text-decoration: none !important;\n"], ["\n text-decoration: none !important;\n"])));
|
|
39
|
+
var Footer = styled_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
40
|
+
var Dots = styled_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n"])));
|
|
41
|
+
var Dot = styled_1.default.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ", ";\n"], ["\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background-color: ", ";\n"])), function (props) {
|
|
42
|
+
return props.isActive
|
|
43
|
+
? "".concat(theme_1.straitsXTheme.color.base.primary3)
|
|
44
|
+
: "".concat(theme_1.straitsXTheme.color.surface.disabledOnSurface);
|
|
45
|
+
});
|
|
46
|
+
var BackButton = (0, styled_1.default)(Link_1.default)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n h5 {\n color: ", ";\n }\n pointer-events: ", ";\n"], ["\n h5 {\n color: ", ";\n }\n pointer-events: ", ";\n"])), function (props) {
|
|
47
|
+
return props.isDisabled
|
|
48
|
+
? "".concat(theme_1.straitsXTheme.color.surface.disabledOnSurface)
|
|
49
|
+
: "".concat(theme_1.straitsXTheme.color.base.link);
|
|
50
|
+
}, function (props) { return (props.isDisabled ? 'none' : 'auto'); });
|
|
51
|
+
var ButtonContainer = styled_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n"], ["\n display: flex;\n gap: 8px;\n"])));
|
|
52
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|
|
53
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Coachmark/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -3,43 +3,20 @@ 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
|
-
};
|
|
17
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
18
|
-
var t = {};
|
|
19
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
20
|
-
t[p] = s[p];
|
|
21
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
22
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
23
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
24
|
-
t[p[i]] = s[p[i]];
|
|
25
|
-
}
|
|
26
|
-
return t;
|
|
27
|
-
};
|
|
28
6
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
7
|
var react_1 = require("react");
|
|
30
8
|
var styled_1 = require("@emotion/styled");
|
|
31
|
-
var
|
|
32
|
-
var
|
|
9
|
+
var theme_1 = require("src/theme/theme");
|
|
10
|
+
var Typography_1 = require("src/constants/Typography/Typography");
|
|
33
11
|
var Note = function (_a) {
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
var TextContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-left: ", ";\n "], ["\n margin-left: ", ";\n "])), spacing.md);
|
|
39
|
-
return (react_1.default.createElement(StyledNote, __assign({}, props),
|
|
12
|
+
var title = _a.title, children = _a.children;
|
|
13
|
+
var StyledNote = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background: ", ";\n padding: 4px;\n border-radius: 8px;\n "], ["\n width: 100%;\n background: ", ";\n padding: 4px;\n border-radius: 8px;\n "])), theme_1.straitsXTheme.color.surface.subduePositive);
|
|
14
|
+
var StyledContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n ::before {\n content: '';\n height: 100%;\n width: 5px;\n background: ", ";\n border-radius: 5px;\n position: absolute;\n left: 0;\n }\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 5px 0 5px 15px;\n gap: 5px;\n "], ["\n position: relative;\n ::before {\n content: '';\n height: 100%;\n width: 5px;\n background: ", ";\n border-radius: 5px;\n position: absolute;\n left: 0;\n }\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 5px 0 5px 15px;\n gap: 5px;\n "])), theme_1.straitsXTheme.color.status.positive);
|
|
15
|
+
return (react_1.default.createElement(StyledNote, null,
|
|
40
16
|
react_1.default.createElement(StyledContainer, null,
|
|
41
|
-
react_1.default.createElement(
|
|
17
|
+
react_1.default.createElement(Typography_1.Typography.Label, { size: "md" }, title),
|
|
18
|
+
react_1.default.createElement(Typography_1.Typography.Body, { size: "md" }, children))));
|
|
42
19
|
};
|
|
43
20
|
exports.default = Note;
|
|
44
|
-
var templateObject_1, templateObject_2
|
|
21
|
+
var templateObject_1, templateObject_2;
|
|
45
22
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Note/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Note/index.tsx"],"names":[],"mappings":";;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,yCAA+C;AAC/C,kEAAgE;AAOhE,IAAM,IAAI,GAAG,UAAC,EAA8B;QAA5B,KAAK,WAAA,EAAE,QAAQ,cAAA;IAC7B,IAAM,UAAU,GAAG,gBAAM,CAAC,GAAG,8JAAA,sCAEb,EAA0C,mDAGzD,KAHe,qBAAa,CAAC,KAAK,CAAC,OAAO,CAAC,cAAc,CAGzD,CAAA;IACD,IAAM,eAAe,GAAG,gBAAM,CAAC,GAAG,gZAAA,2HAMhB,EAAmC,gNAUpD,KAViB,qBAAa,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAUpD,CAAA;IAED,OAAO,CACL,8BAAC,UAAU;QACT,8BAAC,eAAe;YACd,8BAAC,uBAAU,CAAC,KAAK,IAAC,IAAI,EAAC,IAAI,IAAE,KAAK,CAAoB;YACtD,8BAAC,uBAAU,CAAC,IAAI,IAAC,IAAI,EAAC,IAAI,IAAE,QAAQ,CAAmB,CACvC,CACP,CACd,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA"}
|
package/dist/index.js
CHANGED
|
@@ -16,8 +16,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
16
16
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
17
17
|
};
|
|
18
18
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
|
-
exports.
|
|
20
|
-
exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = void 0;
|
|
19
|
+
exports.MaterialSymbols = exports.getCoachmarkJoyrideConfig = exports.Coachmark = exports.Timeline = exports.SummaryCard = exports.Spin = exports.ErrorPage = exports.Tooltip = exports.CopyBox = exports.Section = exports.Banner = exports.Note = exports.ContentBreakdown = exports.Hidden = exports.Link = exports.Divider = exports.EmptyData = exports.SmallP = exports.P1Bold = exports.P1 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Checkbox = exports.DatePicker = exports.Timer = exports.Tabs = exports.Table = exports.Steps = exports.Select = exports.RangePicker = exports.Radio = exports.Pagination = exports.DeprecatedModal = exports.Modal = exports.Label = exports.Input = exports.Form = exports.DynamicSelect = exports.Dropdown = exports.Carousel = exports.Chart = exports.Card = exports.BadgeIcon = exports.Accordion = exports.ActionCard = exports.ActionButton = exports.Button = exports.Alert = void 0;
|
|
20
|
+
exports.LINE_HEIGHT = exports.FONT_SIZE = exports.FONT_WEIGHT = exports.FALLBACK_FONT = exports.MAIN_FONT = exports.BACKGROUND_COLORS = exports.TEXT_COLORS = exports.ICON_COLORS = exports.MAIN_COLORS = exports.NEUTRAL_COLORS = exports.YELLOW_COLORS = exports.RED_COLORS = exports.GREEN_COLORS = exports.BLUE_COLORS = exports.TABLET_BREAKPOINT = exports.LAPTOP_BREAKPOINT = exports.DESKTOP_BREAKPOINT = exports.EXTRA_LARGE_DESKTOP_BREAKPOINT = exports.useModal = exports.ModalProvider = exports.straitsXTheme = exports.xfersTheme = exports.useTheme = exports.ThemeProvider = exports.Typography = void 0;
|
|
21
21
|
// Components
|
|
22
22
|
var Alert_1 = require("./components/Alert");
|
|
23
23
|
Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return Alert_1.default; } });
|
|
@@ -107,6 +107,11 @@ var SummaryCard_1 = require("./components/SummaryCard");
|
|
|
107
107
|
Object.defineProperty(exports, "SummaryCard", { enumerable: true, get: function () { return SummaryCard_1.default; } });
|
|
108
108
|
var Timeline_1 = require("./components/Timeline");
|
|
109
109
|
Object.defineProperty(exports, "Timeline", { enumerable: true, get: function () { return Timeline_1.default; } });
|
|
110
|
+
var Coachmark_1 = require("./components/Coachmark");
|
|
111
|
+
Object.defineProperty(exports, "Coachmark", { enumerable: true, get: function () { return Coachmark_1.default; } });
|
|
112
|
+
// Helper Functions
|
|
113
|
+
var getJoyrideConfig_1 = require("./components/Coachmark/getJoyrideConfig");
|
|
114
|
+
Object.defineProperty(exports, "getCoachmarkJoyrideConfig", { enumerable: true, get: function () { return getJoyrideConfig_1.getCoachmarkJoyrideConfig; } });
|
|
110
115
|
// Icons
|
|
111
116
|
__exportStar(require("./icons"), exports);
|
|
112
117
|
var MaterialSymbols_1 = require("./icons/MaterialSymbols");
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,0EAA0E;AAC1E,iCAAiC;;;;;;;;;;;;;;;;;;AAEjC,aAAa;AACb,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,8CAAuD;AAA9C,gGAAA,OAAO,OAAU;AAC1B,0DAAmE;AAA1D,4GAAA,OAAO,OAAgB;AAChC,sDAA+D;AAAtD,wGAAA,OAAO,OAAc;AAC9B,oDAA6D;AAApD,sGAAA,OAAO,OAAa;AAC7B,oDAA6D;AAApD,sGAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,4FAAA,OAAO,OAAQ;AACxB,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,kDAA2D;AAAlD,oGAAA,OAAO,OAAY;AAC5B,kDAA2D;AAAlD,oGAAA,OAAO,OAAY;AAC5B,4DAAqE;AAA5D,8GAAA,OAAO,OAAiB;AACjC,0CAAmD;AAA1C,4FAAA,OAAO,OAAQ;AACxB,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,gEAAyE;AAAhE,kHAAA,OAAO,OAAmB;AACnC,sDAA+D;AAAtD,wGAAA,OAAO,OAAc;AAC9B,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,wDAAiE;AAAxD,0GAAA,OAAO,OAAe;AAC/B,8CAAuD;AAA9C,gGAAA,OAAO,OAAU;AAC1B,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,0CAAmD;AAA1C,4FAAA,OAAO,OAAQ;AACxB,4CAAqD;AAA5C,8FAAA,OAAO,OAAS;AACzB,sDAA+D;AAAtD,wGAAA,OAAO,OAAc;AAC9B,kDAA2D;AAAlD,oGAAA,OAAO,OAAY;AAC5B,sDAA4E;AAAnE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,gGAAA,EAAE,OAAA;AAAE,oGAAA,MAAM,OAAA;AAAE,oGAAA,MAAM,OAAA;AAC3C,oDAA6D;AAApD,sGAAA,OAAO,OAAa;AAC7B,gDAAyD;AAAhD,kGAAA,OAAO,OAAW;AAC3B,0CAAmD;AAA1C,4FAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,gGAAA,OAAO,OAAU;AAC1B,kEAA2E;AAAlE,oHAAA,OAAO,OAAoB;AACpC,0CAAmD;AAA1C,4FAAA,OAAO,OAAQ;AACxB,8CAAuD;AAA9C,gGAAA,OAAO,OAAU;AAC1B,0CAA2C;AAAlC,+FAAA,OAAO,OAAA;AAChB,gDAAyD;AAAhD,kGAAA,OAAO,OAAW;AAC3B,gDAAyD;AAAhD,kGAAA,OAAO,OAAW;AAC3B,oDAA6D;AAApD,sGAAA,OAAO,OAAa;AAC7B,0CAAmD;AAA1C,4FAAA,OAAO,OAAQ;AACxB,wDAAiE;AAAxD,0GAAA,OAAO,OAAe;AAC/B,kDAA2D;AAAlD,oGAAA,OAAO,OAAY;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmptyStraitsX.js","sourceRoot":"","sources":["../../src/logos/EmptyStraitsX.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,6BAA8B;AAE9B,SAAS,aAAa,CAAC,KAAoC;IACzD,OAAO,CACL,sCACE,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,
|
|
1
|
+
{"version":3,"file":"EmptyStraitsX.js","sourceRoot":"","sources":["../../src/logos/EmptyStraitsX.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type BannerProps = {
|
|
3
|
-
type?: 'primary' | 'success' | 'warning' | 'error' | 'notification'
|
|
3
|
+
type?: 'primary' | 'success' | 'warning' | 'error' | 'notification';
|
|
4
4
|
withIcon?: boolean;
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Get the default Joyride configuration for Coachmark component.
|
|
3
|
+
* This includes the arrow styling that matches the Coachmark design.
|
|
4
|
+
*
|
|
5
|
+
* @param options - Optional configuration overrides
|
|
6
|
+
* @returns Joyride configuration object with floaterProps and styles
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { Coachmark, getCoachmarkJoyrideConfig } from '@xfers/design-system'
|
|
11
|
+
* import Joyride from 'react-joyride'
|
|
12
|
+
*
|
|
13
|
+
* <Joyride
|
|
14
|
+
* {...getCoachmarkJoyrideConfig()}
|
|
15
|
+
* />
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare function getCoachmarkJoyrideConfig(options?: {
|
|
19
|
+
arrowColor?: string;
|
|
20
|
+
arrowLength?: number;
|
|
21
|
+
arrowSpread?: number;
|
|
22
|
+
}): {
|
|
23
|
+
floaterProps: {
|
|
24
|
+
styles: {
|
|
25
|
+
arrow: {
|
|
26
|
+
length: number;
|
|
27
|
+
spread: number;
|
|
28
|
+
color: string;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
};
|
|
32
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
type CoachmarkProps = {
|
|
3
|
+
index: number;
|
|
4
|
+
size: number;
|
|
5
|
+
step: {
|
|
6
|
+
title: ReactNode;
|
|
7
|
+
content: ReactNode;
|
|
8
|
+
data?: {
|
|
9
|
+
skipZeroIndex?: boolean;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
12
|
+
tooltipProps: {
|
|
13
|
+
role: string;
|
|
14
|
+
};
|
|
15
|
+
skipProps: {
|
|
16
|
+
role: string;
|
|
17
|
+
onClick: () => void;
|
|
18
|
+
};
|
|
19
|
+
primaryProps: {
|
|
20
|
+
role: string;
|
|
21
|
+
onClick: () => void;
|
|
22
|
+
};
|
|
23
|
+
backProps?: {
|
|
24
|
+
role: string;
|
|
25
|
+
onClick: () => void;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
export default function Coachmark({ index, primaryProps, size, skipProps, step, tooltipProps, backProps, }: CoachmarkProps): React.JSX.Element;
|
|
29
|
+
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type NoteProps = {
|
|
3
|
+
title: string;
|
|
3
4
|
children: React.ReactNode;
|
|
4
|
-
}
|
|
5
|
-
declare const Note: ({
|
|
5
|
+
};
|
|
6
|
+
declare const Note: ({ title, children }: NoteProps) => React.JSX.Element;
|
|
6
7
|
export default Note;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -39,6 +39,8 @@ export { default as ErrorPage } from './components/ErrorPage';
|
|
|
39
39
|
export { default as Spin } from './components/Spin';
|
|
40
40
|
export { default as SummaryCard } from './components/SummaryCard';
|
|
41
41
|
export { default as Timeline } from './components/Timeline';
|
|
42
|
+
export { default as Coachmark } from './components/Coachmark';
|
|
43
|
+
export { getCoachmarkJoyrideConfig } from './components/Coachmark/getJoyrideConfig';
|
|
42
44
|
export * from './icons';
|
|
43
45
|
export { MaterialSymbols } from './icons/MaterialSymbols';
|
|
44
46
|
export * from './logos';
|
|
@@ -46,6 +48,6 @@ export { Typography } from './constants/Typography/Typography';
|
|
|
46
48
|
export { ThemeProvider, useTheme } from './theme/ThemeContext';
|
|
47
49
|
export { xfersTheme, straitsXTheme } from './theme/theme';
|
|
48
50
|
export { ModalProvider, useModal } from './shared/modalContext';
|
|
49
|
-
export { EXTRA_LARGE_DESKTOP_BREAKPOINT, DESKTOP_BREAKPOINT, LAPTOP_BREAKPOINT, TABLET_BREAKPOINT } from './constants/breakPoints';
|
|
50
|
-
export { BLUE_COLORS, GREEN_COLORS, RED_COLORS, YELLOW_COLORS, NEUTRAL_COLORS, MAIN_COLORS, ICON_COLORS, TEXT_COLORS, BACKGROUND_COLORS } from './shared/ColorStyles';
|
|
51
|
-
export { MAIN_FONT, FALLBACK_FONT, FONT_WEIGHT, FONT_SIZE, LINE_HEIGHT } from './shared/TypographyStyles';
|
|
51
|
+
export { EXTRA_LARGE_DESKTOP_BREAKPOINT, DESKTOP_BREAKPOINT, LAPTOP_BREAKPOINT, TABLET_BREAKPOINT, } from './constants/breakPoints';
|
|
52
|
+
export { BLUE_COLORS, GREEN_COLORS, RED_COLORS, YELLOW_COLORS, NEUTRAL_COLORS, MAIN_COLORS, ICON_COLORS, TEXT_COLORS, BACKGROUND_COLORS, } from './shared/ColorStyles';
|
|
53
|
+
export { MAIN_FONT, FALLBACK_FONT, FONT_WEIGHT, FONT_SIZE, LINE_HEIGHT, } from './shared/TypographyStyles';
|