@hackoregon/component-library/src/ChartTitle/ChartTitle.js

Official repo for Hack Oregon React component library

import React from "react";
import PropTypes from "prop-types";
import { css } from "emotion";

const titleStyle = css`
  display: block;
  font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 21px;
  font-weight: bold;
  text-align: center;
  margin: 0;

  @media (max-width: 640px) {
    text-align: left;
  }
`;

const subtitleStyle = css`
  display: block;
  font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  text-align: center;
  margin: 10px 0;

  @media (max-width: 640px) {
    text-align: left;
  }
`;

const ChartTitle = ({ title, subtitle }) =>
  title || subtitle ? (
    <figcaption>
      {title ? <h2 className={titleStyle}>{title}</h2> : null}
      {subtitle ? <h3 className={subtitleStyle}>{subtitle}</h3> : null}
    </figcaption>
  ) : null;

ChartTitle.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string
};

ChartTitle.defaultProps = {};

export default ChartTitle;