@plone/volto 17.0.1 → 17.1.1

package/src/components/theme/EventDetails/EventDetails.stories.jsx

@@ -0,0 +1,88 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import EventDetailsComponent from './EventDetails';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlEventDetailsComponent = injectIntl(EventDetailsComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlEventDetailsComponent
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          title: 'Hello World!',
+          description: 'Hi',
+          text: {
+            data: '<p>Hello World!</p>',
+          },
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const EventDetails = StoryComponent.bind({});
+EventDetails.args = {
+  attendees: ['John Doe', 'Mario Rossi'],
+  contact_email: 'test@example.com',
+  contact_name: 'John Doe',
+  contact_phone: '0123456789',
+  end: '2019-06-24T15:20:00+00:00',
+  event_url: 'https://www.example.com',
+  location: 'Volto, Plone',
+  open_end: false,
+  recurrence: 'RRULE:FREQ=DAILY;INTERVAL=7;COUNT=7',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: ['Guillotina', 'Volto'],
+  whole_day: false,
+};
+export default {
+  title: 'Public components/EventDetails',
+  component: EventDetails,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    contact_email: {
+      description: 'email address',
+    },
+    contact_name: {
+      description: 'name of the attendee',
+    },
+    contact_phone: {
+      description: 'contact phone of the attendee',
+    },
+    end: {
+      control: { type: 'date' },
+      description: 'end date/time of the event',
+    },
+    event_url: {
+      description: 'event url',
+    },
+    start: {
+      control: { type: 'date' },
+      context: 'time',
+      description: 'start date/time of the event',
+    },
+    whole_day: {
+      description: 'whether the event will be whole day or not',
+    },
+    subjects: {
+      description: 'subjects covered in the event meetings',
+    },
+  },
+};

package/src/components/theme/Header/Header.stories.jsx

