Feature/4146 entity context component

assets/js/components/DashboardEntityApp.js

@@ -20,6 +20,7 @@
  * WordPress dependencies
  */
 import { createInterpolateElement, Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -42,8 +43,8 @@ import {
 	ANCHOR_ID_SPEED,
 	ANCHOR_ID_TRAFFIC,
 } from '../googlesitekit/constants';
+import BannerNotifications from './notifications/BannerNotifications';
 import { CORE_SITE } from '../googlesitekit/datastore/site/constants';
-import { __, sprintf } from '@wordpress/i18n';
 import Link from './Link';
 import VisuallyHidden from './VisuallyHidden';
 import { Cell, Grid, Row } from '../material-components';
@@ -134,7 +135,7 @@ function DashboardEntityApp() {
 	}
 	return (
 		<Fragment>
-			<Header showNavigation>
+			<Header subHeader={ <BannerNotifications /> } showNavigation>
 				<EntitySearchInput />
 				<DateRangeSelector />
 				<HelpMenu />

assets/js/components/EntityHeaderBanner.js

@@ -0,0 +1,105 @@
+/**
+ * EntityHeaderBanner component.
+ *
+ * Site Kit by Google, Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	useContext,
+	useCallback,
+	createInterpolateElement,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Data from 'googlesitekit-data';
+import ViewContextContext from './Root/ViewContextContext';
+import { VIEW_CONTEXT_PAGE_DASHBOARD } from '../googlesitekit/constants';
+import Button from './Button';
+import { CORE_SITE } from '../googlesitekit/datastore/site/constants';
+import BackspaceIcon from '../../svg/keyboard-backspace.svg';
+import { CORE_LOCATION } from '../googlesitekit/datastore/location/constants';
+import Link from './Link';
+const { useSelect, useDispatch } = Data;
+
+const EntityHeaderBanner = () => {
+	const viewContext = useContext( ViewContextContext );
+	const currentEntityTitle = useSelect( ( select ) =>
+		select( CORE_SITE ).getCurrentEntityTitle()
+	);
+	const entityURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getCurrentEntityURL()
+	);
+
+	const { navigateTo } = useDispatch( CORE_LOCATION );
+	const returnURL = useSelect( ( select ) =>
+		select( CORE_SITE ).getAdminURL( 'googlesitekit-dashboard' )
+	);
+
+	const onClick = useCallback( () => {
+		navigateTo( returnURL );
+	}, [ returnURL, navigateTo ] );
+
+	if (
+		VIEW_CONTEXT_PAGE_DASHBOARD !== viewContext ||
+		entityURL === null ||
+		currentEntityTitle === null
+	) {
+		return null;
+	}
+
+	return (
+		<div className="googlesitekit-entity-header-banner">
+			<Button
+				icon={ <BackspaceIcon width={ 24 } height={ 24 } /> }
+				aria-label={ __( 'Return to dashboard"', 'google-site-kit' ) }
+				onClick={ onClick }
+				className="googlesitekit-entity-header-banner__back"
+				text
+			>
+				{ __( 'Return to dashboard', 'google-site-kit' ) }
+			</Button>
+
+			<div className="googlesitekit-entity-header-banner__details">
+				<p>
+					{ createInterpolateElement(
+						sprintf(
+							/* translators: %s: page title of the page whose stats we're showing */
+							__(
+								'<strong>Detailed page stats for:</strong> “%s”',
+								'google-site-kit'
+							),
+							currentEntityTitle
+						),
+						{
+							strong: <strong />,
+						}
+					) }
+				</p>
+
+				<Link href={ entityURL } external inherit>
+					{ entityURL }
+				</Link>
+			</div>
+		</div>
+	);
+};
+
+export default EntityHeaderBanner;

assets/js/components/Header.js

@@ -38,9 +38,12 @@ import ErrorNotifications from './notifications/ErrorNotifications';
 import { CORE_USER } from '../googlesitekit/datastore/user/constants';
 import { Grid, Row, Cell } from '../material-components';
 import DashboardNavigation from './DashboardNavigation';
