Merge branch 'master' of github.com:carbon-design-system/gatsby-theme…

…-carbon

lerna.json

@@ -1,6 +1,6 @@
 {
   "packages": ["packages/*"],
-  "version": "1.24.3",
+  "version": "1.24.4",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "publish": {

packages/example/package.json

@@ -1,7 +1,7 @@
 {
   "name": "example",
   "private": true,
-  "version": "1.24.3",
+  "version": "1.24.4",
   "license": "Apache 2.0",
   "scripts": {
     "develop": "gatsby develop -H 0.0.0.0",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "gatsby": "^2.20.4",
-    "gatsby-theme-carbon": "^1.24.3",
+    "gatsby-theme-carbon": "^1.24.4",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   }

packages/example/src/gatsby-theme-carbon/templates/Homepage.module.scss

@@ -1,5 +1,6 @@
 .callout-link {
   @include carbon--type-style("body-long-02");
-  margin-top: $spacing-06;
-  display: block;
+  display: table-cell; // like display block, but the width fits to content rather than 100%
+  position: relative;
+  top: $spacing-06; //margin-top doesn't work on table-cell, and padding-top looks weird on focus
 }

packages/gatsby-theme-carbon/gatsby-config.js

@@ -21,6 +21,7 @@ module.exports = (themeOptions) => {
     mediumAccount = '',
     gatsbyRemarkPlugins = [],
     remarkPlugins = [],
+    gatsbyPluginSharpOptions = {},
   } = themeOptions;
 
   const optionalPlugins = [];
@@ -46,6 +47,7 @@ module.exports = (themeOptions) => {
         quality: imageQuality,
         withWebp,
         pngCompressionSpeed,
+        ...gatsbyPluginSharpOptions,
       },
     },
     { resolve: `gatsby-remark-responsive-iframe` },

packages/gatsby-theme-carbon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "1.24.3",
+  "version": "1.24.4",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {

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

@@ -114,6 +114,11 @@
   &:hover {
     background-color: $inverse-02;
   }
+
+  &:focus {
+    outline: 2px solid $focus;
+    outline-offset: -2px;
+  }
 }
 
 .show-more-button span {
@@ -149,6 +154,7 @@
   align-items: center;
   background: transparent;
   transition: background $duration--fast-02;
+  outline-offset: -2px;
   z-index: 1000;
   &:hover {
     background-color: $inverse-02;

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

@@ -50,6 +50,9 @@ const Container = ({ children, homepage, theme }) => {
       />
       <main
         id="main-content"
+        role="presentation" // needed for jsx-a11y/no-noninteractive-element-interactions
+        onClick={closeNavs}
+        onKeyPress={closeNavs}
         aria-hidden={overlayVisible}
         className={containerClassNames}
       >

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

@@ -59,7 +59,6 @@
   @include carbon--type-style("body-long-01");
   color: $carbon--gray-10 !important; //needed to get the color correct on the homepage, we are setting all homepage links to a light blue in the homepage sass file.
   text-decoration: none;
-  outline: none;
   transition: $duration--fast-01 motion(standard, productive);
 
   &:hover {

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

@@ -11,9 +11,12 @@ import LeftNavWrapper from './LeftNavWrapper';
 import { sideNavDark } from './LeftNav.module.scss';
 
 const LeftNav = (props) => {
-  const { leftNavIsOpen, leftNavScrollTop, setLeftNavScrollTop } = useContext(
-    NavContext
-  );
+  const {
+    leftNavIsOpen,
+    leftNavScrollTop,
+    setLeftNavScrollTop,
+    toggleNavState,
+  } = useContext(NavContext);
 
   const sideNavRef = useRef();
   const sideNavListRef = useRef();
@@ -36,9 +39,17 @@ const LeftNav = (props) => {
 
   const navItems = useNavItems();
 
+  const closeSwitcher = () => {
+    toggleNavState('switcherIsOpen', 'close');
+  };
+
   // TODO: replace old addon website styles with sass modules, move to wrapper
   return (
-    <LeftNavWrapper expanded={leftNavIsOpen}>
+    <LeftNavWrapper
+      expanded={leftNavIsOpen}
+      onClick={closeSwitcher}
+      onKeyPress={closeSwitcher}
+    >
       <SideNav
         ref={sideNavRef}
         expanded

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

@@ -27,6 +27,7 @@
   display: block;
   height: 100%;
   color: $carbon--white-0;
+  outline-offset: -2px; //needed for focus state to be visible
 }
 
 .direction {

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

@@ -30,7 +30,9 @@
   white-space: nowrap;
   border-top: 3px solid transparent; // 3px accessibility minimum
   height: 3rem;
-  transition: all $duration--moderate-01 $carbon--standard-easing;
+  outline-offset: -2px; // needed for focus state to be visible
+  transition: background $duration--moderate-01 $carbon--standard-easing,
+    border-top $duration--moderate-01 $carbon--standard-easing; //transitioning all creates a bug on focus bc of outline transition
 
   @include carbon--breakpoint("md") {
     padding-right: $spacing-09;

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

@@ -1,19 +1,35 @@
-import React, { useContext } from 'react';
+import React, { useContext, useRef, useEffect, useState } from 'react';
 import cx from 'classnames';
+import useMedia from 'use-media';
 import NavContext from '../../util/context/NavContext';
 import { nav, open, divider, link, linkDisabled } from './Switcher.module.scss';
 
 const Switcher = ({ children }) => {
+  const lgBreakpoint = useMedia('min-width: 1056px');
   const { switcherIsOpen } = useContext(NavContext);
+  const listRef = useRef(null);
+  const [height, setHeight] = useState(null);
+
+  // calculate and update height
+  useEffect(() => {
+    if (switcherIsOpen) {
+      setHeight(listRef.current.offsetHeight + 40);
+    } else {
+      setHeight(0);
+    }
+  }, [listRef, switcherIsOpen]);
+
+  const maxHeight = !lgBreakpoint && switcherIsOpen ? '100%' : `${height}px`;
 
   return (
     <nav
       className={cx(nav, { [open]: switcherIsOpen })}
       aria-label="IBM Design ecosystem navigation"
       aria-expanded={switcherIsOpen}
       tabIndex="-1"
+      style={{ maxHeight }}
     >
-      <ul>{children}</ul>
+      <ul ref={listRef}>{children}</ul>
     </nav>
   );
 };
@@ -33,13 +49,14 @@ export const SwitcherLink = ({
   const href = disabled || !hrefProp ? undefined : hrefProp;
   const className = disabled ? linkDisabled : link;
   const { switcherIsOpen } = useContext(NavContext);
+  const openTabIndex = disabled ? '-1' : 0;
 
   return (
     <li>
       <a
         aria-disabled={disabled}
         role="button"
-        tabIndex={switcherIsOpen ? 0 : '-1'}
+        tabIndex={switcherIsOpen ? openTabIndex : '-1'}
         className={className}
         href={href}
         {...rest}

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

@@ -13,7 +13,6 @@
   transition: all $duration--fast-02 carbon--motion("exit");
   @include carbon--breakpoint("lg") {
     transform: translateX(0);
-    max-height: 0;
     height: auto;
   }
 }
@@ -33,10 +32,6 @@
   border-bottom: 1px solid $inverse-02;
   box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.2);
   @include carbon--breakpoint("lg") {
-    // https://css-tricks.com/using-css-transitions-auto-dimensions/
-    // Tied to the height of the app switcher. Allows for animating up to auto.
-    // Matching the height exactly is imperitive to keep the correct animation timing.
-    max-height: 538px;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5); // header__menu shadow
   }
 }

packages/gatsby-theme-carbon/src/styles/internal/_global.scss

@@ -45,6 +45,11 @@ body {
   border: 0;
 }
 
+// Global links
+a:focus {
+  outline: 2px solid $focus;
+}
+
 //---------------------------------------
 // CSS reset overrides
 //---------------------------------------