Misc fixes (#27)

* Fix pure CSS example

* example(css): Hover underline links in content

* example(css-modules): Hover underline links in content

* example(jss): Hover underline links in content

* fix(all): Open links in new tab

* feat(babel): Add transform-class-properties

* Use class properties instead of binding in the constructor

* fix(eslint): Use babel-eslint parser to support class properties

examples/.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets": ["es2015", "react"]
+  "presets": ["es2015", "react"],
+  "plugins": ["transform-class-properties"]
 }

examples/.eslintrc

@@ -1,4 +1,5 @@
 {
+  "parser": "babel-eslint",
   "extends": "airbnb",
   "rules": {
     "react/prop-types": 0

examples/aphrodite/src/components/content/content.js

@@ -25,7 +25,7 @@ const styles = StyleSheet.create({
 const Content = ({ text, media }) => (
   <div>
     <p className={css(styles.text)} dangerouslySetInnerHTML={{ __html: text }} />
-    <a className={css(styles.media)} href={media.expanded_url}>
+    <a className={css(styles.media)} target="_blank" href={media.expanded_url}>
       <img className={css(styles.image)} src={media.media_url_https} alt="" />
     </a>
   </div>

examples/aphrodite/src/components/footer/footer.js

@@ -79,11 +79,9 @@ class Footer extends Component {
     this.state = {
       liked: false,
     };
-
-    this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick() {
+  handleClick = () => {
     this.setState({
       liked: !this.state.liked,
     });

examples/aphrodite/src/components/header/header.js

@@ -42,12 +42,12 @@ const styles = StyleSheet.create({
 const Header = ({ name, profileImageUrl, screenName, url }) => (
   <div className={css(styles.header)}>
     <div className={css(styles.profile)}>
-      <a href={url}>
+      <a target="_blank" href={url}>
         <img className={css(styles.image)} src={profileImageUrl} alt={name} />
       </a>
     </div>
     <div className={css(styles.user)}>
-      <a className={css(styles.url)} href={url}>
+      <a className={css(styles.url)} target="_blank" href={url}>
         <span className={css(styles.name)}>{name}</span>
         <span className={css(styles.screenName)}>@{screenName}</span>
       </a>

examples/css-modules/src/components/content/content.css

@@ -12,6 +12,10 @@
   color: accent;
 }
 
+.text a:hover {
+  text-decoration: underline;
+}
+
 .media {
   border-radius: .35rem;
   border: 1px solid border;

examples/css-modules/src/components/content/content.js

@@ -5,7 +5,7 @@ import styles from './content.css';
 const Content = ({ text, media }) => (
   <div>
     <p className={styles.text} dangerouslySetInnerHTML={{ __html: text }} />
-    <a className={styles.media} href={media.expanded_url}>
+    <a className={styles.media} target="_blank" href={media.expanded_url}>
       <img className={styles.image} src={media.media_url_https} alt="" />
     </a>
   </div>

examples/css-modules/src/components/footer/footer.js

@@ -15,11 +15,9 @@ class Footer extends Component {
     this.state = {
       liked: false,
     };
-
-    this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick() {
+  handleClick = () => {
     this.setState({
       liked: !this.state.liked,
     });

examples/css-modules/src/components/header/header.js

@@ -5,12 +5,12 @@ import styles from './header.css';
 const Header = ({ name, profileImageUrl, screenName, url }) => (
   <div className={styles.header}>
     <div className={styles.profile}>
-      <a href={url}>
+      <a target="_blank" href={url}>
         <img className={styles.image} src={profileImageUrl} alt={name} />
       </a>
     </div>
     <div className={styles.user}>
-      <a className={styles.url} href={url}>
+      <a className={styles.url} target="_blank" href={url}>
         <span className={styles.name}>{name}</span>
         <span className={styles.screenName}>@{screenName}</span>
       </a>

examples/css/package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "src/index.js",
   "scripts": {
-    "start": "../node_modules/.bin/webpack-dev-server --config ../webpack.base.babel.js"
+    "start": "../node_modules/.bin/webpack-dev-server --config webpack.custom.babel.js"
   },
   "author": "Max Stoiber",
   "license": "MIT"

examples/css/src/components/content/content.js

@@ -3,7 +3,7 @@ import React, { PropTypes } from 'react';
 const Content = ({ text, media }) => (
   <div>
     <p className="tweet__text" dangerouslySetInnerHTML={{ __html: text }} />
-    <a className="tweet__media" href={media.expanded_url}>
+    <a className="tweet__media" target="_blank" href={media.expanded_url}>
       <img className="tweet__image" src={media.media_url_https} alt="" />
     </a>
   </div>

examples/css/src/components/footer/footer.js

@@ -13,11 +13,9 @@ class Footer extends Component {
     this.state = {
       liked: false,
     };
-
-    this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick() {
+  handleClick = () => {
     this.setState({
       liked: !this.state.liked,
     });
@@ -49,7 +47,7 @@ class Footer extends Component {
           <div className="footer__icon">
             <RetweetIcon />
           </div>
-          <button className="footer__button" onClick={this.handleClick}>
+          <button className="footer__icon footer__button" onClick={this.handleClick}>
             <LikeIcon className={liked && 'footer__liked'} />
           </button>
           <div className="footer__icon">

examples/css/src/components/header/header.js

@@ -3,12 +3,12 @@ import React, { PropTypes } from 'react';
 const Header = ({ name, profileImageUrl, screenName, url }) => (
   <div className="header">
     <div className="header__profile">
-      <a href={url}>
+      <a target="_blank" href={url}>
         <img className="header__image" src={profileImageUrl} alt={name} />
       </a>
     </div>
     <div className="header__user">
-      <a className="header__user-url" href={url}>
+      <a className="header__user-url" target="_blank" href={url}>
         <span className="header__user-name">{name}</span>
         <span className="header__user-screenName">@{screenName}</span>
       </a>

examples/css/src/styles/main.css

@@ -111,6 +111,10 @@ svg {
   color: #1da1f2;
 }
 
+.tweet__text a:hover {
+  text-decoration: underline;
+}
+
 .tweet__media {
   border-radius: .35rem;
   border: 1px solid #e1e8ed;

examples/css/webpack.custom.babel.js

@@ -0,0 +1,13 @@
+import { extendBaseConfig } from '../webpack.base.babel';
+
+export default extendBaseConfig({
+  module: {
+    loaders: [
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        loader: 'style!css',
+      },
+    ],
+  },
+});

examples/jss/src/components/content/content.js

@@ -8,6 +8,12 @@ const styles = {
     lineHeight: '1.5em',
     margin: 0,
     padding: '.65625rem 0 .98438rem',
+    '& a': {
+      color: '#1da1f2',
+    },
+    '& a:hover': {
+      textDecoration: 'underline',
+    },
   },
   media: {
     borderRadius: '.35rem',
@@ -25,7 +31,7 @@ const styles = {
 const Content = ({ text, media, sheet: { classes } }) => (
   <div>
     <p className={classes.text} dangerouslySetInnerHTML={{ __html: text }} />
-    <a className={classes.media} href={media.expanded_url}>
+    <a className={classes.media} target="_blank" href={media.expanded_url}>
       <img className={classes.image} src={media.media_url_https} alt="" />
     </a>
   </div>

examples/jss/src/components/footer/footer.js

@@ -78,11 +78,9 @@ class Footer extends Component {
     this.state = {
       liked: false,
     };
-
-    this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick() {
+  handleClick = () => {
     this.setState({
       liked: !this.state.liked,
     });

examples/jss/src/components/header/header.js

@@ -42,12 +42,12 @@ const styles = {
 const Header = ({ name, profileImageUrl, screenName, url, sheet }) => (
   <div className={sheet.classes.header}>
     <div className={sheet.classes.profile}>
-      <a href={url}>
+      <a target="_blank" href={url}>
         <img className={sheet.classes.image} src={profileImageUrl} alt={name} />
       </a>
     </div>
     <div className={sheet.classes.user}>
-      <a className={sheet.classes.url} href={url}>
+      <a className={sheet.classes.url} target="_blank" href={url}>
         <span className={sheet.classes.name}>{name}</span>
         <span className={sheet.classes.screenName}>@{screenName}</span>
       </a>

examples/package.json

@@ -15,7 +15,9 @@
   },
   "devDependencies": {
     "babel-core": "6.11.4",
+    "babel-eslint": "^6.1.2",
     "babel-loader": "6.2.4",
+    "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-preset-es2015": "6.9.0",
     "babel-preset-react": "6.11.1",
     "babel-register": "6.11.6",

examples/radium/src/components/content/content.js

@@ -25,7 +25,7 @@ const styles = {
 const Content = ({ text, media }) => (
   <div>
     <p style={styles.text} dangerouslySetInnerHTML={{ __html: text }} />
-    <a style={styles.media} href={media.expanded_url}>
+    <a style={styles.media} target="_blank" href={media.expanded_url}>
       <img style={styles.image} src={media.media_url_https} alt="" />
     </a>
   </div>

examples/radium/src/components/footer/footer.js

@@ -79,11 +79,9 @@ class Footer extends Component {
     this.state = {
       liked: false,
     };
-
-    this.handleClick = this.handleClick.bind(this);
   }
 
-  handleClick() {
+  handleClick = () => {
     this.setState({
       liked: !this.state.liked,
     });

examples/radium/src/components/header/header.js

@@ -42,12 +42,12 @@ const styles = {
 const Header = ({ name, profileImageUrl, screenName, url }) => (
   <div style={styles.header}>
     <div style={styles.profile}>
-      <a href={url}>
+      <a target="_blank" href={url}>
         <img style={styles.image} src={profileImageUrl} alt={name} />
       </a>
     </div>
     <div style={styles.user}>
-      <a style={styles.url} href={url}>
+      <a style={styles.url} target="_blank" href={url}>
         <span style={styles.name}>{name}</span>
         <span style={styles.screenNameBefore}></span>
         <span style={styles.screenName}>@{screenName}</span>

examples/shared/data/755481795206971392.json

@@ -18,7 +18,7 @@
   "user": {
     "name": "Max Stoiber",
     "screen_name": "mxstbr",
-    "url": "https:\/\/t.co\/uAtI6h0Zng",
+    "url": "https:\/\/twitter.com\/mxstbr",
     "profile_image_url_https": "https:\/\/mxstbr.com\/headshot.jpeg"
   },
   "retweet_count": 32,

examples/shared/utils/text/text.js

@@ -4,14 +4,14 @@ export const transform = data => {
   data.entities.user_mentions.forEach(userMention => {
     text = text.replace(
       `@${userMention.screen_name}`,
-      `<a href="https://twitter.com/${userMention.screen_name}">@${userMention.screen_name}</a>`
+      `<a target="_blank" href="https://twitter.com/${userMention.screen_name}">@${userMention.screen_name}</a>`
     );
   });
 
   data.entities.urls.forEach(url => {
     text = text.replace(
       url.url,
-      `<a href="${url.url}">${url.display_url}</a>`
+      `<a target="_blank" href="${url.url}">${url.display_url}</a>`
     );
   });
 

examples/shared/utils/text/text.spec.js

@@ -21,7 +21,7 @@ describe('text', () => {
         },
       };
 
-      const expected = '\ud83d\udc4f Love love love this article by <a href="https://twitter.com/chantastic">@chantastic</a>. CSS-in-JS isn\u2019t a campaign against CSS! <a href="https://t.co/P3QdkX88rs">medium.com/learnreact/sca…</a>';
+      const expected = '\ud83d\udc4f Love love love this article by <a target="_blank" href="https://twitter.com/chantastic">@chantastic</a>. CSS-in-JS isn\u2019t a campaign against CSS! <a target="_blank" href="https://t.co/P3QdkX88rs">medium.com/learnreact/sca…</a>';
 
       assert.equal(transform(data), expected);
     });