From e1e072840a3d97f4ec7e86ac0988d2b24a8adc17 Mon Sep 17 00:00:00 2001
From: Vince Picone <vpicone@gmail.com>
Date: Wed, 21 Aug 2019 14:44:08 -0700
Subject: [PATCH] fix: don't hide header at any viewport size (#364)

* fix: don't hide header at any viewport size

* fix: separate page tabs from the page header to simplify sticky logic

* fix: background color and default height

* fix: add default height for ie11

* fix: remove unused style systems

* fix: tabs z index
---
 .../src/components/Header/Header.js           | 11 ++-------
 .../src/components/Header/Header.module.scss  |  4 ----
 .../src/components/Layout.js                  | 10 ++------
 .../src/components/LeftNav/LeftNav.js         |  5 +---
 .../src/components/LeftNav/LeftNavWrapper.js  |  4 +---
 .../LeftNav/LeftNavWrapper.module.scss        |  4 ----
 .../src/components/PageHeader/PageHeader.js   | 23 +++----------------
 .../PageHeader/PageHeader.module.scss         | 20 +++++++---------
 .../components/PageTabs/PageTabs.module.scss  |  5 +++-
 .../src/templates/Default.js                  | 18 ++-------------
 10 files changed, 23 insertions(+), 81 deletions(-)

diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.js b/packages/gatsby-theme-carbon/src/components/Header/Header.js
index b221b8f18..975fc1533 100644
--- a/packages/gatsby-theme-carbon/src/components/Header/Header.js
+++ b/packages/gatsby-theme-carbon/src/components/Header/Header.js
@@ -16,13 +16,12 @@ import NavContext from '../../util/context/NavContext';
 import useMetadata from '../../util/hooks/useMetadata';
 
 import {
-  hidden,
   header,
   switcherButtonOpen,
   skipToContent,
 } from './Header.module.scss';
 
