design-comuni-plone-theme 12.0.0-alpha.1 → 12.0.0

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

@@ -25,6 +25,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  documentContent: {
+    id: 'documentContent',
+    defaultMessage: 'Contenuto del documento',
+  },
+});
+
 export const DocumentoViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -48,6 +61,7 @@ export const DocumentoViewSectionsOrder = [
  */
 const DocumentoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   //const userLogged = useSelector((state) => state.userSession);
@@ -66,7 +80,10 @@ const DocumentoView = ({ content, location }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -75,6 +92,8 @@ const DocumentoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.documentContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/EventoView/EventoContatti.jsx

@@ -5,9 +5,10 @@ import {
   RichTextSection,
   ContactsCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
-import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
-import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+
 import EventoContattiSupportatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiSupportatoDa';
+import EventoOrganizzatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa';
+import EventoPatrocinatoDa from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa';
 
 const messages = defineMessages({
   contatti: {
@@ -31,14 +32,14 @@ const EventoContatti = ({ content }) => {
         <ContactsCard contact={contact} key={contact['@id']} />
       ))}
 
-      {/* ---organizzato da esterno */}
-      <EventoContattiOrganizzatoreEsterno content={content} />
-
-      {/* ---contatti interno */}
-      <EventoContattiOrganizzatoreInterno content={content} />
+      {/* ---organizzato da */}
+      <EventoOrganizzatoDa content={content} />
 
       {/* ---supportato da */}
       <EventoContattiSupportatoDa content={content} />
+
+      {/* ---patrocinato da */}
+      <EventoPatrocinatoDa content={content} />
     </RichTextSection>
   ) : null;
 };

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody } from 'design-react-kit';
 import {
   RichText,
@@ -7,22 +6,12 @@ import {
   ContactLink,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzatore: {
-    id: 'organizzatore',
-    defaultMessage: 'Organizzatore',
-  },
-});
-
 const EventoContattiOrganizzatoreEsterno = ({ content }) => {
-  const intl = useIntl();
-
   return richTextHasContent(content?.organizzato_da_esterno) ||
     content?.telefono ||
     content?.email ||
     content?.fax ? (
-    <div className="mb-5 mt-3">
-      <h3 className="h5">{intl.formatMessage(messages.organizzatore)}</h3>
+    <div className="mb-5 ">
       <Card
         className="card card-teaser rounded shadow mt-3"
         noWrapper={true}

package/src/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno.jsx

@@ -1,23 +1,12 @@
 import PropTypes from 'prop-types';
-import { defineMessages, useIntl } from 'react-intl';
 import {
   richTextHasContent,
   OfficeCard,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
-const messages = defineMessages({
-  organizzato_da: {
-    id: 'organizzato_da',
-    defaultMessage: 'Organizzato da',
-  },
-});
-
 const EventoContattiOrganizzatoreInterno = ({ content }) => {
-  const intl = useIntl();
-
   return content?.organizzato_da_interno?.length > 0 ? (
-    <div className="mb-5">
-      <h3 className="h5">{intl.formatMessage(messages.organizzato_da)}</h3>
+    <div className="mb-3">
       {content?.organizzato_da_interno?.map((item, index) => (
         <OfficeCard
           margin_bottom={index < content?.organizzato_da_interno?.length - 1}

package/src/components/ItaliaTheme/View/EventoView/EventoCosE.jsx

@@ -32,6 +32,10 @@ const messages = defineMessages({
     id: 'parteciperanno',
     defaultMessage: 'Parteciperanno',
   },
+  tipologia_evento: {
+    id: 'tipologia_evento',
+    defaultMessage: 'Tipo evento',
+  },
 });
 
 const EventoCosE = ({ content }) => {
@@ -41,7 +45,8 @@ const EventoCosE = ({ content }) => {
     contentFolderHasItems(content, 'immagini') ||
     contentFolderHasItems(content, 'video') ||
     content?.persone_amministrazione?.length > 0 ||
-    richTextHasContent(content?.descrizione_destinatari) ? (
+    richTextHasContent(content?.descrizione_destinatari) ||
+    content?.tipologia_evento ? (
     <RichTextSection
       tag_id={'text-body'}
       title={intl.formatMessage(messages.cos_e)}
@@ -79,7 +84,6 @@ const EventoCosE = ({ content }) => {
         className="mt-4 pb-4"
       />
       <Gallery content={content} folder_name={'video'} />
-
       {richTextHasContent(content?.descrizione_destinatari) && (
         <div className="mb-5 pt-2">
           <RichText
@@ -88,6 +92,17 @@ const EventoCosE = ({ content }) => {
           />
         </div>
       )}
+
+      {content?.tipologia_evento && (
+        <div className="mb-5 pt-2">
+          <h3 className="tipologia-section h5">
+            {intl.formatMessage(messages.tipologia_evento)}
+          </h3>
+          <p key={content?.tipologia_evento?.token} className="font-serif">
+            {content?.tipologia_evento?.title}
+          </p>
+        </div>
+      )}
     </RichTextSection>
   ) : (
     <></>

package/src/components/ItaliaTheme/View/EventoView/EventoOrganizzatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { richTextHasContent } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import EventoContattiOrganizzatoreInterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreInterno';
+import EventoContattiOrganizzatoreEsterno from 'design-comuni-plone-theme/components/ItaliaTheme/View/EventoView/EventoContattiOrganizzatoreEsterno';
+
+const messages = defineMessages({
+  organizzato_da: {
+    id: 'organizzato_da',
+    defaultMessage: 'Organizzato da',
+  },
+});
+
+const EventoOrganizzatoDa = ({ content }) => {
+  const intl = useIntl();
+
+  return content?.organizzato_da_interno?.length > 0 ||
+    richTextHasContent(content?.organizzato_da_esterno) ||
+    content?.telefono ||
+    content?.email ||
+    content?.fax ? (
+    <div className="mb-5 mt-3">
+      <h3 className="h5 mb-3">{intl.formatMessage(messages.organizzato_da)}</h3>
+
+      {content?.organizzato_da_interno.length > 0 && (
+        <EventoContattiOrganizzatoreInterno content={content} />
+      )}
+
+      {(richTextHasContent(content?.organizzato_da_esterno) ||
+        content?.telefono ||
+        content?.email ||
+        content?.fax) && (
+        <EventoContattiOrganizzatoreEsterno content={content} />
+      )}
+    </div>
+  ) : null;
+};
+
+export default EventoOrganizzatoDa;

package/src/components/ItaliaTheme/View/EventoView/EventoPatrocinatoDa.jsx

@@ -0,0 +1,38 @@
+import { defineMessages, useIntl } from 'react-intl';
+import { Card, CardBody } from 'design-react-kit';
+
+import {
+  richTextHasContent,
+  RichText,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+
+const messages = defineMessages({
+  patrocinato_da: {
+    id: 'patrocinato_da',
+    defaultMessage: 'Patrocinato da',
+  },
+});
+
+const EventoPatrocinatoDa = ({ content }) => {
+  const intl = useIntl();
+  return richTextHasContent(content?.patrocinato_da) ? (
+    <div className="mb-5">
+      <h3 className="mt-4 patrocinato-da h5">
+        {intl.formatMessage(messages.patrocinato_da)}
+      </h3>
+      <Card
+        className="card card-teaser rounded shadow mt-3"
+        noWrapper={true}
+        tag="div"
+      >
+        <CardBody tag="div" className={'card-body pe-3'}>
+          <div className="mb-5">
+            <RichText data={content?.patrocinato_da} />
+          </div>
+        </CardBody>
+      </Card>
+    </div>
+  ) : null;
+};
+
+export default EventoPatrocinatoDa;

package/src/components/ItaliaTheme/View/EventoView/EventoUlterioriInformazioni.jsx

@@ -6,7 +6,6 @@ import { defineMessages, useIntl } from 'react-intl';
 import { UniversalLink } from '@plone/volto/components';
 import {
   richTextHasContent,
-  RichText,
   Metadata,
   HelpBox,
   GenericCard,
@@ -17,10 +16,6 @@ const messages = defineMessages({
     id: 'event_url',
     defaultMessage: "Url dell'evento",
   },
-  patrocinato_da: {
-    id: 'patrocinato_da',
-    defaultMessage: 'Patrocinato da',
-  },
   strutture_politiche: {
     id: 'event_strutture_politiche',
     defaultMessage: 'Strutture politiche coinvolte',
@@ -51,18 +46,6 @@ const EventoUlterioriInformazioni = ({ content }) => {
           </UniversalLink>
         </div>
       )}
-      {richTextHasContent(content?.patrocinato_da) && (
-        <div className="mt-4">
-          {richTextHasContent(content?.patrocinato_da) && (
-            <div className="mb-5">
-              <RichText
-                title={intl.formatMessage(messages.patrocinato_da)}
-                data={content?.patrocinato_da}
-              />
-            </div>
-          )}
-        </div>
-      )}
       {content?.strutture_politiche?.length > 0 && (
         <div className="mt-4">
           <h3 className="h5">
@@ -91,11 +74,6 @@ EventoUlterioriInformazioni.propTypes = {
     ulteriori_informazioni: PropTypes.shape({
       data: PropTypes.string,
     }),
-    patrocinato_da: PropTypes.shape({
-      'content-type': PropTypes.string,
-      data: PropTypes.string,
-      encoding: PropTypes.string,
-    }),
     strutture_politiche: PropTypes.array,
     items: PropTypes.array,
   }).isRequired,

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

@@ -27,6 +27,19 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  eventoContent: {
+    id: 'eventoContent',
+    defaultMessage: "Contenuto dell'evento",
+  },
+});
+
 export const EventoViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -53,6 +66,7 @@ export const EventoViewSectionsOrder = [
  */
 const EventoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -71,7 +85,10 @@ const EventoView = ({ content, location }) => {
         <ContentImage content={content} position="afterHeader" />
 
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             {__CLIENT__ && (
               <SideMenu data={sideMenuElements} content_uid={content?.UID} />
             )}
@@ -80,6 +97,8 @@ const EventoView = ({ content, location }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.eventoContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/FAQ/FaqFolder/SearchBar.jsx

@@ -14,6 +14,10 @@ const messages = defineMessages({
     id: 'faq_search',
     defaultMessage: 'Type in a keyword to find answers',
   },
+  search_icon: {
+    id: 'search_icon',
+    defaultMessage: 'Search icon',
+  },
 });
 
 /**
@@ -41,6 +45,7 @@ const SearchBar = ({ searchableText, setSearchableText }) => {
                   style={{
                     ariaHidden: true,
                   }}
+                  title={intl.formatMessage(messages.search_icon)}
                 />
               </div>
             </div>
@@ -67,6 +72,8 @@ const SearchBar = ({ searchableText, setSearchableText }) => {
               }}
               type="text"
               aria-controls="faq-search-results-region"
+              role="search"
+              aria-label={intl.formatMessage(messages.search_faq)}
             />
           </div>
         </div>

package/src/components/ItaliaTheme/View/IncaricoView/IncaricoView.jsx

@@ -5,7 +5,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl } from 'react-intl';
 import { defineMessages, useIntl } from 'react-intl';
 import {
   PageHeader,
@@ -24,12 +23,25 @@ import {
 import { contentFolderHasItems } from 'design-comuni-plone-theme/helpers';
 import { UniversalLink } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 
 const messages = defineMessages({
   tipologia_incarico: {
     id: 'tipologia_incarico',
     defaultMessage: 'Tipo di incarico',
   },
+  data_inizio_incarico: {
+    id: 'data_inizio_incarico',
+    defaultMessage: "Data di inizio dell'incarico",
+  },
+  data_conclusione_incarico: {
+    id: 'data_conclusione_incarico',
+    defaultMessage: "Data di fine dell'incarico",
+  },
+  data_insediamento: {
+    id: 'data_insediamento',
+    defaultMessage: 'Data di insediamento',
+  },
   importi_viaggio: {
     id: 'importi_viaggio',
     defaultMessage: 'Importi di viaggio e/o servizio',
@@ -54,10 +66,6 @@ const messages = defineMessages({
     id: 'data_conclusione',
     defaultMessage: 'Data conclusione incarico',
   },
-  data_insediamento: {
-    id: 'data_insediamento',
-    defaultMessage: 'Data insediamento',
-  },
   atto_nomina: {
     id: 'atto_nomina',
     defaultMessage: 'Atto di nomina',
@@ -69,9 +77,10 @@ const messages = defineMessages({
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-const IncaricoView = (props) => {
-  const { content } = props;
+const IncaricoView = ({ content, moment: momentlib }) => {
+  const moment = momentlib.default;
   const intl = useIntl();
+
   return (
     <div className="container px-4 my-4 incarico-view">
       <SkipToMainContent />
@@ -93,6 +102,36 @@ const IncaricoView = (props) => {
             <div className="font-serif">{content.tipologia_incarico.title}</div>
           </RichTextSection>
         )}
+        {content.data_inizio_incarico && (
+          <RichTextSection
+            tag_id="data_inizio_incarico"
+            title={intl.formatMessage(messages.data_inizio_incarico)}
+          >
+            <div className="font-serif">
+              {moment(content.data_inizio_incarico).format('D-MM-YYYY')}
+            </div>
+          </RichTextSection>
+        )}
+        {content.data_conclusione_incarico && (
+          <RichTextSection
+            tag_id="data_conclusione_incarico"
+            title={intl.formatMessage(messages.data_conclusione_incarico)}
+          >
+            <div className="font-serif">
+              {moment(content.data_conclusione_incarico).format('D-MM-YYYY')}
+            </div>
+          </RichTextSection>
+        )}
+        {content.data_insediamento && (
+          <RichTextSection
+            tag_id="data_insediamento"
+            title={intl.formatMessage(messages.data_insediamento)}
+          >
+            <div className="font-serif">
+              {moment(content.data_insediamento).format('D-MM-YYYY')}
+            </div>
+          </RichTextSection>
+        )}
         {richTextHasContent(content.compensi) && (
           <RichTextSection
             data={content.compensi}
@@ -196,4 +235,4 @@ IncaricoView.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(IncaricoView);
+export default injectLazyLibs(['moment'])(IncaricoView);

package/src/components/ItaliaTheme/View/NewsItemView/NewsItemText.jsx

@@ -1,7 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
-import { RichTextSection } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import {
+  RichText,
+  RichTextSection,
+  richTextHasContent,
+} from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
 const messages = defineMessages({
   news_item_contenuto: {
@@ -12,21 +16,40 @@ const messages = defineMessages({
 
 const NewsItemText = ({ content }) => {
   const intl = useIntl();
+  if (typeof content !== 'object') return null;
 
-  return (
-    <RichTextSection
-      data={content.descrizione_estesa}
-      tag_id={'text-body'}
-      field="descrizione_estesa"
-      title={intl.formatMessage(messages.news_item_contenuto)}
-      show_title={false}
-    />
-  );
+  // NewsItem ha la descrizione_estesa (testo con blocchi)
+  // altri CT (come i Comunicati Stampa) potrebbero avere `text`
+  // (richtext senza blocchi).
+  //
+  // La condizione sul campo descrizione_estesa è volutamente semplificata
+  // senza `richTextHasContent` perchè non interessa tanto se il campo
+  // ha o non ha contenuto, ma se il campo esiste o non esiste
+  return (Object.hasOwn || Object.hasOwnProperty)(content, 'descrizione_estesa')
+    ? richTextHasContent(content.descrizione_estesa) && (
+        <RichTextSection
+          data={content.descrizione_estesa}
+          tag_id={'text-body'}
+          field="descrizione_estesa"
+          title={intl.formatMessage(messages.news_item_contenuto)}
+          show_title={false}
+        />
+      )
+    : content.text && (
+        <RichTextSection
+          tag_id={'text-body'}
+          title={intl.formatMessage(messages.news_item_contenuto)}
+          show_title={false}
+        >
+          <RichText data={content.text} />
+        </RichTextSection>
+      );
 };
 
 NewsItemText.propTypes = {
   content: PropTypes.shape({
     descrizione_estesa: PropTypes.object,
+    text: PropTypes.object,
   }).isRequired,
 };
 

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

@@ -25,6 +25,18 @@ import {
   useSideMenu,
   useReadingTime,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  newsContent: {
+    id: 'newsContent',
+    defaultMessage: 'Contenuto della notizia',
+  },
+});
 
 export const NewsItemViewSectionsOrder = [
   {
@@ -49,6 +61,7 @@ export const NewsItemViewSectionsOrder = [
  */
 const NewsItemView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
   const { readingtime } = useReadingTime(content, documentBody);
 
@@ -75,13 +88,18 @@ const NewsItemView = ({ content, location }) => {
         {/* HEADER IMAGE */}
         <ContentImage content={content} position="afterHeader" />
         <div className="row row-column-border border-light row-column-menu-left">
-          <aside className="col-lg-4">
+          <aside
+            className="col-lg-4"
+            aria-label={intl.formatMessage(messages.sideMenuIndex)}
+          >
             <SideMenu data={sideMenuElements} content_uid={content?.UID} />
           </aside>
           <section
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.newsContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

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

@@ -11,6 +11,7 @@ import {
   PagePlaceholderAfterContent,
   PagePlaceholderAfterRelatedItems,
   PagePlaceholderTitle,
+  PagePlaceholderHeaderEnd,
   TextOrBlocks,
   RichText,
   RelatedItemInEvidence,
@@ -76,6 +77,7 @@ const PageView = ({ content, token, location, history }) => {
                 </PagePlaceholderTitle>
 
                 <p className="description">{content?.description}</p>
+
                 {content?.ricerca_in_testata && (
                   <SearchSectionForm content={content} />
                 )}
@@ -118,6 +120,7 @@ const PageView = ({ content, token, location, history }) => {
                 </div>
               )}
             </div>
+            <PagePlaceholderHeaderEnd content={content} />
           </div>
 
           <TextOrBlocks content={content} />

package/src/components/ItaliaTheme/View/PageView/Placeholder/HeaderEnd.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+const HeaderEnd = ({ content }) => {
+  return <></>;
+};
+export default HeaderEnd;