plone · davisagli · Dec 18, 2024 · Feb 8, 2023 · Jul 31, 2024 · Jul 31, 2024
diff --git a/docs/source/configuration/settings-reference.md b/docs/source/configuration/settings-reference.md
@@ -464,12 +464,22 @@ querystringSearchGet
     Please test this setting properly before enabling in a production site.
 
 cssLayers
-   To use CSS layers when styling Volto, you can define and apply them at the very top level of the page, where they appear in the `<head>` tag.
+    To use CSS layers when styling Volto, you can define and apply them at the very top level of the page, where they appear in the `<head>` tag.
     By using this configuration, you can pass the layer list definition as an array:
 
     ```js
     config.settings.cssLayers = ['reset', 'plone-components', 'layout', 'addons', 'theme'];
     ```
+
+showRelatedItems
+    If true, the `RelatedItems` component will show items from the `relatedItems` field. Default: false.
+
+    ```{versionadded} 18.5.0
+    ```
+
+
+showTags
+    If true, the `Tags` component will show tags from the `subjects` field. Default: true.
 ```
 
 ## Views settings

diff --git a/packages/types/src/config/Settings.d.ts b/packages/types/src/config/Settings.d.ts
@@ -76,6 +76,7 @@ export interface SettingsConfig {
   serverConfig: unknown;
   storeExtenders: unknown[];
   showTags: boolean;
+  showRelatedItems: boolean;
   controlpanels: unknown[];
   controlPanelsIcons: Record<string, React.ComponentType>;
   filterControlPanels: unknown;

diff --git a/packages/volto/locales/ca/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/de/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/en/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/es/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/eu/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/fi/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/fr/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/hi/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/it/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/ja/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/nl/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/pt/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/pt_BR/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/ro/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/locales/volto.pot b/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

diff --git a/packages/volto/locales/zh_CN/LC_MESSAGES/volto.po b/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

diff --git a/packages/volto/news/3740.feature b/packages/volto/news/3740.feature
@@ -0,0 +1 @@
+Add component to show related items, which can be enabled using the `showRelatedItems` setting. @wesleybl
diff --git a/packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx b/packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx
@@ -0,0 +1,70 @@
+/**
+ * RelatedItems component.
+ * @module components/theme/RelatedItems/RelatedItems
+ */
+
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { defineMessages, useIntl } 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 }) => {
+  const intl = useIntl();
+  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 = {
+  content: PropTypes.shape({
+    relatedItems: PropTypes.arrayOf(
+      PropTypes.shape({
+        '@id': PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
+      }),
+    ),
+  }),
+};
+
+export default RelatedItems;
diff --git a/packages/volto/src/components/theme/RelatedItems/RelatedItems.test.jsx b/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();
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Add component to show related items, which can be enabled using the `showRelatedItems` setting. @wesleybl