carbon-design-system · sangeethababu9223 · Jan 24, 2025 · Jan 24, 2025 · Jan 24, 2025 · Jan 24, 2025
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
@@ -0,0 +1,4 @@
+{
+  "label": "Side Panel",
+  "template": "node"
+}
@@ -0,0 +1,66 @@
+<!--
+@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="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-ai-label:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <div id="page-content-selector" class="story-content">
+    <cds-button id="toggle-button">Toggle Side panel</cds-button>
+  </div>
+  <c4p-side-panel
+      include-overlay
+      open
+      animate-title
+      label-text="An optional label"
+      size="md"
+      title="A title, can be omitted"
+      selector-page-content="#page-content-selector"
+      >
+      <h5>Section</h5>
+      <div class="text-inputs">
+        <cds-text-input
+          label="Input A"
+          id="side-panel-story-text-input-a"></cds-text-input>
+        <cds-text-input
+          label="Input B"
+          id="side-panel-story-text-input-b"></cds-text-input>
+      </div>
+      <div class="text-inputs">
+        <cds-text-input
+          label="Input C"
+          id="side-panel-story-text-input-c"></cds-text-input>
+        <cds-text-input
+          label="Input D"
+          id="side-panel-story-text-input-d"></cds-text-input>
+      </div>
+      <div class="textarea-container">
+        <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+        <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+        <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+      </div>
+      <!-- subtitle optional -->
+      <div slot="subtitle">
+        Subtitle text which can provide more detail on the content being displayed.
+      </div>
+
+      <cds-button slot="actions" kind="primary">Primary</cds-button>
+  </c4p-side-panel>
+</body>
+</html>
@@ -0,0 +1,23 @@
+{
+  "name": "side-panel",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM Products.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "clean": "rimraf node_modules dist .cache"
+  },
+  "dependencies": {
+    "@carbon/ibm-products-web-components": "^0.7.0",
+    "lit": "^3.2.1",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "vite": "5.2.13"
+  }
+}
@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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/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';
+
+const toggleButton = document.getElementById('toggle-button');
+toggleButton.addEventListener('click', function () {
+  document.querySelector(`c4p-side-panel`)?.toggleAttribute('open');
+});
@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
@@ -0,0 +1,4 @@
+{
+  "label": "Tearsheet",
+  "template": "node"
+}
@@ -0,0 +1,62 @@
+<!--
+@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="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-ai-label:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+
+  <cds-button id="toggle-button" >Toggle tearsheet</cds-button>
+  <c4p-tearsheet
+  open
+  width="wide">
+  <span slot="label">Optional label for context</span>
+  <span slot="title">Title used to designate the overarching flow of the tearsheet.
+  </span>
+  <span slot="description">Description used to describe the flow if need be.</span>
+    <!-- Content -->
+    <h5>Section</h5>
+    <div class="text-inputs">
+      <cds-text-input
+        label="Input A"
+        id="tearsheet-story-text-input-a"></cds-text-input>
+      <cds-text-input
+        label="Input B"
+        id="tearsheet-story-text-input-b"></cds-text-input>
+    </div>
+    <div class="text-inputs">
+      <cds-text-input
+        label="Input C"
+        id="tearsheet-story-text-input-c"></cds-text-input>
+      <cds-text-input
+        label="Input D"
+        id="tearsheet-story-text-input-d"></cds-text-input>
+    </div>
+    <div class="textarea-container">
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+      <cds-textarea label="Notes" value="This is a text area"></cds-textarea>
+    </div>
+    <!-- Tearsheet actions optional -->
+    <cds-button slot="actions" kind="ghost">Ghost</cds-button>
+    <cds-button slot="actions" kind="secondary">Secondary</cds-button>
+    <cds-button slot="actions" kind="primary">Primary</cds-button>
+  </c4p-tearsheet>
+</body>
+</html>
@@ -0,0 +1,23 @@
+{
+  "name": "tearsheet",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM Products.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "clean": "rimraf node_modules dist .cache"
+  },
+  "dependencies": {
+    "@carbon/ibm-products-web-components": "^0.7.0",
+    "lit": "^3.2.1",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2",
+    "vite": "5.2.13"
+  }
+}
@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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/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';
+
+const toggleButton = document.getElementById('toggle-button');
+toggleButton.addEventListener('click', function () {
+  document.querySelector(`c4p-tearsheet`)?.toggleAttribute('open');
+});
@@ -0,0 +1,18 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025
+ *
+ * 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 { resolve } from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+});