Update examples/with-carbon-components (#15190)

The example used an outdated version of carbon components v9.

The latest got a huge facelift, new components and a lot of optimizations.
I updated the example with carbon-components v10.

examples/with-carbon-components/README.md

@@ -42,3 +42,11 @@ yarn dev
 ```
 
 Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+
+## Optimizations
+
+In this example we import carbon components in the `styles/custom-theme.scss` file like this:
+@import '~carbon-components/scss/globals/scss/styles.scss';
+
+When we start to consider the performance of this approach, however, it becomes clear that this will include every single bit of CSS that Carbon outputs. Sometimes, you totally need everything that the project provides, but for a good number of teams you may find yourself using only a subset of our components. Here is a great article about how you can optimize your application using carbon components:
+https://medium.com/carbondesign/minimal-css-with-carbon-b0c089ccfa71

examples/with-carbon-components/package.json

@@ -10,10 +10,12 @@
   },
   "license": "ISC",
   "dependencies": {
-    "carbon-components": "^9.6.4",
-    "carbon-components-react": "^6.19.1",
+    "@carbon/icons-react": "^10.3.0",
+    "carbon-components": "^10.3.0",
+    "carbon-components-react": "^7.3.0",
     "carbon-icons": "^7.0.7",
     "next": "latest",
+    "node-sass": "^4.12.0",
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   }

examples/with-carbon-components/styles/custom-theme.scss

@@ -1,2 +1 @@
-@import './export.scss';
 @import '~carbon-components/scss/globals/scss/styles.scss';