cozy-ui 62.6.0 → 62.7.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 +8 -0
- package/package.json +1 -1
- package/react/Chip/Readme.md +2 -0
- package/react/Chips/Readme.md +158 -0
- package/react/Chips/index.jsx +28 -0
- package/react/MuiCozyTheme/makeOverrides.js +110 -0
- package/react/__snapshots__/examples.spec.jsx.snap +182 -0
- package/react/examples.spec.jsx +1 -0
- package/react/index.js +1 -0
- package/transpiled/react/Chips/index.js +34 -0
- package/transpiled/react/MuiCozyTheme/makeOverrides.js +83 -0
- package/transpiled/react/index.js +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,11 @@
|
|
|
1
|
+
# [62.7.0](https://github.com/cozy/cozy-ui/compare/v62.6.0...v62.7.0) (2022-04-14)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* Add `radio` prop to `Variants` comp ([95f5d6a](https://github.com/cozy/cozy-ui/commit/95f5d6a))
|
|
7
|
+
* Add new `Chips` component ([97039de](https://github.com/cozy/cozy-ui/commit/97039de))
|
|
8
|
+
|
|
1
9
|
# [62.6.0](https://github.com/cozy/cozy-ui/compare/v62.5.3...v62.6.0) (2022-04-11)
|
|
2
10
|
|
|
3
11
|
|
package/package.json
CHANGED
package/react/Chip/Readme.md
CHANGED
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
Chips represent complex entities in small blocks, such as a contact.
|
|
2
|
+
|
|
3
|
+
### Default
|
|
4
|
+
|
|
5
|
+
```jsx
|
|
6
|
+
import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
|
|
7
|
+
import Chip from 'cozy-ui/transpiled/react/Chips'
|
|
8
|
+
import Stack from 'cozy-ui/transpiled/react/Stack'
|
|
9
|
+
import Typography from 'cozy-ui/transpiled/react/Typography'
|
|
10
|
+
import Icon from 'cozy-ui/transpiled/react/Icon'
|
|
11
|
+
import FileOutlineIcon from "cozy-ui/transpiled/react/Icons/FileOutline"
|
|
12
|
+
import Avatar from 'cozy-ui/transpiled/react/Avatar'
|
|
13
|
+
import RightIcon from "cozy-ui/transpiled/react/Icons/Right"
|
|
14
|
+
import OpenwithIcon from "cozy-ui/transpiled/react/Icons/Openwith"
|
|
15
|
+
import Divider from "cozy-ui/transpiled/react/MuiCozyTheme/Divider"
|
|
16
|
+
import Variants from 'cozy-ui/docs/components/Variants'
|
|
17
|
+
|
|
18
|
+
const columns = [{ title: 'default', disabled: false }, { title: 'disabled', disabled: true }]
|
|
19
|
+
const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
20
|
+
|
|
21
|
+
;
|
|
22
|
+
|
|
23
|
+
<Variants initialVariants={initialVariants} radio={true} screenshotAllVariants>
|
|
24
|
+
{variant => (
|
|
25
|
+
<Grid container>
|
|
26
|
+
{columns.map(column =>
|
|
27
|
+
<Grid item xs={12} sm={6} className="u-mb-1" key={JSON.stringify(column)}>
|
|
28
|
+
<Stack spacing="s">
|
|
29
|
+
<Typography>{Object.values(column)[0]}</Typography>
|
|
30
|
+
<p>
|
|
31
|
+
<Chip
|
|
32
|
+
label="Simple chip"
|
|
33
|
+
disabled={Object.values(column)[1]}
|
|
34
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
35
|
+
/>
|
|
36
|
+
</p>
|
|
37
|
+
<p>
|
|
38
|
+
<Chip
|
|
39
|
+
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
40
|
+
label="Clickable chip"
|
|
41
|
+
clickable
|
|
42
|
+
disabled={Object.values(column)[1]}
|
|
43
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
44
|
+
/>
|
|
45
|
+
</p>
|
|
46
|
+
<p>
|
|
47
|
+
<Chip
|
|
48
|
+
avatar={<Avatar textId="Ada Lovelace" text="AL" size='xsmall' />}
|
|
49
|
+
label="Avatar chip"
|
|
50
|
+
disabled={Object.values(column)[1]}
|
|
51
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
52
|
+
/>
|
|
53
|
+
</p>
|
|
54
|
+
<p>
|
|
55
|
+
<Chip
|
|
56
|
+
label="Deletable chip"
|
|
57
|
+
clickable
|
|
58
|
+
onDelete={() => alert('You clicked on delete icon')}
|
|
59
|
+
disabled={Object.values(column)[1]}
|
|
60
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
61
|
+
/>
|
|
62
|
+
</p>
|
|
63
|
+
<p>
|
|
64
|
+
<Chip
|
|
65
|
+
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
66
|
+
label="Deletable chip with icon"
|
|
67
|
+
clickable
|
|
68
|
+
onDelete={() => alert('You clicked on delete icon')}
|
|
69
|
+
disabled={Object.values(column)[1]}
|
|
70
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
71
|
+
/>
|
|
72
|
+
</p>
|
|
73
|
+
<p>
|
|
74
|
+
<Chip
|
|
75
|
+
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
76
|
+
label="1 invoice"
|
|
77
|
+
onClick={() => alert('You clicked')}
|
|
78
|
+
onDelete={() => alert('You clicked on the icon')}
|
|
79
|
+
deleteIcon={<Icon icon={OpenwithIcon} className="u-h-1" />}
|
|
80
|
+
clickable
|
|
81
|
+
disabled={Object.values(column)[1]}
|
|
82
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
83
|
+
/>
|
|
84
|
+
</p>
|
|
85
|
+
<p>
|
|
86
|
+
<Chip
|
|
87
|
+
icon={<Icon icon={RightIcon} />}
|
|
88
|
+
disabled={Object.values(column)[1]}
|
|
89
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
90
|
+
/>
|
|
91
|
+
</p>
|
|
92
|
+
</Stack>
|
|
93
|
+
</Grid>
|
|
94
|
+
)}
|
|
95
|
+
</Grid>
|
|
96
|
+
)}
|
|
97
|
+
</Variants>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Colors
|
|
101
|
+
|
|
102
|
+
```jsx
|
|
103
|
+
import Grid from 'cozy-ui/transpiled/react/MuiCozyTheme/Grid'
|
|
104
|
+
import Chip from 'cozy-ui/transpiled/react/Chips'
|
|
105
|
+
import Stack from 'cozy-ui/transpiled/react/Stack'
|
|
106
|
+
import Typography from 'cozy-ui/transpiled/react/Typography'
|
|
107
|
+
import Icon from 'cozy-ui/transpiled/react/Icon'
|
|
108
|
+
import FileOutlineIcon from "cozy-ui/transpiled/react/Icons/FileOutline"
|
|
109
|
+
import Avatar from 'cozy-ui/transpiled/react/Avatar'
|
|
110
|
+
import RightIcon from "cozy-ui/transpiled/react/Icons/Right"
|
|
111
|
+
import OpenwithIcon from "cozy-ui/transpiled/react/Icons/Openwith"
|
|
112
|
+
import Divider from "cozy-ui/transpiled/react/MuiCozyTheme/Divider"
|
|
113
|
+
import Variants from 'cozy-ui/docs/components/Variants'
|
|
114
|
+
|
|
115
|
+
const colors = ['success', 'error', 'warning', 'info']
|
|
116
|
+
const initialVariants = [{ default: true, active: false, ghost: false }]
|
|
117
|
+
|
|
118
|
+
;
|
|
119
|
+
|
|
120
|
+
<Variants initialVariants={initialVariants} radio={true} screenshotAllVariants>
|
|
121
|
+
{variant => (
|
|
122
|
+
<Grid container>
|
|
123
|
+
{colors.map(color =>
|
|
124
|
+
<Grid item xs={12} sm={6} md={3} className="u-mb-1" key={JSON.stringify(color)}>
|
|
125
|
+
<Stack spacing="s">
|
|
126
|
+
<Typography>{color}</Typography>
|
|
127
|
+
<p>
|
|
128
|
+
<Chip
|
|
129
|
+
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
130
|
+
label="1 invoice"
|
|
131
|
+
onClick={() => alert('You clicked')}
|
|
132
|
+
onDelete={() => alert('You clicked on delete icon')}
|
|
133
|
+
deleteIcon={<Icon icon={OpenwithIcon} className="u-h-1" />}
|
|
134
|
+
clickable
|
|
135
|
+
color={color}
|
|
136
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
137
|
+
/>
|
|
138
|
+
</p>
|
|
139
|
+
<p>
|
|
140
|
+
<Chip
|
|
141
|
+
icon={<Icon icon={FileOutlineIcon} className="u-ml-half" />}
|
|
142
|
+
label="1 invoice"
|
|
143
|
+
onClick={() => alert('You clicked')}
|
|
144
|
+
onDelete={() => alert('You clicked on delete icon')}
|
|
145
|
+
deleteIcon={<Icon icon={OpenwithIcon} className="u-h-1" />}
|
|
146
|
+
clickable
|
|
147
|
+
color={color}
|
|
148
|
+
disabled
|
|
149
|
+
variant={Object.keys(variant).find(key => variant[key])}
|
|
150
|
+
/>
|
|
151
|
+
</p>
|
|
152
|
+
</Stack>
|
|
153
|
+
</Grid>
|
|
154
|
+
)}
|
|
155
|
+
</Grid>
|
|
156
|
+
)}
|
|
157
|
+
</Variants>
|
|
158
|
+
```
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import cx from 'classnames'
|
|
3
|
+
import PropTypes from 'prop-types'
|
|
4
|
+
import MuiChip from '@material-ui/core/Chip'
|
|
5
|
+
|
|
6
|
+
const Chips = ({ label, variant = 'default', color = 'primary', ...props }) => {
|
|
7
|
+
return (
|
|
8
|
+
<MuiChip
|
|
9
|
+
className={cx({
|
|
10
|
+
noLabel: !label,
|
|
11
|
+
ghost: variant === 'ghost',
|
|
12
|
+
[`customColor-${color}`]: color
|
|
13
|
+
})}
|
|
14
|
+
label={label}
|
|
15
|
+
variant={variant === 'active' ? 'default' : 'outlined'}
|
|
16
|
+
color={variant === 'active' ? 'primary' : 'default'}
|
|
17
|
+
{...props}
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
Chips.propTypes = {
|
|
23
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
24
|
+
variant: PropTypes.oneOf(['default', 'active', 'ghost']),
|
|
25
|
+
color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info'])
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export default Chips
|
|
@@ -9,6 +9,96 @@ export const makeThemeOverrides = theme => {
|
|
|
9
9
|
return createOverrides(theme)
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
+
const makeChipStyleByColor = (theme, color) => ({
|
|
13
|
+
color: theme.palette.text[color] || theme.palette[color].main,
|
|
14
|
+
borderColor:
|
|
15
|
+
color === 'primary'
|
|
16
|
+
? theme.palette.border.main
|
|
17
|
+
: alpha(theme.palette[color].main, theme.palette.border.opacity),
|
|
18
|
+
'&$clickable, &$deletable': {
|
|
19
|
+
'&:hover, &:focus': {
|
|
20
|
+
borderColor:
|
|
21
|
+
color === 'primary'
|
|
22
|
+
? theme.palette.border.main
|
|
23
|
+
: alpha(theme.palette[color].main, theme.palette.border.opacity),
|
|
24
|
+
backgroundColor:
|
|
25
|
+
color === 'primary'
|
|
26
|
+
? theme.palette.action.hover
|
|
27
|
+
: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
'& $icon': {
|
|
31
|
+
color:
|
|
32
|
+
color === 'primary' ? theme.palette.text.icon : theme.palette[color].main,
|
|
33
|
+
fill:
|
|
34
|
+
color === 'primary' ? theme.palette.text.icon : theme.palette[color].main
|
|
35
|
+
},
|
|
36
|
+
'& $deleteIcon': {
|
|
37
|
+
color:
|
|
38
|
+
color === 'primary'
|
|
39
|
+
? theme.palette.text.secondary
|
|
40
|
+
: theme.palette[color].main,
|
|
41
|
+
fill:
|
|
42
|
+
color === 'primary'
|
|
43
|
+
? theme.palette.text.secondary
|
|
44
|
+
: theme.palette[color].main
|
|
45
|
+
},
|
|
46
|
+
'&$colorPrimary': {
|
|
47
|
+
padding: '0 1px',
|
|
48
|
+
color: theme.palette[color].contrastText,
|
|
49
|
+
backgroundColor: theme.palette[color].main,
|
|
50
|
+
'& $icon, & $deleteIcon': {
|
|
51
|
+
color: theme.palette[color].contrastText,
|
|
52
|
+
fill: theme.palette[color].contrastText
|
|
53
|
+
},
|
|
54
|
+
'&$disabled': {
|
|
55
|
+
opacity: 1,
|
|
56
|
+
color: theme.palette.text.disabled,
|
|
57
|
+
backgroundColor: theme.palette.action.disabledBackground,
|
|
58
|
+
'& $icon, & $deleteIcon': {
|
|
59
|
+
color: theme.palette.text.disabled,
|
|
60
|
+
fill: theme.palette.text.disabled
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
'&$clickable, &$deletable': {
|
|
64
|
+
'&:hover, &:focus': {
|
|
65
|
+
backgroundColor: theme.palette[color].dark
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
'&.ghost': {
|
|
70
|
+
borderWidth: '1px',
|
|
71
|
+
borderStyle: 'dashed',
|
|
72
|
+
'&:not($disabled)': {
|
|
73
|
+
color: theme.palette[color].main,
|
|
74
|
+
borderColor: alpha(
|
|
75
|
+
theme.palette[color].main,
|
|
76
|
+
theme.palette.border.ghostOpacity
|
|
77
|
+
),
|
|
78
|
+
backgroundColor: alpha(
|
|
79
|
+
theme.palette[color].main,
|
|
80
|
+
theme.palette.action.ghostOpacity
|
|
81
|
+
),
|
|
82
|
+
'& $icon, & $deleteIcon': {
|
|
83
|
+
color: theme.palette[color].main,
|
|
84
|
+
fill: theme.palette[color].main
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
'&$clickable, &$deletable': {
|
|
88
|
+
'&:hover, &:focus': {
|
|
89
|
+
borderColor: alpha(
|
|
90
|
+
theme.palette[color].main,
|
|
91
|
+
theme.palette.border.ghostOpacity
|
|
92
|
+
),
|
|
93
|
+
backgroundColor: alpha(
|
|
94
|
+
theme.palette[color].main,
|
|
95
|
+
theme.palette.action.hoverGhostOpacity
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
})
|
|
101
|
+
|
|
12
102
|
const makeSecondaryButtonStyle = (theme, color) => ({
|
|
13
103
|
color: theme.palette[color].main,
|
|
14
104
|
borderColor: theme.palette[color].main,
|
|
@@ -664,6 +754,26 @@ const makeOverrides = theme => ({
|
|
|
664
754
|
fill: theme.palette.text.disabled
|
|
665
755
|
}
|
|
666
756
|
}
|
|
757
|
+
},
|
|
758
|
+
MuiChip: {
|
|
759
|
+
root: {
|
|
760
|
+
'&.noLabel': {
|
|
761
|
+
width: '32px',
|
|
762
|
+
'& $label': {
|
|
763
|
+
display: 'none'
|
|
764
|
+
},
|
|
765
|
+
'& $icon': {
|
|
766
|
+
margin: 0
|
|
767
|
+
}
|
|
768
|
+
},
|
|
769
|
+
'&.customColor': {
|
|
770
|
+
'&-primary': makeChipStyleByColor(theme, 'primary'),
|
|
771
|
+
'&-success': makeChipStyleByColor(theme, 'success'),
|
|
772
|
+
'&-error': makeChipStyleByColor(theme, 'error'),
|
|
773
|
+
'&-warning': makeChipStyleByColor(theme, 'warning'),
|
|
774
|
+
'&-info': makeChipStyleByColor(theme, 'info')
|
|
775
|
+
}
|
|
776
|
+
}
|
|
667
777
|
}
|
|
668
778
|
})
|
|
669
779
|
|
|
@@ -620,6 +620,188 @@ exports[`Checkbox should render examples: Checkbox 2`] = `
|
|
|
620
620
|
</div>"
|
|
621
621
|
`;
|
|
622
622
|
|
|
623
|
+
exports[`Chips should render examples: Chips 1`] = `
|
|
624
|
+
"<div>
|
|
625
|
+
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
|
|
626
|
+
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5>
|
|
627
|
+
<div class=\\"MuiFormGroup-root MuiFormGroup-row\\" role=\\"radiogroup\\" aria-label=\\"radio\\"><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"default\\" checked=\\"\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DEFAULT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"active\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIVE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"ghost\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">GHOST</span></label></div>
|
|
628
|
+
</div>
|
|
629
|
+
<div class=\\"MuiGrid-root MuiGrid-container\\">
|
|
630
|
+
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
|
|
631
|
+
<div class=\\"styles__Stack--s___22WMg\\">
|
|
632
|
+
<p class=\\"MuiTypography-root MuiTypography-body1\\">default</p>
|
|
633
|
+
<p>
|
|
634
|
+
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined\\"><span class=\\"MuiChip-label\\">Simple chip</span></div>
|
|
635
|
+
</p>
|
|
636
|
+
<p>
|
|
637
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
638
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
639
|
+
</svg><span class=\\"MuiChip-label\\">Clickable chip</span></div>
|
|
640
|
+
</p>
|
|
641
|
+
<p>
|
|
642
|
+
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined\\">
|
|
643
|
+
<div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna MuiChip-avatar\\" style=\\"background-color: rgb(253, 116, 97); --circleSize: 16px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">AL</span></div><span class=\\"MuiChip-label\\">Avatar chip</span>
|
|
644
|
+
</div>
|
|
645
|
+
</p>
|
|
646
|
+
<p>
|
|
647
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><span class=\\"MuiChip-label\\">Deletable chip</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
648
|
+
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
649
|
+
</svg></div>
|
|
650
|
+
</p>
|
|
651
|
+
<p>
|
|
652
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
653
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
654
|
+
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
655
|
+
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
656
|
+
</svg></div>
|
|
657
|
+
</p>
|
|
658
|
+
<p>
|
|
659
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
660
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
661
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
662
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
663
|
+
</svg></div>
|
|
664
|
+
</p>
|
|
665
|
+
<p>
|
|
666
|
+
<div class=\\"MuiChip-root noLabel customColor-primary MuiChip-outlined\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
667
|
+
<path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
|
|
668
|
+
</svg><span class=\\"MuiChip-label\\"></span></div>
|
|
669
|
+
</p>
|
|
670
|
+
</div>
|
|
671
|
+
</div>
|
|
672
|
+
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6\\">
|
|
673
|
+
<div class=\\"styles__Stack--s___22WMg\\">
|
|
674
|
+
<p class=\\"MuiTypography-root MuiTypography-body1\\">disabled</p>
|
|
675
|
+
<p>
|
|
676
|
+
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\"><span class=\\"MuiChip-label\\">Simple chip</span></div>
|
|
677
|
+
</p>
|
|
678
|
+
<p>
|
|
679
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
680
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
681
|
+
</svg><span class=\\"MuiChip-label\\">Clickable chip</span></div>
|
|
682
|
+
</p>
|
|
683
|
+
<p>
|
|
684
|
+
<div class=\\"MuiChip-root customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\">
|
|
685
|
+
<div class=\\"styles__c-avatar___PpDI- styles__c-avatar--text___2dvna MuiChip-avatar\\" style=\\"background-color: rgb(253, 116, 97); --circleSize: 16px;\\"><span class=\\"styles__c-avatar-initials___310qC\\">AL</span></div><span class=\\"MuiChip-label\\">Avatar chip</span>
|
|
686
|
+
</div>
|
|
687
|
+
</p>
|
|
688
|
+
<p>
|
|
689
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><span class=\\"MuiChip-label\\">Deletable chip</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
690
|
+
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
691
|
+
</svg></div>
|
|
692
|
+
</p>
|
|
693
|
+
<p>
|
|
694
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
695
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
696
|
+
</svg><span class=\\"MuiChip-label\\">Deletable chip with icon</span><svg class=\\"MuiSvgIcon-root MuiChip-deleteIcon\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\">
|
|
697
|
+
<path d=\\"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z\\"></path>
|
|
698
|
+
</svg></div>
|
|
699
|
+
</p>
|
|
700
|
+
<p>
|
|
701
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-primary MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
702
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
703
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
704
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
705
|
+
</svg></div>
|
|
706
|
+
</p>
|
|
707
|
+
<p>
|
|
708
|
+
<div class=\\"MuiChip-root noLabel customColor-primary MuiChip-outlined Mui-disabled\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
709
|
+
<path fill-rule=\\"evenodd\\" d=\\"M12.707 7.293l-6-6a.999.999 0 10-1.414 1.414L10.586 8l-5.293 5.293a.999.999 0 101.414 1.414l6-6a.999.999 0 000-1.414\\"></path>
|
|
710
|
+
</svg><span class=\\"MuiChip-label\\"></span></div>
|
|
711
|
+
</p>
|
|
712
|
+
</div>
|
|
713
|
+
</div>
|
|
714
|
+
</div>
|
|
715
|
+
</div>"
|
|
716
|
+
`;
|
|
717
|
+
|
|
718
|
+
exports[`Chips should render examples: Chips 2`] = `
|
|
719
|
+
"<div>
|
|
720
|
+
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
|
|
721
|
+
<h5 class=\\"MuiTypography-root u-mb-1 MuiTypography-h5\\">Variant selector</h5>
|
|
722
|
+
<div class=\\"MuiFormGroup-root MuiFormGroup-row\\" role=\\"radiogroup\\" aria-label=\\"radio\\"><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary PrivateSwitchBase-checked-2 Mui-checked MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"default\\" checked=\\"\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 108 0a8 8 0 000 16zm0-6a2 2 0 100-4 2 2 0 000 4z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">DEFAULT</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"active\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">ACTIVE</span></label><label class=\\"MuiFormControlLabel-root\\"><span class=\\"MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-1 MuiRadio-root MuiRadio-colorPrimary MuiIconButton-colorPrimary\\" aria-disabled=\\"false\\"><span class=\\"MuiIconButton-label\\"><input class=\\"PrivateSwitchBase-input-4\\" name=\\"variantRadioSelector\\" type=\\"radio\\" value=\\"ghost\\"><svg viewBox=\\"0 0 16 16\\" class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\"><path fill-rule=\\"evenodd\\" d=\\"M8 0a8 8 0 100 16A8 8 0 008 0zm0 14A6 6 0 108 2a6 6 0 000 12z\\" clip-rule=\\"evenodd\\"></path></svg></span></span><span class=\\"MuiTypography-root MuiFormControlLabel-label MuiTypography-body1\\">GHOST</span></label></div>
|
|
723
|
+
</div>
|
|
724
|
+
<div class=\\"MuiGrid-root MuiGrid-container\\">
|
|
725
|
+
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
726
|
+
<div class=\\"styles__Stack--s___22WMg\\">
|
|
727
|
+
<p class=\\"MuiTypography-root MuiTypography-body1\\">success</p>
|
|
728
|
+
<p>
|
|
729
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-success MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
730
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
731
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
732
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
733
|
+
</svg></div>
|
|
734
|
+
</p>
|
|
735
|
+
<p>
|
|
736
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-success MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
737
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
738
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
739
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
740
|
+
</svg></div>
|
|
741
|
+
</p>
|
|
742
|
+
</div>
|
|
743
|
+
</div>
|
|
744
|
+
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
745
|
+
<div class=\\"styles__Stack--s___22WMg\\">
|
|
746
|
+
<p class=\\"MuiTypography-root MuiTypography-body1\\">error</p>
|
|
747
|
+
<p>
|
|
748
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-error MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
749
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
750
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
751
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
752
|
+
</svg></div>
|
|
753
|
+
</p>
|
|
754
|
+
<p>
|
|
755
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-error MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
756
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
757
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
758
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
759
|
+
</svg></div>
|
|
760
|
+
</p>
|
|
761
|
+
</div>
|
|
762
|
+
</div>
|
|
763
|
+
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
764
|
+
<div class=\\"styles__Stack--s___22WMg\\">
|
|
765
|
+
<p class=\\"MuiTypography-root MuiTypography-body1\\">warning</p>
|
|
766
|
+
<p>
|
|
767
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-warning MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
768
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
769
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
770
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
771
|
+
</svg></div>
|
|
772
|
+
</p>
|
|
773
|
+
<p>
|
|
774
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-warning MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
775
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
776
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
777
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
778
|
+
</svg></div>
|
|
779
|
+
</p>
|
|
780
|
+
</div>
|
|
781
|
+
</div>
|
|
782
|
+
<div class=\\"MuiGrid-root u-mb-1 MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-sm-6 MuiGrid-grid-md-3\\">
|
|
783
|
+
<div class=\\"styles__Stack--s___22WMg\\">
|
|
784
|
+
<p class=\\"MuiTypography-root MuiTypography-body1\\">info</p>
|
|
785
|
+
<p>
|
|
786
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-info MuiChip-outlined MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
787
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
788
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
789
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
790
|
+
</svg></div>
|
|
791
|
+
</p>
|
|
792
|
+
<p>
|
|
793
|
+
<div class=\\"MuiButtonBase-root MuiChip-root customColor-info MuiChip-outlined Mui-disabled MuiChip-clickable MuiChip-deletable\\" tabindex=\\"0\\" role=\\"button\\" aria-disabled=\\"true\\"><svg viewBox=\\"0 0 16 16\\" class=\\"MuiChip-icon u-ml-half styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
794
|
+
<path fill-rule=\\"evenodd\\" d=\\"M13 5h-3V2H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V5zm2-.999v11.003a1 1 0 01-1.007.996H2.007A1.001 1.001 0 011 14.999V1.001A.999.999 0 011.998 0H11l4 4.001z\\"></path>
|
|
795
|
+
</svg><span class=\\"MuiChip-label\\">1 invoice</span><svg viewBox=\\"0 0 16 16\\" class=\\"u-h-1 MuiChip-deleteIcon styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
|
|
796
|
+
<path d=\\"M9 0v2h3.5L6 8.5 7.5 10 14 3.5V7h2V1.003A.996.996 0 0014.997 0H9zM7 2V0H1.003A1 1 0 000 1v14c0 .552.445 1 1 1h14c.552 0 1-.438 1-1.003V9h-2v5H2V2h5z\\" fill-rule=\\"evenodd\\"></path>
|
|
797
|
+
</svg></div>
|
|
798
|
+
</p>
|
|
799
|
+
</div>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
</div>"
|
|
803
|
+
`;
|
|
804
|
+
|
|
623
805
|
exports[`CompositeRow should render examples: CompositeRow 1`] = `
|
|
624
806
|
"<div>
|
|
625
807
|
<div class=\\"MuiPaper-root u-p-1 u-mb-1 MuiPaper-elevation1\\">
|
package/react/examples.spec.jsx
CHANGED
package/react/index.js
CHANGED
|
@@ -101,3 +101,4 @@ export { default as FileImageLoader } from './FileImageLoader'
|
|
|
101
101
|
export { default as Radios } from './Radios'
|
|
102
102
|
export { default as BottomSheet, BottomSheetItem } from './BottomSheet'
|
|
103
103
|
export { default as FilePicker } from './FilePicker'
|
|
104
|
+
export { default as Chips } from './Chips'
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
+
var _excluded = ["label", "variant", "color"];
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import cx from 'classnames';
|
|
7
|
+
import PropTypes from 'prop-types';
|
|
8
|
+
import MuiChip from '@material-ui/core/Chip';
|
|
9
|
+
|
|
10
|
+
var Chips = function Chips(_ref) {
|
|
11
|
+
var label = _ref.label,
|
|
12
|
+
_ref$variant = _ref.variant,
|
|
13
|
+
variant = _ref$variant === void 0 ? 'default' : _ref$variant,
|
|
14
|
+
_ref$color = _ref.color,
|
|
15
|
+
color = _ref$color === void 0 ? 'primary' : _ref$color,
|
|
16
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
17
|
+
|
|
18
|
+
return /*#__PURE__*/React.createElement(MuiChip, _extends({
|
|
19
|
+
className: cx(_defineProperty({
|
|
20
|
+
noLabel: !label,
|
|
21
|
+
ghost: variant === 'ghost'
|
|
22
|
+
}, "customColor-".concat(color), color)),
|
|
23
|
+
label: label,
|
|
24
|
+
variant: variant === 'active' ? 'default' : 'outlined',
|
|
25
|
+
color: variant === 'active' ? 'primary' : 'default'
|
|
26
|
+
}, props));
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
Chips.propTypes = {
|
|
30
|
+
label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
|
31
|
+
variant: PropTypes.oneOf(['default', 'active', 'ghost']),
|
|
32
|
+
color: PropTypes.oneOf(['primary', 'success', 'error', 'warning', 'info'])
|
|
33
|
+
};
|
|
34
|
+
export default Chips;
|
|
@@ -11,6 +11,69 @@ export var makeThemeOverrides = function makeThemeOverrides(theme) {
|
|
|
11
11
|
return createOverrides(theme);
|
|
12
12
|
};
|
|
13
13
|
|
|
14
|
+
var makeChipStyleByColor = function makeChipStyleByColor(theme, color) {
|
|
15
|
+
return {
|
|
16
|
+
color: theme.palette.text[color] || theme.palette[color].main,
|
|
17
|
+
borderColor: color === 'primary' ? theme.palette.border.main : alpha(theme.palette[color].main, theme.palette.border.opacity),
|
|
18
|
+
'&$clickable, &$deletable': {
|
|
19
|
+
'&:hover, &:focus': {
|
|
20
|
+
borderColor: color === 'primary' ? theme.palette.border.main : alpha(theme.palette[color].main, theme.palette.border.opacity),
|
|
21
|
+
backgroundColor: color === 'primary' ? theme.palette.action.hover : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
'& $icon': {
|
|
25
|
+
color: color === 'primary' ? theme.palette.text.icon : theme.palette[color].main,
|
|
26
|
+
fill: color === 'primary' ? theme.palette.text.icon : theme.palette[color].main
|
|
27
|
+
},
|
|
28
|
+
'& $deleteIcon': {
|
|
29
|
+
color: color === 'primary' ? theme.palette.text.secondary : theme.palette[color].main,
|
|
30
|
+
fill: color === 'primary' ? theme.palette.text.secondary : theme.palette[color].main
|
|
31
|
+
},
|
|
32
|
+
'&$colorPrimary': {
|
|
33
|
+
padding: '0 1px',
|
|
34
|
+
color: theme.palette[color].contrastText,
|
|
35
|
+
backgroundColor: theme.palette[color].main,
|
|
36
|
+
'& $icon, & $deleteIcon': {
|
|
37
|
+
color: theme.palette[color].contrastText,
|
|
38
|
+
fill: theme.palette[color].contrastText
|
|
39
|
+
},
|
|
40
|
+
'&$disabled': {
|
|
41
|
+
opacity: 1,
|
|
42
|
+
color: theme.palette.text.disabled,
|
|
43
|
+
backgroundColor: theme.palette.action.disabledBackground,
|
|
44
|
+
'& $icon, & $deleteIcon': {
|
|
45
|
+
color: theme.palette.text.disabled,
|
|
46
|
+
fill: theme.palette.text.disabled
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
'&$clickable, &$deletable': {
|
|
50
|
+
'&:hover, &:focus': {
|
|
51
|
+
backgroundColor: theme.palette[color].dark
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
'&.ghost': {
|
|
56
|
+
borderWidth: '1px',
|
|
57
|
+
borderStyle: 'dashed',
|
|
58
|
+
'&:not($disabled)': {
|
|
59
|
+
color: theme.palette[color].main,
|
|
60
|
+
borderColor: alpha(theme.palette[color].main, theme.palette.border.ghostOpacity),
|
|
61
|
+
backgroundColor: alpha(theme.palette[color].main, theme.palette.action.ghostOpacity),
|
|
62
|
+
'& $icon, & $deleteIcon': {
|
|
63
|
+
color: theme.palette[color].main,
|
|
64
|
+
fill: theme.palette[color].main
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
'&$clickable, &$deletable': {
|
|
68
|
+
'&:hover, &:focus': {
|
|
69
|
+
borderColor: alpha(theme.palette[color].main, theme.palette.border.ghostOpacity),
|
|
70
|
+
backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverGhostOpacity)
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
|
|
14
77
|
var makeSecondaryButtonStyle = function makeSecondaryButtonStyle(theme, color) {
|
|
15
78
|
return {
|
|
16
79
|
color: theme.palette[color].main,
|
|
@@ -631,6 +694,26 @@ var makeOverrides = function makeOverrides(theme) {
|
|
|
631
694
|
fill: theme.palette.text.disabled
|
|
632
695
|
}
|
|
633
696
|
}
|
|
697
|
+
},
|
|
698
|
+
MuiChip: {
|
|
699
|
+
root: {
|
|
700
|
+
'&.noLabel': {
|
|
701
|
+
width: '32px',
|
|
702
|
+
'& $label': {
|
|
703
|
+
display: 'none'
|
|
704
|
+
},
|
|
705
|
+
'& $icon': {
|
|
706
|
+
margin: 0
|
|
707
|
+
}
|
|
708
|
+
},
|
|
709
|
+
'&.customColor': {
|
|
710
|
+
'&-primary': makeChipStyleByColor(theme, 'primary'),
|
|
711
|
+
'&-success': makeChipStyleByColor(theme, 'success'),
|
|
712
|
+
'&-error': makeChipStyleByColor(theme, 'error'),
|
|
713
|
+
'&-warning': makeChipStyleByColor(theme, 'warning'),
|
|
714
|
+
'&-info': makeChipStyleByColor(theme, 'info')
|
|
715
|
+
}
|
|
716
|
+
}
|
|
634
717
|
}
|
|
635
718
|
};
|
|
636
719
|
};
|
|
@@ -78,4 +78,5 @@ export { default as SquareAppIcon } from './SquareAppIcon';
|
|
|
78
78
|
export { default as FileImageLoader } from './FileImageLoader';
|
|
79
79
|
export { default as Radios } from './Radios';
|
|
80
80
|
export { default as BottomSheet, BottomSheetItem } from './BottomSheet';
|
|
81
|
-
export { default as FilePicker } from './FilePicker';
|
|
81
|
+
export { default as FilePicker } from './FilePicker';
|
|
82
|
+
export { default as Chips } from './Chips';
|