Merge pull request #158 from nr2f1/accordions-internal-navigation

page contents navigation
nr2f1 · Jan 14, 2025 · 4e3ff00 · 4e3ff00
2 parents 33fe7dc + be2a509
commit 4e3ff00
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 53 deletions.
diff --git a/website/src/app/[lang]/register-a-patient/page-body.module.scss b/website/src/app/[lang]/register-a-patient/page-body.module.scss
@@ -18,7 +18,7 @@
     @include layout.content-max-width;
     display: grid;
     grid-column-gap: var(--spacing-12);
-    grid-template-columns: var(--spacing-56) minmax(38rem, 42rem) var(
+    grid-template-columns: var(--spacing-56) minmax(auto, 42rem) var(
         --spacing-56
       );
     grid-template-rows: repeat(3, min-content);
@@ -162,7 +162,3 @@
     }
   }
 }
-
-.open-new-tab {
-  margin-block-end: var(--spacing-4);
-}
diff --git a/website/src/app/[lang]/register-a-patient/page-body.tsx b/website/src/app/[lang]/register-a-patient/page-body.tsx
@@ -1,9 +1,10 @@
-import PageContents from '@components/page-contents';
 import styles from './page-body.module.scss';
 
+import PageContents from '@components/page-contents';
 import PageLatestNews from '@components/page-latest-news';
 import SignupForm from '@components/signup-form';
 import type { AvailableLocale } from '@i18n/locales';
