From 5556e689ada6f2c3260d63b08266da8542fee384 Mon Sep 17 00:00:00 2001
From: Cameron Lamb <cameron.lamb@digital.trade.gov.uk>
Date: Mon, 24 Feb 2025 13:43:42 +0000
Subject: [PATCH 1/2] WIP modal changes

---
 .../templates/tags/sidebar/parts/share.html   |   4 +-
 .../dwds/components/modal.html                |   4 +-
 src/dw_design_system/dwds/components/modal.js |  12 ++
 .../dwds/components/modal.scss                |  12 +-
 .../dwds/styles/variables.scss                |  17 ++-
 src/dw_design_system/utils.py                 |   2 +-
 src/feedback/templates/feedback.html          | 132 ++++++++++--------
 7 files changed, 107 insertions(+), 76 deletions(-)

diff --git a/src/core/templates/tags/sidebar/parts/share.html b/src/core/templates/tags/sidebar/parts/share.html
index 9e59d6ada..5394f813b 100644
--- a/src/core/templates/tags/sidebar/parts/share.html
+++ b/src/core/templates/tags/sidebar/parts/share.html
@@ -7,10 +7,10 @@
     </div>
     <dialog>
         <div class="content-stack">
-            {% include "dwds/components/copy_text.html" with text=page_url %}
             <form method="dialog">
-                <button class="dwds-modal-close dwds-button dwds-button--secondary dwds-button--inline">Close</button>
+                <button class="dwds-modal-close dwds-button dwds-button--clear">Close</button>
             </form>
+            {% include "dwds/components/copy_text.html" with text=page_url %}
         </div>
     </dialog>
 </div>
diff --git a/src/dw_design_system/dwds/components/modal.html b/src/dw_design_system/dwds/components/modal.html
index 65240e383..4ce8a2504 100644
--- a/src/dw_design_system/dwds/components/modal.html
+++ b/src/dw_design_system/dwds/components/modal.html
@@ -2,9 +2,9 @@
 <div class="dwds-modal width-third">
     <button class="dwds-button dwds-modal-open">Open Modal</button>
     <dialog>
-        {{ content }}
         <form method="dialog">
-            <button class="dwds-modal-close">Close</button>
+            <button class="dwds-modal-close dwds-button dwds-button--clear">Close</button>
         </form>
+        {{ content }}
     </dialog>
 </div>
diff --git a/src/dw_design_system/dwds/components/modal.js b/src/dw_design_system/dwds/components/modal.js
index 461c4a72d..1d66092aa 100644
--- a/src/dw_design_system/dwds/components/modal.js
+++ b/src/dw_design_system/dwds/components/modal.js
@@ -10,5 +10,17 @@ document.addEventListener('DOMContentLoaded', function () {
         closeElement.addEventListener("click", function () {
             dialog.close();
         });
+        dialog.addEventListener('click', function (event) {
+            const rect = dialog.getBoundingClientRect();
+            const isInDialog = (
+                rect.top <= event.clientY
+                && event.clientY <= rect.top + rect.height
+                && rect.left <= event.clientX
+                && event.clientX <= rect.left + rect.width
+            );
+            if (!isInDialog) {
+                dialog.close();
+            }
+        });
     });
 });
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/components/modal.scss b/src/dw_design_system/dwds/components/modal.scss
index eec172aca..e8444da6c 100644
--- a/src/dw_design_system/dwds/components/modal.scss
+++ b/src/dw_design_system/dwds/components/modal.scss
@@ -1,8 +1,16 @@
 .dwds-modal {
     dialog {
+        border: unset;
+        border-radius: var(--border-radius);
+
         &::backdrop {
-            background: rgba(36, 32, 20, 0.5);
-            backdrop-filter: blur(0.25rem);
+            background: var(--modal-backdrop-color);
+            backdrop-filter: blur(0.3rem);
+        }
+
+        form[method="dialog"] {
+            display: flex;
+            flex-direction: row-reverse;
         }
     }
 
diff --git a/src/dw_design_system/dwds/styles/variables.scss b/src/dw_design_system/dwds/styles/variables.scss
index bca212957..aabe23ad2 100644
--- a/src/dw_design_system/dwds/styles/variables.scss
+++ b/src/dw_design_system/dwds/styles/variables.scss
@@ -10,13 +10,13 @@
   --dbt-miuk-light-grey: #dde5ed;
   --dbt-background-blue: #d2e2f1;
   --dbt-very-light-grey: #EEEFEF;
-  --dbt-dark-teel:#004D44;
-  --dbt-light-green:#CCE2D8;
-  --dbt-black:#000000;
-  --dbt-light-pink:#FCD6C3;
-  --dbt-burnt-orange:#E24912;
-  --dbt-light-purple:#DBD5E9;
-  --dbt-dark-purple:#4814A0;
+  --dbt-dark-teel: #004D44;
+  --dbt-light-green: #CCE2D8;
+  --dbt-black: #000000;
+  --dbt-light-pink: #FCD6C3;
+  --dbt-burnt-orange: #E24912;
+  --dbt-light-purple: #DBD5E9;
+  --dbt-dark-purple: #4814A0;
 
   // GDS colours - for re-use in this file only
   // https://design-system.service.gov.uk/styles/colour/#colour-palette
@@ -160,4 +160,7 @@
   --card-bg-white: var(--dbt-white);
   --card-bg-blue: var(--dbt-blue);
   --card-bg-red: var(--dbt-red);
+
+  // Modal
+  --modal-backdrop-color: rgba(0, 0, 0, 0.6);
 }
