chore(storybook): cleanup and codesandbox cdn info (#10875)

* chore(storybook): cleanup and codesandbox cdn info * fix(doc): carbon-cdn-style-helper * chore(codesandbox): use parcel instead of webpack for basic csb --------- Co-authored-by: Anna Wen <[email protected]>
carbon-design-system · Aug 24, 2023 · 6f9040b · 6f9040b
1 parent b66df02
commit 6f9040b
Show file tree

Hide file tree

Showing 52 changed files with 478 additions and 131 deletions.
diff --git a/packages/carbon-web-components/.storybook/preview.ts b/packages/carbon-web-components/.storybook/preview.ts
@@ -131,68 +131,18 @@ export const parameters = {
     },
   },
   options: {
-    storySort: (storyA, storyB) => {
-      // By default, sort by the story "kind". The "kind" refers to the
-      // top-level title of the story, either through Component Story Format
-      // with the default export, or the `storiesOf('kind', module)` format
-      if (storyA[1].kind !== storyB[1].kind) {
-        return storyA[1].kind.localeCompare(storyB[1].kind);
-      }
-
-      const idA = storyA[0];
-      const idB = storyB[0];
-
-      // To story the stories, we first build up a list of matches based on
-      // keywords. Each keyword has a specific weight that will be used to
-      // determine order later on.
-      const UNKNOWN_KEYWORD = 3;
-      const keywords = new Map([
-        ['welcome', 0],
-        ['default', 1],
-        ['usage', 2],
-        ['playground', 4],
-        ['development', 5],
-        ['deprecated', 6],
-        ['unstable', 7],
-      ]);
-      const matches = new Map();
-
-      // We use this list of keywords to determine a collection of matches. By
-      // default, we will look for the greatest valued matched
-      for (const [keyword, weight] of keywords) {
-        // If we already have a match for a given id that is greater than the
-        // specific keyword we're looking for, break early
-        if (matches.get(idA) > weight || matches.get(idB) > weight) {
-          break;
-        }
-
-        // If we don't have a match already for either id, we check to see if
-        // the id includes the keyword and assigns the relevant weight, if so
-        if (idA.includes(keyword)) {
-          matches.set(idA, weight);
-        }
-
-        if (idB.includes(keyword)) {
-          matches.set(idB, weight);
-        }
-      }
-
-      // If we have matches for either id, then we will compare the ids based on
-      // the weight assigned to the matching keyword
-      if (matches.size > 0) {
-        const weightA = matches.get(idA) ?? UNKNOWN_KEYWORD;
-        const weightB = matches.get(idB) ?? UNKNOWN_KEYWORD;
-        // If we have the same weight for the ids, then we should compare them
-        // using locale compare instead of by weight
-        if (weightA === weightB) {
-          return idA.localeCompare(idB);
-        }
-        return weightA - weightB;
-      }
-
-      // By default, if we have no matches we'll do a locale compare between the
-      // two ids
-      return idA.localeCompare(idB);
+    storySort: {
+      order: [
+        'Introduction',
+        [
+          'Welcome',
+          'Custom styles',
+          'Carbon CDN style helpers',
+          'Form Participation',
+        ],
+        'Components',
+        'Layout',
+      ],
     },
   },
 };

diff --git a/packages/carbon-web-components/docs/carbon-cdn-style-helpers-story.mdx b/packages/carbon-web-components/docs/carbon-cdn-style-helpers-story.mdx
@@ -0,0 +1,6 @@
+import { Description, Meta } from '@storybook/addon-docs/blocks';
+import readme from './carbon-cdn-style-helpers.md';
+
+<Meta title="Introduction/Carbon CDN style helpers" />
+
+<Description markdown={readme} />
diff --git a/packages/carbon-web-components/docs/carbon-cdn-style-helpers.md b/packages/carbon-web-components/docs/carbon-cdn-style-helpers.md
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-accordion:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-breadcrumb:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/button/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-button:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-checkbox:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-code-snippet:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
  <style>
     /* Suppress custom element until styles are loaded */
     cds-combo-box:not(:defined) {

diff --git a/...ges/carbon-web-components/examples/codesandbox/basic/components/content-switcher/cdn.html b/...ges/carbon-web-components/examples/codesandbox/basic/components/content-switcher/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-combo-box:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-copy-buton:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html
@@ -11,8 +11,10 @@
   <head>
     <title>@carbon/ibmdotcom-web-components example</title>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
     <style>
       /* Suppress custom element until styles are loaded */
       cds-data-table:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-date-picker:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/cdn.html
@@ -13,6 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-dropdown:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-file-uploader:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-icon-button:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-icon-button:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-inline-loading:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/input/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/input/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-form-item:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/layer/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     .example-layer-test-component {
       padding: 1rem;

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/link/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/link/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-link:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/list/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/list/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-ordered-list:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-loading:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-modal:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-multi-select:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-inline-notification:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-number-input:not(:defined) {

diff --git a/...ages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/index.html b/...ages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/index.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="src/styles.scss" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-overflow-menu:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/cdn.html
@@ -13,6 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
 
   <style>
     /* Suppress custom element until styles are loaded */

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/popover/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-pagination:not(:defined) {

diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/cdn.html
@@ -13,7 +13,8 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
     cds-progress-bar:not(:defined) {