Skip to content

Commit 8a0f528

Browse files
committed
Merge branch 'avatar' into 'master'
Avatar See merge request code.brahma/react-lite-ui!7
2 parents 74c7a64 + b4e94ec commit 8a0f528

File tree

9 files changed

+115
-1
lines changed

9 files changed

+115
-1
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
`;
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:local(.avatar) {
2+
background: green;
3+
}

docs/client/components/common/DefaultCode/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export { defaultCode as ToggleDefaultCode } from './Toggle';
66
export { defaultCode as RadioButtonGroupDefaultCode } from './RadioButtonGroup';
77
export { defaultCode as TextInputDefaultCode } from './TextInput';
88
export { defaultCode as SnackbarDefaultCode } from './Snackbar';
9+
export { defaultCode as AvatarDefaultCode } from './Avatar';
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
@import './Card/style.scss';
2-
@import './Button/style.scss';
2+
@import './Button/style.scss';
3+
@import './Avatar/style.scss';

docs/client/components/common/componentList.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import TextInput from '../../../../src/textInput';
1313
import TextInputReadme from '../../../../src/textInput/readMe.md';
1414
import Snackbar from '../../../../src/snackbar';
1515
import SnackbarReadme from '../../../../src/snackbar/readMe.md';
16+
import Avatar from '../../../../src/avatar';
17+
import AvatarReadme from '../../../../src/avatar/readMe.md';
1618

1719
import {
1820
CardDefaultCode,
@@ -23,6 +25,7 @@ import {
2325
RadioButtonGroupDefaultCode,
2426
TextInputDefaultCode,
2527
SnackbarDefaultCode,
28+
AvatarDefaultCode,
2629
} from './DefaultCode';
2730

2831
export const componentList = [
@@ -73,5 +76,11 @@ export const componentList = [
7376
docs: SnackbarReadme,
7477
component: Snackbar,
7578
defaultCode: SnackbarDefaultCode,
79+
},
80+
{
81+
name: 'Avatar',
82+
docs: AvatarReadme,
83+
component: Avatar,
84+
defaultCode: AvatarDefaultCode,
7685
}
7786
];

src/avatar/index.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
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);

src/avatar/readMe.md

Whitespace-only changes.

src/avatar/theme.scss

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
}

src/index.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import Toggle from './toggle';
88
import RadioButtonGroup from './radioButtonGroup';
99
import TextInput from './textInput';
1010
import Snackbar from './snackbar';
11+
import Avatar from './avatar';
1112

1213
export default {
1314
Button,
@@ -18,4 +19,7 @@ export default {
1819
Toggle,
1920
TextInput,
2021
Snackbar,
22+
Avatar,
2123
};
24+
25+
// ReactDOM.render(<Avatar image="Https://placeimg.com/80/80/animals"/>, document.getElementById('index'));

0 commit comments

Comments
 (0)