@@ -0,0 +1,47 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import HeaderComponent from './Header';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlHeaderComponent = injectIntl(HeaderComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        userSession: { ...args },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlHeaderComponent pathname="/blog" />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  token: '',
+};
+export const Auth = StoryComponent.bind({});
+Auth.args = {
+  token: '1234567890',
+};
+
+export default {
+  title: 'Public components/Header',
+  component: HeaderComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    token: 'Token for userSession',
+  },
+};

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { flattenToAppURL } from '@plone/volto/helpers';
+import { flattenToAppURL, flattenScales } from '@plone/volto/helpers';
 
 /**
  * Image component
@@ -36,22 +36,19 @@ export default function Image({
     const imageFieldWithDefault = imageField || item.image_field || 'image';
 
     const image = isFromRealObject
-      ? item[imageFieldWithDefault]
-      : item.image_scales[imageFieldWithDefault]?.[0];
+      ? flattenScales(item['@id'], item[imageFieldWithDefault])
+      : flattenScales(
+          item['@id'],
+          item.image_scales[imageFieldWithDefault]?.[0],
+        );
 
     if (!image) return null;
 
     const isSvg = image['content-type'] === 'image/svg+xml';
 
-    const baseUrl = isFromRealObject ? '' : flattenToAppURL(item['@id'] + '/');
-
-    attrs.src = `${baseUrl}${flattenToAppURL(image.download)}`;
+    attrs.src = `${flattenToAppURL(item['@id'])}/${image.download}`;
     attrs.width = image.width;
     attrs.height = image.height;
-    attrs.style = {
-      aspectRatio: `${image.width} / ${image.height}`,
-      ...imageProps.style,
-    };
     attrs.className = cx(className, { responsive });
 
     if (!isSvg && image.scales && Object.keys(image.scales).length > 0) {
@@ -64,7 +61,7 @@ export default function Image({
       attrs.srcSet = sortedScales
         .map(
           (scale) =>
-            `${baseUrl}${flattenToAppURL(scale.download)} ${scale.width}w`,
+            `${flattenToAppURL(item['@id'])}/${scale.download} ${scale.width}w`,
         )
         .join(', ');
     }

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

@@ -6,14 +6,14 @@ test('renders an image component with fetchpriority high', () => {
   const component = renderer.create(
     <Image
       item={{
+        '@id': 'http://localhost:3000/image',
         image: {
-          download: 'http://localhost:3000/image/@@images/image/image.png',
+          download: 'http://localhost:3000/image/@@images/image.png',
           width: 400,
           height: 400,
           scales: {
             preview: {
-              download:
-                'http://localhost:3000/image/@@images/image/image-400.png',
+              download: 'http://localhost:3000/image/@@images/image-400.png',
               width: 400,
               height: 400,
             },
@@ -32,14 +32,14 @@ test('renders an image component with lazy loading', () => {
   const component = renderer.create(
     <Image
       item={{
+        '@id': 'http://localhost:3000/image',
         image: {
-          download: 'http://localhost:3000/image/@@images/image/image.png',
+          download: 'http://localhost:3000/image/@@images/image.png',
           width: 400,
           height: 400,
           scales: {
             preview: {
-              download:
-                'http://localhost:3000/image/@@images/image/image-400.png',
+              download: 'http://localhost:3000/image/@@images/image-400.png',
               width: 400,
               height: 400,
             },
@@ -59,14 +59,14 @@ test('renders an image component with responsive class', () => {
   const component = renderer.create(
     <Image
       item={{
+        '@id': 'http://localhost:3000/image',
         image: {
-          download: 'http://localhost:3000/image/@@images/image/image.png',
+          download: 'http://localhost:3000/image/@@images/image-1200.png',
           width: 400,
           height: 400,
           scales: {
             preview: {
-              download:
-                'http://localhost:3000/image/@@images/image/image-400.png',
+              download: 'http://localhost:3000/image/@@images/image-400.png',
               width: 400,
               height: 400,
             },
@@ -91,12 +91,12 @@ test('renders an image component from a catalog brain', () => {
         image_scales: {
           image: [
             {
-              download: '@@images/image/image.png',
+              download: '@@images/image.png',
               width: 400,
               height: 400,
               scales: {
                 preview: {
-                  download: '@@images/image/image-400.png',
+                  download: '@@images/image-400.png',
                   width: 400,
                   height: 400,
                 },

package/src/components/theme/Login/Login.jsx

@@ -74,7 +74,7 @@ const Login = (props) => {
   const error = useSelector((state) => state.userSession.login.error);
   const loading = useSelector((state) => state.userSession.login.loading);
   const returnUrl =
-    qs.parse(props.location.search ?? location.search).return_url ||
+    qs.parse(props.location?.search ?? location.search).return_url ||
     location.pathname.replace(/\/login\/?$/, '').replace(/\/logout\/?$/, '') ||
     '/';
   useEffect(() => {

package/src/components/theme/Login/Login.stories.jsx

@@ -18,7 +18,7 @@ const StoryComponent = (args) => {
   return (
     <Provider store={store}>
       <Wrapper>
-        <Login />
+        <Login location={{ search: {} }} />
       </Wrapper>
     </Provider>
   );

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

@@ -24,23 +24,18 @@ describe('Multilingual Logo', () => {
         data: {
           id: 'http://localhost:3000/@navroot',
           navroot: {
-            '@id': 'http://localhost:3000',
+            '@id': 'http://localhost:3000/en',
             title: 'Plone Site',
           },
         },
       },
-      router: {
-        location: {
-          pathname: '/',
-        },
-      },
       site: {
         data: {},
       },
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,
@@ -64,11 +59,6 @@ describe('Multilingual Logo', () => {
           },
         },
       },
-      router: {
-        location: {
-          pathname: '/en',
-        },
-      },
       site: {
         data: {
           'plone.site_title': 'Plone Site',
@@ -77,7 +67,7 @@ describe('Multilingual Logo', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/en' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,
@@ -101,11 +91,6 @@ describe('Multilingual Logo', () => {
           },
         },
       },
-      router: {
-        location: {
-          pathname: '/en',
-        },
-      },
       site: {
         data: {
           'plone.site_logo':
@@ -115,7 +100,7 @@ describe('Multilingual Logo', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/en' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,
@@ -139,11 +124,6 @@ describe('Multilingual Logo', () => {
           },
         },
       },
-      router: {
-        location: {
-          pathname: '/en/my/path',
-        },
-      },
       site: {
         data: {
           'plone.site_logo':
@@ -153,7 +133,7 @@ describe('Multilingual Logo', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/en/my/path' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,

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

@@ -7,12 +7,12 @@ import { Image } from 'semantic-ui-react';
 import { ConditionalLink } from '@plone/volto/components';
 import LogoImage from '@plone/volto/components/theme/Logo/Logo.svg';
 import { useSelector, useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import { getNavroot } from '@plone/volto/actions';
 import {
   flattenToAppURL,
   hasApiExpander,
   getBaseUrl,
-  toPublicURL,
 } from '@plone/volto/helpers';
 
 /**
@@ -22,7 +22,7 @@ import {
  * @returns {string} Markup of the component.
  */
 const Logo = () => {
-  const pathname = useSelector((state) => state.router.location.pathname);
+  const pathname = useLocation().pathname;
   const site = useSelector((state) => state.site.data);
   const navroot = useSelector((state) => state.navroot.data);
   const dispatch = useDispatch();
@@ -33,14 +33,16 @@ const Logo = () => {
     }
   }, [dispatch, pathname]);
 
