@xfers/design-system 4.4.5-dev.59905ab06a → 4.4.5-dev.59aa6ba8e4
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/Banner/index.js +12 -0
- package/dist/components/Banner/index.js.map +1 -1
- package/dist/components/Note/index.js +32 -11
- package/dist/components/Note/index.js.map +1 -1
- package/dist/types/components/Banner/index.d.ts +1 -1
- package/dist/types/components/Note/index.d.ts +2 -3
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -44,6 +44,7 @@ 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 ");
|
|
47
48
|
var getTypeStyle = function () {
|
|
48
49
|
switch (type) {
|
|
49
50
|
case 'primary':
|
|
@@ -57,6 +58,8 @@ var Banner = function (_a) {
|
|
|
57
58
|
return errorStyle;
|
|
58
59
|
case 'notification':
|
|
59
60
|
return notificationStyle;
|
|
61
|
+
case 'important':
|
|
62
|
+
return importantStyle;
|
|
60
63
|
}
|
|
61
64
|
};
|
|
62
65
|
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());
|
|
@@ -77,6 +80,15 @@ var Banner = function (_a) {
|
|
|
77
80
|
else if (type === 'notification') {
|
|
78
81
|
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) }));
|
|
79
82
|
}
|
|
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
|
+
}
|
|
80
92
|
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
81
93
|
};
|
|
82
94
|
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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"}
|
|
@@ -3,22 +3,43 @@ 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
|
+
};
|
|
6
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
29
|
var react_1 = require("react");
|
|
8
30
|
var styled_1 = require("@emotion/styled");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
31
|
+
var Typography_1 = require("src/components/Typography");
|
|
32
|
+
var ThemeContext_1 = require("src/theme/ThemeContext");
|
|
11
33
|
var Note = function (_a) {
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var StyledNote = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n background: ", ";\n padding:
|
|
15
|
-
var StyledContainer = styled_1.default.
|
|
16
|
-
|
|
34
|
+
var children = _a.children, props = __rest(_a, ["children"]);
|
|
35
|
+
var _b = (0, ThemeContext_1.useTheme)(), brand = _b.brand, spacing = _b.spacing;
|
|
36
|
+
var StyledNote = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n background: ", ";\n padding: ", ";\n border-radius: 5px;\n "], ["\n position: relative;\n width: 100%;\n background: ", ";\n padding: ", ";\n border-radius: 5px;\n "])), brand.primary.background, spacing.sm);
|
|
37
|
+
var StyledContainer = (0, styled_1.default)(Typography_1.P1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n\n ::before {\n content: '';\n height: 100%;\n width: ", ";\n background: ", ";\n border-radius: 5px;\n position: absolute;\n }\n "], ["\n position: relative;\n\n ::before {\n content: '';\n height: 100%;\n width: ", ";\n background: ", ";\n border-radius: 5px;\n position: absolute;\n }\n "])), spacing.xs, brand.primary.emphasis);
|
|
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),
|
|
17
40
|
react_1.default.createElement(StyledContainer, null,
|
|
18
|
-
react_1.default.createElement(
|
|
19
|
-
isList ? (react_1.default.createElement(Typography_1.Typography.Body, { size: "md", style: { scrollbarWidth: 'none' } },
|
|
20
|
-
react_1.default.createElement("ol", { style: { margin: 0, paddingLeft: '20px' } }, children.map(function (child, index) { return (react_1.default.createElement("li", { key: index }, child)); })))) : (react_1.default.createElement(Typography_1.Typography.Body, { size: "md", style: { scrollbarWidth: 'none' } }, children)))));
|
|
41
|
+
react_1.default.createElement(TextContainer, null, children))));
|
|
21
42
|
};
|
|
22
43
|
exports.default = Note;
|
|
23
|
-
var templateObject_1, templateObject_2;
|
|
44
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
24
45
|
//# 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,wDAA8C;AAC9C,uDAAiD;AAMjD,IAAM,IAAI,GAAG,UAAC,EAAiC;IAA/B,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC1B,IAAA,KAAqB,IAAA,uBAAQ,GAAE,EAA7B,KAAK,WAAA,EAAE,OAAO,aAAe,CAAA;IAErC,IAAM,UAAU,GAAG,gBAAM,CAAC,GAAG,wLAAA,+DAGb,EAAwB,kBAC3B,EAAU,gCAEtB,KAHe,KAAK,CAAC,OAAO,CAAC,UAAU,EAC3B,OAAO,CAAC,EAAE,CAEtB,CAAA;IACD,IAAM,eAAe,GAAG,IAAA,gBAAM,EAAC,eAAE,CAAC,uQAAA,qGAMrB,EAAU,uBACL,EAAsB,oEAIvC,KALY,OAAO,CAAC,EAAE,EACL,KAAK,CAAC,OAAO,CAAC,QAAQ,CAIvC,CAAA;IACD,IAAM,aAAa,GAAG,gBAAM,CAAC,GAAG,iGAAA,qBACf,EAAU,OAC1B,KADgB,OAAO,CAAC,EAAE,CAC1B,CAAA;IACD,OAAO,CACL,8BAAC,UAAU,eAAK,KAAK;QACnB,8BAAC,eAAe;YACd,8BAAC,aAAa,QAAE,QAAQ,CAAiB,CACzB,CACP,CACd,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA"}
|
|
@@ -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' | 'important';
|
|
4
4
|
withIcon?: boolean;
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
} & React.HTMLAttributes<HTMLDivElement>;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type NoteProps = {
|
|
3
|
-
title: string;
|
|
4
3
|
children: React.ReactNode;
|
|
5
|
-
}
|
|
6
|
-
declare const Note: ({
|
|
4
|
+
} & React.HTMLAttributes<HTMLDivElement>;
|
|
5
|
+
declare const Note: ({ children, ...props }: NoteProps) => React.JSX.Element;
|
|
7
6
|
export default Note;
|