More tweaks to the modal and the components used

uktrade · Feb 24, 2025 · ce144fb · ce144fb
1 parent 5556e68
commit ce144fb
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,5 @@
+.cross-icon {
+    path {
+        fill: currentColor;
+    }
+}
diff --git 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
@@ -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
@@ -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 %}