design-comuni-plone-theme 12.0.0 → 12.1.1

package/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-03-11T16:06:49.599Z\n"
+"POT-Creation-Date: 2025-04-04T13:47:56.109Z\n"
 "Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
 "MIME-Version: 1.0\n"
@@ -179,6 +179,7 @@ msgid "Content"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 # defaultMessage: Contenuto in primo piano
 msgid "Content in evidence"
 msgstr ""
@@ -375,6 +376,7 @@ msgstr ""
 msgid "Link more"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Teaser/schema
 #: components/ItaliaTheme/manage/Widgets/LinkToWidget
 # defaultMessage: Link a
 msgid "Link to"
@@ -382,12 +384,14 @@ msgstr ""
 
 #: components/ItaliaTheme/Blocks/HeroImageLeft/HeroSidebar
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 # defaultMessage: Link ad altro
 msgid "LinkMore"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/HeroImageLeft/HeroSidebar
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 # defaultMessage: Testo per il link ad altro
 msgid "Linkto title"
 msgstr ""
@@ -525,6 +529,11 @@ msgstr ""
 msgid "Play slider"
 msgstr ""
 
+#: components/ItaliaTheme/Blocks/Teaser/ItaliaTeaserBody
+# defaultMessage: Please choose an existing content as source for this element
+msgid "Please choose an existing content as source for this element"
+msgstr ""
+
 #: components/ItaliaTheme/Pagination/PaginationItem
 # defaultMessage: Pagina precedente
 msgid "Previous page"
@@ -632,6 +641,11 @@ msgstr ""
 msgid "Table color inverted"
 msgstr ""
 
+#: overrideTranslations
+# defaultMessage: Teaser
+msgid "Teaser"
+msgstr ""
+
 #: components/ItaliaTheme/Blocks/Accordion/Block/EditBlock
 #: components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock
 #: components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock
@@ -1181,6 +1195,7 @@ msgstr ""
 
 #: components/ItaliaTheme/Blocks/ContactsBlock/Sidebar
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 # defaultMessage: Colore di sfondo
 msgid "bg_color"
 msgstr ""
@@ -1392,6 +1407,7 @@ msgstr ""
 
 #: components/ItaliaTheme/Blocks/ContactsBlock/Sidebar
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 # defaultMessage: Primario
 msgid "color_primary"
 msgstr ""
@@ -1402,6 +1418,7 @@ msgid "color_success"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 # defaultMessage: Trasparente
 msgid "color_transparent"
 msgstr ""
@@ -2814,6 +2831,7 @@ msgid "modulo_formati_alternativi"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 #: components/ItaliaTheme/Blocks/TextCard/CardWithImage/Sidebar
 #: config/Blocks/ListingOptions/cardWithImageTemplate
 # defaultMessage: undefined
@@ -3821,6 +3839,7 @@ msgid "share"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 # defaultMessage: Mostra la data
 msgid "show_date"
 msgstr ""
@@ -3892,6 +3911,7 @@ msgid "show_pointer_list"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Mostra la sezione
 msgid "show_section"
@@ -3909,6 +3929,7 @@ msgid "show_topics"
 msgstr ""
 
 #: components/ItaliaTheme/Blocks/HighlightedContent/Sidebar
+#: components/ItaliaTheme/Blocks/Teaser/schema
 #: config/Blocks/ListingOptions/utils
 # defaultMessage: Mostra il tipo
 msgid "show_type"

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "12.0.0",
+  "version": "12.1.1",
   "main": "src/index.js",
   "repository": {
     "type": "git",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2025-03-31'
+releaseDate: '2025-04-14'
 softwareType: standalone/web
-softwareVersion: 12.0.0
+softwareVersion: 12.1.1
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord

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

@@ -8,10 +8,14 @@ const messages = defineMessages({
   },
 });
 
