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
package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts CHANGED
@@ -57,6 +57,85 @@ export function makeLightInvertedTwakeOverrides(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 makeLightInvertedTwakeOverrides(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': {
@@ -1575,22 +1725,23 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
1575
1725
  height: number;
1576
1726
  };
1577
1727
  };
1728
+ MuiAvatarGroup: {
1729
+ root: {
1730
+ '& > div:last-child': {
1731
+ boxShadow: string;
1732
+ };
1733
+ };
1734
+ };
1578
1735
  MuiAvatar: {
1579
1736
  root: {
1580
- fontWeight: number;
1581
1737
  '&.size': {
1582
1738
  '&-xs': {
1583
- width: number;
1584
- height: number;
1585
- fontSize: number;
1586
1739
  '& svg': {
1587
1740
  width: number;
1588
1741
  height: number;
1589
1742
  };
1590
1743
  };
1591
1744
  '&-s': {
1592
- width: number;
1593
- height: number;
1594
1745
  fontSize: number;
1595
1746
  '& svg': {
1596
1747
  width: number;
@@ -1598,37 +1749,24 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
1598
1749
  };
1599
1750
  };
1600
1751
  '&-m': {
1601
- width: number;
1602
- height: number;
1603
- fontSize: number;
1604
1752
  '& svg': {
1605
1753
  width: number;
1606
1754
  height: number;
1607
1755
  };
1608
1756
  };
1609
1757
  '&-l': {
1610
- width: number;
1611
- height: number;
1612
- fontSize: number;
1613
1758
  '& svg': {
1614
1759
  width: number;
1615
1760
  height: number;
1616
1761
  };
1617
1762
  };
1618
1763
  '&-xl': {
1619
- width: number;
1620
- height: number;
1621
- fontSize: number;
1622
1764
  '& svg': {
1623
1765
  width: number;
1624
1766
  height: number;
1625
1767
  };
1626
1768
  };
1627
1769
  };
1628
- '&.disabled': {
1629
- color: any;
1630
- background: any;
1631
- };
1632
1770
  };
1633
1771
  colorDefault: {
1634
1772
  backgroundColor: any;
package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts CHANGED
@@ -57,6 +57,85 @@ export function makeLightNormalTwakeOverrides(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 makeLightNormalTwakeOverrides(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': {
@@ -1575,22 +1725,23 @@ export function makeLightNormalTwakeOverrides(theme: any): {
1575
1725
  height: number;
1576
1726
  };
1577
1727
  };
1728
+ MuiAvatarGroup: {
1729
+ root: {
1730
+ '& > div:last-child': {
1731
+ boxShadow: string;
1732
+ };
1733
+ };
1734
+ };
1578
1735
  MuiAvatar: {
1579
1736
  root: {
1580
- fontWeight: number;
1581
1737
  '&.size': {
1582
1738
  '&-xs': {
1583
- width: number;
1584
- height: number;
1585
- fontSize: number;
1586
1739
  '& svg': {
1587
1740
  width: number;
1588
1741
  height: number;
1589
1742
  };
1590
1743
  };
1591
1744
  '&-s': {
1592
- width: number;
1593
- height: number;
1594
1745
  fontSize: number;
1595
1746
  '& svg': {
1596
1747
  width: number;
@@ -1598,37 +1749,24 @@ export function makeLightNormalTwakeOverrides(theme: any): {
1598
1749
  };
1599
1750
  };
1600
1751
  '&-m': {
1601
- width: number;
1602
- height: number;
1603
- fontSize: number;
1604
1752
  '& svg': {
1605
1753
  width: number;
1606
1754
  height: number;
1607
1755
  };
1608
1756
  };
1609
1757
  '&-l': {
1610
- width: number;
1611
- height: number;
1612
- fontSize: number;
1613
1758
  '& svg': {
1614
1759
  width: number;
1615
1760
  height: number;
1616
1761
  };
1617
1762
  };
1618
1763
  '&-xl': {
1619
- width: number;
1620
- height: number;
1621
- fontSize: number;
1622
1764
  '& svg': {
1623
1765
  width: number;
1624
1766
  height: number;
1625
1767
  };
1626
1768
  };
1627
1769
  };
1628
- '&.disabled': {
1629
- color: any;
1630
- background: any;
1631
- };
1632
1770
  };
1633
1771
  colorDefault: {
1634
1772
  backgroundColor: any;
package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.js CHANGED
@@ -167,22 +167,23 @@ export var makeLightNormalTwakeOverrides = function makeLightNormalTwakeOverride
167
167
  height: 56
168
168
  }
169
169
  },
170
+ MuiAvatarGroup: {
171
+ root: {
172
+ '& > div:last-child': {
173
+ boxShadow: "inset 0px 0px 0px 1px ".concat(theme.palette.border.main)
174
+ }
175
+ }
176
+ },
170
177
  MuiAvatar: {
171
178
  root: {
172
- fontWeight: 600,
173
179
  '&.size': {
174
180
  '&-xs': {
175
- width: 16,
176
- height: 16,
177
- fontSize: 8,
178
181
  '& svg': {
179
182
  width: 10,
180
183
  height: 10
181
184
  }
182
185
  },
183
186
  '&-s': {
184
- width: 24,
185
- height: 24,
186
187
  fontSize: 11,
187
188
  '& svg': {
188
189
  width: 16,
@@ -190,36 +191,23 @@ export var makeLightNormalTwakeOverrides = function makeLightNormalTwakeOverride
190
191
  }
191
192
  },
192
193
  '&-m': {
193
- width: 32,
194
- height: 32,
195
- fontSize: 16,
196
194
  '& svg': {
197
195
  width: 20,
198
196
  height: 20
199
197
  }
200
198
  },
201
199
  '&-l': {
202
- width: 48,
203
- height: 48,
204
- fontSize: 24,
205
200
  '& svg': {
206
201
  width: 28,
207
202
  height: 28
208
203
  }
209
204
  },
210
205
  '&-xl': {
211
- width: 64,
212
- height: 64,
213
- fontSize: 32,
214
206
  '& svg': {
215
207
  width: 36,
216
208
  height: 36
217
209
  }
218
210
  }
219
- },
220
- '&.disabled': {
221
- color: theme.palette.primary.contrastText,
222
- background: theme.palette.action.disabledBackground
223
211
  }
224
212
  },
225
213
  colorDefault: {
package/transpiled/react/ToggleButton/index.js CHANGED
@@ -1,2 +1,27 @@
1
- import ToggleButton from '@material-ui/lab/ToggleButton';
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["className", "rounded", "color"];
4
+ import MuiToggleButton from '@material-ui/lab/ToggleButton';
5
+ import cx from 'classnames';
6
+ import PropTypes from 'prop-types';
7
+ import React, { forwardRef } from 'react';
8
+ var ToggleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
9
+ var className = _ref.className,
10
+ rounded = _ref.rounded,
11
+ color = _ref.color,
12
+ props = _objectWithoutProperties(_ref, _excluded);
13
+
14
+ return /*#__PURE__*/React.createElement(MuiToggleButton, _extends({
15
+ ref: ref,
16
+ className: cx(className, {
17
+ rounded: rounded
18
+ }, "customColor-".concat(color))
19
+ }, props));
20
+ });
21
+ ToggleButton.displayName = 'ToggleButton';
22
+ ToggleButton.propTypes = {
23
+ className: PropTypes.string,
24
+ rounded: PropTypes.bool,
25
+ color: PropTypes.string
26
+ };
2
27
  export default ToggleButton;