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

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/TextCard/CardWithImage/Block.jsx

@@ -65,7 +65,7 @@ const Block = (props) => {
             data={data}
             block={block}
             fieldName="image_card_title"
-            selected={selectedField === 'image_card_title'}
+            selected={selected && selectedField === 'image_card_title'}
             onChangeBlock={(block, data) => onChange(data)}
             placeholder={intl.formatMessage(messages.image_card_title)}
             setSelected={setSelectedField}
@@ -123,7 +123,9 @@ const Block = (props) => {
                       data={data}
                       fieldName="image_card_content"
                       block={block}
-                      selected={selectedField === 'image_card_content'}
+                      selected={
+                        selected && selectedField === 'image_card_content'
+                      }
                       onChangeBlock={(block, data) => onChange(data)}
                       placeholder={intl.formatMessage(
                         messages.image_card_content,

package/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx

@@ -62,7 +62,7 @@ const Edit = (props) => {
                   data={data}
                   block={block}
                   fieldName="simple_card_title"
-                  selected={selectedField === 'simple_card_title'}
+                  selected={selected && selectedField === 'simple_card_title'}
                   onChangeBlock={onChangeBlock}
                   onSelectBlock={onSelectBlock}
                   placeholder={intl.formatMessage(messages.simple_card_title)}
@@ -79,7 +79,7 @@ const Edit = (props) => {
                   showToolbar={true}
                   data={data}
                   fieldName="simple_card_content"
-                  selected={selectedField === 'simple_card_content'}
+                  selected={selected && selectedField === 'simple_card_content'}
                   setSelected={setSelectedField}
                   block={block}
                   onChangeBlock={onChangeBlock}

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

@@ -88,7 +88,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
       getQueryStringResults(
         subsite ? flattenToAppURL(subsite['@id']) : '',
         {
-          fullobjects: 1,
+          metadata_fields: '_all',
           query: query,
           b_size: b_size,
         },
@@ -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({
@@ -198,6 +201,7 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
                 icon={false}
                 tag="button"
                 className="my-2 my-lg-1"
+                type="submit"
               >
                 {intl.formatMessage(messages.find)}
               </Button>
@@ -210,7 +214,11 @@ const Body = ({ data, id, inEditMode, path, onChangeBlock }) => {
         items?.length > 0 ? (
           <div className="mt-4" ref={resultsRef} aria-live="polite">
             <div className="block listing">
-              <CardWithImageTemplate items={items} full_width={false} />
+              <CardWithImageTemplate
+                items={items}
+                full_width={false}
+                always_show_image={data.always_show_image}
+              />
             </div>
             {querystringResults.total > b_size && (
               <Pagination

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

@@ -6,6 +6,7 @@ import {
   SelectWidget,
   Icon,
   ObjectBrowserWidget,
+  CheckboxWidget,
 } from '@plone/volto/components';
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
@@ -72,6 +73,10 @@ const messages = defineMessages({
     id: 'searchBlock_date_filter',
     defaultMessage: 'Filtro per date',
   },
+  always_show_image: {
+    id: 'searchBlock_always_show_image',
+    defaultMessage: "Mostra l'immagine per tutti gli elementi",
+  },
 });
 
 const Sidebar = (props) => {
@@ -153,6 +158,17 @@ const Sidebar = (props) => {
               });
             }}
           />
+          <CheckboxWidget
+            id="always_show_image"
+            title={props.intl.formatMessage(messages.always_show_image)}
+            value={props.data.always_show_image}
+            onChange={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
         </div>
       </Segment>
       <Accordion fluid styled className="form">

package/src/components/ItaliaTheme/Blocks/__tests__/Accordion.test.jsx

@@ -51,7 +51,4 @@ test('View renders all fields', async () => {
 
   expect(screen.getByText(/Accordion 1/i)).toBeInTheDocument();
   expect(screen.getByText(/Is this just fantasy/i)).toBeInTheDocument();
-  expect(
-    screen.getByRole('link', { name: /Caught in a landside/i }),
-  ).toBeInTheDocument();
 });

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

@@ -1,18 +1,50 @@
 import React from 'react';
 import cx from 'classnames';
 import { useIntl } from 'react-intl';
+import { SiteProperty } from 'volto-site-settings';
 import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
 const BrandText = ({ mobile = false, subsite }) => {
   const intl = useIntl();
+  let title = SiteProperty({
+    property: 'site_title',
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    getValue: true,
+    getParent: false,
+  });
+
+  const description = SiteProperty({
+    property: 'site_subtitle',
+    defaultValue: getSiteProperty('siteSubtitle', intl.locale),
+    getValue: true,
+    getParent: false,
+  });
+  const titleSplit = title?.split('\n') ?? null;
+  title = titleSplit?.map((t, i) => (
+    <React.Fragment key={i}>
+      {t}
+      {i < titleSplit.length - 1 && <br />}
+    </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">
-      <p className="no_toc h2">
-        {subsite?.title || getSiteProperty('siteTitle', intl.locale)}
-      </p>
-      <p className={cx('no_toc h3', { 'd-none d-md-block': !mobile })}>
-        {subsite?.description || getSiteProperty('siteSubtitle', intl.locale)}
-      </p>
+    <div className={cx('it-brand-text', { 'visually-hidden': visuallyHidden })}>
+      {title && <div className="it-brand-title">{title}</div>}
+      {description && (
+        <div
+          className={cx('it-brand-tagline', { 'd-none d-md-block': !mobile })}
+        >
+          {description}
+        </div>
+      )}
     </div>
   );
 };

package/src/components/ItaliaTheme/BrandTextFooter/BrandTextFooter.jsx

@@ -1,8 +1,37 @@
 import React from 'react';
-import { BrandText } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useIntl } from 'react-intl';
+import { SiteProperty } from 'volto-site-settings';
+import { getSiteProperty } from 'design-comuni-plone-theme/helpers';
 
 const BrandTextFooter = () => {
-  return <BrandText />;
+  const intl = useIntl();
+  let title = SiteProperty({
+    property: 'site_title',
+    defaultValue: getSiteProperty('siteTitle', intl.locale),
+    getValue: true,
+    getParent: true,
+  });
+
+  const description = SiteProperty({
+    property: 'site_subtitle',
+    defaultValue: getSiteProperty('siteSubtitle', intl.locale),
+    getValue: true,
+    getParent: true,
+  });
+  const titleSplit = title?.split('\n') ?? null;
+  title = titleSplit?.map((t, i) => (
+    <React.Fragment key={i}>
+      {t}
+      {i < titleSplit.length - 1 && <br />}
+    </React.Fragment>
+  ));
+
+  return (
+    <div className="it-brand-text">
+      {title && <div className="h2">{title}</div>}
+      {description && <div className="h3">{description}</div>}
+    </div>
+  );
 };
 
 export default BrandTextFooter;

package/src/components/ItaliaTheme/Breadcrumbs/Breadcrumbs.jsx

@@ -12,11 +12,16 @@ import { matchPath } from 'react-router';
 import { useLocation } from 'react-router-dom';
 import { isEqual, isEmpty } from 'lodash';
 import { getBreadcrumbs } from '@plone/volto/actions';
-import { getBaseUrl, flattenToAppURL } from '@plone/volto/helpers';
+import {
+  getBaseUrl,
+  flattenToAppURL,
+  hasApiExpander,
+} from '@plone/volto/helpers';
 
 import { UniversalLink } from '@plone/volto/components';
 import { Row, Col, BreadcrumbItem } from 'design-react-kit';
 import GoogleBreadcrumbs from 'design-comuni-plone-theme/components/ItaliaTheme/Breadcrumbs/GoogleBreadcrumbs';
+import { useHomePath } from 'design-comuni-plone-theme/helpers';
 import config from '@plone/volto/registry';
 
 const messages = defineMessages({
@@ -73,13 +78,15 @@ const Breadcrumbs = ({ pathname }) => {
   /** fine della gestione delle rotte statiche */
 
   useEffect(() => {
-    let actualPathForBreadcrumbs = pathname;
-    const { path, buildFullNavTree } = getCurrentPathFromAddonRoutes();
-    if (buildFullNavTree) {
-      const replacedPath = path.replace('**/', '');
-      actualPathForBreadcrumbs = pathname.replace(replacedPath, '');
+    if (!hasApiExpander('breadcrumbs', getBaseUrl(pathname))) {
+      let actualPathForBreadcrumbs = pathname;
+      const { path, buildFullNavTree } = getCurrentPathFromAddonRoutes();
+      if (buildFullNavTree) {
+        const replacedPath = path.replace('**/', '');
+        actualPathForBreadcrumbs = pathname.replace(replacedPath, '');
+      }
+      dispatch(getBreadcrumbs(getBaseUrl(actualPathForBreadcrumbs)));
     }
-    dispatch(getBreadcrumbs(getBaseUrl(actualPathForBreadcrumbs)));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [pathname]);
 
@@ -92,6 +99,7 @@ const Breadcrumbs = ({ pathname }) => {
       items = [];
     }
   }
+  const homepath = useHomePath();
 
   return items?.length > 0 ? (
     <>
@@ -104,7 +112,7 @@ const Breadcrumbs = ({ pathname }) => {
           >
             <ol className="breadcrumb" data-element="breadcrumb">
               <BreadcrumbItem tag="li">
-                <UniversalLink href="/">
+                <UniversalLink href={homepath}>
                   {intl.formatMessage(messages.home)}
                 </UniversalLink>
                 <span className="separator">/</span>

package/src/components/ItaliaTheme/Cards/CardCategory.jsx

@@ -38,9 +38,8 @@ const CardCategory = (props) => {
   const categoryText = !href && children && (
     <span className="text">{children}</span>
   );
-  const categoryIcon = iconName && (
-    <Icon icon={iconName} title={intl.formatMessage(messages.categoryIcon)} />
-  );
+  const iconTitle = rest.title || intl.formatMessage(messages.categoryIcon);
+  const categoryIcon = iconName && <Icon icon={iconName} title={iconTitle} />;
 
   return (
     <div className={classes} {...rest}>