Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Issue #830 #831

Merged
merged 4 commits into from
Aug 10, 2017
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions docs/components.json
Original file line number Diff line number Diff line change
@@ -5261,6 +5261,30 @@
"computed": false
}
},
"coverStyle": {
"type": {
"name": "instanceOf",
"value": "Object"
},
"required": false,
"description": "Override the styles of the cover element",
"defaultValue": {
"value": "{}",
"computed": false
}
},
"coverImageStyle": {
"type": {
"name": "instanceOf",
"value": "Object"
},
"required": false,
"description": "Override the styles of the coverImage element",
"defaultValue": {
"value": "{}",
"computed": false
}
},
"headerStyle": {
"type": {
"name": "instanceOf",
9 changes: 8 additions & 1 deletion src/profile/get-styles.js
Original file line number Diff line number Diff line change
@@ -3,7 +3,13 @@ import combineStyles from '../internal/combine-styles';

const root = overrideStyles => combineStyles(styles.root, overrideStyles);

const coverImage = overrideStyles => combineStyles(styles.coverImage, overrideStyles);
const cover = overrideStyles => combineStyles(styles.cover, overrideStyles);

const coverImage = (image, overrideStyles) => {
const style = combineStyles(styles.coverImage, image);

return combineStyles(style, overrideStyles);
};

const avatar = overrideStyles => combineStyles(styles.avatar, overrideStyles);

@@ -13,6 +19,7 @@ const secondaryText = overrideStyles => combineStyles(styles.secondaryText, over

export default {
root,
cover,
coverImage,
avatar,
header,
33 changes: 20 additions & 13 deletions src/profile/index.jsx
Original file line number Diff line number Diff line change
@@ -25,6 +25,10 @@ class Profile extends Component {
children: PropTypes.node,
/** Override the styles of the root element */
style: PropTypes.instanceOf(Object),
/** Override the styles of the cover element */
coverStyle: PropTypes.instanceOf(Object),
/** Override the styles of the coverImage element */
coverImageStyle: PropTypes.instanceOf(Object),
/** Override the styles of the header element */
headerStyle: PropTypes.instanceOf(Object),
/** Override the styles of the secondaryText element */
@@ -42,6 +46,8 @@ class Profile extends Component {
button: null,
secondaryText: '',
style: {},
coverStyle: {},
coverImageStyle: {},
headerStyle: {},
secondaryTextStyle: {},
avatarStyle: {},
@@ -64,6 +70,8 @@ class Profile extends Component {
children,
button,
style,
coverStyle,
coverImageStyle,
headerStyle,
secondaryTextStyle,
avatarStyle,
@@ -77,20 +85,19 @@ class Profile extends Component {

return (
<section style={getStyles.root(style)} {...custom}>
<section style={styles.cover}>
<section style={getStyles.coverImage(coverBackground)} />
<section style={styles.coverOverlay} />
{
avatar
? <Avatar
image={avatar}
style={getStyles.avatar(avatarStyle)}
statusStyle={styles.status}
status={status}
/>
: null
}
<section style={getStyles.cover(coverStyle)}>
<section style={getStyles.coverImage(coverBackground, coverImageStyle)} />
</section>
{
avatar
? <Avatar
image={avatar}
style={getStyles.avatar(avatarStyle)}
statusStyle={styles.status}
status={status}
/>
: null
}
<h1 style={getStyles.header(headerStyle)}>{header}</h1>
{
secondaryText
47 changes: 19 additions & 28 deletions src/profile/styles.js
Original file line number Diff line number Diff line change
@@ -1,54 +1,45 @@
import colors from '../settings/colors';

export default {
root: {
height: '100%',
backgroundColor: colors.white,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
boxSizing: 'border-box',
color: colors.primaryText,
overflow: 'hidden',
position: 'relative'
},
cover: {
width: '100%',
position: 'relative',
padding: '16px 0',
marginBottom: '78px',
height: '200px',
overflow: 'hidden',
marginBottom: '78px'
},
coverImage: {
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundColor: colors.theme,
width: '100%',
height: '100%',
position: 'absolute',
top: 0,
left: 0,
filter: 'blur(4px)',
overflow: 'hidden'
},
coverOverlay: {
width: '100%',
height: '100%',
backgroundColor: colors.black,
opacity: '0.25',
position: 'absolute',
top: 0
filter: 'blur(4px) brightness(80%)'
},
avatar: {
width: '150px',
height: '150px',
margin: '0 auto',
border: `3px solid ${colors.white}`,
position: 'relative',
bottom: '-94px'
position: 'absolute',
top: '200px',
transform: 'translateY(-50%)'
},
close: {
position: 'absolute',
top: '16px',
right: '32px'
},
root: {
height: '100%',
backgroundColor: colors.white,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
boxSizing: 'border-box',
color: colors.primaryText,
overflow: 'hidden'
},
header: {
fontSize: '18px',
fontWeight: 'bolder',
22 changes: 21 additions & 1 deletion test/profile/get-styles.test.js
Original file line number Diff line number Diff line change
@@ -18,15 +18,35 @@ describe('Profile.getStyles', () => {
});
});

describe('cover', () => {
it('should get styles', () => {
const style = getStyles.cover();

expect(style).to.deep.equal(styles.cover);
});

it('should combine styles', () => {
const style = getStyles.cover({ color: 'red' });

expect(style).to.have.property('color', 'red');
});
});

describe('coverImage', () => {
it('should get styles', () => {
const style = getStyles.coverImage();

expect(style).to.deep.equal(styles.coverImage);
});

it('should add image styles', () => {
const style = getStyles.coverImage({ backgroundImage: 'url(https://avatars1.githubusercontent.com/u/6596471?v=3&s=400)' });

expect(style).to.have.property('backgroundImage', 'url(https://avatars1.githubusercontent.com/u/6596471?v=3&s=400)');
});

it('should combine styles', () => {
const style = getStyles.coverImage({ color: 'red' });
const style = getStyles.coverImage({}, { color: 'red' });

expect(style).to.have.property('color', 'red');
});
4 changes: 2 additions & 2 deletions test/profile/index.test.js
Original file line number Diff line number Diff line change
@@ -37,10 +37,10 @@ describe('Profile', () => {
global.navigator = undefined;
});

it('should always render four section elements', () => {
it('should always render three section elements', () => {
const wrapper = shallow(<Profile {...props} />);

expect(wrapper.find('section')).to.have.length(4);
expect(wrapper.find('section')).to.have.length(3);
});

it('should always render a h1 element', () => {