io-sanita-theme 2.25.1 → 2.26.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## [2.26.0](https://github.com/RedTurtle/io-sanita-theme/compare/2.25.1...2.26.0) (2026-04-22)
+
+### Features
+
+* struttura ct altenative text fields ([#134](https://github.com/RedTurtle/io-sanita-theme/issues/134)) ([3018de8](https://github.com/RedTurtle/io-sanita-theme/commit/3018de8fd18fa8b94a7b5f47dcfe69698fb318ed))
+
+### Bug Fixes
+
+* loop request in cartella modulistica view ([#133](https://github.com/RedTurtle/io-sanita-theme/issues/133)) ([8305465](https://github.com/RedTurtle/io-sanita-theme/commit/830546574623fc41e2a29095de5c1b999d392a17))
+* show related content in evidence in ct views ([#132](https://github.com/RedTurtle/io-sanita-theme/issues/132)) ([f990f59](https://github.com/RedTurtle/io-sanita-theme/commit/f990f595182c60f8a5137c9e8f848318195893f2))
+
+### Maintenance
+
+* i18n ([d64f454](https://github.com/RedTurtle/io-sanita-theme/commit/d64f4547124576ec7be26ad791aad37013968739))
+* releaselog ([861ee72](https://github.com/RedTurtle/io-sanita-theme/commit/861ee72b55d6e0568655d962f7de35b2b1ab1290))
+
 ## [2.25.1](https://github.com/RedTurtle/io-sanita-theme/compare/2.25.0...2.25.1) (2026-04-21)
 
 ### Bug Fixes

package/RELEASE.md

@@ -41,6 +41,13 @@
 - ...
  -->
 
+## Versione 2.26.0 (22/04/2026)
+
+### Fix
+
+- Aggiunta la sezione Documenti correlati in ComeFarePer CT
+- Mostrare contenuto correlato in evidenza nella Pagina
+
 ## Versione 2.25.0 (21/04/2026)
 
 ### Fix
@@ -53,7 +60,6 @@
 - Mostrare il testo della descrizione del Punto di contatto all'interno della card Contatti
 - Modifica icona Struttura in Folder Content
 - Sistemata la visualizzazione dell'etichetta "Programmato" accanto al titolo dei contenuti in Folder Content: ora viene mostrata come badge ben distinguibile dal titolo.
-- Aggiunta la sezione Documenti correlati in ComeFarePer CT
 
 ## Versione 2.24.0 (10/04/2026)
 

package/locales/de/LC_MESSAGES/volto.po

@@ -1892,6 +1892,11 @@ msgstr ""
 msgid "expire"
 msgstr ""
 
+#. Default: "Esplora"
+#: components/View/commons/RelatedItemInEvidence/ItemInEvidence
+msgid "explore"
+msgstr ""
+
 #. Default: "Inserisci una parola chiave per trovare una risposta"
 #: components/View/FAQ/FaqFolder/FaqFolderView
 msgid "faq_search"
@@ -2092,6 +2097,11 @@ msgstr ""
 msgid "icons_linkMoreTitle"
 msgstr ""
 
+#. Default: "Contenuti in evidenza"
+#: components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence
+msgid "inEvidenceItems"
+msgstr ""
+
 #. Default: "Indice della pagina"
 #: components/View/commons/SideMenu/SideMenu
 msgid "index"

package/locales/en/LC_MESSAGES/volto.po

@@ -1887,6 +1887,11 @@ msgstr "Other informations"
 msgid "expire"
 msgstr "Expire"
 
+#. Default: "Esplora"
+#: components/View/commons/RelatedItemInEvidence/ItemInEvidence
+msgid "explore"
+msgstr ""
+
 #. Default: "Inserisci una parola chiave per trovare una risposta"
 #: components/View/FAQ/FaqFolder/FaqFolderView
 msgid "faq_search"
@@ -2087,6 +2092,11 @@ msgstr ""
 msgid "icons_linkMoreTitle"
 msgstr ""
 
+#. Default: "Contenuti in evidenza"
+#: components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence
+msgid "inEvidenceItems"
+msgstr ""
+
 #. Default: "Indice della pagina"
 #: components/View/commons/SideMenu/SideMenu
 msgid "index"

package/locales/es/LC_MESSAGES/volto.po

@@ -1894,6 +1894,11 @@ msgstr ""
 msgid "expire"
 msgstr "Expirar"
 
+#. Default: "Esplora"
+#: components/View/commons/RelatedItemInEvidence/ItemInEvidence
+msgid "explore"
+msgstr ""
+
 #. Default: "Inserisci una parola chiave per trovare una risposta"
 #: components/View/FAQ/FaqFolder/FaqFolderView
 msgid "faq_search"
@@ -2094,6 +2099,11 @@ msgstr ""
 msgid "icons_linkMoreTitle"
 msgstr ""
 
+#. Default: "Contenuti in evidenza"
+#: components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence
+msgid "inEvidenceItems"
+msgstr ""
+
 #. Default: "Indice della pagina"
 #: components/View/commons/SideMenu/SideMenu
 msgid "index"

package/locales/fr/LC_MESSAGES/volto.po

@@ -1894,6 +1894,11 @@ msgstr ""
 msgid "expire"
 msgstr "Expiration"
 
+#. Default: "Esplora"
+#: components/View/commons/RelatedItemInEvidence/ItemInEvidence
+msgid "explore"
+msgstr ""
+
 #. Default: "Inserisci una parola chiave per trovare una risposta"
 #: components/View/FAQ/FaqFolder/FaqFolderView
 msgid "faq_search"
@@ -2094,6 +2099,11 @@ msgstr ""
 msgid "icons_linkMoreTitle"
 msgstr ""
 
+#. Default: "Contenuti in evidenza"
+#: components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence
+msgid "inEvidenceItems"
+msgstr ""
+
 #. Default: "Indice della pagina"
 #: components/View/commons/SideMenu/SideMenu
 msgid "index"

package/locales/it/LC_MESSAGES/volto.po

@@ -1887,6 +1887,11 @@ msgstr ""
 msgid "expire"
 msgstr "Scadenza"
 
+#. Default: "Esplora"
+#: components/View/commons/RelatedItemInEvidence/ItemInEvidence
+msgid "explore"
+msgstr ""
+
 #. Default: "Inserisci una parola chiave per trovare una risposta"
 #: components/View/FAQ/FaqFolder/FaqFolderView
 msgid "faq_search"
@@ -2087,6 +2092,11 @@ msgstr ""
 msgid "icons_linkMoreTitle"
 msgstr ""
 
+#. Default: "Contenuti in evidenza"
+#: components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence
+msgid "inEvidenceItems"
+msgstr ""
+
 #. Default: "Indice della pagina"
 #: components/View/commons/SideMenu/SideMenu
 msgid "index"

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2026-04-21T07:20:20.069Z\n"
+"POT-Creation-Date: 2026-04-22T13:21:59.420Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -1889,6 +1889,11 @@ msgstr ""
 msgid "expire"
 msgstr ""
 
+#. Default: "Esplora"
+#: components/View/commons/RelatedItemInEvidence/ItemInEvidence
+msgid "explore"
+msgstr ""
+
 #. Default: "Inserisci una parola chiave per trovare una risposta"
 #: components/View/FAQ/FaqFolder/FaqFolderView
 msgid "faq_search"
@@ -2089,6 +2094,11 @@ msgstr ""
 msgid "icons_linkMoreTitle"
 msgstr ""
 
+#. Default: "Contenuti in evidenza"
+#: components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence
+msgid "inEvidenceItems"
+msgstr ""
+
 #. Default: "Indice della pagina"
 #: components/View/commons/SideMenu/SideMenu
 msgid "index"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "io-sanita-theme",
-  "version": "2.25.1",
+  "version": "2.26.0",
   "description": "io-sanita-theme: Volto add-on",
   "main": "src/index.js",
   "license": "MIT",

package/src/components/View/AggregationPage/AggregationPage.jsx

@@ -17,6 +17,7 @@ import {
   PageHeader,
   SkipToMainContent,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 import {
   CardSimple,
@@ -252,6 +253,7 @@ const AggregationPage = ({ match, route, location }) => {
           </section>
         </div>
       </div>
+      <RelatedItemInEvidence content={content}/>
     </>
   );
 };

package/src/components/View/Bando/BandoView.jsx

@@ -27,6 +27,7 @@ import {
   useSideMenu,
   Placeholder,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 export const BandoViewSectionsOrder = [
@@ -93,6 +94,7 @@ const BandoView = ({ content, location }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/CartellaModulistica/CartellaModulisticaView.jsx

@@ -17,6 +17,7 @@ import {
   RelatedItems,
   Placeholder,
   Metadata,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 import { TextOrBlocks } from 'io-sanita-theme/helpers';
 
@@ -58,7 +59,12 @@ const CartellaModulisticaView = ({ content }) => {
   const modulistica = modulisticaItems?.data?.items ?? [];
 
   useEffect(() => {
-    if (hasItems && !modulisticaItems.loading && !modulisticaItems.loaded) {
+    if (
+      hasItems &&
+      !modulisticaItems.loading &&
+      !modulisticaItems.loaded &&
+      !modulisticaItems.error
+    ) {
       dispatch(getModulisticaItems(flattenToAppURL(modulistica_items_url)));
     }
   }, [dispatch, hasItems, modulisticaItems, modulistica_items_url]);
@@ -210,6 +216,7 @@ const CartellaModulisticaView = ({ content }) => {
 
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} list={content?.servizi_collegati ?? []} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/ComeFarePer/ComeFarePerView.jsx

@@ -17,6 +17,7 @@ import {
   Metadata,
   Placeholder,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import {
@@ -89,6 +90,7 @@ const ComeFarePerView = ({ content, location }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/Documento/DocumentoView.jsx

@@ -16,6 +16,7 @@ import {
   RelatedItems,
   Placeholder,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import {
@@ -87,6 +88,7 @@ const DocumentoView = ({ content }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/Evento/EventoView.jsx

@@ -17,6 +17,7 @@ import {
   Metadata,
   Placeholder,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import {
@@ -104,6 +105,7 @@ const EventoView = ({ content, location }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/FAQ/Faq/FaqView.jsx

@@ -11,6 +11,7 @@ import {
   RelatedItems,
   Metadata,
   Placeholder,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import { TextOrBlocks } from 'io-sanita-theme/helpers';
@@ -39,6 +40,7 @@ const FaqView = ({ content }) => {
 
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </div>
   );

package/src/components/View/FAQ/FaqFolder/FaqFolderView.jsx

@@ -174,7 +174,9 @@ const FaqFolderView = ({ content }) => {
 
       <RelatedItems content={content} list={content?.servizi_collegati ?? []} />
 
-      <Placeholder position="afterRelatedItems" content={content} />
+      <RelatedItemInEvidence content={content} />
+      
+      <Placeholder position="afterRelatedItems" content={content} />  
     </>
   );
 };

package/src/components/View/Farmacia/FarmaciaView.jsx

@@ -7,6 +7,7 @@ import {
   useSideMenu,
   Metadata,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 import { ContentTypeViewSections } from 'io-sanita-theme/helpers';
 import PropTypes from 'prop-types';
@@ -92,8 +93,7 @@ const FarmaciaView = ({ content }) => {
           ...(content.related_news ?? []),
         ]}
       />
-      {/* TODO
-      <RelatedItemInEvidence content={content} /> */}
+      <RelatedItemInEvidence content={content} />
     </>
   );
 };

package/src/components/View/Modulo/ModuloView.jsx

@@ -10,6 +10,7 @@ import {
   RelatedItems,
   Metadata,
   Placeholder,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import {
@@ -46,6 +47,8 @@ const ModuloView = ({ content }) => {
 
       <RelatedItems content={content} />
 
+      <RelatedItemInEvidence content={content} />
+      
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/NewsItem/NewsItemView.jsx

@@ -19,6 +19,7 @@ import {
   Metadata,
   Placeholder,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import {
@@ -112,6 +113,7 @@ const NewsItemView = ({ content, location }) => {
 
       <Placeholder position="afterContent" content={content} />
       <RelatedItems list={related_items} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/Page/PageView.jsx

@@ -17,6 +17,7 @@ import {
   Placeholder,
   Metadata,
   RelatedItems,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import { defineMessages, useIntl } from 'react-intl';
@@ -71,7 +72,6 @@ const PageView = ({ content, token, location, history }) => {
                     {content?.title}
                   </h1>
                 </Placeholder>
-
                 <p className="description">{content?.description}</p>
               </div>
               {rightHeaderHasContent && (
@@ -113,6 +113,7 @@ const PageView = ({ content, token, location, history }) => {
           />
         </div>
         <RelatedItems content={content} />
+        <RelatedItemInEvidence content={content} />
         <Placeholder position="afterContent" content={content} />
       </>
     );

package/src/components/View/Persona/PersonaView.jsx

@@ -31,6 +31,7 @@ import {
   RelatedItems,
   Placeholder,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 export const PersonaViewSectionsOrder = [
@@ -98,6 +99,7 @@ const PersonaView = ({ content }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/PuntoDiContatto/PuntoDiContattoView.jsx

@@ -21,6 +21,7 @@ import {
   useSideMenu,
   Metadata,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 import { ContentTypeViewSections } from 'io-sanita-theme/helpers';
@@ -78,6 +79,7 @@ const PuntoDiContattoView = ({ content }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems list={content?.relatedItems} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/Servizio/ServizioView.jsx

@@ -37,6 +37,7 @@ import {
   useSideMenu,
   Metadata,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 export const ServizioSectionsOrder = [
@@ -110,6 +111,7 @@ const ServizioView = ({ content }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} list={content?.related_news ?? []} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/Struttura/StrutturaContatti.jsx

@@ -1,8 +1,13 @@
-import PropTypes from 'prop-types';
+import { Col, Row } from 'design-react-kit';
+import {
+  RichText,
+  RichTextSection,
+  richTextHasContent,
+} from 'io-sanita-theme/helpers';
 import { defineMessages, useIntl } from 'react-intl';
+
 import { CardContatti } from 'io-sanita-theme/components';
-import { RichTextSection } from 'io-sanita-theme/helpers';
-import { Row, Col } from 'design-react-kit';
+import PropTypes from 'prop-types';
 
 const messages = defineMessages({
   contatti: {
@@ -13,8 +18,8 @@ const messages = defineMessages({
 
 const StrutturaContatti = ({ content }) => {
   const intl = useIntl();
-
-  return content?.pdc_correlato?.length > 0 ? (
+  const has_richTextContent = richTextHasContent(content?.pdc_correlato_text);
+  return content?.pdc_correlato?.length > 0 || has_richTextContent ? (
     <RichTextSection
       tag_id="contatti"
       title={intl.formatMessage(messages.contatti)}
@@ -27,6 +32,12 @@ const StrutturaContatti = ({ content }) => {
           </Col>
         ))}
       </Row>
+      {/* Contenuto testuale alternativo, usato ad esempio con il sync virtualdesk */}
+      {has_richTextContent && (
+        <div className="richtext-blocks font-serif">
+            <RichText data={content?.pdc_correlato_text} />
+        </div>
+      )}
     </RichTextSection>
   ) : null;
 };

package/src/components/View/Struttura/StrutturaResponsabile.jsx

@@ -1,8 +1,13 @@
-import React from 'react';
+import { Col, Row } from 'design-react-kit';
+import {
+  RichText,
+  RichTextSection,
+  richTextHasContent,
+} from 'io-sanita-theme/helpers';
 import { defineMessages, useIntl } from 'react-intl';
-import { RichTextSection } from 'io-sanita-theme/helpers';
+
 import { CardPersona } from 'io-sanita-theme/components';
-import { Row, Col } from 'design-react-kit';
+import React from 'react';
 
 const messages = defineMessages({
   responsabile: {
@@ -13,8 +18,10 @@ const messages = defineMessages({
 
 const StrutturaResponsabile = ({ content }) => {
   const intl = useIntl();
-
-  return content?.responsabile_correlato?.length > 0 ? (
+  const has_richTextContent = richTextHasContent(
+    content?.responsabile_correlato_text,
+  );
+  return content?.responsabile_correlato?.length > 0 || has_richTextContent ? (
     <RichTextSection
       tag_id="responsabile"
       title={intl.formatMessage(messages.responsabile)}
@@ -28,6 +35,12 @@ const StrutturaResponsabile = ({ content }) => {
           );
         })}
       </Row>
+      {/* Contenuto testuale alternativo, usato ad esempio con il sync virtualdesk */}
+      {has_richTextContent && (
+        <div className="richtext-blocks font-serif">
+            <RichText data={content?.responsabile_correlato_text} />
+        </div>
+      )}
     </RichTextSection>
   ) : (
     <></>

package/src/components/View/Struttura/StrutturaView.jsx

@@ -37,6 +37,7 @@ import {
   useSideMenu,
   Metadata,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 export const StrutturaSectionsOrder = [
@@ -110,6 +111,7 @@ const StrutturaView = ({ content }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} list={content?.related_news ?? []} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/UOView/UOView.jsx

@@ -33,6 +33,7 @@ import {
   useSideMenu,
   Metadata,
   commonIntlMessages,
+  RelatedItemInEvidence,
 } from 'io-sanita-theme/components/View/commons';
 
 export const UOViewSectionsOrder = [
@@ -102,6 +103,7 @@ const UOView = ({ content }) => {
       </div>
       <Placeholder position="afterContent" content={content} />
       <RelatedItems content={content} list={content?.related_news ?? []} />
+      <RelatedItemInEvidence content={content} />
       <Placeholder position="afterRelatedItems" content={content} />
     </>
   );

package/src/components/View/commons/RelatedItemInEvidence/ItemInEvidence.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import {
+  Card,
+  CardBody,
+  CardTitle,
+  CardText,
+  CardReadMore,
+} from 'design-react-kit';
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+const messages = defineMessages({
+  explore: {
+    id: 'explore',
+    defaultMessage: 'Esplora',
+  },
+});
+
+/**
+ * ItemInEvidence view component class.
+ * @function ItemInEvidence
+ * @params {object} location: object.
+ * @returns {string} Markup of the component.
+ */
+const ItemInEvidence = ({ content }) => {
+  const intl = useIntl();
+  const correlato_in_evidenza = content.correlato_in_evidenza[0];
+  return (
+    <div className="card-wrapper">
+      <Card className="card-bg rounded " noWrapper={true} tag="div">
+        <CardBody tag="div">
+          <CardTitle className="h3">{correlato_in_evidenza.title}</CardTitle>
+          <CardText tag="p">{correlato_in_evidenza.description}</CardText>
+          <CardReadMore
+            iconName="it-arrow-right"
+            tag="a"
+            text={intl.formatMessage(messages.explore)}
+            href={flattenToAppURL(correlato_in_evidenza['@id'])}
+          />
+        </CardBody>
+      </Card>
+    </div>
+  );
+};
+
+export default ItemInEvidence;
+
+ItemInEvidence.propTypes = {
+  content: PropTypes.shape({
+    '@id': PropTypes.string,
+    '@type': PropTypes.string,
+    title: PropTypes.string,
+    correlato_in_evidenza: PropTypes.array,
+  }),
+};

package/src/components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ItemInEvidence from 'io-sanita-theme/components/View/commons/RelatedItemInEvidence/ItemInEvidence';
+import { Container, Row, Col } from 'design-react-kit';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  inEvidenceItems: {
+    id: 'inEvidenceItems',
+    defaultMessage: 'Contenuti in evidenza',
+  },
+});
+
+/**
+ * RelatedItems view component class.
+ * @function RelatedItems
+ * @params {object} location: object.
+ * @returns {string} Markup of the component.
+ */
+const RelatedItemInEvidence = ({ content }) => {
+  const intl = useIntl();
+  return (
+    content?.correlato_in_evidenza?.length > 0 && (
+      <section
+        id="correlato-in-evidenza"
+        role="complementary"
+        aria-label={intl.formatMessage(messages.inEvidenceItems)}
+      >
+        <section className="section bg-primary">
+          <div className="section-content">
+            <Container>
+              <Row className="m-4">
+                <Col md={6} className="px-3">
+                  <ItemInEvidence content={content} />
+                </Col>
+              </Row>
+            </Container>
+          </div>
+        </section>
+      </section>
+    )
+  );
+};
+
+export default RelatedItemInEvidence;
+
+RelatedItemInEvidence.propTypes = {
+  content: PropTypes.shape({
+    '@id': PropTypes.string,
+    '@type': PropTypes.string,
+    title: PropTypes.string,
+    correlato_in_evidenza: PropTypes.array,
+  }),
+};

package/src/components/View/commons/index.js

@@ -105,6 +105,11 @@ export const RelatedItems = loadable(() =>
     /* webpackChunkName: "ISViewsCommons" */ 'io-sanita-theme/components/View/commons/RelatedItems'
   ),
 );
+export const RelatedItemInEvidence = loadable(() =>
+  import(
+    /* webpackChunkName: "ISViewsCommons" */ 'io-sanita-theme/components/View/commons/RelatedItemInEvidence/RelatedItemInEvidence'
+  ),
+);
 export const SearchSectionForm = loadable(() =>
   import(
     /* webpackChunkName: "ISViewsCommons" */ 'io-sanita-theme/components/View/commons/PageHeader/SearchSectionForm'

package/src/theme/io-sanita/components/_relatedItemInEvidence.scss

@@ -0,0 +1,3 @@
+#correlato-in-evidenza {
+    margin-bottom: 48px;
+}

package/src/theme/main.scss

@@ -27,6 +27,7 @@
 @import './io-sanita/components/cards';
 @import './io-sanita/components/mapPinDirections';
 @import './io-sanita/components/view/commons/pageHeader';
+@import './io-sanita/components/relatedItemInEvidence';
 
 @import './io-sanita/components/blocks/common';
 @import './io-sanita/components/blocks/skeleton';