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

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

@@ -19,12 +19,26 @@ import {
   UODocuments,
   UOWhatDoesItDo,
   UOMoreInfos,
+  UOMetadati,
   RelatedItemInEvidence,
   SkipToMainContent,
   ContentTypeViewSections,
   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',
+  },
+  UOContent: {
+    id: 'UOContent',
+    defaultMessage: "Contenuto dell'unità organizzativa",
+  },
+});
+
 export const UOViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -46,6 +60,8 @@ export const UOViewSectionsOrder = [
   { /* DOCUMENTI */ component: UODocuments },
 
   { /* ULTERIORI INFORMAZIONI */ component: UOMoreInfos },
+
+  { /*METADATI*/ component: UOMetadati },
 ];
 
 /**
@@ -56,6 +72,7 @@ export const UOViewSectionsOrder = [
  */
 const UOView = ({ content }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -73,7 +90,10 @@ const UOView = ({ content }) => {
         <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} />
             )}
@@ -82,6 +102,8 @@ const UOView = ({ content }) => {
             ref={documentBody}
             id="main-content-section"
             className="col-lg-8 it-page-sections-container border-light"
+            role="region"
+            aria-label={intl.formatMessage(messages.UOContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/VenueView/VenueView.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',
+  },
+  venueContent: {
+    id: 'venueContent',
+    defaultMessage: 'Informazioni sulla struttura',
+  },
+});
+
 export const VenueViewSectionsOrder = [
   {
     /* HEADER IMAGE */
@@ -56,23 +69,18 @@ export const VenueViewSectionsOrder = [
  */
 const VenueView = ({ content }) => {
   const documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
-  useEffect(() => {
-    if (
-      content.nome_alternativo &&
-      !content.title?.includes(content.nome_alternativo)
-    ) {
-      content.subtitle = content.nome_alternativo;
-    }
-  });
-
   return (
     <>
       <div className="container px-4 my-4 luogo-view">
         <SkipToMainContent />
         <PageHeader
-          content={content}
+          content={{
+            ...content,
+            subtitle: content.nome_alternativo,
+          }}
           readingtime={null}
           showreadingtime={false}
           showdates={false}
@@ -82,7 +90,10 @@ const VenueView = ({ content }) => {
         <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} />
             )}
@@ -91,6 +102,8 @@ const VenueView = ({ content }) => {
             className="col-lg-8 it-page-sections-container border-light"
             id="main-content-section"
             ref={documentBody}
+            role="region"
+            aria-label={intl.formatMessage(messages.venueContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/VenueView/VenueWhere.jsx

@@ -39,7 +39,7 @@ const VenueWhere = ({ content }) => {
       <Card className="card card-teaser border-left-card preview-image-card card-big-io-comune shadow mt-3 rounded mb-4">
         <CardBody>
           <CardTitle>
-            <h5 className="card-title">{content.title}</h5>
+            <h3 className="h5 card-title">{content.title}</h3>
           </CardTitle>
           <CardText>
             <p>

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

@@ -67,9 +67,8 @@ export const useSideMenu = (content, documentBody) => {
     }
     if (observer) {
       observer.observe(documentBody.current, {
-        //attributes: true,
         childList: true,
-        subtree: true,
+        //subtree: true, //commentato, perchè a noi interessano solo i figli di primo livello. Con questo abilitato, se in pagina ci sono delle gallery si impalla il browser
       });
     }
     return () => {

package/src/components/ItaliaTheme/View/__tests__/ServizioTempiScadenze.test.jsx

@@ -14,7 +14,6 @@ const mockStore = configureStore(middlewares);
 // Warning: An update to Icon inside a test was not wrapped in act(...).
 // When testing, code that causes React state updates should be wrapped into act(...):
 jest.mock('design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon');
-// loadables.push('rrule');
 jest.mock('@plone/volto/helpers/Loadable/Loadable');
 beforeAll(
   async () =>

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

@@ -138,6 +138,7 @@ export NewsItemMetadata from 'design-comuni-plone-theme/components/ItaliaTheme/V
 export PagePlaceholderAfterContent from 'design-comuni-plone-theme/components/ItaliaTheme/View/PageView/Placeholder/AfterContent';
 export PagePlaceholderAfterRelatedItems from 'design-comuni-plone-theme/components/ItaliaTheme/View/PageView/Placeholder/AfterRelatedItems';
 export PagePlaceholderTitle from 'design-comuni-plone-theme/components/ItaliaTheme/View/PageView/Placeholder/Title';
+export PagePlaceholderHeaderEnd from 'design-comuni-plone-theme/components/ItaliaTheme/View/PageView/Placeholder/HeaderEnd';
 export PaginaArgomentoPlaceholderAfterContent from 'design-comuni-plone-theme/components/ItaliaTheme/View/PaginaArgomentoView/Placeholder/AfterContent';
 export PaginaArgomentoPlaceholderAfterRelatedItems from 'design-comuni-plone-theme/components/ItaliaTheme/View/PaginaArgomentoView/Placeholder/AfterRelatedItems';
 export PaginaArgomentoViewNoBlocks from 'design-comuni-plone-theme/components/ItaliaTheme/View/PaginaArgomentoView/PaginaArgomentoViewNoBlocks';
@@ -183,6 +184,7 @@ export UOContacts from 'design-comuni-plone-theme/components/ItaliaTheme/View/UO
 export UOContactsLocations from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsLocations';
 export UOContactsContacts from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsContacts';
 export UOContactsSediSecondarie from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOContactsParts/UOContactsSediSecondarie';
+export UOMetadati from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOMetadati';
 
 export UODocuments from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UODocuments';
 export UOWhatDoesItDo from 'design-comuni-plone-theme/components/ItaliaTheme/View/UOView/UOWhatDoesItDo';

package/src/components/ItaliaTheme/index.js

@@ -26,7 +26,6 @@ export SectionIcon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/
 
 /********* COMMONS ********* */
 export CardCategory from 'design-comuni-plone-theme/components/ItaliaTheme/Cards/CardCategory';
-export RemoveBodyClass from 'design-comuni-plone-theme/components/ItaliaTheme/RemoveBodyClass/RemoveBodyClass';
 export CardPersona from 'design-comuni-plone-theme/components/ItaliaTheme/Cards/CardPersona';
 export GalleryPreview from 'design-comuni-plone-theme/components/ItaliaTheme/GalleryPreview/GalleryPreview';
 
@@ -80,6 +79,7 @@ export SearchSectionsBackground from 'design-comuni-plone-theme/components/Itali
 export BackgroundUser from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/SearchSections/BackgroundUser';
 export Skeleton from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/Skeleton';
 export CardCalendar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/CardCalendar';
+export RassegnaInfo from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/RassegnaInfo';
 export ListingCategory from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingCategory';
 export ListingText from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingText';
 export ListingLinkMore from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/ListingLinkMore';

package/src/components/ItaliaTheme/manage/Widgets/HtmlSlateWidget.jsx

@@ -3,6 +3,7 @@
  * CUSTOMIZATIONS:
  *  - rimossi i bottoni di allinemento, textlarger e blockquote perchè non funzionano nel widget e non servono in questi campi
  *  - aggiunta la classe public-ui
+ *  - aggiunta la proprietà "fieldSet" per passare il nome del fieldset dentro SlateEditor. Quaste modifica è stata introdotta su volto 18: https://github.com/plone/volto/pull/6803
  */
 
 import React from 'react';
@@ -31,8 +32,7 @@ import '@plone/volto-slate/widgets/style.css';
 
 const messages = defineMessages({
   error: {
-    id:
-      'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
+    id: 'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
     defaultMessage:
       'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
   },
@@ -44,6 +44,7 @@ const HtmlSlateWidget = (props) => {
     onChange,
     value,
     focus,
+    fieldSet,
     className,
     block,
     placeholder,
@@ -138,6 +139,7 @@ const HtmlSlateWidget = (props) => {
             id={id}
             name={id}
             value={valueFromHtml}
+            fieldSet={fieldSet}
             onChange={handleChange}
             block={block}
             selected={selected}

package/src/components/ItaliaTheme/manage/Widgets/SearchSectionsConfigurationWidget/SearchSectionsConfigurationForm.jsx

@@ -50,7 +50,7 @@ const SearchSectionsConfigurationForm = ({
   useEffect(() => {
     document
       .querySelector('form.ui.form')
-      .addEventListener('click', preventClick);
+      ?.addEventListener('click', preventClick);
 
     document.querySelectorAll('form.ui.form input').forEach((item) => {
       item.addEventListener('keypress', preventEnter);
@@ -59,7 +59,7 @@ const SearchSectionsConfigurationForm = ({
     return () => {
       document
         .querySelector('form.ui.form')
-        .removeEventListener('click', preventClick);
+        ?.removeEventListener('click', preventClick);
       document.querySelectorAll('form.ui.form input').forEach((item) => {
         item.removeEventListener('keypress', preventEnter);
       });

package/src/components/SelectInput/SelectInput.jsx

@@ -92,6 +92,10 @@ const messages = defineMessages({
     id: 'dropdown_indicator',
     defaultMessage: 'Apri il menu',
   },
+  SelectInput_default_label: {
+    id: 'SelectInput_default_label',
+    defaultMessage: "Seleziona un'opzione",
+  },
 });
 
 const SelectContainer = injectLazyLibs('reactSelect')(({
@@ -313,14 +317,16 @@ const SelectInput = ({
   options,
   components = {},
   reactSelect,
+  labelledby,
   defaultValue,
 }) => {
   const intl = useIntl();
+  const labelDefined =
+    label || intl.formatMessage(messages.SelectInput_default_label);
   const Select = reactSelect.default;
   return (
     <div className="bootstrap-select-wrapper">
-      {label && <label htmlFor={id}>{label}</label>}
-
+      {label && <label htmlFor={!labelledby ? id : undefined}>{label}</label>}
       <Select
         components={{
           MenuList,
@@ -341,9 +347,9 @@ const SelectInput = ({
         isSearchable={isSearchable}
         isMulti={isMulti}
         isClearable={isClearable}
-        aria-label={label}
+        aria-label={labelDefined}
+        aria-labelledby={!label ? labelledby : undefined}
         aria-live="polite"
-        aria-labelledby={id}
         ariaLiveMessages={getSelectAriaLiveMessages(intl)}
         noOptionsMessage={() =>
           intl.formatMessage(messages.select_noOptionsMessage)

package/src/components/TextInput.jsx

@@ -17,6 +17,7 @@ export default function TextInput(props) {
     groupClassName,
     ...otherProps
   } = props;
+
   const [isFocused, setIsFocused] = useState(false);
 
   const toggleFocusLabel = () => {

package/src/components/__tests__/FormValidation.test.js

@@ -0,0 +1,142 @@
+import FormValidation from '@plone/volto/helpers/FormValidation/FormValidation';
+import { messages } from '@plone/volto/helpers/MessageLabels/MessageLabels';
+
+// copied over and tweaked from
+// https://github.com/plone/volto/blob/17.x.x/src/helpers/FormValidation/FormValidation.test.js
+const schema = {
+  properties: {
+    username: { title: 'Username', type: 'string', description: '' },
+    email: { title: 'Email', type: 'string', widget: 'email', description: '' },
+    url: { title: 'url', type: 'string', widget: 'url', description: '' },
+  },
+  fieldsets: [
+    { id: 'default', title: 'FIXME: User Data', fields: ['username'] },
+    { id: 'second', title: 'Second: User Data', fields: ['email'] },
+  ],
+  required: ['username'],
+};
+// const errors = { email: ['The specified email is not valid.'] };
+const formData = { username: 'test username', email: 'test@example.com' };
+const formatMessage = (messageObj) => {
+  return messageObj?.defaultMessage;
+};
+const errorJSON =
+  "[{'message': 'The specified email is not valid.', 'field': 'email', 'error': 'ValidationError'}]";
+// end copied section
+
+describe('FormValidation', () => {
+  describe('validateFieldsPerFieldset', () => {
+    // Tests copied over from Volto
+    it('validates incorrect url', () => {
+      formData.url = 'foo';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({ url: [messages.isValidURL.defaultMessage] });
+    });
+    it('validates url', () => {
+      formData.url = 'https://plone.org/';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with ip', () => {
+      formData.url = 'http://127.0.0.1:8080/Plone';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with localhost', () => {
+      formData.url = 'http://localhost:8080/Plone';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    // Our additional tests
+    it('validates url with path', () => {
+      formData.url = 'https://plone.org/Plone';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with port', () => {
+      formData.url = 'https://plone.org:8080/Plone';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with query', () => {
+      formData.url = 'https://plone.org/Plone?query=1';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with query with slashes', () => {
+      formData.url = 'https://plone.org/Plone?query=1/2/3';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with fragment', () => {
+      formData.url = 'https://plone.org/Plone#fragment';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with query and fragment', () => {
+      formData.url = 'https://plone.org/Plone?query=1#fragment';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+    it('validates url with fragment containing a slash', () => {
+      formData.url = 'https://plone.org/Plone#fragment/more';
+      expect(
+        FormValidation.validateFieldsPerFieldset({
+          schema,
+          formData,
+          formatMessage,
+        }),
+      ).toEqual({});
+    });
+  });
+});

package/src/config/Blocks/ListingOptions/attachmentCardTemplate.js

@@ -10,7 +10,7 @@ const messages = defineMessages({
   show_pdf_desc: {
     id: 'show_pdf_desc',
     defaultMessage:
-      "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata altrimenti vengono scaricati.",
+      "Permette di aprire l'anteprima di tutti i PDF di questo elenco in una tab separata. Se non impostato, i PDF vengono scaricati.",
   },
 });
 

package/src/config/Blocks/blocks.js

@@ -70,6 +70,7 @@ import CalloutView from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks
 import CalloutEdit from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Callout/Edit';
 
 import { cloneBlock } from 'design-comuni-plone-theme/helpers/blocks';
+import { italiaTeaserSchemaEnhancer } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Teaser/schema';
 
 const italiaBlocks = {
   highlitedContent: {
@@ -79,8 +80,8 @@ const italiaBlocks = {
     group: 'homePage',
     view: HighlightedContentView,
     edit: HighlightedContentEdit,
-    restricted: false,
-    mostUsed: true,
+    restricted: true,
+    mostUsed: false,
     security: {
       addPermission: [],
       view: [],
@@ -384,11 +385,11 @@ const italiaBlocks = {
 };
 
 const getItaliaBlocks = (config) => {
-  delete config.blocks.blocksConfig.teaser;
   config.blocks.blocksConfig.gridBlock.allowedBlocks =
     config.blocks.blocksConfig.gridBlock.allowedBlocks.filter(
       (item) => !['teaser'].includes(item),
     );
+  config.blocks.blocksConfig.teaser.schemaEnhancer = italiaTeaserSchemaEnhancer;
   return italiaBlocks;
 };
 export default getItaliaBlocks;

package/src/config/Slate/Blockquote/index.js

@@ -4,6 +4,13 @@ import BlockquoteMenu from './BlockquoteMenu';
 export default function install(config) {
   const { slate } = config.settings;
 
+  slate.elements.blockquote = ({ children, attributes, ...otherProps }) => {
+    return (
+      <blockquote {...attributes}>
+        <p>{children}</p>
+      </blockquote>
+    );
+  };
   slate.buttons.blockquote = (props) => (
     <BlockquoteMenu {...props} title="Blockquote" />
   );

package/src/config/Views/views.js

@@ -44,6 +44,7 @@ defineMessages({
 const italiaContentTypesViews = {
   Document: PageView,
   'News Item': NewsItemView,
+  ComunicatoStampa: NewsItemView, // ct opzionale da volto-rer-ufficiostampa
   UnitaOrganizzativa: UOView,
   Persona: PersonaView,
   Venue: VenueView,