feat: enable linked media cards in LLGG (#1125)

* fix: comment old card properties titlesmall and titlebig
* feat: card media around normal website pages
* content: add linked medias to LLGG actions

src/components/card/card.js

@@ -15,8 +15,8 @@ import "./card.scss";
 function Card({
   cardEvent,
   title,
-  titleSmall,
-  titleBig,
+  // titleSmall,
+  // titleBig,
   headingLevel,
   url,
   blank,
@@ -46,8 +46,8 @@ function Card({
   const styles = classNames("di-card d-md-flex flex-md-column w-100", {
     fullheight: fullHeight,
     rounded,
-    "title-small": titleSmall,
-    "title-big": titleBig,
+    // "title-small": titleSmall,
+    // "title-big": titleBig,
     "shadow-lg": !noShadow,
     "text-serif": textSerif,
     "has-button": buttonBottom,

src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-1/azione-1.yaml

@@ -205,10 +205,37 @@ components:
           list:
             isShare: true
 
+      # CARD CHILDREN ACTION MEDIA
+      - title: "Servizi inclusivi e usabili per tutti"
+        titleSmall: true
+        cardEvent: true
+        img: /images/community/media-thumbnails/20230325-servizi-inclusivi-e-usabili-per-tutti.jpg
+        alt: ""
+        imgRatio: 16x9
+        iconOverlay:
+          icon: sprites.svg#it-video
+          ariaLabel: Video
+        url: "/community/media/20230325-servizi-inclusivi-e-usabili-per-tutti/"
+        tag:
+          label: Video - Webinar
+
+      - title: "ll design system del Paese e la responsabilità di progettare interfacce pubbliche"
+        titleSmall: true
+        cardEvent: true
+        img: /images/community/media-thumbnails/20230518-il-design-system-del-paese-e-la-responsabilita-di-progettare-interfacce-pubbliche.jpg
+        alt: ""
+        imgRatio: 16x9
+        iconOverlay:
+          icon: sprites.svg#it-video
+          ariaLabel: Video
+        url: "/community/media/20230518-il-design-system-del-paese-e-la-responsabilita-di-progettare-interfacce-pubbliche/"
+        tag:
+          label: Video - Evento
+
       # CARD CHILDREN ACTION
       - title: "Progettare con qualità: l’accessibilità al centro del design system del Paese"
-        headingLevel: 4
-        img: /images/community/articoli-di-approfondimento/2022-medium-tabellini-accessibilita.webp
+        headingLevel: 3
+        img: /images/community/articoli-di-approfondimento/20220705-progettare-con-qualita-l-accessibilita-al-centro-del-design-system-del-paese.webp
         alt: Le risorse per progettare di Designers Italia
         imgRatio: 16x9
         imgPlaceholder: false
@@ -226,7 +253,7 @@ components:
 
       # CARD CHILDREN ACTION
       - title: "Accessibili, usabili e inclusivi: per una progettazione etica dei servizi pubblici digitali"
-        headingLevel: 4
+        headingLevel: 3
         img: /images/community/articoli-di-approfondimento/2021-medium-zaia-processo.webp
         alt: Le risorse per progettare di Designers Italia
         imgRatio: 16x9
@@ -259,7 +286,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: "Accessibilità by design" #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Segui il principio di accessibilità by design, cioè fin dalle basi della progettazione, e il principio di accessibilità by default, cioè il principio secondo cui ogni tipo di documentazione e risorsa a supporto dovrebbe contenere i requisiti di accessibilità, per creare servizi digitali accessibili.
           ctas:
@@ -278,7 +305,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: "Accessibilità" #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Rendi i tuoi strumenti informatici accessibili e usabili per tutti e senza discriminare nessuno, compresi i siti web e le applicazioni mobili così come previsto dalle “Linee guida sull’accessibilità degli strumenti informatici”.
           ctas:

src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-1.yaml

@@ -183,7 +183,6 @@ components:
 
       # CARD CHILDREN ACTION
       - title: "Ripartire da approccio e processo: la progettazione di servizi pubblici digitali"
-        headingLevel: 4
         img: /images/community/articoli-di-approfondimento/2021-medium-zaia-processo.webp
         alt: Le risorse per progettare di Designers Italia
         imgRatio: 16x9
@@ -202,7 +201,6 @@ components:
 
       # CARD CHILDREN ACTION
       - title: "Prove tecniche di design: come testare sul campo gli strumenti di progettazione"
-        headingLevel: 4
         img: /images/community/articoli-di-approfondimento/2021-medium-filippi-prove-tecniche.webp
         alt: "Il sistema .italia"
         imgRatio: 16x9
@@ -221,7 +219,6 @@ components:
 
       # CARD CHILDREN ACTION
       - title: "PA digitale 2026, l'utente al centro della progettazione"
-        headingLevel: 4
         img: /images/community/articoli-di-approfondimento/2022-medium-Dipartimento-PA-digitale-2026.webp
         alt: Il sito PA digitale 2026
         imgRatio: 16x9
@@ -238,6 +235,21 @@ components:
             size: xs
         moreInfo: null
 
+
+      # CARD CHILDREN ACTION MEDIA
+      - title: "Comprendere il contesto d'uso"
+        titleSmall: true
+        cardEvent: true
+        img: /images/community/media-thumbnails/20230324-comprendere-il-contesto-d-uso.jpg
+        alt: ""
+        imgRatio: 16x9
+        iconOverlay:
+          icon: sprites.svg#it-video
+          ariaLabel: Video
+        url: "/community/media/20230324-comprendere-il-contesto-d-uso/"
+        tag:
+          label: Video - Webinar
+
   # ///////////////////
   # SECTION EDITORIAL
   # ///////////////////
@@ -254,7 +266,6 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: "L'approccio progettuale" #C
-          headingLevel: 4
           text: | #C
             Scegli l’approccio progettuale tra quelli proposti per affrontare al meglio il processo sotto diversi punti di vista: quello delle persone, delle procedure e della tecnologia.
           ctas:
@@ -274,7 +285,6 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Il processo progettuale #C
-          headingLevel: 4
           text: | #C
             Segui l’approccio strutturato in cinque fasi, utile come riferimento per impostare il progetto, capire quali figure/competenze coinvolgere e organizzare le attività da svolgere nell’ordine più adeguato.
           ctas:
@@ -294,7 +304,6 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Metodo di lavoro #C
-          headingLevel: 4
           text: | #C
             Imposta una modalità di lavoro agile per orientare il processo di design al raggiungimento dei risultati.
           ctas:
@@ -314,7 +323,6 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Le competenze per progettare servizi pubblici #C
-          headingLevel: 4
           text: | #C
             Individua l’insieme di competenze funzionali e organizzative di cui necessita il processo di design dei servizi pubblici.
           ctas:
@@ -334,7 +342,6 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Progettazione di servizi #C
-          headingLevel: 4
           text: | #C
             Sfrutta le risorse utili all’analisi delle necessità di tutti gli attori coinvolti nella progettazione del servizio, per gestire la complessità del progetto, strutturando il servizio in modo che sia usabile per l’utente e efficiente per la Pubblica Amministrazione.
           ctas:
@@ -354,7 +361,6 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Progettare un servizio pubblico digitale #C
-          headingLevel: 4
           text: | #C
             Conosci tutti gli elementi da tenere in considerazione nella progettazione di un servizio.
           ctas:

src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-2.yaml

@@ -207,6 +207,20 @@ components:
         tag:
           label: RISORSE PER PROGETTARE - KIT DI DESIGN #C
 
+      # CARD CHILDREN ACTION MEDIA
+      - title: "Comprendere il contesto d'uso"
+        titleSmall: true
+        cardEvent: true
+        img: /images/community/media-thumbnails/20230324-comprendere-il-contesto-d-uso.jpg
+        alt: ""
+        imgRatio: 16x9
+        iconOverlay:
+          icon: sprites.svg#it-video
+          ariaLabel: Video
+        url: "/community/media/20230324-comprendere-il-contesto-d-uso/"
+        tag:
+          label: Video - Webinar
+
   # ///////////////////
   # SECTION EDITORIAL
   # ///////////////////
@@ -223,7 +237,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Gestione del progetto #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Definisci il perimetro di un progetto digitale, gli attori coinvolti e i potenziali destinatari.
           ctas:
@@ -242,7 +256,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Analizzare il contesto con un approccio olistico e sistemico #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Ottieni una visione d’insieme dei fattori e delle variabili che influenzano l’erogazione e la fruizione di un servizio digitale.
           ctas:
@@ -261,7 +275,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Conoscere gli utenti e gli erogatori del servizio #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Tieni in alta considerazione le necessità degli utenti e conosci la loro esperienza di interazione con il servizio.
           ctas:
@@ -280,7 +294,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Gli strumenti per visualizzare mappe dell’esperienza del servizio #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Mappa l'esperienza dell'utente per descrivere in che modo avviene l'interazione con il servizio.
           ctas:

src/data/content/norme-e-riferimenti/linee-guida-di-design/requisito-4-3/azione-3.yaml

@@ -246,43 +246,56 @@ components:
         tag:
           label: RISORSE PER PROGETTARE - ATTIVITÀ DEL KIT #C
 
-      #CARD MEDIUM
+      # CARD CHILDREN ACTION MEDIA
+      - title: "Comprendere il contesto d'uso"
+        titleSmall: true
+        cardEvent: true
+        img: /images/community/media-thumbnails/20230324-comprendere-il-contesto-d-uso.jpg
+        alt: ""
+        imgRatio: 16x9
+        iconOverlay:
+          icon: sprites.svg#it-video
+          ariaLabel: Video
+        url: "/community/media/20230324-comprendere-il-contesto-d-uso/"
+        tag:
+          label: Video - Webinar
 
-      - title: "Intervistare i cittadini per creare servizi pubblici più efficaci"
-        headingLevel: 4
-        # img: null
-        # alt: null
+      - title: "Il valore della community di Designers Italia e Developers Italia"
+        headingLevel: 3
+        img: /images/community/articoli-di-approfondimento/2021-valore-della-community-per-designers-e-developers.webp
+        alt: "Gli strumenti della community"
         imgRatio: 16x9
         imgPlaceholder: false
-        fullHeight: false
+        fullHeight: true
         rounded: true
-        url: https://medium.com/designers-italia/intervistare-cittadini-per-creare-servizi-pubblici-pi%C3%B9-efficaci-607612efb183
+        url: https://medium.com/designers-italia/il-valore-della-community-per-designers-italia-e-developers-italia-bd486dff2a6d
         blank: true
         externalLink:
           label: Leggi su medium
           screenReaderText: " l'articolo completo"
           icon:
             icon: sprites.svg#it-external-link
             size: xs
-        moreInfo: di Chiara Albanesi
+        moreInfo: di Mauro Filippi e Claudia Pollina
 
-      - title: "Il valore della community di Designers Italia e Developers Italia"
-        headingLevel: 4
-        img: /images/community/articoli-di-approfondimento/2021-valore-della-community-per-designers-e-developers.webp
-        alt: "Gli strumenti della community"
+      #CARD MEDIUM
+      - title: "Intervistare i cittadini per creare servizi pubblici più efficaci"
+        headingLevel: 3
+        # img: null
+        # alt: null
         imgRatio: 16x9
         imgPlaceholder: false
-        fullHeight: true
+        fullHeight: false
         rounded: true
-        url: https://medium.com/designers-italia/il-valore-della-community-per-designers-italia-e-developers-italia-bd486dff2a6d
+        url: https://medium.com/designers-italia/intervistare-cittadini-per-creare-servizi-pubblici-pi%C3%B9-efficaci-607612efb183
         blank: true
         externalLink:
           label: Leggi su medium
           screenReaderText: " l'articolo completo"
           icon:
             icon: sprites.svg#it-external-link
             size: xs
-        moreInfo: di Mauro Filippi e Claudia Pollina
+        moreInfo: di Chiara Albanesi
 
   # ///////////////////
   # SECTION EDITORIAL
@@ -298,7 +311,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Interviste #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Usa le interviste per raccogliere informazioni attraverso conversazioni più o meno strutturate con gli attori e con gli utenti di un determinato ecosistema di servizio.
           ctas:
@@ -318,7 +331,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Questionari #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Raccogli informazioni qualitative direttamente dagli utenti di un servizio o touchpoint digitale, indirizzando un campione di utenti sufficientemente vasto, per renderle misurabili, e consentire l’analisi quantitativa.
           ctas:
@@ -338,7 +351,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: "Personas: creare i profili degli utenti tipo" #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Racconta le evidenze della ricerca attraverso i profili degli utenti-tipo del servizio pubblico digitale, le personas, che supportano la narrativa della prospettiva dell’utente e della sua esperienza.
           ctas:
@@ -358,7 +371,7 @@ components:
         # TXT BLOCK
         - name: TextImageCta
           title: Organizzare attività di co-progettazione #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Raccogli il punto di vista dei diversi attori coinvolti nell’erogazione e fruizione di un servizio, sollevando i problemi chiave e accelerando il processo di identificazione delle soluzioni.
           ctas:
@@ -378,7 +391,7 @@ components:
          # TXT BLOCK
         - name: TextImageCta
           title: Test di usabilità #C
-          headingLevel: 4
+          headingLevel: 3
           text: | #C
             Misura il grado in cui il servizio può essere usato dagli utenti per raggiungere efficacemente gli obiettivi in quel contesto d’uso.
           ctas: