Link

Link

<div id="link"></div>

:global(.container) {
  width: 240px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

:global(.container > * ~ *) {
  margin-top: 8px;
}

:global(.hub-link) {
  text-align: center;
}

:global(.hub-icon) {
  margin: 16px 0 8px;
}

import React, {Component} from 'react';
import {render} from 'react-dom';
import classNames from 'classnames';
import Link, {linkHOC, setCompatibilityMode} from '@jetbrains/ring-ui/components/link/link';
import Icon from '@jetbrains/ring-ui/components/icon/icon';
import Toggle from '@jetbrains/ring-ui/components/toggle/toggle';
import hubLogo from '@jetbrains/logos/hub/hub.svg';

class CustomComponent extends Component {
  render() {
    const {active, activeClassName, className,...props} = this.props;
    const classes = classNames(className, {
      [activeClassName]: active
    });
    return (
      <a
        {...props}
        className={className}
      />
    );
  }
}

const CustomLink = linkHOC(CustomComponent);
class LinkDemo extends Component {
  state = {compatibility: false};

  changeCompatibility = () => {
    setCompatibilityMode(!this.state.compatibility);

    this.setState({compatibility: !this.state.compatibility});
  };

  render() {
    return (
     <div className="container">
       <Link href="#hash">Ordinary link</Link>
       <Link href="#hash" active>Active link (inherits color)</Link>
       <Link href="#hash" pseudo>Pseudo link (no underline on hover)</Link>
       <CustomLink href="#hash">Custom link component</CustomLink>
       <CustomLink href="#hash" active>Active custom link component</CustomLink>
       <Link href="#hash">Link with a very long text, wrapping over lines</Link>

       <Link href="#hash" className="hub-link">
        {WrapText => [
          <Icon key="icon" glyph={hubLogo} size={Icon.Size.Size128} className="hub-icon"/>,
          <div key="text"><WrapText>Link with non-text content</WrapText></div>
        ]}
       </Link>

       <span>
         <Toggle onChange={this.changeCompatibility}>Compatibility mode</Toggle>
       </span>
     </div>
    );
  }
}
render(<LinkDemo />, document.getElementById('link'));