feat: update to gatsby-theme-carbon v4 and gatsby v5

README.md

@@ -3,8 +3,9 @@
 ![Deployment status](https://github.com/carbon-design-system/carbon-website/workflows/Deployment%20status/badge.svg)
 
 This is the [Carbon Design System website](http://www.carbondesignsystem.com).
-It's built using the [gatsby-theme-carbon](https://gatsby.carbondesignsystem.com/)
-with [GatsbyJS](https://www.gatsbyjs.org/).
+It's built using the
+[gatsby-theme-carbon](https://gatsby.carbondesignsystem.com/) with
+[GatsbyJS](https://www.gatsbyjs.org/).
 
 ## 📂 Structure
 
@@ -22,8 +23,10 @@ src
 ## 👩‍💻 Develop
 
 - 🤝 [Contribution guidelines](.github/CONTRIBUTING.md)
-- 📚 [Content and Markdown guidelines](https://gatsby-theme-carbon.now.sh/components/markdown)
-- 🗺 [Navigation guidelines](https://gatsby-theme-carbon.now.sh/guides/navigation/sidebar)
+- 📚
+  [Content and Markdown guidelines](https://gatsby-theme-carbon.now.sh/components/markdown)
+- 🗺
+  [Navigation guidelines](https://gatsby-theme-carbon.now.sh/guides/navigation/sidebar)
 
 - `yarn install` – install dependencies
 - `yarn dev` – start the development server

gatsby-config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  trailingSlash: `always`,
   siteMetadata: {
     title: 'Carbon Design System',
     siteUrl: 'https://www.carbondesignsystem.com',
@@ -38,6 +39,16 @@ module.exports = {
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     'gatsby-plugin-lodash',
+    {
+      resolve: 'gatsby-plugin-manifest',
+      options: {
+        name: 'Carbon Design System',
+        short_name: 'Carbon',
+        icon: 'src/images/favicon.svg',
+        start_url: '/',
+        display: 'browser',
+      },
+    },
     {
       resolve: 'gatsby-theme-carbon',
       options: {
@@ -55,28 +66,12 @@ module.exports = {
         },
       },
     },
-    {
-      resolve: 'gatsby-plugin-manifest',
-      options: {
-        name: 'Carbon Design System',
-        short_name: 'Carbon',
-        icon: 'src/images/favicon.svg',
-      },
-    },
     'gatsby-plugin-sitemap',
-    {
-      resolve: 'gatsby-plugin-component-index',
-      options: {
-        directory: path.resolve(__dirname, './src/data/index'),
-      },
-    },
     {
       resolve: 'gatsby-plugin-chart-index',
       options: {
         directory: path.resolve(__dirname, './src/data/chart-index'),
       },
     },
-    'gatsby-plugin-remove-serviceworker',
-    'gatsby-plugin-meta-redirect',
   ],
 };

gatsby-ssr.js

@@ -21,7 +21,7 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
   }`;
 
   setHeadComponents([
-    <meta key="image" name="image" content={'/ogimage.png'} />,
+    <meta key="image" name="image" content={"/ogimage.png"} />,
     <meta
       key="og:url"
       property="og:url"
@@ -33,13 +33,13 @@ export const onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
       property="og:description"
       content="Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors."
     />,
-    <meta key="og:image" property="og:image" content={'/ogimage.png'} />,
+    <meta key="og:image" property="og:image" content={"/ogimage.png"} />,
     <meta
       key="og:image:alt"
       property="og:image:alt"
       content="Carbon Design System logo"
     />,
-    <meta key="twitter:image" name="twitter:image" content={'/ogimage.png'} />,
+    <meta key="twitter:image" name="twitter:image" content={"/ogimage.png"} />,
     <meta
       key="twitter:image:alt"
       property="twitter:image:alt"

package.json

@@ -1,8 +1,7 @@
 {
   "name": "carbondesignsystem",
   "private": true,
-  "version": "1.0.0",
-  "main": "index.js",
+  "version": "2.0,0",
   "license": "MIT",
   "workspaces": {
     "packages": [
@@ -18,8 +17,8 @@
     "build:analyze": "yarn install --force && yarn clean && ANALYZE=true yarn build",
     "serve": "gatsby serve",
     "lint:js": "NODE_ENV=test eslint . --fix",
-    "format": "prettier --write 'src/**/*.{css,scss,json,html,yaml,md,mdx}'",
-    "format:check": "prettier --check 'src/**/*.{css,scss,json,html,yaml,md,mdx}'",
+    "format": "prettier --write 'src/**/*.{css,scss,json,html,yaml,md,mdx,js}'",
+    "format:check": "prettier --check 'src/**/*.{css,scss,json,html,yaml,md,mdx,js}'",
     "update-browserslist": "npx browserslist-ga"
   },
   "engines": {
@@ -37,69 +36,38 @@
     "/node_modules/*"
   ],
   "dependencies": {
-    "@babel/core": "^7.15.8",
     "@carbon/charts-react": "0.55.0",
-    "@carbon/elements": "^11.51.0",
-    "@carbon/icons": "^11.47.0",
-    "@carbon/icons-react": "^11.47.0",
-    "@carbon/pictograms": "^12.38.0",
-    "@carbon/pictograms-react": "^11.64.0",
-    "@carbon/react": "^1.64.0",
-    "@loadable/component": "^5.15.2",
-    "@slack/web-api": "^5.11.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-gatsby": "^2.9.0",
-    "change-case": "^4.1.1",
-    "classnames": "^2.2.6",
-    "codesandbox": "^2.1.10",
-    "copy-to-clipboard": "^3.2.1",
-    "fuse.js": "^6.4.1",
-    "gatsby": "^4.25.7",
-    "gatsby-image": "^3.7.1",
-    "gatsby-plugin-image": "^2.9.0",
-    "gatsby-theme-carbon": "^3.4.19",
-    "lodash-es": "^4.17.15",
-    "markdown-it": "^12.3.2",
-    "nanoid": "^2.1.11",
-    "prettier-config-carbon": "^0.4.0",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-copy-to-clipboard": "^5.0.1",
-    "react-dom": "^17.0.2",
-    "react-live": "^3.1.0",
-    "use-media": "^1.4.0",
-    "webpack": "^5.94.0"
+    "@carbon/icons-react": "^11.48.0",
+    "@carbon/pictograms": "^12.39.0",
+    "@carbon/pictograms-react": "^11.65.0",
+    "@loadable/babel-plugin": "^5.16.1",
+    "@loadable/component": "^5.16.4",
+    "codesandbox": "^2.2.3",
+    "d3": "^7.9.0",
+    "gatsby": "^5.13.5",
+    "gatsby-plugin-sharp": "^5.13.1",
+    "gatsby-theme-carbon": "^4.0.8",
+    "markdown-it": "^14.1.0",
+    "prettier-config-carbon": "^0.11.0",
+    "react": "^18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@loadable/babel-plugin": "^5.12.0",
-    "@loadable/webpack-plugin": "^5.15.2",
-    "@now/node": "^1.6.1",
-    "@philpl/buble": "^0.19.7",
-    "babel-eslint": "^10.1.0",
     "babel-preset-carbon": "^0.0.14",
-    "core-js": "^3.18.3",
-    "d3": "7.0.0",
-    "dotenv": "^8.2.0",
-    "eslint": "^8.36.0",
-    "eslint-config-carbon": "^3.1.0",
-    "fs-extra": "^9.0.1",
-    "gatsby-plugin-lodash": "^5.9.0",
-    "gatsby-plugin-manifest": "^4.9.0",
-    "gatsby-plugin-meta-redirect": "^1.1.1",
-    "gatsby-plugin-remove-serviceworker": "^1.0.0",
-    "gatsby-plugin-sharp": "^4.25.1",
-    "gatsby-plugin-sitemap": "^5.9.0",
-    "gatsby-remark-images": "^6.9.0",
-    "gatsby-source-filesystem": "^4.9.0",
-    "gatsby-transformer-sharp": "^4.9.0",
-    "html-loader": "^3.1.0",
-    "husky": "^4.2.3",
+    "eslint": "^8.57.0",
+    "eslint-config-carbon": "3.15.0",
+    "gatsby-plugin-lodash": "^6.13.1",
+    "gatsby-plugin-sitemap": "^6.13.1",
+    "gatsby-source-filesystem": "^5.13.1",
+    "gatsby-transformer-sharp": "^5.13.1",
+    "html-loader": "^5.1.0",
+    "husky": "^9.0.11",
     "lint-staged": ">=10.0.9",
-    "markdown-loader": "^6.0.0",
-    "node-fetch": "^2.6.1",
+    "markdown-loader": "^8.0.0",
     "prettier": "^2.0.2",
-    "prismjs": "^1.17.1",
-    "use-resize-observer": "^4.0.0"
+    "typescript": "^4.8.4"
   },
   "husky": {
     "hooks": {

src/components/ColorPalette/ColorPalette.js

@@ -179,7 +179,8 @@ const ColorPalette = ({
             onChange={handleKeyboard}
             className={paletteSwitcher}
             selectionMode="automatic"
-            selectedIndex={0}>
+            selectedIndex={0}
+            size="lg">
             <Switch text={switcherOne} onClick={activateFirstSwitcher} />
             <Switch text={switcherTwo} onClick={activateSecondSwitcher} />
           </ContentSwitcher>

src/components/ColorPalette/ColorPalette.module.scss

@@ -56,8 +56,8 @@
 }
 
 .palette-switcher :global(.cds--content-switcher-btn) {
-  border-radius: 0;
   color: $text-01;
+  border-radius: 0 !important;
 }
 
 .palette-switcher :global(.cds--content-switcher--selected) {
@@ -67,11 +67,7 @@
 .palette-switcher :global(.cds--content-switcher-btn:focus) {
   outline: 1px solid $inverse-focus-ui;
   box-shadow: none;
-  outline-offset: -4px;
-}
-
-.palette-switcher :global(.cds--content-switcher-btn) {
-  border-radius: 0;
+  outline-offset: -5px;
 }
 
 .palette-switcher