chore(project): v11.0.0-beta.1 (#9368)

* chore(project): v11.0.0-beta.1 * chore(project): v11.0.0-beta.1 * docs(carbon-react): update README to match styles
carbon-design-system · Jul 30, 2021 · 6d3c512 · 6d3c512
1 parent 068ccc4
commit 6d3c512
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 134 deletions.
diff --git a/packages/carbon-react/README.md b/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
 

diff --git a/packages/carbon-react/docs/sass.md b/packages/carbon-react/docs/sass.md
diff --git a/packages/carbon-react/package.json b/packages/carbon-react/package.json
@@ -1,8 +1,7 @@
 {
   "name": "@carbon/react",
-  "private": true,
   "description": "React components for the Carbon Design System",
-  "version": "0.8.0",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -42,7 +41,7 @@
   "dependencies": {
     "@carbon/feature-flags": "^0.5.0",
     "@carbon/icons-react": "^10.36.0",
-    "@carbon/styles": "^0.11.0",
+    "@carbon/styles": "^0.1.0",
     "@carbon/telemetry": "0.0.0-alpha.6",
     "carbon-components-react": "^7.40.0"
   },
@@ -54,7 +53,6 @@
     "@babel/plugin-transform-react-constant-elements": "^7.14.5",
     "@babel/preset-env": "^7.14.7",
     "@babel/preset-react": "^7.14.5",
-    "@carbon/styles": "^0.11.0-rc.0",
     "@carbon/themes": "^10.39.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^18.0.0",

diff --git a/packages/cli/src/commands/sync/readme.js b/packages/cli/src/commands/sync/readme.js
@@ -17,6 +17,7 @@ const monorepo = require('./remark/remark-monorepo');
 const packageDenyList = new Set([
   'carbon-components',
   'carbon-components-react',
+  '@carbon/react',
   '@carbon/sketch',
   '@carbon/styles',
 ]);

diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -1,8 +1,7 @@
 {
   "name": "@carbon/styles",
-  "private": true,
   "description": "Styles for the Carbon Design System",
-  "version": "0.11.0",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

diff --git a/yarn.lock b/yarn.lock
@@ -1997,7 +1997,7 @@ __metadata:
     "@babel/preset-react": ^7.14.5
     "@carbon/feature-flags": ^0.5.0
     "@carbon/icons-react": ^10.36.0
-    "@carbon/styles": ^0.11.0-rc.0
+    "@carbon/styles": ^0.1.0
     "@carbon/telemetry": 0.0.0-alpha.6
     "@carbon/themes": ^10.39.0
     "@rollup/plugin-babel": ^5.3.0
@@ -2065,7 +2065,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/styles@^0.11.0-rc.0, @carbon/styles@workspace:packages/styles":
+"@carbon/styles@^0.1.0, @carbon/styles@workspace:packages/styles":
   version: 0.0.0-use.local
   resolution: "@carbon/styles@workspace:packages/styles"
   dependencies: