-
-
Notifications
You must be signed in to change notification settings - Fork 695
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: Ichim David <[email protected]> Co-authored-by: David Glick <[email protected]>
- Loading branch information
3 people
authored
Dec 18, 2024
1 parent
0450e50
commit 928afbd
Showing
26 changed files
with
318 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 |
70 changes: 70 additions & 0 deletions
70
packages/volto/src/components/theme/RelatedItems/RelatedItems.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
83 changes: 83 additions & 0 deletions
83
packages/volto/src/components/theme/RelatedItems/RelatedItems.test.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| }); | ||
| }); |
Oops, something went wrong.