Merge pull request #11416 from wellcomecollection/popup-dialog-regex

Add ability to limit where popupDialog appears with regex
wellcomecollection · Nov 20, 2024 · 558c1e7 · 558c1e7
2 parents 79a744e + 0d75f56
commit 558c1e7
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 3 deletions.
diff --git a/cardigan/stories/components/PopupDialog/PopupDialog.stories.tsx b/cardigan/stories/components/PopupDialog/PopupDialog.stories.tsx
@@ -26,6 +26,7 @@ const meta: Meta<typeof PopupDialog> = {
           },
         ],
         isShown: true,
+        routeRegex: null,
       },
     },
   },

diff --git a/common/customtypes/popup-dialog/index.json b/common/customtypes/popup-dialog/index.json
@@ -3,6 +3,7 @@
   "label": "Popup dialog",
   "repeatable": false,
   "status": true,
+  "format": "custom",
   "json": {
     "Popup dialog": {
       "openButtonText": {
@@ -44,8 +45,14 @@
           "default_value": false,
           "label": "Is shown?"
         }
+      },
+      "routeRegex": {
+        "type": "Text",
+        "config": {
+          "label": "Route regex",
+          "placeholder": "Pipe-separated (|) list of page paths here if you only want this on certain pages"
+        }
       }
     }
-  },
-  "format": "custom"
+  }
 }
diff --git a/common/prismicio-types.d.ts b/common/prismicio-types.d.ts
@@ -4221,6 +4221,17 @@ interface PopupDialogDocumentData {
    * - **Documentation**: https://prismic.io/docs/field#boolean
    */
   isShown: prismic.BooleanField;
+
+  /**
+   * Route regex field in *Popup dialog*
+   *
+   * - **Field Type**: Text
+   * - **Placeholder**: Pipe-separated (|) list of page paths here if you only want this on certain pages
+   * - **API ID Path**: popup-dialog.routeRegex
+   * - **Tab**: Popup dialog
+   * - **Documentation**: https://prismic.io/docs/field#key-text
+   */
+  routeRegex: prismic.KeyTextField;
 }
 
 /**

diff --git a/common/server-data/prismic.ts b/common/server-data/prismic.ts
@@ -40,6 +40,7 @@ export const defaultValue = {
       openButtonText: null,
       text: [] as prismic.RichTextField,
       title: null,
+      routeRegex: null,
     },
   },
   collectionVenues: {

diff --git a/common/services/prismic/documents.ts b/common/services/prismic/documents.ts
@@ -101,5 +101,6 @@ export function emptyPopupDialog(): RawPopupDialogDocument {
     openButtonText: null,
     text: [],
     title: null,
+    routeRegex: null,
   }) as RawPopupDialogDocument;
 }
diff --git a/common/test/fixtures/prismicData/prismic-data.ts b/common/test/fixtures/prismicData/prismic-data.ts
@@ -32,6 +32,7 @@ const prismicData: SimplifiedPrismicData = {
         url: 'https://interviewer.djsresearch.com/scripts/Dubinterviewer.dll/Frames?Quest=7577',
       },
       isShown: false,
+      routeRegex: null,
     },
   },
   collectionVenues: {

diff --git a/common/views/components/PageLayout/PageLayout.tsx b/common/views/components/PageLayout/PageLayout.tsx
@@ -341,7 +341,11 @@ const PageLayoutComponent: FunctionComponent<Props> = ({
               }}
             />
           )}
-        {popupDialog.data.isShown && <PopupDialog document={popupDialog} />}
+        {popupDialog.data.isShown &&
+          (!popupDialog.data.routeRegex ||
+            urlString.match(new RegExp(popupDialog.data.routeRegex))) && (
+            <PopupDialog document={popupDialog} />
+          )}
         <div
           id="main"
           className="main"
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,6 +26,7 @@ const meta: Meta<typeof PopupDialog> = { @@
               },
             ],
             isShown: true,
+            routeRegex: null,
           },
         },
       },
@@ Expand Down @@