Road to v2.1.0 (#454)

* feat: banner on assistenza page (#431) * feat: sooner expiration badge on notices (#427) * added badges on notices * feat: new faq page UI (#441) * fixed faq filtering * feat: keypoints layout on "come partecipare" page (#442) * fix: accessibility (#447) * fix: review faqs (#455) * feat: update video (#457) * feat: MaaS measure update (#456) * fix: accessibility (#459) * fix: replaced transcription (#461) * fix: accessibility bug on header (#462) Co-authored-by: Emanuel Pistarà <[email protected]> Co-authored-by: emnlpstr <[email protected]> Co-authored-by: danieledebernardinDTD <[email protected]>
teamdigitale · Jul 28, 2022 · 3d96d6f · 3d96d6f
1 parent 8689de7
commit 3d96d6f
Show file tree

Hide file tree

Showing 26 changed files with 1,212 additions and 456 deletions.
diff --git a/contents/classifica-pa/classifica-pa.yml b/contents/classifica-pa/classifica-pa.yml
@@ -37,6 +37,22 @@ verticalTimeline:
     headerParagraph: "All’interno della tua area riservata puoi controllare <strong>lo stato della classificazione e ricevere notifiche dedicate</strong> sullo stato di approvazione."
     sectionId: 'receive-updates'
 video:
-  src: https://www.youtube-nocookie.com/embed/WuJv4tNdJ4o
+  src: https://www.youtube-nocookie.com/embed/r2QD-uGbI7M
   description: Scopri come classificare dati e servizi della tua amministrazione su PA digitale 2026.
-  videoText: "PA digitale 2026 è il punto di accesso alle risorse previste dal PNRR per la transizione digitale della PA.<br></br>Grazie alla piattaforma puoi anche effettuare la Classificazione dati e servizi necessaria per avviare la migrazione al cloud.<br></br>Completarla è semplice: puoi verificare l’elenco dei servizi e il livello di classificazione creati automaticamente sulla base delle caratteristiche della tua PA: se sono corretti, puoi confermarli direttamente. In caso contrario, puoi determinare una nuova classificazione del servizio compilando un questionario. Inoltre, puoi anche aggiungere o eliminare un servizio. Una volta ultimata questa procedura, l’Agenzia per la Cybersicurezza Nazionale eseguirà le verifiche di fattibilità.<br></br>Hai sempre tutto sotto controllo: nell’area riservata infatti puoi monitorare lo stato della classificazione, anche grazie a notifiche dedicate.<br></br>La classificazione è il primo passo per la migrazione al cloud della PA, per garantire servizi e infrastrutture più sicuri, efficienti e affidabili."
+  videoText: "PA digitale 2026 è il punto di accesso alle risorse previste dal PNRR per la transizione
+    digitale della PA.<br><br>
+    Grazie alla piattaforma puoi anche effettuare la Classificazione dati e servizi necessaria
+    per avviare la migrazione al cloud.<br><br>
+    Completarla è semplice.Se sei un’ASL, un Comune o un istituto scolastico puoi verificare
+    l’elenco dei servizi e il livello di classificazione creati automaticamente sulla base delle
+    caratteristiche della tua PA. Se esaustivo, puoi confermarlo direttamente. In caso
+    contrario, puoi determinare una nuova classificazione di uno o più servizi compilando un
+    questionario. Inoltre, puoi anche aggiungere o eliminare un servizio. Tutte le altre
+    amministrazioni troveranno una lista minima di servizi pre-classificati, che corrisponde ai
+    servizi di funzionamento tipici. Per gli altri servizi erogati, ogni PA dovrà compilare il
+    questionario. Una volta ultimata questa procedura, l’Agenzia per la Cybersicurezza
+    Nazionale eseguirà le verifiche di conformità.<br><br>
+    Hai sempre tutto sotto controllo: nell’area riservata infatti puoi monitorare lo stato della
+    classificazione, anche grazie a notifiche dedicate.<br><br>
+    La classificazione è il primo passo per la migrazione al cloud della PA, per garantire servizi
+    e infrastrutture più sicuri, efficienti e affidabili."
diff --git a/contents/come-partecipare/come-partecipare.yml b/contents/come-partecipare/come-partecipare.yml
@@ -11,22 +11,33 @@ keypoints:
       image: 'pc-card.svg'
       title: 'Attivare la tua PA'
       desc: 'Per partecipare agli avvisi pubblici e richiedere i finanziamenti'
-    - number: "02"
+    - number: "04"
       image: 'icon-chat.svg'
       title: 'Ricevere assistenza'
       desc: 'Per risolvere dubbi o problemi riguardo la piattaforma e le candidature.'
     - number: "03"
       image: 'candida-pa-lens.svg'
       title: 'Classificare dati e servizi'
       desc: 'Per abilitare il processo di migrazione delle PA al cloud.'
-    - number: "04"
+    - number: "02"
       image: 'invia-candidatura.svg'
       title: 'Candidare una PA agli avvisi'
       desc: 'Attraverso la creazione e l’invio del documento di candidatura.'
     - number: "05"
       image: 'gest-prog-icon.svg'
       title: 'Gestire un progetto'
       desc: Per completare le attività previste e richiedere il finanziamento.
+listMenu:
+  - sectionTitle: Attivare la tua PA
+    sectionId: "keypoint-01"
+  - sectionTitle: Ricevere assistenza
+    sectionId: "keypoint-04"
+  - sectionTitle: Classificare dati e servizi
+    sectionId: "keypoint-03"
+  - sectionTitle: Candidare una PA agli avvisi
+    sectionId: "keypoint-02"
+  - sectionTitle: Gestire un progetto
+    sectionId: "keypoint-05"
 sectionFirst:
   number: '01'
   title: 'Attivare la tua  PA'

diff --git a/contents/faq-page/faq.yml b/contents/faq-page/faq.yml
diff --git a/contents/home-page/home.yml b/contents/home-page/home.yml
@@ -4,7 +4,7 @@ heroMainBanner:
   title: Entra in PA digitale 2026
   body: PA digitale 2026 è il punto di accesso alle risorse per la transizione digitale.<strong> Accedi alla piattaforma e attiva il profilo della tua PA.</strong> Scopri come candidare la tua amministrazione agli avvisi e richiedere i fondi.
   firstButtonLabel: SCOPRI DI PIÙ
-  firstButtonAriaLabel: Scopri di più su come entrare in PA digitale 2026 (Collegamento esterno - Apre su nuova scheda)
+  firstButtonAriaLabel: Scopri di più su come entrare in PA digitale 2026
   linkTo: https://innovazione.gov.it/dipartimento/focus/italia-digitale-2026/
 heroDigital:
   title: Italia digitale 2026
@@ -17,14 +17,14 @@ heroPnrr:
   title: Candida la tua PA agli avvisi dedicati
   body: Partecipa agli avvisi <strong>per richiedere i finanziamenti</strong> e avviare il processo di transizione digitale.
   firstButtonLabel: SCOPRI DI PIÙ
-  firstButtonAriaLabel: Scopri di più su come candidare la tua PA agli avvisi dedicati (Collegamento esterno - Apre su nuova scheda)
+  firstButtonAriaLabel: Scopri di più su come candidare la tua PA agli avvisi dedicati
   link: /come-partecipare/candida-pa
 heroClassificazione:
   category: Classificazione
   title: Classificazione dati e servizi
   body: La classificazione dati e servizi digitali <strong>deve essere effettuata da tutte le PA</strong> ed è <strong>necessaria per avviare il processo di migrazione al cloud.</strong>
   firstButtonLabel: SCOPRI DI PIÙ
-  firstButtonAriaLabel: Scopri di più (Collegamento esterno - Apre su nuova scheda)
+  firstButtonAriaLabel: Scopri di più su Classificazione dati e servizi
   link: /come-partecipare/classifica-pa
 heroContribute:
   category: Come contribuire

diff --git a/contents/note-legali-page/note-legali.md b/contents/note-legali-page/note-legali.md
@@ -3,7 +3,7 @@
 La Presidenza del Consiglio dei Ministri - Dipartimento per la Trasformazione Digitale, con sede in Largo Pietro di Brazzà 86, 00187 Roma, ha realizzato questo sito con lo scopo di fornire alle amministrazioni informazioni relativamente alle misure del PNRR dedicati alla transizione digitale, permettergli di richiedere i fondi, rendicontare l’avanzamento dei progetti e ricevere assistenza.
 
 ## **Licenza dei contenuti**
-In applicazione del principio *open by default* ai sensi dell’articolo 52 del decreto legislativo 7 marzo 2005, n. 82 (CAD) e salvo dove diversamente specificato (compresi i contenuti incorporati di terzi), i dati, i documenti e le informazioni pubblicati sul sito sono rilasciati con [licenza CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/legalcode.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='CC-BY 4.0 (Collegamento esterno - Apre su nuova scheda)'}.
+In applicazione del principio *open by default* ai sensi dell’articolo 52 del decreto legislativo 7 marzo 2005, n. 82 (CAD) e salvo dove diversamente specificato (compresi i contenuti incorporati di terzi), i dati, i documenti e le informazioni pubblicati sul sito sono rilasciati con [licenza CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/legalcode.it){class="text-decoration-none font-weight-semibold", rel='noreferrer', target='\_blank', aria-label='Licenza CC-BY 4.0 (Collegamento esterno - Apre su nuova scheda)'}.
 
 Gli utenti sono quindi liberi di condividere (riprodurre, distribuire, comunicare al pubblico, esporre in pubblico) rappresentare, eseguire e recitare questo materiale con qualsiasi mezzo e formato e modificare (trasformare il materiale e utilizzarlo per opere derivate) per qualsiasi fine, anche commerciale con il solo onere di attribuzione, senza apporre restrizioni aggiuntive.
 

diff --git a/contents/opportunity-page/opportunity.yml b/contents/opportunity-page/opportunity.yml
@@ -310,7 +310,7 @@ beneficiaries:
     solutionType: '/iniziativa/presentazione-progetti'
     accessSectionId: presentazione-progetto
     accessLabel: Presentazione Progetto
-    updates: <a href="https://innovazione.gov.it/notizie/avvisi-pubblici/mobility-as-a-service-for-italy/" target="_blank" aria-label="Leggi di più sull'avviso pubblico del 22 Novembre 2021 (Collegamento esterno - Apre su nuova scheda)">L’avviso pubblico del 22 novembre 2021</a> ha portato alla selezione di Milano, Napoli e Roma come città capofila per il progetto Mobility as a Service for Italy. Grazie ad ulteriori risorse stanziate dal Fondo complementare (16,9 milioni che si aggiungono ai 40 previsti dal PNRR), il 2 maggio 2022 è stato pubblicato <a href="https://innovazione.gov.it/notizie/avvisi-pubblici/mobility-as-a-service-for-italy-fondo-complementare/" target="_blank" aria-label="Leggi di più sul nuovo bando per ampliare l'iniziativa (Collegamento esterno - Apre su nuova scheda)">un nuovo avviso</a> per estendere i servizi MaaS ad altri tre comuni capoluogo di città metropolitane. Per tutti gli aggiornamenti visita la <a href="https://innovazione.gov.it/progetti/mobility-as-a-service-for-italy/" target="_blank" aria-label="pagina progetto su innovazione.gov.it (Collegamento esterno - Apre su nuova scheda)">pagina progetto su innovazione.gov.it</a>. 
+    updates: <a href="https://innovazione.gov.it/notizie/avvisi-pubblici/mobility-as-a-service-for-italy/" target="_blank" aria-label="Leggi di più sull'avviso pubblico del 22 Novembre 2021 (Collegamento esterno - Apre su nuova scheda)">L’avviso pubblico del 22 novembre 2021</a> ha portato alla selezione di Milano, Napoli e Roma come città capofila per il progetto Mobility as a Service for Italy. Grazie ad <a href="https://innovazione.gov.it/notizie/avvisi-pubblici/mobility-as-a-service-for-italy-fondo-complementare/" target="_blank" aria-label="Leggi di più sul nuovo bando per ampliare l'iniziativa (Collegamento esterno - Apre su nuova scheda)">ulteriori risorse stanziate dal Fondo complementare</a> (16,9 milioni che si aggiungono ai 40 previsti dal PNRR), a fine luglio 2022 sono state selezionate anche Bari, Firenze e Torino. Per tutti gli aggiornamenti visita la <a href="https://innovazione.gov.it/progetti/mobility-as-a-service-for-italy/" target="_blank" aria-label="pagina progetto su innovazione.gov.it (Collegamento esterno - Apre su nuova scheda)">pagina progetto su innovazione.gov.it</a>. 
   - number: 1.5
     id: cyber
     title: Cybersecurity

diff --git a/src/components/Totop.jsx b/src/components/Totop.jsx
@@ -15,14 +15,14 @@ const useStyle = createUseStyles({
     zIndex: '99',
     composes: 'totop',
     cursor: 'pointer',
-    top: '35px',
+    top: 'calc(100% - 100px)',
     left: 'calc(100% - 80px)',
     marginRight: '-75px',
+    marginTop: '20px',
     '@media (max-width: 1099px)': {
       marginRight: '0',
     },
     '@media (max-width: 991px)': {
-      top: '75px',
       marginTop: '40px',
     },
   },
@@ -32,25 +32,27 @@ export const Totop = () => {
   useEffect(() => {
     const sectionsContainer = document.querySelector('.timeline-vertical');
 
-    const scrollIndicatorHandler = () => {
-      const timelineYpos = sectionsContainer.getBoundingClientRect();
-      let top = timelineYpos.top;
-      let bottom = timelineYpos.bottom;
-      if (top <= '100' && bottom >= '700') {
-        const sectionsContainerHeight = sectionsContainer.getBoundingClientRect().height;
-        const scrollIndicator = sectionsContainer.querySelector('.scroll-indicator-active');
-        if (top < 0) {
-          top = top * -1;
+    if (sectionsContainer) {
+      const scrollIndicatorHandler = () => {
+        const timelineYpos = sectionsContainer.getBoundingClientRect();
+        let top = timelineYpos.top;
+        let bottom = timelineYpos.bottom;
+        if (top <= '100' && bottom >= '700') {
+          const sectionsContainerHeight = sectionsContainer.getBoundingClientRect().height;
+          const scrollIndicator = sectionsContainer.querySelector('.scroll-indicator-active');
+          if (top < 0) {
+            top = top * -1;
+          }
+          if (bottom < 0) {
+            bottom = bottom * -1;
+          }
+          const partialValue = bottom - top;
+          const percentageScroll = 100 - (100 * partialValue) / sectionsContainerHeight;
+          scrollIndicator.style.height = `${percentageScroll}%`;
         }
-        if (bottom < 0) {
-          bottom = bottom * -1;
-        }
-        const partialValue = bottom - top;
-        const percentageScroll = 100 - (100 * partialValue) / sectionsContainerHeight;
-        scrollIndicator.style.height = `${percentageScroll}%`;
-      }
-    };
-    window.addEventListener('scroll', scrollIndicatorHandler);
+      };
+      window.addEventListener('scroll', scrollIndicatorHandler);
+    }
   }, []);
   const classes = useStyle();
 

diff --git a/src/components/carousel/NoticesCarousel.jsx b/src/components/carousel/NoticesCarousel.jsx
@@ -143,6 +143,33 @@ const useStyles = createUseStyles({
       },
     },
   },
+  badgeNew: {
+    display: 'block',
+    textAlign: 'left',
+    borderRadius: '4px',
+    background: '#0066CC',
+    fontSize: '14px',
+    color: '#fff',
+    width: 'fit-content',
+    padding: '1.5px 11px',
+    fontWeight: '700',
+    marginBottom: '15px',
+  },
+  badgeExp: {
+    display: 'block',
+    textAlign: 'left',
+    borderRadius: '4px',
+    background: '#FFB54D',
+    fontSize: '14px',
+    color: '#33485C',
+    width: 'fit-content',
+    padding: '1.5px 11px',
+    fontWeight: '700',
+    marginBottom: '15px',
+  },
+  empty: {
+    height: '40px',
+  },
 });
 
 export const NoticesCarousel = ({ content, title }) => {
@@ -153,6 +180,30 @@ export const NoticesCarousel = ({ content, title }) => {
     return date.toLocaleDateString('it-IT');
   };
 
+  const setLabel = (element) => {
+    if (element.new) {
+      return (
+        <span
+          className={classes.badgeNew}
+          aria-label="nuovo avviso"
+          dangerouslySetInnerHTML={{ __html: 'NUOVO' }}
+        ></span>
+      );
+    } else {
+      if (element.expiring) {
+        return (
+          <span
+            className={classes.badgeExp}
+            aria-label="avviso in scadenza"
+            dangerouslySetInnerHTML={{ __html: 'IN SCADENZA' }}
+          ></span>
+        );
+      } else {
+        return <span className={classes.empty} dangerouslySetInnerHTML={{ __html: '' }}></span>;
+      }
+    }
+  };
+
   const slides = records.map((element) => (
     <>
       <Card key={element.codiceBando} className={classes.heroCards} spacing noWrapper>
@@ -161,6 +212,7 @@ export const NoticesCarousel = ({ content, title }) => {
           className={classes.cardWrapper}
         >
           <CardBody>
+            {setLabel(element)}
             <span className={classes.dueDate}>
               SCADENZA AVVISO <span className={classes.dueDateDigit}>{formatDate(element.dataFineBando)}</span>
             </span>