From 00ae59dd52332a8353af9a2a0497cb978fbaa345 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Thu, 9 May 2019 23:02:45 -0500 Subject: [PATCH 1/9] feat: add next-previous component --- packages/example/src/data/nav-items.yaml | 2 +- .../components/NextPrevious/NextPrevious.js | 439 +++++++----------- .../NextPrevious/NextPrevious.module.scss | 41 ++ .../NextPrevious/next-previous.scss | 36 -- .../gatsby-theme-carbon/src/styles/index.scss | 1 - .../src/templates/Default.js | 11 +- .../src/templates/Homepage.js | 3 + 7 files changed, 215 insertions(+), 318 deletions(-) create mode 100644 packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss delete mode 100644 packages/gatsby-theme-carbon/src/components/NextPrevious/next-previous.scss diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml index a720b37c6..242ea0ed0 100644 --- a/packages/example/src/data/nav-items.yaml +++ b/packages/example/src/data/nav-items.yaml @@ -1,4 +1,4 @@ -- title: Component examples +- title: Components pages: - title: Demo path: /component-examples/demo diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js index b7e6ee1a0..f79d7cc18 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js @@ -1,281 +1,164 @@ import React from 'react'; -// import { Link } from 'gatsby'; -// import navigation from '../../data/navigation/navigation.json'; - -export default class NextPrevious extends React.Component { - render() { - return
next prev in progress
; +import { Link, useStaticQuery, graphql } from 'gatsby'; +import slugify from 'slugify'; +import cx from 'classnames'; + +import { + wrapper, + link, + direction, + name, + firstLink, + secondLink, + linkContainer, +} from './NextPrevious.module.scss'; + +const useNavigationList = () => { + const { + allNavItemsYaml: { edges }, + } = useStaticQuery(graphql` + query NAV_ITEM_QUERY { + allNavItemsYaml { + edges { + node { + title + pages { + title + path + } + } + } + } + } + `); + + return edges.flatMap(({ node }) => + node.pages.map(page => ({ ...page, category: node.title })) + ); +}; + +const getTabItems = ({ currentTitle, tabs }) => { + if (!tabs) { + return { + prevTabItem: null, + nextTabItem: null, + }; } - // static propTypes = { - // /** - // * array of tabs on this current page - // */ - // currentTabs: PropTypes.array, - // /** - // * the lower-case slug-friendly name of the page - // */ - // currentPage: PropTypes.string, - // /** - // * the full slug of the current page */ - // slug: PropTypes.string, - // }; - - // /** - // * e.g.converts "Item Name" to "item-name" - // */ - // titleToSlug = string => { - // if (string) return string.toLowerCase().replace(' ', '-'); - // }; - - // /** - // * e.g. converts "item-name" to "Item Name" - // */ - // slugToTitle = string => { - // if (string && string.charAt(0) === '/') { - // string = string.substr(1); - // } - // let newString; - // if (string) { - // newString = string - // .split('/') - // .pop() - // .split('-'); - // newString = newString - // .map((word, i) => { - // let newWord; - // if (newString.length === 1 || !(i == newString.length - 1)) { - // newWord = word.charAt(0).toUpperCase() + word.slice(1); - // } else { - // newWord = word; - // } - // return newWord; - // }) - // .join(' '); - // if (string === 'ui-shell') { - // newString = 'UI shell'; - // } - // if (string === 'faq') { - // newString = 'FAQ'; - // } - // } - // return newString; - // }; - - // slugToTitleWithPath = string => { - // if (string && string.charAt(0) === '/') { - // string = string.substr(1); - // } - // let newString = string; - // if (string) { - // newString = string - // .split('/') - // .map(word => this.slugToTitle(word)) - // .join(': '); - // } - // return newString; - // }; - - // getKeyByValue = (object, value) => Object.keys(object).find(key => object[key] === value); - - // renderNextPreviousLinks = (prevPath, prevName, nextPath, nextName) => { - // let truncatedPrevName; let truncatedNextName; - // if (typeof prevName !== 'undefined') { - // truncatedPrevName = prevName.substring(prevName.indexOf(':') + 1).trim(); - // } - - // if (typeof nextName !== 'undefined') { - // truncatedNextName = nextName.substring(nextName.indexOf(':') + 1).trim(); - // } - - // const nextButtonClassnames = classnames({ - // 'next-previous-link': true, - // 'next-previous-link--next': true, - // 'bx--col-lg-6': true, - // 'bx--col-md-4': true, - // 'bx--col-sm-2': true, - // 'bx--offset-lg-10': !prevPath, - // }); - - // return ( - // <> - //
next prev
- // {/* {prevPath && ( - // - // Previous - // {truncatedPrevName} - // - // )} - // {nextPath && ( - // - // Next - // {truncatedNextName} - // - // )} */} - // - // ); - // }; - - // render() { - // const { GATSBY_CARBON_ENV } = process.env; - - // const {currentTabs} = this.props; - // const {currentPage} = this.props; - // const {slug} = this.props; - - // let currentParentPath = slug.split('/'); - // currentParentPath.length -= 1; - // currentParentPath = currentParentPath.join('/'); - - // const currentSection = slug.substr(1).split('/')[0]; - - // let currentHasSubnav; - // if (navigation[currentSection]) { - // currentHasSubnav = - // typeof navigation[currentSection]['sub-nav'] === 'object'; - // } - - // let currentSubnavItem; - // if (currentHasSubnav) { - // currentSubnavItem = slug.substr(1).split('/')[1]; - // } - - // let prevPagePath; let prevPageTitle; let nextPagePath; let nextPageTitle; - - // /** - // * Neighboring tabs: - // * tabs aren't in navigation. so lets first check - // * if we have any sibling tabs to go to thru in props, - // * before we bother looking at the navigation data - // */ - // if (currentTabs) { - // currentTabs.forEach((tab, index) => { - // if (this.titleToSlug(tab) === currentPage) { - // if (currentTabs[index - 1]) { - // prevPagePath = - // `${currentParentPath - // }/${ - // this.titleToSlug(currentTabs[index - 1])}`; - // } - // if (currentTabs[index + 1]) { - // nextPagePath = - // `${currentParentPath - // }/${ - // this.titleToSlug(currentTabs[index + 1])}`; - // } - // } - // }); - // } - - // /** - // * if we have/are in a subnav, we need to - // * find the previous and next siblings in the subnav - // * if the above didn't assign a value to prevPagePath, - // * that means we were either at the first tab, or that there are no tabs on the current page. - // */ - // if ( - // currentHasSubnav && - // (prevPagePath === undefined || nextPagePath === undefined) - // ) { - // const currentSubnavArray = Object.keys( - // navigation[currentSection]['sub-nav'] - // ); - // const currentSubnavIndex = this.getKeyByValue( - // currentSubnavArray, - // currentSubnavItem - // ); - - // if (prevPagePath === undefined && currentSubnavIndex > 0) { - // const prevPathSlugPart = currentSubnavArray[currentSubnavIndex - 1]; - // prevPagePath = `/${currentSection}/${prevPathSlugPart}`; - // // const prevTitle = - // // navigation[currentSection]['sub-nav'][ - // // currentSubnavArray[currentSubnavIndex - 1] - // // ].title; - // } - - // if ( - // nextPagePath === undefined && - // currentSubnavIndex < currentSubnavArray.length - 1 - // ) { - // const nextPathSlugPart = - // currentSubnavArray[parseInt(currentSubnavIndex, 10) + 1]; - // nextPagePath = `/${currentSection}/${nextPathSlugPart}`; - // } - // } - - // /** - // * if still undefined, we need to look in other sections - // */ - // const sectionArray = Object.keys(navigation); - // let currentSectionIndex = this.getKeyByValue(sectionArray, currentSection); - - // if (prevPagePath === undefined) { - // let prevSection = sectionArray[parseInt(currentSectionIndex) - 1]; - // let prevSectionObject = navigation[prevSection]; - // if (GATSBY_CARBON_ENV !== 'internal') { - // while (prevSection && prevSectionObject.internal === true) { - // currentSectionIndex--; - // prevSection = sectionArray[parseInt(currentSectionIndex) - 1]; - // prevSectionObject = navigation[prevSection]; - // } - // } - // if (prevSection) { - // prevPagePath = `${prevSection}`; - // const prevHasSubnav = typeof prevSectionObject['sub-nav'] === 'object'; - // let prevSubnavTarget; - // if (prevHasSubnav) { - // const prevSubnavArray = Object.keys(prevSectionObject['sub-nav']); - // prevSubnavTarget = prevSubnavArray[prevSubnavArray.length - 1]; - // } - // if (prevSubnavTarget !== undefined) { - // prevPagePath += `/${prevSubnavTarget}`; - // } - // } - // } - - // if (nextPagePath === undefined) { - // let nextSection = sectionArray[parseInt(currentSectionIndex) + 1]; - // let nextSectionObject = navigation[nextSection]; - // if (GATSBY_CARBON_ENV !== 'internal') { - // while (nextSection && nextSectionObject.internal === true) { - // currentSectionIndex++; - // nextSection = sectionArray[parseInt(currentSectionIndex) + 1]; - // nextSectionObject = navigation[nextSection]; - // } - // } - // if (nextSection) { - // nextPagePath = `${nextSection}`; - // const nextHasSubnav = typeof nextSectionObject['sub-nav'] === 'object'; - // let nextSubnavTarget; - // if (nextHasSubnav) { - // const nextSubnavArray = Object.keys(nextSectionObject['sub-nav']); - // nextSubnavTarget = nextSubnavArray[0]; - // } - // if (nextSubnavTarget !== undefined) { - // nextPagePath += `/${nextSubnavTarget}`; - // } - // } - // } - - // // TODO: get title properly! - // prevPageTitle = this.slugToTitleWithPath(prevPagePath); - // nextPageTitle = this.slugToTitleWithPath(nextPagePath); - // return ( - //
- //
- //
- // {this.renderNextPreviousLinks( - // prevPagePath, - // prevPageTitle, - // nextPagePath, - // nextPageTitle - // )} - //
- //
- //
- // ); - // } -} + const tabItems = tabs.map(title => { + const slug = slugify(title, { lower: true }); + return { + title, + slug, + currentTab: slug === slugify(currentTitle, { lower: true }), + }; + }); + + const currentTabIndex = tabItems.findIndex(tab => tab.currentTab); + + return { + prevTabItem: tabItems[currentTabIndex - 1], + nextTabItem: tabItems[currentTabIndex + 1], + }; +}; + +const useNavigationItems = ({ tabs, location }) => { + const navigationList = useNavigationList(); + const { pathname } = location; + const currentNavigationItem = tabs + ? pathname.replace(/\/[^/]*\/?$/, '') // removes the last url segment + : pathname.replace(/\/$/, ''); // removes the last slash + + const navIndex = navigationList.findIndex(item => + item.path.includes(currentNavigationItem) + ); + + return { + prevCategory: navigationList[navIndex - 1], + nextCategory: navigationList[navIndex + 1], + navIndex, + }; +}; + +const NextPrevious = props => { + const { tabs, location, pageContext } = props; + const navigationList = useNavigationList(); + + const currentTitle = slugify(pageContext.frontmatter.title, { + lower: true, + }); + + const getName = (category, title) => + category.concat(title ? `: ${title}` : ''); + + const tabItems = getTabItems({ + currentTitle, + tabs, + }); + + const { prevCategory, nextCategory, navIndex } = useNavigationItems({ + location, + tabs, + }); + + const { prevTabItem, nextTabItem } = tabItems; + + const getPreviousItem = () => { + if (prevTabItem) { + return { + to: `${location.pathname.replace(currentTitle, prevTabItem.slug)}`, + name: getName(navigationList[navIndex].title, prevTabItem.title), + }; + } + + if (prevCategory) { + return { + to: prevCategory.path, + name: getName(prevCategory.category, prevCategory.title), + }; + } + + return {}; + }; + + const getNextItem = () => { + if (nextTabItem && nextTabItem.slug) { + return { + to: `${location.pathname.replace(currentTitle, nextTabItem.slug)}`, + name: getName(navigationList[navIndex].title, nextTabItem.title), + }; + } + + if (nextCategory) { + return { + to: nextCategory.path, + name: getName(nextCategory.category, nextCategory.title), + }; + } + return {}; + }; + + const previousItem = getPreviousItem(); + const nextItem = getNextItem(); + + return ( +
+
+ {previousItem.to && ( + +
Previous
+
{previousItem.name}
+ + )} + {nextItem.to && ( + +
Next
+
{nextItem.name}
+ + )} +
+
+ ); +}; + +export default NextPrevious; diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss new file mode 100644 index 000000000..cc0f5e2ef --- /dev/null +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss @@ -0,0 +1,41 @@ +@import '~carbon-components/scss/globals/scss/vars'; +@import '~@carbon/elements/scss/type/styles'; + +.wrapper { + background: $carbon--gray-90; + color: $carbon--white-0; +} + +.link-container { + min-height: rem(128px); + display: flex; +} + +.link { + color: $carbon--white-0; + padding: 1rem; + text-decoration: none; + width: 50%; + transition: 0.07s background ease; + &:hover { + background: $carbon--gray-80; + } +} + +.first-link { + margin-right: auto; +} + +.second-link { + margin-left: auto; +} + +.direction { + @include carbon--type-style('body-short-01'); +} + +.name { + @include carbon--type-style('expressive-heading-03', true); + padding-bottom: 3rem; + max-width: rem(275px); +} diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/next-previous.scss b/packages/gatsby-theme-carbon/src/components/NextPrevious/next-previous.scss deleted file mode 100644 index b2ebfb581..000000000 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/next-previous.scss +++ /dev/null @@ -1,36 +0,0 @@ -.next-previous-wrapper { - background: $carbon--gray-90; - color: $carbon--white-0; - min-height: rem(128px); - position: relative; -} - -.next-previous-wrapper .#{$prefix}--grid, -.next-previous-wrapper .#{$prefix}--row { - min-height: rem(128px); -} - -.next-previous-link { - position: relative; - color: $carbon--white-0; - padding-bottom: 2rem; - padding-top: 1rem; - text-decoration: none; - transition: 0.35s ease all; -} - -.next-previous-link:hover { - background: $carbon--gray-80; - transition: 0.1s ease all; -} - -.target-page-direction { - display: block; - @include carbon--type-style('body-short-01'); -} - -.target-page-name { - @include carbon--type-style('expressive-heading-03', true); - display: block; - max-width: rem(275px); -} diff --git a/packages/gatsby-theme-carbon/src/styles/index.scss b/packages/gatsby-theme-carbon/src/styles/index.scss index c465bdd9c..dfeded696 100644 --- a/packages/gatsby-theme-carbon/src/styles/index.scss +++ b/packages/gatsby-theme-carbon/src/styles/index.scss @@ -49,7 +49,6 @@ $font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; @import '../components/markdown/markdown.scss'; @import '../components/Homepage/homepage.scss'; @import '../components/GlobalSearch/global-search.scss'; -@import '../components/NextPrevious/next-previous.scss'; @import '../components/PageHeader/page-header.scss'; @import '../components/PageTable/page-table.scss'; @import '../components/PageTabs/page-tabs.scss'; diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js index 5b6b82991..ffd38faef 100644 --- a/packages/gatsby-theme-carbon/src/templates/Default.js +++ b/packages/gatsby-theme-carbon/src/templates/Default.js @@ -3,7 +3,7 @@ import { WebsiteBackToTopBtn } from '@carbon/addons-website'; import Layout from '../components/Layout'; import PageHeader from '../components/PageHeader'; // import EditLink from '../components/EditLink'; -// import NextPrevious from '../components/NextPrevious'; +import NextPrevious from '../components/NextPrevious'; import PageTabs from '../components/PageTabs'; import Main from '../components/Main'; @@ -18,7 +18,14 @@ const Default = ({ pathContext, children, location, ...rest }) => { {tabs && }
{children}
- {/* */} + ); diff --git a/packages/gatsby-theme-carbon/src/templates/Homepage.js b/packages/gatsby-theme-carbon/src/templates/Homepage.js index 237e3980d..f61ffa580 100644 --- a/packages/gatsby-theme-carbon/src/templates/Homepage.js +++ b/packages/gatsby-theme-carbon/src/templates/Homepage.js @@ -5,6 +5,8 @@ import { HomepageBanner, HomepageCallout } from '../components/Homepage'; import Light from '../images/blossom.jpg'; import Main from '../components/Main'; +// import NextPrevious from '../components/NextPrevious'; + const Homepage = ({ children, Banner, @@ -17,6 +19,7 @@ const Homepage = ({ {FirstCallout}
{children}
{SecondCallout} + {/* */} ); From c51cf214d98a7850d9d4993656b5b14e63f4fb3d Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 08:52:40 -0500 Subject: [PATCH 2/9] fix: update components page path --- packages/example/src/data/nav-items.yaml | 14 +++++++------- .../ArticleCard.mdx | 0 .../{component-examples => components}/Aside.mdx | 0 .../Caption.mdx | 0 .../DoDontExample.mdx | 0 .../ImageComponent.mdx | 0 .../ResourceCard.mdx | 0 .../{component-examples => components}/demo.mdx | 0 .../images/Article_05.png | Bin .../images/Light_theme_01.png | Bin .../images/Light_theme_02.png | Bin .../images/github-icon.png | Bin .../images/sketch-icon.png | Bin 13 files changed, 7 insertions(+), 7 deletions(-) rename packages/example/src/pages/{component-examples => components}/ArticleCard.mdx (100%) rename packages/example/src/pages/{component-examples => components}/Aside.mdx (100%) rename packages/example/src/pages/{component-examples => components}/Caption.mdx (100%) rename packages/example/src/pages/{component-examples => components}/DoDontExample.mdx (100%) rename packages/example/src/pages/{component-examples => components}/ImageComponent.mdx (100%) rename packages/example/src/pages/{component-examples => components}/ResourceCard.mdx (100%) rename packages/example/src/pages/{component-examples => components}/demo.mdx (100%) rename packages/example/src/pages/{component-examples => components}/images/Article_05.png (100%) rename packages/example/src/pages/{component-examples => components}/images/Light_theme_01.png (100%) rename packages/example/src/pages/{component-examples => components}/images/Light_theme_02.png (100%) rename packages/example/src/pages/{component-examples => components}/images/github-icon.png (100%) rename packages/example/src/pages/{component-examples => components}/images/sketch-icon.png (100%) diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml index 242ea0ed0..0e53a2833 100644 --- a/packages/example/src/data/nav-items.yaml +++ b/packages/example/src/data/nav-items.yaml @@ -1,19 +1,19 @@ - title: Components pages: - title: Demo - path: /component-examples/demo + path: /components/demo - title: DoDontExample - path: /component-examples/DoDontExample + path: /components/DoDontExample - title: Caption - path: /component-examples/Caption + path: /components/Caption - title: Aside - path: /component-examples/Aside + path: /components/Aside - title: ResourceCard - path: /component-examples/ResourceCard + path: /components/ResourceCard - title: ArticleCard - path: /component-examples/ArticleCard + path: /components/ArticleCard # - title: ImageComponent - # path: /component-examples/ImageComponent + # path: /components/ImageComponent - title: Contributing pages: - title: Agreement diff --git a/packages/example/src/pages/component-examples/ArticleCard.mdx b/packages/example/src/pages/components/ArticleCard.mdx similarity index 100% rename from packages/example/src/pages/component-examples/ArticleCard.mdx rename to packages/example/src/pages/components/ArticleCard.mdx diff --git a/packages/example/src/pages/component-examples/Aside.mdx b/packages/example/src/pages/components/Aside.mdx similarity index 100% rename from packages/example/src/pages/component-examples/Aside.mdx rename to packages/example/src/pages/components/Aside.mdx diff --git a/packages/example/src/pages/component-examples/Caption.mdx b/packages/example/src/pages/components/Caption.mdx similarity index 100% rename from packages/example/src/pages/component-examples/Caption.mdx rename to packages/example/src/pages/components/Caption.mdx diff --git a/packages/example/src/pages/component-examples/DoDontExample.mdx b/packages/example/src/pages/components/DoDontExample.mdx similarity index 100% rename from packages/example/src/pages/component-examples/DoDontExample.mdx rename to packages/example/src/pages/components/DoDontExample.mdx diff --git a/packages/example/src/pages/component-examples/ImageComponent.mdx b/packages/example/src/pages/components/ImageComponent.mdx similarity index 100% rename from packages/example/src/pages/component-examples/ImageComponent.mdx rename to packages/example/src/pages/components/ImageComponent.mdx diff --git a/packages/example/src/pages/component-examples/ResourceCard.mdx b/packages/example/src/pages/components/ResourceCard.mdx similarity index 100% rename from packages/example/src/pages/component-examples/ResourceCard.mdx rename to packages/example/src/pages/components/ResourceCard.mdx diff --git a/packages/example/src/pages/component-examples/demo.mdx b/packages/example/src/pages/components/demo.mdx similarity index 100% rename from packages/example/src/pages/component-examples/demo.mdx rename to packages/example/src/pages/components/demo.mdx diff --git a/packages/example/src/pages/component-examples/images/Article_05.png b/packages/example/src/pages/components/images/Article_05.png similarity index 100% rename from packages/example/src/pages/component-examples/images/Article_05.png rename to packages/example/src/pages/components/images/Article_05.png diff --git a/packages/example/src/pages/component-examples/images/Light_theme_01.png b/packages/example/src/pages/components/images/Light_theme_01.png similarity index 100% rename from packages/example/src/pages/component-examples/images/Light_theme_01.png rename to packages/example/src/pages/components/images/Light_theme_01.png diff --git a/packages/example/src/pages/component-examples/images/Light_theme_02.png b/packages/example/src/pages/components/images/Light_theme_02.png similarity index 100% rename from packages/example/src/pages/component-examples/images/Light_theme_02.png rename to packages/example/src/pages/components/images/Light_theme_02.png diff --git a/packages/example/src/pages/component-examples/images/github-icon.png b/packages/example/src/pages/components/images/github-icon.png similarity index 100% rename from packages/example/src/pages/component-examples/images/github-icon.png rename to packages/example/src/pages/components/images/github-icon.png diff --git a/packages/example/src/pages/component-examples/images/sketch-icon.png b/packages/example/src/pages/components/images/sketch-icon.png similarity index 100% rename from packages/example/src/pages/component-examples/images/sketch-icon.png rename to packages/example/src/pages/components/images/sketch-icon.png From 21dd8fe2ec73f319c1a7c5120534e682c4e1448c Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 09:46:48 -0500 Subject: [PATCH 3/9] chore: add next/prev to homepaeg --- .../components/NextPrevious/NextPrevious.js | 35 +++++++++++++++---- .../NextPrevious/NextPrevious.module.scss | 23 ++++++------ .../src/templates/Default.js | 7 ++-- .../src/templates/Homepage.js | 7 ++-- 4 files changed, 49 insertions(+), 23 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js index f79d7cc18..e310128c5 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js @@ -80,13 +80,20 @@ const useNavigationItems = ({ tabs, location }) => { }; }; +const getTitle = pageContext => { + if (!pageContext.frontmatter.title) { + return 'Home'; + } + return slugify(pageContext.frontmatter.title, { + lower: true, + }); +}; + const NextPrevious = props => { - const { tabs, location, pageContext } = props; + const { tabs, location, pageContext = { frontmatter: 'Home' } } = props; const navigationList = useNavigationList(); - const currentTitle = slugify(pageContext.frontmatter.title, { - lower: true, - }); + const currentTitle = getTitle(pageContext); const getName = (category, title) => category.concat(title ? `: ${title}` : ''); @@ -118,10 +125,25 @@ const NextPrevious = props => { }; } - return {}; + return currentTitle === 'Home' + ? {} + : { + to: '/', + name: 'Home', + }; }; const getNextItem = () => { + if (currentTitle === 'Home') { + return { + to: navigationList[navIndex].path, + name: getName( + navigationList[navIndex].category, + navigationList[navIndex].title + ), + }; + } + if (nextTabItem && nextTabItem.slug) { return { to: `${location.pathname.replace(currentTitle, nextTabItem.slug)}`, @@ -135,7 +157,8 @@ const NextPrevious = props => { name: getName(nextCategory.category, nextCategory.title), }; } - return {}; + + return {}; // final page }; const previousItem = getPreviousItem(); 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 cc0f5e2ef..ecf555cc8 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss @@ -9,16 +9,15 @@ .link-container { min-height: rem(128px); display: flex; -} - -.link { - color: $carbon--white-0; - padding: 1rem; - text-decoration: none; - width: 50%; - transition: 0.07s background ease; - &:hover { - background: $carbon--gray-80; + .link { + color: $carbon--white-0; + padding: 1rem; + text-decoration: none; + width: 50%; + transition: 0.07s background ease; + &:hover { + background: $carbon--gray-80; + } } } @@ -39,3 +38,7 @@ padding-bottom: 3rem; max-width: rem(275px); } + +.home { + color: $inverse-01; +} diff --git a/packages/gatsby-theme-carbon/src/templates/Default.js b/packages/gatsby-theme-carbon/src/templates/Default.js index ffd38faef..b598223bb 100644 --- a/packages/gatsby-theme-carbon/src/templates/Default.js +++ b/packages/gatsby-theme-carbon/src/templates/Default.js @@ -7,8 +7,8 @@ import NextPrevious from '../components/NextPrevious'; import PageTabs from '../components/PageTabs'; import Main from '../components/Main'; -const Default = ({ pathContext, children, location, ...rest }) => { - const { frontmatter = {} } = pathContext; +const Default = ({ pageContext, children, location }) => { + const { frontmatter = {} } = pageContext; const { tabs, title } = frontmatter; const slug = location.pathname; const currentTab = slug.split('/').slice(-1)[0]; @@ -19,12 +19,11 @@ const Default = ({ pathContext, children, location, ...rest }) => {
{children}
diff --git a/packages/gatsby-theme-carbon/src/templates/Homepage.js b/packages/gatsby-theme-carbon/src/templates/Homepage.js index f61ffa580..730df627a 100644 --- a/packages/gatsby-theme-carbon/src/templates/Homepage.js +++ b/packages/gatsby-theme-carbon/src/templates/Homepage.js @@ -5,21 +5,22 @@ import { HomepageBanner, HomepageCallout } from '../components/Homepage'; import Light from '../images/blossom.jpg'; import Main from '../components/Main'; -// import NextPrevious from '../components/NextPrevious'; +import NextPrevious from '../components/NextPrevious'; const Homepage = ({ children, Banner, FirstCallout, SecondCallout, - ...rest + location, + pageContext, }) => ( {Banner} {FirstCallout}
{children}
{SecondCallout} - {/* */} + ); From fec7b1440ff9a733756c9b2518c02dc8394b8cc4 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 10:03:56 -0500 Subject: [PATCH 4/9] chore: separate nextprev into presentational and data components --- .../components/NextPrevious/NextPrevious.js | 48 ++++--------------- .../NextPrevious/NextPreviousStyles.js | 34 +++++++++++++ 2 files changed, 43 insertions(+), 39 deletions(-) create mode 100644 packages/gatsby-theme-carbon/src/components/NextPrevious/NextPreviousStyles.js diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js index e310128c5..41abe4e3c 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.js @@ -1,17 +1,8 @@ import React from 'react'; -import { Link, useStaticQuery, graphql } from 'gatsby'; +import { useStaticQuery, graphql } from 'gatsby'; import slugify from 'slugify'; -import cx from 'classnames'; - -import { - wrapper, - link, - direction, - name, - firstLink, - secondLink, - linkContainer, -} from './NextPrevious.module.scss'; + +import NextPrevious from './NextPreviousStyles'; const useNavigationList = () => { const { @@ -89,16 +80,14 @@ const getTitle = pageContext => { }); }; -const NextPrevious = props => { +const getName = (category, title) => category.concat(title ? `: ${title}` : ''); + +const NextPreviousContainer = props => { const { tabs, location, pageContext = { frontmatter: 'Home' } } = props; const navigationList = useNavigationList(); - const currentTitle = getTitle(pageContext); - const getName = (category, title) => - category.concat(title ? `: ${title}` : ''); - - const tabItems = getTabItems({ + const { prevTabItem, nextTabItem } = getTabItems({ currentTitle, tabs, }); @@ -108,8 +97,6 @@ const NextPrevious = props => { tabs, }); - const { prevTabItem, nextTabItem } = tabItems; - const getPreviousItem = () => { if (prevTabItem) { return { @@ -164,24 +151,7 @@ const NextPrevious = props => { const previousItem = getPreviousItem(); const nextItem = getNextItem(); - return ( -
-
- {previousItem.to && ( - -
Previous
-
{previousItem.name}
- - )} - {nextItem.to && ( - -
Next
-
{nextItem.name}
- - )} -
-
- ); + return ; }; -export default NextPrevious; +export default NextPreviousContainer; diff --git a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPreviousStyles.js b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPreviousStyles.js new file mode 100644 index 000000000..6278d317a --- /dev/null +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPreviousStyles.js @@ -0,0 +1,34 @@ +import React from 'react'; +import { Link } from 'gatsby'; +import cx from 'classnames'; + +import { + wrapper, + link, + direction, + name, + firstLink, + secondLink, + linkContainer, +} from './NextPrevious.module.scss'; + +const NextPreviousContainer = ({ previousItem, nextItem }) => ( +
+
+ {previousItem.to && ( + +
Previous
+
{previousItem.name}
+ + )} + {nextItem.to && ( + +
Next
+
{nextItem.name}
+ + )} +
+
+); + +export default NextPreviousContainer; From 7095060e48cd3798a9cb030976540e6f0c780be2 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 10:34:21 -0500 Subject: [PATCH 5/9] fix: use new url --- packages/example/src/data/nav-items.yaml | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/example/src/data/nav-items.yaml b/packages/example/src/data/nav-items.yaml index 8983d2ccd..d0a87e388 100644 --- a/packages/example/src/data/nav-items.yaml +++ b/packages/example/src/data/nav-items.yaml @@ -1,7 +1,7 @@ - title: Components pages: - title: Markdown - path: /component-examples/markdown + path: /components/markdown - title: Demo path: /components/demo - title: DoDontExample @@ -14,8 +14,6 @@ path: /components/ResourceCard - title: ArticleCard path: /components/ArticleCard - # - title: ImageComponent - # path: /components/ImageComponent - title: Contributing pages: - title: Agreement From c60623b0758cb1fdbc8238da0613ac9d9d22b686 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 13:08:18 -0500 Subject: [PATCH 6/9] fix: adjust animation timing and nesting --- .../NextPrevious/NextPrevious.module.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) 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 ecf555cc8..30d71e4c3 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss @@ -9,15 +9,16 @@ .link-container { min-height: rem(128px); display: flex; - .link { - color: $carbon--white-0; - padding: 1rem; - text-decoration: none; - width: 50%; - transition: 0.07s background ease; - &:hover { - background: $carbon--gray-80; - } +} + +.link-container .link { + color: $carbon--white-0; + padding: 1rem; + text-decoration: none; + width: 50%; + transition: background $duration--moderate-02 $carbon--standard-easing; + &:hover { + background: $carbon--gray-80; } } From a6c26a0d2cc3b14427ec1042d547d73d206635c8 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 13:58:26 -0500 Subject: [PATCH 7/9] fix: adjust padding to match carbon --- .../src/components/NextPrevious/NextPrevious.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 30d71e4c3..d5b36e206 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss @@ -36,7 +36,7 @@ .name { @include carbon--type-style('expressive-heading-03', true); - padding-bottom: 3rem; + padding-bottom: 2rem; max-width: rem(275px); } From 8f8ef16150e35fc57ff0a47d8ffc8708007cd39e Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 15:17:15 -0500 Subject: [PATCH 8/9] fix: use spacing tokens and add fluid type --- .../components/NextPrevious/NextPrevious.module.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) 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 d5b36e206..d33d74736 100644 --- a/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss +++ b/packages/gatsby-theme-carbon/src/components/NextPrevious/NextPrevious.module.scss @@ -1,14 +1,15 @@ @import '~carbon-components/scss/globals/scss/vars'; -@import '~@carbon/elements/scss/type/styles'; +@import '~@carbon/elements/scss/type/type'; .wrapper { background: $carbon--gray-90; color: $carbon--white-0; } -.link-container { - min-height: rem(128px); +.wrapper .link-container { + height: 8rem; display: flex; + max-width: 99rem; } .link-container .link { @@ -36,8 +37,8 @@ .name { @include carbon--type-style('expressive-heading-03', true); - padding-bottom: 2rem; - max-width: rem(275px); + padding-bottom: $spacing-05; + max-width: 17rem; } .home { From bf9bd6a8c85fbcadf21932ed2ee02f65260a98f4 Mon Sep 17 00:00:00 2001 From: Vince Picone Date: Fri, 10 May 2019 15:17:34 -0500 Subject: [PATCH 9/9] fix: use spacing token and nudge anchor --- .../src/components/AutolinkHeader/AutolinkHeader.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss b/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss index 86fb9d281..d7fba606a 100644 --- a/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss +++ b/packages/gatsby-theme-carbon/src/components/AutolinkHeader/AutolinkHeader.module.scss @@ -13,8 +13,8 @@ opacity: 0; transition: opacity $duration--fast-01 $carbon--standard-easing; position: absolute; - left: -0.75rem; - top: 0px; + left: -$spacing-06; + top: 0; &:hover, &:active { opacity: 1;