@codacy/ui-components 0.50.1 → 0.51.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.
Files changed (21) hide show
  1. package/lib/Button/styles.js +3 -3
  2. package/lib/CloseButton/index.js +3 -3
  3. package/lib/Dropdown/Dropdown.styles.js +9 -9
  4. package/lib/Link/Link.js +15 -4
  5. package/lib/Link/Link.styles.js +2 -2
  6. package/lib/Link/Link.types.d.ts +2 -0
  7. package/lib/Modal/index.d.ts +1 -0
  8. package/lib/Modal/index.js +2 -1
  9. package/lib/Modal/styles.js +15 -15
  10. package/lib/Select/Select.d.ts +2 -2
  11. package/lib/Select/Select.js +35 -64
  12. package/lib/Select/types.d.ts +3 -9
  13. package/lib/Skeleton/Skeleton.js +2 -1
  14. package/lib/Stepper/Stepper.js +1 -1
  15. package/lib/Table/Table.js +2 -2
  16. package/lib/Toggle/Toggle.js +1 -1
  17. package/lib/theme/colors.d.ts +22 -11
  18. package/lib/theme/colors.js +44 -42
  19. package/package.json +22 -21
  20. package/lib/Select/style.d.ts +0 -2
  21. package/lib/Select/style.js +0 -76
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
- // NEUTRAL
16
- 'neutral-900': '#172B4D',
17
- // Figma - neutral
18
- 'neutral-800': '#1D3660',
19
- // Figma - black-600
20
- 'neutral-700': '#354B71',
21
- // Figma - black-500
22
- 'neutral-600': '#4C6083',
23
- // Figma - black-400 (secondary)
24
- 'neutral-500': '#7E90B2',
25
- // Figma - black-300 (complementary)
26
- 'neutral-400': '#B6C6E0',
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['neutral-500'],
70
- 'accent-subtle-hover': baseColors['neutral-600'],
71
- 'accent-subtle-focus': baseColors['neutral-600'],
72
- 'accent-subtle-active': baseColors['neutral-700'],
73
- 'accent-subtle-disabled': baseColors['neutral-300'],
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['neutral-900'],
87
- 'text-secondary': baseColors['neutral-600'],
88
- 'text-complementary': baseColors['neutral-500'],
89
- 'text-invert': baseColors['neutral-0'],
90
- 'text-placeholder': baseColors['neutral-400'],
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['neutral-0'],
96
- 'background-secondary': baseColors['neutral-50'],
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['neutral-200'],
91
+ 'background-neutral': baseColors['black-80'],
102
92
  'control-border': baseColors['blue-300'],
103
- 'control-background': baseColors['neutral-0'],
104
- 'control-active-background': baseColors['neutral-100'],
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['neutral-200'],
109
- 'ui-navbar': baseColors['neutral-900'],
110
- 'ui-navbar-text': baseColors['neutral-300'],
111
- 'icon-primary': baseColors['neutral-400'],
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.50.1",
3
+ "version": "0.51.0",
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
- "@emotion/core": "^10.1.1",
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/styled": "10.x",
51
- "@storybook/addon-docs": "^6.3.8",
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.3.8",
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": "^0.9.2",
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.8.2",
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.1.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/styled": "10.x",
104
- "react": ">=16.13",
105
- "react-dom": ">=16.13",
106
- "typeface-clear-sans": "0.0.44",
107
- "reakit": "1.1.1",
108
- "react-toastify": "^8.0.2"
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
@@ -1,2 +0,0 @@
1
- import { Styles } from 'react-select';
2
- export declare function customStyles(hasError: boolean): Partial<Styles>;
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
- }