Add in My Guardian to Follow Buttons (#13844)

* Add text for following my guardian

* Add in my guardian to the follow cta

* Update the tests

Author: lindseydew

dotcom-rendering/src/components/FollowButtons.test.tsx

@@ -31,18 +31,31 @@ it('should show a follow contributor button for a single contributor when render
 			displayName="Jon Doe"
 		/>,
 	);
-	expect(getByText('Follow Jon Doe')).toBeInTheDocument();
+	expect(getByText('Follow Jon Doe in My Guardian')).toBeInTheDocument();
 });
 
-it('should show a follow contributor button for a single contributor when rendering for apps', async () => {
+it('should not include the in My Guardian when the display name is longer than 21 characters in the follow action', () => {
+	const { getByText } = render(
+		<FollowTagButton
+			isFollowing={false}
+			onClickHandler={() => undefined}
+			displayName="abcdefghijklmnopqrstuv"
+		/>,
+	);
+	expect(getByText('Follow abcdefghijklmnopqrstuv')).toBeInTheDocument();
+});
+
+it('should not include the in My Guardian when the display name is longer than 21 characters in the following action', async () => {
 	const { getByText } = render(
 		<FollowTagButton
 			onClickHandler={() => undefined}
 			isFollowing={true}
-			displayName="Jon Doe"
+			displayName="abcdefghijklmnopqrstuv"
 		/>,
 	);
 	await waitFor(() =>
-		expect(getByText('Following Jon Doe')).toBeInTheDocument(),
+		expect(
+			getByText('Following abcdefghijklmnopqrstuv'),
+		).toBeInTheDocument(),
 	);
 });

dotcom-rendering/src/components/FollowButtons.tsx

@@ -79,7 +79,8 @@ const tagTextSpan = ({
 	displayName?: string;
 }) => (
 	<span>
-		{isFollowing ? 'Following' : 'Follow'} {displayName}
+		{isFollowing ? 'Following' : 'Follow'} {displayName}{' '}
+		{displayName && displayName.length < 21 ? 'in My Guardian' : ''}
 	</span>
 );