gatsby-theme-carbon 1.27.3 → 1.29.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-theme-carbon",
-  "version": "1.27.3",
+  "version": "1.29.2",
   "main": "index.js",
   "author": "vpicone <vp@vincepic.one> (@vpicone)",
   "repository": {
@@ -23,9 +23,9 @@
   },
   "dependencies": {
     "@babel/core": "^7.10.4",
-    "@carbon/elements": "^10.11.0",
-    "@carbon/icons-react": "^10.10.0",
-    "@carbon/themes": "^10.19.0",
+    "@carbon/elements": "^10.32.0",
+    "@carbon/icons-react": "^10.30.0",
+    "@carbon/themes": "^10.32.0",
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.11",
     "@mdx-js/mdx": "^1.5.5",
@@ -33,8 +33,8 @@
     "@reach/router": "^1.2.1",
     "@vimeo/player": "^2.9.1",
     "beautiful-react-hooks": "^0.23.1",
-    "carbon-components": "^10.23.2",
-    "carbon-components-react": "^7.23.2",
+    "carbon-components": "^10.33.0",
+    "carbon-components-react": "^7.33.0",
     "carbon-icons": "^7.0.7",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",

package/src/components/GlobalSearch/GlobalSearch.module.scss

@@ -10,6 +10,10 @@
   color: $carbon--white-0;
   transition: max-width $duration--fast-02 $carbon--standard-easing,
     background $duration--fast-02 $carbon--standard-easing;
+  
+  @include carbon--breakpoint('lg') {
+    max-width: 28rem;
+  }
 }
 
 .container.inputFocusWithin {

package/src/components/Header/Header.js

@@ -23,6 +23,7 @@ const Header = ({ children }) => {
     toggleNavState,
     switcherIsOpen,
     searchIsOpen,
+    switcherTooltipText = 'Switch sites',
   } = useContext(NavContext);
   const { isSearchEnabled, navigationStyle } = useMetadata();
 
@@ -44,20 +45,22 @@ const Header = ({ children }) => {
       />
       <Link
         className={cx(styles.headerName, {
-          [styles.collapsed]: searchIsOpen,
+          [styles.searchIsOpenOnLink]: searchIsOpen,
           [styles.headerNameWithHeaderNav]: navigationStyle,
         })}
         to="/">
         {children}
       </Link>
       {navigationStyle && <HeaderNav />}
-      <HeaderGlobalBar>
+      <HeaderGlobalBar
+        className={cx({ [styles.searchIsOpenOnBar]: searchIsOpen })}>
         {isSearchEnabled && <GlobalSearch />}
         <HeaderGlobalAction
           className={cx(styles.headerButton, styles.switcherButton, {
             [styles.switcherButtonOpen]: switcherIsOpen,
           })}
-          aria-label="Switch"
+          aria-label={switcherTooltipText}
+          tooltipAlignment="end"
           onClick={() => {
             toggleNavState('switcherIsOpen');
             toggleNavState('searchIsOpen', 'close');

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

@@ -5,13 +5,18 @@
   top: 0;
   right: 0;
   width: calc(100% - 3rem);
-  z-index: 2;
+  z-index: 1;
   @include carbon--breakpoint('lg') {
     position: static;
     width: auto;
   }
 }
 
+// When search is open, it will properly sit on top of the navigation links when using the headernav style of naviation.
+.searchIsOpenOnBar {
+  z-index: 2;
+}
+
 // Overrides upstream Carbon styles for header nav
 .headerWithHeaderNav :global(.bx--header__nav) {
   @include carbon--breakpoint('lg') {
@@ -20,6 +25,7 @@
     left: 25%;
     top: 0;
     padding-left: 0;
+    z-index: 2;
   }
 }
 
@@ -122,7 +128,8 @@ header.header {
   }
 }
 
-.collapsed {
+// When search is open this will allow the search bar to cover the header on mobile and tablet screens.
+.searchIsOpenOnLink {
   z-index: 1;
 }
 

package/src/components/Homepage/homepage.scss

@@ -97,3 +97,8 @@
 .container--homepage .#{$prefix}--col-no-gutter {
   padding: 0;
 }
+
+.bx--side-nav__overlay-active {
+  //rel: https://github.com/carbon-design-system/carbon-website/pull/2187
+  width: 100%;
+}

package/src/components/LastModifiedDate/LastModifiedDate.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Row, Column } from '../Grid';
+import styles from './last-modified-date.module.scss';
+
+const LastModifiedDate = ({ date }) => {
+  const options = {
+    day: '2-digit',
+    year: 'numeric',
+    month: 'long',
+  };
+
+  const lastModified = new Date(date);
+
+  return date ? (
+    <Row className={styles.row}>
+      <Column>
+        <div className={styles.text}>
+          Page last updated: {lastModified.toLocaleDateString('en-GB', options)}
+          {/* // https://www-03preprod.ibm.com/support/knowledgecenter/ibm_style/dates-and-times.html */}
+        </div>
+      </Column>
+    </Row>
+  ) : null;
+};
+export default LastModifiedDate;

package/src/components/LastModifiedDate/index.js

@@ -0,0 +1,3 @@
+import LastModifiedDate from './LastModifiedDate';
+
+export default LastModifiedDate;

package/src/components/LastModifiedDate/last-modified-date.module.scss

@@ -0,0 +1,8 @@
+.text {
+  @include carbon--type-style('body-short-01');
+}
+
+.row {
+  position: relative;
+  top: 5rem;
+}

package/src/components/Switcher/Switcher.js

@@ -108,6 +108,9 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.ibm.com/design/event/">
       IBM Event Design
     </SwitcherLink>
+    <SwitcherLink href="https://www.ibm.com/design/workplace/">
+      IBM Workplace Design
+    </SwitcherLink>
     <SwitcherDivider>Practices</SwitcherDivider>
     <SwitcherLink href="https://www.ibm.com/design/thinking/">
       Enterprise Design Thinking
@@ -124,6 +127,11 @@ const DefaultChildren = () => (
     <SwitcherLink href="https://www.ibm.com/services/ibmix/">
       IBM iX
     </SwitcherLink>
+    <SwitcherLink
+      isInternal
+      href="https://w3.ibm.com/design/universal-experiences/">
+      IBM Universal Experiences
+    </SwitcherLink>
     <SwitcherDivider>Community</SwitcherDivider>
     <SwitcherLink href="https://w3.ibm.com/design/" isInternal>
       IBM Design

package/src/components/Tabs/Tabs.js

@@ -16,7 +16,7 @@ import { breakpoints } from '@carbon/elements';
 import cx from 'classnames';
 
 import { useId } from '../../util/hooks/useId';
-import styles from './Tabs.module.scss';
+import * as styles from './Tabs.module.scss';
 
 function elementIsNullOrString(child) {
   return !child || typeof child.type === 'string';
@@ -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/templates/Default.js

@@ -10,6 +10,7 @@ import NextPrevious from '../components/NextPrevious';
 import PageTabs from '../components/PageTabs';
 import Main from '../components/Main';
 import useMetadata from '../util/hooks/useMetadata';
+import LastModifiedDate from '../components/LastModifiedDate';
 
 const Default = ({ pageContext, children, location, Title }) => {
   const { frontmatter = {}, relativePagePath, titleType } = pageContext;
@@ -19,6 +20,7 @@ const Default = ({ pageContext, children, location, Title }) => {
     theme: frontmatterTheme,
     description,
     keywords,
+    date,
   } = frontmatter;
 
   const { interiorTheme } = useMetadata();
@@ -77,6 +79,7 @@ const Default = ({ pageContext, children, location, Title }) => {
       <Main padded>
         {children}
         <EditLink relativePagePath={relativePagePath} />
+        <LastModifiedDate date={date} />
       </Main>
       <NextPrevious
         pageContext={pageContext}