From c7eb895660167a94a641ad3cd67a4d8b2cc5e2e0 Mon Sep 17 00:00:00 2001 From: iancstewart Date: Thu, 10 Aug 2017 10:27:48 +0200 Subject: [PATCH 1/4] Adjusted html stucture and css for profile component. --- src/profile/index.jsx | 21 +++++++++---------- src/profile/styles.js | 47 +++++++++++++++++-------------------------- 2 files changed, 29 insertions(+), 39 deletions(-) diff --git a/src/profile/index.jsx b/src/profile/index.jsx index 12cb17da..0f489693 100644 --- a/src/profile/index.jsx +++ b/src/profile/index.jsx @@ -79,18 +79,17 @@ class Profile extends Component {
-
- { - avatar - ? - : null - }
+ { + avatar + ? + : null + }

{header}

{ secondaryText diff --git a/src/profile/styles.js b/src/profile/styles.js index 5e290bda..b6380f96 100644 --- a/src/profile/styles.js +++ b/src/profile/styles.js @@ -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', From 5ef15b167d3fa0ce295fa9085c5599f7a4694cb6 Mon Sep 17 00:00:00 2001 From: iancstewart Date: Thu, 10 Aug 2017 10:53:01 +0200 Subject: [PATCH 2/4] Added override style for cover and coverImage. --- src/profile/get-styles.js | 9 ++++++++- src/profile/index.jsx | 12 ++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/profile/get-styles.js b/src/profile/get-styles.js index 0efc62c2..1164db0f 100644 --- a/src/profile/get-styles.js +++ b/src/profile/get-styles.js @@ -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, diff --git a/src/profile/index.jsx b/src/profile/index.jsx index 0f489693..6f414b5a 100644 --- a/src/profile/index.jsx +++ b/src/profile/index.jsx @@ -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,8 +85,8 @@ class Profile extends Component { return (
-
-
+
+
{ avatar From c57984d6c30e5e4c32f13195912126db7441930e Mon Sep 17 00:00:00 2001 From: iancstewart Date: Thu, 10 Aug 2017 10:53:22 +0200 Subject: [PATCH 3/4] DocGen. --- docs/components.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/docs/components.json b/docs/components.json index b85d290e..e87ecc0f 100644 --- a/docs/components.json +++ b/docs/components.json @@ -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", From af68fb1fb2174c8aefa2b3d0505be55aee1edf1e Mon Sep 17 00:00:00 2001 From: iancstewart Date: Thu, 10 Aug 2017 11:09:58 +0200 Subject: [PATCH 4/4] Fixed tests. --- test/profile/get-styles.test.js | 22 +++++++++++++++++++++- test/profile/index.test.js | 4 ++-- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/test/profile/get-styles.test.js b/test/profile/get-styles.test.js index 07828494..12e51859 100644 --- a/test/profile/get-styles.test.js +++ b/test/profile/get-styles.test.js @@ -18,6 +18,20 @@ 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(); @@ -25,8 +39,14 @@ describe('Profile.getStyles', () => { 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'); }); diff --git a/test/profile/index.test.js b/test/profile/index.test.js index 72b0c61c..50d3e2e0 100644 --- a/test/profile/index.test.js +++ b/test/profile/index.test.js @@ -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(); - expect(wrapper.find('section')).to.have.length(4); + expect(wrapper.find('section')).to.have.length(3); }); it('should always render a h1 element', () => {