Test theme v2 upgrade (#968)

* chore: update other deps

* chore: update deps

* fix: gatsby v3 migration woes

* more v3 fixes

* chore: use node 14

* chore: up theme

* fix: header and footer shadowing

* fix: index and deps

* fix: node version

* chore: remove bg color override

* chore: remove unused classes

* chore: update theme

* fix: homepage resource cards

* chore: update theme w/ resource card fix

Author: vpicone

.babelrc

@@ -1,18 +1,4 @@
 {
   "plugins": ["@loadable/babel-plugin"],
-  "presets": [
-    [
-      "babel-preset-gatsby",
-      {
-        "targets": {
-          "browsers": [
-            "last 1 edge version",
-            "last 1 firefox version",
-            "last 1 safari version",
-            "last 1 chrome version"
-          ]
-        }
-      }
-    ]
-  ]
+  "presets": ["babel-preset-gatsby"]
 }

.nvmrc

@@ -1 +1 @@
-v10
+v14

gatsby-config.js

@@ -6,11 +6,6 @@ module.exports = {
     description:
       'The IBM Design Language provides the guidance and assets used to express the IBM brand in products, communications, marketing, events and digital experiences.',
   },
-  flags: {
-    FAST_DEV: true,
-    FAST_REFRESH: true,
-    PARALLEL_SOURCING: true,
-  },
   pathPrefix: '/design/language',
   plugins: [
     {
@@ -43,8 +38,6 @@ module.exports = {
         short_name: 'IDL',
         start_url: 'https://www.ibm.com/design/language/',
         icon: 'src/images/favicon.svg',
-        background_color: '#f4f4f4',
-        theme_color: '#0f62fe',
       },
     },
     `gatsby-plugin-sitemap`,

package.json

@@ -5,7 +5,7 @@
   "version": "1.0.1",
   "main": "src",
   "engines": {
-    "node": "^12 || ^13 || ^14"
+    "node": "14.x"
   },
   "browserslist": [
     "last 2 edge version",
@@ -58,37 +58,37 @@
     ]
   },
   "dependencies": {
-    "@carbon/colors": "^10.21.0",
+    "@carbon/colors": "^10.26.0",
     "@carbon/icons": "^10.26.0",
     "@carbon/icons-react": "^10.26.0",
-    "@carbon/layout": "^10.22.0",
+    "@carbon/layout": "^10.25.0",
     "@carbon/pictograms": "^11.4.0",
     "@carbon/pictograms-react": "^11.4.0",
     "@ibm/plex": "^5.2.1",
     "@loadable/babel-plugin": "^5.12.0",
-    "@loadable/component": "^5.12.0",
-    "@loadable/webpack-plugin": "^5.12.0",
-    "babel-preset-gatsby": "^0.5.2",
-    "carbon-components": "^10.29.0",
-    "carbon-components-react": "^7.29.0",
+    "@loadable/component": "^5.15.0",
+    "@loadable/webpack-plugin": "^5.15.0",
+    "babel-preset-gatsby": "^1.7.1",
+    "carbon-components": "^10.37.0",
+    "carbon-components-react": "^7.37.1",
     "copy-to-clipboard": "^3.2.1",
     "fs-extra": "^8.1.0",
-    "gatsby": "^2.31.1",
-    "gatsby-plugin-manifest": "^2.2.5",
+    "gatsby": "^3.7.2",
+    "gatsby-plugin-manifest": "^3.7.1",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-plugin-sitemap": "^2.4.12",
-    "gatsby-theme-carbon": "^1.29.2",
+    "gatsby-plugin-sitemap": "^4.3.1",
+    "gatsby-theme-carbon": "^2.1.3",
     "lodash-es": "^4.17.15",
     "prop-types": "^15.7.2",
     "raw-loader": "^4.0.2",
-    "react": "^16.8.6",
-    "react-dom": "^16.8.6",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-lottie": "^1.2.3",
     "react-textarea-autosize": "^7.1.0",
     "use-media": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
+    "@babel/core": "^7.14.6",
     "babel-eslint": "^10.1.0",
     "carbon-icons": "^7.0.7",
     "eslint": "^7.4.0",
@@ -106,6 +106,6 @@
     "stylelint-scss": "^3.18.0",
     "svgo": "^2.3.0",
     "uuid": "^8.3.2",
-    "webpack": "^4.43.0"
+    "webpack": "^5.40.0"
   }
 }

src/components/SVGLibraries/IconLibrary/IconLibrary.js

@@ -6,16 +6,15 @@ import loadable from '@loadable/component';
 
 import useColumnCount from '../shared/useColumnCount';
 
