@appearhere/bloom/components/Pagination/PaginationLink.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import cx from 'classnames';

import noop from '../../utils/noop';
import Icon from '../Icon/Icon';
import ScreenReadable from '../ScreenReadable/ScreenReadable';

import css from './PaginationLink.css';

export const NextLink = props => (
  <PaginationLink { ...props }>
    <Icon name="arrow" className={ css.nextArrow } />
  </PaginationLink>
);

export const PreviousLink = props => (
  <PaginationLink { ...props }>
    <Icon name="arrow" className={ css.prevArrow } />
  </PaginationLink>
);

export class PaginationLink extends Component {
  static propTypes = {
    page: PropTypes.number.isRequired,
    children: PropTypes.node.isRequired,
    accessibilityLabel: PropTypes.string,
    active: PropTypes.bool,
    disabled: PropTypes.bool,
    onClick: PropTypes.func,
  };

  static defaultProps = {
    accessibilityLabel: 'go to page',
    onClick: noop,
  };

  handleClick = (e) => {
    const { page, onClick } = this.props;
    onClick(e, page);
  };

  render() {
    const { accessibilityLabel, page, active, children, disabled } = this.props;

    return (
      <a
        href={ !disabled ? `?page=${page}` : null }
        className={ cx(
          css.root,
          active ? css.active : null,
          disabled ? css.disabled : null,
        ) }
        onClick={ this.handleClick }
      >
        { children }
        <ScreenReadable>{ accessibilityLabel } { page }</ScreenReadable>
      </a>
    );
  }
}