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, +};