Refactor modal component structure and update modal examples (#2138)

Co-authored-by: Kevin Papst <[email protected]>

.changeset/lovely-dots-know.md

@@ -0,0 +1,5 @@
+---
+"preview": patch
+---
+
+Update modal examples

core/scss/utils/_colors.scss

@@ -50,4 +50,8 @@
 
 .bg-surface-tertiary {
   background-color: var(--#{$prefix}bg-surface-tertiary) !important;
+}
+
+.bg-surface-backdrop {
+  background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity) !important;
 }

preview/eleventy.config.mjs

@@ -592,7 +592,11 @@ export default function (eleventyConfig) {
 	});
 
 	['script', 'modal'].forEach((tag) => {
-		eleventyConfig.addPairedShortcode(`capture_${tag}`, function (content) {
+		eleventyConfig.addPairedShortcode(`capture_${tag}`, function (content, inline) {
+			if (inline) {
+				return content;
+			}
+
 			if (!this.page[tag]) {
 				this.page[tag] = []
 			}

preview/pages/_data/menu.json

@@ -132,7 +132,7 @@
       },
       "modals": {
         "url": "modals.html",
-        "title": "Modal"
+        "title": "Modals"
       },
       "markdown": {
         "title": "Markdown",

preview/pages/_includes/parts/modals/signature.html

@@ -0,0 +1,23 @@
+{% include "ui/modal/close.html" %}
+<div class="modal-body">
+	<h3 class="card-title">Confirm transfer</h3>
+	<p class="card-subtitle">Please confirm the transfer of funds by signing below.</p>
+	<form action="">
+		<div class="mb-3">
+			<label class="form-label required">Signature</label>
+			<div class="position-relative select-none">
+				{% include "ui/signature.html" sample clear width=684 height=400 %}
+			</div>
+		</div>
+	</form>
+	<div class="text-secondary fs-5">
+		I agree that the signature and initials will be the electronic representation of my signature and initials for
+		all purposes when I (or my agent) use
+		them on documents, including legally binding contracts - just the same as a pen-and-paper signature or initial.
+	</div>
+</div>
+
+<div class="modal-footer">
+	<button type="button" class="btn">Cancel</button>
+	<button type="button" class="btn btn-primary ms-auto">Confirm transfer</button>
+</div>

preview/pages/_includes/parts/modals/success.html

@@ -1,7 +1,6 @@
 {% include "ui/modal/close.html" %}
 <div class="modal-status bg-success"></div>
 <div class="modal-body text-center py-4">
-
 	{% include "ui/icon.html" icon="circle-check" color="green" size="lg" class="mb-2" %}
 
 	<h3>Payment succedeed</h3>

preview/pages/_includes/ui/modal.html

@@ -1,9 +1,10 @@
 <!-- BEGIN MODAL -->
 {% assign modal-id = include.modal-id | default: 'simple' %}
 {% assign size = include['size'] %}
+{% assign inline = include.inline | default: false %}
 
-{% capture_modal %}
-<div class="modal modal-blur fade" id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
+{% capture_modal inline %}
+<div class="modal modal-blur fade{% if include.class %} {{ include.class }}{% endif %}" {% if include.style %} style="{{ include.style }}"{% endif %} id="modal-{{ modal-id }}" tabindex="-1" role="dialog" aria-hidden="true">
 	<div class="modal-dialog{% if size%} modal-{{ size }}{% endif %}{% unless include.top %} modal-dialog-centered{% endunless %}{% if include.scrollable %} modal-dialog-scrollable{% endif %}" role="document">
 		<div class="modal-content">
 			{% include "parts/modals/{{ modal-id }}.html" %}

preview/pages/modals.html

@@ -4,31 +4,70 @@ page-header: Modals
 page-menu: base.modals
 layout: default
 permalink: modals.html
+page-libs: [signature_pad]
 ---
 
 <div class="card">
 	<div class="card-body">
-		<div class="btn-list">
-			{% include "ui/button.html" text="Simple modal" modal-id="simple" %}
-			{% include "ui/button.html" text="Large modal" modal-id="large" %}
-			{% include "ui/button.html" text="Small modal" modal-id="small" %}
-			{% include "ui/button.html" text="Full width modal" modal-id="full-width" %}
-			{% include "ui/button.html" text="Scrollable modal" modal-id="scrollable" %}
-			{% include "ui/button.html" text="Modal with form" modal-id="report" %}
-			{% include "ui/button.html" text="Success modal" modal-id="success" %}
-			{% include "ui/button.html" text="Danger modal" modal-id="danger" %}
-			{% include "ui/button.html" text="Modal with simple form" modal-id="team" %}
+		<div class="row g-5">
+			<div class="d-none d-md-block col-3">
+				<div class="nav nav-vertical sticky-top pt-4">
+					<a href="#modal-simple" class="nav-link">Simple modal</a>
+					<a href="#modal-large" class="nav-link">Large modal</a>
+					<a href="#modal-small" class="nav-link">Small modal</a>
+					<a href="#modal-full-width" class="nav-link">Full width modal</a>
+					<a href="#modal-scrollable" class="nav-link">Scrollable modal</a>
+					<a href="#modal-report" class="nav-link">Modal with form</a>
+					<a href="#modal-success" class="nav-link">Success modal</a>
+					<a href="#modal-danger" class="nav-link">Danger modal</a>
+					<a href="#modal-team" class="nav-link">Modal with simple form</a>
+					<a href="#modal-signature" class="nav-link">Modal with signature form</a>
+				</div>
+			</div>
+			<div class="col">
+				<div class="space-y-6">
+					<div>
+						<h3>Simple modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="simple" inline %}
+					</div>
+					<div>
+						<h3>Large modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="large" size="lg" inline %}
+					</div>
+					<div>
+						<h3>Small modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="small" size="sm" inline %}
+					</div>
+					<div>
+						<h3>Full width modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="full-width" size="full-width" inline %}
+					</div>
+					<div>
+						<h3>Scrollable modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="scrollable" scrollable=true style="max-height: 30rem" inline %}
+					</div>
+					<div>
+						<h3>Modal with form</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="report" size="lg" inline %}
+					</div>
+					<div>
+						<h3>Success modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="success" size="sm" inline %}
+					</div>
+					<div>
+						<h3>Danger modal</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="danger" size="sm" inline %}
+					</div>
+					<div>
+						<h3>Modal with simple form</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="team" inline %}
+					</div>
+					<div>
+						<h3>Modal with signature form</h3>
+						{% include "ui/modal.html" class="position-relative rounded d-block show bg-surface-backdrop py-6 w-auto h-auto" modal-id="signature" inline %}
+					</div>
+				</div>
+			</div>
 		</div>
-
 	</div>
-</div>
-
-{% include "ui/modal.html" modal-id="simple" %}
-{% include "ui/modal.html" modal-id="large" size="lg" %}
-{% include "ui/modal.html" modal-id="small" size="sm" %}
-{% include "ui/modal.html" modal-id="full-width" size="full-width" %}
-{% include "ui/modal.html" modal-id="scrollable" scrollable=true %}
-{% include "ui/modal.html" modal-id="report" size="lg" %}
-{% include "ui/modal.html" modal-id="success" size="sm" %}
-{% include "ui/modal.html" modal-id="danger" size="sm" %}
-{% include "ui/modal.html" modal-id="team" %}
+</div>