import React, { PureComponent } from 'react';
import Link from '../../components/link';

class LinkTest extends PureComponent {
  handleClick = () => {
    console.log('Clicked on a link');
  };

  render () {
    return (
      <article>
        <header>
          <h1>Links</h1>
        </header>
        <div className="component-spec">
          <div className="preview">
            <p><Link url="#">I'm a link</Link></p>
            <p><Link onClick={this.handleClick}>I'm a link</Link></p>
          </div>
        </div>
      </article>
    );
  }
}

export default LinkTest;

import React, { PureComponent } from 'react';
import { Link, Heading1, Section } from '../../components/';
import { BrowserRouter as Router, Link as ReactRouterLink } from 'react-router-dom';

Link.use(ReactRouterLink);

class LinkTest extends PureComponent {
  handleClick = () => {
    console.log('Clicked on a link');
  };

  render () {
    return (
      <Router>
        <article>
          <Section color="neutral" dark>
            <Heading1>Links</Heading1>
          </Section>
          <div className="component-spec">
            <div className="preview">
              <p><Link to="http://www.facebook.com" target="_blank">I'm an external link</Link></p>
              <p><Link to="#" onClick={this.handleClick}>I'm an internal link</Link></p>
            </div>
          </div>
        </article>
      </Router>
    );
  }
}

export default LinkTest;

Use the Link component from react-router in combination with our custom styled Link
Use the Link component from react-router in combination with our custom styled Link
