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

package/src/components/ItaliaTheme/Icons/DesignIcon.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useState, useEffect } from 'react';
 import { v4 as uuid } from 'uuid';
 import PropTypes from 'prop-types';
 
@@ -12,50 +12,101 @@ const propTypes = {
 
 const defaultProps = {
   color: '',
-  size: '',
+  size: '24px',
   icon: '',
   padding: false,
 };
 
+// No ts means we get many different things here, standardize it
+const SIZE_MAPPINGS = {
+  xs: '1rem',
+  sm: '1.25rem',
+  md: defaultProps.size,
+  lg: '1.75rem',
+  xl: '2rem',
+};
+
+function getIconMapSizeConfig(size) {
+  const mapKeys = Object.keys(SIZE_MAPPINGS);
+  if (mapKeys.includes(size)) return SIZE_MAPPINGS[size];
+  return size;
+}
+
+const iconCache = new Map(); // Global cache using Map
+
 const Icon = ({ icon, title, className, size }) => {
-  const ImportedIconRef = useRef(null);
-  const [loading, setLoading] = useState(false);
-  const iconID = useMemo(() => uuid(), []);
+  const [iconState, setIconState] = useState({
+    loading: true,
+    icon: undefined,
+    // Move to useId in react18
+    id: uuid(),
+  });
 
   useEffect(() => {
-    setLoading(true);
-    const importIcon = async () => {
-      try {
-        const { default: namedImport } = await import(
-          `bootstrap-italia/src/svg/${icon}.svg`
-        );
-        ImportedIconRef.current = namedImport;
-      } catch (err) {
-        throw err;
-      } finally {
-        setLoading(false);
-      }
-    };
-    importIcon();
+    let loadableIcon = iconCache.get(icon);
+    // Use the cached icon if available
+    if (loadableIcon) {
+      setIconState((prev) => ({
+        ...prev,
+        loading: false,
+        icon: loadableIcon,
+      }));
+    } else {
+      // Otherwise, dynamically import the icon
+      const importIcon = async () => {
+        try {
+          const { default: namedImport } = await import(
+            `bootstrap-italia/src/svg/${icon}.svg`
+          );
+          iconCache.set(icon, namedImport); // Cache the imported icon
+          loadableIcon = namedImport;
+        } catch (err) {
+          console.error(`Error loading icon: ${icon}`, err);
+        } finally {
+          setIconState((prev) => ({
+            ...prev,
+            loading: false,
+            icon: loadableIcon,
+          }));
+        }
+      };
+      importIcon();
+    }
   }, [icon]);
 
-  if (!loading && ImportedIconRef.current) {
-    const { current: name } = ImportedIconRef;
+  const iconSize = getIconMapSizeConfig(size);
+
+  // Placeholder that is shown while the icon is loading
+  if (iconState.loading) {
+    return (
+      <span
+        style={{
+          width: iconSize,
+          height: iconSize,
+          backgroundColor: 'transparent',
+        }}
+        className={className}
+      />
+    );
+  }
+
+  // Render the icon once it's loaded
+  if (iconState.icon) {
     return (
       <svg
-        xmlns={name.attributes?.xmlns}
-        viewBox={name.attributes?.viewBox}
-        width={name.attributes?.width}
-        height={name.attributes?.height}
-        style={{ height: size, width: 'auto' }}
+        xmlns={iconState.icon.attributes?.xmlns}
+        viewBox={iconState.icon.attributes?.viewBox}
+        width={iconState.icon.attributes?.width}
+        height={iconState.icon.attributes?.height}
+        style={{ height: iconSize, width: iconSize }}
         className={className}
         aria-hidden="true"
         dangerouslySetInnerHTML={{
           __html: title
-            ? `<title id="${iconID}">${title}</title>${name.content}`
-            : name.content,
+            ? `<title id="${iconState.id}">${title}</title>${iconState.icon.content}`
+            : iconState.icon.content,
         }}
-        aria-labelledby={iconID}
+        aria-labelledby={iconState.id}
       />
     );
   }

package/src/components/ItaliaTheme/Icons/FontAwesomeIcon.jsx

@@ -37,6 +37,8 @@ const FontAwesomeIcon = (props) => {
         ? 'brands'
         : prefixKey === 'far'
         ? 'regular'
+        : prefixKey === 'fas'
+        ? 'solid'
         : prefixKey != null
         ? prefixKey
         : 'solid',

package/src/components/ItaliaTheme/Icons/common/common.js

@@ -1,14 +1,15 @@
 import getItemIcon_extend from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/common/common_extend';
 
+const type_icons = {
+  Servizio: 'it-settings',
+  UnitaOrganizzativa: 'it-pa',
+  Documento: 'it-file',
+  'News Item': 'it-note',
+  Event: 'it-calendar',
+};
 const getItemIcon = (item) => {
-  const type_icons = {
-    Servizio: 'it-settings',
-    UnitaOrganizzativa: 'it-pa',
-    Documento: 'it-file',
-    'News Item': 'it-note',
-    Event: 'it-calendar',
-  };
-  let icon = type_icons[item['@type']] || 'it-pa'; //default-icon
+  if (!item) return;
+  let icon = item['@type'] ? type_icons[item['@type']] || 'it-pa' : 'it-pa'; //default-icon
 
   if (item['@type'] === 'Pagina Argomento') {
     icon = item.icona ? item.icona : icon;

package/src/components/ItaliaTheme/LoginAgid/LoginAgid.jsx

@@ -11,10 +11,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 import { Login } from '@plone/volto/components';
 import { Row, Col, Container } from 'design-react-kit';
-import {
-  RemoveBodyClass,
-  LoginAgidButtons,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { Button } from 'design-react-kit';
 import { useLocation } from 'react-router-dom';
 import { getBaseUrl } from '@plone/volto/helpers';
@@ -72,7 +69,7 @@ const LoginAgid = (props) => {
         <div id="page-login">
           <Helmet title={intl.formatMessage(messages.login)} />
           <BodyClass className="public-ui" />
-          <RemoveBodyClass className="cms-ui" />
+          <BodyClass className="cms-ui" remove={true} />
           <Container className="view-wrapper py-5">
             <Row className="view-container">
               <Col xs={12} lg={{ size: 10, offset: 1 }}>

package/src/components/ItaliaTheme/Logo/Logo.jsx

@@ -10,9 +10,10 @@
  * Note the icon class.
  */
 
-/* SVG example */
-// import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-// const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+/* SVG example
+ import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+ const Logo = () => <Icon color="" icon="it-pa" padding={false} size="" />;
+*/
 
 /* PNG example using https://www.npmjs.com/package/webpack-image-resize-loader *
  * works, but some issues with prettier and jest
@@ -20,9 +21,16 @@
 // eslint-disable-next-line import/no-unresolved
 //import logo from './logo.png?width=164';
 import logo from './logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const Logo = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
-
+const Logo = ({ alt = 'Logo', className }) => {
+  return (
+    <SiteProperty
+      property="site_logo"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className={className}
+      alt={alt}
+    />
+  );
+};
 export default Logo;

package/src/components/ItaliaTheme/LogoFooter/LogoFooter.jsx

@@ -12,9 +12,17 @@
 
 // eslint-disable-next-line import/no-unresolved
 import logo from '../Logo/logo.png';
+import { SiteProperty } from 'volto-site-settings';
 
-const LogoFooter = () => (
-  <img className="icon" src={logo} width="82" height="82" alt="Logo" />
-);
+const LogoFooter = () => {
+  return (
+    <SiteProperty
+      property="site_logo_footer"
+      defaultValue={{ url: logo, width: 82, height: 82 }}
+      className="icon"
+      alt="Logo"
+    />
+  );
+};
 
 export default LogoFooter;

package/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx

@@ -66,7 +66,10 @@ const isActive = (item, pathname) => {
   );
 };
 
-const isChildActive = (itemUrl, pathname) => {
+const isChildActive = (itemUrl, pathname, exact = false) => {
+  if (exact) {
+    return itemUrl === pathname;
+  }
   return pathname.indexOf(itemUrl) > -1;
 };
 
@@ -332,6 +335,7 @@ const MegaMenu = ({ item, pathname }) => {
                                     active: isChildActive(
                                       flattenToAppURL(child['@id']),
                                       pathname,
+                                      true,
                                     ),
                                   })}
                                   role="menuitem"

package/src/components/ItaliaTheme/Pagination/Pagination.jsx

@@ -58,7 +58,6 @@ class Pagination extends Component {
 
   handleItemClick = (e, nextActivePage) => {
     const { activePage: prevActivePage } = this.state;
-
     // Heads up! We need the cast to the "number" type there, as `activePage` can be a string
     if (+prevActivePage === +nextActivePage) return;
     this.setState({ activePage: nextActivePage.children });
@@ -81,6 +80,9 @@ class Pagination extends Component {
       totalPages,
     });
 
+    const inactivePrevButton = activePage === 1;
+    const inactiveForwButton = activePage === this.props.totalPages;
+
     return (
       <Pager
         className="justify-content-center mt-5"
@@ -96,6 +98,8 @@ class Pagination extends Component {
                   onClick={this.handleItemClick}
                   type={type}
                   ellipsisItem={ellipsisItem}
+                  isPrevButtonInactive={inactivePrevButton}
+                  isForwButtonInactive={inactiveForwButton}
                 >
                   {value}
                 </PaginationItem>

package/src/components/ItaliaTheme/Pagination/PaginationItem.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import cx from 'classnames';
 import _ from 'lodash';
 import keyboardKey from 'keyboard-key';
 import PropTypes from 'prop-types';
@@ -50,6 +51,9 @@ class PaginationItem extends Component {
       'nextItem',
       'lastItem',
     ]),
+
+    isPrevButtonInactive: PropTypes.bool,
+    isForwButtonInactive: PropTypes.bool,
   };
 
   handleClick = (e) => {
@@ -63,7 +67,15 @@ class PaginationItem extends Component {
   };
 
   render() {
-    const { active, type, children, intl, ellipsisItem } = this.props;
+    const {
+      active,
+      type,
+      children,
+      intl,
+      ellipsisItem,
+      isPrevButtonInactive,
+      isForwButtonInactive,
+    } = this.props;
     const disabled = this.props.disabled || type === 'ellipsisItem';
     return (
       <PagerItem disabled={disabled}>
@@ -79,6 +91,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-left"
                 style={{ ariaHidden: true }}
                 color="primary"
+                className={cx({ disabled: isPrevButtonInactive })}
                 title={intl.formatMessage(messages.prevPage)}
               />
 
@@ -93,6 +106,7 @@ class PaginationItem extends Component {
                 icon="it-chevron-right"
                 style={{ ariaHidden: true }}
                 color="primary"
+                className={cx({ disabled: isForwButtonInactive })}
                 title={intl.formatMessage(messages.nextPage)}
               />
               <span className="visually-hidden">

package/src/components/ItaliaTheme/ScrollToTop/ScrollToTop.jsx

@@ -50,7 +50,6 @@ const ScrollToTop = () => {
             title={intl.formatMessage(messages.scrollToTop)}
             onClick={scrollToTop}
             aria-hidden="true"
-            tabIndex={-1}
           >
             <Icon icon="it-arrow-up" padding={false} size="sm" />
           </Button>

package/src/components/ItaliaTheme/Search/Search.jsx

@@ -24,7 +24,7 @@ import {
 import { Skiplink, SkiplinkItem } from 'design-react-kit';
 import { useLocation, useHistory } from 'react-router-dom';
 
-import { Helmet, flattenToAppURL } from '@plone/volto/helpers';
+import { Helmet, flattenToAppURL, BodyClass } from '@plone/volto/helpers';
 import { resetSubsite } from 'volto-subsites';
 
 import {
@@ -33,7 +33,6 @@ import {
   SearchTopics,
   SearchCTs,
   Icon,
-  RemoveBodyClass,
   SearchResultItem,
 } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import {
@@ -727,7 +726,7 @@ const Search = () => {
         </Container>
       </div>
       {/*force remove body class for subsite search pages*/}
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
     </>
   );
 };

package/src/components/ItaliaTheme/SkipLinks/SkipLinks.jsx

@@ -15,6 +15,10 @@ const messages = defineMessages({
     id: 'skiplink-footer',
     defaultMessage: 'Skip to footer',
   },
+  skiplinks_description: {
+    id: 'skiplinks-description',
+    defaultMessage: 'Skiplinks',
+  },
 });
 
 const SkipLinks = () => {
@@ -31,17 +35,23 @@ const SkipLinks = () => {
   }, []);
 
   return (
-    <Skiplink tag="div">
-      <SkiplinkItem href="#view" tag="a">
-        {intl.formatMessage(messages.mainView)}
-      </SkiplinkItem>
-      <SkiplinkItem href="#navigation" tag="a">
-        {intl.formatMessage(messages.navigation)}
-      </SkiplinkItem>
-      <SkiplinkItem href="#footer" tag="a">
-        {intl.formatMessage(messages.footer)}
-      </SkiplinkItem>
-    </Skiplink>
+    <div className="public-ui">
+      <Skiplink
+        tag="div"
+        role="complementary"
+        aria-label={intl.formatMessage(messages.skiplinks_description)}
+      >
+        <SkiplinkItem href="#view" tag="a">
+          {intl.formatMessage(messages.mainView)}
+        </SkiplinkItem>
+        <SkiplinkItem href="#navigation" tag="a">
+          {intl.formatMessage(messages.navigation)}
+        </SkiplinkItem>
+        <SkiplinkItem href="#footer" tag="a">
+          {intl.formatMessage(messages.footer)}
+        </SkiplinkItem>
+      </Skiplink>
+    </div>
   );
 };
 

package/src/components/ItaliaTheme/Slider/NextArrow.jsx

@@ -25,7 +25,7 @@ export default function NextArrow(props) {
       id={id}
     >
       <Icon icon="chevron-right" key="chevron-right" title={_title} />
-      <span class="visually-hidden">{_title}</span>
+      <span className="visually-hidden">{_title}</span>
     </button>
   );
 }

package/src/components/ItaliaTheme/Slider/PrevArrow.jsx

@@ -27,7 +27,7 @@ export default function PrevArrow(props) {
       onKeyDown={onKeyDown}
     >
       <Icon icon="chevron-left" key="chevron-left-prev" title={_title} />
-      <span class="visually-hidden">{_title}</span>
+      <span className="visually-hidden">{_title}</span>
     </button>
   );
 }

package/src/components/ItaliaTheme/Slider/SingleSlideWrapper.jsx

@@ -12,6 +12,7 @@ const SingleSlideWrapper = (props) => {
   const wrapperKey = key ?? 'slide-wrapper-' + index;
 
   return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <div
       className={`it-single-slide-wrapper ${className ?? ''}`}
       key={wrapperKey}
@@ -26,9 +27,11 @@ const SingleSlideWrapper = (props) => {
       }
       onKeyDown={onKeyDown}
       onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
+        //commentato perchè i link esterni non si aprivano
+        //e.preventDefault();
+        //e.stopPropagation();
       }}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={0}
     >
       {children}

