Merge pull request #4500 from bbc/add-topic-tag-onclick

Forward onClick to anchor in TopicTag

Author: HarryVerhoef

packages/components/psammead-topic-tags/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 | Version | Description |
 |---------|-------------|
+| 0.1.0-alpha.9 | [PR#4500](https://github.com/bbc/psammead/pull/4500) Forward onClick to anchor on TopicTag |
 | 0.1.0-alpha.8 | [PR#4497](https://github.com/bbc/psammead/pull/4497) Bump psammead-styles |
 | 0.1.0-alpha.7 | [PR#4496](https://github.com/bbc/psammead/pull/4496) Forward ref in TopicTag and check single child type |
 | 0.1.0-alpha.6 | [PR#4486](https://github.com/bbc/psammead/pull/4486) upgrade minor/patch dependencies |

packages/components/psammead-topic-tags/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbc/psammead-topic-tags",
-  "version": "0.1.0-alpha.8",
+  "version": "0.1.0-alpha.9",
   "main": "dist/index.js",
   "module": "esm/index.js",
   "sideEffects": false,

packages/components/psammead-topic-tags/src/index.jsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { string, shape, node } from 'prop-types';
+import { string, shape, node, func } from 'prop-types';
 import styled from '@emotion/styled';
 import { C_LUNAR, C_EBON, C_METAL } from '@bbc/psammead-styles/colours';
 import {
@@ -57,8 +57,8 @@ const SingleTopicTagItem = styled.div`
   }
 `;
 
-export const TopicTag = forwardRef(({ name, link }, ref) => (
-  <a href={link} ref={ref}>
+export const TopicTag = forwardRef(({ name, link, onClick }, ref) => (
+  <a href={link} onClick={onClick} ref={ref}>
     {name}
   </a>
 ));
@@ -100,8 +100,11 @@ export const TopicTags = ({ children, script, service }) => {
 TopicTag.propTypes = {
   name: string.isRequired,
   link: string.isRequired,
+  onClick: func,
 };
 
+TopicTag.defaultProps = { onClick: null };
+
 TopicTags.propTypes = {
   children: node,
   script: shape(scriptPropType).isRequired,