From d7f4f5098669403bf765cf351b8671f084cca39e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Sun, 2 Mar 2025 13:16:17 +0100 Subject: [PATCH] Refactor modal component structure and update modal examples (#2138) Co-authored-by: Kevin Papst --- .changeset/lovely-dots-know.md | 5 ++ core/scss/utils/_colors.scss | 4 + preview/eleventy.config.mjs | 6 +- preview/pages/_data/menu.json | 2 +- .../_includes/parts/modals/signature.html | 23 +++++ .../pages/_includes/parts/modals/success.html | 1 - preview/pages/_includes/ui/modal.html | 5 +- preview/pages/modals.html | 83 ++++++++++++++----- 8 files changed, 102 insertions(+), 27 deletions(-) create mode 100644 .changeset/lovely-dots-know.md create mode 100644 preview/pages/_includes/parts/modals/signature.html diff --git a/.changeset/lovely-dots-know.md b/.changeset/lovely-dots-know.md new file mode 100644 index 000000000..907375d99 --- /dev/null +++ b/.changeset/lovely-dots-know.md @@ -0,0 +1,5 @@ +--- +"preview": patch +--- + +Update modal examples diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss index 50227c0f3..b653d51cd 100644 --- a/core/scss/utils/_colors.scss +++ b/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; } \ No newline at end of file diff --git a/preview/eleventy.config.mjs b/preview/eleventy.config.mjs index 61b7adc3c..aed1f4f6f 100644 --- a/preview/eleventy.config.mjs +++ b/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] = [] } diff --git a/preview/pages/_data/menu.json b/preview/pages/_data/menu.json index 8a16f6dc3..171a5e7d3 100644 --- a/preview/pages/_data/menu.json +++ b/preview/pages/_data/menu.json @@ -132,7 +132,7 @@ }, "modals": { "url": "modals.html", - "title": "Modal" + "title": "Modals" }, "markdown": { "title": "Markdown", diff --git a/preview/pages/_includes/parts/modals/signature.html b/preview/pages/_includes/parts/modals/signature.html new file mode 100644 index 000000000..c6f827779 --- /dev/null +++ b/preview/pages/_includes/parts/modals/signature.html @@ -0,0 +1,23 @@ +{% include "ui/modal/close.html" %} +
+

Confirm transfer

+

Please confirm the transfer of funds by signing below.

+
+
+ +
+ {% include "ui/signature.html" sample clear width=684 height=400 %} +
+
+
+
+ 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. +
+
+ +
+ + +
\ No newline at end of file diff --git a/preview/pages/_includes/parts/modals/success.html b/preview/pages/_includes/parts/modals/success.html index 51b74babe..62dfe9b9e 100644 --- a/preview/pages/_includes/parts/modals/success.html +++ b/preview/pages/_includes/parts/modals/success.html @@ -1,7 +1,6 @@ {% include "ui/modal/close.html" %}
- {% include "ui/icon.html" icon="circle-check" color="green" size="lg" class="mb-2" %}

Payment succedeed

diff --git a/preview/pages/_includes/ui/modal.html b/preview/pages/_includes/ui/modal.html index 1319aa62a..dff30bf16 100644 --- a/preview/pages/_includes/ui/modal.html +++ b/preview/pages/_includes/ui/modal.html @@ -1,9 +1,10 @@ {% assign modal-id = include.modal-id | default: 'simple' %} {% assign size = include['size'] %} +{% assign inline = include.inline | default: false %} -{% capture_modal %} -