carbon-design-system · matthewgallo · Nov 21, 2024 · Nov 20, 2024 · Nov 21, 2024 · Nov 21, 2024
@@ -1,9 +1,20 @@
 import { mergeConfig } from 'vite';
 import { litStyleLoader, litTemplateLoader } from '@mordech/vite-lit-loader';
 import viteSVGResultCarbonIconLoader from '../tools/vite-svg-result-carbon-icon-loader';
-
+const glob = require('fast-glob');
+const stories = glob.sync(
+  [
+    '../docs/**/*.mdx',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  {
+    ignore: ['../src/**/docs/*.mdx'],
+    cwd: __dirname,
+  }
+);
 const config = {
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: stories,
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-toolbars',
@@ -23,9 +34,6 @@ const config = {
     name: '@storybook/web-components-vite',
     options: {},
   },
-  docs: {
-    autodocs: 'tag',
-  },
   async viteFinal(config) {
     return mergeConfig(config, {
       plugins: [

@@ -60,6 +60,7 @@
     "@mordech/vite-lit-loader": "^0.35.0",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@storybook/addon-essentials": "^8.3.6",

@@ -6,12 +6,6 @@ import * as SidePanelStories from './side-panel.stories';
 
 # SidePanel
 
-> 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
-> example implementation.
-
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/side-panel)
-
 Side panels keep users in-context of a page while performing tasks like
 navigating, editing, viewing details, or configuring something new.
 
@@ -22,16 +16,13 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import '@carbon/web-components/es/components/side-panel/index.js';
+import '@carbon/ibm-products-web-components/es/components/side-panel/index.js';
 // The following are used for slotted fields
 import '@carbon/web-components/es/components/text-input/index.js';
 import '@carbon/web-components/es/components/textarea/index.js';
 import '@carbon/web-components/es/components/button/index.js';
 ```
 
-<Markdown>{`${cdnJs({ components: ['side-panel'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
-
 ### HTML
 
 ```html

@@ -432,7 +432,7 @@ const defaultTemplate = {
         size=${args.size}
         ?slide-in=${args.slideIn}
         .title=${args.title}
-        @cds-side-panel-navigate-back=${prevStep}
+        @c4p-side-panel-navigate-back=${prevStep}
       >
         <!-- default slotted content -->
         ${args.content}

@@ -85,13 +85,13 @@ function tryFocusElements(elements: NodeListOf<HTMLElement>, reverse: boolean) {
 /**
  * SidePanel.
  *
- * @element cds-side-panel
+ * @element c4p-side-panel
  * @csspart dialog The dialog.
- * @fires cds-side-panel-beingclosed
+ * @fires c4p-side-panel-beingclosed
  *   The custom event fired before this side-panel is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this side-panel.
- * @fires cds-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
- * @fires cds-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
+ * @fires c4p-side-panel-closed - The custom event fired after this side-panel is closed upon a user gesture.
+ * @fires c4p-side-panel-navigate-back - custom event fired when clicking navigate back (available when step > 0)
  */
 @customElement(`${prefix}-side-panel`)
 class CDSSidePanel extends HostListenerMixin(LitElement) {
@@ -913,7 +913,7 @@ class CDSSidePanel extends HostListenerMixin(LitElement) {
         await (this.constructor as typeof CDSSidePanel)._delay();
         if (focusNode) {
           // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,
-          // where its first update/render cycle that makes it focusable happens after `<cds-side-panel>`'s first update/render cycle
+          // where its first update/render cycle that makes it focusable happens after `<c4p-side-panel>`'s first update/render cycle
           (focusNode as HTMLElement).focus();
         } else if (
           !tryFocusElements(

@@ -6,12 +6,6 @@ import * as TearsheetStories from './tearsheet.stories';
 
 # Tearsheet
 
-> 💡 Check our
-> [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
-> example implementation.
-
-[![Edit carbon-web-components](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/carbon-design-system/carbon/tree/main/packages/web-components/examples/components/tearsheet)
-
 Tearsheets keep users in-context of a page while performing tasks like
 navigating, editing, viewing details, or configuring something new.
 
@@ -22,15 +16,13 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import '@carbon/web-components/es/components/tearsheet/index.js';
+import '@carbon/ibm-products-web-components/es/components/tearsheet/index.js';
 // The following are used for slotted fields
 import '@carbon/web-components/es/components/text-input/index.js';
 import '@carbon/web-components/es/components/textarea/index.js';
 import '@carbon/web-components/es/components/button/index.js';
 ```
 
-<Markdown>{`${cdnJs({ components: ['tearsheet'] })}`}</Markdown>
-<Markdown>{`${cdnCss()}`}</Markdown>
 
 ### HTML
 

@@ -0,0 +1,69 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import packageJson from '../../../package.json';
+
+/* eslint-disable max-len */
+
+/**
+ *
+ */
+/**
+ * Renders the component(s) script tag content and returns back the string
+ *
+ * @param {Array} components array of component names
+ * @param {string} tag tag folder
+ */
+function _renderScript(components, tag) {
+  let scripts = '';
+  components.forEach((component) => {
+    scripts += `<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/${tag}/${component}.min.js"></script>\n`;
+  });
+  return scripts;
+}
+
+/**
+ * This is the markdown block for JS via CDN
+ *
+ * @param {Array} components array of components to render
+ * @param components.components components to render
+ */
+export const cdnJs = ({ components }) => {
+  return `
+### JS (via CDN)
+
+ > NOTE: Only one version of artifacts should be used. Mixing versions will cause rendering issues.
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+
+ #### Right-to-left (RTL) versions
+
+ \`\`\`html
+ // SPECIFIC VERSION (available starting v2.0.0)
+ ${_renderScript(components, `version/v${packageJson.version}`)}
+ \`\`\`
+   `;
+};
+
+/**
+ * This is the markdown block for CSS via CDN
+ */
+export const cdnCss = () => {
+  return `
+### Carbon CDN style helpers (optional)
+
+There are optional CDN artifacts available that can assist with global Carbon
+styles in lieu of including into your specific application bundle.
+
+[Click here to learn more](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/carbon-cdn-style-helpers.md)\n\n
+  `;
+};
@@ -22,6 +22,7 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import path from 'path';
 import postcss from 'postcss';
 import typescript from '@rollup/plugin-typescript';
+import json from '@rollup/plugin-json';
 
 import * as packageJson from '../package.json' assert { type: 'json' };
 
@@ -125,6 +126,7 @@ function getRollupConfig(input, rootDir, outDir, iconInput) {
         targets: [{ src: 'src/components/**/*.scss', dest: 'scss' }],
         flatten: false,
       }),
+      [json()],
       nodeResolve({
         browser: true,
         mainFields: ['jsnext', 'module', 'main'],

@@ -1878,6 +1878,7 @@ __metadata:
     "@mordech/vite-lit-loader": "npm:^0.35.0"
     "@rollup/plugin-alias": "npm:^5.1.1"
     "@rollup/plugin-commonjs": "npm:^28.0.1"
+    "@rollup/plugin-json": "npm:^6.1.0"
     "@rollup/plugin-node-resolve": "npm:^15.3.0"
     "@rollup/plugin-typescript": "npm:^12.1.1"
     "@storybook/addon-essentials": "npm:^8.3.6"
@@ -6047,6 +6048,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rollup/plugin-json@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "@rollup/plugin-json@npm:6.1.0"
+  dependencies:
+    "@rollup/pluginutils": "npm:^5.1.0"
+  peerDependencies:
+    rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+  peerDependenciesMeta:
+    rollup:
+      optional: true
+  checksum: cc018d20c80242a2b8b44fae61a968049cf31bb8406218187cc7cda35747616594e79452dd65722e7da6dd825b392e90d4599d43cd4461a02fefa2865945164e
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-node-resolve@npm:^15.3.0":
   version: 15.3.0
   resolution: "@rollup/plugin-node-resolve@npm:15.3.0"