fix: mono, make switcher more tabbable

carbon-design-system · Jul 9, 2019 · 71e4d76 · 71e4d76
1 parent 2efe5d0
commit 71e4d76
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 39 deletions.
diff --git a/packages/example/src/gatsby-theme-carbon/templates/Homepage.js b/packages/example/src/gatsby-theme-carbon/templates/Homepage.js
@@ -6,46 +6,34 @@ import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
 
 import Carbon from '../../images/carbon.jpg';
 
-const FirstLeftText = () => (
-  <p>
-    Think → <strong>Guidance</strong>
-  </p>
-);
+const FirstLeftText = () => <p>Callout #1</p>;
 
 const FirstRightText = () => (
   <p>
-    <strong>Build Bonds</strong>
+    This is a callout component. You can edit the contents by updating the
+    pre-shadowed homepage template. You can provide a color and backgroundColor
+    props to suit your theme.
     <br />
-    This is the guiding ethos behind IBM’s design philosophy and principles.
-    This helps us distinguish every element and every experience Designed by
-    IBM.
+    <a href="https://github.com/carbon-design-system/gatsby-theme-carbon/blob/master/packages/example/src/gatsby-theme-carbon/templates/Homepage.js">
+      Homepage source →
+    </a>
   </p>
 );
 
-const SecondLeftText = () => <p>Wondering how to contribute?</p>;
+const SecondLeftText = () => <p>Callout #2</p>;
 
 const SecondRightText = () => (
   <p>
-    We welcome all feedback, designs, or ideas in order to produce the best
-    possible experience for our users. If you’re interested in contributing,
-    check out our contributing guidelines to get started.
+    You can also not use these components at all by not providing the callout
+    props to the template or writing your own template.
     <br />
-    <a
-      css={({ typeStyles }) => typeStyles.bodyShort02}
-      href="https://www.carbondesignsystem.com/contributing/governance"
-    >
-      Start Contributing →
+    <a href="https://github.com/carbon-design-system/gatsby-theme-carbon/blob/master/packages/example/src/gatsby-theme-carbon/templates/Homepage.js">
+      Homepage source →
     </a>
   </p>
 );
 
-const BannerText = () => (
-  <h1>
-    Carbon
-    <br />
-    Design System
-  </h1>
-);
+const BannerText = () => <h1>Banner component</h1>;
 
 const customProps = {
   Banner: <HomepageBanner renderText={BannerText} image={Carbon} />,

diff --git a/packages/example/src/pages/index.mdx b/packages/example/src/pages/index.mdx
@@ -3,3 +3,9 @@ import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
 export default HomepageTemplate;
 
 ## Content starts here
+
+<PageDescription>
+
+The homepage content here lives in `src/pages/index.mdx`. Just like the other mdx pages, you can use all of our theme components here without importing them.
+
+</PageDescription>
diff --git a/packages/gatsby-theme-carbon/src/components/Code/_code.scss b/packages/gatsby-theme-carbon/src/components/Code/_code.scss
@@ -1,6 +1,7 @@
 // Inline code
 code {
-  font-family: $font-family-mono;
+  font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono',
+    'Bitstream Vera Sans Mono', Courier, monospace;
 }
 
 p > code,

diff --git a/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss b/packages/gatsby-theme-carbon/src/components/Homepage/homepage.scss
@@ -1,9 +1,14 @@
 .container--homepage {
   background: $carbon--gray-100;
   color: $carbon--white-0;
+}
 
-  a {
-    color: $carbon--blue-40;
+.container--homepage a {
+  color: $carbon--blue-40;
+  font-size: 1rem;
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
   }
 }
 

diff --git a/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js b/packages/gatsby-theme-carbon/src/components/Switcher/Switcher.js
@@ -9,9 +9,13 @@ const Switcher = ({ children }) => {
   return (
     <nav
       className={cx(nav, { [open]: switcherIsOpen })}
-      aria-label="website switcher"
+      aria-label="IBM Design ecosystem navigation"
+      aria-expanded={switcherIsOpen}
+      id="switcher-navigation"
     >
-      <ul>{children}</ul>
+      <ul hidden={!switcherIsOpen} aria-labelledby="switcher-navigation">
+        {children}
+      </ul>
     </nav>
   );
 };
@@ -22,17 +26,29 @@ export const SwitcherDivider = props => (
   </li>
 );
 
-export const SwitcherLink = ({ disabled, children, ...rest }) => (
-  <li>
-    {disabled ? (
-      <span className={linkDisabled}>{children}</span>
-    ) : (
-      <a className={link} {...rest}>
+export const SwitcherLink = ({
+  disabled,
+  children,
+  href: hrefProp,
+  ...rest
+}) => {
+  const href = disabled || !hrefProp ? undefined : hrefProp;
+  const className = disabled ? linkDisabled : link;
+
+  return (
+    <li>
+      <a
+        aria-disabled={disabled}
+        role="button"
+        className={className}
+        href={href}
+        {...rest}
+      >
         {children}
       </a>
-    )}
-  </li>
-);
+    </li>
+  );
+};
 
 const DefaultChildren = () => (
   <>

diff --git a/packages/gatsby-theme-carbon/src/styles/internal/_page.scss b/packages/gatsby-theme-carbon/src/styles/internal/_page.scss
@@ -106,3 +106,8 @@ img[src*='svg'] {
 .bx--website-switcher {
   z-index: z('floating');
 }
+
+// ie 11 hidden fix
+[hidden] {
+  display: none;
+}