Header Cake (component): removed unnecessary corner div

Removes continaer corner div, using just back link instead. Also removed back text if window is below 300px.
Automattic · Jan 4, 2016 · bca16eb · bca16eb
1 parent 92e15e2
commit bca16eb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 26 deletions.
diff --git a/client/components/header-cake/back.jsx b/client/components/header-cake/back.jsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import React, { PropTypes } from 'react';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -26,25 +27,29 @@ export default React.createClass( {
 	propTypes: {
 		onClick: PropTypes.func,
 		href: PropTypes.string,
-		text: PropTypes.string
+		text: PropTypes.string,
+		spacer: PropTypes.bool
 	},
 
 	getDefaultProps() {
 		return {
-			text: 'Back'
-		}
+			spacer: false
+		};
 	},
 
 	render() {
-		const { text, href, onClick } = this.props;
-		const hideText = window.innerWidth <= HIDE_BACK_CRITERIA.windowWidth && text.length >= HIDE_BACK_CRITERIA.characterLength;
+		const { text = this.translate( 'Back' ), href, onClick, spacer } = this.props;
+		const windowWidth = window.innerWidth;
+		const hideText = windowWidth <= HIDE_BACK_CRITERIA.windowWidth && text.length >= HIDE_BACK_CRITERIA.characterLength || windowWidth <= 300;
+		const linkClasses = classNames( {
+			'header-cake__back': true,
+			'is-spacer': spacer
+		} );
 
 		return (
-			<a className="header-cake__back" href={ href } onClick={ onClick }>
+			<a className={ linkClasses } href={ href } onClick={ onClick }>
 				<Gridicon icon="chevron-left" size={ 18 } />
-				{ hideText ?
-					null
-				: <span className="header-cake__back-text">{ text }</span> }
+				{ ! hideText && <span className="header-cake__back-text">{ text }</span> }
 			</a>
 		);
 	},

diff --git a/client/components/header-cake/index.jsx b/client/components/header-cake/index.jsx
@@ -27,7 +27,7 @@ export default React.createClass( {
 	},
 
 	render() {
-		const backText = this.props.backText || this.translate( 'Back' );
+		const { backText } = this.props;
 		const classes = classNames(
 			'header-cake',
 			this.props.className,
@@ -38,15 +38,11 @@ export default React.createClass( {
 
 		return (
 			<Card className={ classes }>
-				<div className="header-cake__corner">
-					<HeaderCakeBack text={ backText } onClick={ this.props.onClick } />
-				</div>
+				<HeaderCakeBack text={ backText } onClick={ this.props.onClick } />
 				<div className="header-cake__title" onClick={ this.props.onTitleClick }>
 					{ this.props.children }
 				</div>
-				<div className="header-cake__corner is-spacer">
-					<HeaderCakeBack text={ backText } />
-				</div>
+				<HeaderCakeBack text={ backText } spacer />
 			</Card>
 		);
 	}

diff --git a/client/components/header-cake/style.scss b/client/components/header-cake/style.scss
@@ -12,23 +12,19 @@
 	line-height: 18px;
 	padding: 0;
 
+	&::after {
+		display: none;
+	}
+
 	@include breakpoint( "<660px" ) {
 		margin-top: 10px;
 	}
 }
 
-.header-cake__corner {
+.header-cake__back {
 	flex: none;
 	display: block;
 	max-width: 33.333%;
-
-	&.is-spacer {
-		opacity: 0;
-	}
-}
-
-.header-cake__back {
-	display: block;
 	padding: 16px;
 	color: darken( $gray, 20% );
 	white-space: nowrap;
@@ -42,7 +38,8 @@
 		opacity: 0.6;
 	}
 
-	.header-cake__corner.is-spacer & {
+	&.is-spacer {
+		opacity: 0;
 		cursor: default;
 	}
 }