-const TextFilter = ({ value, id, onChange, placeholder }) => {
+const TextFilter = ({ value, id, onChange, placeholder, blockID }) => {
   const intl = useIntl();
+
   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={
@@ -22,6 +26,7 @@ const TextFilter = ({ value, id, onChange, placeholder }) => {
           onChange(id, e.target.value ?? '');
         }}
         autocomplete="off"
+        id={`${blockID}-${id}`}
       />
     </div>
   );

package/src/components/ItaliaTheme/Blocks/Teaser/ItaliaTeaserBody.jsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Message } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
+import {
+  Row,
+  Col,
+  Chip,
+  Card,
+  CardBody,
+  CardText,
+  CardTitle,
+  CardReadMore,
+} from 'design-react-kit';
+import {
+  CardCategory,
+  getItemIcon,
+} from 'design-comuni-plone-theme/components/ItaliaTheme';
+import {
+  viewDate,
+  getComponentWithFallback,
+} from 'design-comuni-plone-theme/helpers';
+import { getCategory } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/Commons/utils';
+import { UniversalLink, ConditionalLink } from '@plone/volto/components';
+import cx from 'classnames';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+const ALIGNMENTS = {
+  left: 1,
+  right: 2,
+};
+
+const alignmentHelper = (align) => {
+  const alignment = ALIGNMENTS[align];
+  if (alignment === 1) {
+    return {
+      imageAlignment: { order: alignment, offset: 0, size: 6 },
+      contentAlignment: { order: 2, offset: 0, size: 6 },
+    };
+  } else if (alignment === 2) {
+    return {
+      imageAlignment: { order: alignment, offset: 1, size: 6 },
+      contentAlignment: { order: 1, offset: 0, size: 5 },
+    };
+  }
+};
+
+const ItaliaTeaserBody = (props) => {
+  const { className, data, isEditMode, style } = props;
+  const intl = useIntl();
+  const content = data.href?.[0];
+  const image = data.preview_image?.[0];
+  const Image = config.getComponent('Image').component;
+  const icon = getItemIcon(content);
+  const category = getCategory(
+    content,
+    data.show_type,
+    data.show_section,
+    props,
+  );
+  const BlockExtraTags = getComponentWithFallback({
+    name: 'BlockExtraTags',
+    dependencies: ['HighlightedContent', content?.['@type'] || ''],
+  }).component;
+
+  const { imageAlignment, contentAlignment } = alignmentHelper(
+    data.styles.align || 'right',
+  );
+  return (
+    <div
+      className={cx('block teaser highlitedContent', className, {
+        'public-ui': isEditMode && content,
+      })}
+      style={style}
+    >
+      {!content && isEditMode && (
+        <Message>
+          <div className="teaser-item placeholder">
+            <img src={imageBlockSVG} alt="" />
+            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+          </div>
+        </Message>
+      )}
+      {content && (
+        <div className={`${data.bg_color ? 'bg-' + data.bg_color : ''} `}>
+          <Row>
+            {(content.hasPreviewImage || content.image_field || image) && (
+              <Col
+                lg={{
+                  ...imageAlignment,
+                }}
+              >
+                <Image
+                  item={image || content}
+                  imageField={image ? image.image_field : content.image_field}
+                  className={cx('item-image', {
+                    'natural-image-size': data.natural_image_size,
+                  })}
+                  alt=""
+                  loading="lazy"
+                  responsive={true}
+                  role={null}
+                  sizes="(max-width:768px) 90vw, (max-width:1024px) 450px, 560px"
+                />
+              </Col>
+            )}
+            <Col
+              lg={{
+                ...contentAlignment,
+              }}
+            >
+              <Card>
+                <CardBody className="pb-2">
+                  <CardCategory
+                    date={
+                      content.effective &&
+                      data.show_date !== false &&
+                      viewDate(intl.locale, content.effective, 'll')
+                    }
+                    iconName={icon}
+                  >
+                    {category}
+                  </CardCategory>
+                  <CardTitle tag="h2">
+                    <ConditionalLink
+                      condition={!!content['@id']}
+                      item={content}
+                    >
+                      {data.title || content.title}
+                    </ConditionalLink>
+                  </CardTitle>
+                  {!data.hide_description && (
+                    <CardText>{content.description}</CardText>
+                  )}
+                  <BlockExtraTags {...props} item={content} itemIndex={0} />
+                  {content.tassonomia_argomenti &&
+                    content.tassonomia_argomenti.length > 0 && (
+                      <>
+                        {content.tassonomia_argomenti.map((argomento, idx) => (
+                          <Chip
+                            simple
+                            color="primary"
+                            key={`${idx} ${argomento['@id']}`}
+                            className="me-2"
+                          >
+                            <ConditionalLink
+                              condition={!!argomento['@id']}
+                              item={argomento}
+                              className="chip-label text-decoration-none"
+                            >
+                              {argomento.title}
+                            </ConditionalLink>
+                          </Chip>
+                        ))}
+                      </>
+                    )}
+                  {data.moreHref?.length > 0 && (
+                    <CardReadMore
+                      tag={UniversalLink}
+                      iconName="it-arrow-right"
+                      text={data.moreTitle || 'Vedi tutte le notizie'}
+                      href={flattenToAppURL(data.moreHref[0]?.['@id'])}
+                    />
+                  )}
+                </CardBody>
+              </Card>
+            </Col>
+          </Row>
+        </div>
+      )}
+    </div>
+  );
+};
+
+ItaliaTeaserBody.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  isEditMode: PropTypes.bool,
+};
+
+export default ItaliaTeaserBody;

