Merge branch 'main' into plex-docs

.all-contributorsrc

@@ -774,6 +774,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "adamalston",
+      "name": "Adam Alston",
+      "avatar_url": "https://avatars.githubusercontent.com/u/18297826?v=4",
+      "profile": "https://github.com/adamalston",
+      "contributions": [
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"

.yarnrc

@@ -1,4 +1,4 @@
 # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
 # yarn lockfile v1
 
-yarn-path ".yarn/releases/yarn-3.0.0-rc.1.cjs"
+yarn-path ".yarn/releases/yarn-3.0.0.cjs"

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: "@yarnpkg/plugin-workspace-tools"
 
-yarnPath: .yarn/releases/yarn-3.0.0-rc.1.cjs
+yarnPath: .yarn/releases/yarn-3.0.0.cjs

config/eslint-config-carbon/package.json

@@ -1,7 +1,7 @@
 {
   "name": "eslint-config-carbon",
   "description": "ESLint configuration for Carbon",
-  "version": "2.7.0",
+  "version": "2.8.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {

config/jest-config-carbon/package.json

@@ -2,7 +2,7 @@
   "name": "jest-config-carbon",
   "private": true,
   "description": "Jest configuration and preset for Carbon",
-  "version": "0.7.0",
+  "version": "0.8.0-rc.0",
   "license": "Apache-2.0",
   "main": "index.js",
   "repository": {
@@ -27,14 +27,14 @@
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.14.6",
-    "accessibility-checker": "^3.1.8",
-    "axe-core": "^4.2.2",
+    "accessibility-checker": "^3.1.9",
+    "axe-core": "^4.3.2",
     "babel-jest": "^27.0.6",
     "chalk": "^4.1.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
-    "jest-circus": "^27.0.5",
+    "jest-circus": "^27.0.6",
     "jest-watch-typeahead": "^0.6.4"
   },
   "devDependencies": {

package.json

@@ -46,11 +46,11 @@
     "@carbon/cli": "workspace:packages/cli",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@percy/cli": "^1.0.0-beta.48",
-    "@testing-library/dom": "^7.26.6",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.1",
-    "@testing-library/user-event": "^13.1.9",
+    "@percy/cli": "^1.0.0-beta.61",
+    "@testing-library/dom": "^8.1.0",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@testing-library/user-event": "^13.2.1",
     "all-contributors-cli": "^6.19.0",
     "cross-env": "^5.2.0",
     "cross-spawn": "^6.0.5",
@@ -59,7 +59,7 @@
     "fs-extra": "^8.1.0",
     "glob": "^7.1.4",
     "husky": "^4.0.10",
-    "jest": "^27.0.5",
+    "jest": "^27.0.6",
     "jest-junit": "^10.0.0",
     "lerna": "^3.20.2",
     "lint-staged": "^9.5.0",

packages/carbon-react/.storybook/styles.scss

@@ -9,7 +9,10 @@ $feature-flags: (
   enable-v11-release: true,
 );
 
-@use '../index.scss' as styles;
+@use '../index.scss' as styles with (
+  $css--font-face: true,
+  $css--plex-arabic: true,
+);
 @use '../scss/components/button';
 @use '../scss/components/tag';
 

packages/carbon-react/README.md

@@ -18,14 +18,30 @@ instead:
 yarn add @carbon/react
 ```
 
-## Usage
+This package requires [Dart Sass](http://npmjs.com/package/sass) in order to
+compile styles.
+
+If you're new to Sass, or are wondering how to configure Sass for your project,
+we recommend checking out the following resources and links:
+
+- [Sass Basics](https://sass-lang.com/guide)
+- [Webpack with Sass](https://webpack.js.org/loaders/sass-loader/)
+- [Next.js with Sass](https://nextjs.org/docs/basic-features/built-in-css-support#sass-support)
+- [Create React App with Sass](https://create-react-app.dev/docs/adding-a-sass-stylesheet/)
+- [Parcel with Sass](https://v2.parceljs.org/languages/sass/)
+- [Vite with Sass](https://vitejs.dev/guide/features.html#css-pre-processors)
+- [Snowpack with Sass](https://www.snowpack.dev/guides/sass/)
 
-**Note: this package is unstable and will change before it's 1.0 release**
+Once you get Sass up and running in your project, configure Sass to include
+`node_modules` in its `includePaths` option. For more information, checkout the
+[configuration](../styles/docs/sass.md#configuration) section in our Sass docs.
+
+## Usage
 
-You can use the `@carbon/react` to bring in components, icons, and styles from
-the Carbon Design System.
+The `@carbon/react` package provides components and icons for the Carbon Design
+System.
 
-To include a component, you can import it:
+To use a component, you can import it directly from the package:
 
 ```jsx
 import { Button } from '@carbon/react';
@@ -35,8 +51,25 @@ function MyComponent() {
 }
 ```
 
-To include an icon, use the `@carbon/react/icons` entrypoint and import it the
-same way you would import a component:
+To include the styles for a specific component, you can either import all the
+styles from the project or include the styles for a specific component:
+
+```scss
+// Bring in all the styles for Carbon
+@use '@carbon/react';
+
+// Preferred: bring in the styles for one component
+@use '@carbon/react/scss/components/button';
+```
+
+For a full list of components available, checkout our
+[Storybook](https://carbon-react-next.netlify.app/).
+
+### Icons
+
+The `@carbon/react` package also provides icon components that you can include
+in your project. You can import these icon components from the
+`@carbon/react/icons` entrypoint:
 
 ```jsx
 import { Add } from '@carbon/react/icons';
@@ -46,21 +79,15 @@ function MyComponent() {
 }
 ```
 
-For styles, you can bring them in using Sass Modules:
-
-```jsx
-@use '@carbon/react';
-```
-
-Note: you will need to configure Sass in order to correctly find modules in your
-`node_modules`. Follow [this guide](./docs/sass.md#configuration) to make sure
-your project is setup correctly.
+For a full list of icons available, checkout our
+[website](https://www.carbondesignsystem.com/guidelines/icons/library/).
 
 ## 📖 API Documentation
 
 If you're looking for `@carbon/react` API documentation, check out:
 
-- [Sass](./docs/sass.md)
+- [Storybook](https://carbon-react-next.netlify.app/)
+- [Icon Library](https://www.carbondesignsystem.com/guidelines/icons/library/).
 
 ## 🙌 Contributing