@wireapp/react-ui-kit 8.1.0 → 8.2.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/CHANGELOG.md +11 -0
- package/package.json +4 -4
- package/src/Form/Button.d.js +4 -0
- package/src/Form/Button.d.ts +8 -0
- package/src/Form/Button.js +83 -20
- package/src/Form/Button.js.map +1 -1
- package/src/Form/Button.md +61 -2
- package/src/Form/Checkbox.js +44 -22
- package/src/Form/Checkbox.js.map +1 -1
- package/src/Form/ErrorMessage.js +2 -2
- package/src/Form/ErrorMessage.js.map +1 -1
- package/src/Form/Input.js +6 -6
- package/src/Form/Input.js.map +1 -1
- package/src/Form/InputSubmitCombo.js +2 -2
- package/src/Form/InputSubmitCombo.js.map +1 -1
- package/src/Form/TextArea.js +1 -1
- package/src/Form/TextArea.js.map +1 -1
- package/src/Icon/HideIcon.js +1 -1
- package/src/Icon/HideIcon.js.map +1 -1
- package/src/Icon/ShowIcon.js +1 -1
- package/src/Icon/ShowIcon.js.map +1 -1
- package/src/Identity/colors-v2.d.ts +1 -1
- package/src/Identity/colors-v2.js +3 -3
- package/src/Identity/colors-v2.js.map +1 -1
- package/src/Identity/colors-v2.md +1 -1
- package/src/Identity/index.d.js +13 -0
- package/src/Identity/index.d.js.map +1 -1
- package/src/Identity/index.d.ts +1 -0
- package/src/Identity/index.js +13 -0
- package/src/Identity/index.js.map +1 -1
- package/src/Misc/ButtonGroup.d.js +2 -0
- package/src/Misc/ButtonGroup.d.js.map +1 -0
- package/src/Misc/ButtonGroup.d.ts +14 -0
- package/src/Misc/ButtonGroup.js +113 -0
- package/src/Misc/ButtonGroup.js.map +1 -0
- package/src/Misc/ButtonGroup.md +27 -0
- package/src/Misc/IconButton.d.js +6 -0
- package/src/Misc/IconButton.d.js.map +1 -0
- package/src/Misc/IconButton.d.ts +15 -0
- package/src/Misc/IconButton.js +122 -0
- package/src/Misc/IconButton.js.map +1 -0
- package/src/Misc/IconButton.md +43 -0
- package/src/Misc/childrenWithDefaultProps.d.ts +1 -1
- package/src/Misc/index.d.js +26 -0
- package/src/Misc/index.d.js.map +1 -1
- package/src/Misc/index.d.ts +2 -0
- package/src/Misc/index.js +26 -0
- package/src/Misc/index.js.map +1 -1
- package/src/Text/TextLink.js +2 -2
- package/src/Text/TextLink.js.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [8.2.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.1.0...@wireapp/react-ui-kit@8.2.0) (2022-05-24)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* prepare new components ui (ACC-82) ([#4269](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/issues/4269)) ([8b0cbce](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/commit/8b0cbcebec48b14d6df6efece68e98c03731f8db))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [8.1.0](https://github.com/wireapp/wire-web-packages/tree/main/packages/react-ui-kit/compare/@wireapp/react-ui-kit@8.0.1...@wireapp/react-ui-kit@8.1.0) (2022-05-19)
|
|
7
18
|
|
|
8
19
|
|
package/package.json
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"@emotion/jest": "11.9.1",
|
|
20
20
|
"@hot-loader/react-dom": "17.0.1",
|
|
21
21
|
"@types/jest": "26.0.24",
|
|
22
|
-
"@types/react": "18.0.
|
|
22
|
+
"@types/react": "18.0.9",
|
|
23
23
|
"@types/webpack-env": "1.16.2",
|
|
24
24
|
"babel-jest": "27.0.6",
|
|
25
25
|
"babel-loader": "8.2.2",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"homepage": "https://wire-react-ui-kit.netlify.app/",
|
|
37
37
|
"peerDependencies": {
|
|
38
|
-
"@types/react": "^
|
|
38
|
+
"@types/react": "^18.0.9",
|
|
39
39
|
"react": "^18.1.0",
|
|
40
40
|
"react-dom": "^18.1.0"
|
|
41
41
|
},
|
|
@@ -67,6 +67,6 @@
|
|
|
67
67
|
"test:update": "yarn test --updateSnapshot",
|
|
68
68
|
"test:project": "yarn dist && yarn test"
|
|
69
69
|
},
|
|
70
|
-
"version": "8.
|
|
71
|
-
"gitHead": "
|
|
70
|
+
"version": "8.2.0",
|
|
71
|
+
"gitHead": "3be3779c55e2f8f076d7deb10517e54115c66c72"
|
|
72
72
|
}
|
package/src/Form/Button.d.js
CHANGED
package/src/Form/Button.d.ts
CHANGED
|
@@ -2,7 +2,14 @@
|
|
|
2
2
|
import { CSSObject, jsx } from '@emotion/react';
|
|
3
3
|
import type { Theme } from '../Layout';
|
|
4
4
|
import { TextProps } from '../Text';
|
|
5
|
+
declare enum ButtonVariant {
|
|
6
|
+
PRIMARY = "primary",
|
|
7
|
+
SECONDARY = "secondary",
|
|
8
|
+
TERTIARY = "tertiary",
|
|
9
|
+
SEND = "send"
|
|
10
|
+
}
|
|
5
11
|
export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
|
|
12
|
+
variant?: ButtonVariant;
|
|
6
13
|
backgroundColor?: string;
|
|
7
14
|
loadingColor?: string;
|
|
8
15
|
noCapital?: boolean;
|
|
@@ -11,3 +18,4 @@ export interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {
|
|
|
11
18
|
export declare const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject;
|
|
12
19
|
export declare const Button: ({ showLoading, children, loadingColor, ...props }: ButtonProps) => jsx.JSX.Element;
|
|
13
20
|
export declare const filterButtonProps: (props: ButtonProps) => Object;
|
|
21
|
+
export {};
|
package/src/Form/Button.js
CHANGED
|
@@ -25,16 +25,26 @@ var _Text = require("../Text");
|
|
|
25
25
|
|
|
26
26
|
var _util = require("../util");
|
|
27
27
|
|
|
28
|
-
var _excluded = ["backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"],
|
|
28
|
+
var _excluded = ["variant", "backgroundColor", "block", "disabled", "noCapital", "bold", "center", "color", "fontSize", "noWrap", "textTransform", "truncate"],
|
|
29
29
|
_excluded2 = ["showLoading", "children", "loadingColor"];
|
|
30
30
|
|
|
31
31
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
32
32
|
|
|
33
33
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
34
34
|
|
|
35
|
+
var ButtonVariant;
|
|
36
|
+
|
|
37
|
+
(function (ButtonVariant) {
|
|
38
|
+
ButtonVariant["PRIMARY"] = "primary";
|
|
39
|
+
ButtonVariant["SECONDARY"] = "secondary";
|
|
40
|
+
ButtonVariant["TERTIARY"] = "tertiary";
|
|
41
|
+
ButtonVariant["SEND"] = "send";
|
|
42
|
+
})(ButtonVariant || (ButtonVariant = {}));
|
|
43
|
+
|
|
35
44
|
var buttonStyle = function buttonStyle(theme, _ref) {
|
|
36
|
-
var _ref$
|
|
37
|
-
|
|
45
|
+
var _ref$variant = _ref.variant,
|
|
46
|
+
variant = _ref$variant === void 0 ? ButtonVariant.PRIMARY : _ref$variant,
|
|
47
|
+
backgroundColor = _ref.backgroundColor,
|
|
38
48
|
_ref$block = _ref.block,
|
|
39
49
|
block = _ref$block === void 0 ? false : _ref$block,
|
|
40
50
|
_ref$disabled = _ref.disabled,
|
|
@@ -56,39 +66,92 @@ var buttonStyle = function buttonStyle(theme, _ref) {
|
|
|
56
66
|
_ref$truncate = _ref.truncate,
|
|
57
67
|
truncate = _ref$truncate === void 0 ? true : _ref$truncate,
|
|
58
68
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
59
|
-
return _objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
69
|
+
return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, (0, _Text.textStyle)(theme, _objectSpread({
|
|
60
70
|
block: block,
|
|
61
71
|
bold: bold,
|
|
62
72
|
center: center,
|
|
63
|
-
color: color,
|
|
64
73
|
disabled: disabled,
|
|
65
74
|
fontSize: fontSize,
|
|
66
75
|
noWrap: noWrap,
|
|
67
76
|
textTransform: textTransform,
|
|
68
77
|
truncate: truncate
|
|
69
78
|
}, props))), {}, {
|
|
70
|
-
'&:hover, &:focus': {
|
|
71
|
-
backgroundColor: disabled ? backgroundColor : _Identity.COLOR.shade(backgroundColor, 0.06),
|
|
72
|
-
textDecoration: 'none'
|
|
73
|
-
},
|
|
74
|
-
backgroundColor: backgroundColor,
|
|
75
79
|
border: 0,
|
|
76
|
-
borderRadius: '8px',
|
|
77
80
|
cursor: disabled ? 'default' : 'pointer',
|
|
78
|
-
display: '
|
|
79
|
-
|
|
80
|
-
|
|
81
|
+
display: 'flex',
|
|
82
|
+
alignItems: 'center',
|
|
83
|
+
justifyContent: 'center',
|
|
81
84
|
marginBottom: '16px',
|
|
82
|
-
|
|
83
|
-
minWidth: '150px',
|
|
84
|
-
opacity: disabled ? 0.56 : 1,
|
|
85
|
+
padding: 0,
|
|
85
86
|
outline: 'none',
|
|
86
|
-
padding: '0 32px',
|
|
87
87
|
textDecoration: 'none',
|
|
88
88
|
touchAction: 'manipulation',
|
|
89
89
|
transition: _motions.defaultTransition,
|
|
90
|
-
width: block ? '100%' : 'auto'
|
|
91
|
-
|
|
90
|
+
width: block ? '100%' : 'auto',
|
|
91
|
+
'&:hover, &:focus': {
|
|
92
|
+
textDecoration: 'none'
|
|
93
|
+
}
|
|
94
|
+
}, variant !== ButtonVariant.TERTIARY && _objectSpread({
|
|
95
|
+
borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',
|
|
96
|
+
height: variant === ButtonVariant.SEND ? '40px' : '48px',
|
|
97
|
+
lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px'
|
|
98
|
+
}, variant !== ButtonVariant.SEND && {
|
|
99
|
+
maxWidth: '100%',
|
|
100
|
+
minWidth: '125px',
|
|
101
|
+
padding: '0 16px'
|
|
102
|
+
})), variant === ButtonVariant.PRIMARY && _objectSpread({
|
|
103
|
+
backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_50 : _Identity.COLOR_V2.BLUE,
|
|
104
|
+
color: disabled ? _Identity.COLOR_V2.GRAY_80 : _Identity.COLOR_V2.WHITE
|
|
105
|
+
}, !disabled && {
|
|
106
|
+
'&:hover, &:focus': {
|
|
107
|
+
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_600
|
|
108
|
+
},
|
|
109
|
+
'&:focus': {
|
|
110
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_700)
|
|
111
|
+
},
|
|
112
|
+
'&:active': {
|
|
113
|
+
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
|
|
114
|
+
}
|
|
115
|
+
})), variant === ButtonVariant.SECONDARY && _objectSpread({
|
|
116
|
+
backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_20 : _Identity.COLOR_V2.WHITE,
|
|
117
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.GRAY_40),
|
|
118
|
+
color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK
|
|
119
|
+
}, !disabled && {
|
|
120
|
+
'&:hover, &:focus': {
|
|
121
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.BLUE)
|
|
122
|
+
},
|
|
123
|
+
'&:focus': {
|
|
124
|
+
color: _Identity.COLOR_V2.BLUE
|
|
125
|
+
},
|
|
126
|
+
'&:active': {
|
|
127
|
+
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_50,
|
|
128
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.BLUE),
|
|
129
|
+
color: _Identity.COLOR_V2.BLUE
|
|
130
|
+
}
|
|
131
|
+
})), variant === ButtonVariant.TERTIARY && _objectSpread({
|
|
132
|
+
color: disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLACK,
|
|
133
|
+
lineHeight: '24px'
|
|
134
|
+
}, !disabled && {
|
|
135
|
+
'&:hover, &:focus': {
|
|
136
|
+
color: _Identity.COLOR_V2.BLUE
|
|
137
|
+
},
|
|
138
|
+
'&:focus': {
|
|
139
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_300)
|
|
140
|
+
}
|
|
141
|
+
})), variant === ButtonVariant.SEND && _objectSpread({
|
|
142
|
+
backgroundColor: backgroundColor || disabled ? _Identity.COLOR_V2.GRAY_70 : _Identity.COLOR_V2.BLUE,
|
|
143
|
+
width: '40px'
|
|
144
|
+
}, !disabled && {
|
|
145
|
+
'&:hover, &:focus': {
|
|
146
|
+
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_600
|
|
147
|
+
},
|
|
148
|
+
'&:focus': {
|
|
149
|
+
border: "1px solid ".concat(_Identity.COLOR_V2.BLUE_LIGHT_800)
|
|
150
|
+
},
|
|
151
|
+
'&:active': {
|
|
152
|
+
backgroundColor: _Identity.COLOR_V2.BLUE_LIGHT_700
|
|
153
|
+
}
|
|
154
|
+
}));
|
|
92
155
|
};
|
|
93
156
|
|
|
94
157
|
exports.buttonStyle = buttonStyle;
|
package/src/Form/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Button.tsx"],"names":["buttonStyle","theme","backgroundColor","COLOR","BLUE","block","disabled","noCapital","bold","center","color","WHITE","fontSize","noWrap","textTransform","truncate","props","shade","textDecoration","border","borderRadius","cursor","display","height","lineHeight","marginBottom","maxWidth","minWidth","opacity","outline","padding","touchAction","transition","defaultTransition","width","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n backgroundColor?: string;\n loadingColor?: string;\n noCapital?: boolean;\n showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n theme,\n {\n backgroundColor = COLOR.BLUE,\n block = false,\n disabled = false,\n noCapital = false,\n bold = true,\n center = true,\n color = COLOR.WHITE,\n fontSize = '16px',\n noWrap = true,\n textTransform = 'none',\n truncate = true,\n ...props\n },\n) => ({\n ...textStyle(theme, {\n block,\n bold,\n center,\n color,\n disabled,\n fontSize,\n noWrap,\n textTransform,\n truncate,\n ...props,\n }),\n '&:hover, &:focus': {\n backgroundColor: disabled ? backgroundColor : COLOR.shade(backgroundColor, 0.06),\n textDecoration: 'none',\n },\n backgroundColor: backgroundColor,\n border: 0,\n borderRadius: '8px',\n cursor: disabled ? 'default' : 'pointer',\n display: 'inline-block',\n height: '48px',\n lineHeight: '48px',\n marginBottom: '16px',\n maxWidth: '100%',\n minWidth: '150px',\n opacity: disabled ? 0.56 : 1,\n outline: 'none',\n padding: '0 32px',\n textDecoration: 'none',\n touchAction: 'manipulation',\n transition: defaultTransition,\n width: block ? '100%' : 'auto',\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
|
|
1
|
+
{"version":3,"sources":["Button.tsx"],"names":["ButtonVariant","buttonStyle","theme","variant","PRIMARY","backgroundColor","block","disabled","noCapital","bold","center","color","COLOR","WHITE","fontSize","noWrap","textTransform","truncate","props","border","cursor","display","alignItems","justifyContent","marginBottom","padding","outline","textDecoration","touchAction","transition","defaultTransition","width","TERTIARY","borderRadius","SEND","height","lineHeight","maxWidth","minWidth","COLOR_V2","GRAY_50","BLUE","GRAY_80","BLUE_LIGHT_600","BLUE_LIGHT_700","SECONDARY","GRAY_20","GRAY_40","GRAY_60","BLACK","BLUE_LIGHT_50","BLUE_LIGHT_300","GRAY_70","BLUE_LIGHT_800","Button","showLoading","children","loadingColor","filterButtonProps","margin"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {defaultTransition} from '../Identity/motions';\nimport type {Theme} from '../Layout';\nimport {Loading} from '../Misc';\nimport {TextProps, filterTextProps, textStyle} from '../Text';\nimport {filterProps} from '../util';\n\nenum ButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n SEND = 'send',\n}\n\nexport interface ButtonProps<T = HTMLButtonElement> extends TextProps<T> {\n variant?: ButtonVariant;\n backgroundColor?: string;\n loadingColor?: string;\n noCapital?: boolean;\n showLoading?: boolean;\n}\n\nexport const buttonStyle: <T>(theme: Theme, props: ButtonProps<T>) => CSSObject = (\n theme,\n {\n variant = ButtonVariant.PRIMARY,\n backgroundColor,\n block = false,\n disabled = false,\n noCapital = false,\n bold = true,\n center = true,\n color = COLOR.WHITE,\n fontSize = '16px',\n noWrap = true,\n textTransform = 'none',\n truncate = true,\n ...props\n },\n) => ({\n ...textStyle(theme, {\n block,\n bold,\n center,\n disabled,\n fontSize,\n noWrap,\n textTransform,\n truncate,\n ...props,\n }),\n border: 0,\n cursor: disabled ? 'default' : 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n marginBottom: '16px',\n padding: 0,\n outline: 'none',\n textDecoration: 'none',\n touchAction: 'manipulation',\n transition: defaultTransition,\n width: block ? '100%' : 'auto',\n '&:hover, &:focus': {\n textDecoration: 'none',\n },\n ...(variant !== ButtonVariant.TERTIARY && {\n borderRadius: variant === ButtonVariant.SEND ? '100%' : '16px',\n height: variant === ButtonVariant.SEND ? '40px' : '48px',\n lineHeight: variant === ButtonVariant.SEND ? '40px' : '48px',\n ...(variant !== ButtonVariant.SEND && {\n maxWidth: '100%',\n minWidth: '125px',\n padding: '0 16px',\n }),\n }),\n ...(variant === ButtonVariant.PRIMARY && {\n backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_50 : COLOR_V2.BLUE,\n color: disabled ? COLOR_V2.GRAY_80 : COLOR_V2.WHITE,\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_700}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n ...(variant === ButtonVariant.SECONDARY && {\n backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_20 : COLOR_V2.WHITE,\n border: `1px solid ${COLOR_V2.GRAY_40}`,\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n ...(!disabled && {\n '&:hover, &:focus': {\n border: `1px solid ${COLOR_V2.BLUE}`,\n },\n '&:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_50,\n border: `1px solid ${COLOR_V2.BLUE}`,\n color: COLOR_V2.BLUE,\n },\n }),\n }),\n ...(variant === ButtonVariant.TERTIARY && {\n color: disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLACK,\n lineHeight: '24px',\n ...(!disabled && {\n '&:hover, &:focus': {\n color: COLOR_V2.BLUE,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_300}`,\n },\n }),\n }),\n ...(variant === ButtonVariant.SEND && {\n backgroundColor: backgroundColor || disabled ? COLOR_V2.GRAY_70 : COLOR_V2.BLUE,\n width: '40px',\n ...(!disabled && {\n '&:hover, &:focus': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_600,\n },\n '&:focus': {\n border: `1px solid ${COLOR_V2.BLUE_LIGHT_800}`,\n },\n '&:active': {\n backgroundColor: COLOR_V2.BLUE_LIGHT_700,\n },\n }),\n }),\n});\n\nexport const Button = ({showLoading, children, loadingColor = COLOR.WHITE, ...props}: ButtonProps) => (\n <button css={(theme: Theme) => buttonStyle(theme, props)} {...filterButtonProps(props)}>\n {showLoading ? <Loading size={30} color={loadingColor} style={{display: 'flex', margin: 'auto'}} /> : children}\n </button>\n);\n\nexport const filterButtonProps = (props: ButtonProps) => {\n return filterProps(filterTextProps(props) as ButtonProps, ['backgroundColor', 'noCapital']);\n};\n"],"file":"Button.js"}
|
package/src/Form/Button.md
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
Demo:
|
|
2
2
|
|
|
3
3
|
```js
|
|
4
|
-
import {Button, Container, Columns, Column, COLOR} from '@wireapp/react-ui-kit';
|
|
4
|
+
import {Button, Container, Columns, Column, COLOR, COLOR_V2, H2, PlaneIcon} from '@wireapp/react-ui-kit';
|
|
5
5
|
|
|
6
6
|
<Container>
|
|
7
|
+
<H2>Primary Button</H2>
|
|
7
8
|
<Columns>
|
|
8
9
|
<Column>Button</Column>
|
|
9
10
|
<Column>
|
|
10
|
-
<Button
|
|
11
|
+
<Button>Button</Button>
|
|
11
12
|
</Column>
|
|
12
13
|
</Columns>
|
|
13
14
|
<Columns>
|
|
@@ -26,5 +27,63 @@ import {Button, Container, Columns, Column, COLOR} from '@wireapp/react-ui-kit';
|
|
|
26
27
|
</Button>
|
|
27
28
|
</Column>
|
|
28
29
|
</Columns>
|
|
30
|
+
|
|
31
|
+
<H2>Secondary Button</H2>
|
|
32
|
+
<Columns>
|
|
33
|
+
<Column>Button</Column>
|
|
34
|
+
<Column>
|
|
35
|
+
<Button variant="secondary">Button</Button>
|
|
36
|
+
</Column>
|
|
37
|
+
</Columns>
|
|
38
|
+
<Columns>
|
|
39
|
+
<Column>Disabled Button</Column>
|
|
40
|
+
<Column>
|
|
41
|
+
<Button variant="secondary" disabled onClick={() => alert('This should not work')}>
|
|
42
|
+
Disabled Button
|
|
43
|
+
</Button>
|
|
44
|
+
</Column>
|
|
45
|
+
</Columns>
|
|
46
|
+
<Columns>
|
|
47
|
+
<Column>Loading Button</Column>
|
|
48
|
+
<Column>
|
|
49
|
+
<Button variant="secondary" showLoading disabled onClick={() => alert('This should not work')}>
|
|
50
|
+
Loading Button
|
|
51
|
+
</Button>
|
|
52
|
+
</Column>
|
|
53
|
+
</Columns>
|
|
54
|
+
|
|
55
|
+
<H2>Tertiary Button</H2>
|
|
56
|
+
<Columns>
|
|
57
|
+
<Column>Button</Column>
|
|
58
|
+
<Column>
|
|
59
|
+
<Button variant="tertiary">Copy link</Button>
|
|
60
|
+
</Column>
|
|
61
|
+
</Columns>
|
|
62
|
+
<Columns>
|
|
63
|
+
<Column>Disabled Button</Column>
|
|
64
|
+
<Column>
|
|
65
|
+
<Button variant="tertiary" disabled onClick={() => alert('This should not work')}>
|
|
66
|
+
Copy link
|
|
67
|
+
</Button>
|
|
68
|
+
</Column>
|
|
69
|
+
</Columns>
|
|
70
|
+
|
|
71
|
+
<H2>Send Button</H2>
|
|
72
|
+
<Columns>
|
|
73
|
+
<Column>Button</Column>
|
|
74
|
+
<Column>
|
|
75
|
+
<Button variant="send">
|
|
76
|
+
<PlaneIcon color={COLOR_V2.WHITE} />
|
|
77
|
+
</Button>
|
|
78
|
+
</Column>
|
|
79
|
+
</Columns>
|
|
80
|
+
<Columns>
|
|
81
|
+
<Column>Disabled Button</Column>
|
|
82
|
+
<Column>
|
|
83
|
+
<Button variant="send" disabled onClick={() => alert('This should not work')}>
|
|
84
|
+
<PlaneIcon color={COLOR_V2.WHITE} />
|
|
85
|
+
</Button>
|
|
86
|
+
</Column>
|
|
87
|
+
</Columns>
|
|
29
88
|
</Container>;
|
|
30
89
|
```
|
package/src/Form/Checkbox.js
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
6
|
+
|
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
|
6
8
|
value: true
|
|
7
9
|
});
|
|
@@ -15,7 +17,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
15
17
|
|
|
16
18
|
var _react = require("@emotion/react");
|
|
17
19
|
|
|
18
|
-
var _react2 =
|
|
20
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
19
21
|
|
|
20
22
|
var _Identity = require("../Identity");
|
|
21
23
|
|
|
@@ -28,6 +30,10 @@ var _Input = require("./Input");
|
|
|
28
30
|
var _excluded = ["id", "children", "style", "disabled"],
|
|
29
31
|
_excluded2 = ["color"];
|
|
30
32
|
|
|
33
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
34
|
+
|
|
35
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
36
|
+
|
|
31
37
|
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
32
38
|
|
|
33
39
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -38,28 +44,44 @@ var filterStyledLabelProps = function filterStyledLabelProps(props) {
|
|
|
38
44
|
return (0, _util.filterProps)(props, ['markInvalid']);
|
|
39
45
|
};
|
|
40
46
|
|
|
47
|
+
var checkSvg = '<svg width="15" height="13" viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg"><path d="M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z" fill="white"/></svg>';
|
|
48
|
+
|
|
41
49
|
var StyledLabel = function StyledLabel(props) {
|
|
42
|
-
var
|
|
50
|
+
var disabled = props.disabled,
|
|
51
|
+
markInvalid = props.markInvalid;
|
|
43
52
|
return (0, _react.jsx)("label", (0, _extends2["default"])({
|
|
44
53
|
css: function css(theme) {
|
|
45
54
|
var _ref;
|
|
46
55
|
|
|
47
|
-
return
|
|
48
|
-
background: "".concat(_Identity.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
56
|
+
return _objectSpread(_objectSpread((0, _defineProperty2["default"])({}, ".".concat(_Input.INPUT_CLASSNAME, ":checked + &::before"), {
|
|
57
|
+
background: "".concat(disabled ? _Identity.COLOR_V2.GRAY_60 : _Identity.COLOR_V2.BLUE, " url('data:image/svg+xml; utf8, ").concat(checkSvg, "') no-repeat center"),
|
|
58
|
+
borderColor: _Identity.COLOR_V2.BLUE
|
|
59
|
+
}), !disabled && (_ref = {}, (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":focus + &::before"), {
|
|
60
|
+
borderColor: _Identity.COLOR_V2.BLUE
|
|
61
|
+
}), (0, _defineProperty2["default"])(_ref, ".".concat(_Input.INPUT_CLASSNAME, ":hover + &::before"), {
|
|
62
|
+
borderColor: _Identity.COLOR_V2.BLUE
|
|
63
|
+
}), _ref)), {}, {
|
|
64
|
+
'&::before': _objectSpread(_objectSpread({
|
|
65
|
+
background: disabled ? _Identity.COLOR_V2.GRAY_10 : _Identity.COLOR_V2.GRAY_20
|
|
66
|
+
}, !disabled ? {
|
|
67
|
+
border: markInvalid ? "1.5px solid ".concat(_Identity.COLOR_V2.RED) : "1.5px solid ".concat(_Identity.COLOR_V2.GRAY_80)
|
|
68
|
+
} : {
|
|
69
|
+
border: "1.5px solid ".concat(_Identity.COLOR_V2.GRAY_60)
|
|
70
|
+
}), {}, {
|
|
71
|
+
borderRadius: '3px',
|
|
72
|
+
boxSizing: 'border-box',
|
|
73
|
+
content: '""',
|
|
74
|
+
display: 'inline-block',
|
|
75
|
+
height: '22px',
|
|
76
|
+
lineHeight: '22px',
|
|
77
|
+
margin: '0 8px 0 -16px',
|
|
78
|
+
width: '22px'
|
|
79
|
+
}),
|
|
80
|
+
a: _objectSpread({}, (0, _Text.textLinkStyle)(theme, {})),
|
|
81
|
+
lineHeight: '22px',
|
|
82
|
+
display: 'flex',
|
|
83
|
+
opacity: disabled ? 0.56 : 1
|
|
84
|
+
});
|
|
63
85
|
}
|
|
64
86
|
}, filterStyledLabelProps(props)));
|
|
65
87
|
};
|
|
@@ -74,13 +96,13 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
|
|
|
74
96
|
} : {
|
|
75
97
|
name: "1uw42d7-Checkbox",
|
|
76
98
|
styles: "align-items:center;display:flex;justify-content:flex-start;label:Checkbox;",
|
|
77
|
-
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
99
|
+
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNoZWNrYm94LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFvR0kiLCJmaWxlIjoiQ2hlY2tib3gudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLypcbiAqIFdpcmVcbiAqIENvcHlyaWdodCAoQykgMjAxOCBXaXJlIFN3aXNzIEdtYkhcbiAqXG4gKiBUaGlzIHByb2dyYW0gaXMgZnJlZSBzb2Z0d2FyZTogeW91IGNhbiByZWRpc3RyaWJ1dGUgaXQgYW5kL29yIG1vZGlmeVxuICogaXQgdW5kZXIgdGhlIHRlcm1zIG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZSBhcyBwdWJsaXNoZWQgYnlcbiAqIHRoZSBGcmVlIFNvZnR3YXJlIEZvdW5kYXRpb24sIGVpdGhlciB2ZXJzaW9uIDMgb2YgdGhlIExpY2Vuc2UsIG9yXG4gKiAoYXQgeW91ciBvcHRpb24pIGFueSBsYXRlciB2ZXJzaW9uLlxuICpcbiAqIFRoaXMgcHJvZ3JhbSBpcyBkaXN0cmlidXRlZCBpbiB0aGUgaG9wZSB0aGF0IGl0IHdpbGwgYmUgdXNlZnVsLFxuICogYnV0IFdJVEhPVVQgQU5ZIFdBUlJBTlRZOyB3aXRob3V0IGV2ZW4gdGhlIGltcGxpZWQgd2FycmFudHkgb2ZcbiAqIE1FUkNIQU5UQUJJTElUWSBvciBGSVRORVNTIEZPUiBBIFBBUlRJQ1VMQVIgUFVSUE9TRS4gU2VlIHRoZVxuICogR05VIEdlbmVyYWwgUHVibGljIExpY2Vuc2UgZm9yIG1vcmUgZGV0YWlscy5cbiAqXG4gKiBZb3Ugc2hvdWxkIGhhdmUgcmVjZWl2ZWQgYSBjb3B5IG9mIHRoZSBHTlUgR2VuZXJhbCBQdWJsaWMgTGljZW5zZVxuICogYWxvbmcgd2l0aCB0aGlzIHByb2dyYW0uIElmIG5vdCwgc2VlIGh0dHA6Ly93d3cuZ251Lm9yZy9saWNlbnNlcy8uXG4gKlxuICovXG5cbi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHtqc3h9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCBSZWFjdCwge3VzZUlkfSBmcm9tICdyZWFjdCc7XG5cbmltcG9ydCB7Q09MT1IsIENPTE9SX1YyfSBmcm9tICcuLi9JZGVudGl0eSc7XG5pbXBvcnQge1RoZW1lfSBmcm9tICcuLi9MYXlvdXQnO1xuaW1wb3J0IHtUZXh0LCBUZXh0UHJvcHMsIHRleHRTdHlsZSwgdGV4dExpbmtTdHlsZX0gZnJvbSAnLi4vVGV4dCc7XG5pbXBvcnQge2ZpbHRlclByb3BzfSBmcm9tICcuLi91dGlsJztcbmltcG9ydCB7SU5QVVRfQ0xBU1NOQU1FLCBJbnB1dCwgSW5wdXRQcm9wc30gZnJvbSAnLi9JbnB1dCc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgU3R5bGVkTGFiZWxQcm9wczxUID0gSFRNTExhYmVsRWxlbWVudD4gZXh0ZW5kcyBSZWFjdC5IVE1MUHJvcHM8VD4ge1xuICBkaXNhYmxlZD86IGJvb2xlYW47XG4gIG1hcmtJbnZhbGlkPzogYm9vbGVhbjtcbn1cblxuY29uc3QgZmlsdGVyU3R5bGVkTGFiZWxQcm9wcyA9IChwcm9wczogU3R5bGVkTGFiZWxQcm9wcykgPT4gZmlsdGVyUHJvcHMocHJvcHMsIFsnbWFya0ludmFsaWQnXSk7XG5cbmNvbnN0IGNoZWNrU3ZnID1cbiAgJzxzdmcgd2lkdGg9XCIxNVwiIGhlaWdodD1cIjEzXCIgdmlld0JveD1cIjAgMCAxNiAxM1wiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj48cGF0aCBkPVwiTTUuNjU2ODUgMTIuMDcxMUwxNS45ODQyIDEuNjI3MzhMMTQuNTcgMC4yMTMxNjdMNS42NTY4NSA5LjI0MjY0TDEuNDE0MjEgNUwwIDYuNDE0MjFMNS42NTY4NSAxMi4wNzExWlwiIGZpbGw9XCJ3aGl0ZVwiLz48L3N2Zz4nO1xuXG5jb25zdCBTdHlsZWRMYWJlbCA9IChwcm9wczogU3R5bGVkTGFiZWxQcm9wcykgPT4ge1xuICBjb25zdCB7ZGlzYWJsZWQsIG1hcmtJbnZhbGlkfSA9IHByb3BzO1xuXG4gIHJldHVybiAoXG4gICAgPGxhYmVsXG4gICAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAgIFtgLiR7SU5QVVRfQ0xBU1NOQU1FfTpjaGVja2VkICsgJjo6YmVmb3JlYF06IHtcbiAgICAgICAgICBiYWNrZ3JvdW5kOiBgJHtcbiAgICAgICAgICAgIGRpc2FibGVkID8gQ09MT1JfVjIuR1JBWV82MCA6IENPTE9SX1YyLkJMVUVcbiAgICAgICAgICB9IHVybCgnZGF0YTppbWFnZS9zdmcreG1sOyB1dGY4LCAke2NoZWNrU3ZnfScpIG5vLXJlcGVhdCBjZW50ZXJgLFxuICAgICAgICAgIGJvcmRlckNvbG9yOiBDT0xPUl9WMi5CTFVFLFxuICAgICAgICB9LFxuICAgICAgICAuLi4oIWRpc2FibGVkICYmIHtcbiAgICAgICAgICBbYC4ke0lOUFVUX0NMQVNTTkFNRX06Zm9jdXMgKyAmOjpiZWZvcmVgXToge1xuICAgICAgICAgICAgYm9yZGVyQ29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgICAgfSxcbiAgICAgICAgICBbYC4ke0lOUFVUX0NMQVNTTkFNRX06aG92ZXIgKyAmOjpiZWZvcmVgXToge1xuICAgICAgICAgICAgYm9yZGVyQ29sb3I6IENPTE9SX1YyLkJMVUUsXG4gICAgICAgICAgfSxcbiAgICAgICAgfSksXG4gICAgICAgICcmOjpiZWZvcmUnOiB7XG4gICAgICAgICAgYmFja2dyb3VuZDogZGlzYWJsZWQgPyBDT0xPUl9WMi5HUkFZXzEwIDogQ09MT1JfVjIuR1JBWV8yMCxcbiAgICAgICAgICAuLi4oIWRpc2FibGVkXG4gICAgICAgICAgICA/IHtcbiAgICAgICAgICAgICAgICBib3JkZXI6IG1hcmtJbnZhbGlkID8gYDEuNXB4IHNvbGlkICR7Q09MT1JfVjIuUkVEfWAgOiBgMS41cHggc29saWQgJHtDT0xPUl9WMi5HUkFZXzgwfWAsXG4gICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDoge1xuICAgICAgICAgICAgICAgIGJvcmRlcjogYDEuNXB4IHNvbGlkICR7Q09MT1JfVjIuR1JBWV82MH1gLFxuICAgICAgICAgICAgICB9KSxcbiAgICAgICAgICBib3JkZXJSYWRpdXM6ICczcHgnLFxuICAgICAgICAgIGJveFNpemluZzogJ2JvcmRlci1ib3gnLFxuICAgICAgICAgIGNvbnRlbnQ6ICdcIlwiJyxcbiAgICAgICAgICBkaXNwbGF5OiAnaW5saW5lLWJsb2NrJyxcbiAgICAgICAgICBoZWlnaHQ6ICcyMnB4JyxcbiAgICAgICAgICBsaW5lSGVpZ2h0OiAnMjJweCcsXG4gICAgICAgICAgbWFyZ2luOiAnMCA4cHggMCAtMTZweCcsXG4gICAgICAgICAgd2lkdGg6ICcyMnB4JyxcbiAgICAgICAgfSxcbiAgICAgICAgYToge1xuICAgICAgICAgIC4uLnRleHRMaW5rU3R5bGUodGhlbWUsIHt9KSxcbiAgICAgICAgfSxcbiAgICAgICAgbGluZUhlaWdodDogJzIycHgnLFxuICAgICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICAgIG9wYWNpdHk6IGRpc2FibGVkID8gMC41NiA6IDEsXG4gICAgICB9KX1cbiAgICAgIHsuLi5maWx0ZXJTdHlsZWRMYWJlbFByb3BzKHByb3BzKX1cbiAgICAvPlxuICApO1xufTtcblxuaW50ZXJmYWNlIENoZWNrYm94UHJvcHM8VCA9IEhUTUxJbnB1dEVsZW1lbnQ+IGV4dGVuZHMgSW5wdXRQcm9wczxUPiB7XG4gIGlkPzogc3RyaW5nO1xufVxuXG5jb25zdCBmaWx0ZXJDaGVja2JveFByb3BzID0gKHByb3BzOiBDaGVja2JveFByb3BzKSA9PiBmaWx0ZXJQcm9wcyhwcm9wcywgWydtYXJrSW52YWxpZCddKTtcblxuZXhwb3J0IGNvbnN0IENoZWNrYm94OiBSZWFjdC5GQzxDaGVja2JveFByb3BzPEhUTUxJbnB1dEVsZW1lbnQ+PiA9IFJlYWN0LmZvcndhcmRSZWY8XG4gIEhUTUxJbnB1dEVsZW1lbnQsXG4gIENoZWNrYm94UHJvcHM8SFRNTElucHV0RWxlbWVudD5cbj4oKHtpZCA9IHVzZUlkKCksIGNoaWxkcmVuLCBzdHlsZSwgZGlzYWJsZWQsIC4uLnByb3BzfSwgcmVmKSA9PiAoXG4gIDxkaXZcbiAgICBjc3M9e3tcbiAgICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgICAgZGlzcGxheTogJ2ZsZXgnLFxuICAgICAganVzdGlmeUNvbnRlbnQ6ICdmbGV4LXN0YXJ0JyxcbiAgICB9fVxuICAgIHN0eWxlPXtzdHlsZX1cbiAgPlxuICAgIDxJbnB1dFxuICAgICAgdHlwZT17J2NoZWNrYm94J31cbiAgICAgIGlkPXtpZH1cbiAgICAgIHN0eWxlPXt7XG4gICAgICAgIGhlaWdodDogJzIycHgnLFxuICAgICAgICBtYXJnaW5Cb3R0b206ICcwJyxcbiAgICAgICAgb3BhY2l0eTogMCxcbiAgICAgICAgd2lkdGg6ICcyMnB4JyxcbiAgICAgIH19XG4gICAgICBkaXNhYmxlZD17ZGlzYWJsZWR9XG4gICAgICByZWY9e3JlZn1cbiAgICAgIHsuLi5maWx0ZXJDaGVja2JveFByb3BzKHByb3BzKX1cbiAgICAvPlxuICAgIDxTdHlsZWRMYWJlbCBodG1sRm9yPXtpZH0gZGlzYWJsZWQ9e2Rpc2FibGVkfSBtYXJrSW52YWxpZD17cHJvcHMubWFya0ludmFsaWR9PlxuICAgICAge2NoaWxkcmVufVxuICAgIDwvU3R5bGVkTGFiZWw+XG4gIDwvZGl2PlxuKSk7XG5cbmV4cG9ydCB0eXBlIENoZWNrYm94TGFiZWxQcm9wczxUID0gSFRNTFNwYW5FbGVtZW50PiA9IFRleHRQcm9wczxUPjtcblxuZXhwb3J0IGNvbnN0IENoZWNrYm94TGFiZWwgPSAoe2NvbG9yID0gQ09MT1IuVEVYVCwgLi4ucHJvcHN9OiBDaGVja2JveExhYmVsUHJvcHMpID0+IChcbiAgPFRleHRcbiAgICBjc3M9eyh0aGVtZTogVGhlbWUpID0+ICh7XG4gICAgICAuLi50ZXh0U3R5bGUodGhlbWUsIHtcbiAgICAgICAgY29sb3IsXG4gICAgICAgIC4uLnByb3BzLFxuICAgICAgfSksXG4gICAgICBhOiB7XG4gICAgICAgIGNvbG9yOiBDT0xPUi5MSU5LLFxuICAgICAgICB0ZXh0RGVjb3JhdGlvbjogJ25vbmUnLFxuICAgICAgfSxcbiAgICB9KX1cbiAgICB7Li4ucHJvcHN9XG4gIC8+XG4pO1xuIl19 */",
|
|
78
100
|
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
79
101
|
};
|
|
80
102
|
|
|
81
103
|
var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref) {
|
|
82
104
|
var _ref2$id = _ref2.id,
|
|
83
|
-
id = _ref2$id === void 0 ?
|
|
105
|
+
id = _ref2$id === void 0 ? (0, _react2.useId)() : _ref2$id,
|
|
84
106
|
children = _ref2.children,
|
|
85
107
|
style = _ref2.style,
|
|
86
108
|
disabled = _ref2.disabled,
|
|
@@ -92,10 +114,10 @@ var Checkbox = /*#__PURE__*/_react2["default"].forwardRef(function (_ref2, ref)
|
|
|
92
114
|
type: 'checkbox',
|
|
93
115
|
id: id,
|
|
94
116
|
style: {
|
|
95
|
-
height: '
|
|
117
|
+
height: '22px',
|
|
96
118
|
marginBottom: '0',
|
|
97
119
|
opacity: 0,
|
|
98
|
-
width: '
|
|
120
|
+
width: '22px'
|
|
99
121
|
},
|
|
100
122
|
disabled: disabled,
|
|
101
123
|
ref: ref
|
package/src/Form/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","StyledLabel","
|
|
1
|
+
{"version":3,"sources":["Checkbox.tsx"],"names":["filterStyledLabelProps","props","checkSvg","StyledLabel","disabled","markInvalid","theme","INPUT_CLASSNAME","background","COLOR_V2","GRAY_60","BLUE","borderColor","GRAY_10","GRAY_20","border","RED","GRAY_80","borderRadius","boxSizing","content","display","height","lineHeight","margin","width","a","opacity","filterCheckboxProps","Checkbox","React","forwardRef","ref","id","children","style","marginBottom","CheckboxLabel","color","COLOR","TEXT","LINK","textDecoration"],"mappings":"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","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {jsx} from '@emotion/react';\nimport React, {useId} from 'react';\n\nimport {COLOR, COLOR_V2} from '../Identity';\nimport {Theme} from '../Layout';\nimport {Text, TextProps, textStyle, textLinkStyle} from '../Text';\nimport {filterProps} from '../util';\nimport {INPUT_CLASSNAME, Input, InputProps} from './Input';\n\nexport interface StyledLabelProps<T = HTMLLabelElement> extends React.HTMLProps<T> {\n disabled?: boolean;\n markInvalid?: boolean;\n}\n\nconst filterStyledLabelProps = (props: StyledLabelProps) => filterProps(props, ['markInvalid']);\n\nconst checkSvg =\n '<svg width=\"15\" height=\"13\" viewBox=\"0 0 16 13\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M5.65685 12.0711L15.9842 1.62738L14.57 0.213167L5.65685 9.24264L1.41421 5L0 6.41421L5.65685 12.0711Z\" fill=\"white\"/></svg>';\n\nconst StyledLabel = (props: StyledLabelProps) => {\n const {disabled, markInvalid} = props;\n\n return (\n <label\n css={(theme: Theme) => ({\n [`.${INPUT_CLASSNAME}:checked + &::before`]: {\n background: `${\n disabled ? COLOR_V2.GRAY_60 : COLOR_V2.BLUE\n } url('data:image/svg+xml; utf8, ${checkSvg}') no-repeat center`,\n borderColor: COLOR_V2.BLUE,\n },\n ...(!disabled && {\n [`.${INPUT_CLASSNAME}:focus + &::before`]: {\n borderColor: COLOR_V2.BLUE,\n },\n [`.${INPUT_CLASSNAME}:hover + &::before`]: {\n borderColor: COLOR_V2.BLUE,\n },\n }),\n '&::before': {\n background: disabled ? COLOR_V2.GRAY_10 : COLOR_V2.GRAY_20,\n ...(!disabled\n ? {\n border: markInvalid ? `1.5px solid ${COLOR_V2.RED}` : `1.5px solid ${COLOR_V2.GRAY_80}`,\n }\n : {\n border: `1.5px solid ${COLOR_V2.GRAY_60}`,\n }),\n borderRadius: '3px',\n boxSizing: 'border-box',\n content: '\"\"',\n display: 'inline-block',\n height: '22px',\n lineHeight: '22px',\n margin: '0 8px 0 -16px',\n width: '22px',\n },\n a: {\n ...textLinkStyle(theme, {}),\n },\n lineHeight: '22px',\n display: 'flex',\n opacity: disabled ? 0.56 : 1,\n })}\n {...filterStyledLabelProps(props)}\n />\n );\n};\n\ninterface CheckboxProps<T = HTMLInputElement> extends InputProps<T> {\n id?: string;\n}\n\nconst filterCheckboxProps = (props: CheckboxProps) => filterProps(props, ['markInvalid']);\n\nexport const Checkbox: React.FC<CheckboxProps<HTMLInputElement>> = React.forwardRef<\n HTMLInputElement,\n CheckboxProps<HTMLInputElement>\n>(({id = useId(), children, style, disabled, ...props}, ref) => (\n <div\n css={{\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-start',\n }}\n style={style}\n >\n <Input\n type={'checkbox'}\n id={id}\n style={{\n height: '22px',\n marginBottom: '0',\n opacity: 0,\n width: '22px',\n }}\n disabled={disabled}\n ref={ref}\n {...filterCheckboxProps(props)}\n />\n <StyledLabel htmlFor={id} disabled={disabled} markInvalid={props.markInvalid}>\n {children}\n </StyledLabel>\n </div>\n));\n\nexport type CheckboxLabelProps<T = HTMLSpanElement> = TextProps<T>;\n\nexport const CheckboxLabel = ({color = COLOR.TEXT, ...props}: CheckboxLabelProps) => (\n <Text\n css={(theme: Theme) => ({\n ...textStyle(theme, {\n color,\n ...props,\n }),\n a: {\n color: COLOR.LINK,\n textDecoration: 'none',\n },\n })}\n {...props}\n />\n);\n"],"file":"Checkbox.js"}
|
package/src/Form/ErrorMessage.js
CHANGED
|
@@ -44,7 +44,7 @@ var errorMessageStyle = function errorMessageStyle(theme, _ref) {
|
|
|
44
44
|
}, props))), {}, {
|
|
45
45
|
a: _objectSpread({}, (0, _Text.linkStyle)(theme, _objectSpread({
|
|
46
46
|
bold: false,
|
|
47
|
-
fontSize: '
|
|
47
|
+
fontSize: '12px',
|
|
48
48
|
textTransform: 'none'
|
|
49
49
|
}, props))),
|
|
50
50
|
marginBottom: '12px'
|
|
@@ -73,7 +73,7 @@ var ErrorMessage = function ErrorMessage(_ref2) {
|
|
|
73
73
|
"aria-hidden": "true"
|
|
74
74
|
}), (0, _react.jsx)(_Text.Text, {
|
|
75
75
|
color: _Identity.COLOR.RED,
|
|
76
|
-
fontSize: '
|
|
76
|
+
fontSize: '12px'
|
|
77
77
|
}, children));
|
|
78
78
|
};
|
|
79
79
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ErrorMessage.tsx"],"names":["errorMessageStyle","theme","justify","align","props","a","bold","fontSize","textTransform","marginBottom","filterErrorMessageProps","ErrorMessage","children","marginRight","COLOR","RED"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;AAIO,IAAMA,iBAA8E,GAAG,SAAjFA,iBAAiF,CAC5FC,KAD4F;AAAA,0BAE3FC,OAF2F;AAAA,MAE3FA,OAF2F,6BAEjF,QAFiF;AAAA,wBAEvEC,KAFuE;AAAA,MAEvEA,KAFuE,2BAE/D,QAF+D;AAAA,MAElDC,KAFkD;AAAA,yCAIzF;AAAcD,IAAAA,KAAK,EAALA,KAAd;AAAqBD,IAAAA,OAAO,EAAPA;AAArB,KAAiCE,KAAjC,EAJyF;AAK5FC,IAAAA,CAAC,oBACI,qBAAUJ,KAAV;AAAkBK,MAAAA,IAAI,EAAE,KAAxB;AAA+BC,MAAAA,QAAQ,EAAE,MAAzC;AAAiDC,MAAAA,aAAa,EAAE;AAAhE,OAA2EJ,KAA3E,EADJ,CAL2F;AAQ5FK,IAAAA,YAAY,EAAE;AAR8E;AAAA,CAAvF;;;;AAWA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACN,KAAD,EAA8B;AACnE,SAAO,uBAAY,gCAAmBA,KAAnB,CAAZ,EAA4D,EAA5D,CAAP;AACD,CAFM;;;;AAIA,IAAMO,YAAY,GAAG,SAAfA,YAAe;AAAA,MAAEC,QAAF,SAAEA,QAAF;AAAA,MAAeR,KAAf;AAAA,SAC1B,gBAAC,eAAD;AAAS,IAAA,GAAG,EAAE,aAACH,KAAD;AAAA,aAAkBD,iBAAiB,CAACC,KAAD,EAAQG,KAAR,CAAnC;AAAA;AAAd,KAAqEA,KAArE,GACE,gBAAC,eAAD;AAAW,IAAA,KAAK,EAAE;AAACS,MAAAA,WAAW,EAAE;AAAd,KAAlB;AAAwC,mBAAY;AAApD,IADF,EAEE,gBAAC,UAAD;AAAM,IAAA,KAAK,EAAEC,gBAAMC,GAAnB;AAAwB,IAAA,QAAQ,EAAE;AAAlC,KACGH,QADH,CAFF,CAD0B;AAAA,CAArB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {ErrorIcon} from '../Icon';\n\nimport {COLOR} from '../Identity';\nimport {FlexBox, FlexBoxProps, flexBoxStyle, filterFlexBoxProps, Theme} from '../Layout';\nimport {Text, linkStyle} from '../Text';\nimport {filterProps} from '../util';\n\ntype ErrorMessageProps<T = HTMLDivElement> = FlexBoxProps<T>;\n\nexport const errorMessageStyle: <T>(theme: Theme, props: ErrorMessageProps<T>) => CSSObject = (\n theme,\n {justify = 'center', align = 'center', ...props},\n) => ({\n ...flexBoxStyle({align, justify, ...props}),\n a: {\n ...linkStyle(theme, {bold: false, fontSize: '
|
|
1
|
+
{"version":3,"sources":["ErrorMessage.tsx"],"names":["errorMessageStyle","theme","justify","align","props","a","bold","fontSize","textTransform","marginBottom","filterErrorMessageProps","ErrorMessage","children","marginRight","COLOR","RED"],"mappings":";;;;;;;;;;;;;;;AAoBA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;AAIO,IAAMA,iBAA8E,GAAG,SAAjFA,iBAAiF,CAC5FC,KAD4F;AAAA,0BAE3FC,OAF2F;AAAA,MAE3FA,OAF2F,6BAEjF,QAFiF;AAAA,wBAEvEC,KAFuE;AAAA,MAEvEA,KAFuE,2BAE/D,QAF+D;AAAA,MAElDC,KAFkD;AAAA,yCAIzF;AAAcD,IAAAA,KAAK,EAALA,KAAd;AAAqBD,IAAAA,OAAO,EAAPA;AAArB,KAAiCE,KAAjC,EAJyF;AAK5FC,IAAAA,CAAC,oBACI,qBAAUJ,KAAV;AAAkBK,MAAAA,IAAI,EAAE,KAAxB;AAA+BC,MAAAA,QAAQ,EAAE,MAAzC;AAAiDC,MAAAA,aAAa,EAAE;AAAhE,OAA2EJ,KAA3E,EADJ,CAL2F;AAQ5FK,IAAAA,YAAY,EAAE;AAR8E;AAAA,CAAvF;;;;AAWA,IAAMC,uBAAuB,GAAG,SAA1BA,uBAA0B,CAACN,KAAD,EAA8B;AACnE,SAAO,uBAAY,gCAAmBA,KAAnB,CAAZ,EAA4D,EAA5D,CAAP;AACD,CAFM;;;;AAIA,IAAMO,YAAY,GAAG,SAAfA,YAAe;AAAA,MAAEC,QAAF,SAAEA,QAAF;AAAA,MAAeR,KAAf;AAAA,SAC1B,gBAAC,eAAD;AAAS,IAAA,GAAG,EAAE,aAACH,KAAD;AAAA,aAAkBD,iBAAiB,CAACC,KAAD,EAAQG,KAAR,CAAnC;AAAA;AAAd,KAAqEA,KAArE,GACE,gBAAC,eAAD;AAAW,IAAA,KAAK,EAAE;AAACS,MAAAA,WAAW,EAAE;AAAd,KAAlB;AAAwC,mBAAY;AAApD,IADF,EAEE,gBAAC,UAAD;AAAM,IAAA,KAAK,EAAEC,gBAAMC,GAAnB;AAAwB,IAAA,QAAQ,EAAE;AAAlC,KACGH,QADH,CAFF,CAD0B;AAAA,CAArB","sourcesContent":["/*\n * Wire\n * Copyright (C) 2018 Wire Swiss GmbH\n *\n * This program is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see http://www.gnu.org/licenses/.\n *\n */\n\n/** @jsx jsx */\nimport {CSSObject, jsx} from '@emotion/react';\nimport {ErrorIcon} from '../Icon';\n\nimport {COLOR} from '../Identity';\nimport {FlexBox, FlexBoxProps, flexBoxStyle, filterFlexBoxProps, Theme} from '../Layout';\nimport {Text, linkStyle} from '../Text';\nimport {filterProps} from '../util';\n\ntype ErrorMessageProps<T = HTMLDivElement> = FlexBoxProps<T>;\n\nexport const errorMessageStyle: <T>(theme: Theme, props: ErrorMessageProps<T>) => CSSObject = (\n theme,\n {justify = 'center', align = 'center', ...props},\n) => ({\n ...flexBoxStyle({align, justify, ...props}),\n a: {\n ...linkStyle(theme, {bold: false, fontSize: '12px', textTransform: 'none', ...props}),\n },\n marginBottom: '12px',\n});\n\nexport const filterErrorMessageProps = (props: ErrorMessageProps) => {\n return filterProps(filterFlexBoxProps(props) as ErrorMessageProps, []);\n};\n\nexport const ErrorMessage = ({children, ...props}: ErrorMessageProps) => (\n <FlexBox css={(theme: Theme) => errorMessageStyle(theme, props)} {...props}>\n <ErrorIcon style={{marginRight: '8px'}} aria-hidden=\"true\" />\n <Text color={COLOR.RED} fontSize={'12px'}>\n {children}\n </Text>\n </FlexBox>\n);\n"],"file":"ErrorMessage.js"}
|
package/src/Form/Input.js
CHANGED
|
@@ -36,7 +36,7 @@ var inputStyle = function inputStyle(theme, _ref) {
|
|
|
36
36
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled;
|
|
37
37
|
var placeholderStyle = {
|
|
38
38
|
color: theme.Input.placeholderColor,
|
|
39
|
-
fontSize: '
|
|
39
|
+
fontSize: '16px',
|
|
40
40
|
textTransform: placeholderTextTransform
|
|
41
41
|
};
|
|
42
42
|
return {
|
|
@@ -46,19 +46,19 @@ var inputStyle = function inputStyle(theme, _ref) {
|
|
|
46
46
|
'&::-ms-input-placeholder': _objectSpread({}, placeholderStyle),
|
|
47
47
|
'&::-webkit-input-placeholder': _objectSpread({}, placeholderStyle),
|
|
48
48
|
'&:focus': {
|
|
49
|
-
boxShadow: "0 0 0 1px ".concat(_Identity.
|
|
49
|
+
boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.BLUE)
|
|
50
50
|
},
|
|
51
51
|
'&:invalid:not(:focus)': !markInvalid ? {
|
|
52
|
-
boxShadow: "0 0 0 1px ".concat(_Identity.
|
|
52
|
+
boxShadow: "0 0 0 1px ".concat(_Identity.COLOR_V2.GRAY)
|
|
53
53
|
} : {},
|
|
54
54
|
background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
|
|
55
55
|
border: 'none',
|
|
56
56
|
borderRadius: '4px',
|
|
57
|
-
boxShadow: markInvalid ? "0 0 0 1px ".concat(_Identity.
|
|
58
|
-
caretColor: _Identity.
|
|
57
|
+
boxShadow: markInvalid ? "0 0 0 1px ".concat(_Identity.COLOR_V2.RED) : "0 0 0 1px ".concat(_Identity.COLOR_V2.GRAY),
|
|
58
|
+
caretColor: _Identity.COLOR_V2.BLUE,
|
|
59
59
|
color: theme.general.color,
|
|
60
60
|
fontWeight: 300,
|
|
61
|
-
height: '
|
|
61
|
+
height: '48px',
|
|
62
62
|
lineHeight: '24px',
|
|
63
63
|
margin: '0 0 16px',
|
|
64
64
|
outline: 'none',
|