Add delete confirmation overlay pattern with tokens and docs

2026-05-28 08:51:04 +02:00
parent 9e16eb5480
commit bf7a6675fb
6 changed files with 170 additions and 0 deletions
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Styleguide – Pattern Delete Confirmation Overlay</title>
+  <link rel="stylesheet" href="../styleguide.css">
+</head>
+<body>
+
+  <h1 class="sg-main-heading">Pattern – Delete Confirmation Overlay</h1>
+
+  <section id="pattern-delete-confirmation-overlay" class="sg-delete-confirmation-pattern">
+    <p class="sg-preview-label">Pattern: Löschbestätigung mit Overlay</p>
+
+    <div class="sg-delete-confirmation-pattern__stage" data-pattern="delete-confirmation-overlay">
+      <article class="sg-card sg-object-card sg-delete-confirmation-pattern__target" aria-label="Zu löschendes Objekt">
+        <header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header">
+          <div class="sg-strong">Alcon Inc.</div>
+        </header>
+        <div class="sg-card-segment sg-card-segment--body sg-object-card__content">
+          <p class="sg-body">Dieses Objekt wird als Ziel für die Löschbestätigung abgedunkelt, solange das schwebende Fenster sichtbar ist.</p>
+        </div>
+      </article>
+
+      <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="delete-confirmation-title">
+        <div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
+          <p class="sg-body sg-delete-confirmation-pattern__text" id="delete-confirmation-title">Möchtest du Alcon Inc. wirklich löschen?</p>
+          <p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p>
+
+          <label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row">
+            <span class="sg-label">Bestätigung</span>
+            <input
+              class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
+              type="text"
+              placeholder="DELETE"
+              aria-label="Löschbestätigung durch DELETE"
+              data-delete-confirmation-input
+            >
+          </label>
+
+          <div class="sg-delete-confirmation-pattern__actions">
+            <button class="sg-interaction-element sg-button sg-button--active" type="button">Abbrechen</button>
+            <button
+              class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive"
+              type="button"
+              disabled
+              aria-disabled="true"
+              data-delete-confirmation-submit
+            >
+              Löschen
+            </button>
+          </div>
+        </div>
+      </article>
+    </div>
+  </section>
+
+  <script>
+    const confirmationInput = document.querySelector('[data-delete-confirmation-input]');
+    const confirmationSubmitButton = document.querySelector('[data-delete-confirmation-submit]');
+
+    if (confirmationInput && confirmationSubmitButton) {
+      const updateDeleteConfirmationState = () => {
+        const isValid = confirmationInput.value === 'DELETE';
+
+        confirmationSubmitButton.disabled = !isValid;
+        confirmationSubmitButton.setAttribute('aria-disabled', String(!isValid));
+        confirmationSubmitButton.classList.toggle('sg-button--process-inactive', !isValid);
+      };
+
+      confirmationInput.addEventListener('input', updateDeleteConfirmationState);
+      updateDeleteConfirmationState();
+    }
+  </script>
+
+</body>
+</html>