-  // remove trailing slash
-  const currentURL = toPublicURL(pathname).replace(/\/$/, '');
+  const navRootPath = flattenToAppURL(navroot?.navroot?.['@id']) || '/';
+  const currentURLIsNavRoot = pathname !== navRootPath;
 
   return (
     <ConditionalLink
-      href={navroot?.navroot?.['@id']}
+      href={navRootPath}
       title={navroot?.navroot?.title}
-      condition={currentURL !== navroot?.navroot?.['@id']}
+      // In case that the content returns 404, there is no information about the portal
+      // then render the link anyways to get out of the Unauthorized page
+      condition={!navroot || currentURLIsNavRoot}
     >
       <Image
         src={

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

@@ -4,7 +4,31 @@ import Wrapper from '@plone/volto/storybook';
 
 const StoryComponent = (args) => {
   return (
-    <Wrapper>
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+        navroot: {
+          data: {
+            id: 'http://localhost:3000/@navroot',
+            navroot: {
+              '@id': 'http://localhost:3000',
+              title: 'Plone Site',
+            },
+          },
+        },
+        router: {
+          location: {
+            pathname: '/',
+          },
+        },
+        site: {
+          data: {},
+        },
+      }}
+    >
       <Logo />
     </Wrapper>
   );

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

@@ -30,18 +30,13 @@ describe('Logo', () => {
           },
         },
       },
-      router: {
-        location: {
-          pathname: '/',
-        },
-      },
       site: {
         data: {},
       },
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,
@@ -64,11 +59,6 @@ describe('Logo', () => {
           },
         },
       },
-      router: {
-        location: {
-          pathname: '/',
-        },
-      },
       site: {
         data: {
           'plone.site_logo':
@@ -78,7 +68,7 @@ describe('Logo', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,
@@ -86,6 +76,7 @@ describe('Logo', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
   it('renders a logo component with default config in a non-root url', () => {
     const store = mockStore({
       intl: {
@@ -115,7 +106,7 @@ describe('Logo', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/some-page' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,
@@ -123,6 +114,7 @@ describe('Logo', () => {
     const json = component.toJSON();
     expect(json).toMatchSnapshot();
   });
+
   it('renders a logo component with a custom logo in a non-root url', () => {
     const store = mockStore({
       intl: {
@@ -138,11 +130,6 @@ describe('Logo', () => {
           },
         },
       },
-      router: {
-        location: {
-          pathname: '/some-page',
-        },
-      },
       site: {
         data: {
           'plone.site_logo':
@@ -152,7 +139,7 @@ describe('Logo', () => {
     });
     const component = renderer.create(
       <Provider store={store}>
-        <MemoryRouter>
+        <MemoryRouter initialEntries={[{ pathname: '/some-page' }]}>
           <Logo />
         </MemoryRouter>
       </Provider>,

package/src/components/theme/SearchWidget/SearchWidget.stories.jsx

@@ -0,0 +1,36 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import SearchWidgetComponent from './SearchWidget';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSearchWidgetComponent = injectIntl(SearchWidgetComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSearchWidgetComponent {...args} pathname="/blog" />
+    </Wrapper>
+  );
+}
+
+export const SearchWidget = StoryComponent.bind({});
+
+export default {
+  title: 'Public components/SearchWidget',
+  component: SearchWidget,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '400px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/config/Blocks.jsx

@@ -76,6 +76,7 @@ import {
 } 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';
+import { getLeadImageBlockSizes } from '@plone/volto/components/manage/Blocks/LeadImage/utils';
 
 // block sidebar schemas (not the Dexterity Layout block settings schemas)
 import HeroImageLeftBlockSchema from '@plone/volto/components/manage/Blocks/HeroImageLeft/schema';
@@ -272,6 +273,7 @@ const blocksConfig = {
     restricted: ({ properties }) => !properties.hasOwnProperty('image'),
     mostUsed: false,
     sidebarTab: 1,
+    getSizes: getLeadImageBlockSizes,
   },
   listing: {
     id: 'listing',

package/src/helpers/Url/Url.js

@@ -355,3 +355,32 @@ export const URLUtils = {
   isUrl,
   checkAndNormalizeUrl,
 };
+
+/**
+ * Given an image info object, it does flatten all the scales information to
+ * match the ones stored in the catalog
+ * 'http://localhost:3000/{path}/@@images/{scalefile}' -> '@images/{scalefile}'
+ * @function flattenScales
+ * @param {string} path path of the content object
+ * @param {object} image image information object
+ * @returns {object} New object with the flattened scale URLs
+ */
+export function flattenScales(path, image) {
+  function removeObjectIdFromURL(path, scale) {
+    return scale.replace(`${path}/`, '');
+  }
+  if (!image) return;
+
+  const imageInfo = {
+    ...image,
+    download: flattenToAppURL(removeObjectIdFromURL(path, image.download)),
+  };
+
+  Object.keys(imageInfo.scales).forEach((key) => {
+    imageInfo.scales[key].download = flattenToAppURL(
+      removeObjectIdFromURL(path, image.scales[key].download),
+    );
+  });
+
+  return imageInfo;
+}