@plone/volto 18.35.0 → 18.36.0

package/src/components/manage/Widgets/TextWidget.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
@@ -30,3 +31,46 @@ test('renders a text widget component', () => {
   const json = component.toJSON();
   expect(json).toMatchSnapshot();
 });
+
+test('adds aria-required attribute to input when required prop is true', () => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+  });
+
+  render(
+    <Provider store={store}>
+      <TextWidget
+        id="my-field"
+        title="My field"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+        required={true}
+      />
+    </Provider>,
+  );
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-required', 'true');
+});
+
+test('adds aria-invalid attribute to input when field has errors', () => {
+  const store = mockStore({
+    intl: { locale: 'en', messages: {} },
+  });
+
+  render(
+    <Provider store={store}>
+      <TextWidget
+        id="my-field"
+        title="My field"
+        onChange={() => {}}
+        onBlur={() => {}}
+        onClick={() => {}}
+        required={true}
+        error={['This field is required']}
+      />
+    </Provider>,
+  );
+
+  expect(screen.getByRole('textbox')).toHaveAttribute('aria-invalid', 'true');
+});

package/src/components/theme/Sitemap/Sitemap.jsx

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { compose } from 'redux';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { asyncConnect } from '@plone/volto/helpers/AsyncConnect';
+import { expandToBackendURL } from '@plone/volto/helpers/Url/Url';
 import { defineMessages, injectIntl } from 'react-intl';
 import { Container as SemanticContainer } from 'semantic-ui-react';
 import Helmet from '@plone/volto/helpers/Helmet/Helmet';
-import { toBackendLang } from '@plone/volto/helpers/Utils/Utils';
 import { Link } from 'react-router-dom';
 import config from '@plone/volto/registry';
 
