Merge pull request #1042 from Eastern-Research-Group/feature/854_conf…

…igurable-text

Feature/854 configurable text

app/client/index.html

@@ -154,13 +154,15 @@
         font-size: 0.91rem;
       }
 
-      .menu--main .menu__link,
-      .menu--main .menu__link:visited {
-        color: #fff;
-      }
+      @media all and (min-width: 55em) {
+        .menu--main .menu__link,
+        .menu--main .menu__link:visited {
+          color: #fff;
+        }
 
-      .menu--main .menu__link:hover:visited {
-        color: #005ea2;
+        .menu--main .menu__link:hover:visited {
+          color: #005ea2;
+        }
       }
 
       .site-logo__svg {

app/client/src/components/shared/Modal.tsx

@@ -7,6 +7,8 @@ import * as Dialog from '@radix-ui/react-dialog';
 import type { ReactNode } from 'react';
 // styles
 import { colors, iconButtonStyles } from 'styles/index';
+// types
+import type { SerializedStyles } from '@emotion/react';
 
 const buttonContainerStyles = css`
   margin-top: 15px;
@@ -233,6 +235,7 @@ export default function Modal({
 
 type DisclaimerProps = {
   children: ReactNode;
+  css?: SerializedStyles;
   infoIcon?: boolean;
 };
 

app/client/src/components/shared/Page.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import type { Node } from 'react';
+import type { ReactNode } from 'react';
 import { css } from '@emotion/react';
 import { useNavigate } from 'react-router-dom';
 import esriConfig from '@arcgis/core/config';
@@ -12,6 +12,7 @@ import DataContent from 'components/shared/DataContent';
 import AboutContent from 'components/shared/AboutContent';
 import EducatorsContent from 'components/shared/EducatorsContent';
 import GlossaryPanel, { GlossaryTerm } from 'components/shared/GlossaryPanel';
+import ShowLessMore from 'components/shared/ShowLessMore';
 // contexts
 import { useConfigFilesState } from 'contexts/ConfigFiles';
 // utilities
@@ -183,7 +184,7 @@ const subtitleStyles = css`
 `;
 
 type Props = {
-  children: Node;
+  children: ReactNode;
 };
 
 function Page({ children }: Props) {
@@ -315,15 +316,16 @@ function Page({ children }: Props) {
   useEffect(() => {
     if (pollInitialized) return;
 
-    // poll for rendering glossary terms from html
+    // poll for rendering glossary terms and collapsible text from html
     function poll() {
       const glossarySpans = document.querySelectorAll(
         'span[data-glossary-term]',
       );
-      glossarySpans.forEach((span) => {
+      (glossarySpans as NodeListOf<HTMLSpanElement>).forEach((span) => {
         if (
           !span.dataset.hasOwnProperty('glossaryTerm') ||
-          !span.dataset.hasOwnProperty('term')
+          !span.dataset.hasOwnProperty('term') ||
+          !span.dataset.term
         )
           return;
 
@@ -333,9 +335,33 @@ function Page({ children }: Props) {
             {span.innerText}
           </GlossaryTerm>,
         );
-        span.parentNode.replaceChild(node, span);
+        span.parentNode?.replaceChild(node, span);
       });
 
+      const showLessMores = document.querySelectorAll('[data-show-less-more]');
+      (showLessMores as NodeListOf<HTMLSpanElement | HTMLDivElement>).forEach(
+        (el) => {
+          const node = document.createElement(el.localName);
+          const Container = el.localName;
+          createRoot(node).render(
+            <ShowLessMore
+              charLimit={parseInt(el.dataset.charLimit ?? '0')}
+              text={
+                el.innerText === el.innerHTML ? (
+                  el.innerText
+                ) : (
+                  <Container
+                    //@ts-ignore
+                    dangerouslySetInnerHTML={{ __html: el.innerHTML }}
+                  />
+                )
+              }
+            />,
+          );
+          el.parentNode?.replaceChild(node, el);
+        },
+      );
+
       setTimeout(() => {
         poll();
       }, 250);