Add a content area to the Header in the Unified Dashboard for Entity Info and notifications

Feature Description

There should be a section in the header of the dashboard that displays content in the view between the header and the pill links, see:

The logic to display this content is covered elsewhere; this issue is just above creating the component that can be used to style either the Entity information (shown above) or the Notifications that appear in this area when any are present.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new prop subHeader should be added to the Header component. It should be used to place arbitrary content in the header area highlighted in the screenshot. It should appear below the <header> tag in the Header component. (https://github.com/google/site-kit-wp/blob/5f12f3b3b59b1517bc2a0efa4d427120de2e4239/assets/js/components/Header.js#L41-L71)
• This prop should be used by the components in #4146 and #4152 to wrap their output when inside the <Header> component
• When the subHeader prop is passed components/eg. a non-null value, the output should match the styles in the Figma mockup: https://www.figma.com/file/VILRieNSLg2DOVyEgFBkXe/[MVP]-Generic-Dashboard?node-id=459%3A2117 (note how the bottom border/shadow of the header becomes the border/shadow of the subheader instead when there is one, i.e. it’s almost like the header expands). There should be no inner padding though as that should be defined by whatever is rendered within the container.
• The component should NOT be sticky, unlike the rest of the header. When the user scrolls down the page, this section of the header should disappear and not follow the user down the page.
• The BannerNotifications component from #4152 should be rendered within the new sub-header container, but only if on the “main dashboard” (i.e. not if on the “entity dashboard”).

Implementation Brief

Integration in Header

• Update Header to accept a new subHeader prop which should take an optional element
  • If provided, this element should be rendered in a new grid inner (row), and full-width grid cell below the existing elements wrapping the main menu (i.e. as a child of mdc-layout-grid)
• Update stories/header.stories.js to add a new story for showing the header with a dummy component
• Add subHeader={<BannerNotifications />} to the DashboardMainApp’s Header component (https://github.com/google/site-kit-wp/blob/94ab93a3bf301b165aebfdb0b4df75a815ffd96b/assets/js/components/DashboardMainApp.js#L42) to output the notifications on the Main Dashboard.

Test Coverage

• Add a Storybook story to show what the header looks like with “Empty” or “Dummy” content—eg the padding and extra border dividing the header from the subheader should appear, with another border between the subheader and navigation

QA Brief

• Enable the unifiedDashboard feature flag.
• Check if the a notification is rendered below the header at the following URL: /wp-admin/admin.php?page=googlesitekit-dashboard&notification=authentication_success
• There should be no visible lines separating the header and the sub header content.
• Scroll down the page, the header should be sticky.

Changelog entry

• Add a generic content area for the Header in the Unified Dashboard.

[asvinb]

@tofumatt @felixarntz @kuasha420 A few things I noticed

• The IB mentions having the subHeader prop displayed within mdc-layout-grid. I think we should not do that, but instead leave the implementation to the rendered component. For e.g the Notification component already uses mdc-* class names. So I would suggest we just have a full width wrapper instead of having a grid layout.
• The box-shadow differs on small and large screens. I suggest we keep them consistent and since we are not really focusing on the designs in Figma, I suggest we use the shadow mixin we already have.
• We should cater for when the header is sticky to show the box-shadow even though when we have a sub header because the latter is not sticky.

I have a PR created for the above points.

Let me know what you think.

[asvinb]

@wpdarren The QAB says going to the following URL: /wp-admin/admin.php?page=googlesitekit-dashboard&notification=authentication_success. In doing so, the BannerNotifications component will be passed to the Header component via the subHeader prop. It’s a way to test the latter. Then it should match the designs in Figma, meaning there should no be any borders between the header and the sub header (BannerNotifications in this case), and then only the header is sticky upon scrolling.

Let me know if that clears things up.