WS-1693 - Align WS Topics Tags to PS Design and Refactor to meet component standards

[pvaliani]

Resolves JIRA: https://bbc.atlassian.net/browse/WS-1693

Summary

Updates the World Service implementation of topic tags to visually and structurally match the existing Public Service design.

Code changes

• Refactors TopicTag and RelatedTopic components to suit Simorgh's latest component standards
• Updates the tags to reflect public service designs
• Updates snapshots, relocates tests
• Adds new and previously unavailable documentation for RelatedTopics

PS Aligned Topic Tags Locally:

Current Topic Tags on Live:

Developer Checklist

• [ ] UX
  • [ ] UX Criteria met (visual UX & screenreader UX)
• [ ] Accessibility
  • [ ] Accessibility Acceptance Criteria met
  • [ ] Accessibility swarm completed
  • [ ] Component Health updated
  • [ ] P1 accessibility bugs resolved
  • [ ] P2/P3 accessibility bugs planned (if not resolved)
• [ ] Security
  • [ ] Security issues addressed
  • [ ] Threat Model updated
• [ ] Documentation
  • [ ] Docs updated (runbook, READMEs)
• [ ] Testing
  • [ ] Feature tested on relevant environments
• [ ] Comms
  • [ ] Relevant parties notified of changes

Testing

• [ ] Manual Testing required?
  • [ ] Local (Ready-For-Test, Local)
  • [ ] Test (Ready-For-Test, Test)
  • [ ] Preview (Ready-For-Test, Preview)
  • [ ] Live (Ready-For-Test, Live)
• [ ] Manual Testing complete?
  • [ ] Local
  • [ ] Test
  • [ ] Preview
  • [ ] Live

Additional Testing Steps

1. Run the Next app
2. Navigate to http://localhost:7081/mundo/articles/cp8y1k4nj70o?renderer_env=live or any article page
3. See the topic tags

Useful Links

• Coding Standards
• Repository use guidelines
• Add Links to useful resources related to this PR if applicable.