chore: merge conflicts

carbon-design-system · Sep 26, 2024 · 0b44f44 · 0b44f44
2 parents 22508ce + c760d9b
commit 0b44f44
Show file tree

Hide file tree

Showing 213 changed files with 8,352 additions and 8,403 deletions.
diff --git a/.github/workflows/update-carbon-gatsby-deps.yml b/.github/workflows/update-carbon-gatsby-deps.yml
@@ -24,11 +24,8 @@ jobs:
       - name: Update dependencies
         run: |
           yarn up \
-            @carbon/react@next \
-            @carbon/elements@next \
             @carbon/pictograms@next \
             @carbon/pictograms-react@next \
-            @carbon/icons@next \
             @carbon/icons-react@next \
             gatsby-theme-carbon@latest \
       - name: Generate token

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npx --no-install lint-staged
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,9 +17,10 @@
     "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}'",
-    "update-browserslist": "npx browserslist-ga"
+    "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",
+    "prepare": "husky"
   },
   "engines": {
     "node": ">=18.x"
@@ -37,74 +37,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.76.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"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "typescript": "^4.8.4"
   },
   "lint-staged": {
     "*.js": [

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