+import EntityHeaderBanner from './EntityHeaderBanner';
+import { useFeature } from '../hooks/useFeature';
 const { useSelect } = Data;
 
 const Header = ( { children, subHeader, showNavigation } ) => {
+	const unifiedDashboardEnabled = useFeature( 'unifiedDashboard' );
 	const isAuthenticated = useSelect( ( select ) =>
 		select( CORE_USER ).isAuthenticated()
 	);
@@ -52,6 +55,7 @@ const Header = ( { children, subHeader, showNavigation } ) => {
 				className={ classnames( 'googlesitekit-header', {
 					'googlesitekit-header--has-subheader': subHeader,
 					'googlesitekit-header--has-scrolled': y > 1,
+					'googlesitekit-header--has-unified-dashboard': unifiedDashboardEnabled,
 				} ) }
 			>
 				<Grid>
@@ -80,7 +84,10 @@ const Header = ( { children, subHeader, showNavigation } ) => {
 			</header>
 
 			{ subHeader && (
-				<div className="googlesitekit-subheader">{ subHeader }</div>
+				<div className="googlesitekit-subheader">
+					<EntityHeaderBanner />
+					{ subHeader }
+				</div>
 			) }
 
 			{ showNavigation && <DashboardNavigation /> }

assets/js/components/Header.stories.js

@@ -37,6 +37,9 @@ import {
 	provideUserAuthentication,
 	provideSiteInfo,
 } from '../../../tests/js/utils';
+import WithRegistrySetup from '../../../tests/js/WithRegistrySetup';
+import { Provider } from './Root/ViewContextContext';
+import { VIEW_CONTEXT_PAGE_DASHBOARD } from '../googlesitekit/constants';
 
 const Template = ( args ) => <Header { ...args } />;
 
@@ -98,15 +101,40 @@ HeaderWithSubHeader.args = {
 	subHeader: <UserInputSuccessBannerNotification />,
 };
 
+export const HeaderWithSubHeaderEntityBanner = Template.bind( {} );
+HeaderWithSubHeaderEntityBanner.storyName =
+	'Plugin Header with Sub Header and Entity Header Banner';
+HeaderWithSubHeaderEntityBanner.args = {
+	subHeader: <UserInputSuccessBannerNotification />,
+};
+HeaderWithSubHeaderEntityBanner.decorators = [
+	( Story ) => {
+		const setupRegistry = ( registry ) => {
+			provideSiteInfo( registry, {
+				currentEntityTitle:
+					'Everything you need to know about driving in Ireland',
+				currentEntityURL: 'http://example.com/driving-ireland/',
+			} );
+		};
+		return (
+			<Provider value={ VIEW_CONTEXT_PAGE_DASHBOARD }>
+				<WithRegistrySetup func={ setupRegistry }>
+					<Story />
+				</WithRegistrySetup>
+			</Provider>
+		);
+	},
+];
+
 export const HeaderWithNullSubHeader = Template.bind( {} );
 HeaderWithNullSubHeader.storyName = 'Plugin Header with Null Sub Header';
 HeaderWithNullSubHeader.args = {
 	subHeader: <Null />,
 };
 
 export const HeaderWithNavigation = Template.bind( {} );
-HeaderWithHelpMenu.storyName = 'Plugin Header with Dashboard Navigation';
-HeaderWithHelpMenu.args = {
+HeaderWithNavigation.storyName = 'Plugin Header with Dashboard Navigation';
+HeaderWithNavigation.args = {
 	showNavigation: true,
 };
 

assets/sass/admin.scss

@@ -87,6 +87,7 @@
 @import "components/global/googlesitekit-data-block";
 @import "components/global/googlesitekit-DeviceSizeTabBar";
 @import "components/global/googlesitekit-dropdown-menu";
+@import "components/global/googlesitekit-entity-header-banner";
 @import "components/global/googlesitekit-entity-search";
 @import "components/global/googlesitekit-error-text";
 @import "components/global/googlesitekit-header";

assets/sass/components/global/_googlesitekit-dashboard-navigation.scss

@@ -19,17 +19,15 @@
 .googlesitekit-plugin {
 
 	.googlesitekit-navigation {
-
-		@include shadow;
-
 		background-color: $c-base;
+		box-shadow: 0 3px 3px rgba($c-black, 0.1);
 		justify-content: center;
 		left: 0;
 		padding: 12px 0;
 		position: sticky;
 		right: 0;
 		top: 68px;
-		z-index: 12;
+		z-index: 10;
 
 		body.admin-bar & {
 
@@ -49,10 +47,10 @@
 		.mdc-chip {
 			background-color: $c-base;
 			border: 1px solid $c-border-light;
+		}
 
-			&--selected {
-				border: none;
-			}
+		.mdc-chip--selected {
+			border-color: rgba($c-royal-blue, 0.08);
 		}
 	}
 }

assets/sass/components/global/_googlesitekit-entity-header-banner.scss

@@ -0,0 +1,95 @@
+/**
+ * Entity Header Banner styles.
+ *
+ * Site Kit by Google, Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.googlesitekit-plugin {
+
+	.googlesitekit-entity-header-banner {
+		align-items: flex-start;
+		color: $c-cape-cod;
+		display: flex;
+		padding: 0 16px 16px;
+
+		@media (min-width: $bp-tablet) {
+			flex-direction: column;
+			padding: 0 24px 24px;
+		}
+	}
+
+	.googlesitekit-entity-header-banner__back {
+		font-size: 16px;
+		font-weight: $fw-primary-normal;
+		height: auto;
+		letter-spacing: 0.3px;
+		line-height: 1;
+		margin: 4px 0 0;
+		min-width: auto;
+		padding: 0;
+		text-transform: none;
+
+		@media (min-width: $bp-tablet) {
+			margin: 4px 0 12px;
+		}
+
+		&::before,
+		&::after {
+			display: none;
+		}
+
+		&.mdc-button:not(:disabled) {
+			color: $c-cape-cod;
+		}
+
+		.mdc-button__label {
+			display: none;
+
+			@media (min-width: $bp-tablet) {
+				display: block;
+				margin: 0 0 0 8px;
+			}
+		}
+	}
+
+	.googlesitekit-entity-header-banner__details {
+		font-size: 12px;
+		padding: 0 0 0 16px;
+
+		@media (min-width: $bp-tablet) {
+			padding: 0;
+		}
+
+		p {
+			font-family: $f-secondary;
+			font-size: 12px;
+			line-height: 1;
+			margin: 0 0 4px;
+
+			@media (min-width: $bp-tablet) {
+				font-size: 18px;
+			}
+		}
+
+		a {
+			background-size: 12px;
+			text-decoration: underline;
+
+			@media (min-width: $bp-tablet) {
+				font-size: 16px;
+			}
+		}
+	}
+}

assets/sass/components/global/_googlesitekit-header.scss

@@ -134,6 +134,7 @@
 		}
 	}
 
+	.googlesitekit-header--has-unified-dashboard,
 	.googlesitekit-header--has-subheader {
 		box-shadow: none;
 
@@ -143,13 +144,27 @@
 		}
 	}
 
+	.googlesitekit-header--has-unified-dashboard {
+		transition: box-shadow $t-default ease-in-out;
+
+		&:not(.googlesitekit-header--has-subheader) {
+
+			@include shadow;
+		}
+	}
+
 	.googlesitekit-subheader {
 
 		@include shadow;
+
 		background-color: $c-base;
-		min-height: 3px; // to account for the box-shadow
+		min-height: 3px;
 		position: relative;
-		transform: translateY(-3px);
+		z-index: 11;
+
+		@media (min-width: $bp-tablet) {
+			padding: 0 10px;
+		}
 	}
 
 	.googlesitekit-header__children {