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

package/src/helpers/Url/Url.test.js

@@ -10,6 +10,7 @@ import {
   isCmsUi,
   isInternalURL,
   isUrl,
+  getFieldURL,
   normalizeUrl,
   removeProtocol,
   addAppURL,
@@ -260,6 +261,46 @@ describe('Url', () => {
       expect(isUrl(href)).toBe(false);
     });
   });
+  describe('getFieldURL', () => {
+    it('returns app URL if the field is a string', () => {
+      const field = `${settings.apiPath}/foo/bar`;
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with "@id"', () => {
+      const field = { '@id': '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with type URL', () => {
+      const field = { '@type': 'URL', value: '/foo/bar' };
+      expect(getFieldURL(field)).toBe('/foo/bar');
+    });
+    it('returns app URL if the field is an object with url or href properties', () => {
+      const fieldUrl = { url: '/foo/bar' };
+      const fieldHref = { href: '/foo/bar' };
+      expect(getFieldURL(fieldUrl)).toBe('/foo/bar');
+      expect(getFieldURL(fieldHref)).toBe('/foo/bar');
+    });
+    it('returns array of app URL if the field is an array of strings', () => {
+      const field = [
+        `${settings.apiPath}/foo/bar/1`,
+        `${settings.apiPath}/foo/bar/2`,
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+    it('returns array of app URL if the field is an array of objects', () => {
+      const field = [
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/1`,
+        },
+        {
+          '@type': 'URL',
+          value: `${settings.apiPath}/foo/bar/2`,
+        },
+      ];
+      expect(getFieldURL(field)).toStrictEqual(['/foo/bar/1', '/foo/bar/2']);
+    });
+  });
   describe('normalizeUrl', () => {
     it('normalizeUrl test', () => {
       const href = `www.example.com`;

package/test-setup-config.js

@@ -173,7 +173,15 @@ config.set('widgets', {
   default: BaseWidget('default'),
 });
 
-config.set('components', {});
+config.set('components', {
+  PreviewImage: {
+    component: (props) => <img alt="PreviewImage component mock" {...props} />,
+  },
+  Image: {
+    // eslint-disable-next-line jsx-a11y/img-redundant-alt
+    component: (props) => <img alt="Image component mock" {...props} />,
+  },
+});
 config.set('experimental', {
   addBlockButton: {
     enabled: false,

package/theme/themes/pastanaga/extras/blocks.less

@@ -811,6 +811,7 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 .listing-item a {
   display: flex;
   width: 100%;
+  align-items: flex-start;
 
   @media only screen and (max-width: (@largestMobileScreen)) {
     flex-direction: column;
@@ -822,6 +823,7 @@ body.has-toolbar.has-sidebar-collapsed .ui.wrapper > .ui.inner.block.full {
 
   img {
     width: 15%;
+    height: auto;
     margin-right: 20px;
 
     @media only screen and (max-width: (@largestMobileScreen)) {

package/theme/themes/pastanaga/extras/main.less

@@ -645,6 +645,11 @@ body.has-toolbar-collapsed .mobile-menu {
   transition: transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91);
 }
 
+img.responsive {
+  max-width: 100%;
+  height: auto;
+}
+
 // Deprecated as per https://github.com/plone/volto/issues/1265
 // @import 'utils';
 @import (multiple) '../extras/fonts';

package/src/components/manage/Blocks/Teaser/utils.js

@@ -1,44 +0,0 @@
-import { isInternalURL } from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
-
-export function getTeaserImageURL({ href, image, align }) {
-  // The default scale used in teasers is the 'teaser' scale
-  // except if it's customized otherwise in the teaser block settings
-  // or if the teaser is center (top)
-  const imageScale =
-    align === 'center'
-      ? 'great'
-      : config.blocks.blocksConfig['teaser'].imageScale || 'teaser';
-
-  if (image) {
-    // If the image is overriden locally in the teaser block
-    if (isInternalURL(image['@id'])) {
-      // If it's internal check if image_scales catalog info is present
-      if (image?.image_scales?.[image?.image_field]) {
-        return `${image['@id']}/${
-          image.image_scales[image.image_field]?.[0].scales[imageScale]
-            ?.download || image.image_scales[image.image_field]?.[0].download
-        }`;
-      } else {
-        // If not, fallback to content scale URL shortcut
-        return `${image['@id']}/@@images/${image.image_field}/${imageScale}`;
-      }
-    } else {
-      // If it's external, return the plain URL
-      return image['@id'];
-    }
-  } else {
-    // If the image is not overriden
-    if (href?.image_scales?.[href?.image_field]) {
-      return `${href['@id']}/${
-        href.image_scales[href.image_field]?.[0].scales[imageScale]?.download ||
-        href.image_scales[href.image_field]?.[0].download
-      }`;
-    } else {
-      // If not, fallback to content scale URL shortcut
-      return `${href['@id']}/@@images/${
-        href.image_field || 'preview_image'
-      }/${imageScale}`;
-    }
-  }
-}

package/src/components/manage/Blocks/Teaser/utils.test.jsx

@@ -1,229 +0,0 @@
-import { getTeaserImageURL } from './utils';
-import config from '@plone/volto/registry';
-
-beforeAll(() => {
-  config.blocks.blocksConfig.teaser = {};
-  config.blocks.blocksConfig.teaser.imageScale = 'teaser';
-});
-
-describe('getTeaserImageURL tests', () => {
-  it('getTeaserImageURL internal URL - no overriden', () => {
-    const align = 'left';
-    const href = {
-      '@id': '/document',
-      image_field: 'preview_image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {
-              teaser: {
-                download: '@@images/teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    const image = undefined;
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      '/document/@@images/teaser_scale_URL',
-    );
-  });
-
-  it('getTeaserImageURL internal URL - no overriden - no scale', () => {
-    const align = 'left';
-    const href = {
-      '@id': '/document',
-      image_field: 'preview_image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {},
-          },
-        ],
-      },
-    };
-    const image = undefined;
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      '/document/@@images/default_original_URL',
-    );
-  });
-
-  it('getTeaserImageURL internal URL - no overriden - no catalog image info', () => {
-    const align = 'left';
-    const href = {
-      '@id': '/document',
-      image_field: 'image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {},
-          },
-        ],
-      },
-    };
-    const image = undefined;
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      '/document/@@images/image/teaser',
-    );
-  });
-
-  it('getTeaserImageURL internal URL - no overriden - center', () => {
-    const align = 'center';
-    const href = {
-      '@id': '/document',
-      image_field: 'preview_image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {
-              great: {
-                download: '@@images/great_scale_URL',
-              },
-              teaser: {
-                download: '@@images/teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    const image = undefined;
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      '/document/@@images/great_scale_URL',
-    );
-  });
-
-  it('getTeaserImageURL internal URL - no overriden - center - no great scale', () => {
-    const align = 'center';
-    const href = {
-      '@id': '/document',
-      image_field: 'preview_image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {
-              teaser: {
-                download: '@@images/teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    const image = undefined;
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      '/document/@@images/default_original_URL',
-    );
-  });
-
-  it('getTeaserImageURL internal URL - image overriden', () => {
-    const align = 'left';
-    const href = {
-      '@id': '/document',
-      image_field: 'preview_image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {
-              teaser: {
-                download: '@@images/teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    const image = {
-      '@id': '/document/image',
-      image_field: 'image',
-      image_scales: {
-        image: [
-          {
-            download: '@@images/overriden_image_default_original_URL',
-            scales: {
-              teaser: {
-                download: '@@images/overriden_image_teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      '/document/image/@@images/overriden_image_teaser_scale_URL',
-    );
-  });
-
-  it('getTeaserImageURL internal URL - image overriden - center - no great scale', () => {
-    const align = 'center';
-    const href = {
-      '@id': '/document',
-      image_field: 'preview_image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {
-              teaser: {
-                download: '@@images/teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    const image = {
-      '@id': '/document/image',
-      image_field: 'image',
-      image_scales: {
-        image: [
-          {
-            download: '@@images/overriden_image_default_original_URL',
-            scales: {
-              teaser: {
-                download: '@@images/overriden_image_teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      '/document/image/@@images/overriden_image_default_original_URL',
-    );
-  });
-
-  it('getTeaserImageURL internal URL - image overriden - external', () => {
-    const align = 'left';
-    const href = {
-      '@id': '/document',
-      image_field: 'preview_image',
-      image_scales: {
-        preview_image: [
-          {
-            download: '@@images/default_original_URL',
-            scales: {
-              teaser: {
-                download: '@@images/teaser_scale_URL',
-              },
-            },
-          },
-        ],
-      },
-    };
-    const image = {
-      '@id': 'https://plone.org/document/image.png',
-    };
-
-    expect(getTeaserImageURL({ href, image, align })).toBe(
-      'https://plone.org/document/image.png',
-    );
-  });
-});