package/src/components/ItaliaTheme/Unauthorized/Unauthorized.jsx

@@ -13,10 +13,7 @@ import { BodyClass } from '@plone/volto/helpers';
 import { useLocation } from 'react-router-dom';
 import { getBaseUrl } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
-import {
-  LoginAgidButtons,
-  RemoveBodyClass,
-} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { LoginAgidButtons } from 'design-comuni-plone-theme/components/ItaliaTheme';
 
 /**
  * unauthorized function.
@@ -58,7 +55,7 @@ const Unauthorized = (props) => {
   return (
     <div id="unauthorized-agid" className="view-wrapper">
       <BodyClass className="public-ui" />
-      <RemoveBodyClass className="cms-ui" />
+      <BodyClass className="cms-ui" remove={true} />
 
       <Container className="view-wrapper py-5">
         {spidLoginUrl || spidLogin ? (

package/src/components/ItaliaTheme/View/BandoView/BandoApprofondimenti.jsx

@@ -33,7 +33,7 @@ const BandoApprofondimenti = ({ content }) => {
           item={item} //viene utilizzato nelle customizzazioni per ottenere altre proprietà
         />
       );
-    } else if (item.type === 'Link') {
+    } else if (item.type === 'Collegamento') {
       return (
         <Card
           className="card card-teaser shadow p-4 mt-3 rounded attachment"

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

@@ -5,6 +5,7 @@
 
 import React, { createRef } from 'react';
 import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
 
 import {
   PageHeader,
@@ -25,6 +26,17 @@ import {
   useSideMenu,
 } from 'design-comuni-plone-theme/components/ItaliaTheme/View';
 
+const messages = defineMessages({
+  sideMenuIndex: {
+    id: 'sideMenuIndex',
+    defaultMessage: 'Indice della pagina',
+  },
+  bandoContent: {
+    id: 'bandoContent',
+    defaultMessage: 'Contenuto del Bando',
+  },
+});
+
 export const BandoViewSectionsOrder = [
   { /* Testo */ component: BandoText },
   /* Responsabili */
