diff --git a/src/molecules/user/elements.js b/src/molecules/user/elements.js
index 1402791..3018c0f 100644
--- a/src/molecules/user/elements.js
+++ b/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;
-`;
diff --git a/src/molecules/user/prop-type.js b/src/molecules/user/prop-type.js
index 1636f8f..998c9f3 100644
--- a/src/molecules/user/prop-type.js
+++ b/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: {},
};
diff --git a/src/molecules/user/user.js b/src/molecules/user/user.js
index b4b3e4b..d9ab366 100644
--- a/src/molecules/user/user.js
+++ b/src/molecules/user/user.js
@@ -10,25 +10,8 @@ import {
UserAvatar,
UserName,
UserDescription,
- UserDescriptionHighlight,
} from './elements';
-const decorators = {
- '@': (segment, match, key) => (
-
- {segment}
-
- ),
- '#': (segment, match, key) => (
- {match}
- )
-};
-
export default function UserMolecule(props) {
const identifier = `${props.name} (${props.username})`;
@@ -49,7 +32,7 @@ export default function UserMolecule(props) {
-
+
{props.description}
diff --git a/src/organisms/github-user/elements.js b/src/organisms/github-user/elements.js
new file mode 100644
index 0000000..aa30611
--- /dev/null
+++ b/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;
+`;
diff --git a/src/organisms/github-user/github-user.js b/src/organisms/github-user/github-user.js
index 4bf2873..b07dcff 100644
--- a/src/organisms/github-user/github-user.js
+++ b/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}
/>
)}
diff --git a/src/organisms/github-user/highlights/index.js b/src/organisms/github-user/highlights/index.js
new file mode 100644
index 0000000..7729952
--- /dev/null
+++ b/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,
+};
diff --git a/src/organisms/github-user/highlights/keyword.js b/src/organisms/github-user/highlights/keyword.js
new file mode 100644
index 0000000..095f950
--- /dev/null
+++ b/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 (
+
+ {props.children}
+
+ );
+}
+
+GithubUserOrganismKeyword.decorator = {
+ '#': (match, text, key) => ,
+}
+
+GithubUserOrganismKeyword.propTypes = {
+ /** The text to show for this keyword. */
+ label: PropTypes.string.isRequired,
+};
diff --git a/src/organisms/github-user/highlights/mention.js b/src/organisms/github-user/highlights/mention.js
new file mode 100644
index 0000000..677f585
--- /dev/null
+++ b/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 (
+
+ {props.label}
+
+ );
+}
+
+GithubUserOrganismMention.decorator = {
+ '@': (match, text, key) => (
+
+ ),
+};
+
+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,
+};