import React, { Component } from "react";
import PropTypes from "prop-types";
import { css } from "emotion";
import ThemeContext from "@hig/theme-context";

import stylesheet from "./stylesheet";

export default class RichText extends Component {
  static propTypes = {
    /**
     * React-generated markup to style with HIG typography rules
     */
    children: PropTypes.node,
    /**
     * HTML string to be rendered and styled with HIG typography rules
     */
    dangerouslySetInnerHTML: PropTypes.shape({
      __html: PropTypes.string
    })
  };

  render() {
    return (
      <ThemeContext.Consumer>
        {({ resolvedRoles }) => {
          const styles = stylesheet(resolvedRoles);
          return this.props.children ? (
            <div className={css(styles.richText)}>{this.props.children}</div>
          ) : (
            <div
              className={css(styles.richText)}
              dangerouslySetInnerHTML={this.props.dangerouslySetInnerHTML} // eslint-disable-line react/no-danger
            />
          );
        }}
      </ThemeContext.Consumer>
    );
  }
}

@@ -83,16 +83,20 @@
 rt %7B css
+, cx
  %7D from 
@@ -646,16 +646,189 @@
 %7D) =%3E %7B%0A
+          const %7B%0A            children,%0A            dangerouslySetInnerHTML,%0A            ...otherProps%0A          %7D = this.props;%0A          const %7B className %7D = otherProps;%0A
         
@@ -888,27 +888,16 @@
  return 
-this.props.
 children
@@ -921,32 +921,35 @@
 %3Cdiv className=%7B
+cx(
 css(styles.richT
@@ -956,31 +956,60 @@
 ext)
-%7D%3E%7Bthis.props.children%7D
+, className)%7D%3E%0A              %7Bchildren%7D%0A            
 %3C/di
@@ -1069,16 +1069,19 @@
 ssName=%7B
+cx(
 css(styl
@@ -1092,16 +1092,28 @@
 ichText)
+, className)
 %7D%0A      
@@ -1149,19 +1149,8 @@
 ML=%7B
-this.props.
 dang

allow className to be passed down