@plone/volto 17.0.0-alpha.20 → 17.0.0-alpha.21

package/src/components/theme/Image/Image.test.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Image from './Image';
+
+test('renders an image component with fetchpriority high', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component with lazy loading', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+      loading="lazy"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component with responsive class', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        image: {
+          download: 'http://localhost:3000/image/@@images/image/image.png',
+          width: 400,
+          height: 400,
+          scales: {
+            preview: {
+              download:
+                'http://localhost:3000/image/@@images/image/image-400.png',
+              width: 400,
+              height: 400,
+            },
+          },
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+      responsive={true}
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component from a catalog brain', () => {
+  const component = renderer.create(
+    <Image
+      item={{
+        '@id': 'http://localhost:3000/image',
+        image_field: 'image',
+        image_scales: {
+          image: [
+            {
+              download: '@@images/image/image.png',
+              width: 400,
+              height: 400,
+              scales: {
+                preview: {
+                  download: '@@images/image/image-400.png',
+                  width: 400,
+                  height: 400,
+                },
+              },
+            },
+          ],
+        },
+      }}
+      imageField="image"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});
+
+test('renders an image component from a string src', () => {
+  const component = renderer.create(
+    <Image
+      src="http://localhost:3000/image/@@images/image/image.png"
+      alt="alt text"
+    />,
+  );
+  const json = component.toJSON();
+  expect(json).toMatchSnapshot();
+});

package/src/components/theme/Logo/Logo.jsx

@@ -42,6 +42,8 @@ const Logo = () => {
         src={LogoImage}
         alt={intl.formatMessage(messages.plonesite)}
         title={intl.formatMessage(messages.plonesite)}
+        width="158.2"
+        height="40.7"
       />
     </UniversalLink>
   );

package/src/components/theme/PreviewImage/PreviewImage.jsx

@@ -1,34 +1,45 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-import { flattenToAppURL } from '@plone/volto/helpers';
 import config from '@plone/volto/registry';
 
 import DefaultImageSVG from '@plone/volto/components/manage/Blocks/Listing/default-image.svg';
 
 /**
  * Renders a preview image for a catalog brain result item.
- *
  */
-function PreviewImage(props) {
-  const { item, size = 'preview', alt, ...rest } = props;
-  const src = item.image_field
-    ? flattenToAppURL(`${item['@id']}/@@images/${item.image_field}/${size}`)
-    : config.getComponent({
-        name: 'DefaultImage',
-        dependencies: ['listing', 'summary'],
-      }).component || DefaultImageSVG;
+function PreviewImage({ item, alt, ...rest }) {
+  const Image = config.getComponent({ name: 'Image' }).component;
 
-  return <img src={src} alt={alt ?? item.title} {...rest} />;
+  if (item.image_field && item.image_scales?.[item.image_field]?.[0]) {
+    return (
+      <Image item={item} imageField={item.image_field} alt={alt} {...rest} />
+    );
+  } else {
+    return (
+      <img
+        src={
+          config.getComponent({
+            name: 'DefaultImage',
+            dependencies: ['listing', 'summary'],
+          }).component || DefaultImageSVG
+        }
+        alt={alt}
+        {...rest}
+        width="400"
+        height="300"
+      />
+    );
+  }
 }
 
 PreviewImage.propTypes = {
-  size: PropTypes.string,
   item: PropTypes.shape({
     '@id': PropTypes.string.isRequired,
-    image_field: PropTypes.string,
     title: PropTypes.string.isRequired,
+    image_field: PropTypes.string,
+    image_scales: PropTypes.object,
   }),
+  alt: PropTypes.string.isRequired,
 };
 
 export default PreviewImage;

package/src/components/theme/PreviewImage/PreviewImage.test.js

@@ -7,35 +7,56 @@ describe('PreviewImage', () => {
   it('renders a preview image', () => {
     const item = {
       image_field: 'image',
-      title: 'Item title',
-      '@id': 'http://localhost:3000/something',
-    };
-    const component = renderer.create(<PreviewImage item={item} />);
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-
-  it('renders a preview image with extra props', () => {
-    const item = {
-      image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} alt={item.title} />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
 
-  it('renders a preview image with custom size', () => {
+  it('renders a preview image with extra props', () => {
     const item = {
       image_field: 'image',
+      image_scales: {
+        image: [
+          {
+            download: '@@images/image',
+            width: 400,
+            height: 400,
+            scales: {
+              preview: {
+                download: '@@images/image-400.png',
+                width: 400,
+                height: 400,
+              },
+            },
+          },
+        ],
+      },
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} size="large" />,
+      <PreviewImage item={item} alt={item.title} className="extra" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
@@ -46,7 +67,9 @@ describe('PreviewImage', () => {
       title: 'Item title',
       '@id': 'http://localhost:3000/something',
     };
-    const component = renderer.create(<PreviewImage item={item} />);
+    const component = renderer.create(
+      <PreviewImage item={item} alt={item.title} />,
+    );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
@@ -57,7 +80,7 @@ describe('PreviewImage', () => {
       '@id': 'http://localhost:3000/something',
     };
     const component = renderer.create(
-      <PreviewImage item={item} className="extra" />,
+      <PreviewImage item={item} alt={item.title} className="extra" />,
     );
     const json = component.toJSON();
     expect(json).toMatchSnapshot();

package/src/components/theme/View/AlbumView.jsx

@@ -3,7 +3,7 @@
  * @module components/theme/View/AlbumView
  */
 
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Container as SemanticContainer,
@@ -11,7 +11,7 @@ import {
   Segment,
 } from 'semantic-ui-react';
 import { Button, Modal, Grid } from 'semantic-ui-react';
-import { Icon, UniversalLink, PreviewImage } from '@plone/volto/components';
+import { Icon, UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
 import openSVG from '@plone/volto/icons/open.svg';
@@ -24,7 +24,7 @@ import backSVG from '@plone/volto/icons/back.svg';
  * @param {Object} content Content object.
  * @returns {string} Markup of the component.
  */
-class AlbumView extends Component {
+class AlbumView extends React.Component {
   constructor(props) {
     super(props);
 
@@ -63,6 +63,8 @@ class AlbumView extends Component {
     const { content } = this.props;
     const Container =
       config.getComponent({ name: 'Container' }).component || SemanticContainer;
+    const PreviewImage = config.getComponent({ name: 'PreviewImage' })
+      .component;
 
     return (
       <Container className="view-wrapper">
@@ -88,17 +90,16 @@ class AlbumView extends Component {
                             <Segment className="imageborder">
                               <PreviewImage
                                 item={item}
-                                alt={
-                                  item.image_caption
-                                    ? item.image_caption
-                                    : item.title
-                                }
+                                alt={item.image_caption || item.title}
                                 onClick={() => {
                                   this.setState({
                                     openIndex: index,
                                   });
                                 }}
                                 className="ui middle aligned image"
+                                responsive={true}
+                                loading="lazy"
+                                title={item.title}
                               />
                             </Segment>
                           </Grid.Column>
@@ -141,20 +142,15 @@ class AlbumView extends Component {
                               <Modal.Content image>
                                 <PreviewImage
                                   item={item}
-                                  alt={
-                                    item.image_caption
-                                      ? item.image_caption
-                                      : item.title
-                                  }
+                                  alt={item.image_caption}
                                   onClick={() => {
                                     this.setState({
                                       openIndex: index,
                                     });
                                   }}
-                                  size="large"
                                   className="ui image"
+                                  responsive={true}
                                 />
-
                                 <Modal.Description>
                                   <p>{item.description}</p>
                                 </Modal.Description>

package/src/components/theme/View/EventView.jsx

@@ -6,34 +6,41 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
-import { Image, Grid } from 'semantic-ui-react';
+import { Grid } from 'semantic-ui-react';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import { EventDetails } from '@plone/volto/components';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import config from '@plone/volto/registry';
 
-const EventTextfieldView = ({ content }) => (
-  <React.Fragment>
-    {content.title && <h1 className="documentFirstHeading">{content.title}</h1>}
-    {content.description && (
-      <p className="documentDescription">{content.description}</p>
-    )}
-    {content.image && (
-      <Image
-        className="document-image"
-        src={content.image.scales.thumb.download}
-        floated="right"
-      />
-    )}
-    {content.text && (
-      <div
-        dangerouslySetInnerHTML={{
-          __html: flattenHTMLToAppURL(content.text.data),
-        }}
-      />
-    )}
-  </React.Fragment>
-);
+const EventTextfieldView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
+
+  return (
+    <React.Fragment>
+      {content.title && (
+        <h1 className="documentFirstHeading">{content.title}</h1>
+      )}
+      {content.description && (
+        <p className="documentDescription">{content.description}</p>
+      )}
+      {content.image && (
+        <Image
+          className="document-image ui right floated image"
+          item={content}
+          imageField="image"
+          alt=""
+        />
+      )}
+      {content.text && (
+        <div
+          dangerouslySetInnerHTML={{
+            __html: flattenHTMLToAppURL(content.text.data),
+          }}
+        />
+      )}
+    </React.Fragment>
+  );
+};
 
 /**
  * EventView view component class.

package/src/components/theme/View/ImageView.jsx

@@ -18,6 +18,7 @@ import config from '@plone/volto/registry';
  * @returns {string} Markup of the component.
  */
 const ImageView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
@@ -32,9 +33,11 @@ const ImageView = ({ content }) => {
       )}
       {content?.image?.download && (
         <a href={flattenToAppURL(content.image.download)}>
-          <img
+          <Image
+            item={content}
+            imageField="image"
             alt={content.title}
-            src={flattenToAppURL(content.image.scales.preview.download)}
+            responsive={true}
           />
           <figcaption>
             <FormattedMessage

package/src/components/theme/View/ImageView.test.jsx

@@ -23,9 +23,13 @@ test('renders an image view component', () => {
           image: {
             size: 123123,
             download: 'file:///preview.jpg',
+            width: 400,
+            height: 400,
             scales: {
               preview: {
                 download: 'file:///preview.jpg',
+                width: 400,
+                height: 400,
               },
             },
           },

package/src/components/theme/View/ListingView.jsx

@@ -6,7 +6,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Segment, Container as SemanticContainer } from 'semantic-ui-react';
-import { UniversalLink, PreviewImage } from '@plone/volto/components';
+import { UniversalLink } from '@plone/volto/components';
 import config from '@plone/volto/registry';
 
 /**
@@ -18,6 +18,7 @@ import config from '@plone/volto/registry';
 const ListingView = ({ content }) => {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
 
   return (
     <Container id="page-home">
@@ -35,9 +36,10 @@ const ListingView = ({ content }) => {
             {item.image_field && (
               <PreviewImage
                 item={item}
-                size="thumb"
-                alt={item.image_caption ? item.image_caption : item.title}
+                alt={item.image_caption}
                 className="ui image"
+                responsive={true}
+                loading="lazy"
               />
             )}
           </Segment>

package/src/components/theme/View/NewsItemView.jsx

@@ -5,12 +5,8 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container as SemanticContainer, Image } from 'semantic-ui-react';
-import {
-  hasBlocksData,
-  flattenToAppURL,
-  flattenHTMLToAppURL,
-} from '@plone/volto/helpers';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import { hasBlocksData, flattenHTMLToAppURL } from '@plone/volto/helpers';
 import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
 import config from '@plone/volto/registry';
 
@@ -21,6 +17,7 @@ import config from '@plone/volto/registry';
  * @returns {string} Markup of the component.
  */
 const NewsItemView = ({ content }) => {
+  const Image = config.getComponent({ name: 'Image' }).component;
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
@@ -41,15 +38,12 @@ const NewsItemView = ({ content }) => {
       )}
       {content.image && (
         <Image
-          className="documentImage"
+          className="documentImage ui right floated image"
           alt={content.title}
           title={content.title}
-          src={
-            content.image['content-type'] === 'image/svg+xml'
-              ? flattenToAppURL(content.image.download)
-              : flattenToAppURL(content.image.scales.mini.download)
-          }
-          floated="right"
+          item={content}
+          imageField="image"
+          responsive={true}
         />
       )}
       {content.text && (

package/src/components/theme/View/SummaryView.jsx

@@ -8,7 +8,6 @@ import PropTypes from 'prop-types';
 import { UniversalLink } from '@plone/volto/components';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import { FormattedMessage } from 'react-intl';
-import PreviewImage from '../PreviewImage/PreviewImage';
 import config from '@plone/volto/registry';
 
 /**
@@ -20,6 +19,7 @@ import config from '@plone/volto/registry';
 const SummaryView = ({ content }) => {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
+  const PreviewImage = config.getComponent({ name: 'PreviewImage' }).component;
 
   return (
     <Container className="view-wrapper summary-view">
@@ -41,9 +41,10 @@ const SummaryView = ({ content }) => {
               {item.image_field && (
                 <PreviewImage
                   item={item}
-                  alt={item.image_caption ? item.image_caption : item.title}
-                  size="thumb"
+                  alt={item.image_caption}
                   className="ui image floated right clear"
+                  responsive={true}
+                  loading="lazy"
                 />
               )}
               {item.description && <p>{item.description}</p>}

package/src/config/Blocks.jsx

@@ -75,6 +75,7 @@ import {
   DateRangeFacetFilterListEntry,
 } from '@plone/volto/components/manage/Blocks/Search/components';
 import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
+import { getImageBlockSizes } from '@plone/volto/components/manage/Blocks/Image/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
 import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
@@ -258,6 +259,7 @@ const blocksConfig = {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    getSizes: getImageBlockSizes,
   },
   leadimage: {
     id: 'leadimage',

package/src/config/Components.jsx

@@ -1,6 +1,7 @@
-import { App, PreviewImage } from '@plone/volto/components';
+import { App, PreviewImage, Image } from '@plone/volto/components';
 
 export const components = {
   PreviewImage: { component: PreviewImage },
   App: { component: App },
+  Image: { component: Image },
 };

package/src/helpers/Url/Url.js

@@ -3,7 +3,7 @@
  * @module helpers/Url
  */
 
-import { last, memoize } from 'lodash';
+import { last, memoize, isArray, isObject, isString } from 'lodash';
 import { urlRegex, telRegex, mailRegex } from './urlRegex';
 import prependHttp from 'prepend-http';
 import config from '@plone/volto/registry';
@@ -251,6 +251,27 @@ export function isUrl(url) {
   return urlRegex().test(url);
 }
 
+/**
+ * Get field url
+ * @method getFieldURL
+ * @param {object} data
+ * @returns {string | any} URL string value if field is of url type or any.
+ */
+export const getFieldURL = (data) => {
+  let url = data;
+  const _isObject = data && isObject(data) && !isArray(data);
+  if (_isObject && data['@type'] === 'URL') {
+    url = data['value'] ?? data['url'] ?? data['href'] ?? data;
+  } else if (_isObject) {
+    url = data['@id'] ?? data['url'] ?? data['href'] ?? data;
+  }
+  if (isArray(data)) {
+    url = data.map((item) => getFieldURL(item));
+  }
+  if (isString(url) && isInternalURL(url)) return flattenToAppURL(url);
+  return url;
+};
+
 /**
  * Normalize URL, adds protocol (if required eg. user has not entered the protocol)
  * @method normalizeUrl