carbon-design-system · matthewgallo · May 21, 2025 · May 8, 2025 · May 8, 2025 · May 8, 2025
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.yarn/*
+yarn.lock
+
+# 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": "Delete Pattern",
+  "template": "node"
+}
@@ -0,0 +1,40 @@
+<!--
+@license
+
+Copyright IBM Corp. 2025, 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.
+-->
+
+<html>
+  <head>
+    <title>Delete and Remove patterns</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="src/styles.scss" />
+    <script type="module" src="src/delete-and-remove.ts"></script>
+  </head>
+  <body>
+    <section>
+      <h4>Deletion patterns</h4>
+      <p>High impact deletion:</p>
+      <delete-high-impact></delete-high-impact>
+      <p>High impact deletion with connected items:</p>
+      <delete-connected-items></delete-connected-items>
+      <p>High impact batch deletion:</p>
+      <delete-batch></delete-batch>
+      <p>Medium impact deletion:</p>
+      <delete-remove-medium-impact action="delete"></delete-remove-medium-impact>
+      <p>Low impact deletion:</p>
+      <delete-remove-low-impact action="delete"></delete-remove-low-impact>
+    </section>
+
+    <section>
+      <h4>Removal patterns</h4>
+      <p>Medium impact removal:</p>
+      <delete-remove-medium-impact action="remove"></delete-remove-medium-impact>
+      <p>Low impact removal:</p>
+      <delete-remove-low-impact action="remove"></delete-remove-low-impact>
+    </section>
+  </body>
+</html>
@@ -0,0 +1,22 @@
+{
+  "name": "ibm-products-web-components-delete-and-remove-pattern-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Delete and remove pattern using Carbon web components",
+  "license": "Apache-2",
+  "main": "index.html",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@carbon/web-components": "^2.28.0",
+    "lit": "^3.1.4"
+  },
+  "devDependencies": {
+    "sass": "^1.87.0",
+    "vite": "^6.2.3",
+    "vite-plugin-lit-css": "^2.1.0"
+  }
+}
@@ -0,0 +1,127 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2025, 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 { html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import '@carbon/web-components/es/components/modal/index.js';
+import '@carbon/web-components/es/components/form/form-item.js';
+import '@carbon/web-components/es/components/text-input/text-input.js';
+import '@carbon/web-components/es/components/notification/toast-notification.js';
+
+import { getCurrentTime } from './utils';
+import styles from './delete-and-remove.scss?lit';
+
+@customElement('delete-high-impact')
+export class DeleteHighImpact extends LitElement {
+  static styles = styles;
+
+  @state()
+  private _open: boolean = false;
+
+  @state()
+  private _showNotification: boolean = false;
+
+  @state()
+  private _textInput: string = '';
+
+  @state()
+  private _enableDelete: boolean = false;
+
+  private _close() {
+    this._open = false;
+    this._textInput = '';
+  }
+
+  private _onNotificationClose() {
+    this._showNotification = false;
+  }
+
+  private _onDeleteButtonClick() {
+    this._open = true;
+    this._onNotificationClose();
+  }
+
+  private _setDeleteButtonState() {
+    this._enableDelete = this._textInput === 'Bx1001';
+  }
+
+  private _onInputChange(e: Event) {
+    this._textInput = (e.target as HTMLInputElement).value;
+    this._setDeleteButtonState();
+  }
+
+  private _onDelete(e: Event) {
+    this._close();
+    this._showNotification = true;
+  }
+
+  render() {
+    return html`
+      <cds-button
+        type="button"
+        kind="danger"
+        size="md"
+        @click="${this._onDeleteButtonClick}"
+      >
+        Delete
+      </cds-button>
+      <cds-modal size="sm" ?open="${this._open}" prevent-close>
+        <cds-modal-header>
+          <cds-modal-close-button
+            @click="${this._close}"
+          ></cds-modal-close-button>
+          <cds-modal-label>Delete Bx1001</cds-modal-label>
+          <cds-modal-heading>Confirm delete</cds-modal-heading>
+        </cds-modal-header>
+        <cds-modal-body>
+          <cds-modal-body-content description="">
+            Deleting 'Bx1001' will permanently delete the configuration. This
+            action cannot be undone.
+          </cds-modal-body-content>
+          <cds-form-item>
+            <cds-text-input
+              placeholder="Name of resource"
+              label="Type Bx1001 to confirm"
+              value="${this._textInput}"
+              @input="${this._onInputChange}"
+              autocomplete="off"
+            >
+            </cds-text-input>
+          </cds-form-item>
+        </cds-modal-body>
+        <cds-modal-footer>
+          <cds-modal-footer-button kind="secondary" @click="${this._close}"
+            >Cancel</cds-modal-footer-button
+          >
+          <cds-modal-footer-button
+            ?disabled="${!this._enableDelete}"
+            kind="danger"
+            @click="${this._onDelete}"
+            >Delete
+          </cds-modal-footer-button>
+        </cds-modal-footer>
+      </cds-modal>
+      ${this._showNotification
+        ? html`<cds-toast-notification
+            class="notification"
+            kind="success"
+            title="Success"
+            subtitle="Bx1001 has been successfully deleted."
+            caption=${getCurrentTime()}
+            low-contrast="true"
+            timeout="3000"
+            @cds-notification-closed="${this._onNotificationClose}"
+          ></cds-toast-notification>`
+        : null}
+    `;
+  }
+}
+
+export default DeleteHighImpact;