-import {
-  icons as iconMetaData,
-  categories as iconCategoryMetadata,
-} from './metadata.json';
+import * as metadata from './metadata.json';
 import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
 
 import FilterRow from '../shared/FilterRow';
 import IconCategory from './IconCategory';
 import NoResult from '../shared/NoResult';
 
+const { icons: iconMetaData, categories: iconCategoryMetadata } = metadata;
+
 const IconLibrary = () => {
   const [iconComponents, setIconComponents] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('All icons');

src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js

@@ -6,17 +6,16 @@ import { groupBy, debounce } from 'lodash-es';
 
 import useColumnCount from '../shared/useColumnCount';
 
-import {
-  icons as pictogramMetaData,
-  categories as pictogramCatagoryMetadata,
-} from './metadata.json';
+import * as metadata from './metadata.json';
 
 import FilterRow from '../shared/FilterRow';
 import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
 
 import PictogramCategory from './PictogramCategory';
 import NoResult from '../shared/NoResult';
 
+const { icons: pictogramMetaData, categories: pictogramCategoryMetadata } = metadata;
+
 const IconLibrary = () => {
   const [pictogramComponents, setPictogramComponents] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('All pictograms');
@@ -48,7 +47,7 @@ const IconLibrary = () => {
       []
     );
 
-    setCategoryList(pictogramCatagoryMetadata.map(({ name }) => name).sort());
+    setCategoryList(pictogramCategoryMetadata.map(({ name }) => name).sort());
     setCategoriesLoaded(true);
 
     setPictogramComponents(pictogramArray);

src/components/SVGLibraries/shared/ActionBar.js

@@ -6,7 +6,7 @@ import { Button } from 'carbon-components-react';
 import copy from 'copy-to-clipboard';
 import cx from 'classnames';
 import { LibraryContext } from './LibraryProvider';
-import styles from './ActionBar.module.scss';
+import {container, trigger, hidden, tooltip} from './ActionBar.module.scss';
 
 const ActionBar = ({
   name,
@@ -56,8 +56,8 @@ const ActionBar = ({
       ref={actionBarRef}
       onBlur={handleBlurEvent}
       aria-hidden={!isActionBarVisible}
-      className={cx(styles.container, {
-        [styles.hidden]: !isActionBarVisible,
+      className={cx(container, {
+        [hidden]: !isActionBarVisible,
       })}>
       <Button
         kind="ghost"
@@ -69,8 +69,8 @@ const ActionBar = ({
         renderIcon={Download16}
         onFocus={() => setIsActionBarVisible(true)}
         onClick={handleDownload}
-        className={styles.tooltip}
-        triggerClassName={styles.trigger}
+        className={tooltip}
+        triggerClassName={trigger}
       />
       {shouldShowCopyButton && (
         <Button
@@ -83,8 +83,8 @@ const ActionBar = ({
           renderIcon={Code16}
           onClick={handleCopy}
           onFocus={() => setIsActionBarVisible(true)}
-          className={styles.tooltip}
-          triggerClassName={styles.trigger}
+          className={tooltip}
+          triggerClassName={trigger}
         />
       )}
     </div>

src/components/SVGLibraries/shared/NoResult.js

@@ -9,7 +9,6 @@ import {
 
 import { Github } from './Icons';
 import { noResult, allSvgs, searchLabel } from './SvgLibrary.module.scss';
-import '../../../styles/Grid.module.scss';
 
 const NoResult = ({
   allIconResults,

src/gatsby-theme-carbon/components/Footer.js src/gatsby-theme-carbon/components/Footer/index.js

@@ -12,7 +12,16 @@ import {
   PauseOutline24,
   PauseOutlineFilled24,
 } from '@carbon/icons-react';
-import styles from 'gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.module.scss';
+import {
+  controls,
+  dark,
+  container,
+  gifInDialog,
+  imgHidden,
+  imgDisplayed,
+  gifDisplayed,
+  gifHidden,
+} from 'gatsby-theme-carbon/src/components/GifPlayer/GifPlayer.module.scss';
 
 const Pause = ({ hovering }) =>
   hovering ? <PauseOutlineFilled24 /> : <PauseOutline24 />;
@@ -68,24 +77,24 @@ const GifPlayer = ({ children, color, className, isInDialog }) => {
   };
 
   const controlsClassNames = classnames({
-    [styles.controls]: true,
-    [styles.dark]: color === 'dark',
+    [controls]: true,
+    [dark]: color === 'dark',
   });
 
   const containerClassNames = classnames({
-    [styles.container]: true,
+    [container]: true,
     [className]: className,
-    [styles.gifInDialog]: isInDialog,
+    [gifInDialog]: isInDialog,
   });
 
   const staticImageClassNames = classnames({
-    [styles.imgHidden]: true,
-    [styles.imgDisplayed]: paused,
+    [imgHidden]: true,
+    [imgDisplayed]: paused,
   });
 
   const gifClassNames = classnames({
-    [styles.gifDisplayed]: true,
-    [styles.gifHidden]: paused,
+    [gifDisplayed]: true,
+    [gifHidden]: paused,
   });
 
   const childrenArray = React.Children.toArray(children);

src/gatsby-theme-carbon/components/GifPlayer/GifPlayer.js

@@ -8,7 +8,6 @@ description:
 import Carousel from '../components/Carousel';
 import SwatchPaletteWidget from '../components/SwatchPaletteWidget';
 import ColorGrid from '../components/ColorGrid';
-import { noGutterSm } from '../styles/Grid.module.scss';
 
 <PageDescription>
 

src/gatsby-theme-carbon/components/Header.js src/gatsby-theme-carbon/components/Header/index.js

@@ -4,8 +4,6 @@ description: Charts are typically divided into categories based on their goals,
 ---
 
 import OverviewCard from "../../components/OverviewCard";
-import { noGutterSm } from '../../styles/Grid.module.scss'
-
 
 <PageDescription>
 

src/pages/color.mdx

@@ -7,7 +7,6 @@ tabs: [Library, Design, Usage, Contribute]
 ---
 
 import { Bee32 } from '@carbon/icons-react';
-import { noGutterSm } from '../../../styles/Grid.module.scss';
 
 <PageDescription>
 

src/pages/data-visualization/charts.mdx

@@ -3,8 +3,6 @@ title: Overview
 description: Our illustrations take on many forms and ultimately have a job to do. They should always have a clear purpose, support content and guide a user to understand difficult concepts, products or services. Clear and simple illustrations help us provide meaningful engagement to our users.
 ---
 
-import { noGutterSm } from '../../styles/Grid.module.scss';
-
 <PageDescription>
 
 Our illustrations take on many forms and ultimately have a job to do. They should always have a clear purpose, support content and guide a user to understand difficult concepts, products or services. Clear and simple illustrations help us provide meaningful engagement to our users.

src/pages/iconography/pictograms/usage.mdx

@@ -1,10 +1,9 @@
 import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
-import { h3 } from "gatsby-theme-carbon/src/components/markdown/Markdown.module.scss";
+import { h3 } from 'gatsby-theme-carbon/src/components/markdown/Markdown.module.scss';
 import HomepageTile from '../components/HomepageTile';
 import Carousel from '../components/Carousel';
 import Helmet from '../components/Helmet';
-import { noGutterSm, noGutterMdLeft } from '../styles/Grid.module.scss';
-import "../styles/index.scss";
+import '../styles/index.scss';
 
 export default HomepageTemplate;
 
@@ -21,6 +20,7 @@ export default HomepageTemplate;
       className="card-background"
       >
 
+
 ![presentational animation of plex font](../images/homepage/landing-plex-animation.gif)
 
   </ImageCard>
@@ -36,6 +36,7 @@ export default HomepageTemplate;
         className="card-background"
         >
 
+
 ![IBM rebus logo](../images/homepage/philosophy-rebus.png)
 
   </ImageCard>
@@ -51,6 +52,7 @@ export default HomepageTemplate;
         className="card-background"
         >
 
+
 ![IBM rebus logo](../images/homepage/landing-color-grid.svg)
 
   </ImageCard>
@@ -66,6 +68,7 @@ export default HomepageTemplate;
         className="card-background"
         >
 
+
 ![grid of ibm colors](../images/homepage/photography_divers.jpg)
 
   </ImageCard>
@@ -81,6 +84,7 @@ export default HomepageTemplate;
         className="card-background"
         >
 
+
 ![grid of ibm colors](../images/homepage/illustration_isometric.png)
 
   </ImageCard>
@@ -93,12 +97,14 @@ export default HomepageTemplate;
     className="card-background"
     >
 
+
 ![IBM 2x grid](../images/homepage/grid-temp.png)
 
 </ImageCard>
 </Column>
 </Row>
 
+
 <h2 classname={h3}>Tools, templates and assets</h2>
 
 <Row className="homepage-cards resource-card-group">
@@ -197,6 +203,7 @@ export default HomepageTemplate;
       color="dark"
     >
 
+
 ![Imagery](../images/homepage/whatsnew-plex-japanese.gif)
 
   </ArticleCard>
@@ -210,6 +217,7 @@ export default HomepageTemplate;
       color="dark"
     >
 
+
 ![IBM and Red Hat Experience Guide](../images/homepage/whatsnew_ibm_redhat.jpg)
 
   </ArticleCard>
@@ -223,8 +231,10 @@ export default HomepageTemplate;
       color="dark"
     >
 
+
 ![Expressive pictograms](../images/homepage/whatsnew_pictogram.png)
 
   </ArticleCard>
   </Column>
-</Row>
+</Row>
+