package/src/components/ItaliaTheme/Blocks/Teaser/schema.js

@@ -0,0 +1,179 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  News: {
+    id: 'Content in evidence',
+    defaultMessage: 'Contenuto in primo piano',
+  },
+  LinkToTitle: {
+    id: 'Linkto title',
+    defaultMessage: 'Testo per il link ad altro',
+  },
+  LinkMore: {
+    id: 'LinkMore',
+    defaultMessage: 'Link ad altro',
+  },
+  natural_image_size: {
+    id: 'natural_image_size',
+    defineMessages: "Non alterare le dimensioni naturali dell'immagine",
+  },
+  show_section: {
+    id: 'show_section',
+    defaultMessage: 'Mostra la sezione',
+  },
+  show_type: {
+    id: 'show_type',
+    defaultMessage: 'Mostra il tipo',
+  },
+  show_date: {
+    id: 'show_date',
+    defaultMessage: 'Mostra la data',
+  },
+  bg_color: {
+    id: 'bg_color',
+    defaultMessage: 'Colore di sfondo',
+  },
+  color_primary: {
+    id: 'color_primary',
+    defaultMessage: 'Primario',
+  },
+  color_secondary: {
+    id: 'color_primary',
+    defaultMessage: 'Primario',
+  },
+  color_transparent: {
+    id: 'color_transparent',
+    defaultMessage: 'Trasparente',
+  },
+  LinkTo: {
+    id: 'Link to',
+    defaultMessage: 'Link a',
+  },
+});
+
+// Extra metadata for our Teaser block implementation
+const ITALIA_TEASER_QUERY_METADATA = [
+  'effective',
+  'parent',
+  'design_italia_meta_type',
+  'icona',
+  'tassonomia_argomenti',
+];
+
+const italiaTeaserSchemaEnhancer = ({ schema, FormData, intl }) => {
+  schema.fieldsets = schema.fieldsets.reduce((acc, curr) => {
+    if (curr.id === 'styling')
+      return [
+        ...acc,
+        {
+          ...curr,
+          fields: [
+            ...curr.fields,
+            'natural_image_size',
+            'bg_color',
+            'show_type',
+            'show_section',
+            'show_date',
+          ],
+        },
+      ];
+    else if (curr.id === 'default')
+      return [
+        ...acc,
+        {
+          ...curr,
+          fields: curr.fields.filter(
+            (f) => !['head_title', 'description'].includes(f),
+          ),
+        },
+      ];
+    return [...acc, curr];
+  }, []);
+  schema.fieldsets.push({
+    id: 'linkMore',
+    title: intl.formatMessage(messages.LinkMore),
+    fields: ['moreTitle', 'moreHref'],
+  });
+
+  schema.properties = {
+    ...schema.properties,
+    href: {
+      ...schema.properties.href,
+      selectedItemAttrs: [
+        // Teaser defaults
+        'Title',
+        'head_title',
+        'Description',
+        'hasPreviewImage',
+        'image_field',
+        'image_scales',
+        '@type',
+        ...ITALIA_TEASER_QUERY_METADATA,
+      ],
+      allowExternals: false,
+      widgetOptions: {
+        pattern_options: { maximumSelectionSize: 1 },
+      },
+    },
+    natural_image_size: {
+      id: 'natural_image_size',
+      title: intl.formatMessage(messages.natural_image_size),
+      type: 'boolean',
+    },
+    bg_color: {
+      title: intl.formatMessage(messages.bg_color),
+      widget: 'color_list',
+      id: 'bg_color',
+      colors: [
+        {
+          name: 'transparent',
+          label: intl.formatMessage(messages.color_transparent),
+        },
+        { name: 'primary', label: intl.formatMessage(messages.color_primary) },
+        {
+          name: 'secondary',
+          label: intl.formatMessage(messages.color_secondary),
+        },
+      ],
+    },
+    show_type: {
+      id: 'show_type',
+      title: intl.formatMessage(messages.show_type),
+      type: 'boolean',
+    },
+    show_section: {
+      id: 'show_section',
+      title: intl.formatMessage(messages.show_section),
+      type: 'boolean',
+    },
+    show_date: {
+      id: 'show_date',
+      title: intl.formatMessage(messages.show_date),
+      type: 'boolean',
+    },
+    moreTitle: {
+      id: 'moreTitle',
+      title: intl.formatMessage(messages.LinkToTitle),
+    },
+    moreHref: {
+      id: 'moreHref',
+      title: intl.formatMessage(messages.LinkTo),
+      widget: 'object_browser',
+      mode: 'link',
+      widgetOptions: {
+        pattern_options: { maximumSelectionSize: 1 },
+      },
+      selectedItemAttrs: [],
+      allowExternals: true,
+    },
+  };
+  schema.properties.styles.schema.properties.align = {
+    ...schema.properties.styles.schema.properties.align,
+    actions: ['left', 'right'],
+    default: 'right',
+  };
+  delete schema.properties.head_title;
+  return schema;
+};
+
+export { italiaTeaserSchemaEnhancer };

