diff --git a/assets/js/components/DashboardEntityApp.js b/assets/js/components/DashboardEntityApp.js index 6b62d95810e..3ec73ae8aed 100644 --- a/assets/js/components/DashboardEntityApp.js +++ b/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 ( -
+
} showNavigation> diff --git a/assets/js/components/EntityHeaderBanner.js b/assets/js/components/EntityHeaderBanner.js new file mode 100644 index 00000000000..7db7a48c125 --- /dev/null +++ b/assets/js/components/EntityHeaderBanner.js @@ -0,0 +1,109 @@ +/** + * 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 ( +
+ + +
+

+ { createInterpolateElement( + sprintf( + /* translators: %s: page title of the page whose stats we're showing */ + __( + 'Detailed page stats for: “%s”', + 'google-site-kit' + ), + currentEntityTitle + ), + { + strong: , + } + ) } +

+ + + { entityURL } + +
+
+ ); +}; + +export default EntityHeaderBanner; diff --git a/assets/js/components/Header.js b/assets/js/components/Header.js index f856adca688..19ad0482bc4 100644 --- a/assets/js/components/Header.js +++ b/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, } ) } > @@ -80,7 +84,10 @@ const Header = ( { children, subHeader, showNavigation } ) => {
{ subHeader && ( -
{ subHeader }
+
+ + { subHeader } +
) } { showNavigation && } diff --git a/assets/js/components/Header.stories.js b/assets/js/components/Header.stories.js index 8564b4f9cf2..a70ac5b076b 100644 --- a/assets/js/components/Header.stories.js +++ b/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 ) =>
; @@ -98,6 +101,31 @@ HeaderWithSubHeader.args = { subHeader: , }; +export const HeaderWithSubHeaderEntityBanner = Template.bind( {} ); +HeaderWithSubHeaderEntityBanner.storyName = + 'Plugin Header with Sub Header and Entity Header Banner'; +HeaderWithSubHeaderEntityBanner.args = { + subHeader: , +}; +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 ( + + + + + + ); + }, +]; + export const HeaderWithNullSubHeader = Template.bind( {} ); HeaderWithNullSubHeader.storyName = 'Plugin Header with Null Sub Header'; HeaderWithNullSubHeader.args = { @@ -105,8 +133,8 @@ HeaderWithNullSubHeader.args = { }; 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, }; diff --git a/assets/sass/admin.scss b/assets/sass/admin.scss index 42a847699be..9a4f6285fa8 100644 --- a/assets/sass/admin.scss +++ b/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"; diff --git a/assets/sass/components/global/_googlesitekit-dashboard-navigation.scss b/assets/sass/components/global/_googlesitekit-dashboard-navigation.scss index 03b284fb5d1..bf039244af8 100644 --- a/assets/sass/components/global/_googlesitekit-dashboard-navigation.scss +++ b/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); } } } diff --git a/assets/sass/components/global/_googlesitekit-entity-header-banner.scss b/assets/sass/components/global/_googlesitekit-entity-header-banner.scss new file mode 100644 index 00000000000..f1f88d71941 --- /dev/null +++ b/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; + } + } + } +} diff --git a/assets/sass/components/global/_googlesitekit-header.scss b/assets/sass/components/global/_googlesitekit-header.scss index b3c66e24e63..6a1fe0ac7a7 100644 --- a/assets/sass/components/global/_googlesitekit-header.scss +++ b/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 { diff --git a/assets/svg/keyboard-backspace.svg b/assets/svg/keyboard-backspace.svg new file mode 100644 index 00000000000..7047527b6a4 --- /dev/null +++ b/assets/svg/keyboard-backspace.svg @@ -0,0 +1 @@ +