-const Header = ({ children, shouldHideHeader }) => {
+const Header = ({ children }) => {
   const { leftNavIsOpen, toggleNavState, switcherIsOpen } = useContext(
     NavContext
   );
@@ -30,13 +29,7 @@ const Header = ({ children, shouldHideHeader }) => {
 
   return (
     <>
-      <ShellHeader
-        aria-label="Header"
-        className={cx({
-          [header]: true,
-          [hidden]: shouldHideHeader,
-        })}
-      >
+      <ShellHeader aria-label="Header" className={header}>
         <SkipToContent className={skipToContent} />
         <HeaderMenuButton
           className="bx--header__action--menu"
diff --git a/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss b/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
index 50d75acc5..02a6d34a2 100644
--- a/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/Header/Header.module.scss
@@ -13,10 +13,6 @@ header.header {
   z-index: z('floating');
 }
 
-.header.hidden {
-  top: -48px;
-}
-
 .header :global(.bx--header__name) {
   @include carbon--type-style('body-short-02');
   @include carbon--breakpoint('lg') {
diff --git a/packages/gatsby-theme-carbon/src/components/Layout.js b/packages/gatsby-theme-carbon/src/components/Layout.js
index 9c5e54435..d2c17f8e5 100644
--- a/packages/gatsby-theme-carbon/src/components/Layout.js
+++ b/packages/gatsby-theme-carbon/src/components/Layout.js
@@ -13,7 +13,6 @@ const Layout = ({
   children,
   homepage,
   theme,
-  shouldHideHeader,
   titleType,
   pageTitle,
   pageDescription,
@@ -42,14 +41,9 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
-      <Header shouldHideHeader={shouldHideHeader} />
+      <Header />
       <Switcher />
-      <LeftNav
-        shouldHideHeader={shouldHideHeader}
-        homepage={homepage}
-        is404Page={is404}
-        theme={theme}
-      />
+      <LeftNav homepage={homepage} is404Page={is404} theme={theme} />
       <Container homepage={homepage} theme={theme}>
         {children}
         <Footer />
diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
index c2337b632..eb26e8377 100644
--- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
+++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNav.js
@@ -50,10 +50,7 @@ const LeftNav = props => {
 
   // TODO: replace old addon website styles with sass modules, move to wrapper
   return (
-    <LeftNavWrapper
-      expanded={leftNavIsOpen}
-      shouldHideHeader={props.shouldHideHeader}
-    >
+    <LeftNavWrapper expanded={leftNavIsOpen}>
       <SideNav
         expanded
         defaultExpanded
diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js
index 409cbdaf1..f9b1b243c 100644
--- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js
+++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js
@@ -4,13 +4,11 @@ import cx from 'classnames';
 import {
   leftNavWrapper,
   expanded as expandedStyles,
-  shouldHideHeader as shouldHideHeaderStyles,
 } from './LeftNavWrapper.module.scss';
 
-const LeftNavWrapper = ({ expanded, shouldHideHeader, ...rest }) => {
+const LeftNavWrapper = ({ expanded, ...rest }) => {
   const className = cx(leftNavWrapper, {
     [expandedStyles]: expanded,
-    [shouldHideHeaderStyles]: shouldHideHeader,
   });
   return <div className={className} {...rest} />;
 };
diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.module.scss b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.module.scss
index 3ce4f0e06..df06c9d65 100644
--- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.module.scss
@@ -29,7 +29,3 @@
     box-shadow: none;
   }
 }
-
-.shouldHideHeader {
-  top: -48px;
-}
diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js
index 9d6110540..232be0477 100644
--- a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js
+++ b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js
@@ -1,21 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import {
-  pageHeader,
-  text,
-  pageHeaderSticky,
-  pageHeaderShifted,
-} from './PageHeader.module.scss';
+import { pageHeader, withTabs, text } from './PageHeader.module.scss';
 
-const PageHeader = ({ children, title, tabs = [], shouldHideHeader }) => (
-  <div
-    className={cx({
-      [pageHeader]: pageHeader,
-      [pageHeaderSticky]: tabs.length,
-      [pageHeaderShifted]: shouldHideHeader,
-    })}
-  >
+const PageHeader = ({ title, tabs = [] }) => (
+  <div className={cx(pageHeader, { [withTabs]: tabs.length })}>
     <div className="bx--grid">
       <div className="bx--row">
         <div className="bx--col-lg-12">
@@ -25,16 +14,10 @@ const PageHeader = ({ children, title, tabs = [], shouldHideHeader }) => (
         </div>
       </div>
     </div>
-    {children}
   </div>
 );
 
 PageHeader.propTypes = {
-  /**
-   * Pass in the children that will be rendered within the PageHeader
-   */
-  children: PropTypes.node,
-
   /**
    * Specify the title for the page
    */
diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss
index 6c4c186d6..fdf53b3ee 100644
--- a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss
@@ -1,14 +1,20 @@
 @import '~carbon-components/scss/globals/scss/layout';
 
 .page-header {
+  --height: 20rem;
+  height: 20rem;
+  height: var(--height);
   background: $carbon--black-100;
   color: $inverse-01;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  height: 20rem;
-  transition: top $duration--fast-02;
+  border-bottom: 1px solid $inverse-02;
+}
+
+.with-tabs {
+  height: calc(var(--height) - 3rem);
 }
 
 .text {
@@ -16,13 +22,3 @@
   margin-bottom: $spacing-07;
   margin-top: auto;
 }
-
-.page-header--sticky {
-  position: sticky;
-  z-index: z('header');
-  top: -14rem;
-}
-
-.page-header--sticky.page-header--shifted {
-  top: -17rem;
-}
diff --git a/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss b/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss
index 1897889bc..09676c86b 100644
--- a/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss
+++ b/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss
@@ -1,7 +1,10 @@
 .tabs-container {
   margin: 0;
   width: 100%;
-  box-shadow: 0 -1px 0 rgba($ui-02, 0.25);
+  background: $carbon--black-100;
+  position: sticky;
+  top: 3rem;
+  z-index: z('header');
 }
 
 .list {
diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js
index a23df666c..ae22baf32 100644
--- a/packages/gatsby-theme-carbon/src/templates/Default.js
+++ b/packages/gatsby-theme-carbon/src/templates/Default.js
@@ -1,10 +1,6 @@
 import React from 'react';
 import slugify from 'slugify';
 import { useStaticQuery, graphql } from 'gatsby';
-import { breakpoints } from '@carbon/elements';
-import useMedia from 'use-media';
-
-import { useScrollDirection } from '../util/hooks';
 
 import BackToTopBtn from '../components/BackToTopBtn';
 import Layout from '../components/Layout';
@@ -17,9 +13,6 @@ import Main from '../components/Main';
 const Default = ({ pageContext, children, location }) => {
   const { frontmatter = {}, relativePagePath, titleType } = pageContext;
   const { tabs, title, theme, description, keywords } = frontmatter;
-  const scrollDirection = useScrollDirection();
-  const isMobile = useMedia({ maxWidth: breakpoints.md.width });
-  const shouldHideHeader = isMobile && tabs && scrollDirection === 'down';
 
   // get the path prefix if it exists
   const {
@@ -45,7 +38,6 @@ const Default = ({ pageContext, children, location }) => {
   const currentTab = getCurrentTab();
   return (
     <Layout
-      shouldHideHeader={shouldHideHeader}
       homepage={false}
       theme={theme}
       pageTitle={title}
@@ -53,14 +45,8 @@ const Default = ({ pageContext, children, location }) => {
       pageKeywords={keywords}
       titleType={titleType}
     >
-      <PageHeader
-        shouldHideHeader={shouldHideHeader}
-        title={title}
-        label="label"
-        tabs={tabs}
-      >
-        {tabs && <PageTabs slug={slug} tabs={tabs} currentTab={currentTab} />}
-      </PageHeader>
+      <PageHeader title={title} label="label" tabs={tabs} />
+      {tabs && <PageTabs slug={slug} tabs={tabs} currentTab={currentTab} />}
       <Main padded>
         {children}
         <EditLink relativePagePath={relativePagePath} />