feat(codesandbox): add examples (#908)

* feat(codesandbox): add examples

* Update src/components/tag/tag-story-angular.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-angular.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-angular.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-angular.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-angular.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-angular.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-react.tsx

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-vue.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-vue.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story-vue.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update src/components/tag/tag-story.ts

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* feat(codesandbox): test format error

* feat(codesandbox): test format error

* feat(codesandbox): format

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

examples/codesandbox/basic/components/accordion/.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" }]]
+}

examples/codesandbox/basic/components/accordion/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/codesandbox/basic/components/accordion/cdn.html

@@ -0,0 +1,46 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<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"/>
+  <style>
+    /* Suppress custom element until styles are loaded */
+    bx-accordion:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.min.js"></script>
+</head>
+<body>
+  <bx-accordion>
+    <bx-accordion-item title-text="Lorem Ipsum">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+    </bx-accordion-item>
+    <bx-accordion-item title-text="Lorem Ipsum">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+    </bx-accordion-item>
+    <bx-accordion-item title-text="Lorem Ipsum">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+    </bx-accordion-item>
+  </bx-accordion>
+</body>
+</html>

examples/codesandbox/basic/components/accordion/index.html

@@ -0,0 +1,46 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-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"/>
+  <style>
+    /* Suppress custom element until styles are loaded */
+    bx-accordion:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <bx-accordion>
+    <bx-accordion-item title-text="Lorem Ipsum">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+    </bx-accordion-item>
+    <bx-accordion-item title-text="Lorem Ipsum">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+    </bx-accordion-item>
+    <bx-accordion-item title-text="Lorem Ipsum">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </p>
+    </bx-accordion-item>
+  </bx-accordion>
+</body>
+</html>

examples/codesandbox/basic/components/accordion/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "carbon-web-components-accordion-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "carbon-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}

examples/codesandbox/basic/components/accordion/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}

examples/codesandbox/basic/components/accordion/src/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 'carbon-web-components/es/components/accordion/index.js';

examples/codesandbox/basic/components/breadcrumb/.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" }]]
+}

examples/codesandbox/basic/components/breadcrumb/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

examples/codesandbox/basic/components/breadcrumb/cdn.html

@@ -0,0 +1,37 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<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"/>
+  <style>
+    /* Suppress custom element until styles are loaded */
+    bx-breadcrumb:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/breadcrumb.min.js"></script>
+</head>
+<body>
+  <bx-breadcrumb>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+  </bx-breadcrumb>
+</body>
+</html>

examples/codesandbox/basic/components/breadcrumb/index.html

@@ -0,0 +1,37 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-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"/>
+  <style>
+    /* Suppress custom element until styles are loaded */
+    bx-breadcrumb:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <bx-breadcrumb>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+    <bx-breadcrumb-item>
+      <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
+    </bx-breadcrumb-item>
+  </bx-breadcrumb>
+</body>
+</html>

examples/codesandbox/basic/components/breadcrumb/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "carbon-web-components-breadcrumb-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "carbon-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}

examples/codesandbox/basic/components/breadcrumb/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}

examples/codesandbox/basic/components/breadcrumb/src/index.js

@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 'carbon-web-components/es/components/breadcrumb/index.js';

examples/codesandbox/basic/components/button/.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" }]]
+}

examples/codesandbox/basic/components/button/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*