\ No newline at end of file
diff --git a/src/dw_design_system/utils.py b/src/dw_design_system/utils.py
index 1bc7c10bc..5de14acec 100644
--- a/src/dw_design_system/utils.py
+++ b/src/dw_design_system/utils.py
@@ -257,7 +257,7 @@ def get_dwds_templates(template_type, request: HttpRequest):
                 "name": "Modal",
                 "template": "dwds/components/modal.html",
                 "context": {
-                    "content": "https://www.gov.uk",
+                    "content": "MODAL CONTENT",
                 },
             },
         ],
diff --git a/src/feedback/templates/feedback.html b/src/feedback/templates/feedback.html
index 3fc310e02..84402f30e 100644
--- a/src/feedback/templates/feedback.html
+++ b/src/feedback/templates/feedback.html
@@ -30,78 +30,86 @@
         </div>
     </div>
 </div>
+<div class="dwds-modal width-third">
+    <dialog id="{{ prefix }}-feedback-dialog" class="feedback-dialog">
+        <div class="content-stack">
+            <form method="dialog">
+                <button class="dwds-modal-close dwds-button dwds-button--clear">Close</button>
+            </form>
+            <div id="feedback-form-wrapper--{{ form_id }}">
+                {% if not initial %}
+                    {% feedback_submit form_id=form_id %}
+                {% else %}
+                    {% feedback_submit form_id=form_id initial=initial %}
+                {% endif %}
+            </div>
 
-<dialog id="{{ prefix }}-feedback-dialog" class="feedback-dialog">
-    {% if not initial %}
-        {% feedback_submit form_id=form_id %}
-    {% else %}
-        {% feedback_submit form_id=form_id initial=initial %}
-    {% endif %}
+            <script>
+                const dialog = document.querySelector("#{{ prefix }}-feedback-dialog");
+                const form = dialog.querySelector("div#feedback-form-wrapper--{{ form_id }}").querySelector("form");
+                const header = document.querySelector("#{{ prefix }}-feedback .feedback-header");
 
-    <script>
-        const dialog = document.querySelector("#{{ prefix }}-feedback-dialog");
-        const form = dialog.querySelector("form");
-        const header = document.querySelector("#{{ prefix }}-feedback .feedback-header");
+                function positiveResponse() {
+                    // Clear all form fields except the hidden ones
+                    clearFeedbackForm();
+                    // Mark the `useful` hidden field to `true`
+                    form.querySelector("#id_useful").value = "true";
+                    // Submit the form
+                    submitFeedbackForm();
+                }
 
-        function positiveResponse() {
-            // Clear all form fields except the hidden ones
-            clearFeedbackForm();
-            // Mark the `useful` hidden field to `true`
-            form.querySelector("#id_useful").value = "true";
-            // Submit the form
-            submitFeedbackForm();
-        }
+                function negativeResponse() {
+                    // Clear all form fields except the hidden ones
+                    clearFeedbackForm();
+                    // Mark the `useful` hidden field to `false`
+                    form.querySelector("#id_useful").value = "false";
+                    // Show the feedback form
+                    openFeedbackDialog();
+                }
 