+import { createHashLink } from '@shared/utils/hash-links';
 
 interface RegisterPageBodyProps {
   lang: AvailableLocale;
@@ -36,7 +37,7 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
             </li>
           </ul>
           <section>
-            <h2>Register with us</h2>
+            <h2 id={createHashLink('Register with us')}>Register with us</h2>
             <p>
               We want to keep track of the number of diagnosed cases around the
               world, so that we can share this with you and our community of
@@ -47,7 +48,9 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
             <SignupForm lang={lang} registerPatient />
           </section>
           <section>
-            <h2>Register with the NR2F1 Patient Registry</h2>
+            <h2 id={createHashLink('Register with the NR2F1 Patient Registry')}>
+              Register with the NR2F1 Patient Registry
+            </h2>
             <p>
               The Patient Registry collects information through surveys on how a
               disease affects a person over a lifetime to better understand
@@ -79,7 +82,7 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
               title="Natural history study registry signup"
               target="_blank"
               rel="noreferrer"
-              className={`button button--on-light-open-new-tab ${styles['open-new-tab']}`}
+              className="button button--on-light-open-new-tab mbe--4"
             >
               Register now
             </a>
@@ -89,32 +92,18 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
               title="Natural history study registry login"
               target="_blank"
               rel="noreferrer"
-              className={`button button--on-light-open-new-tab ${styles['open-new-tab']}`}
+              className="button button--on-light-open-new-tab mbe--6"
             >
               Login
             </a>
             <details className={styles.accordion}>
-              <summary>Who will have access to the data?</summary>
+              <summary>Who can take part?</summary>
               <div>
                 <p>
-                  Only a few study administrators have access to patient
-                  identifying data. The patient or carer owns their own data.
-                  They can share it with whoever they want, including doctors,
-                  teachers, other carers, etc. if useful.
+                  Parents or carers of a confirmed BBSOAS patient or BBSOAS
+                  patients themselves. By confirmed we mean with a genetic
+                  report showing the diagnosis.
                 </p>
-                <p>Anonymous data is accessed by:</p>
-                <ul>
-                  <li>
-                    The NR2F1 Foundation - limited to whose working on Patient
-                    Registry 
-                  </li>
-                  <li>COMBINEDBrain - our scientific partner</li>
-                  <li>
-                    Subject to approval by the NR2F1 Foundation - researchers
-                    and industry who are working on BBSOAS studies
-                  </li>
-                  <li>Matrix - the company behind the Patient Registry tool</li>
-                </ul>
               </div>
             </details>
             <details className={styles.accordion}>
@@ -142,33 +131,53 @@ const RegisterPageBody: React.FC<RegisterPageBodyProps> = ({ lang }) => {
               </div>
             </details>
             <details className={styles.accordion}>
-              <summary>Who will have access to the data?</summary>
+              <summary>
+                Other than filling out surveys, how else can I use Patient
+                Registry?
+              </summary>
               <div>
                 <p>
-                  Only a few study administrators have access to patient
-                  identifying data. The patient or carer owns their own data.
-                  They can share it with whoever they want, including doctors,
-                  teachers, other carers, etc. if useful.
+                  Patient Registry can also be used as a personal health
+                  monitoring tool. It has features that make managing daily
+                  medical care easier.
+                </p>
+              </div>
+            </details>
+            <details className={styles.accordion}>
+              <summary>
+                What languages is Matrix and the surveys available in?
+              </summary>
+              <div>
+                <p>
+                  Matrix is available in English, Spanish, Italian, French,
+                  German, Portuguese and Korean. Surveys are available in
+                  English, Spanish, Italian, French and German. Coming soon:
+                  Portuguese, Korean and Hebrew.
+                </p>
+              </div>
+            </details>
+            <details className={styles.accordion}>
+              <summary>
+                Who can I contact about the Patient Registry for more help or
+                answers?
+              </summary>
+              <div>
+                <p>
+                  Email{' '}
+                  <a href="mailto:[email protected]">
+                    [email protected]
+                  </a>{' '}
+                  and we can help or offer a Zoom meeting to help you get
+                  registered.
                 </p>
-                <p>Anonymous data is accessed by:</p>
-                <ul>
-                  <li>
-                    The NR2F1 Foundation - limited to whose working on Patient
-                    Registry 
-                  </li>
-                  <li>COMBINEDBrain - our scientific partner</li>
-                  <li>
-                    Subject to approval by the NR2F1 Foundation - researchers
-                    and industry who are working on BBSOAS studies
-                  </li>
-                  <li>Matrix - the company behind the Patient Registry tool</li>
-                </ul>
               </div>
             </details>
           </section>
 
           <section>
-            <h2>Register for a Clinical Research ID</h2>
+            <h2 id={createHashLink('Register for a Clinical Research ID')}>
+              Register for a Clinical Research ID
+            </h2>
             <p>
               The Clinical Research ID (CRID) is a free patient-generated
               service specifically for use in clinical research. The parent or

diff --git a/website/src/components/page-contents/index.tsx b/website/src/components/page-contents/index.tsx
@@ -1,3 +1,4 @@
+import { createHashLink } from '@shared/utils/hash-links';
 import styles from './index.module.scss';
 
 import type { AvailableLocale, LocalisedString } from '@i18n/locales';
@@ -23,13 +24,23 @@ const PageContents: React.FC<PageContentsProps> = ({ lang }) => {
         <nav>
           <ul>
             <li>
-              <a href="/">Register with us</a>
+              <a href={`#${createHashLink('Register with us')}`}>
+                Register with us
+              </a>
             </li>
             <li>
-              <a href="/">Register with the NR2F1 Patient Registry</a>
+              <a
+                href={`#${createHashLink('Register with the NR2F1 Patient Registry')}`}
+              >
+                Register with the NR2F1 Patient Registry
+              </a>
             </li>
             <li>
-              <a href="/">Register for a Clinical Research ID</a>
+              <a
+                href={`#${createHashLink('Register for a Clinical Research ID')}`}
+              >
+                Register for a Clinical Research ID
+              </a>
             </li>
           </ul>
         </nav>
@@ -39,13 +50,23 @@ const PageContents: React.FC<PageContentsProps> = ({ lang }) => {
         <nav>
           <ul>
             <li>
-              <a href="/">Register with us</a>
+              <a href={`#${createHashLink('Register with us')}`}>
+                Register with us
+              </a>
             </li>
             <li>
-              <a href="/">Register with the NR2F1 Patient Registry</a>
+              <a
+                href={`#${createHashLink('Register with the NR2F1 Patient Registry')}`}
+              >
+                Register with the NR2F1 Patient Registry
+              </a>
             </li>
             <li>
-              <a href="/">Register for a Clinical Research ID</a>
+              <a
+                href={`#${createHashLink('Register for a Clinical Research ID')}`}
+              >
+                Register for a Clinical Research ID
+              </a>
             </li>
           </ul>
         </nav>

diff --git a/website/src/shared/utils/hash-links.ts b/website/src/shared/utils/hash-links.ts
@@ -0,0 +1,6 @@
+export const createHashLink = (text: string): string => {
+  return text
+    .toLowerCase()
+    .replace(/ /g, '-')
+    .replace(/[^a-z0-9-]/g, '');
+};
diff --git a/website/src/styles/_global.scss b/website/src/styles/_global.scss
@@ -6,6 +6,7 @@
 
 html {
   font-size: 100%;
+  scroll-behavior: smooth;
 }
 
 body {

diff --git a/website/src/styles/_helpers.scss b/website/src/styles/_helpers.scss
@@ -0,0 +1,7 @@
+.mbe--4 {
+  margin-block-end: var(--spacing-4);
+}
+
+.mbe--6 {
+  margin-block-end: var(--spacing-6);
+}
diff --git a/website/src/styles/main.scss b/website/src/styles/main.scss
@@ -6,4 +6,5 @@
 @use 'layout';
 @use 'border';
 @use 'buttons';
+@use 'helpers';
 @use 'global';
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,6 +6,7 @@ @@
     html {
       font-size: 100%;
+      scroll-behavior: smooth;
     }
     body {
@@ Expand Down @@