@appearhere/bloom/styleguide/components/SiteHeader/SiteHeader.js

Appear Here's pattern library and styleguide

import PropTypes from 'prop-types';
import React from 'react';
import { NavLink } from 'react-router-dom';

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

import css from './SiteHeader.css';

const SiteHeader = ({ version, onLinkClick }) => (
  <div className={ css.root }>
    <NavLink
      exact
      to="/"
      onClick={ onLinkClick }
      className={ css.link }
    >
      <Icon name="appearhere-brackets" className={ css.logo } />
      <ScreenReadable>Back home</ScreenReadable>
    </NavLink>
    <Badge className={ css.version }>v{ version }</Badge>
  </div>
);

SiteHeader.propTypes = {
  onLinkClick: PropTypes.func,
  version: PropTypes.string,
};

SiteHeader.defaultProps = {
  onLinkClick: noop,
};

export default SiteHeader;