@@ -20,6 +20,9 @@ const messages = defineMessages({
 });
 
 export function getSitemapPath(pathname = '', lang) {
+  /* This function is deprecated
+   * We keep it for backwards compatibility.
+   */
   const prefix = pathname.replace(/\/sitemap$/gm, '').replace(/^\//, '');
   const path = prefix || lang || '';
   return path;
@@ -32,18 +35,12 @@ export function getSitemapPath(pathname = '', lang) {
  * @returns {JSX.Element} - Rendered component.
  */
 function Sitemap(props) {
-  const {
-    location: { pathname },
-    lang,
-    getNavigation,
-  } = props;
-
+  const { getNavigation, navroot } = props;
   useEffect(() => {
     const { settings } = config;
-    const language = settings.isMultilingual ? `${toBackendLang(lang)}` : null;
-    const path = getSitemapPath(pathname, language);
-    getNavigation(path, 4);
-  }, [pathname, lang, getNavigation]);
+    const path = `${expandToBackendURL(navroot?.navroot?.['@id'])}`;
+    getNavigation(path, settings.siteMapDepth);
+  }, [navroot, getNavigation]);
 
   const renderItems = (items) => {
     return (
@@ -64,12 +61,13 @@ function Sitemap(props) {
   const Container =
     config.getComponent({ name: 'Container' }).component || SemanticContainer;
 
+  const items = useSelector((state) => state.navigation.items);
   return (
     <div id="page-sitemap">
       <Helmet title={props.intl.formatMessage(messages.Sitemap)} />
       <Container className="view-wrapper">
         <h1>{props.intl.formatMessage(messages.Sitemap)} </h1>
-        {props.items && renderItems(props.items)}
+        {items && renderItems(items)}
       </Container>
     </div>
   );
@@ -77,18 +75,15 @@ function Sitemap(props) {
 
 Sitemap.propTypes = {
   getNavigation: PropTypes.func.isRequired,
-  location: PropTypes.object.isRequired,
+  navroot: PropTypes.object.isRequired,
   intl: PropTypes.object.isRequired,
-  lang: PropTypes.string.isRequired,
-  items: PropTypes.array.isRequired,
 };
 
 export const __test__ = compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
@@ -98,24 +93,22 @@ export default compose(
   injectIntl,
   connect(
     (state) => ({
-      items: state.navigation.items,
-      lang: state.intl.locale,
+      navroot: state.navroot?.data,
     }),
     { getNavigation },
   ),
   asyncConnect([
     {
       key: 'navigation',
-      promise: ({ location, store: { dispatch, getState } }) => {
+      promise: ({ store: { dispatch, getState } }) => {
         if (!__SERVER__) return;
-        const { settings } = config;
-        const path = getSitemapPath(
-          location.pathname,
-          settings.isMultilingual
-            ? toBackendLang(getState().intl.locale)
-            : null,
+        const navroot = getState().navroot.data?.navroot?.['@id'];
+        return dispatch(
+          getNavigation(
+            expandToBackendURL(navroot),
+            config.settings.siteMapDepth,
+          ),
         );
-        return dispatch(getNavigation(path, 4));
       },
     },
   ]),

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

@@ -43,6 +43,15 @@ describe('Sitemap', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/`,
+            '@type': 'Plone Site',
+            title: 'Plone Site',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>
@@ -94,6 +103,15 @@ describe('Sitemap in a multilingual site', () => {
         locale: 'en',
         messages: {},
       },
+      navroot: {
+        data: {
+          navroot: {
+            '@id': `http://localhost:8080/Plone/en`,
+            '@type': 'LRF',
+            title: 'English',
+          },
+        },
+      },
     });
     const component = renderer.create(
       <Provider store={store}>

package/src/components/theme/Unauthorized/Unauthorized.jsx

@@ -4,7 +4,6 @@ import { Container } from 'semantic-ui-react';
 import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { withServerErrorCode } from '@plone/volto/helpers/Utils/Utils';
-import { getBaseUrl } from '@plone/volto/helpers/Url/Url';
 import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass';
 
 const Unauthorized = () => {
@@ -33,7 +32,7 @@ const Unauthorized = () => {
               login: (
                 <Link
                   to={{
-                    pathname: `${getBaseUrl(location.pathname)}/login`,
+                    pathname: `${location.pathname.replace(/\/$/, '')}/login`,
                     state: {
                       // This is needed to cover the use case of being logged in in
                       // another backend (eg. in development), having a token for

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

@@ -0,0 +1,89 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import EventViewComponent from './EventView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+import config from '@plone/volto/registry';
+const IntlEventViewComponent = injectIntl(EventViewComponent);
+const { settings } = config;
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlEventViewComponent
+        content={{
+          '@id': 'http://localhost:8080/Plone/my-page',
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  attendees: [],
+  subjects: [],
+};
+
+export const EventViewAllProps = StoryComponent.bind({});
+EventViewAllProps.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  text: {
+    data: '<p>Hello World!</p>',
+  },
+  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 const EventViewWithoutLinkToApiInTheText = StoryComponent.bind({});
+EventViewWithoutLinkToApiInTheText.args = {
+  title: 'Hello World!',
+  attendees: [],
+  end: '2019-06-23T16:20:00+00:00',
+  start: '2019-06-23T15:20:00+00:00',
+  subjects: [],
+  text: {
+    data: `<p>Hello World!</p><p>This is an <a href="${settings.apiPath}/foo/bar">internal link</a> and a <a href="${settings.apiPath}/foo/baz">second link</a></p>`,
+  },
+};
+export default {
+  title: 'Public components/View/EventView',
+  component: EventViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    end: {
+      control: 'date',
+    },
+    start: {
+      control: 'date',
+    },
+  },
+};

package/src/components/theme/View/FileView.stories.jsx

@@ -0,0 +1,50 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import FileViewComponent from './FileView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlFileViewComponent = injectIntl(FileViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper customStore={{}}>
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlFileViewComponent
+        content={{
+          ...args,
+          file: {
+            download: 'file:///preview.pdf',
+            ...args,
+          },
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  filename: 'preview.pdf',
+};
+
+export default {
+  title: 'Public components/View/FileView',
+  component: FileViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the component',
+    },
+    filename: {
+      description: 'Name of the file',
+    },
+  },
+};

package/src/components/theme/View/LinkView.stories.jsx

@@ -0,0 +1,57 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import LinkViewComponent from './LinkView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlLinkViewComponent = injectIntl(LinkViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        userSession: {
+          token: null,
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlLinkViewComponent
+        token="1234"
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  remoteUrl: '/news',
+};
+
+export default {
+  title: 'Public components/View/LinkView',
+  component: LinkViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the component',
+    },
+    remoteUrl: {
+      description: 'remoteUrl mentioned in the page',
+    },
+  },
+};

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

@@ -0,0 +1,70 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import ListingViewComponent from './ListingView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlListingViewComponent = injectIntl(ListingViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlListingViewComponent
+        content={{
+          title: 'Hello World!',
+          description: 'Hi',
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      '@type': 'Document',
+    },
+    {
+      title: 'Second item',
+      description: 'My second item description',
+      url: '/item2',
+      '@type': 'Document',
+    },
+  ],
+};
+
+export default {
+  title: 'Public components/View/ListingView',
+  component: ListingViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Listed pages',
+    },
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+  },
+};

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

@@ -0,0 +1,58 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import NewsItemViewComponent from './NewsItemView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlNewsItemViewComponent = injectIntl(NewsItemViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlNewsItemViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  text: {
+    data: '<p>Hello World!</p>',
+  },
+};
+
+export default {
+  title: 'Public components/View/NewsItemView',
+  component: NewsItemViewComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: 'Title of the page listed',
+    },
+    description: {
+      description: 'Description of the page',
+    },
+    text: {
+      description: 'Content',
+    },
+  },
+};

package/src/components/theme/View/RenderBlocks.stories.jsx

@@ -0,0 +1,112 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import RenderBlocksComponent from './RenderBlocks';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+import config from '@plone/volto/registry';
+
+const IntlRenderBlocksComponent = injectIntl(RenderBlocksComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlRenderBlocksComponent
+        blocksConfig={{
+          ...config.blocks.blocksConfig,
+          custom: {
+            id: 'custom',
+            ...args,
+          },
+        }}
+        content={{
+          blocks_layout: {
+            items: ['a', 'b'],
+          },
+          ...args,
+        }}
+        path="/foo"
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  view: ({ id, data }) => (
+    <div>
+      {id} - {data.text}
+    </div>
+  ),
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'a',
+    },
+    b: {
+      '@type': 'custom',
+      text: 'b',
+    },
+  },
+};
+export const PathToBlocks = StoryComponent.bind({});
+PathToBlocks.args = {
+  view: ({ id, data, path }) => (
+    <div>
+      id: {id} - text: {data.text} - path: {path}
+    </div>
+  ),
+
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'bar',
+    },
+    b: {
+      '@type': 'custom',
+      text: 'foo',
+    },
+  },
+};
+
+export const InvalidBlocks = StoryComponent.bind({});
+InvalidBlocks.args = {
+  blocks_layout: {
+    items: ['MISSING-YOU-1', 'a', 'MISSING-YOU-2'],
+  },
+  blocks: {
+    a: {
+      '@type': 'custom',
+      text: 'bar',
+    },
+  },
+};
+export default {
+  title: 'Internal components/View/RenderBlocks',
+  component: RenderBlocksComponent,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    view: {
+      description: 'Pattern in which to place block content',
+    },
+    blocks: {
+      description: 'blocks in the page',
+    },
+    blocks_layout: {
+      description: 'block layout in the page',
+    },
+  },
+};