Homepage: Add layout with sticky columns (https://github.com/woocommerce/woocommerce-admin/pull/4347)

* Add homepage layout

* temp tests

* remove test placeholder

* functional component

* remove errant comment

plugins/woocommerce-admin/client/homepage/index.js

@@ -14,11 +14,11 @@ import { Spinner } from '@woocommerce/components';
  */
 import withSelect from 'wc-api/with-select';
 import { isOnboardingEnabled } from 'dashboard/utils';
-import StatsOverview from './stats-overview';
 
 const ProfileWizard = lazy( () =>
 	import( /* webpackChunkName: "profile-wizard" */ '../profile-wizard' )
 );
+import Layout from './layout';
 
 const Homepage = ( { profileItems, query } ) => {
 	if ( isOnboardingEnabled() && ! profileItems.completed ) {
@@ -29,7 +29,7 @@ const Homepage = ( { profileItems, query } ) => {
 		);
 	}
 
-	return <StatsOverview />;
+	return <Layout />;
 };
 
 export default compose(

plugins/woocommerce-admin/client/homepage/layout.js

@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { useState, useRef, useEffect } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import StatsOverview from './stats-overview';
+import './style.scss';
+
+const Layout = () => {
+	const [ showInbox, setShowInbox ] = useState( true );
+	const [ isContentSticky, setIsContentSticky ] = useState( false );
+	const content = useRef( null );
+	const maybeStickContent = () => {
+		if ( ! content.current ) {
+			return;
+		}
+		const { bottom } = content.current.getBoundingClientRect();
+		const shouldBeSticky = showInbox && bottom < window.innerHeight;
+
+		setIsContentSticky( shouldBeSticky );
+	};
+
+	useEffect( () => {
+		maybeStickContent();
+		window.addEventListener( 'resize', maybeStickContent );
+
+		return () => {
+			window.removeEventListener( 'resize', maybeStickContent );
+		};
+	}, [] );
+
+	return (
+		<div
+			className={ classnames( 'woocommerce-homepage', {
+				hasInbox: showInbox,
+			} ) }
+		>
+			{ showInbox && (
+				<div className="woocommerce-homepage-column is-inbox">
+					<div className="temp-content">
+						<Button
+							isPrimary
+							onClick={ () => {
+								setShowInbox( false );
+							} }
+						>
+							Dismiss All
+						</Button>
+					</div>
+					<div className="temp-content" />
+					<div className="temp-content" />
+					<div className="temp-content" />
+					<div className="temp-content" />
+					<div className="temp-content" />
+					<div className="temp-content" />
+				</div>
+			) }
+			<div
+				className="woocommerce-homepage-column"
+				ref={ content }
+				style={ {
+					position: isContentSticky ? 'sticky' : 'static',
+				} }
+			>
+				<StatsOverview />
+			</div>
+		</div>
+	);
+};
+
+export default Layout;

plugins/woocommerce-admin/client/homepage/style.scss

@@ -0,0 +1,45 @@
+.woocommerce-page #wpcontent,
+.woocommerce-page.woocommerce_page_wc-admin #wpbody-content {
+	overflow-x: inherit !important; // Overwriting wc-admin css from elsewhere. Necessary to make the right-hand column 'stick'
+}
+
+.woocommerce-homepage {
+	display: flex;
+	max-width: 1032px;
+	margin: 0 auto;
+	justify-content: space-between;
+
+	&.hasInbox .woocommerce-homepage-column {
+		width: calc(50% - 12px);
+		margin: 0;
+
+		@include breakpoint('<782px') {
+			width: 100%;
+			position: inherit;
+			top: auto;
+		}
+	}
+
+	@include breakpoint('<782px') {
+		margin-left: -16px;
+		margin-right: -16px;
+		flex-direction: column-reverse;
+	}
+}
+.woocommerce-homepage-column {
+	width: 50%;
+	top: 130px;
+	margin: 0 auto;
+	align-self: flex-start;
+}
+.temp-content {
+	width: 100%;
+	height: 300px;
+	margin-bottom: 24px;
+	background-color: #9acd32;
+}
+
+.is-inbox .temp-content {
+	height: 225px;
+	background-color: #6495ed;
+}