diff --git a/assets/icons/star-outline.svg b/assets/icons/star-outline.svg new file mode 100644 index 0000000..f9ee578 --- /dev/null +++ b/assets/icons/star-outline.svg @@ -0,0 +1,3 @@ + diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html index 518dbff..6ac1318 100644 --- a/patterns/delete-confirmation-overlay.html +++ b/patterns/delete-confirmation-overlay.html @@ -78,7 +78,7 @@

Pattern: Add to List Overlay

-
+
Alcon Inc.
@@ -108,32 +108,43 @@ @@ -145,6 +156,13 @@ const confirmationInput = stage.querySelector('[data-overlay-confirmation-input]'); const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]'); const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? ''; + const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]')); + const selectedListIds = new Set( + (stage.dataset.overlaySelectedLists ?? '') + .split(',') + .map((value) => value.trim()) + .filter(Boolean) + ); const closeStageDialogs = () => { stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => { @@ -153,6 +171,17 @@ stage.dataset.dialogOpen = 'false'; }; + const syncOverlayListState = () => { + overlayListButtons.forEach((button) => { + const listId = button.dataset.overlayListId; + const isSelected = Boolean(listId && selectedListIds.has(listId)); + button.dataset.selected = String(isSelected); + button.setAttribute('aria-pressed', String(isSelected)); + }); + + stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(','); + }; + if (confirmationInput && confirmationSubmitButton) { const updateConfirmationState = () => { const isValid = confirmationInput.value === expectedConfirmationValue; @@ -166,6 +195,29 @@ updateConfirmationState(); } + if (overlayListButtons.length > 0) { + syncOverlayListState(); + + overlayListButtons.forEach((button) => { + button.addEventListener('click', (event) => { + event.preventDefault(); + + const listId = button.dataset.overlayListId; + if (!listId) { + return; + } + + if (selectedListIds.has(listId)) { + selectedListIds.delete(listId); + } else { + selectedListIds.add(listId); + } + + syncOverlayListState(); + }); + }); + } + closeStageDialogs(); stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => { diff --git a/styles/27-patterns-delete-confirmation.css b/styles/27-patterns-delete-confirmation.css index 3652f34..704d28c 100644 --- a/styles/27-patterns-delete-confirmation.css +++ b/styles/27-patterns-delete-confirmation.css @@ -64,6 +64,53 @@ background: var(--surface-delete-confirmation-overlay); } +.sg-delete-confirmation-pattern__list { + display: grid; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; +} + +.sg-delete-confirmation-pattern__list-item { + margin: 0; +} + +.sg-delete-confirmation-pattern__list-button { + display: inline-flex; + width: 100%; + justify-content: flex-start; + gap: var(--spacing-small); + color: var(--text-delete-confirmation-overlay); + background: var(--surface-control-inactive); +} + +.sg-delete-confirmation-pattern__list-button[data-selected="true"] { + background: var(--surface-control-active); +} + +.sg-delete-confirmation-pattern__list-button[data-selected="false"] { + background: var(--surface-control-inactive); +} + +.sg-delete-confirmation-pattern__list-icon { + display: block; + flex: 0 0 auto; + width: 1rem; + height: 1rem; + background-color: currentColor; +} + +.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon { + -webkit-mask: url("../assets/icons/star-filled.svg") no-repeat center / contain; + mask: url("../assets/icons/star-filled.svg") no-repeat center / contain; +} + +.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon { + -webkit-mask: url("../assets/icons/star-outline.svg") no-repeat center / contain; + mask: url("../assets/icons/star-outline.svg") no-repeat center / contain; +} + .sg-delete-confirmation-pattern__text { margin: 0; color: var(--text-delete-confirmation-overlay);