fix: docrow link

RedTurtle · Jun 5, 2024 · 021ba21 · 021ba21
1 parent 50f699f
commit 021ba21
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 19 deletions.
diff --git a/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx b/src/components/ItaliaTheme/View/CartellaModulisticaView/DocRow.jsx
@@ -5,6 +5,7 @@
 
 import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
+import { v4 as uuid } from 'uuid';
 import Highlighter from 'react-highlight-words';
 
 import { UniversalLink } from '@plone/volto/components';
@@ -40,24 +41,41 @@ const Downloads = ({ item, titleDoc, filteredWords }) => {
       </div>
     </React.Fragment>
   ) : (
-    <UniversalLink
-      href={item.remoteUrl || flattenToAppURL(item['@id'])}
-      title={item.title}
-      className="modulistica-link"
-    >
-      <div className="title">{item.title}</div>
-      <FontAwesomeIcon
-        icon={['fas', 'link']}
-        alt={item.title}
-        role="presentation"
-        aria-hidden={true}
-      />
-    </UniversalLink>
+    <>
+      <div className="title">
+        <UniversalLink
+          href={item.remoteUrl || flattenToAppURL(item['@id'])}
+          title={item.title}
+        >
+          <Highlighter
+            highlightClassName="highlighted-text"
+            searchWords={filteredWords}
+            autoEscape={true}
+            textToHighlight={item.title}
+          />
+        </UniversalLink>
+      </div>
+      <div className="downloads">
+        <UniversalLink
+          href={item.remoteUrl || flattenToAppURL(item['@id'])}
+          title={item.title}
+          className="modulistica-link"
+        >
+          <FontAwesomeIcon
+            icon={['fas', 'link']}
+            alt={item.title}
+            role="presentation"
+            aria-hidden={true}
+          />
+        </UniversalLink>
+      </div>
+    </>
   );
 };
 
 const DocRow = ({ doc, items, searchableText, collapsable }) => {
   const filteredWords = searchableText.split(' ');
+  const id = uuid();
 
   const [itemOpen, setItemOpen] = useState(!collapsable);
 
@@ -131,19 +149,20 @@ const DocRow = ({ doc, items, searchableText, collapsable }) => {
                   setItemOpen(itemOpen ? false : true);
                 }}
                 aria-expanded={itemOpen}
-                aria-controls="collapsedContent"
+                aria-controls={`accordion-content-${id}`}
                 aria-labelledby={`title-${doc.id}`}
               >
                 <Icon
                   color="primary"
                   icon={itemOpen ? 'it-minus' : 'it-plus'}
                   padding={false}
+                  key={itemOpen + id}
                 />
               </button>
             )}
           </div>
           <div
-            id="collapsedContent"
+            id={`accordion-content-${id}`}
             className={cx('accordion-content', { open: itemOpen })}
             role="region"
             aria-labelledby="headingAccordion"

diff --git a/theme/ItaliaTheme/Views/_cartellaModulistica.scss b/theme/ItaliaTheme/Views/_cartellaModulistica.scss
@@ -110,10 +110,9 @@ $docs-section-margin: 3em;
           }
 
           a.modulistica-link {
-            display: flex;
-            width: 100%;
-            align-items: center;
-            justify-content: space-between;
+            .external-link {
+              display: none;
+            }
 
             svg {
               width: 2em;