@massds/mayflower-react/dist/ColoredHeading/index.mjs

React versions of Mayflower design system UI components

/**
 * ColoredHeading module.
 * @module @massds/mayflower-react/ColoredHeading
 * @requires module:@massds/mayflower-assets/scss/01-atoms/colored-heading
 */
import React from "react";
import PropTypes from "prop-types";

const ColoredHeading = coloredHeading => {
  const Element = "h" + coloredHeading.level;
  let classes = ['ma__colored-heading'];

  if (coloredHeading.color) {
    classes.push("ma__colored-heading--" + coloredHeading.color);
  }

  classes = classes.join(' ');
  return /*#__PURE__*/React.createElement(Element, {
    className: classes,
    tabIndex: "-1"
  }, coloredHeading.text);
};

ColoredHeading.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The heading text  */
  text: PropTypes.string.isRequired,

  /** The heading level */
  level: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

  /** The color of the heading */
  color: PropTypes.oneOf(['', 'green', 'blue', 'gray'])
} : {};
ColoredHeading.defaultProps = {
  level: 2,
  color: ''
};
export default ColoredHeading;