gatsby-theme-carbon 1.27.2 → 1.27.3

package/gatsby-config.js

@@ -12,7 +12,7 @@ module.exports = (themeOptions) => {
   const repositoryDefault = {
     baseUrl: '',
     subDirectory: '',
-    branch: 'master',
+    branch: 'main',
   };
 
   const defaultTheme = { homepage: 'dark', interior: 'g10' };

package/gatsby-node.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const fs = require('fs');
 const mkdirp = require('mkdirp');
+const startCase = require('lodash.startcase');
 
 exports.onPreBootstrap = ({ store, reporter }) => {
   const { program } = store.getState();
@@ -31,12 +32,35 @@ exports.onCreatePage = (
     const MdxNode = getNodesByType('Mdx').find(
       ({ fileAbsolutePath }) => fileAbsolutePath === page.component
     );
+    let frontmatter = {
+      ...page.context.frontmatter,
+    };
 
     const { titleType = 'page' } = pluginOptions;
     const { createPage, deletePage } = actions;
     const [relativePagePath] = page.componentPath
       .split('src/pages')
       .splice('-1');
+
+    // Inject titles and descriptions for pages that don't include them
+    if (!frontmatter.title) {
+      const title = page.path
+        .split('/')
+        .filter((part) => part)
+        .map((part) => startCase(part))
+        .join(' / ');
+
+      frontmatter = {
+        description: title,
+        ...frontmatter,
+        title,
+      };
+    }
+
+    if (MdxNode) {
+      Object.assign(MdxNode, { frontmatter });
+    }
+
     deletePage(page);
     createPage({
       ...page,
@@ -44,6 +68,7 @@ exports.onCreatePage = (
         ...page.context,
         relativePagePath,
         titleType,
+        frontmatter,
         MdxNode,
       },
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "1.27.2",
+  "version": "1.27.3",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {
@@ -59,6 +59,7 @@
     "gatsby-source-filesystem": "^2.2.2",
     "gatsby-source-medium-feed": "^1.0.6",
     "gatsby-transformer-yaml": "^2.3.1",
+    "lodash.startcase": "^4.4.0",
     "lodash.throttle": "^4.1.1",
     "mkdirp": "^1.0.3",
     "node-sass": "^4.11.0",

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

@@ -22,7 +22,7 @@
   position: relative;
   display: inline-block;
   transition: color $transition--base;
-  color: white;
+  color: $text-01;
   text-decoration: none;
   margin-left: $spacing-05;
 
@@ -37,7 +37,7 @@
     content: '\21B3'; //"↳"
     position: absolute;
     left: -$spacing-05;
-    color: white;
+    color: $text-01;
     transition: color $transition--base;
     cursor: pointer;
   }

package/src/components/Header/Header.module.scss

@@ -5,6 +5,7 @@
   top: 0;
   right: 0;
   width: calc(100% - 3rem);
+  z-index: 2;
   @include carbon--breakpoint('lg') {
     position: static;
     width: auto;
@@ -109,7 +110,7 @@ header.header {
   border-top: 1px solid transparent;
   display: flex;
   align-items: center;
-  z-index: 1;
+  z-index: 3;
   &:focus {
     outline: 2px solid $carbon--white-0;
     outline-offset: -2px;
@@ -121,6 +122,10 @@ header.header {
   }
 }
 
+.collapsed {
+  z-index: 1;
+}
+
 .header .header-button {
   flex-shrink: 0;
   transition: background-color $duration--fast-02 $carbon--standard-easing;

package/src/components/Switcher/Switcher.js

@@ -103,7 +103,7 @@ const DefaultChildren = () => (
       Carbon Design System
     </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/standards/web/carbon-for-ibm-dotcom/">
-      Carbon for IBM.com 
+      Carbon for IBM.com
     </SwitcherLink>
     <SwitcherLink href="https://www.ibm.com/design/event/">
       IBM Event Design
@@ -128,6 +128,9 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://w3.ibm.com/design/" isInternal>
       IBM Design
     </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/racial-equity-in-design">
+      Racial Equity in Design
+    </SwitcherLink>
   </>
 );