Rough implementation

Author: frederickobrien

dotcom-rendering/src/components/CommentCount.importable.tsx

@@ -94,6 +94,7 @@ export const CommentCount = ({ discussionApiUrl, shortUrlId }: Props) => {
 			css={containerStyles}
 			data-testid="comment-counts"
 			value={`${long} comments on this article`}
+			data-gu-name="comment-count"
 		>
 			<a
 				href="#comments"

dotcom-rendering/src/components/Contributor.tsx

@@ -93,6 +93,7 @@ export const Contributor = ({ byline, tags, format, source }: Props) => (
 		aria-label="Contributor info"
 		data-component="meta-byline"
 		data-link-name="byline"
+		data-gu-name="byline"
 	>
 		{format.design !== ArticleDesign.Interview && (
 			<div

dotcom-rendering/src/components/Dateline.tsx

@@ -53,7 +53,11 @@ export const Dateline = ({
 	};
 	if (secondaryDateline && !secondaryDateline.includes(primaryDateline)) {
 		return (
-			<details css={datelineStyles} style={mobileColour}>
+			<details
+				css={datelineStyles}
+				style={mobileColour}
+				data-gu-name="dateline"
+			>
 				<summary css={primaryStyles}>
 					<span css={hoverUnderline}>{primaryDateline}</span>
 				</summary>
@@ -62,7 +66,7 @@ export const Dateline = ({
 		);
 	}
 	return (
-		<div css={datelineStyles} style={mobileColour}>
+		<div css={datelineStyles} style={mobileColour} data-gu-name="dateline">
 			{primaryDateline}
 		</div>
 	);

dotcom-rendering/src/components/FollowWrapper.importable.tsx

@@ -172,6 +172,7 @@ export const FollowWrapper = ({ id, displayName }: Props) => {
 					}
 				}
 			`}
+			data-gu-name="follow"
 		>
 			{showFollowTagButton && (
 				<FollowTagButton

dotcom-rendering/src/components/LiveblogNotifications.importable.tsx

@@ -96,6 +96,7 @@ export const LiveblogNotifications = ({ id, displayName }: Props) => {
 					}
 				}
 			`}
+			data-gu-name="liveblog-notifications"
 		>
 			<FollowNotificationsButton
 				isFollowing={isFollowingNotifications ?? false}

dotcom-rendering/src/components/ShareButton.importable.tsx

@@ -126,6 +126,7 @@ export const CopyNativeShareButton = ({
 				sharedButtonStyles(sizeXSmall),
 				isLiveBlogMeta && liveBlogMobileMeta(isCopied),
 			])}
+			data-gu-name="share-button"
 		>
 			{isCopied ? 'Link copied' : 'Share'}
 		</Button>