File tree Expand file tree Collapse file tree 9 files changed +115
-1
lines changed
docs/client/components/common Expand file tree Collapse file tree 9 files changed +115
-1
lines changed Original file line number Diff line number Diff line change
1
+ export const defaultCode = `
2
+ class Demo extends React.Component {
3
+ render() {
4
+ return (
5
+ <div>
6
+ <PreviewBlock header="Simple Avatar">
7
+ <Avatar image="https://placeimg.com/80/80/animals"/>
8
+ </PreviewBlock>
9
+ <PreviewBlock header="Avatar with Title">
10
+ <Avatar>P</Avatar>
11
+ <Avatar theme={theme}>G</Avatar>
12
+ </PreviewBlock>
13
+ </div>
14
+ )
15
+ }
16
+ }
17
+ ` ;
Original file line number Diff line number Diff line change
1
+ :local(.avatar ) {
2
+ background : green ;
3
+ }
Original file line number Diff line number Diff line change @@ -6,3 +6,4 @@ export { defaultCode as ToggleDefaultCode } from './Toggle';
6
6
export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup' ;
7
7
export { defaultCode as TextInputDefaultCode } from './TextInput' ;
8
8
export { defaultCode as SnackbarDefaultCode } from './Snackbar' ;
9
+ export { defaultCode as AvatarDefaultCode } from './Avatar' ;
Original file line number Diff line number Diff line change 1
1
@import ' ./Card/style.scss' ;
2
- @import ' ./Button/style.scss' ;
2
+ @import ' ./Button/style.scss' ;
3
+ @import ' ./Avatar/style.scss' ;
Original file line number Diff line number Diff line change @@ -13,6 +13,8 @@ import TextInput from '../../../../src/textInput';
13
13
import TextInputReadme from '../../../../src/textInput/readMe.md' ;
14
14
import Snackbar from '../../../../src/snackbar' ;
15
15
import SnackbarReadme from '../../../../src/snackbar/readMe.md' ;
16
+ import Avatar from '../../../../src/avatar' ;
17
+ import AvatarReadme from '../../../../src/avatar/readMe.md' ;
16
18
17
19
import {
18
20
CardDefaultCode ,
@@ -23,6 +25,7 @@ import {
23
25
RadioButtonGroupDefaultCode ,
24
26
TextInputDefaultCode ,
25
27
SnackbarDefaultCode ,
28
+ AvatarDefaultCode ,
26
29
} from './DefaultCode' ;
27
30
28
31
export const componentList = [
@@ -73,5 +76,11 @@ export const componentList = [
73
76
docs : SnackbarReadme ,
74
77
component : Snackbar ,
75
78
defaultCode : SnackbarDefaultCode ,
79
+ } ,
80
+ {
81
+ name : 'Avatar' ,
82
+ docs : AvatarReadme ,
83
+ component : Avatar ,
84
+ defaultCode : AvatarDefaultCode ,
76
85
}
77
86
] ;
Original file line number Diff line number Diff line change
1
+ import React from 'react' ;
2
+ import PropTypes from 'prop-types' ;
3
+ import { themr } from 'react-css-themr' ;
4
+ import classnames from 'classnames' ;
5
+ import defaultTheme from './theme.scss' ;
6
+
7
+ const Avatar = ( {
8
+ children,
9
+ className,
10
+ theme,
11
+ image,
12
+ alt,
13
+ title,
14
+ ...other
15
+ } ) => {
16
+ const classes = classnames ( theme . avatar , className ) ;
17
+
18
+ return (
19
+ < div className = { classes } { ...other } >
20
+ {
21
+ typeof image === 'string' ? (
22
+ < img
23
+ alt = { alt }
24
+ className = { theme . image }
25
+ src = { image }
26
+ />
27
+ ) : null
28
+ }
29
+ < div className = { theme . avatarContent } >
30
+ { children }
31
+ </ div >
32
+ </ div >
33
+ ) ;
34
+ } ;
35
+
36
+ Avatar . propTypes = {
37
+ children : PropTypes . node ,
38
+ className : PropTypes . string ,
39
+ theme : PropTypes . object ,
40
+ image : PropTypes . string ,
41
+ alt : PropTypes . string ,
42
+ title : PropTypes . string ,
43
+ } ;
44
+
45
+ Avatar . defaultProps = {
46
+ children : null ,
47
+ className : '' ,
48
+ theme : defaultTheme ,
49
+ image : null ,
50
+ alt : '' ,
51
+ title : '' ,
52
+ } ;
53
+
54
+ export default themr ( 'CBAvatar' , defaultTheme ) ( Avatar ) ;
Original file line number Diff line number Diff line change
1
+ @import ' ../globals/theme' ;
2
+
3
+ .sizing {
4
+ width : 50px ;
5
+ height : 50px ;
6
+ border-radius : 50% ;
7
+ }
8
+
9
+ :local(.avatar ) {
10
+ @extend .sizing ;
11
+ background-color : $secondary-grey ;
12
+
13
+ img {
14
+ @extend .sizing ;
15
+ }
16
+ }
17
+
18
+ :local(.avatarContent ) {
19
+ height : 100% ;
20
+ display : flex ;
21
+ justify-content : center ;
22
+ align-items : center ;
23
+ font-size : 30px ;
24
+ color : $secondary-white ;
25
+ }
Original file line number Diff line number Diff line change @@ -8,6 +8,7 @@ import Toggle from './toggle';
8
8
import RadioButtonGroup from './radioButtonGroup' ;
9
9
import TextInput from './textInput' ;
10
10
import Snackbar from './snackbar' ;
11
+ import Avatar from './avatar' ;
11
12
12
13
export default {
13
14
Button,
@@ -18,4 +19,7 @@ export default {
18
19
Toggle,
19
20
TextInput,
20
21
Snackbar,
22
+ Avatar,
21
23
} ;
24
+
25
+ // ReactDOM.render(<Avatar image="Https://placeimg.com/80/80/animals"/>, document.getElementById('index'));
You can’t perform that action at this time.
0 commit comments