fix: fix lint warnings

src/components/content-collapse/contentCollapse.js → src/components/content-collapse/content-collapse.js

@@ -19,7 +19,6 @@ function ContentCollapse({ label, labelClose, children }) {
 
   const collRef = useRef(null);
   const collObjRef = useRef(null);
-  // const id = 'content-collapse-' + new Date().getTime()
 
   const [id, setId] = useState("content-collapse-");
 
@@ -46,18 +45,18 @@ function ContentCollapse({ label, labelClose, children }) {
 
   return (
     <div className="content-collapse">
-      <a
+      <button
         href="#"
-        role="button"
+        type="button"
         onClick={collapseToggle}
         className="read-more mt-3 d-inline-flex align-items-center text-decoration-none"
-        /* data-bs-toggle="collapse" data-bs-target={'#'+id+'ReadMore'} */ aria-expanded="false"
+        aria-expanded="false"
         aria-controls={id}
       >
         <span className="more-text">{label}</span>
         <span className="less-text">{labelClose}</span>
         <Icon {...icon} />
-      </a>
+      </button>
       <div ref={collRef} className="collapse" id={id}>
         <ReactMarkdown className="mt-4">{children}</ReactMarkdown>
       </div>

src/components/footer-main/footer-main.js

@@ -63,14 +63,14 @@ function FooterMain({ id, title, cols, tagsNo, social, community, subscribe }) {
 
           {cols && (
             <div className="row">
-              {cols.map((value, index) => (
+              {cols.map((value, colsIndex) => (
                 <div
-                  key={`item-${index}`}
+                  key={`item-${colsIndex}`}
                   className="col-12 col-md-6 col-lg-3 col-sm-6 pb-mb-2 pb-lg-0"
                 >
                   <List {...value}>
-                    {value.items.map((item, index) => (
-                      <ListItem {...item} key={`subitem-${index}`} />
+                    {value.items.map((item, itemsIndex) => (
+                      <ListItem {...item} key={`subitem-${itemsIndex}`} />
                     ))}
                   </List>
                 </div>

src/components/header-menu-link/header-menu-link.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { useEffect } from "react";
 import { Dropdown } from "bootstrap-italia";
-import "./header-menu-link.scss";
 
 import { Link } from "gatsby";
 import Icon from "../icon/icon";

src/components/list-item/list-item.js

@@ -92,21 +92,21 @@ function ListItem({
   let icons;
   if (actions) {
     let urlHidden = false;
-    icons = actions.map((icons, index) => {
+    icons = actions.map((iconAction, actionsIndex) => {
       // to set aria-hidden if an icon on the right side has the same url of the main element
-      if (icons.url === url) urlHidden = true;
+      if (iconAction.url === url) urlHidden = true;
       else urlHidden = false;
       //
       return (
         <Link
-          to={icons.url}
-          target={icons.blank ? "_blank" : undefined}
-          rel={icons.blank ? "noreferrer" : undefined}
-          aria-label={icons.ariaLabel}
+          to={iconAction.url}
+          target={iconAction.blank ? "_blank" : undefined}
+          rel={iconAction.blank ? "noreferrer" : undefined}
+          aria-label={iconAction.ariaLabel}
           aria-hidden={urlHidden ? "true" : undefined}
-          key={`iconsaction-${index}`}
+          key={`iconsaction-${actionsIndex}`}
         >
-          <Icon {...icons} />
+          <Icon {...iconAction} />
         </Link>
       );
     });
@@ -119,7 +119,7 @@ function ListItem({
   if (metadata) {
     metadataRendered = <span className="metadata">{metadata.label}</span>;
     if (metadata.url) {
-      metadataRendered = <Link to="#">{metadataRendered}</Link>;
+      metadataRendered = <Link to={metadata.url}>{metadataRendered}</Link>;
     }
   }
   let metadataActionsRendered;

src/components/nav-sidebar/nav-sidebar.js

@@ -207,12 +207,15 @@ function NavSidebar({
               </button>
             </div>
             <div className="menu-wrapper">
-              <a className="it-back-button" href="#" role="button">
+              <button
+                className="it-back-button btn w-100 text-start"
+                type="button"
+              >
                 <svg role="img" className="icon icon-sm icon-primary align-top">
                   <use href="/svg/sprites.svg#it-chevron-left" />
                 </svg>
                 <span>{backLabel}</span>
-              </a>
+              </button>
 
               <div className="nav-sidebar-header mx-4 mx-lg-3 mb-4 mb-lg-5 mt-0 mt-lg-3">
                 <a className="" href={url}>

src/components/search-main/search-main.js

@@ -110,18 +110,21 @@ function SearchMain({ location, maxResults, title, suggest }) {
                   {suggest.items && (
                     <div className="items-wrapper d-flex flex-wrap ms-lg-5">
                       <ul className="list-inline d-flex flex-wrap">
-                        {suggest.items.map((item, index) => (
-                          <li className="list-item me-3 mb-3" key={index}>
+                        {suggest.items.map((suggestItem, suggestIndex) => (
+                          <li
+                            className="list-item me-3 mb-3"
+                            key={suggestIndex}
+                          >
                             <Button
                               onClick={() => {
-                                setInput(item.label);
-                                search(item.label);
+                                setInput(suggestItem.label);
+                                search(suggestItem.label);
                               }}
                               type="submit"
                               size="md"
                               btnStyle="outline-secondary"
                             >
-                              {item.label}
+                              {suggestItem.label}
                             </Button>
                           </li>
                         ))}

src/components/section-editorial/section-editorial.js

@@ -97,7 +97,9 @@ function SectionEditorial({
     <section className={styles} aria-describedby={id}>
       <div className={container}>
         <div className={row}>
-          {menu && (
+          {
+            // XXX This is a section index template, don't remove
+            /* menu && ( }
             <div className="d-none d-lg-block col-lg-3 offset-lg-1 affix-parent">
               <div className="sidebar-wrapper my-lg-0 affix-top">
                 <div className="sidebar-linklist-wrapper">
@@ -114,7 +116,6 @@ function SectionEditorial({
                         </a>
                       </li>
                       <li>
-                        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                         <a className="list-item medium" href="#">
                           <span>Link lista 4</span>
                         </a>
@@ -124,7 +125,8 @@ function SectionEditorial({
                 </div>
               </div>
             </div>
-          )}
+          ) */
+          }
           <div className={grid}>
             <div>
               {title && (

src/components/section-intro/section-intro.js

@@ -3,7 +3,7 @@ import React from "react";
 import ReactMarkdown from "react-markdown";
 import "./section-intro.scss";
 
-import ContentCollapse from "../content-collapse/contentCollapse";
+import ContentCollapse from "../content-collapse/content-collapse";
 
 function SectionIntro({
   id,

src/components/table/table.js

@@ -24,25 +24,25 @@ function Table({ title, head, rows, addonClasses, responsive, headingLevel }) {
   }
 
   if (rows) {
-    rowItems = rows.map((rowItem, index) => (
-      <tr key={`tr-${index}`}>
-        {rowItem.cols.map((tdItem, index) => {
+    rowItems = rows.map((rowItem, rowIndex) => (
+      <tr key={`tr-${rowIndex}`}>
+        {rowItem.cols.map((tdItem, tdIndex) => {
           if (tdItem.scope) {
             CellType = `th`;
             CellScope = "row";
           } else {
             CellType = `td`;
             CellScope = null;
           }
-          const tagsItems = tdItem.tags?.map((item, index) => (
+          const tagsItems = tdItem.tags?.map((item, itemIndex) => (
             <div>
-              <Tag {...item} key={`tag-${index}`} />
+              <Tag {...item} key={`tag-${itemIndex}`} />
             </div>
           ));
           return (
             <CellType
               scope={CellScope}
-              key={`td-${index}`}
+              key={`td-${tdIndex}`}
               className={tdItem.addonClasses}
             >
               {tdItem.text && <ReactMarkdown>{tdItem.text}</ReactMarkdown>}

src/components/text-image-cta/text-image-cta.js

@@ -5,7 +5,7 @@ import SimpleCta from "../simple-cta/simple-cta";
 import "./text-image-cta.scss";
 
 import ImageResponsive from "../image-responsive/image-responsive";
-import ContentCollapse from "../content-collapse/contentCollapse";
+import ContentCollapse from "../content-collapse/content-collapse";
 
 function TextImageCta({
   title,

src/templates/home.js

@@ -21,7 +21,7 @@ import skipLinksData from "../data/skiplinks.yaml";
 
 import Highlight from "../components/highlight/highlight";
 import SearchMain from "../components/search-main/search-main";
-import ContentCollapse from "../components/content-collapse/contentCollapse";
+import ContentCollapse from "../components/content-collapse/content-collapse";
 import SectionIntro from "../components/section-intro/section-intro";
 import HighlightCards from "../components/highlight-cards/highlight-cards";
 import Testimonials from "../components/testimonials/testimonials";