@@ -46,6 +58,7 @@ export const BandoViewSectionsOrder = [
  */
 const BandoView = ({ content, location }) => {
   let documentBody = createRef();
+  const intl = useIntl();
   const { sideMenuElements, SideMenu } = useSideMenu(content, documentBody);
 
   return (
@@ -61,7 +74,10 @@ const BandoView = ({ content, location }) => {
           showbandostate={true}
         />
         <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} />
             )}
@@ -70,6 +86,8 @@ const BandoView = ({ 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.bandoContent)}
           >
             {/* SEZIONI */}
             <ContentTypeViewSections

package/src/components/ItaliaTheme/View/Commons/Actions.jsx

@@ -10,7 +10,7 @@ import {
   Button,
 } from 'design-react-kit';
 import { toPublicURL } from '@plone/volto/helpers';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 /**
  * Actions view component class.
@@ -98,7 +98,7 @@ const Actions = (props) => {
         <LinkList>
           {socials.map((item, i) => {
             const commonButtonProps = {
-              icon: false,
+              icon: undefined,
               title: item.title,
               alt: item.title,
               'aria-label': item.title,

package/src/components/ItaliaTheme/View/Commons/Argument/ArgumentIcon.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 /**
  * Dates view component class.

package/src/components/ItaliaTheme/View/Commons/Attachment.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody, CardTitle } from 'design-react-kit';
 import { UniversalLink } from '@plone/volto/components';
-import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import Icon from 'design-comuni-plone-theme/components/ItaliaTheme/Icons/Icon';
 
 const messages = defineMessages({
   attachment: {