gatsby-theme-carbon 2.0.0-next.1 → 2.0.0

package/gatsby-config.js

@@ -33,6 +33,7 @@ module.exports = (themeOptions) => {
     remarkPlugins = [],
     gatsbyPluginSharpOptions = {},
     isServiceWorkerEnabled = false,
+    isSwitcherEnabled = true,
   } = themeOptions;
 
   const theme = { ...defaultTheme, ...themeOption };
@@ -78,6 +79,7 @@ module.exports = (themeOptions) => {
       homepageTheme: theme.homepage,
       interiorTheme: theme.interior,
       isServiceWorkerEnabled,
+      isSwitcherEnabled,
       title: 'Gatsby Theme Carbon',
       description:
         'Add a description by supplying it to siteMetadata in your gatsby-config.js file.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "2.0.0-next.1",
+  "version": "2.0.0",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {
@@ -22,47 +22,47 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@babel/core": "^7.13.16",
-    "@carbon/elements": "^10.32.0",
-    "@carbon/icons-react": "^10.30.0",
-    "@carbon/themes": "^10.32.0",
+    "@babel/core": "^7.14.6",
+    "@carbon/elements": "^10.38.0",
+    "@carbon/icons-react": "^10.35.0",
+    "@carbon/themes": "^10.38.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@reach/router": "^1.2.1",
     "@vimeo/player": "^2.9.1",
     "beautiful-react-hooks": "^0.23.1",
-    "carbon-components": "^10.33.0",
-    "carbon-components-react": "^7.33.0",
+    "carbon-components": "^10.39.0",
+    "carbon-components-react": "^7.39.0",
     "carbon-icons": "^7.0.7",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
     "focus-trap-react": "^8.4.2",
-    "gatsby-plugin-catch-links": "^3.3.0",
+    "gatsby-plugin-catch-links": "^3.7.1",
     "gatsby-plugin-lunr": "^1.5.2",
-    "gatsby-plugin-manifest": "^3.3.0",
-    "gatsby-plugin-mdx": "^2.3.0",
-    "gatsby-plugin-offline": "^4.3.0",
-    "gatsby-plugin-react-helmet": "^4.3.0",
-    "gatsby-plugin-sass": "^4.3.0",
+    "gatsby-plugin-manifest": "^3.7.1",
+    "gatsby-plugin-mdx": "^2.7.1",
+    "gatsby-plugin-offline": "^4.7.1",
+    "gatsby-plugin-react-helmet": "^4.7.1",
+    "gatsby-plugin-sass": "^4.7.1",
     "gatsby-plugin-sass-resources": "^2.0.0",
-    "gatsby-plugin-sharp": "^3.3.1",
+    "gatsby-plugin-sharp": "^3.7.1",
     "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.22",
-    "gatsby-remark-copy-linked-files": "^4.0.0",
-    "gatsby-remark-images": "^5.0.0",
-    "gatsby-remark-responsive-iframe": "^4.0.0",
-    "gatsby-remark-smartypants": "^4.0.0",
+    "gatsby-remark-copy-linked-files": "^4.4.1",
+    "gatsby-remark-images": "^5.4.1",
+    "gatsby-remark-responsive-iframe": "^4.4.1",
+    "gatsby-remark-smartypants": "^4.4.1",
     "gatsby-remark-unwrap-images": "^1.0.1",
-    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-source-filesystem": "^3.7.1",
     "gatsby-source-medium-feed": "^1.0.6",
-    "gatsby-transformer-yaml": "^3.3.0",
+    "gatsby-transformer-yaml": "^3.7.1",
     "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "mkdirp": "^1.0.3",
-    "node-sass": "^4.11.0",
-    "prism-react-renderer": "^1.0.2",
+    "node-sass": "5",
+    "prism-react-renderer": "^1.2.1",
     "prop-types": "^15.7.2",
     "react-helmet": "^6.0.0-beta",
-    "react-transition-group": "^4.3.0",
+    "react-transition-group": "^4.4.2",
     "react-use": "^15.3.4",
     "remark-slug": "^6.0.0",
     "slugify": "^1.3.4",

package/src/components/FourOhFour/FourOhFour.module.scss

@@ -43,6 +43,10 @@
   }
 }
 
+:global(.container--dark) .link {
+  color: $carbon--gray-10;
+}
+
 .paragraph {
   @include carbon--type-style('body-long-01');
   font-size: 1.25rem;

package/src/components/Header/Header.js

@@ -23,8 +23,9 @@ const Header = ({ children }) => {
     toggleNavState,
     switcherIsOpen,
     searchIsOpen,
+    switcherTooltipText = 'Switch sites',
   } = useContext(NavContext);
-  const { isSearchEnabled, navigationStyle } = useMetadata();
+  const { isSearchEnabled, navigationStyle, isSwitcherEnabled } = useMetadata();
 
   return (
     <ShellHeader
@@ -54,19 +55,21 @@ const Header = ({ children }) => {
       <HeaderGlobalBar
         className={cx({ [styles.searchIsOpenOnBar]: searchIsOpen })}>
         {isSearchEnabled && <GlobalSearch />}
-        <HeaderGlobalAction
-          className={cx(styles.headerButton, styles.switcherButton, {
-            [styles.switcherButtonOpen]: switcherIsOpen,
-          })}
-          aria-label="App switcher"
-          tooltipAlignment="end"
-          onClick={() => {
-            toggleNavState('switcherIsOpen');
-            toggleNavState('searchIsOpen', 'close');
-            toggleNavState('leftNavIsOpen', 'close');
-          }}>
-          {switcherIsOpen ? <Close20 /> : <Switcher20 />}
-        </HeaderGlobalAction>
+        {isSwitcherEnabled && (
+          <HeaderGlobalAction
+            className={cx(styles.headerButton, styles.switcherButton, {
+              [styles.switcherButtonOpen]: switcherIsOpen,
+            })}
+            aria-label={switcherTooltipText}
+            tooltipAlignment="end"
+            onClick={() => {
+              toggleNavState('switcherIsOpen');
+              toggleNavState('searchIsOpen', 'close');
+              toggleNavState('leftNavIsOpen', 'close');
+            }}>
+            {switcherIsOpen ? <Close20 /> : <Switcher20 />}
+          </HeaderGlobalAction>
+        )}
       </HeaderGlobalBar>
     </ShellHeader>
   );

package/src/components/Layout.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-unresolved */
-import React, { useLayoutEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import Meta from './Meta';
 import LeftNav from './LeftNav';
@@ -7,6 +7,7 @@ import Header from './Header';
 import Switcher from './Switcher';
 import Footer from './Footer';
 import Container from './Container';
+import useMetadata from '../util/hooks/useMetadata';
 
 import '../styles/index.scss';
 
@@ -21,8 +22,9 @@ const Layout = ({
   tabs,
 }) => {
   const is404 = children.key === null;
+  const { isSwitcherEnabled } = useMetadata();
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     // eslint-disable-next-line global-require
     const scroll = require('smooth-scroll')('a[href*="#"]', {
       speed: 400,
@@ -43,8 +45,8 @@ const Layout = ({
         pageDescription={pageDescription}
         pageKeywords={pageKeywords}
       />
-      <Header />
-      <Switcher />
+      <Header isSwitcherEnabled={isSwitcherEnabled} />
+      {isSwitcherEnabled && <Switcher />}
       <LeftNav homepage={homepage} is404Page={is404} theme={theme} />
       <Container homepage={homepage} theme={theme}>
         {children}

package/src/components/PageTabs/PageTabs.module.scss

@@ -3,7 +3,7 @@
   width: 100%;
   background: $carbon--black-100;
   position: sticky;
-  top: 3rem;
+  top: calc(3rem - 1px);
   z-index: 6000; /* old z('header') #940 */
 }
 

package/src/components/Switcher/Switcher.js

@@ -1,10 +1,4 @@
-import React, {
-  useContext,
-  useRef,
-  useLayoutEffect,
-  useEffect,
-  useState,
-} from 'react';
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import cx from 'classnames';
 import useMedia from 'use-media';
 import { Locked16 } from '@carbon/icons-react';
@@ -32,7 +26,7 @@ const Switcher = ({ children }) => {
   }, [toggleNavState]);
 
   // calculate and update height
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (switcherIsOpen) {
       setHeight(listRef.current.offsetHeight + 40);
     } else {
@@ -102,7 +96,7 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.carbondesignsystem.com/">
       Carbon Design System
     </SwitcherLink>
-    <SwitcherLink href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/">
+    <SwitcherLink href="https://www.ibm.com/standards/carbon/">
       Carbon for IBM.com
     </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/design/event/">

package/src/components/Tabs/Tabs.js

@@ -31,12 +31,11 @@ const Select = ({ children, _id }) => {
     index,
   }));
   return (
-    <div style={{ marginLeft: '-1rem', marginRight: '-1rem' }}>
+    <div className={styles.dropdownWrapper}>
       <Dropdown
         size="xl"
         onChange={({ selectedItem }) => setActiveTab(selectedItem.index)}
         initialSelectedItem={items[0]}
-        light
         label="tab selection"
         items={items}
         id={_id}

package/src/components/Tabs/Tabs.module.scss

@@ -11,6 +11,11 @@
   }
 }
 
+.dropdownWrapper {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
 .panel {
   --space: 0;
   color: $text-01;

package/src/util/hooks/useId.js

@@ -5,6 +5,10 @@ let globalIndex = 0;
 // eslint-disable-next-line no-plusplus
 const genId = () => ++globalIndex;
 
+// https://medium.com/@alexandereardon/uselayouteffect-and-ssr-192986cdcf7a
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
 export const useId = (label) => {
   /*
    * If this instance isn't part of the initial render, we don't have to do the
@@ -14,7 +18,7 @@ export const useId = (label) => {
 
   const [id, setId] = useState(initialId);
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (id === null) {
       /*
        * Patch the ID after render. We do this in `useLayoutEffect` to avoid any

package/src/util/hooks/useMetadata.js

@@ -9,6 +9,7 @@ const useMetadata = () => {
           description
           keywords
           isSearchEnabled
+          isSwitcherEnabled
           homepageTheme
           interiorTheme
           navigationStyle