From 380b1b08bc0bb535516424c782f934d568054345 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Wed, 15 May 2019 21:56:26 -0500 Subject: [PATCH] feat: add sticky tab feature --- .../src/components/Container.js | 2 +- .../src/components/LeftNav/LeftNavWrapper.js | 2 +- .../NextPrevious/NextPrevious.module.scss | 2 +- .../src/components/PageHeader/PageHeader.js | 17 +++++++---- .../PageHeader/PageHeader.module.scss | 29 ++++++++++++++++++ .../components/PageHeader/page-header.scss | 14 --------- .../src/components/PageTabs/PageTabs.js | 29 +++++++++++++----- .../{page-tabs.scss => PageTabs.module.scss} | 30 ++++++++++++------- .../gatsby-theme-carbon/src/styles/_page.scss | 4 +++ .../gatsby-theme-carbon/src/styles/index.scss | 2 -- .../src/templates/Default.js | 2 +- 11 files changed, 89 insertions(+), 44 deletions(-) create mode 100644 packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss delete mode 100644 packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss rename packages/gatsby-theme-carbon/src/components/PageTabs/{page-tabs.scss => PageTabs.module.scss} (60%) diff --git a/packages/gatsby-theme-carbon/src/components/Container.js b/packages/gatsby-theme-carbon/src/components/Container.js index 105349a0c..fc240c5e9 100644 --- a/packages/gatsby-theme-carbon/src/components/Container.js +++ b/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; diff --git a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js b/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js index 467ab860b..0cc17198d 100644 --- a/packages/gatsby-theme-carbon/src/components/LeftNav/LeftNavWrapper.js +++ b/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', diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss index d33d74736..d6c3e7581 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss +++ b/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; } diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js index a20f1f252..53c224403 100644 --- a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.js +++ b/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 }) => ( -
+import { pageHeader, text, pageHeaderSticky } from './PageHeader.module.scss'; + +const PageHeader = ({ children, title, tabs = [] }) => ( +
-

+

{title}

diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss b/packages/gatsby-theme-carbon/src/components/PageHeader/PageHeader.module.scss new file mode 100644 index 000000000..fcf51623a --- /dev/null +++ b/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; +} diff --git a/packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss b/packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss deleted file mode 100644 index 8ab6cd0a1..000000000 --- a/packages/gatsby-theme-carbon/src/components/PageHeader/page-header.scss +++ /dev/null @@ -1,14 +0,0 @@ -.page-header { - background: $carbon--black-100; - color: $inverse-01; - width: 100%; - display: flex; - flex-direction: column; - justify-content: flex-end; - height: rem(240px); -} - -.page-header__title { - margin-bottom: $spacing-06; - margin-top: auto; -} diff --git a/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.js b/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.js index fd4cfe94f..ccb614e8b 100644 --- a/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.js +++ b/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 ( -
  • - {tab} +
  • + + {tab} +
    • ); }); + return ( -
    +
    diff --git a/packages/gatsby-theme-carbon/src/components/PageTabs/page-tabs.scss b/packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss similarity index 60% rename from packages/gatsby-theme-carbon/src/components/PageTabs/page-tabs.scss rename to packages/gatsby-theme-carbon/src/components/PageTabs/PageTabs.module.scss index 0eef885af..9e8722b1a 100644 --- a/packages/gatsby-theme-carbon/src/components/PageTabs/page-tabs.scss +++ b/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; } diff --git a/packages/gatsby-theme-carbon/src/styles/_page.scss b/packages/gatsby-theme-carbon/src/styles/_page.scss index e9dc55edf..869338003 100644 --- a/packages/gatsby-theme-carbon/src/styles/_page.scss +++ b/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'); +} diff --git a/packages/gatsby-theme-carbon/src/styles/index.scss b/packages/gatsby-theme-carbon/src/styles/index.scss index 3ce971f80..19ab6dee2 100644 --- a/packages/gatsby-theme-carbon/src/styles/index.scss +++ b/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'; diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js index 39e6b3021..a94933222 100644 --- a/packages/gatsby-theme-carbon/src/templates/Default.js +++ b/packages/gatsby-theme-carbon/src/templates/Default.js @@ -37,7 +37,7 @@ const Default = ({ pageContext, children, location }) => { const currentTab = getCurrentTab(); return ( - + {tabs && }
    {children}