feat: add sticky tab feature

packages/gatsby-theme-carbon/src/components/Container.js

@@ -4,7 +4,7 @@ import NavContext from '../util/context/NavContext';
 import useWindowSize from '../util/hooks/useWindowSize';
 
 const Overlay = styled.div`
-  z-index: 500;
+  z-index: 8000; /* z('overlay') */
   width: 100%;
   height: 100%;
   position: fixed;

packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js

@@ -8,7 +8,7 @@ const LeftNavWrapper = styled.div(({ expanded }) => ({
   position: 'fixed',
   left: 0,
   top: '48px',
-  zIndex: 8000,
+  zIndex: 10000, // z('floating')
   transform: expanded ? 'translateX(0px)' : 'translateX(-256px)',
   '.bx--side-nav.bx--side-nav--website': {
     boxShadow: expanded ? '0 2px 8px rgba(0, 0, 0, 0.2)' : 'none',

packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss

@@ -17,7 +17,7 @@
   padding: 1rem;
   text-decoration: none;
   width: 50%;
-  transition: background $duration--moderate-02 $carbon--standard-easing;
+  transition: background $duration--fast-02 $carbon--standard-easing;
   &:hover {
     background: $carbon--gray-80;
   }

packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js

@@ -1,15 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 
-const PageHeader = ({ children, title }) => (
-  <div className="page-header">
+import { pageHeader, text, pageHeaderSticky } from './PageHeader.module.scss';
+
+const PageHeader = ({ children, title, tabs = [] }) => (
+  <div
+    className={cx({
+      [pageHeader]: pageHeader,
+      [pageHeaderSticky]: tabs.length,
+    })}
+  >
     <div className="bx--grid">
       <div className="bx--row">
         <div className="bx--col-lg-12">
-          <h2
-            id="page-title"
-            className="page-header__title bx--type-display-01"
-          >
+          <h2 id="page-title" className={text}>
             {title}
           </h2>
         </div>

packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss

@@ -0,0 +1,29 @@
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~@carbon/elements/scss/type/type';
+@import '~carbon-components/scss/globals/scss/layout';
+
+.page-header {
+  background: $carbon--black-100;
+  color: $inverse-01;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 15rem;
+}
+
+.text {
+  @include carbon--type-style('display-01');
+  margin-bottom: $spacing-06;
+  margin-top: auto;
+}
+
+.page-header--sticky {
+  position: sticky;
+  z-index: z('header');
+
+  /* page-head (15rem) 
+    - global-head (3rem) 
+    - tabs (3rem) */
+  top: -9rem;
+}

packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.js

@@ -2,34 +2,49 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import slugify from 'slugify';
+import cx from 'classnames';
+
+import {
+  tabsContainer,
+  list,
+  selectedItem,
+  listItem,
+  link,
+} from './PageTabs.module.scss';
 
 export default class PageTabs extends React.Component {
   static propTypes = {
     tabs: PropTypes.array,
     slug: PropTypes.string,
-    currentTab: PropTypes.string,
   };
 
   render() {
-    const { tabs, slug, currentTab } = this.props;
+    const { tabs, slug } = this.props;
+    const currentTab = slug
+      .split('/')
+      .filter(Boolean)
+      .slice(-1)[0];
+
     const pageTabs = tabs.map(tab => {
       const slugifiedTab = slugify(tab, { lower: true });
       const selected = slugifiedTab === currentTab;
       const href = slug.replace(currentTab, slugifiedTab);
-
       return (
-        <li key={tab} className={selected ? 'selected' : ''}>
-          <Link to={`${href}`}>{tab}</Link>
+        <li key={tab} className={cx({ [selectedItem]: selected }, listItem)}>
+          <Link className={link} to={`${href}`}>
+            {tab}
+          </Link>
         </li>
       );
     });
+
     return (
-      <div className="page-tabs">
+      <div className={tabsContainer}>
         <div className="bx--grid">
           <div className="bx--row">
             <div className="bx--col-lg-12 bx--col-no-gutter">
               <nav>
-                <ul className="page-tabs__list">{pageTabs}</ul>
+                <ul className={list}>{pageTabs}</ul>
               </nav>
             </div>
           </div>

packages/gatsby-theme-carbon/src/components/PageTabs/page-tabs.scss → packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss

@@ -1,44 +1,52 @@
-.page-tabs {
+@import '~carbon-components/scss/globals/scss/vars';
+@import '~carbon-components/scss/globals/scss/layout';
+@import '~@carbon/elements/scss/type/type';
+
+.tabs-container {
   margin: 0;
   width: 100%;
-  height: rem(48px);
-  position: relative;
   box-shadow: 0 -1px 0 rgba($ui-02, 0.25);
 }
 
-.page-tabs__list {
+.list {
   display: flex;
   flex-direction: row;
   width: 100%;
   list-style: none;
   padding: 0;
-  height: rem(48px);
-  position: relative;
 }
 
-.page-tabs__list li {
+.list-item {
   display: flex;
   align-self: center;
 }
 
-.page-tabs__list li a {
+.list-item:not(.selected-item) .link {
+  color: $active-01;
+
+  &:hover {
+    color: #fff;
+  }
+}
+
+.link {
   @include carbon--type-style('body-short-02');
   padding: 0 $spacing-09 0 $spacing-05;
   text-decoration: none;
   color: $inverse-01;
   white-space: nowrap;
   border-top: 3px solid transparent; // 3px accessibility minimum
-  height: rem(48px);
+  height: 3rem;
   display: inline-flex;
   align-items: center;
-  transition: $transition--base;
+  transition: all $duration--moderate-01 $carbon--standard-easing;
 
   &:hover {
     background: #353535;
   }
 }
 
-.page-tabs__list li.selected a {
+.selected-item .link {
   border-top: 3px solid $brand-01; // 3px accessibility minimum
   background: $carbon--gray-80;
 }

packages/gatsby-theme-carbon/src/styles/_page.scss

@@ -203,3 +203,7 @@ button {
 .website-alert + .#{$prefix}--header ~ .#{$prefix}--website-switcher {
   top: 5.5rem;
 }
+
+.bx--website-switcher {
+  z-index: z('floating');
+}

packages/gatsby-theme-carbon/src/styles/index.scss

@@ -50,9 +50,7 @@ $font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
 @import '../components/markdown/markdown.scss';
 @import '../components/Homepage/homepage.scss';
 @import '../components/GlobalSearch/global-search.scss';
-@import '../components/PageHeader/page-header.scss';
 @import '../components/PageTable/page-table.scss';
-@import '../components/PageTabs/page-tabs.scss';
 @import '../components/DoDontExample/do-dont-example.scss';
 @import '../components/AnchorLinks/anchor-links.scss';
 @import '../components/Caption/caption.scss';

packages/gatsby-theme-carbon/src/templates/Default.js

@@ -37,7 +37,7 @@ const Default = ({ pageContext, children, location }) => {
   const currentTab = getCurrentTab();
   return (
     <Layout homepage={false}>
-      <PageHeader title={title} label="label">
+      <PageHeader title={title} label="label" tabs={tabs}>
         {tabs && <PageTabs slug={slug} tabs={tabs} currentTab={currentTab} />}
       </PageHeader>
       <Main padded>{children}</Main>