-        function negativeResponse() {
-            // Clear all form fields except the hidden ones
-            clearFeedbackForm();
-            // Mark the `useful` hidden field to `false`
-            form.querySelector("#id_useful").value = "false";
-            // Show the feedback form
-            openFeedbackDialog();
-        }
+                function openFeedbackDialog() {
+                    document.querySelector("#{{ prefix }}-feedback-dialog").showModal();
+                }
 
-        function openFeedbackDialog() {
-            document.querySelector("#{{ prefix }}-feedback-dialog").showModal();
-        }
+                function showThankYouMessage() {
+                    // Update text to say thanks.
+                    header.innerHTML = '<div class="govuk-body-s govuk-!-margin-bottom-0">Thanks for your feedback.</div>';
+                }
 
-        function showThankYouMessage() {
-            // Update text to say thanks.
-            header.innerHTML = '<div class="govuk-body-s govuk-!-margin-bottom-0">Thanks for your feedback.</div>';
-        }
+                form.addEventListener("submit", (event) => {
+                    if (event.submitter.id == "submit-id-submit") {
+                        event.preventDefault();
+                        submitFeedbackForm();
+                    }
+                });
 
-        form.addEventListener("submit", (event) => {
-            if (event.submitter.id == "submit-id-submit") {
-                event.preventDefault();
-                submitFeedbackForm();
-            }
-        });
+                function clearFeedbackForm() {
+                    form.reset();
+                }
 
-        function clearFeedbackForm() {
-            form.reset();
-        }
+                function submitFeedbackForm() {
+                    const formData = new FormData(form);
 
-        function submitFeedbackForm() {
-            const formData = new FormData(form);
+                    {% if custom_submit_data_function %}{{ custom_submit_data_function }}(formData);{% endif %}
 
-            {% if custom_submit_data_function %}{{ custom_submit_data_function }}(formData);{% endif %}
+                    formData.set('page_url','{{page.url}}');
 
-            formData.set('page_url','{{page.url}}');
+                    fetch(form.action, {
+                        method: "POST",
+                        body: formData,
+                    }).then((response) => {
+                        if (!response.ok) {
+                            throw new Error("There was an issue submitting your feedback.");
+                        }
 
-            fetch(form.action, {
-                method: "POST",
-                body: formData,
-            }).then((response) => {
-                if (!response.ok) {
-                    throw new Error("There was an issue submitting your feedback.");
+                        dialog.close();
+                        showThankYouMessage();
+                    }).catch((error) => {
+                        alert(error.message);
+                        dialog.close();
+                    });
                 }
-
-                dialog.close();
-                showThankYouMessage();
-            }).catch((error) => {
-                alert(error.message);
-                dialog.close();
-            });
-        }
-    </script>
-</dialog>
+            </script>
+        </div>
+    </dialog>
+</div>

From ce144fb4fb2a0a0161c66a484d0d2d338a2dc64d Mon Sep 17 00:00:00 2001
From: Cameron Lamb <cameron.lamb@digital.trade.gov.uk>
Date: Mon, 24 Feb 2025 14:04:03 +0000
Subject: [PATCH 2/2] More tweaks to the modal and the components used

---
 .../templates/tags/sidebar/parts/share.html   |  5 +++-
 .../dwds/components/modal.html                |  5 +++-
 .../dwds/components/modal.scss                |  5 ++++
 .../dwds/elements/button.scss                 | 28 +++++++++++++++++++
 src/dw_design_system/dwds/icons/cross.html    | 10 +++++++
 src/dw_design_system/dwds/icons/cross.scss    |  5 ++++
 src/dw_design_system/dwds/stylesheet.scss     |  9 +++---
 .../templates/dw_design_system/styles.html    | 26 ++++++++++++-----
 src/feedback/templates/feedback.html          |  5 +++-
 9 files changed, 84 insertions(+), 14 deletions(-)
 create mode 100644 src/dw_design_system/dwds/icons/cross.html
 create mode 100644 src/dw_design_system/dwds/icons/cross.scss

diff --git a/src/core/templates/tags/sidebar/parts/share.html b/src/core/templates/tags/sidebar/parts/share.html
index 5394f813b..b0805404d 100644
--- a/src/core/templates/tags/sidebar/parts/share.html
+++ b/src/core/templates/tags/sidebar/parts/share.html
@@ -8,7 +8,10 @@
     <dialog>
         <div class="content-stack">
             <form method="dialog">
-                <button class="dwds-modal-close dwds-button dwds-button--clear">Close</button>
+                <button class="dwds-modal-close dwds-button dwds-button--link content-with-icon small-gap">
+                    {% include "dwds/icons/cross.html" with small=True %}
+                    Close
+                </button>
             </form>
             {% include "dwds/components/copy_text.html" with text=page_url %}
         </div>
diff --git a/src/dw_design_system/dwds/components/modal.html b/src/dw_design_system/dwds/components/modal.html
index 4ce8a2504..487d38d09 100644
--- a/src/dw_design_system/dwds/components/modal.html
+++ b/src/dw_design_system/dwds/components/modal.html
@@ -3,7 +3,10 @@
     <button class="dwds-button dwds-modal-open">Open Modal</button>
     <dialog>
         <form method="dialog">
-            <button class="dwds-modal-close dwds-button dwds-button--clear">Close</button>
+            <button class="dwds-modal-close dwds-button dwds-button--link content-with-icon small-gap">
+                {% include "dwds/icons/cross.html" with small=True %}
+                Close
+            </button>
         </form>
         {{ content }}
     </dialog>
diff --git a/src/dw_design_system/dwds/components/modal.scss b/src/dw_design_system/dwds/components/modal.scss
index e8444da6c..1c874f13b 100644
--- a/src/dw_design_system/dwds/components/modal.scss
+++ b/src/dw_design_system/dwds/components/modal.scss
@@ -11,6 +11,11 @@
         form[method="dialog"] {
             display: flex;
             flex-direction: row-reverse;
+
+            button {
+                // color: var(--color-link);
+            }
+
         }
     }
 
