feat: update to gatsby-theme-carbon v4 and gatsby v5 (#3979)

* feat: start migration * Update documentation.mdx * Update data-visualization.scss * Update Grid.module.scss * chore: test * chore: cleanup * fix: all the things * chore: extra file * chore: update package json * chore: stuff * chore: more stuff * chore: stuff * chore: prettier * chore: remove random image * chore: missing stuff * chore: prettier version * chore: prettier * chore: quotes * chore: quotes * chore: nvm * chore: stuff * chore: resource links * chore: uncomment css * chore: missing file * chore: add eslint * chore: packages * chore: missing packages * chore: cleanup * chore: add remark images * chore: fix build * chore: cleanup * fix: get carbon react version from gatsby theme * chore: update to latest theme * chore: update gatsby-theme-carbon 4.0.0-next.9 * chore: update theme version * chore: update carbon and theme to latest * chore: yarn install state * chore: eslint carbon version * chore: fix lint errors * chore: update to latest * chore; remove install state * chore: fix * chore: install state * chore: remove install state * chore: gitignore * fix: breaking build encode brackets * chore: update icon and pictogram versions * chore: prettier * chore: revert to older icons package * fix: meetups styles and content switcher size * fix: image path and style bugs * chore: fix lockfile * chore: fix * chore: fix lockfile * chore: update icons and theme to latest version * chore: merge * chore: yarn version fix ci * chore: format
carbon-design-system · Sep 10, 2024 · 9a6ac0d · 9a6ac0d
1 parent e23e1b3
commit 9a6ac0d
Show file tree

Hide file tree

Showing 98 changed files with 6,906 additions and 7,496 deletions.
diff --git a/README.md b/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

diff --git a/gatsby-config.js b/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',
   ],
 };
diff --git a/gatsby-ssr.js b/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"

diff --git a/package.json b/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": {

diff --git a/src/components/ColorPalette/ColorPalette.js b/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>

diff --git a/src/components/ColorPalette/ColorPalette.module.scss b/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