From 01573a8db277b42de6a287ca21d15de4fb9a6025 Mon Sep 17 00:00:00 2001 From: wesleybl Date: Wed, 8 Feb 2023 14:58:36 -0300 Subject: [PATCH] Show related items --- locales/ca/LC_MESSAGES/volto.po | 5 + locales/de/LC_MESSAGES/volto.po | 5 + locales/en/LC_MESSAGES/volto.po | 5 + locales/es/LC_MESSAGES/volto.po | 5 + locales/eu/LC_MESSAGES/volto.po | 5 + locales/fr/LC_MESSAGES/volto.po | 5 + locales/it/LC_MESSAGES/volto.po | 5 + locales/ja/LC_MESSAGES/volto.po | 5 + locales/nl/LC_MESSAGES/volto.po | 5 + locales/pt/LC_MESSAGES/volto.po | 5 + locales/pt_BR/LC_MESSAGES/volto.po | 5 + locales/ro/LC_MESSAGES/volto.po | 5 + locales/volto.pot | 7 +- locales/zh_CN/LC_MESSAGES/volto.po | 5 + news/3740.feature | 2 + src/components/index.js | 1 + .../theme/RelatedItems/RelatedItems.jsx | 74 ++++++++++++ .../theme/RelatedItems/RelatedItems.test.jsx | 85 ++++++++++++++ .../__snapshots__/RelatedItems.test.jsx.snap | 107 ++++++++++++++++++ src/components/theme/View/View.jsx | 4 + src/config/index.js | 1 + 21 files changed, 345 insertions(+), 1 deletion(-) create mode 100644 news/3740.feature create mode 100644 src/components/theme/RelatedItems/RelatedItems.jsx create mode 100644 src/components/theme/RelatedItems/RelatedItems.test.jsx create mode 100644 src/components/theme/RelatedItems/__snapshots__/RelatedItems.test.jsx.snap diff --git a/locales/ca/LC_MESSAGES/volto.po b/locales/ca/LC_MESSAGES/volto.po index c0293c4270..08bd5a24aa 100644 --- a/locales/ca/LC_MESSAGES/volto.po +++ b/locales/ca/LC_MESSAGES/volto.po @@ -2562,6 +2562,11 @@ msgstr "Registrar-se" msgid "Registration form" msgstr "Formulari d'inscripció" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/de/LC_MESSAGES/volto.po b/locales/de/LC_MESSAGES/volto.po index b91ccd59ad..12b5c2eca1 100644 --- a/locales/de/LC_MESSAGES/volto.po +++ b/locales/de/LC_MESSAGES/volto.po @@ -2559,6 +2559,11 @@ msgstr "Registrieren" msgid "Registration form" msgstr "Registrierungsformular" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/en/LC_MESSAGES/volto.po b/locales/en/LC_MESSAGES/volto.po index 36ea2430ac..3dad472353 100644 --- a/locales/en/LC_MESSAGES/volto.po +++ b/locales/en/LC_MESSAGES/volto.po @@ -2553,6 +2553,11 @@ msgstr "" msgid "Registration form" msgstr "" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/es/LC_MESSAGES/volto.po b/locales/es/LC_MESSAGES/volto.po index 901e7c480e..ab548c9d40 100644 --- a/locales/es/LC_MESSAGES/volto.po +++ b/locales/es/LC_MESSAGES/volto.po @@ -2564,6 +2564,11 @@ msgstr "Registro" msgid "Registration form" msgstr "Formulario de registro" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/eu/LC_MESSAGES/volto.po b/locales/eu/LC_MESSAGES/volto.po index 1b8f968562..ce44cd1058 100644 --- a/locales/eu/LC_MESSAGES/volto.po +++ b/locales/eu/LC_MESSAGES/volto.po @@ -2560,6 +2560,11 @@ msgstr "Izena eman" msgid "Registration form" msgstr "Erregistro formularioa" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/fr/LC_MESSAGES/volto.po b/locales/fr/LC_MESSAGES/volto.po index 5f9c24d32c..7287defdc1 100644 --- a/locales/fr/LC_MESSAGES/volto.po +++ b/locales/fr/LC_MESSAGES/volto.po @@ -2570,6 +2570,11 @@ msgstr "S'enregistrer" msgid "Registration form" msgstr "Formulaire d'enregistrement" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/it/LC_MESSAGES/volto.po b/locales/it/LC_MESSAGES/volto.po index 990a1e830d..1c6bd8b3bb 100644 --- a/locales/it/LC_MESSAGES/volto.po +++ b/locales/it/LC_MESSAGES/volto.po @@ -2553,6 +2553,11 @@ msgstr "Registrati" msgid "Registration form" msgstr "Form di iscrizione" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/ja/LC_MESSAGES/volto.po b/locales/ja/LC_MESSAGES/volto.po index 5fd8ded2ee..1bc017f294 100644 --- a/locales/ja/LC_MESSAGES/volto.po +++ b/locales/ja/LC_MESSAGES/volto.po @@ -2561,6 +2561,11 @@ msgstr "登録" msgid "Registration form" msgstr "登録フォーム" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/nl/LC_MESSAGES/volto.po b/locales/nl/LC_MESSAGES/volto.po index 226136e756..0672524e93 100644 --- a/locales/nl/LC_MESSAGES/volto.po +++ b/locales/nl/LC_MESSAGES/volto.po @@ -2560,6 +2560,11 @@ msgstr "Registreren" msgid "Registration form" msgstr "Registratieformulier" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/pt/LC_MESSAGES/volto.po b/locales/pt/LC_MESSAGES/volto.po index c6b0fad707..c0b4161a3f 100644 --- a/locales/pt/LC_MESSAGES/volto.po +++ b/locales/pt/LC_MESSAGES/volto.po @@ -2561,6 +2561,11 @@ msgstr "Registar" msgid "Registration form" msgstr "Formulário de registo" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/pt_BR/LC_MESSAGES/volto.po b/locales/pt_BR/LC_MESSAGES/volto.po index 624b5568bf..e144b7096c 100644 --- a/locales/pt_BR/LC_MESSAGES/volto.po +++ b/locales/pt_BR/LC_MESSAGES/volto.po @@ -2563,6 +2563,11 @@ msgstr "Cadastro" msgid "Registration form" msgstr "Formulário de cadastro" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "Itens relacionados" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/ro/LC_MESSAGES/volto.po b/locales/ro/LC_MESSAGES/volto.po index 607665d7b0..d9ced5a42d 100644 --- a/locales/ro/LC_MESSAGES/volto.po +++ b/locales/ro/LC_MESSAGES/volto.po @@ -2553,6 +2553,11 @@ msgstr "Înregistrare" msgid "Registration form" msgstr "Formular de înregistrare" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/volto.pot b/locales/volto.pot index 3fcb504d66..24e57d8542 100644 --- a/locales/volto.pot +++ b/locales/volto.pot @@ -1,7 +1,7 @@ msgid "" msgstr "" "Project-Id-Version: Plone\n" -"POT-Creation-Date: 2022-12-12T12:33:16.481Z\n" +"POT-Creation-Date: 2023-02-08T17:02:07.814Z\n" "Last-Translator: Plone i18n \n" "Language-Team: Plone i18n \n" "MIME-Version: 1.0\n" @@ -2555,6 +2555,11 @@ msgstr "" msgid "Registration form" msgstr "" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/locales/zh_CN/LC_MESSAGES/volto.po b/locales/zh_CN/LC_MESSAGES/volto.po index fbf00c9aaf..783ff54db8 100644 --- a/locales/zh_CN/LC_MESSAGES/volto.po +++ b/locales/zh_CN/LC_MESSAGES/volto.po @@ -2559,6 +2559,11 @@ msgstr "注册" msgid "Registration form" msgstr "注册表单" +#: components/theme/RelatedItems/RelatedItems +# defaultMessage: Related Items +msgid "Related Items" +msgstr "" + #: components/theme/Search/Search # defaultMessage: Relevance msgid "Relevance" diff --git a/news/3740.feature b/news/3740.feature new file mode 100644 index 0000000000..7635a0c4a8 --- /dev/null +++ b/news/3740.feature @@ -0,0 +1,2 @@ +- Show related items. + @wesleybl diff --git a/src/components/index.js b/src/components/index.js index eec24b73a0..fafddab27a 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -22,6 +22,7 @@ export Title from '@plone/volto/components/theme/Title/Title'; export DefaultView from '@plone/volto/components/theme/View/DefaultView'; export Pagination from '@plone/volto/components/theme/Pagination/Pagination'; export Tags from '@plone/volto/components/theme/Tags/Tags'; +export RelatedItems from '@plone/volto/components/theme/RelatedItems/RelatedItems'; export OutdatedBrowser from '@plone/volto/components/theme/OutdatedBrowser/OutdatedBrowser'; export LanguageSelector from '@plone/volto/components/theme/LanguageSelector/LanguageSelector'; export RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks'; diff --git a/src/components/theme/RelatedItems/RelatedItems.jsx b/src/components/theme/RelatedItems/RelatedItems.jsx new file mode 100644 index 0000000000..a6dd466cb4 --- /dev/null +++ b/src/components/theme/RelatedItems/RelatedItems.jsx @@ -0,0 +1,74 @@ +/** + * RelatedItems component. + * @module components/theme/RelatedItems/RelatedItems + */ + +import React from 'react'; +import { UniversalLink } from '@plone/volto/components'; +import { defineMessages, injectIntl } from 'react-intl'; +import PropTypes from 'prop-types'; +import { Container } from 'semantic-ui-react'; + +const messages = defineMessages({ + relatedItems: { + id: 'Related Items', + defaultMessage: 'Related Items', + }, +}); + +/** + * Related Items component. + * @function RelatedItems + * @param {array} tags Array of related items. + * @returns {string} Markup of the component. + */ + +const RelatedItems = ({ relatedItems, intl }) => + relatedItems && relatedItems.length > 0 ? ( + +