package/src/components/ItaliaTheme/Blocks/UOSearch/Body.jsx

@@ -162,6 +162,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 <>
                   {React.createElement(filterOne.widget.component, {
                     ...filterOne.widget?.props,
+                    blockID: id,
                     id: 'filterOne',
                     onChange: (filter, value) => {
                       dispatchFilter({
@@ -175,6 +176,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterTwo &&
                 React.createElement(filterTwo.widget?.component, {
                   ...filterTwo.widget?.props,
+                  blockID: id,
                   id: 'filterTwo',
                   onChange: (filter, value) =>
                     dispatchFilter({
@@ -185,6 +187,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
               {filterThree &&
                 React.createElement(filterThree.widget?.component, {
                   ...filterThree.widget?.props,
+                  blockID: id,
                   id: 'filterThree',
                   onChange: (filter, value) =>
                     dispatchFilter({

package/src/components/ItaliaTheme/BrandText/BrandText.jsx

@@ -4,7 +4,7 @@ import { useIntl } from 'react-intl';
 import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
-const BrandText = ({ mobile = false }) => {
+const BrandText = ({ mobile = false, subsite }) => {
   const intl = useIntl();
   let title = SiteProperty({
     property: 'site_title',
@@ -27,8 +27,16 @@ const BrandText = ({ mobile = false }) => {
     </React.Fragment>
   ));
 
+  const hide_title = SiteProperty({
+    property: 'hide_title',
+    defaultValue: false,
+    getValue: true,
+    getParent: false,
+  });
+  const visuallyHidden = !subsite && hide_title;
+
   return (
-    <div className="it-brand-text">
+    <div className={cx('it-brand-text', { 'visually-hidden': visuallyHidden })}>
       {title && <div className="it-brand-title">{title}</div>}
       {description && (
         <div

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/Search/Search.jsx

@@ -158,7 +158,7 @@ const messages = defineMessages({
 
 const searchOrderDict = {
   relevance: {},
-  date: {
+  Date: {
     sort_on: 'Date',
   },
   sortable_title: {
@@ -188,7 +188,9 @@ const Search = () => {
 
   const [customPath] = useState(qs.parse(location.search)?.custom_path ?? '');
 
-  const [sortOn, setSortOn] = useState('relevance');
+  const [sortOn, setSortOn] = useState(
+    qs.parse(location.search)?.sort_on ?? 'relevance',
+  );
   const [currentPage, setCurrentPage] = useState(
     qs.parse(location.search)?.b_start
       ? qs.parse(location.search).b_start / config.settings.defaultPageSize + 1
@@ -215,7 +217,7 @@ const Search = () => {
       label: intl.formatMessage(messages.sort_on_relevance),
     },
     {
-      value: 'date',
+      value: 'Date',
       label: intl.formatMessage(messages.sort_on_date),
     },
     {

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

@@ -128,5 +128,15 @@ describe('FormValidation', () => {
         }),
       ).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/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;