interface-previews

text.css

.text {
  font-size: 1.2rem;
  color: var(--color-secondary);

  &--preview {
    opacity: 0.1;
    height: 13px;
    width: 100%;
    background: var(--color-secondary);
  }

  @media (--medium-screen) {
    font-size: 1.4rem;

    &--preview {
      height: 16px;
    }
  }
}

Text.js

import React, { PropTypes } from 'react';
import cn from 'classnames';

const Text = ({ 
  className, 
  tag, 
  preview, 
  previewStyle, 
  children, 
  ...props 
}) =>
  React.createElement(tag, {
    style: preview ? previewStyle : {},
    className: cn('text', {
      'text--preview': preview,
    }, className),
    ...props,
  }, children);

Text.propTypes = {
  className: PropTypes.string,
  tag: PropTypes.string.isRequired,
  preview: PropTypes.bool.isRequired,
  previewStyle: PropTypes.object,
  children: PropTypes.node,
};

Text.defaultProps = {
  tag: 'p',
  preview: false,
};

export default Text;