@plone/volto 19.0.0-alpha.29 → 19.0.0-alpha.30

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

@@ -0,0 +1,82 @@
+import { injectIntl } from 'react-intl';
+import SitemapComponent from './Sitemap';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSitemapComponent = injectIntl(SitemapComponent);
+
+function StoryComponent(args) {
+  // Add mock location object
+  const mockLocation = {
+    pathname: '/sitemap',
+    search: '',
+    hash: '',
+    state: null,
+  };
+  return (
+    <Wrapper
+      customStore={{
+        navigation: {
+          url: 'http://localhost:8080/Plone/@navigation',
+          ...args,
+        },
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSitemapComponent
+        location={mockLocation}
+        getNavigation={() => {}}
+        lang="en"
+        items={args.items}
+      />
+    </Wrapper>
+  );
+}
+
+export const Sitemap = StoryComponent.bind({});
+Sitemap.args = {
+  items: [
+    {
+      url: 'http://localhost:8080/Plone/page-1',
+      description: '',
+      items: [
+        {
+          url: 'http://localhost:8080/Plone/page-1/page-1-2',
+          description: '',
+          title: 'Page 1-2',
+        },
+        {
+          url: 'http://localhost:8080/Plone/page-1/page-1-3',
+          description: '',
+          title: 'Page 1-3',
+        },
+      ],
+      title: 'Page 1-3',
+    },
+    {
+      url: 'http://localhost:8080/Plone/page-2',
+      description: '',
+      title: 'Page 2',
+    },
+  ],
+};
+export default {
+  title: 'Public components/Sitemap',
+  component: Sitemap,
+  decorators: [
+    (Story) => (
+      <div className="ui segment form attached" style={{ width: '900px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'url,description,title of the pages mentioned',
+    },
+  },
+};

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

@@ -4,10 +4,10 @@ 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 = () => {
+  const token = useSelector((state) => state.userSession.token);
   const error_message = useSelector((state) => state.apierror?.message);
   let location = useLocation();
 
@@ -19,28 +19,35 @@ const Unauthorized = () => {
       </h1>
       <h3>{error_message}</h3>
       <p className="description">
-        <FormattedMessage
-          id="You are trying to access a protected resource, please {login} first."
-          defaultMessage="You are trying to access a protected resource, please {login} first."
-          values={{
-            login: (
-              <Link
-                to={{
-                  pathname: `${getBaseUrl(location.pathname)}/login`,
-                  state: {
-                    // This is needed to cover the use case of being logged in in
-                    // another backend (eg. in development), having a token for
-                    // localhost and try to use it, the login route has to know that
-                    // it's the same as it comes from a logout
-                    isLogout: true,
-                  },
-                }}
-              >
-                <FormattedMessage id="log in" defaultMessage="log in" />
-              </Link>
-            ),
-          }}
-        />
+        {token ? (
+          <FormattedMessage
+            id="You are trying to access a protected resource."
+            defaultMessage="You are trying to access a protected resource."
+          />
+        ) : (
+          <FormattedMessage
+            id="You are trying to access a protected resource, please {login} first."
+            defaultMessage="You are trying to access a protected resource, please {login} first."
+            values={{
+              login: (
+                <Link
+                  to={{
+                    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
+                      // localhost and try to use it, the login route has to know that
+                      // it's the same as it comes from a logout
+                      isLogout: true,
+                    },
+                  }}
+                >
+                  <FormattedMessage id="log in" defaultMessage="log in" />
+                </Link>
+              ),
+            }}
+          />
+        )}
       </p>
       <p>
         <FormattedMessage

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

@@ -9,8 +9,35 @@ import Unauthorized from './Unauthorized';
 const mockStore = configureStore();
 
 describe('Unauthorized', () => {
-  it('renders a not found component', () => {
+  it('renders an unauthorized component', () => {
     const store = mockStore({
+      userSession: {
+        token: null,
+      },
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+      apierror: {
+        message: 'You are not authorized to access this resource',
+      },
+    });
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <Unauthorized />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders an unauthorized component for authenticated user', () => {
+    const store = mockStore({
+      userSession: {
+        token: '1234',
+      },
       intl: {
         locale: 'en',
         messages: {},

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',
+    },
+  },
+};

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

@@ -0,0 +1,71 @@
+import { injectIntl } from 'react-intl';
+import React from 'react';
+import SummaryViewComponent from './SummaryView';
+import { RealStoreWrapper as Wrapper } from '@plone/volto/storybook';
+
+const IntlSummaryViewComponent = injectIntl(SummaryViewComponent);
+
+function StoryComponent(args) {
+  return (
+    <Wrapper
+      customStore={{
+        intl: {
+          locale: 'en',
+          messages: {},
+        },
+      }}
+    >
+      <div id="toolbar" style={{ display: 'none' }} />
+      <IntlSummaryViewComponent
+        content={{
+          ...args,
+        }}
+      />
+    </Wrapper>
+  );
+}
+
+export const Default = StoryComponent.bind({});
+Default.args = {
+  title: 'Hello World!',
+  description: 'Hi',
+  items: [
+    {
+      title: 'My item',
+      description: 'My item description',
+      url: '/item',
+      image: {
+        scales: {
+          thumb: {
+            download: 'file:///preview.jpg',
+          },
+        },
+      },
+      image_caption: 'My image caption',
+      '@type': 'News Item',
+    },
+  ],
+};
+export default {
+  title: 'Public components/View/SummaryView',
+  component: SummaryViewComponent,
+  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',
+    },
+    items: {
+      description: 'Content in the page',
+    },
+  },
+};