<a class="flex-inline flex-v-center plain-link font-green font-hover-turquoise font-HNM4-s" href="http://google.com" data-component="MoreInfoLink"><span class="width-1-em"><div class="icon icon--green"><canvas class="icon__canvas" height="26" width="26"></canvas><svg class="icon__svg" aria-hidden="true"><svg viewBox="0 0 26 26"><path class="icon__shape" d="M22.7 12.6l-7.5-7.5c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l5.8 5.8H3.9c-.6 0-1 .4-1 1s.4 1 1 1h15.7l-5.8 5.8c-.4.4-.4 1 0 1.4.2.2.5.3.7.3s.5-.1.7-.3l7.5-7.5c.4-.4.4-1 0-1.4z"></path></svg></svg></div></span><span class="margin-left-s1">more info</span></a>
// @flow

import {spacing, font} from '../../../utils/classnames';
import Icon from '../Icon/Icon';
import trackOutboundLink from '../../../utils/track-outbound-link';

type Props = {|
  url: string,
  name: string,
  screenReaderText?: string
|}

const MoreInfoLink = ({url, name, screenReaderText}: Props) => {
  function handleClick(event) {
    trackOutboundLink(event.currentTarget.href);
  }

  return (
    <a
      onClick={handleClick}
      className={[
        'flex-inline',
        'flex-v-center',
        'plain-link',
        'font-green',
        'font-hover-turquoise',
        font({s: 'HNM4'})].join(' ')} href={url} data-component='MoreInfoLink'>
      <span className='width-1-em'>
        <Icon name='arrow' extraClasses='icon--green' />
      </span>
      <span className={spacing({s: 1}, {margin: ['left']})}>
        {name}
        {screenReaderText && <span className='visually-hidden'> {screenReaderText}</span>}
      </span>
    </a>
  );
};

export default MoreInfoLink;
{
  "name": "more info",
  "url": "http://google.com"
}

There are no notes for this item.