{intl.formatMessage(messages.relatedItems)}

+
+ {relatedItems.map((relatedItem) => + relatedItem ? ( +
+
+ +
{relatedItem['title']}
+
+ {relatedItem['description']} +
+ +
+
+ ) : null, + )} +
+ + ) : ( + + ); + +/** + * Property types. + * @property {Object} propTypes Property types. + * @static + */ +RelatedItems.propTypes = { + relatedItems: PropTypes.arrayOf( + PropTypes.shape({ + '@id': PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + }), + ), +}; + +/** + * Default properties. + * @property {Object} defaultProps Default properties. + * @static + */ +RelatedItems.defaultProps = { + RelatedItems: null, +}; + +export default injectIntl(RelatedItems); diff --git a/src/components/theme/RelatedItems/RelatedItems.test.jsx b/src/components/theme/RelatedItems/RelatedItems.test.jsx new file mode 100644 index 0000000000..be78fb1a42 --- /dev/null +++ b/src/components/theme/RelatedItems/RelatedItems.test.jsx @@ -0,0 +1,85 @@ +import React from 'react'; +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(); + +describe('Related Items', () => { + it('renders without related items', () => { + const store = mockStore({ + intl: { + locale: 'en', + messages: {}, + }, + }); + const component = renderer.create( + + + + + , + ); + const json = component.toJSON(); + expect(json).toMatchSnapshot(); + }); + + it('renders with related items', () => { + const store = mockStore({ + intl: { + locale: 'en', + messages: {}, + }, + }); + const relatedItems = [ + { + '@id': '/test-1', + title: 'Title 1', + description: 'Description 1', + }, + { + '@id': '/test-2', + title: 'Title 2', + description: 'Description 2', + }, + ]; + const component = renderer.create( + + + + + , + ); + const json = component.toJSON(); + expect(json).toMatchSnapshot(); + }); + + it('renders with related items has null', () => { + const store = mockStore({ + intl: { + locale: 'en', + messages: {}, + }, + }); + const relatedItems = [ + { + '@id': '/test-1', + title: 'Title 1', + description: 'Description 1', + }, + null, + ]; + const component = renderer.create( + + + + + , + ); + const json = component.toJSON(); + expect(json).toMatchSnapshot(); + }); +}); diff --git a/src/components/theme/RelatedItems/__snapshots__/RelatedItems.test.jsx.snap b/src/components/theme/RelatedItems/__snapshots__/RelatedItems.test.jsx.snap new file mode 100644 index 0000000000..307a4e76b1 --- /dev/null +++ b/src/components/theme/RelatedItems/__snapshots__/RelatedItems.test.jsx.snap @@ -0,0 +1,107 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Related Items renders with related items 1`] = ` +
+

+ Related Items +

+ +
+`; + +exports[`Related Items renders with related items has null 1`] = ` +
+

+ Related Items +

+ +
+`; + +exports[`Related Items renders without related items 1`] = ``; diff --git a/src/components/theme/View/View.jsx b/src/components/theme/View/View.jsx index 0fb916922b..dc0c5fc98d 100644 --- a/src/components/theme/View/View.jsx +++ b/src/components/theme/View/View.jsx @@ -15,6 +15,7 @@ import qs from 'query-string'; import { ContentMetadataTags, Comments, + RelatedItems, Tags, Toolbar, } from '@plone/volto/components'; @@ -254,6 +255,9 @@ class View extends Component { this.props.content.subjects.length > 0 && ( )} + {config.settings.showRelatedItems && ( + + )} {/* Add opt-in social sharing if required, disabled by default */} {/* In the future this might be parameterized from the app config */} {/*