From 441b45bac26834dc5366c28247ffcf305feda5b9 Mon Sep 17 00:00:00 2001
From: Vince Picone
Date: Mon, 23 Aug 2021 14:09:31 -0500
Subject: [PATCH] [Don't merge yet] feat: update to gtc v2 and gatsby v3
(#2416)
* chore: update deps
* fix: gatsby v3 migration woes
* chore: fix shadowing issues
* chore: update charts to use gatsby-image
Co-authored-by: Josefina Mancilla <32556167+jnm2377@users.noreply.github.com>
---
gatsby-node.js | 2 +-
package.json | 43 +-
.../ChartIndexPage/ChartIndexListItem.js | 8 +-
.../ChartIndexPage/useChartIndexData.js | 4 +-
src/components/ComponentDemo/KnobContainer.js | 2 -
.../ComponentIndexListItem.js | 8 +-
.../SVGLibraries/IconLibrary/IconLibrary.js | 7 +-
.../PictogramLibrary/PictogramLibrary.js | 12 +-
.../SVGLibraries/shared/ActionBar.js | 14 +-
.../status-indicators/status-indicators.yaml | 39 +-
.../components/{Footer.js => Footer/index.js} | 2 +-
.../components/{Header.js => Header/index.js} | 0
src/gatsby-theme-carbon/templates/Homepage.js | 6 +-
.../designing/design-resources/index.mdx | 12 +-
.../developing/frameworks/web-components.mdx | 43 +-
.../status-indicator-pattern/index.mdx | 10 +-
yarn.lock | 13335 ++++++++--------
17 files changed, 6770 insertions(+), 6777 deletions(-)
rename src/gatsby-theme-carbon/components/{Footer.js => Footer/index.js} (96%)
rename src/gatsby-theme-carbon/components/{Header.js => Header/index.js} (100%)
diff --git a/gatsby-node.js b/gatsby-node.js
index 5f3aaca591d..d3a044d179d 100644
--- a/gatsby-node.js
+++ b/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$/,
diff --git a/package.json b/package.json
index 7476bae8764..3625dfa3f7a 100644
--- a/package.json
+++ b/package.json
@@ -37,12 +37,11 @@
"/node_modules/*"
],
"resolutions": {
- "carbon-components": "^10.42.0",
- "carbon-components-react": "^7.42.0",
- "@carbon/elements": "^10.41.0",
- "@carbon/icons": "^10.38.0",
- "@carbon/icons-react": "^10.38.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.42.1",
@@ -51,7 +50,7 @@
"@carbon/icons-react": "^10.38.0",
"@carbon/pictograms": "^11.16.0",
"@carbon/pictograms-react": "^11.16.0",
- "@loadable/component": "^5.12.0",
+ "@loadable/component": "^5.15.0",
"@slack/web-api": "^5.11.0",
"carbon-components": "^10.42.0",
"carbon-components-react": "^7.42.0",
@@ -60,9 +59,10 @@
"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-plugin-image": "^1.12.0",
+ "gatsby-theme-carbon": "^2.0.0-next.3",
"lodash-es": "^4.17.15",
"markdown-it": "^9.0.1",
"nanoid": "^2.1.11",
@@ -75,13 +75,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,22 +95,21 @@
"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",
"markdown-loader": "^5.0.0",
- "node-fetch": "^3.0.0-beta.9",
+ "node-fetch": "^2.6.1",
"prettier": "^2.0.2",
"prismjs": "^1.17.1",
- "react-ga": "^2.6.0",
"use-resize-observer": "^4.0.0"
},
"husky": {
diff --git a/src/components/ChartIndexPage/ChartIndexListItem.js b/src/components/ChartIndexPage/ChartIndexListItem.js
index e924d76bbef..4fff67fc9e6 100644
--- a/src/components/ChartIndexPage/ChartIndexListItem.js
+++ b/src/components/ChartIndexPage/ChartIndexListItem.js
@@ -6,7 +6,7 @@
*/
import { Link, Tag, TooltipIcon } from 'carbon-components-react';
-import Image from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
import React from 'react';
// Placeholder image
@@ -16,12 +16,12 @@ const ChartIndexListItem = React.memo(
({ codeUrl, description, image, maintainer, name, websiteUrl }) => {
let img;
- if (image?.fluid) {
+ if (image?.gatsbyImageData) {
img = (
-
);
} else {
diff --git a/src/components/ChartIndexPage/useChartIndexData.js b/src/components/ChartIndexPage/useChartIndexData.js
index c29cd2207b4..784bcc72cd9 100644
--- a/src/components/ChartIndexPage/useChartIndexData.js
+++ b/src/components/ChartIndexPage/useChartIndexData.js
@@ -14,9 +14,7 @@ const CHART_INDEX_DATA = graphql`
name
relativeDirectory
childImageSharp {
- fluid(maxWidth: 640, maxHeight: 480) {
- ...GatsbyImageSharpFluid
- }
+ gatsbyImageData(width: 640, height: 480)
}
}
}
diff --git a/src/components/ComponentDemo/KnobContainer.js b/src/components/ComponentDemo/KnobContainer.js
index 08e1d9eb875..1a766a816c7 100644
--- a/src/components/ComponentDemo/KnobContainer.js
+++ b/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}
/>
diff --git a/src/components/ComponentIndexPage/ComponentIndexListItem.js b/src/components/ComponentIndexPage/ComponentIndexListItem.js
index 302355f9644..c0a2d3fcc17 100644
--- a/src/components/ComponentIndexPage/ComponentIndexListItem.js
+++ b/src/components/ComponentIndexPage/ComponentIndexListItem.js
@@ -8,7 +8,7 @@
import { Link, Tag, TooltipIcon } from 'carbon-components-react';
-import Image from 'gatsby-image';
+import { GatsbyImage } from 'gatsby-plugin-image';
import React from 'react';
import angularIcon from './images/Angular.svg';
import axureIcon from './images/Axure.svg';
@@ -48,12 +48,12 @@ const ComponentIndexListItem = React.memo(
}) => {
let img;
- if (image?.fluid) {
+ if (image?.gatsbyImageData) {
img = (
-
);
} else {
diff --git a/src/components/SVGLibraries/IconLibrary/IconLibrary.js b/src/components/SVGLibraries/IconLibrary/IconLibrary.js
index 27f054ca7c4..54f41ac0e60 100644
--- a/src/components/SVGLibraries/IconLibrary/IconLibrary.js
+++ b/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');
diff --git a/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js b/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js
index 93bc7b1c95b..53a9beaa326 100644
--- a/src/components/SVGLibraries/PictogramLibrary/PictogramLibrary.js
+++ b/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);
diff --git a/src/components/SVGLibraries/shared/ActionBar.js b/src/components/SVGLibraries/shared/ActionBar.js
index a54adf6a2e9..8a27dcec1b1 100644
--- a/src/components/SVGLibraries/shared/ActionBar.js
+++ b/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,
})}>
setIsActionBarVisible(true)}
onClick={handleDownload}
- className={styles.tooltip}
- triggerClassName={styles.trigger}
+ className={tooltip}
+ triggerClassName={trigger}
/>
{shouldShowCopyButton && (
setIsActionBarVisible(true)}
- className={styles.tooltip}
- triggerClassName={styles.trigger}
+ className={tooltip}
+ triggerClassName={trigger}
/>
)}
diff --git a/src/data/status-indicators/status-indicators.yaml b/src/data/status-indicators/status-indicators.yaml
index 951077eaa69..aa7a3927a31 100644
--- a/src/data/status-indicators/status-indicators.yaml
+++ b/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
diff --git a/src/gatsby-theme-carbon/components/Footer.js b/src/gatsby-theme-carbon/components/Footer/index.js
similarity index 96%
rename from src/gatsby-theme-carbon/components/Footer.js
rename to src/gatsby-theme-carbon/components/Footer/index.js
index a327a1dcb6f..1b2890916b7 100644
--- a/src/gatsby-theme-carbon/components/Footer.js
+++ b/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 = {
diff --git a/src/gatsby-theme-carbon/components/Header.js b/src/gatsby-theme-carbon/components/Header/index.js
similarity index 100%
rename from src/gatsby-theme-carbon/components/Header.js
rename to src/gatsby-theme-carbon/components/Header/index.js
diff --git a/src/gatsby-theme-carbon/templates/Homepage.js b/src/gatsby-theme-carbon/templates/Homepage.js
index cfedf47eccf..3c70ac82730 100644
--- a/src/gatsby-theme-carbon/templates/Homepage.js
+++ b/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 = () => Carbon Design System
;
@@ -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.
-
+
Start contributing →
@@ -45,7 +45,7 @@ const customProps = {
diff --git a/src/pages/developing/frameworks/web-components.mdx b/src/pages/developing/frameworks/web-components.mdx
index 573746dd098..e868a270d1f 100644
--- a/src/pages/developing/frameworks/web-components.mdx
+++ b/src/pages/developing/frameworks/web-components.mdx
@@ -63,21 +63,28 @@ support, contact the
#### How to install
-All components are available via CDN. This means that they can be added to your application without the need of any
-bundler configuration. Each component is available by the `latest` tag, or referencing a specific version (starting at
+All components are available via CDN. This means that they can be added to your
+application without the need of any bundler configuration. Each component is
+available by the `latest` tag, or referencing a specific version (starting at
version `v1.16.0`):
```html
-
+
-
+
```
These are the list of available components via CDN:
-- accordion.min.js
+- accordion.min.js
- breadcrumb.min.js
- button.min.js
- checkbox.min.js
@@ -119,27 +126,36 @@ These are the list of available components via CDN:
- tooltip.min.js
- ui-shell.min.js
-To use the right-to-left (RTL) version of the artifacts, change the file extention from `.min.js` to `.rtl.min.js`. For
-example:
+To use the right-to-left (RTL) version of the artifacts, change the file
+extention from `.min.js` to `.rtl.min.js`. For example:
```html
-
+
-
+
```
#### Basic usage
-The CDN artifacts define the custom elements for the browser, so they can be directly used once the script tag has been
-added to the page. For example:
+The CDN artifacts define the custom elements for the browser, so they can be
+directly used once the script tag has been added to the page. For example:
```html
-
+