@xfers/design-system 2.37.0 → 2.38.0
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/icons.js +1 -1
- package/cjs/icons.js.map +1 -1
- package/cjs/index.js +2 -2
- package/cjs/index.js.map +1 -1
- package/dist/components/Button/Button.js +5 -5
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/icons/Camera.js +3 -4
- package/dist/icons/Camera.js.map +1 -1
- package/dist/shared/theme.js +1 -1
- package/dist/shared/themeContext.js +2 -2
- package/dist/shared/themeContext.js.map +1 -1
- package/dist/types/components/Button/Button.d.ts +2 -1
- package/dist/types/icons/Camera.d.ts +2 -2
- package/dist/types/shared/theme.d.ts +2 -2
- package/dist/types/shared/themeContext.d.ts +3 -3
- package/es/icons.js +1 -1
- package/es/icons.js.map +1 -1
- package/es/index.js +1 -1
- package/es/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -35,8 +35,8 @@ var spacing_1 = require("src/constants/spacing");
|
|
|
35
35
|
var themeContext_1 = require("src/shared/themeContext");
|
|
36
36
|
var theme_1 = require("src/shared/theme");
|
|
37
37
|
var CustomButton = function (_a) {
|
|
38
|
-
var _b = _a.type, type = _b === void 0 ? 'primary' : _b, size = _a.size, iconColor = _a.iconColor, _c = _a.
|
|
39
|
-
var
|
|
38
|
+
var _b = _a.type, type = _b === void 0 ? 'primary' : _b, size = _a.size, iconColor = _a.iconColor, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.isDisabled, isDisabled = _d === void 0 ? false : _d, _e = _a.isFullWidth, isFullWidth = _e === void 0 ? false : _e, _f = _a.className, className = _f === void 0 ? '' : _f, children = _a.children, rest = __rest(_a, ["type", "size", "iconColor", "disabled", "isDisabled", "isFullWidth", "className", "children"]);
|
|
39
|
+
var _g = themeContext_1.useTheme(), brand = _g.brand, button = _g.button, actionButton = _g.actionButton;
|
|
40
40
|
var primaryStyle = "\n background-color: " + brand.action.default + ";\n color: " + brand.primary.contrast + ";\n border: none;\n\n &:focus {\n background-color: " + brand.action.default + ";\n color: " + brand.primary.contrast + ";\n border: none;\n }\n \n &:active {\n background-color: " + brand.action.default + ";\n color: " + brand.primary.contrast + ";\n border: none;\n }\n &:hover {\n background-color: " + brand.action.hover + ";\n color: " + brand.primary.contrast + ";\n border: none;\n }\n ";
|
|
41
41
|
var secondaryStyle = "\n background-color: " + button.background + ";\n color: " + button.color + ";\n border: 1px solid " + button.border + ";\n\n &:focus {\n background-color: " + button.background + ";\n color: " + button.color + ";\n border: 1px solid " + button.border + ";\n }\n\n &:hover {\n background-color: " + button.background + ";\n color: " + button.hover + ";\n border: 1px solid " + button.border + ";\n }\n\n &:active {\n background-color: " + button.background + ";\n color: " + button.color + ";\n border: 1px solid " + button.border + ";\n }\n\n &[ant-click-animating-without-extra-node]:after {\n --antd-wave-shadow-color: " + theme_1.straitsXTheme.brand.primary.default + ";\n }\n ";
|
|
42
42
|
var tertiaryStyle = "\n background-color: transparent;\n color: " + brand.primary.default + ";\n border: none;\n\n &:focus {\n background-color: transparent;\n color: " + brand.primary.default + ";\n border: none;\n }\n\n &:hover {\n background-color: transparent;\n color: " + brand.action.hover + ";\n border: none;\n }\n\n &:active {\n background-color: transparent;\n color: " + brand.action.default + ";\n border: none;\n }\n ";
|
|
@@ -44,13 +44,13 @@ var CustomButton = function (_a) {
|
|
|
44
44
|
var fullWidthStyle = "\n width: 100%;\n ";
|
|
45
45
|
var defaultIconStyle = "\n color: " + actionButton.color + ";\n\n &:focus {\n color: " + actionButton.color + ";\n }\n\n &:hover {\n color: " + actionButton.hover + ";\n }\n\n &:active {\n color: " + actionButton.color + ";\n }\n ";
|
|
46
46
|
var primaryIconStyle = "\n color: " + brand.action.default + ";\n\n &:focus {\n color: " + brand.action.default + ";\n }\n\n &:hover {\n color: " + brand.action.hover + ";\n }\n\n &:active {\n color: " + brand.action.default + ";\n }\n ";
|
|
47
|
-
var StyledButton = styled_1.default(button_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.ant-btn {\n text-shadow: none;\n -webkit-font-smoothing: antialiased;\n border-radius: 5px;\n height: unset;\n box-shadow: none;\n line-height: 0.75;\n ", ";\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n padding: ", ";\n\n & > svg {\n vertical-align: middle;\n font-size: 16px;\n margin-right: 6px;\n ", "\n }\n }\n "], ["\n &.ant-btn {\n text-shadow: none;\n -webkit-font-smoothing: antialiased;\n border-radius: 5px;\n height: unset;\n box-shadow: none;\n line-height: 0.75;\n ", ";\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n padding: ",
|
|
48
|
-
";\n\n & > svg {\n vertical-align: middle;\n font-size: 16px;\n margin-right: 6px;\n ", "\n }\n }\n "])), fontStyles_1.baseStyle, size === 'small' ? fontStyles_1.smallButtonStyle : fontStyles_1.buttonStyle, type === 'primary' && primaryStyle, type === 'secondary' && secondaryStyle, type === 'tertiary' && tertiaryStyle, isDisabled === true && disabledStyle, isFullWidth && fullWidthStyle, type === 'tertiary'
|
|
47
|
+
var StyledButton = styled_1.default(button_1.default)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n &.ant-btn {\n text-shadow: none;\n -webkit-font-smoothing: antialiased;\n border-radius: 5px;\n height: unset;\n box-shadow: none;\n line-height: 0.75;\n ", ";\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n padding: ", ";\n\n & > svg {\n vertical-align: middle;\n font-size: 16px;\n margin-right: 6px;\n ", "\n }\n }\n "], ["\n &.ant-btn {\n text-shadow: none;\n -webkit-font-smoothing: antialiased;\n border-radius: 5px;\n height: unset;\n box-shadow: none;\n line-height: 0.75;\n ", ";\n ", ";\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n padding: ",
|
|
48
|
+
";\n\n & > svg {\n vertical-align: middle;\n font-size: 16px;\n margin-right: 6px;\n ", "\n }\n }\n "])), fontStyles_1.baseStyle, size === 'small' ? fontStyles_1.smallButtonStyle : fontStyles_1.buttonStyle, type === 'primary' && primaryStyle, type === 'secondary' && secondaryStyle, type === 'tertiary' && tertiaryStyle, disabled === true && disabledStyle, isDisabled === true && disabledStyle, isFullWidth && fullWidthStyle, type === 'tertiary'
|
|
49
49
|
? 0
|
|
50
50
|
: size === 'small'
|
|
51
51
|
? spacing_1.SMALL_SPACING
|
|
52
52
|
: spacing_1.MEDIUM_SPACING, iconColor === 'primary' ? primaryIconStyle : defaultIconStyle);
|
|
53
|
-
var disabledClassName = isDisabled ? "straitsx-button-disabled" : undefined;
|
|
53
|
+
var disabledClassName = isDisabled || disabled ? "straitsx-button-disabled" : undefined;
|
|
54
54
|
return (react_1.default.createElement(StyledButton, __assign({ className: className + " " + disabledClassName }, rest), children));
|
|
55
55
|
};
|
|
56
56
|
exports.default = CustomButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAyB;AACzB,0CAAoC;AACpC,yCAAoD;AACpD,oCAAiC;AACjC,uDAIiC;AACjC,iDAAqE;AACrE,wDAAkD;AAClD,0CAAgD;
|
|
1
|
+
{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"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"}
|
package/dist/icons/Camera.js
CHANGED
|
@@ -12,9 +12,8 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
};
|
|
13
13
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
14
|
var React = require("react");
|
|
15
|
-
function
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
15
|
+
var SvgCamera = function (props) { return (React.createElement("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 56 56", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
16
|
+
React.createElement("path", { d: "M49 13.397h-7.731a.875.875 0 0 1-.767-.451L38.356 9.06a6.127 6.127 0 0 0-5.361-3.163h-9.99a6.125 6.125 0 0 0-5.361 3.163l-2.146 3.885a.875.875 0 0 1-.766.451H7a6.132 6.132 0 0 0-6.125 6.125v24.455A6.132 6.132 0 0 0 7 50.102h42a6.132 6.132 0 0 0 6.125-6.125V19.522A6.132 6.132 0 0 0 49 13.397Zm.875 30.578a.875.875 0 0 1-.875.875H7a.875.875 0 0 1-.875-.875V19.522A.875.875 0 0 1 7 18.647h7.732a6.125 6.125 0 0 0 5.361-3.162L22.24 11.6a.875.875 0 0 1 .767-.452h9.989a.875.875 0 0 1 .766.45l2.145 3.885v.002a6.125 6.125 0 0 0 5.363 3.162H49a.875.875 0 0 1 .875.875v24.455-.002Z", fill: "#00D37E" }),
|
|
17
|
+
React.createElement("path", { d: "M28 19.375c-6.272 0-11.375 5.103-11.375 11.375S21.728 42.125 28 42.125s11.375-5.103 11.375-11.375S34.272 19.375 28 19.375Zm0 17.5a6.132 6.132 0 0 1-6.125-6.125A6.132 6.132 0 0 1 28 24.625a6.132 6.132 0 0 1 6.125 6.125A6.132 6.132 0 0 1 28 36.875Z", fill: "#00D37E" }))); };
|
|
19
18
|
exports.default = SvgCamera;
|
|
20
19
|
//# sourceMappingURL=Camera.js.map
|
package/dist/icons/Camera.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../src/icons/Camera.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,6BAA8B;AAE9B,
|
|
1
|
+
{"version":3,"file":"Camera.js","sourceRoot":"","sources":["../../src/icons/Camera.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,6BAA8B;AAE9B,IAAM,SAAS,GAAG,UAAC,KAA8B,IAAK,OAAA,CACpD,sCACE,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,IAC9B,KAAK;IAET,8BACE,CAAC,EAAC,gkBAAgkB,EAClkB,IAAI,EAAC,SAAS,GACd;IACF,8BACE,CAAC,EAAC,wPAAwP,EAC1P,IAAI,EAAC,SAAS,GACd,CACE,CACP,EAlBqD,CAkBrD,CAAA;AACD,kBAAe,SAAS,CAAA"}
|
package/dist/shared/theme.js
CHANGED
|
@@ -4,9 +4,9 @@ exports.useTheme = exports.ThemeProvider = void 0;
|
|
|
4
4
|
var react_1 = require("react");
|
|
5
5
|
var theme_1 = require("./theme");
|
|
6
6
|
var NormalizeStyles_1 = require("./NormalizeStyles");
|
|
7
|
-
var ThemeContext = react_1.default.createContext(theme_1.
|
|
7
|
+
var ThemeContext = react_1.default.createContext(theme_1.straitsXTheme);
|
|
8
8
|
var ThemeProvider = function (_a) {
|
|
9
|
-
var _b = _a.theme, theme = _b === void 0 ? theme_1.
|
|
9
|
+
var _b = _a.theme, theme = _b === void 0 ? theme_1.straitsXTheme : _b, children = _a.children;
|
|
10
10
|
return (react_1.default.createElement(ThemeContext.Provider, { value: theme },
|
|
11
11
|
react_1.default.createElement(NormalizeStyles_1.default, null),
|
|
12
12
|
children));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themeContext.js","sourceRoot":"","sources":["../../src/shared/themeContext.tsx"],"names":[],"mappings":";;;AAAA,+BAAyB;AACzB,
|
|
1
|
+
{"version":3,"file":"themeContext.js","sourceRoot":"","sources":["../../src/shared/themeContext.tsx"],"names":[],"mappings":";;;AAAA,+BAAyB;AACzB,iCAAuC;AACvC,qDAA+C;AAE/C,IAAM,YAAY,GAAG,eAAK,CAAC,aAAa,CAAC,qBAAa,CAAC,CAAA;AAMvD,IAAM,aAAa,GAAG,UAAC,EAGF;QAFnB,aAAqB,EAArB,KAAK,mBAAG,qBAAa,KAAA,EACrB,QAAQ,cAAA;IAER,OAAO,CACL,8BAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACjC,8BAAC,yBAAe,OAAG;QAClB,QAAQ,CACa,CACzB,CAAA;AACH,CAAC,CAAA;AAUQ,sCAAa;AARtB,IAAM,QAAQ,GAAG;IACf,IAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAA;IAC9C,IAAI,OAAO,KAAK,SAAS,EAAE;QACzB,MAAM,IAAI,KAAK,CAAC,8CAA8C,CAAC,CAAA;KAChE;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA;AAEuB,4BAAQ"}
|
|
@@ -5,10 +5,11 @@ declare type CustomButtonProps = {
|
|
|
5
5
|
type?: 'primary' | 'secondary' | 'tertiary';
|
|
6
6
|
size?: 'small';
|
|
7
7
|
iconColor?: 'primary';
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
isDisabled?: boolean;
|
|
9
10
|
isFullWidth?: boolean;
|
|
10
11
|
children: React.ReactNode;
|
|
11
12
|
className?: string;
|
|
12
13
|
} & Omit<ButtonProps, 'type' | 'disabled'>;
|
|
13
|
-
declare const CustomButton: ({ type, size, iconColor, isDisabled, isFullWidth, className, children, ...rest }: CustomButtonProps) => JSX.Element;
|
|
14
|
+
declare const CustomButton: ({ type, size, iconColor, disabled, isDisabled, isFullWidth, className, children, ...rest }: CustomButtonProps) => JSX.Element;
|
|
14
15
|
export default CustomButton;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
declare
|
|
1
|
+
import { SVGProps } from 'react';
|
|
2
|
+
declare const SvgCamera: (props: SVGProps<SVGSVGElement>) => JSX.Element;
|
|
3
3
|
export default SvgCamera;
|
|
@@ -31,7 +31,7 @@ export declare const xfersTheme: {
|
|
|
31
31
|
};
|
|
32
32
|
button: {
|
|
33
33
|
background: WHITE;
|
|
34
|
-
color:
|
|
34
|
+
color: GREEN;
|
|
35
35
|
border: GREY;
|
|
36
36
|
hover: BLACK;
|
|
37
37
|
};
|
|
@@ -112,7 +112,7 @@ export declare const straitsXTheme: {
|
|
|
112
112
|
};
|
|
113
113
|
button: {
|
|
114
114
|
background: WHITE;
|
|
115
|
-
color:
|
|
115
|
+
color: GREEN;
|
|
116
116
|
border: GREY;
|
|
117
117
|
hover: BLACK;
|
|
118
118
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { straitsXTheme } from './theme';
|
|
3
3
|
declare type ThemeProviderProps = {
|
|
4
|
-
theme: typeof
|
|
4
|
+
theme: typeof straitsXTheme;
|
|
5
5
|
children: React.ReactChild;
|
|
6
6
|
};
|
|
7
7
|
declare const ThemeProvider: ({ theme, children }: ThemeProviderProps) => JSX.Element;
|
|
@@ -37,7 +37,7 @@ declare const useTheme: () => {
|
|
|
37
37
|
};
|
|
38
38
|
button: {
|
|
39
39
|
background: import("../constants/colors").WHITE;
|
|
40
|
-
color: import("../constants/colors").
|
|
40
|
+
color: import("../constants/colors").GREEN;
|
|
41
41
|
border: import("../constants/colors").GREY;
|
|
42
42
|
hover: import("../constants/colors").BLACK;
|
|
43
43
|
};
|