react-howl/src/styles/Font.jsx

A unified design system.

import React from 'react';
import PropTypes from 'prop-types';
import withStyles from './withStyles';
import withStylesPropTypes from './withStylesPropTypes';
/**
 * Loads a font.
 *
 * @type {function}
 */
const Font = ({ classNames }) => <div className={classNames.font} />;

Font.propTypes = {
  // eslint-disable-next-line react/no-unused-prop-types
  family: PropTypes.string.isRequired,
  // eslint-disable-next-line react/no-unused-prop-types
  src: PropTypes.string.isRequired,
  // eslint-disable-next-line react/no-unused-prop-types
  fallbacks: PropTypes.arrayOf(
    PropTypes.shape({
      src: PropTypes.string.isRequired,
      format: PropTypes.string.isRequired,
    }),
  ),
  ...withStylesPropTypes,
};

Font.defaultProps = {
  fallbacks: undefined,
};

export default withStyles({
  font: ({ family, src, fallbacks }) => ({
    '@font-face': {
      fontFamily: family,
      src: `url(${src})`,
      fallbacks: fallbacks
        ? fallbacks.map((fallback) => ({
            src: `url(${fallback.src}) format(${fallback.format})`,
          }))
        : undefined,
    },
  }),
})(Font);