feature: implement mention link in user molecule (#65)

* feature: implement mention link * style: revert avatar atom changes * style: revert highlight atom changes * style: revert user molecule double quotes * style: revert highlight atom trailing comma removal * refactor: revert user molecule highlight weight The 600 weight matches GitHub's version. * style: use single quotes in user molecule * fixup! style: use single quote in user molecule * fixup! style: use single quotes in user molecule * refactor: use match from decorator for github link * fixup! refactor: use match from decorator for github link * style: fix indentation and add trailing comma in user molecule * style: use proper order of styling in user molecule
byCedric · Oct 19, 2018 · 0a0cb92 · 0a0cb92
1 parent 14d6efa
commit 0a0cb92
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/src/molecules/user/elements.js b/src/molecules/user/elements.js
@@ -65,7 +65,8 @@ export const UserDescription = styled.div`
 /**
  * The user's description highlights styles keywords within this description.
  */
-export const UserDescriptionHighlight = styled.strong`
+export const UserDescriptionHighlight = styled.a`
+	text-decoration: none;
 	color: #24292e;
 	font-weight: 600;
 `;
diff --git a/src/molecules/user/user.js b/src/molecules/user/user.js
@@ -14,8 +14,19 @@ import {
 } from './elements';
 
 const decorators = {
-	'@': (segment, match, key) => <UserDescriptionHighlight key={key}>{segment}</UserDescriptionHighlight>,
-	'#': (segment, match, key) => <UserDescriptionHighlight key={key}>{match}</UserDescriptionHighlight>,
+	'@': (segment, match, key) => (
+		<UserDescriptionHighlight
+			key={key}
+			href={`https://github.com/${match}`}
+			target='_blank'
+			rel='noopener noreferrer'
+		>
+			{segment}
+		</UserDescriptionHighlight>
+	),
+	'#': (segment, match, key) => (
+		<UserDescriptionHighlight key={key}>{match}</UserDescriptionHighlight>
+	)
 };
 
 export default function UserMolecule(props) {