Show related items

packages/volto/locales/ca/LC_MESSAGES/volto.po

@@ -2872,6 +2872,11 @@ msgstr "Registrar-se"
 msgid "Registration form"
 msgstr "Formulari d'inscripció"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/de/LC_MESSAGES/volto.po

@@ -2871,6 +2871,11 @@ msgstr "Registrieren"
 msgid "Registration form"
 msgstr "Registrierungsformular"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/en/LC_MESSAGES/volto.po

@@ -2866,6 +2866,11 @@ msgstr ""
 msgid "Registration form"
 msgstr ""
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/es/LC_MESSAGES/volto.po

@@ -2873,6 +2873,11 @@ msgstr "Registro"
 msgid "Registration form"
 msgstr "Formulario de registro"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/eu/LC_MESSAGES/volto.po

@@ -2873,6 +2873,11 @@ msgstr "Izena eman"
 msgid "Registration form"
 msgstr "Erregistro formularioa"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/fi/LC_MESSAGES/volto.po

@@ -2871,6 +2871,11 @@ msgstr "Rekisteröidy"
 msgid "Registration form"
 msgstr "Rekisteröitymislomake"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/fr/LC_MESSAGES/volto.po

@@ -2873,6 +2873,11 @@ msgstr "S'enregistrer"
 msgid "Registration form"
 msgstr "Formulaire d'enregistrement"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/hi/LC_MESSAGES/volto.po

@@ -2866,6 +2866,11 @@ msgstr "रजिस्टर करें"
 msgid "Registration form"
 msgstr "रजिस्ट्रेशन फ़ॉर्म"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/it/LC_MESSAGES/volto.po

@@ -2866,6 +2866,11 @@ msgstr "Registrati"
 msgid "Registration form"
 msgstr "Form di iscrizione"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/ja/LC_MESSAGES/volto.po

@@ -2871,6 +2871,11 @@ msgstr "登録"
 msgid "Registration form"
 msgstr "登録フォーム"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/nl/LC_MESSAGES/volto.po

@@ -2870,6 +2870,11 @@ msgstr "Registreer"
 msgid "Registration form"
 msgstr "Registratie formulier"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/pt/LC_MESSAGES/volto.po

@@ -2871,6 +2871,11 @@ msgstr "Registar"
 msgid "Registration form"
 msgstr "Formulário de registo"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/pt_BR/LC_MESSAGES/volto.po

@@ -2872,6 +2872,11 @@ msgstr "Cadastro"
 msgid "Registration form"
 msgstr "Formulário de cadastro"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr "Itens relacionados"
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/ro/LC_MESSAGES/volto.po

@@ -2872,6 +2872,11 @@ msgstr "Înregistrare"
 msgid "Registration form"
 msgstr "Formular de înregistrare"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/volto.pot

@@ -2868,6 +2868,11 @@ msgstr ""
 msgid "Registration form"
 msgstr ""
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/locales/zh_CN/LC_MESSAGES/volto.po

@@ -2872,6 +2872,11 @@ msgstr "注册"
 msgid "Registration form"
 msgstr "注册表单"
 
+#. Default: "Related Items"
+#: components/theme/RelatedItems/RelatedItems
+msgid "Related Items"
+msgstr ""
+
 #. Default: "Relation"
 #: components/manage/Controlpanels/Relations/RelationsMatrix
 #: helpers/MessageLabels/MessageLabels

packages/volto/news/3740.feature

@@ -0,0 +1 @@
+Add component to show related items, which can be enabled using the `showRelatedItems` setting. @wesleybl

packages/volto/src/components/index.js

@@ -22,6 +22,7 @@ export { default as Title } from '@plone/volto/components/theme/Title/Title';
 export { default as DefaultView } from '@plone/volto/components/theme/View/DefaultView';
 export { default as Pagination } from '@plone/volto/components/theme/Pagination/Pagination';
 export { default as Tags } from '@plone/volto/components/theme/Tags/Tags';
+export { default as RelatedItems } from '@plone/volto/components/theme/RelatedItems/RelatedItems';
 export { default as OutdatedBrowser } from '@plone/volto/components/theme/OutdatedBrowser/OutdatedBrowser';
 export { default as LanguageSelector } from '@plone/volto/components/theme/LanguageSelector/LanguageSelector';
 export { default as RenderBlocks } from '@plone/volto/components/theme/View/RenderBlocks';

packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx

@@ -0,0 +1,77 @@
+/**
+ * RelatedItems component.
+ * @module components/theme/RelatedItems/RelatedItems
+ */
+
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { defineMessages, injectIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Container } from 'semantic-ui-react';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  relatedItems: {
+    id: 'Related Items',
+    defaultMessage: 'Related Items',
+  },
+});
+
+/**
+ * Related Items component.
+ * @function RelatedItems
+ * @param {array} relatedItems Array of related items.
+ * @returns {JSX.Element} Markup of the component.
+ */
+const RelatedItems = ({ content, intl }) => {
+  const relatedItems = content?.relatedItems;
+  if (
+    !config.settings.showRelatedItems ||
+    !relatedItems ||
+    relatedItems.length === 0
+  ) {
+    return null;
+  }
+
+  return (
+    <Container className="related-items">
+      <h2>{intl.formatMessage(messages.relatedItems)}</h2>
+      <ul>
+        {relatedItems.map((relatedItem) =>
+          relatedItem ? (
+            <li key={relatedItem['@id']}>
+              <UniversalLink href={relatedItem['@id']}>
+                {relatedItem.title}
+              </UniversalLink>
+            </li>
+          ) : null,
+        )}
+      </ul>
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+RelatedItems.propTypes = {
+  relatedItems: PropTypes.arrayOf(
+    PropTypes.shape({
+      '@id': PropTypes.string.isRequired,
+      title: PropTypes.string.isRequired,
+    }),
+  ),
+  intl: PropTypes.object.isRequired,
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+RelatedItems.defaultProps = {
+  relatedItems: [],
+};
+
+export default injectIntl(RelatedItems);

packages/volto/src/components/theme/RelatedItems/RelatedItems.test.jsx

@@ -0,0 +1,83 @@
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { Provider } from 'react-intl-redux';
+import { MemoryRouter } from 'react-router-dom';
+
+import RelatedItems from './RelatedItems';
+
+const mockStore = configureStore();
+let store;
+
+describe('Related Items', () => {
+  beforeEach(() => {
+    store = mockStore({
+      intl: {
+        locale: 'en',
+        messages: {},
+      },
+    });
+  });
+
+  it('renders without related items', () => {
+    const content = {};
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <RelatedItems content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with related items', () => {
+    const content = {
+      relatedItems: [
+        {
+          '@id': '/test-1',
+          title: 'Title 1',
+          description: 'Description 1',
+        },
+        {
+          '@id': '/test-2',
+          title: 'Title 2',
+          description: 'Description 2',
+        },
+      ],
+    };
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <RelatedItems content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+
+  it('renders with related items has null', () => {
+    const content = {
+      relatedItems: [
+        {
+          '@id': '/test-1',
+          title: 'Title 1',
+          description: 'Description 1',
+        },
+        null,
+      ],
+    };
+
+    const component = renderer.create(
+      <Provider store={store}>
+        <MemoryRouter>
+          <RelatedItems content={content} />
+        </MemoryRouter>
+      </Provider>,
+    );
+    const json = component.toJSON();
+    expect(json).toMatchSnapshot();
+  });
+});