diff --git a/src/dw_design_system/dwds/elements/button.scss b/src/dw_design_system/dwds/elements/button.scss
index 64eda33ea..556163a13 100644
--- a/src/dw_design_system/dwds/elements/button.scss
+++ b/src/dw_design_system/dwds/elements/button.scss
@@ -29,6 +29,7 @@ a.dwds-button,
     }
 
 
+    &--link,
     &--clear-icon,
     &--clear {
         // Unset the default button styling
@@ -133,6 +134,33 @@ a.dwds-button,
         padding: var(--padding-button-inline);
     }
 
+    &--link {
+        color: var(--color-link);
+
+        &.no-underline {
+            text-decoration: none;
+        }
+
+        &.no-underline:focus,
+        &.no-underline:active,
+        &:focus,
+        &:active {
+            text-decoration: underline var(--text-underline-hover);
+            background-color: var(--color-link-background-active);
+            color: var(--color-text);
+        }
+
+        &.no-underline:focus-visible,
+        &:focus-visible {
+            outline: none;
+        }
+
+        &.no-underline:hover,
+        &:hover {
+            text-decoration: underline var(--text-underline-hover);
+        }
+    }
+
     &--navigation {
         padding: var(--padding-button-inline);
         color: var(--color-button-secondary-dark-text);
diff --git a/src/dw_design_system/dwds/icons/cross.html b/src/dw_design_system/dwds/icons/cross.html
new file mode 100644
index 000000000..789cea0d2
--- /dev/null
+++ b/src/dw_design_system/dwds/icons/cross.html
@@ -0,0 +1,10 @@
+{% load dwds_icons %}
+
+<svg class="cross-icon {% icon_classes %}"
+     width="512"
+     height="512"
+     viewBox="0 0 512 512"
+     fill="none"
+     xmlns="http://www.w3.org/2000/svg">
+    <path d="M322.72 256L422.79 155.93C435.07 143.65 435.07 123.74 422.79 111.45L400.55 89.21C388.27 76.93 368.36 76.93 356.07 89.21L256 189.28L155.93 89.21C143.65 76.93 123.74 76.93 111.45 89.21L89.21 111.45C76.93 123.73 76.93 143.64 89.21 155.93L189.28 256L89.21 356.07C76.93 368.35 76.93 388.26 89.21 400.55L111.45 422.79C123.73 435.07 143.65 435.07 155.93 422.79L256 322.72L356.07 422.79C368.35 435.07 388.27 435.07 400.55 422.79L422.79 400.55C435.07 388.27 435.07 368.36 422.79 356.07L322.72 256Z" fill="#222222" />
+</svg>
diff --git a/src/dw_design_system/dwds/icons/cross.scss b/src/dw_design_system/dwds/icons/cross.scss
new file mode 100644
index 000000000..d2566e809
--- /dev/null
+++ b/src/dw_design_system/dwds/icons/cross.scss
@@ -0,0 +1,5 @@
+.cross-icon {
+    path {
+        fill: currentColor;
+    }
+}
\ No newline at end of file
diff --git a/src/dw_design_system/dwds/stylesheet.scss b/src/dw_design_system/dwds/stylesheet.scss
index e951de854..0a8e87aba 100644
--- a/src/dw_design_system/dwds/stylesheet.scss
+++ b/src/dw_design_system/dwds/stylesheet.scss
@@ -50,16 +50,17 @@
 
 // Icons
 @forward "icons/bookmark";
+@forward "icons/celebrate";
+@forward "icons/check";
 @forward "icons/comment";
-@forward "icons/share";
 @forward "icons/copy";
-@forward "icons/check";
-@forward "icons/celebrate";
+@forward "icons/cross";
 @forward "icons/dislike";
+@forward "icons/feedback";
 @forward "icons/like";
 @forward "icons/love";
+@forward "icons/share";
 @forward "icons/unhappy";
-@forward "icons/feedback";
 
 // Layouts
 @forward "layouts/content_sidebar";
diff --git a/src/dw_design_system/templates/dw_design_system/styles.html b/src/dw_design_system/templates/dw_design_system/styles.html
index 576ccb3c9..4b100bead 100644
--- a/src/dw_design_system/templates/dw_design_system/styles.html
+++ b/src/dw_design_system/templates/dw_design_system/styles.html
@@ -107,6 +107,25 @@ <h2>Buttons</h2>
         <button class="dwds-button dwds-button--clear dwds-button--inline">CB (inline)</button>
     </div>
 
+    <h2>Navigation buttons</h2>
+
+    <div class="dwds-button-group">
+        <button class="dwds-button dwds-button--navigation active">Active navigation button</button>
+        <button class="dwds-button dwds-button--navigation">Inactive navigation button</button>
+    </div>
+
+    <h2>Buttons as links</h2>
+
+    <div class="dwds-button-group">
+        <a class="dwds-button dwds-button--link">A button that looks like a link</a>
+    </div>
+
+    <h2>Links</h2>
+
+    <div class="dwds-button-group">
+        <a class="active" href="#">A normal link</a>
+    </div>
+
     <h2>Links as buttons</h2>
 
     <div class="dwds-button-group">
@@ -129,13 +148,6 @@ <h2>Links as buttons</h2>
         <a class="dwds-button dwds-button--clear dwds-button--inline" href="#">CB (inline)</a>
     </div>
 
-    <h2>Navigation buttons</h2>
-
-    <div class="dwds-button-group">
-        <button class="dwds-button dwds-button--navigation active">Active navigation button</button>
-        <button class="dwds-button dwds-button--navigation">Inactive navigation button</button>
-    </div>
-
     <h2>Links as Navigation buttons</h2>
 
     <div class="dwds-button-group">
diff --git a/src/feedback/templates/feedback.html b/src/feedback/templates/feedback.html
index 84402f30e..611b59303 100644
--- a/src/feedback/templates/feedback.html
+++ b/src/feedback/templates/feedback.html
@@ -34,7 +34,10 @@
     <dialog id="{{ prefix }}-feedback-dialog" class="feedback-dialog">
         <div class="content-stack">
             <form method="dialog">
-                <button class="dwds-modal-close dwds-button dwds-button--clear">Close</button>
+                <button class="dwds-modal-close dwds-button dwds-button--link content-with-icon small-gap">
+                    {% include "dwds/icons/cross.html" with small=True %}
+                    Close
+                </button>
             </form>
             <div id="feedback-form-wrapper--{{ form_id }}">
                 {% if not initial %}