Create topic tags component
Closed this issue · 1 comments
Is your feature request related to a problem? Please describe.
Need to build a new component to storybook to show topics on simorgh pages.
Designs
Screenreader UX
a11y a/c
JIRA NEWSWORLDSERVICE-1103
Tags
The tag should use the following fields:
'topicName:' to get the name of the Topic in the correct language
'topicId': to get the link for the topic (this is the TIPO ID)
The topic link will be of the format:
https:/www.bbc.com/{service}/topics/{topicid}
https:/www.bbc.com/{service}/{var}/topics/{topicid}
Users can click the tag to go the related topic page
E.g. the 'Europa' tag on the Mundo site would link to: https://www.bbc.com/mundo/topics/cyx5krnw43pt
NB: For CPS assets the about Schema.org will remain unchanged and continue to utilise the existing tags data in ares
Describe the solution you'd like
One psammead package, composed of:
individual topic tag component
Create a new react component for the topic tag with props:
- Topic name
- Topic link
Use existing service prop and ensure topic tag height matches that required for the service: https://app.zeplin.io/project/5d4d77b1fcbfc79bf47e0294/screen/5fbbe4929669f3634150a667
topic tags component
Encapsulates a collection of topic tag components, handles the logic on breakpoints and spacing.
The "related content" heading is not a part of the topic tags component, and is instead done in Simorgh.
Will require the direction prop.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Testing notes
[Tester to complete]
Dev insight: Will there be any potential regression? etc
- This feature is expected to need manual testing.
Additional context
Add any other context or screenshots about the feature request here.
Just added the a11y swarm label to this issue, we'll swarm it with the media folks when it's on storybook. Thanks!