[Don't merge yet] feat: update to gtc v2 and gatsby v3

gatsby-node.js

@@ -7,7 +7,7 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }) => {
       rules: [
         {
           test: /\.md$/,
-          loaders: ['html-loader', 'markdown-loader'],
+          use: ['html-loader', 'markdown-loader'],
         },
         {
           test: /\.html$/,

package.json

@@ -37,21 +37,20 @@
     "/node_modules/*"
   ],
   "resolutions": {
-    "carbon-components": "^10.41.0",
-    "carbon-components-react": "^7.41.0",
-    "@carbon/elements": "^10.40.0",
-    "@carbon/icons": "^10.37.0",
-    "@carbon/icons-react": "^10.37.0",
-    "gatsby-remark-images": "^3.3.33"
+    "carbon-components": "^10.37.0",
+    "carbon-components-react": "^7.37.1",
+    "@carbon/elements": "^10.36.0",
+    "@carbon/icons": "^10.33.0",
+    "@carbon/icons-react": "^10.33.0"
   },
   "dependencies": {
-    "@carbon/charts-react": "0.41.101",
-    "@carbon/elements": "^10.40.0",
-    "@carbon/icons": "^10.37.0",
-    "@carbon/icons-react": "^10.37.0",
-    "@carbon/pictograms": "^11.15.0",
-    "@carbon/pictograms-react": "^11.15.0",
-    "@loadable/component": "^5.12.0",
+    "@carbon/charts-react": "0.41.65",
+    "@carbon/elements": "^10.36.0",
+    "@carbon/icons": "^10.33.0",
+    "@carbon/icons-react": "^10.33.0",
+    "@carbon/pictograms": "^11.11.0",
+    "@carbon/pictograms-react": "^11.11.0",
+    "@loadable/component": "^5.15.0",
     "@slack/web-api": "^5.11.0",
     "carbon-components": "^10.41.0",
     "carbon-components-react": "^7.41.0",
@@ -60,9 +59,9 @@
     "codesandbox": "^2.1.10",
     "copy-to-clipboard": "^3.2.1",
     "fuse.js": "^6.4.1",
-    "gatsby": "^2.19.8",
-    "gatsby-image": "^2.4.15",
-    "gatsby-theme-carbon": "^1.30.1",
+    "gatsby": "^3.7.2",
+    "gatsby-image": "^3.7.1",
+    "gatsby-theme-carbon": "^2.0.0-next.3",
     "lodash-es": "^4.17.15",
     "markdown-it": "^9.0.1",
     "nanoid": "^2.1.11",
@@ -75,13 +74,13 @@
     "use-media": "^1.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.1",
+    "@babel/core": "^7.14.6",
     "@loadable/babel-plugin": "^5.12.0",
-    "@loadable/webpack-plugin": "^5.12.0",
+    "@loadable/webpack-plugin": "^5.15.0",
     "@now/node": "^1.6.1",
     "@philpl/buble": "^0.19.7",
     "babel-eslint": "^10.1.0",
-    "babel-preset-gatsby": "^0.2.29",
+    "babel-preset-gatsby": "^1.7.1",
     "d3": "7.0.0",
     "dotenv": "^8.2.0",
     "eslint": "^6.8.0",
@@ -95,14 +94,14 @@
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^2.5.1",
     "fs-extra": "^9.0.1",
-    "gatsby-plugin-lodash": "^3.1.3",
-    "gatsby-plugin-manifest": "^2.4.34",
+    "gatsby-plugin-lodash": "^4.7.1",
+    "gatsby-plugin-manifest": "^3.7.1",
     "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-plugin-sharp": "^2.6.27",
-    "gatsby-plugin-sitemap": "^2.2.30",
-    "gatsby-remark-images": "^3.3.33",
-    "gatsby-source-filesystem": "^2.3.24",
-    "gatsby-transformer-sharp": "^2.5.13",
+    "gatsby-plugin-sharp": "^3.7.1",
+    "gatsby-plugin-sitemap": "^4.3.1",
+    "gatsby-remark-images": "^5.4.1",
+    "gatsby-source-filesystem": "^3.7.1",
+    "gatsby-transformer-sharp": "^3.7.1",
     "html-loader": "^0.5.5",
     "husky": "^4.2.3",
     "lint-staged": ">=10.0.9",

src/components/ComponentDemo/KnobContainer.js

@@ -22,7 +22,6 @@ import {
   formGroup,
   componentKnobWrapper,
   componentKnobTitle,
-  formItem,
   checkboxWrapper,
   iconButton,
   iconButtonRow,
@@ -196,7 +195,6 @@ const Knob = ({
         title={description}
         defaultChecked={defaultChecked}
         labelText={name}
-        className={formItem}
         wrapperClassName={checkboxWrapper}
         id={inputId}
       />

src/components/SVGLibraries/IconLibrary/IconLibrary.js

@@ -4,10 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { groupBy, debounce } from 'lodash-es';
 import loadable from '@loadable/component';
 
-import {
-  icons as iconMetaData,
-  categories as iconCategoryMetadata,
-} from '@carbon/icons/metadata.json';
+import * as metaData from '@carbon/icons/metadata.json';
 import useColumnCount from '../shared/useColumnCount';
 
 import { svgPage, svgLibrary } from '../shared/SvgLibrary.module.scss';
@@ -16,6 +13,8 @@ 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

@@ -4,10 +4,7 @@ import loadable from '@loadable/component';
 
 import { groupBy, debounce } from 'lodash-es';
 
-import {
-  icons as pictogramMetaData,
-  categories as pictogramCatagoryMetadata,
-} from '@carbon/pictograms/metadata.json';
+import * as metaData from '@carbon/pictograms/metadata.json';
 import useColumnCount from '../shared/useColumnCount';
 
 import FilterRow from '../shared/FilterRow';
@@ -16,6 +13,11 @@ 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');
@@ -46,7 +48,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/data/status-indicators/status-indicators.yaml

@@ -71,8 +71,8 @@ medium:
       - checkmark
     token: $support-02
     description:
-      Carries the same meaning as ‘Normal’ but is more often used in data
-      tables and confined spaces
+      Carries the same meaning as ‘Normal’ but is more often used in data tables
+      and confined spaces
   - name: Success
     fileNames:
       - checkmark-circle-blue-filled
@@ -96,8 +96,8 @@ medium:
       - incomplete
     token: $support-04
     description:
-      Indicates a stepped process has begun but is not yet finished (icon appears in
-      Carbon’s Progress Indicator component)
+      Indicates a stepped process has begun but is not yet finished (icon
+      appears in Carbon’s Progress Indicator component)
     usage: incomplete tasks
   - name: Not started
     fileNames:
@@ -147,38 +147,49 @@ low:
 glyph:
   - name: Failure
     token: $support-01
-    description: Indicates a severe process failure or error that needs immediate attention
-    usage: critical failures, emergencies urgent alerts, deprecation and cancellation
+    description:
+      Indicates a severe process failure or error that needs immediate attention
+    usage:
+      critical failures, emergencies urgent alerts, deprecation and cancellation
     fileNames:
       - failure
   - name: Critical severity
     token: $support-01
-    description: Indicates critical severity threat, critical severity object (like an IP), or critical 
risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates critical severity threat, critical severity object (like an IP),
+      or critical 
risk of a data breach; based on a 1–10 scale
     usage: critical (10) threat, critical risk, critical severity warnings
     fileNames:
       - critical-severity
   - name: High severity
     token: $support-01
-    description: Indicates high severity threat, high severity object (like an IP), or high risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates high severity threat, high severity object (like an IP), or high
+      risk of a data breach; based on a 1–10 scale
     usage: high threat (7–9), high risk, high severity warnings
     fileNames:
       - high-severity
   - name: Medium severity
     token: Orange 40/Orange 60 stroke, Orange 40
-    description: Indicates medium severity threat, medium severity object (like an IP), or medium risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates medium severity threat, medium severity object (like an IP), or
+      medium risk of a data breach; based on a 1–10 scale
     usage: medium threat (4–6), medium risk, medium severity warnings
     fileNames:
       - medium-severity
   - name: Low severity
     token: $support-03/Yellow 60 stroke, $support-03
-    description: Indicates low severity threat, low severity object (like an IP), or low risk of a data breach; based on a 1–10 scale
+    description:
+      Indicates low severity threat, low severity object (like an IP), or low
+      risk of a data breach; based on a 1–10 scale
     usage: low threat (0–3), low risk, low severity warnings
     fileNames:
       - low-severity
   - name: Caution
     token: $support-03/Yellow 60 stroke, $support-03
     description:
-      When not using the Security risk/severity scale, this can be used to indicate 
the existence of a non-service affecting fault condition
+      When not using the Security risk/severity scale, this can be used to
+      indicate 
the existence of a non-service affecting fault condition
     usage: minor caution, prevention, instability
     fileNames:
       - caution
@@ -200,15 +211,15 @@ glyph:
       - circle-fill
   - name: New
     token: $support-04
-    description:
-      Indicates a new components, features or pieces of content
+    description: Indicates a new components, features or pieces of content
     usage: new items, additional information
     fileNames:
       - new
   - name: Information
     token: $support-04
     description:
-      Indicates additional information is available (can be used adaptively for statuses not taken into account by this table)
+      Indicates additional information is available (can be used adaptively for
+      statuses not taken into account by this table)
     usage: additional information, wild card
     fileNames:
       - square-fill

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Footer from 'gatsby-theme-carbon/src/components/Footer';
-import packageJson from '../../../package.json';
+import packageJson from '../../../../package.json';
 
 const currentYear = new Date().getFullYear();
 const versions = {

src/gatsby-theme-carbon/templates/Homepage.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { HomepageCallout, ResourceCard } from 'gatsby-theme-carbon';
 import HomepageTemplate from 'gatsby-theme-carbon/src/templates/Homepage';
 import { blue90, gray10, white0 } from '@carbon/elements';
-import styles from './Homepage.module.scss';
+import { calloutLink, callToAction } from './Homepage.module.scss';
 import HomepageVideo from '../../components/HomepageVideo/HomepageVideo';
 
 const FirstLeftText = () => <p>Carbon Design System</p>;
@@ -30,7 +30,7 @@ const SecondRightText = () => (
     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.
-    <a className={styles.calloutLink} href="/contributing/overview/">
+    <a className={calloutLink} href="/contributing/overview/">
       Start contributing →
     </a>
   </p>
@@ -45,7 +45,7 @@ const customProps = {
           <div className="bx--row">
             <div className="bx--col-lg-4 bx--col-md-4 bx--col-sm-2 bx--offset-lg-8 bx--offset-md-4 bx--offset-sm-2 homepage--tile-header">
               <ResourceCard
-                className={styles.callToAction}
+                className={callToAction}
                 subTitle="Coming soon"
                 title="Carbon v11"
                 href="/whats-happening/v11-release/"

src/pages/designing/design-resources/index.mdx

@@ -147,10 +147,18 @@ reflect IBM's spirit, beliefs, and design principles.
 
 ## Gatsby theme resources
 
-The Gatsby Sketch kit has all the components, patterns, and sample layouts that have been developed by teams within the IBM ecosystem. The Gatsby theme site includes the components, guidelines, and everything you need to create and contribute to Carbon sites.
+The Gatsby Sketch kit has all the components, patterns, and sample layouts that
+have been developed by teams within the IBM ecosystem. The Gatsby theme site
+includes the components, guidelines, and everything you need to create and
+contribute to Carbon sites.
 
 ### Image production guidelines
-For anyone interested in contributing to the Carbon Design System website, or making images for their own Pattern Asset Library (PAL), we follow a set of guidelines to ensure consistency across the content in the Gatsby ecosystem. The image production guidelines Sketch kit includes guidance, symbols and templates to help designers with every aspect of image creation and component specs.
+
+For anyone interested in contributing to the Carbon Design System website, or
+making images for their own Pattern Asset Library (PAL), we follow a set of
+guidelines to ensure consistency across the content in the Gatsby ecosystem. The
+image production guidelines Sketch kit includes guidance, symbols and templates
+to help designers with every aspect of image creation and component specs.
 
 <Row className="resource-card-group">
 

src/pages/patterns/status-indicator-pattern/index.mdx

@@ -378,16 +378,18 @@ visualizations, for example network diagrams.
 The shapes are only the most basic geometries, derived from the larger icon
 containers, so they can be easily discerned at small sizes. Shape indicators are
 not available in outline because they are so small. The only situations in which
-you would use an outline is to ensure contrast accessibility for yellows or oranges in the Carbon light themes.
+you would use an outline is to ensure contrast accessibility for yellows or
+oranges in the Carbon light themes.
 
 The table below is a first pass at establishing a standard lexicon for symbol
 indicators across IBM products.
 
 #### Same shape, different color
 
-The status shapes naturally allow more room for interpretation than the status icons. Certain shapes can take on different colors for different circumstances. However, NEVER use the same shape, in different colors, within the same experience.
-
-
+The status shapes naturally allow more room for interpretation than the status
+icons. Certain shapes can take on different colors for different circumstances.
+However, NEVER use the same shape, in different colors, within the same
+experience.
 
 <StatusIndicatorTable attention="glyph" />