@codacy/ui-components 0.50.2 → 0.51.1
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/lib/Button/styles.js +3 -3
- package/lib/CloseButton/index.js +3 -3
- package/lib/Dropdown/Dropdown.styles.js +9 -9
- package/lib/Link/Link.js +15 -4
- package/lib/Link/Link.styles.js +2 -2
- package/lib/Link/Link.types.d.ts +2 -0
- package/lib/Modal/styles.js +15 -15
- package/lib/Select/Select.d.ts +2 -2
- package/lib/Select/Select.js +35 -64
- package/lib/Select/types.d.ts +3 -9
- package/lib/Skeleton/Skeleton.js +2 -1
- package/lib/Stepper/Stepper.js +1 -1
- package/lib/Tab/Tab.styles.js +20 -17
- package/lib/Tab/Tab.types.d.ts +2 -1
- package/lib/Table/Table.js +2 -2
- package/lib/Toggle/Toggle.js +1 -1
- package/lib/theme/colors.d.ts +22 -11
- package/lib/theme/colors.js +44 -42
- package/package.json +22 -21
- package/lib/Select/style.d.ts +0 -2
- package/lib/Select/style.js +0 -76
package/lib/theme/colors.d.ts
CHANGED
|
@@ -58,17 +58,6 @@ declare const themeColors: {
|
|
|
58
58
|
'icon-success': string;
|
|
59
59
|
'icon-warning': string;
|
|
60
60
|
'icon-danger': string;
|
|
61
|
-
'blue-900': string;
|
|
62
|
-
'blue-800': string;
|
|
63
|
-
'blue-700': string;
|
|
64
|
-
'blue-600': string;
|
|
65
|
-
'blue-500': string;
|
|
66
|
-
'blue-400': string;
|
|
67
|
-
'blue-300': string;
|
|
68
|
-
'blue-200': string;
|
|
69
|
-
'blue-100': string;
|
|
70
|
-
'blue-50': string;
|
|
71
|
-
'blue-0': string;
|
|
72
61
|
'neutral-900': string;
|
|
73
62
|
'neutral-800': string;
|
|
74
63
|
'neutral-700': string;
|
|
@@ -80,6 +69,28 @@ declare const themeColors: {
|
|
|
80
69
|
'neutral-100': string;
|
|
81
70
|
'neutral-50': string;
|
|
82
71
|
'neutral-0': string;
|
|
72
|
+
'blue-900': string;
|
|
73
|
+
'blue-800': string;
|
|
74
|
+
'blue-700': string;
|
|
75
|
+
'blue-600': string;
|
|
76
|
+
'blue-500': string;
|
|
77
|
+
'blue-400': string;
|
|
78
|
+
'blue-300': string;
|
|
79
|
+
'blue-200': string;
|
|
80
|
+
'blue-100': string;
|
|
81
|
+
'blue-50': string;
|
|
82
|
+
'blue-0': string;
|
|
83
|
+
'black-700': string;
|
|
84
|
+
'black-600': string;
|
|
85
|
+
'black-500': string;
|
|
86
|
+
'black-400': string;
|
|
87
|
+
'black-300': string;
|
|
88
|
+
'black-200': string;
|
|
89
|
+
'black-100': string;
|
|
90
|
+
'black-80': string;
|
|
91
|
+
'black-60': string;
|
|
92
|
+
'black-50': string;
|
|
93
|
+
'black-0': string;
|
|
83
94
|
'red-400': string;
|
|
84
95
|
'red-300': string;
|
|
85
96
|
'red-200': string;
|
package/lib/theme/colors.js
CHANGED
|
@@ -12,28 +12,18 @@ var baseColors = {
|
|
|
12
12
|
'blue-100': '#DDE6FF',
|
|
13
13
|
'blue-50': '#EBF1FF',
|
|
14
14
|
'blue-0': '#F9FBFF',
|
|
15
|
-
//
|
|
16
|
-
'
|
|
17
|
-
|
|
18
|
-
'
|
|
19
|
-
|
|
20
|
-
'
|
|
21
|
-
|
|
22
|
-
'
|
|
23
|
-
|
|
24
|
-
'
|
|
25
|
-
|
|
26
|
-
'
|
|
27
|
-
// Figma - black-200
|
|
28
|
-
'neutral-300': '#C9D8EF',
|
|
29
|
-
// Figma - black-100
|
|
30
|
-
'neutral-200': '#E5ECF5',
|
|
31
|
-
// Figma - black-80 (borders)
|
|
32
|
-
'neutral-100': '#F2F5FD',
|
|
33
|
-
// Figma - black-60
|
|
34
|
-
'neutral-50': '#F5F8FE',
|
|
35
|
-
'neutral-0': '#FFFFFF',
|
|
36
|
-
// Figma - white
|
|
15
|
+
// BLACK
|
|
16
|
+
'black-700': '#172B4D',
|
|
17
|
+
'black-600': '#1D3660',
|
|
18
|
+
'black-500': '#354B71',
|
|
19
|
+
'black-400': '#4C6083',
|
|
20
|
+
'black-300': '#7E90B2',
|
|
21
|
+
'black-200': '#B6C6E0',
|
|
22
|
+
'black-100': '#C9D8EF',
|
|
23
|
+
'black-80': '#E5ECF5',
|
|
24
|
+
'black-60': '#F2F5FD',
|
|
25
|
+
'black-50': '#F5F8FE',
|
|
26
|
+
'black-0': '#FFFFFF',
|
|
37
27
|
// REDS
|
|
38
28
|
'red-400': '#C92C22',
|
|
39
29
|
'red-300': '#E04440',
|
|
@@ -66,11 +56,11 @@ var functionalColors = {
|
|
|
66
56
|
'accent-primary-focus': baseColors['blue-800'],
|
|
67
57
|
'accent-primary-active': baseColors['blue-900'],
|
|
68
58
|
'accent-primary-disabled': baseColors['blue-400'],
|
|
69
|
-
'accent-subtle': baseColors['
|
|
70
|
-
'accent-subtle-hover': baseColors['
|
|
71
|
-
'accent-subtle-focus': baseColors['
|
|
72
|
-
'accent-subtle-active': baseColors['
|
|
73
|
-
'accent-subtle-disabled': baseColors['
|
|
59
|
+
'accent-subtle': baseColors['black-300'],
|
|
60
|
+
'accent-subtle-hover': baseColors['black-400'],
|
|
61
|
+
'accent-subtle-focus': baseColors['black-400'],
|
|
62
|
+
'accent-subtle-active': baseColors['black-500'],
|
|
63
|
+
'accent-subtle-disabled': baseColors['black-100'],
|
|
74
64
|
'accent-success': baseColors['green-100'],
|
|
75
65
|
'accent-success-hover': baseColors['green-200'],
|
|
76
66
|
'accent-success-focus': baseColors['green-200'],
|
|
@@ -83,36 +73,48 @@ var functionalColors = {
|
|
|
83
73
|
'accent-danger-disabled': baseColors['red-100'],
|
|
84
74
|
'accent-warning': baseColors['orange-100'],
|
|
85
75
|
'accent-info': baseColors['blue-700'],
|
|
86
|
-
'text-primary': baseColors['
|
|
87
|
-
'text-secondary': baseColors['
|
|
88
|
-
'text-complementary': baseColors['
|
|
89
|
-
'text-invert': baseColors['
|
|
90
|
-
'text-placeholder': baseColors['
|
|
76
|
+
'text-primary': baseColors['black-700'],
|
|
77
|
+
'text-secondary': baseColors['black-400'],
|
|
78
|
+
'text-complementary': baseColors['black-300'],
|
|
79
|
+
'text-invert': baseColors['black-0'],
|
|
80
|
+
'text-placeholder': baseColors['black-200'],
|
|
91
81
|
'text-info': baseColors['blue-800'],
|
|
92
82
|
'text-success': baseColors['green-300'],
|
|
93
83
|
'text-warning': baseColors['orange-200'],
|
|
94
84
|
'text-danger': baseColors['red-400'],
|
|
95
|
-
'background-primary': baseColors['
|
|
96
|
-
'background-secondary': baseColors['
|
|
85
|
+
'background-primary': baseColors['black-0'],
|
|
86
|
+
'background-secondary': baseColors['black-50'],
|
|
97
87
|
'background-info': baseColors['blue-50'],
|
|
98
88
|
'background-success': baseColors['green-50'],
|
|
99
89
|
'background-warning': baseColors['orange-50'],
|
|
100
90
|
'background-danger': baseColors['red-50'],
|
|
101
|
-
'background-neutral': baseColors['
|
|
91
|
+
'background-neutral': baseColors['black-80'],
|
|
102
92
|
'control-border': baseColors['blue-300'],
|
|
103
|
-
'control-background': baseColors['
|
|
104
|
-
'control-active-background': baseColors['
|
|
93
|
+
'control-background': baseColors['black-0'],
|
|
94
|
+
'control-active-background': baseColors['black-60'],
|
|
105
95
|
'control-active-border': baseColors['blue-700'],
|
|
106
96
|
'control-invalid-border': baseColors['red-200'],
|
|
107
97
|
'control-disabled': baseColors['blue-100'],
|
|
108
|
-
'ui-border': baseColors['
|
|
109
|
-
'ui-navbar': baseColors['
|
|
110
|
-
'ui-navbar-text': baseColors['
|
|
111
|
-
'icon-primary': baseColors['
|
|
98
|
+
'ui-border': baseColors['black-80'],
|
|
99
|
+
'ui-navbar': baseColors['black-700'],
|
|
100
|
+
'ui-navbar-text': baseColors['black-100'],
|
|
101
|
+
'icon-primary': baseColors['black-200'],
|
|
112
102
|
'icon-info': baseColors['blue-700'],
|
|
113
103
|
'icon-success': baseColors['green-200'],
|
|
114
104
|
'icon-warning': baseColors['orange-100'],
|
|
115
|
-
'icon-danger': baseColors['red-200']
|
|
105
|
+
'icon-danger': baseColors['red-200'],
|
|
106
|
+
// NEUTRAL
|
|
107
|
+
'neutral-900': baseColors['black-700'],
|
|
108
|
+
'neutral-800': baseColors['black-600'],
|
|
109
|
+
'neutral-700': baseColors['black-500'],
|
|
110
|
+
'neutral-600': baseColors['black-400'],
|
|
111
|
+
'neutral-500': baseColors['black-300'],
|
|
112
|
+
'neutral-400': baseColors['black-200'],
|
|
113
|
+
'neutral-300': baseColors['black-100'],
|
|
114
|
+
'neutral-200': baseColors['black-80'],
|
|
115
|
+
'neutral-100': baseColors['black-60'],
|
|
116
|
+
'neutral-50': baseColors['black-50'],
|
|
117
|
+
'neutral-0': baseColors['black-0']
|
|
116
118
|
};
|
|
117
119
|
|
|
118
120
|
var themeColors = _objectSpread(_objectSpread({}, baseColors), functionalColors);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codacy/ui-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.51.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"author": "",
|
|
@@ -28,29 +28,26 @@
|
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@babel/runtime": "^7.12.5",
|
|
31
|
-
"@
|
|
32
|
-
"@emotion/styled-base": "^10.0.31",
|
|
33
|
-
"@pathofdev/react-tag-input": "github:inesgomas/react-tag-input#9820d2ae045d9398fbd3ba9021f675b127003237",
|
|
34
|
-
"@popperjs/core": "^2.5.4",
|
|
31
|
+
"@pathofdev/react-tag-input": "github:inesgomas/react-tag-input",
|
|
35
32
|
"@styled-system/should-forward-prop": "^5.1.5",
|
|
36
33
|
"autosize": "^4.0.2",
|
|
37
34
|
"emotion-theming": "10.x",
|
|
38
|
-
"lodash": "^4.17.20",
|
|
39
35
|
"md5": "^2.3.0",
|
|
40
36
|
"polished": "^3.6.7",
|
|
41
37
|
"query-string": "^6.13.7",
|
|
42
38
|
"react-popper": "^2.2.4",
|
|
43
|
-
"react-select": "3.1.0",
|
|
44
|
-
"react-spring": "^8.0.27",
|
|
45
39
|
"styled-system": "^5.1.5"
|
|
46
40
|
},
|
|
47
41
|
"devDependencies": {
|
|
48
42
|
"@babel/cli": "^7.12.1",
|
|
49
43
|
"@babel/core": "^7.12.3",
|
|
50
|
-
"@emotion/
|
|
51
|
-
"@
|
|
44
|
+
"@emotion/core": "^10.3.0",
|
|
45
|
+
"@emotion/styled": "^10.3.0",
|
|
46
|
+
"@emotion/styled-base": "^10.3.0",
|
|
47
|
+
"@popperjs/core": "^2.5.4",
|
|
48
|
+
"@storybook/addon-docs": "^6.4.9",
|
|
52
49
|
"@storybook/addons": "^6.3.8",
|
|
53
|
-
"@storybook/react": "^6.
|
|
50
|
+
"@storybook/react": "^6.4.9",
|
|
54
51
|
"@testing-library/dom": "^6.16.0",
|
|
55
52
|
"@testing-library/jest-dom": "^5.11.6",
|
|
56
53
|
"@testing-library/react": "^10.4.9",
|
|
@@ -61,7 +58,6 @@
|
|
|
61
58
|
"@types/md5": "^2.2.1",
|
|
62
59
|
"@types/react": "^16.9.56",
|
|
63
60
|
"@types/react-dom": "^16.9.9",
|
|
64
|
-
"@types/react-select": "3.0.13",
|
|
65
61
|
"@types/resize-observer-browser": "^0.1.6",
|
|
66
62
|
"@types/styled-system": "^5.1.10",
|
|
67
63
|
"@types/styled-system__should-forward-prop": "^5.1.2",
|
|
@@ -72,14 +68,14 @@
|
|
|
72
68
|
"babel-plugin-emotion": "^10.0.33",
|
|
73
69
|
"babel-preset-react-app": "^9.1.2",
|
|
74
70
|
"copy-to-clipboard": "^3.3.1",
|
|
75
|
-
"depcheck": "^
|
|
71
|
+
"depcheck": "^1.4.2",
|
|
76
72
|
"eslint": "^6.8.0",
|
|
77
73
|
"eslint-config-prettier": "^6.15.0",
|
|
78
74
|
"eslint-config-react-app": "^5.2.1",
|
|
79
75
|
"eslint-plugin-flowtype": "^3.13.0",
|
|
80
76
|
"eslint-plugin-import": "^2.22.1",
|
|
81
77
|
"eslint-plugin-jsx-a11y": "^6.4.1",
|
|
82
|
-
"eslint-plugin-mdx": "^1.
|
|
78
|
+
"eslint-plugin-mdx": "^1.16.0",
|
|
83
79
|
"eslint-plugin-prettier": "^3.1.4",
|
|
84
80
|
"eslint-plugin-react": "^7.21.5",
|
|
85
81
|
"eslint-plugin-react-hooks": "^1.7.0",
|
|
@@ -89,23 +85,28 @@
|
|
|
89
85
|
"jest-environment-jsdom-fourteen": "1.0.1",
|
|
90
86
|
"jest-watch-typeahead": "^0.4.2",
|
|
91
87
|
"lint-staged": "^9.5.0",
|
|
88
|
+
"lodash": "^4.17.20",
|
|
92
89
|
"prettier": "^1.19.1",
|
|
93
90
|
"react": "^17.0.1",
|
|
94
91
|
"react-docgen-typescript-loader": "^3.7.2",
|
|
95
92
|
"react-dom": "^17.0.1",
|
|
96
93
|
"react-toastify": "^8.0.2",
|
|
97
|
-
"reakit": "1.
|
|
94
|
+
"reakit": "^1.3.11",
|
|
98
95
|
"rimraf": "^3.0.2",
|
|
99
96
|
"typeface-clear-sans": "0.0.44",
|
|
100
97
|
"typescript": "^3.8.3"
|
|
101
98
|
},
|
|
102
99
|
"peerDependencies": {
|
|
103
|
-
"@emotion/
|
|
104
|
-
"
|
|
105
|
-
"
|
|
106
|
-
"
|
|
107
|
-
"
|
|
108
|
-
"react
|
|
100
|
+
"@emotion/core": "^10.3.0",
|
|
101
|
+
"@emotion/styled": "^10.3.0",
|
|
102
|
+
"@emotion/styled-base": "^10.3.0",
|
|
103
|
+
"@popperjs/core": "^2.5.4",
|
|
104
|
+
"lodash": "^4.17.20",
|
|
105
|
+
"react": "^16.8.0 || ^17.0.0",
|
|
106
|
+
"react-dom": "^16.8.0 || ^17.0.0",
|
|
107
|
+
"react-toastify": "^8.0.2",
|
|
108
|
+
"reakit": "^1.3.11",
|
|
109
|
+
"typeface-clear-sans": "0.0.44"
|
|
109
110
|
},
|
|
110
111
|
"husky": {
|
|
111
112
|
"hooks": {
|
package/lib/Select/style.d.ts
DELETED
package/lib/Select/style.js
DELETED
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
|
-
import { theme } from '../';
|
|
3
|
-
import { rgba } from 'polished';
|
|
4
|
-
export function customStyles(hasError) {
|
|
5
|
-
return {
|
|
6
|
-
option: function option(provided, state) {
|
|
7
|
-
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
8
|
-
backgroundColor: state.isSelected ? theme.colors['background-info'] : theme.colors['background-primary'],
|
|
9
|
-
color: theme.colors['text-secondary'],
|
|
10
|
-
fontSize: theme.fontSizes[2],
|
|
11
|
-
padding: "".concat(theme.space[1], " ").concat(theme.space[3]),
|
|
12
|
-
cursor: 'pointer',
|
|
13
|
-
':hover': {
|
|
14
|
-
backgroundColor: !!!state.isSelected && theme.colors['background-secondary']
|
|
15
|
-
},
|
|
16
|
-
':active, :focus': {
|
|
17
|
-
backgroundColor: theme.colors['background-info']
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
},
|
|
21
|
-
control: function control(provided, state) {
|
|
22
|
-
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
23
|
-
height: '2rem',
|
|
24
|
-
minHeight: '2rem',
|
|
25
|
-
borderColor: state.menuIsOpen ? theme.colors['control-active-border'] : hasError ? theme.colors['control-invalid-border'] : theme.colors['control-border'],
|
|
26
|
-
':hover': {
|
|
27
|
-
borderColor: hasError && !state.menuIsOpen ? theme.colors['control-invalid-border'] : theme.colors['control-active-border']
|
|
28
|
-
},
|
|
29
|
-
cursor: 'pointer',
|
|
30
|
-
boxShadow: 'none'
|
|
31
|
-
});
|
|
32
|
-
},
|
|
33
|
-
menu: function menu(provided) {
|
|
34
|
-
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
35
|
-
border: theme.borderSize[0] + ' solid ' + theme.colors['brand-primary'],
|
|
36
|
-
boxShadow: '0 3px 6px ' + rgba(theme.colors['brand-primary'], 0.3),
|
|
37
|
-
marginTop: theme.space[1]
|
|
38
|
-
});
|
|
39
|
-
},
|
|
40
|
-
indicatorSeparator: function indicatorSeparator() {
|
|
41
|
-
return {
|
|
42
|
-
display: 'none'
|
|
43
|
-
};
|
|
44
|
-
},
|
|
45
|
-
placeholder: function placeholder(provided, state) {
|
|
46
|
-
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
47
|
-
overflow: 'hidden',
|
|
48
|
-
position: 'absolute',
|
|
49
|
-
textOverflow: 'ellipsis',
|
|
50
|
-
whiteSpace: 'nowrap',
|
|
51
|
-
maxWidth: "calc(100% - ".concat(theme.space[3], ")"),
|
|
52
|
-
color: state.isFocused || state.isSelected ? theme.colors['text-secondary'] : theme.colors['text-placeholder']
|
|
53
|
-
});
|
|
54
|
-
},
|
|
55
|
-
valueContainer: function valueContainer(provided) {
|
|
56
|
-
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
57
|
-
fontSize: theme.fontSizes[2],
|
|
58
|
-
padding: "0px ".concat(theme.space[3])
|
|
59
|
-
});
|
|
60
|
-
},
|
|
61
|
-
menuList: function menuList(provided) {
|
|
62
|
-
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
63
|
-
borderRadius: '0.25rem'
|
|
64
|
-
});
|
|
65
|
-
},
|
|
66
|
-
dropdownIndicator: function dropdownIndicator(provided, state) {
|
|
67
|
-
return _objectSpread(_objectSpread({}, provided), {}, {
|
|
68
|
-
'&, :hover': {
|
|
69
|
-
color: theme.colors['brand-primary']
|
|
70
|
-
},
|
|
71
|
-
transform: state.selectProps.menuIsOpen ? 'rotate(180deg)' : 'rotate(0deg)',
|
|
72
|
-
padding: "".concat(theme.space[1], " ").concat(theme.space[3])
|
|
73
|
-
});
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
}
|