docs(web-components): update wc readme (#18716)

kennylam · web-flow · commit f453dac8ff31 · 2025-02-28T16:51:42.000Z
diff --git a/README.md b/README.md
@@ -310,7 +310,6 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/Neues"><img src="https://avatars.githubusercontent.com/u/9409245?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Noah Sgorbati</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=Neues" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/divya-281"><img src="https://avatars.githubusercontent.com/u/72991264?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Divya G</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=divya-281" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/soumyaraju"><img src="https://avatars.githubusercontent.com/u/41182657?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Soumya Raju</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=soumyaraju" title="Code">💻</a></td>
-    <td align="center"><a href="https://irfadkp.github.io/"><img src="https://avatars.githubusercontent.com/u/54243898?v=4?s=100" width="100px;" alt=""/><br /><sub><b>IRFAD KP</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=irfadkp" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/mikdhadc"><img src="https://avatars.githubusercontent.com/u/54241506?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mohammed Mikdhad C</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=mikdhadc" title="Code">💻</a></td>
   </tr>
   <tr>
diff --git a/packages/web-components/README.md b/packages/web-components/README.md
@@ -8,7 +8,7 @@ To install `@carbon/web-components` in your project, you will need to run the
 following command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install --save @carbon/web-components
+npm install -S @carbon/web-components
 ```
 
 If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
@@ -20,13 +20,10 @@ yarn add @carbon/web-components
 
 ### Usage
 
-#### ES imports
+The `@carbon/web-components` package provides components for the Carbon Design
+System.
 
-The first thing you need is **setting up a module bundler** to resolve
-ECMAScript `import`s. The above example uses [Webpack](https://webpack.js.org),
-but you can use other bundlers like [Rollup](https://rollupjs.org/) too.
-
-Once you set up a module bundler, you can start importing component modules:
+To use a component, you can import it directly from the package:
 
 ```javascript
 import '@carbon/web-components/es/components/dropdown/dropdown.js';
@@ -46,23 +43,20 @@ same manner as native HTML tags:
 </cds-dropdown>
 ```
 
-See a working example
-[here](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/dropdown).
-
 #### CDN
 
-The CDN artifacts define the custom elements for the browser, so they can be
-directly used once the script tag has been added to the page. For example:
+CDN artifacts are also available and can be added directly to the page (starting
+at version `v1.16.0`):
 
 ```html
 <!doctype html>
 <html>
   <head>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
+      src="https://1.www.s81c.com/common/carbon/web-components/version/v2.24.0/dropdown.min.js"></script>
     <style type="text/css">
-      // Suppresses the custom element until it has been defined
+      <!-- hide custom element until it has been defined //-->
       cds-dropdown:not(:defined),
       cds-dropdown-item:not(:defined) {
         visibility: hidden;
@@ -83,44 +77,11 @@ directly used once the script tag has been added to the page. For example:
 </html>
 ```
 
-Each component is available by referencing a specific version (starting at
-version `v1.16.0`):
-
-<!-- By specific version -->
-<script
-  type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.16.0/accordion.min.js"></script>
-
-```
-
-See a working example
-[here](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/dropdown?file=cdn.html).
-
-For a full list of components available, check out our
-[Storybook](https://web-components.carbondesignsystem.com/).
-
 ### Other usage guides
 
 - [Using components in a form](./docs/form.md)
 - [Using custom styles in components](./docs/styling.md)
 
-## Getting started with development
-
-1. Fork this repository and clone it
-2. `yarn install`
-3. `cd packages/carbon-web-components`
-4. `yarn wca && yarn storybook`
-
-## Creating build
-
-```
-
-> yarn install yarn build
-
-```
-
-You'll see the build artifacts in `/path/to/carbon-web-components/es` directory.
-
 ## 📖 API Documentation
 
 If you're looking for `@carbon/web-components` API documentation, check out:
@@ -145,4 +106,3 @@ collection. To opt out, see
 [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
 For more information on the data being collected, please see the
 [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).
-```
