cozy-ui 121.0.0 → 121.1.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.
Files changed (29) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cozy-ui.min.css +1 -1
  3. package/dist/cozy-ui.utils.min.css +1 -1
  4. package/package.json +1 -1
  5. package/react/Avatar/Readme.md +41 -21
  6. package/react/Avatar/helpers.js +13 -2
  7. package/react/Avatar/index.jsx +26 -5
  8. package/react/Buttons/Readme.md +1 -0
  9. package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +156 -0
  10. package/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js +7 -19
  11. package/react/ToggleButton/Readme.md +60 -0
  12. package/react/ToggleButton/index.js +24 -1
  13. package/react/ToggleButtonGroup/Readme.md +79 -17
  14. package/stylus/cozy-ui/build.styl +2 -0
  15. package/stylus/utilities/border.styl +8 -0
  16. package/transpiled/react/Avatar/helpers.d.ts +1 -1
  17. package/transpiled/react/Avatar/helpers.js +16 -2
  18. package/transpiled/react/Avatar/index.js +11 -5
  19. package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts +150 -0
  20. package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts +150 -0
  21. package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts +150 -0
  22. package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts +150 -0
  23. package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +151 -0
  24. package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkInvertedOverrides.d.ts +157 -19
  25. package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkNormalOverrides.d.ts +157 -19
  26. package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts +157 -19
  27. package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts +157 -19
  28. package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js +7 -19
  29. package/transpiled/react/ToggleButton/index.js +26 -1
@@ -1,11 +1,12 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["className", "color", "size", "disabled"];
4
+ var _excluded = ["className", "color", "size", "border", "innerBorder", "disabled"];
4
5
  import AvatarMui from '@material-ui/core/Avatar';
5
6
  import cx from 'classnames';
6
7
  import PropTypes from 'prop-types';
7
8
  import React from 'react';
8
- import { colorMapping } from "cozy-ui/transpiled/react/Avatar/helpers";
9
+ import { colorMapping, supportedColors, nameToColor } from "cozy-ui/transpiled/react/Avatar/helpers";
9
10
  import { makeStyles } from "cozy-ui/transpiled/react/styles";
10
11
  var useStyles = makeStyles(function (theme) {
11
12
  return {
@@ -26,16 +27,21 @@ var Avatar = function Avatar(_ref3) {
26
27
  var className = _ref3.className,
27
28
  color = _ref3.color,
28
29
  size = _ref3.size,
30
+ border = _ref3.border,
31
+ innerBorder = _ref3.innerBorder,
29
32
  disabled = _ref3.disabled,
30
33
  props = _objectWithoutProperties(_ref3, _excluded);
31
34
 
35
+ var defaultColor = typeof props.children === 'string' ? nameToColor(props.children) : undefined;
32
36
  var classes = useStyles({
33
- color: color
37
+ color: color === 'none' ? undefined : supportedColors.includes(color) ? color : defaultColor
34
38
  });
35
39
  return /*#__PURE__*/React.createElement(AvatarMui, _extends({
36
40
  classes: classes,
37
41
  className: cx(className, "size-".concat(size), {
38
- disabled: !!disabled
42
+ disabled: !!disabled,
43
+ border: !!border,
44
+ innerBorder: !!innerBorder
39
45
  })
40
46
  }, props));
41
47
  };
@@ -43,7 +49,7 @@ var Avatar = function Avatar(_ref3) {
43
49
  Avatar.propTypes = {
44
50
  className: PropTypes.string,
45
51
  size: PropTypes.oneOfType([PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']), PropTypes.number]),
46
- color: PropTypes.string,
52
+ color: PropTypes.oneOf([].concat(_toConsumableArray(supportedColors), ['none'])),
47
53
  disabled: PropTypes.bool
48
54
  };
49
55
  Avatar.defaultProps = {
@@ -57,6 +57,85 @@ export function makeDarkInvertedOverrides(theme: any): {
57
57
  };
58
58
  };
59
59
  };
60
+ MuiToggleButtonGroup: {
61
+ groupedHorizontal: {
62
+ '&.rounded': {
63
+ marginRight: number;
64
+ '&:last-child': {
65
+ marginRight: number;
66
+ };
67
+ '&:not(:first-child)': {
68
+ borderTopLeftRadius: string;
69
+ borderBottomLeftRadius: string;
70
+ marginLeft: string;
71
+ borderLeft: string;
72
+ };
73
+ '&:not(:last-child)': {
74
+ '&.rounded': {
75
+ borderTopRightRadius: string;
76
+ borderBottomRightRadius: string;
77
+ };
78
+ };
79
+ };
80
+ };
81
+ };
82
+ MuiToggleButton: {
83
+ root: {
84
+ borderRadius: number;
85
+ color: any;
86
+ border: string;
87
+ padding: number;
88
+ '&$selected': {
89
+ color: any;
90
+ backgroundColor: string;
91
+ '&:not($disabled)': {
92
+ '&.customColor': {
93
+ '&-primary': {
94
+ color: any;
95
+ };
96
+ };
97
+ };
98
+ };
99
+ '&$disabled': {
100
+ color: any;
101
+ };
102
+ '&.rounded': {
103
+ border: number;
104
+ borderRadius: any;
105
+ padding: string;
106
+ '&$selected': {
107
+ backgroundColor: any;
108
+ '&:not($disabled)': {
109
+ '&.customColor': {
110
+ '&-primary': {
111
+ color: any;
112
+ backgroundColor: string;
113
+ '&:hover': {
114
+ textDecoration: string;
115
+ backgroundColor: string;
116
+ '@media (hover: none)': {
117
+ backgroundColor: string;
118
+ };
119
+ };
120
+ };
121
+ };
122
+ };
123
+ };
124
+ };
125
+ };
126
+ sizeSmall: {
127
+ padding: number;
128
+ '&.rounded': {
129
+ padding: string;
130
+ };
131
+ };
132
+ sizeLarge: {
133
+ padding: number;
134
+ '&.rounded': {
135
+ padding: number;
136
+ };
137
+ };
138
+ };
60
139
  MuiButton: {
61
140
  root: {
62
141
  borderRadius: number;
@@ -649,6 +728,77 @@ export function makeDarkInvertedOverrides(theme: any): {
649
728
  };
650
729
  };
651
730
  };
731
+ MuiAvatarGroup: {
732
+ avatar: {
733
+ border: string;
734
+ };
735
+ };
736
+ MuiAvatar: {
737
+ root: {
738
+ fontWeight: number;
739
+ '&.size': {
740
+ '&-xs': {
741
+ width: number;
742
+ height: number;
743
+ fontSize: number;
744
+ '& svg': {
745
+ width: number;
746
+ height: number;
747
+ };
748
+ };
749
+ '&-s': {
750
+ width: number;
751
+ height: number;
752
+ fontSize: number;
753
+ '& svg': {
754
+ width: number;
755
+ height: number;
756
+ };
757
+ };
758
+ '&-m': {
759
+ width: number;
760
+ height: number;
761
+ fontSize: number;
762
+ '& svg': {
763
+ width: number;
764
+ height: number;
765
+ };
766
+ };
767
+ '&-l': {
768
+ width: number;
769
+ height: number;
770
+ fontSize: number;
771
+ '& svg': {
772
+ width: number;
773
+ height: number;
774
+ };
775
+ };
776
+ '&-xl': {
777
+ width: number;
778
+ height: number;
779
+ fontSize: number;
780
+ '& svg': {
781
+ width: number;
782
+ height: number;
783
+ };
784
+ };
785
+ };
786
+ '&.disabled': {
787
+ color: any;
788
+ background: string;
789
+ '& img': {
790
+ filter: string;
791
+ opacity: number;
792
+ };
793
+ };
794
+ '&.border': {
795
+ border: string;
796
+ };
797
+ '&.innerBorder': {
798
+ boxShadow: string;
799
+ };
800
+ };
801
+ };
652
802
  MuiCheckbox: {
653
803
  colorSecondary: {
654
804
  '&$checked': {
@@ -57,6 +57,85 @@ export function makeDarkNormalOverrides(theme: any): {
57
57
  };
58
58
  };
59
59
  };
60
+ MuiToggleButtonGroup: {
61
+ groupedHorizontal: {
62
+ '&.rounded': {
63
+ marginRight: number;
64
+ '&:last-child': {
65
+ marginRight: number;
66
+ };
67
+ '&:not(:first-child)': {
68
+ borderTopLeftRadius: string;
69
+ borderBottomLeftRadius: string;
70
+ marginLeft: string;
71
+ borderLeft: string;
72
+ };
73
+ '&:not(:last-child)': {
74
+ '&.rounded': {
75
+ borderTopRightRadius: string;
76
+ borderBottomRightRadius: string;
77
+ };
78
+ };
79
+ };
80
+ };
81
+ };
82
+ MuiToggleButton: {
83
+ root: {
84
+ borderRadius: number;
85
+ color: any;
86
+ border: string;
87
+ padding: number;
88
+ '&$selected': {
89
+ color: any;
90
+ backgroundColor: string;
91
+ '&:not($disabled)': {
92
+ '&.customColor': {
93
+ '&-primary': {
94
+ color: any;
95
+ };
96
+ };
97
+ };
98
+ };
99
+ '&$disabled': {
100
+ color: any;
101
+ };
102
+ '&.rounded': {
103
+ border: number;
104
+ borderRadius: any;
105
+ padding: string;
106
+ '&$selected': {
107
+ backgroundColor: any;
108
+ '&:not($disabled)': {
109
+ '&.customColor': {
110
+ '&-primary': {
111
+ color: any;
112
+ backgroundColor: string;
113
+ '&:hover': {
114
+ textDecoration: string;
115
+ backgroundColor: string;
116
+ '@media (hover: none)': {
117
+ backgroundColor: string;
118
+ };
119
+ };
120
+ };
121
+ };
122
+ };
123
+ };
124
+ };
125
+ };
126
+ sizeSmall: {
127
+ padding: number;
128
+ '&.rounded': {
129
+ padding: string;
130
+ };
131
+ };
132
+ sizeLarge: {
133
+ padding: number;
134
+ '&.rounded': {
135
+ padding: number;
136
+ };
137
+ };
138
+ };
60
139
  MuiButton: {
61
140
  root: {
62
141
  borderRadius: number;
@@ -649,6 +728,77 @@ export function makeDarkNormalOverrides(theme: any): {
649
728
  };
650
729
  };
651
730
  };
731
+ MuiAvatarGroup: {
732
+ avatar: {
733
+ border: string;
734
+ };
735
+ };
736
+ MuiAvatar: {
737
+ root: {
738
+ fontWeight: number;
739
+ '&.size': {
740
+ '&-xs': {
741
+ width: number;
742
+ height: number;
743
+ fontSize: number;
744
+ '& svg': {
745
+ width: number;
746
+ height: number;
747
+ };
748
+ };
749
+ '&-s': {
750
+ width: number;
751
+ height: number;
752
+ fontSize: number;
753
+ '& svg': {
754
+ width: number;
755
+ height: number;
756
+ };
757
+ };
758
+ '&-m': {
759
+ width: number;
760
+ height: number;
761
+ fontSize: number;
762
+ '& svg': {
763
+ width: number;
764
+ height: number;
765
+ };
766
+ };
767
+ '&-l': {
768
+ width: number;
769
+ height: number;
770
+ fontSize: number;
771
+ '& svg': {
772
+ width: number;
773
+ height: number;
774
+ };
775
+ };
776
+ '&-xl': {
777
+ width: number;
778
+ height: number;
779
+ fontSize: number;
780
+ '& svg': {
781
+ width: number;
782
+ height: number;
783
+ };
784
+ };
785
+ };
786
+ '&.disabled': {
787
+ color: any;
788
+ background: string;
789
+ '& img': {
790
+ filter: string;
791
+ opacity: number;
792
+ };
793
+ };
794
+ '&.border': {
795
+ border: string;
796
+ };
797
+ '&.innerBorder': {
798
+ boxShadow: string;
799
+ };
800
+ };
801
+ };
652
802
  MuiCheckbox: {
653
803
  colorSecondary: {
654
804
  '&$checked': {
@@ -57,6 +57,85 @@ export function makeLightInvertedOverrides(theme: any): {
57
57
  };
58
58
  };
59
59
  };
60
+ MuiToggleButtonGroup: {
61
+ groupedHorizontal: {
62
+ '&.rounded': {
63
+ marginRight: number;
64
+ '&:last-child': {
65
+ marginRight: number;
66
+ };
67
+ '&:not(:first-child)': {
68
+ borderTopLeftRadius: string;
69
+ borderBottomLeftRadius: string;
70
+ marginLeft: string;
71
+ borderLeft: string;
72
+ };
73
+ '&:not(:last-child)': {
74
+ '&.rounded': {
75
+ borderTopRightRadius: string;
76
+ borderBottomRightRadius: string;
77
+ };
78
+ };
79
+ };
80
+ };
81
+ };
82
+ MuiToggleButton: {
83
+ root: {
84
+ borderRadius: number;
85
+ color: any;
86
+ border: string;
87
+ padding: number;
88
+ '&$selected': {
89
+ color: any;
90
+ backgroundColor: string;
91
+ '&:not($disabled)': {
92
+ '&.customColor': {
93
+ '&-primary': {
94
+ color: any;
95
+ };
96
+ };
97
+ };
98
+ };
99
+ '&$disabled': {
100
+ color: any;
101
+ };
102
+ '&.rounded': {
103
+ border: number;
104
+ borderRadius: any;
105
+ padding: string;
106
+ '&$selected': {
107
+ backgroundColor: any;
108
+ '&:not($disabled)': {
109
+ '&.customColor': {
110
+ '&-primary': {
111
+ color: any;
112
+ backgroundColor: string;
113
+ '&:hover': {
114
+ textDecoration: string;
115
+ backgroundColor: string;
116
+ '@media (hover: none)': {
117
+ backgroundColor: string;
118
+ };
119
+ };
120
+ };
121
+ };
122
+ };
123
+ };
124
+ };
125
+ };
126
+ sizeSmall: {
127
+ padding: number;
128
+ '&.rounded': {
129
+ padding: string;
130
+ };
131
+ };
132
+ sizeLarge: {
133
+ padding: number;
134
+ '&.rounded': {
135
+ padding: number;
136
+ };
137
+ };
138
+ };
60
139
  MuiButton: {
61
140
  root: {
62
141
  borderRadius: number;
@@ -649,6 +728,77 @@ export function makeLightInvertedOverrides(theme: any): {
649
728
  };
650
729
  };
651
730
  };
731
+ MuiAvatarGroup: {
732
+ avatar: {
733
+ border: string;
734
+ };
735
+ };
736
+ MuiAvatar: {
737
+ root: {
738
+ fontWeight: number;
739
+ '&.size': {
740
+ '&-xs': {
741
+ width: number;
742
+ height: number;
743
+ fontSize: number;
744
+ '& svg': {
745
+ width: number;
746
+ height: number;
747
+ };
748
+ };
749
+ '&-s': {
750
+ width: number;
751
+ height: number;
752
+ fontSize: number;
753
+ '& svg': {
754
+ width: number;
755
+ height: number;
756
+ };
757
+ };
758
+ '&-m': {
759
+ width: number;
760
+ height: number;
761
+ fontSize: number;
762
+ '& svg': {
763
+ width: number;
764
+ height: number;
765
+ };
766
+ };
767
+ '&-l': {
768
+ width: number;
769
+ height: number;
770
+ fontSize: number;
771
+ '& svg': {
772
+ width: number;
773
+ height: number;
774
+ };
775
+ };
776
+ '&-xl': {
777
+ width: number;
778
+ height: number;
779
+ fontSize: number;
780
+ '& svg': {
781
+ width: number;
782
+ height: number;
783
+ };
784
+ };
785
+ };
786
+ '&.disabled': {
787
+ color: any;
788
+ background: string;
789
+ '& img': {
790
+ filter: string;
791
+ opacity: number;
792
+ };
793
+ };
794
+ '&.border': {
795
+ border: string;
796
+ };
797
+ '&.innerBorder': {
798
+ boxShadow: string;
799
+ };
800
+ };
801
+ };
652
802
  MuiCheckbox: {
653
803
  colorSecondary: {
654
804
  '&$checked': {
@@ -57,6 +57,85 @@ export function makeLightNormalOverrides(theme: any): {
57
57
  };
58
58
  };
59
59
  };
60
+ MuiToggleButtonGroup: {
61
+ groupedHorizontal: {
62
+ '&.rounded': {
63
+ marginRight: number;
64
+ '&:last-child': {
65
+ marginRight: number;
66
+ };
67
+ '&:not(:first-child)': {
68
+ borderTopLeftRadius: string;
69
+ borderBottomLeftRadius: string;
70
+ marginLeft: string;
71
+ borderLeft: string;
72
+ };
73
+ '&:not(:last-child)': {
74
+ '&.rounded': {
75
+ borderTopRightRadius: string;
76
+ borderBottomRightRadius: string;
77
+ };
78
+ };
79
+ };
80
+ };
81
+ };
82
+ MuiToggleButton: {
83
+ root: {
84
+ borderRadius: number;
85
+ color: any;
86
+ border: string;
87
+ padding: number;
88
+ '&$selected': {
89
+ color: any;
90
+ backgroundColor: string;
91
+ '&:not($disabled)': {
92
+ '&.customColor': {
93
+ '&-primary': {
94
+ color: any;
95
+ };
96
+ };
97
+ };
98
+ };
99
+ '&$disabled': {
100
+ color: any;
101
+ };
102
+ '&.rounded': {
103
+ border: number;
104
+ borderRadius: any;
105
+ padding: string;
106
+ '&$selected': {
107
+ backgroundColor: any;
108
+ '&:not($disabled)': {
109
+ '&.customColor': {
110
+ '&-primary': {
111
+ color: any;
112
+ backgroundColor: string;
113
+ '&:hover': {
114
+ textDecoration: string;
115
+ backgroundColor: string;
116
+ '@media (hover: none)': {
117
+ backgroundColor: string;
118
+ };
119
+ };
120
+ };
121
+ };
122
+ };
123
+ };
124
+ };
125
+ };
126
+ sizeSmall: {
127
+ padding: number;
128
+ '&.rounded': {
129
+ padding: string;
130
+ };
131
+ };
132
+ sizeLarge: {
133
+ padding: number;
134
+ '&.rounded': {
135
+ padding: number;
136
+ };
137
+ };
138
+ };
60
139
  MuiButton: {
61
140
  root: {
62
141
  borderRadius: number;
@@ -649,6 +728,77 @@ export function makeLightNormalOverrides(theme: any): {
649
728
  };
650
729
  };
651
730
  };
731
+ MuiAvatarGroup: {
732
+ avatar: {
733
+ border: string;
734
+ };
735
+ };
736
+ MuiAvatar: {
737
+ root: {
738
+ fontWeight: number;
739
+ '&.size': {
740
+ '&-xs': {
741
+ width: number;
742
+ height: number;
743
+ fontSize: number;
744
+ '& svg': {
745
+ width: number;
746
+ height: number;
747
+ };
748
+ };
749
+ '&-s': {
750
+ width: number;
751
+ height: number;
752
+ fontSize: number;
753
+ '& svg': {
754
+ width: number;
755
+ height: number;
756
+ };
757
+ };
758
+ '&-m': {
759
+ width: number;
760
+ height: number;
761
+ fontSize: number;
762
+ '& svg': {
763
+ width: number;
764
+ height: number;
765
+ };
766
+ };
767
+ '&-l': {
768
+ width: number;
769
+ height: number;
770
+ fontSize: number;
771
+ '& svg': {
772
+ width: number;
773
+ height: number;
774
+ };
775
+ };
776
+ '&-xl': {
777
+ width: number;
778
+ height: number;
779
+ fontSize: number;
780
+ '& svg': {
781
+ width: number;
782
+ height: number;
783
+ };
784
+ };
785
+ };
786
+ '&.disabled': {
787
+ color: any;
788
+ background: string;
789
+ '& img': {
790
+ filter: string;
791
+ opacity: number;
792
+ };
793
+ };
794
+ '&.border': {
795
+ border: string;
796
+ };
797
+ '&.innerBorder': {
798
+ boxShadow: string;
799
+ };
800
+ };
801
+ };
652
802
  MuiCheckbox: {
653
803
  colorSecondary: {
654
804
  '&$checked': {