Merge pull request #3 from jaebradley/fixes

refactor(author): fix minor issues and renamed

Author: jaebradley

.storybook/config.js

@@ -17,7 +17,7 @@ setTimeout(() => setOptions({
 
 function loadStories() {
   require('../src/MadeWith/MadeWith.stories.js');
-  require('../src/Author/Author.stories.js');
+  require('../src/Maker/Maker.stories.js');
 }
 
 configure(loadStories, module);

src/MadeWith/MadeWith.stories.js

@@ -17,7 +17,7 @@ storiesOf('Made With', module)
     <MadeWith
       love
       react
-      author={{
+      maker={{
         identifier: 'https://github.com/jaebradley'
       }}
     />
@@ -26,7 +26,7 @@ storiesOf('Made With', module)
     <MadeWith
       love
       react
-      author={{
+      maker={{
         identifier: '[email protected]',
         display: 'Jae Bradley',
         iconColor: 'blue',
@@ -37,7 +37,7 @@ storiesOf('Made With', module)
     <MadeWith
       react
       love
-      author={{
+      maker={{
         identifier: 'https://github.com/jaebradley',
         display: <FontAwesomeIcon icon={ faUserSecret } />,
         showIcon: false,
@@ -49,7 +49,7 @@ storiesOf('Made With', module)
       love
       react
       separator={ <FontAwesomeIcon icon={ faPlus } /> }
-      author={{
+      maker={{
         identifier: 'https://github.com/jaebradley'
       }}
     />

src/MadeWith/index.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import buildIcons from './buildIcons';
-import Author from '../Author';
+import Maker from '../Maker';
 
 class MadeWith extends Component {
   constructor(props) {
@@ -22,18 +22,18 @@ class MadeWith extends Component {
   }
 
   render() {
-    const { className, author } = this.props;
+    const { className, maker } = this.props;
     return (
       <div className={ classNames(className, 'made-with') }>
         Made with
         { ' ' }
         { this.buildIcons() }
-        { author &&
-          <span className={ 'author-wrapper' }> by
+        { maker &&
+          <span className={ 'maker-wrapper' }> by
             { ' ' }
-            <Author
-              className={ 'author' }
-              { ...author }
+            <Maker
+              { ...maker }
+              className={ 'maker' }
             />
           </span>
         }
@@ -43,7 +43,7 @@ class MadeWith extends Component {
 }
 
 MadeWith.defaultProps = {
-  author: {
+  maker: {
     display: '',
     showIcon: true,
     iconColor: '',
@@ -55,7 +55,7 @@ MadeWith.defaultProps = {
 }
 
 MadeWith.propTypes = {
-  author: PropTypes.shape({
+  maker: PropTypes.shape({
     identifier: PropTypes.string.isRequired,
     display: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     showIcon: PropTypes.bool,

src/Author/Author.stories.js src/Maker/Maker.stories.jssrc/Author/Author.stories.js renamed to src/Maker/Maker.stories.js

@@ -4,32 +4,32 @@ import { withInfo } from '@storybook/addon-info';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
 import { faUserSecret } from '@fortawesome/fontawesome-free-solid';
 
-import Author from './index';
+import Maker from './index';
 // import README from './README.md';
 
 // const wrapComponent = (component) => (
 //   withInfo(README)(() => component)
 // );
 
-storiesOf('Author', module)
+storiesOf('Maker', module)
   .add('basic usage', () => (
-    <Author identifier={ 'Jae Bradley' } />
+    <Maker identifier={ 'Jae Bradley' } />
   ))
   .add('with email address, no icon', () => (
-    <Author identifier={ '[email protected]' } showIcon={ false } />
+    <Maker identifier={ '[email protected]' } showIcon={ false } />
   ))
   .add('Twitter URL with icon and inferred display name', () => (
-    <Author identifier={ 'https://twitter.com/jaebradley' } />
+    <Maker identifier={ 'https://twitter.com/jaebradley' } />
   ))
   .add('GitHub URL with icon and explicit display name', () => (
-    <Author identifier={ 'https://github.com/jaebradley' } display={ 'Jae Bradley' } />
+    <Maker identifier={ 'https://github.com/jaebradley' } display={ 'Jae Bradley' } />
   ))
   .add('with email address and envelope icon', () => (
-    <Author identifier={ '[email protected]' } />
+    <Maker identifier={ '[email protected]' } />
   ))
   .add('url without explicit display name', () => (
-    <Author identifier={ 'https://example.com' } />
+    <Maker identifier={ 'https://example.com' } />
   ))
   .add('url with explicit display name', () => (
-    <Author identifier={ 'https://example.com' } display={ 'Example Dot Com' } />
+    <Maker identifier={ 'https://example.com' } display={ 'Example Dot Com' } />
   ));

src/Author/index.js src/Maker/index.jssrc/Author/index.js renamed to src/Maker/index.js

@@ -4,10 +4,10 @@ import isEmail from 'isemail';
 import urlParse from 'url';
 import parseGitHubUrl from 'parse-github-url';
 import FontAwesomeIcon from '@fortawesome/react-fontawesome';
-import { faEnvelope } from '@fortawesome/fontawesome-free-solid';
+import { faEnvelope, faLink } from '@fortawesome/fontawesome-free-solid';
 import { faTwitter, faGithub } from '@fortawesome/fontawesome-free-brands';
 
-class Author extends Component {
+class Maker extends Component {
   constructor(props) {
     super(props);
   }
@@ -26,7 +26,13 @@ class Author extends Component {
             { display || identifier }
           </a>
           { showIcon &&
-            <span className={ 'author-icon' }> { <FontAwesomeIcon icon={ faEnvelope } style={ { color: iconColor } }/> }</span>
+            <span className={ 'maker-icon' }>
+              { ' ' }
+              <FontAwesomeIcon
+                icon={ faEnvelope }
+                style={ { color: iconColor } }
+              />
+            </span>
           }
         </span>
       );
@@ -41,19 +47,20 @@ class Author extends Component {
       if (url.hostname === 'twitter.com') {
         icon = <FontAwesomeIcon icon={ faTwitter } style={ { color: iconColor || '#00aced' } } />
         // https://stackoverflow.com/questions/5948051/regex-extract-twitterusername-from-url#comment43986805_5948248
-        username = identifier.match(/^https?:\/\/(www\.)?twitter\.com\/(#!\/)?([^/]+)(\/\w+)*$/)[3];
+        username = `@${identifier.match(/^https?:\/\/(www\.)?twitter\.com\/(#!\/)?([^/]+)(\/\w+)*$/)[3]}`;
       } else if (url.hostname === 'github.com') {
         icon = <FontAwesomeIcon icon={ faGithub } style={ { color: iconColor || 'black' } } />
-        username = parseGitHubUrl(identifier).owner;
+        username = `@${parseGitHubUrl(identifier).owner}`;
       } else {
-        return <a href={ identifier }>{ display || identifier }</a>;
+        icon = <FontAwesomeIcon icon={ faLink } style={ { color: iconColor || 'black' } } />
+        username = identifier;
       }
 
       return (
         <span>
-          <a href={ identifier }>{ display || `@${username}` }</a>
+          <a href={ identifier }>{ display || username }</a>
           { showIcon &&
-            <span className={'author-icon'}> { icon }</span> }
+            <span className={'maker-icon'}> { icon }</span> }
         </span>
       );
     }
@@ -62,17 +69,18 @@ class Author extends Component {
   }
 }
 
-Author.defaultProps = {
-  displayName: '',
+Maker.defaultProps = {
+  identifier: '',
+  display: '',
   showIcon: true,
   iconColor: '',
 };
 
-Author.propTypes = {
-  identifier: PropTypes.string.isRequired,
+Maker.propTypes = {
+  identifier: PropTypes.string,
   display: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   showIcon: PropTypes.bool,
   iconColor: PropTypes.string,
 };
 
-export default Author;
+export default Maker;