From b056f6170a7ed0b1c0ca6e422ab3233de232764f Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Mon, 8 Jan 2024 07:22:32 +0100
Subject: [PATCH] feat(shared): Allow links to break out of modal

---
 sites/shared/components/designs/design.mjs | 7 ++++++-
 sites/shared/components/wrappers/modal.mjs | 8 +++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/sites/shared/components/designs/design.mjs b/sites/shared/components/designs/design.mjs
index 8f397b16918..aed84c768ae 100644
--- a/sites/shared/components/designs/design.mjs
+++ b/sites/shared/components/designs/design.mjs
@@ -80,7 +80,12 @@ export const DesignCard = ({ name, lineDrawing = false }) => {
     <button
       onClick={() =>
         setModal(
-          <ModalWrapper flex="col" justify="top lg:justify-center" slideFrom="right">
+          <ModalWrapper
+            flex="col"
+            justify="top lg:justify-center"
+            slideFrom="right"
+            keepOpenOnClick
+          >
             <h1>{t(`designs:${name}.t`)}</h1>
             <DesignInfo design={name} modal />
           </ModalWrapper>
diff --git a/sites/shared/components/wrappers/modal.mjs b/sites/shared/components/wrappers/modal.mjs
index fad95de1a40..e4dddfbce54 100644
--- a/sites/shared/components/wrappers/modal.mjs
+++ b/sites/shared/components/wrappers/modal.mjs
@@ -57,7 +57,13 @@ export const ModalWrapper = ({
     ? `lg:opacity-0 ${slideClasses[slideFrom]} lg:translate-x-0 lg:translate-y-0`
     : 'opacity-100 translate-none'
 
-  const stopClick = (evt) => evt.stopPropagation()
+  const stopClick = (evt) => {
+    /*
+     * Do not keep modal open for links (with a href)
+     * but do keep it open for buttons (like a new modal context)
+     */
+    if (!evt.target.attributes.href) evt.stopPropagation()
+  }
 
   return (
     <div