design-comuni-plone-theme 11.33.1 → 11.34.0

package/src/components/ItaliaTheme/Blocks/Common/SearchFilters/TextFilter.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
+import { Input } from 'design-react-kit';
 
 const messages = defineMessages({
   text_filter_placeholder: {
@@ -8,26 +9,53 @@ const messages = defineMessages({
   },
 });
 
-const TextFilter = ({ value, id, onChange, placeholder, blockID }) => {
+const TextFilter = ({
+  value,
+  id,
+  onChange,
+  placeholder,
+  blockID,
+  activeTopLabel = false,
+  infoText = '',
+}) => {
   const intl = useIntl();
+  const placeholderText =
+    placeholder || intl.formatMessage(messages.text_filter_placeholder);
 
   return (
     <div className="me-lg-3 my-2 my-lg-1 filter-wrapper text-filter">
-      <label htmlFor={`${blockID}-${id}`} className="visually-hidden">
-        {placeholder}
-      </label>
-      <input
-        type="text"
-        placeholder={
-          placeholder || intl.formatMessage(messages.text_filter_placeholder)
-        }
-        value={value}
-        onChange={(e, data) => {
-          onChange(id, e.target.value ?? '');
-        }}
-        autocomplete="off"
-        id={`${blockID}-${id}`}
-      />
+      {!activeTopLabel ? (
+        <>
+          {/* Input con label NACOSTA */}
+          <label htmlFor={`${blockID}-${id}`} className="visually-hidden">
+            {placeholderText}
+          </label>
+          <input
+            type="text"
+            placeholder={placeholderText}
+            value={value}
+            onChange={(e, data) => {
+              onChange(id, e.target.value ?? '');
+            }}
+            id={`${blockID}-${id}`}
+          />
+          {infoText && <small className="form-text d-block">{infoText}</small>}
+        </>
+      ) : (
+        <>
+          {/* Input con label VISIBILE */}
+          <Input
+            type="text"
+            label={placeholderText}
+            infoText={infoText} // small text
+            value={value}
+            onChange={(e, data) => {
+              onChange(id, e.target.value ?? '');
+            }}
+            id={`${blockID}-${id}`}
+          />
+        </>
+      )}
     </div>
   );
 };

package/src/components/ItaliaTheme/Blocks/Listing/BandiInEvidenceTemplate.jsx

@@ -237,6 +237,8 @@ const BandiInEvidenceTemplate = ({
                           item={!isEditMode ? item : null}
                           href={isEditMode ? '#' : null}
                           text={intl.formatMessage(messages.vedi)}
+                          tabIndex={-1}
+                          aria-hidden="true"
                         />
                       </div>
                     </div>

package/src/components/ItaliaTheme/Blocks/Listing/CardWithSlideUpTextTemplate.jsx

@@ -77,6 +77,7 @@ const CardWithSlideUpTextTemplate = (props) => {
                     backgroundImage: `url(${image})`,
                   }
                 }
+                tabIndex={-1}
               >
                 <div className="bg-gradient"></div>
                 {(category || date) && (
@@ -117,13 +118,15 @@ const CardWithSlideUpTextTemplate = (props) => {
                     href={isEditMode ? '#' : null}
                     text={intl.formatMessage(messages.vedi)}
                     className="justify-content-end"
+                    tabIndex={-1}
+                    aria-hidden="true"
                   />
                 </div>
                 <UniversalLink
                   item={!isEditMode ? item : null}
                   className="card-link"
                   aria-hidden="true"
-                  tabIndex="-1"
+                  tabIndex={-1}
                 ></UniversalLink>
               </div>
             );

package/src/components/ItaliaTheme/Blocks/Listing/RibbonCardTemplate.jsx

@@ -170,6 +170,7 @@ const RibbonCardTemplate = (props) => {
                           detail_link_label ||
                           intl.formatMessage(messages.default_detail_link)
                         }
+                        tabIndex={-1}
                         aria-hidden="true"
                       />
                     )}

package/src/components/ItaliaTheme/Blocks/Listing/SimpleCard/Card/SimpleCardDefault.jsx

@@ -175,6 +175,7 @@ const SimpleCardDefault = (props) => {
               detail_link_label ||
               intl.formatMessage(messages.card_detail_label)
             }
+            tabIndex={-1}
             aria-hidden="true"
           />
         )}

package/src/components/ItaliaTheme/Blocks/Listing/TemplatesSkeletons/BandiInEvidenceTemplateSkeleton.jsx

@@ -49,6 +49,8 @@ const BandiInEvidenceTemplateSkeleton = ({
                           tag={Link}
                           to={'#'}
                           text=""
+                          tabIndex={-1}
+                          aria-hidden="true"
                         />
                       </div>
                     </CardBody>

package/src/components/ItaliaTheme/ContactsBlock/ContactsBlock.jsx

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useIntl, defineMessages } from 'react-intl';
+import { useDispatch, useSelector } from 'react-redux';
+import { Container, Row, Col, Spinner, Card, CardBody } from 'design-react-kit';
+import { UniversalLink } from '@plone/volto/components';
+import { getContacts } from 'design-comuni-plone-theme/actions';
+import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+
+const messages = defineMessages({
+  contact_block_title: {
+    id: 'contact_block_title',
+    defaultMessage: 'Contatta il comune',
+  },
+});
+
+const ContactsBlock = () => {
+  const intl = useIntl();
+  const { pathname } = useLocation();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(getContacts(pathname));
+  }, [dispatch, pathname]);
+
+  const contacts = useSelector((state) => state.contacts) ?? {};
+  const contactsItems = contacts?.result?.items ?? [];
+  const isContactsLoading = contacts.loading;
+  const isContactsLoaded = contacts.loaded;
+
+  return contactsItems.length > 0 ? (
+    <section className="contacts-block bg-light py-5">
+      <Container>
+        <Row className="d-flex justify-content-center">
+          <Col xs={12} lg={6} xl={6} xxl={6}>
+            {isContactsLoading && !isContactsLoaded && (
+              <div className="d-flex justify-content-center">
+                <Spinner active />
+              </div>
+            )}
+            {!isContactsLoading && contactsItems?.length > 0 && (
+              <Card className="contacts-box">
+                <CardBody>
+                  <h2>{intl.formatMessage(messages.contact_block_title)}</h2>
+                  <div>
+                    <ul className="mb-0 mt-3 contacts-list">
+                      {contactsItems.map((contact, idx) => (
+                        <li key={idx}>
+                          <UniversalLink
+                            overrideMarkSpecialLinks={true}
+                            href={contact.contact}
+                            className="d-flex align-items-center"
+                          >
+                            <span className="icon-container d-flex justify-content-center">
+                              <Icon icon={contact.icon} color="current" />
+                            </span>
+                            <span className="text-container">
+                              {contact.title}
+                            </span>
+                          </UniversalLink>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                </CardBody>
+              </Card>
+            )}
+          </Col>
+        </Row>
+      </Container>
+    </section>
+  ) : (
+    <></>
+  );
+};
+
+export default ContactsBlock;

package/src/components/ItaliaTheme/View/Commons/PageHeader/PageHeaderTassonomiaArgomenti.jsx

@@ -24,9 +24,9 @@ const PageHeaderTassonomiaArgomenti = ({ content }) => {
 
   return content?.tassonomia_argomenti?.length > 0 ? (
     <div className="mt-4 mb-4 page-arguments">
-      <h5>
+      <h2 className="h5">
         <small>{intl.formatMessage(messages.topics)}</small>
-      </h5>
+      </h2>
       {content.tassonomia_argomenti.map((item, i) => (
         <UniversalLink
           item={item}

package/src/components/ItaliaTheme/index.js

@@ -22,6 +22,9 @@ export CTTitleColumnWidget from 'design-comuni-plone-theme/components/ItaliaThem
 export BlocksViewWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/BlocksViewWidget.jsx';
 export PDCViewWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/PDCViewWidget.jsx';
 export DataGridWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/DataGridWidget.jsx';
+export ContactsConfigWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/ContactsWidget/ContactsConfigWidget.jsx';
+export ContactsConfigForm from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/ContactsWidget/ContactsConfigForm.jsx';
+export ConditionallyRequiredDateWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/ConditionallyRequiredDateWidget.jsx';
 
 /********* ICONS ********* */
 export getItemIcon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/common/common';
@@ -75,6 +78,7 @@ export Breadcrumbs from 'design-comuni-plone-theme/components/ItaliaTheme/Breadc
 export FeedbackForm from 'design-comuni-plone-theme/components/ItaliaTheme/CustomerSatisfaction/FeedbackForm';
 export AnswersStep from 'design-comuni-plone-theme/components/ItaliaTheme/CustomerSatisfaction/Steps/AnswersStep';
 export CommentsStep from 'design-comuni-plone-theme/components/ItaliaTheme/CustomerSatisfaction/Steps/CommentsStep';
+export ContactsBlock from 'design-comuni-plone-theme/components/ItaliaTheme/ContactsBlock/ContactsBlock';
 
 /********* BLOCKS ********* */
 export AlertSidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Alert/Sidebar';

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { DatetimeWidget } from '@plone/volto/config/Widgets';
+
+const ConditionallyRequiredDateWidget = (props) => {
+  const { value, formData, onChange, id, title, required, ...rest } = props;
+
+  // Check tipo di incarico in formData
+  const tipoIncarico = formData?.tipologia_incarico;
+
+  // Make required only if tipo di incarico !== "amministrativo"
+  const isRequired = tipoIncarico !== 'amministrativo';
+
+  return (
+    <DatetimeWidget
+      {...rest}
+      id={id}
+      title={title}
+      value={value}
+      required={isRequired}
+      onChange={onChange}
+    />
+  );
+};
+
+export default ConditionallyRequiredDateWidget;

package/src/components/ItaliaTheme/manage/Widgets/ContactsWidget/ContactsConfigForm.jsx

@@ -0,0 +1,90 @@
+import { useIntl, defineMessages } from 'react-intl';
+import { Form as UIForm, Grid, Button } from 'semantic-ui-react';
+
+import { TextWidget } from '@plone/volto/components';
+
+const messages = defineMessages({
+  icon: {
+    id: 'contacts-config-icon',
+    defaultMessage: 'Icon name',
+  },
+  title: {
+    id: 'contacts-config-title',
+    defaultMessage: 'Contact title',
+  },
+  contact: {
+    id: 'contacts-config-contact',
+    defaultMessage: 'Contact',
+  },
+  delete_contact: {
+    id: 'contacts-config-delete-item',
+    defaultMessage: 'Delete contact',
+  },
+});
+
+const ContactsConfigForm = ({
+  id,
+  contactItem,
+  onChange,
+  deleteContactItem,
+}) => {
+  const intl = useIntl();
+  const onChangeFormData = (id, value) => {
+    onChange({ ...contactItem, [id]: value });
+  };
+  return (
+    <div className="contact-config-form">
+      <TextWidget
+        id="icon"
+        title={intl.formatMessage(messages.icon)}
+        description=""
+        value={contactItem.icon}
+        onChange={(id, value) => {
+          onChangeFormData('icon', value);
+        }}
+      />
+      <TextWidget
+        id="title"
+        title={intl.formatMessage(messages.title)}
+        description=""
+        value={contactItem.title}
+        onChange={(id, value) => {
+          onChangeFormData('title', value);
+        }}
+      />
+      <TextWidget
+        id="contact"
+        title={intl.formatMessage(messages.contact)}
+        description=""
+        value={contactItem.contact}
+        onChange={(id, value) => {
+          onChangeFormData('contact', value);
+        }}
+      />
+      <UIForm.Field
+        inline
+        className="delete wide delete-field"
+        id="menu-delete"
+      >
+        <Grid>
+          <Grid.Row stretched>
+            <Grid.Column width={4}>
+              <div className="wrapper"></div>
+            </Grid.Column>
+            <Grid.Column width={8}>
+              <Button
+                icon="trash"
+                onClick={deleteContactItem}
+                id="delete-contact-item"
+                negative
+                content={intl.formatMessage(messages.delete_contact)}
+              />
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </UIForm.Field>
+    </div>
+  );
+};
+
+export default ContactsConfigForm;