refactor: move user description highlights to github user organism (#68)

This removes all references of GitHub from the user molecule.

Author: byCedric

src/molecules/user/elements.js

@@ -61,12 +61,3 @@ export const UserDescription = styled.div`
 	text-align: center;
 	line-height: 1.5;
 `;
-
-/**
- * The user's description highlights styles keywords within this description.
- */
-export const UserDescriptionHighlight = styled.a`
-	text-decoration: none;
-	color: #24292e;
-	font-weight: 600;
-`;

src/molecules/user/prop-type.js

@@ -9,8 +9,11 @@ export const propTypes = {
 	avatarUrl: PropTypes.string.isRequired,
 	/** An optional description of this person. */
 	description: PropTypes.string,
+	/** An optional object with all decorators for user's description highlights. */
+	highlights: PropTypes.object,
 };
 
 export const defaultProps = {
 	description: '',
+	highlights: {},
 };

src/molecules/user/user.js

@@ -10,25 +10,8 @@ import {
 	UserAvatar,
 	UserName,
 	UserDescription,
-	UserDescriptionHighlight,
 } from './elements';
 
-const decorators = {
-	'@': (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) {
 	const identifier = `${props.name} (${props.username})`;
 
@@ -49,7 +32,7 @@ export default function UserMolecule(props) {
 			</UserContainerMeta>
 			<UserContainerInfo>
 				<UserDescription>
-					<Highlight decorators={decorators}>
+					<Highlight decorators={props.highlights}>
 						{props.description}
 					</Highlight>
 				</UserDescription>

src/organisms/github-user/elements.js

@@ -0,0 +1,22 @@
+import styled from 'styled-components/macro';
+
+/**
+ * This element styles a mention in the user description, which links to this organization or user.
+ */
+export const GithubUserMentionHighlight = styled.a`
+	text-decoration: none;
+	color: #24292e;
+	font-weight: 600;
+
+	&:hover {
+		text-decoration: underline;
+	}
+`;
+
+/**
+ * This element styles a particular keyword, starting with a character, in the user description.
+ */
+export const GithubUserKeywordHighlight = styled.strong`
+	color: #24292e;
+	font-weight: 600;
+`;

src/organisms/github-user/github-user.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AsyncUser } from 'src/providers/github';
 import User from 'src/molecules/user';
+import highlights from './highlights';
 
 export default function GithubUserOrganism() {
 	return (
@@ -12,6 +13,7 @@ export default function GithubUserOrganism() {
 						username={data.login}
 						avatarUrl={data.avatar_url}
 						description={data.bio}
+						highlights={highlights}
 					/>
 				)}
 			</AsyncUser.Resolved>

src/organisms/github-user/highlights/index.js

@@ -0,0 +1,7 @@
+import KeywordHighlight from './keyword';
+import MentionHighlight from './mention';
+
+export default {
+	...KeywordHighlight.decorator,
+	...MentionHighlight.decorator,
+};

src/organisms/github-user/highlights/keyword.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { GithubUserKeywordHighlight } from '../elements';
+
+export default function GithubUserOrganismKeyword(props) {
+	return (
+		<GithubUserKeywordHighlight>
+			{props.children}
+		</GithubUserKeywordHighlight>
+	);
+}
+
+GithubUserOrganismKeyword.decorator = {
+	'#': (match, text, key) => <GithubUserOrganismKeyword key={key} label={text} />,
+}
+
+GithubUserOrganismKeyword.propTypes = {
+	/** The text to show for this keyword.  */
+	label: PropTypes.string.isRequired,
+};

src/organisms/github-user/highlights/mention.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { GithubUserMentionHighlight } from '../elements';
+
+export default function GithubUserOrganismMention(props) {
+	return (
+		<GithubUserMentionHighlight
+			href={`https://github.com/${props.username}`}
+			target='_blank'
+			rel='noopener noreferrer'
+		>
+			{props.label}
+		</GithubUserMentionHighlight>
+	);
+}
+
+GithubUserOrganismMention.decorator = {
+	'@': (match, text, key) => (
+		<GithubUserOrganismMention
+			key={key}
+			label={match}
+			username={text}
+		/>
+	),
+};
+
+GithubUserOrganismMention.propTypes = {
+	/** The text to show for this link or mention.  */
+	label: PropTypes.string.isRequired,
+	/** The GitHub username to use in the external link. */
+	username: PropTypes.string.isRequired,
+};