style: switch DOM props to spread

 - Replace `wrapperProps` with an object spread that automatically
 removes the custom props from the remaining object

 - Export component from root

Author: zetlen

src/Content/RawHtml.js

@@ -1,29 +1,29 @@
 import { createElement, Component } from 'react';
-import { object, string } from 'prop-types';
+import { string } from 'prop-types';
 
 export default class RawHtml extends Component {
     static propTypes = {
         sanitizedRawHtml: string.isRequired,
-        wrapperTag: string,
-        wrapperProps: object
+        wrapperTag: string
     };
 
     static defaultProps = {
         wrapperTag: 'span',
-        wrapperProps: {
-            className: 'peregrine-raw-html'
-        }
+        className: 'peregrine-raw-html'
     };
 
     render() {
-        // JSX tags must be in PascalCase
-        const WrapperTag = this.props.wrapperTag;
+        const {
+            wrapperTag: WrapperTag,
+            sanitizedRawHtml,
+            ...domProps
+        } = this.props;
 
         return (
             <WrapperTag
-                {...this.props.wrapperProps}
+                {...domProps}
                 dangerouslySetInnerHTML={{
-                    __html: this.props.sanitizedRawHtml
+                    __html: sanitizedRawHtml
                 }}
             />
         );

src/Content/__docs__/RawHtml.md

@@ -34,7 +34,8 @@ class ItemDescription extends React.Component {
 | ------------------ | :-------: | --------------------------------------------------: |
 | `sanitizedRawHtml` |    ✅      | A string of raw HTML to display. Ignored if `children` are also passed and are not null.
 | `wrapperTag`       |           | Optional HTML tag to use as a custom wrapper element. Default `span.`.
-| `wrapperProps`     |           | Optional object to be passed as props to the `wrapperTag`. Default `{ className: "peregrine-raw-html" }`.
+
+Additional DOM properties set on `RawHTML` will be passed to the wrapper tag.
 
 ## Notes
 
@@ -52,14 +53,14 @@ class ItemDescription extends React.Component {
   </span>
   ```
 
-  Use the `wrapperTag` string prop and `wrapperProps` object prop to customize
-  the  parent tag:
+  Use the `wrapperTag` string prop additional DOM props to customize
+  the parent tag:
 
   ```html
   <RawHtml
       sanitizedRawHtml="<h2>Header</h2><p>body text</p>"
       wrapperTag="section"
-      wrapperProps={{ className: "product-description loading" }}
+      className="product-description loading"
   />
 
   <!-- emits this HTML: -->

src/Content/__stories__/RawHtml.js

@@ -13,6 +13,6 @@ storiesOf('RawHtml', module)
         <RawHtml
             sanitizedRawHtml="<p><em>HTML fallback content</em></p><img src='https://placebeard.it/320/240'/>"
             wrapperTag="article"
-            wrapperProps={{ style: { background: 'whitesmoke' } }}
+            style={{ background: 'whitesmoke' }}
         />
     ));

src/Content/__tests__/RawHtml.test.js

@@ -14,7 +14,7 @@ test('Renders raw HTML in a wrapper element', () => {
     );
 });
 
-test('Takes DOM properties for a custom wrapper element', () => {
+test('Takes a prop for a custom wrapper element', () => {
     const wrapper = mount(
         <RawHtml
             sanitizedRawHtml="<h1 id='o-no'>Raw!!!</h1>"
@@ -25,3 +25,17 @@ test('Takes DOM properties for a custom wrapper element', () => {
         '<article class="peregrine-raw-html"><h1 id="o-no">Raw!!!</h1></article>'
     );
 });
+
+test('Takes DOM properties for the custom wrapper element', () => {
+    const wrapper = mount(
+        <RawHtml
+            sanitizedRawHtml="<h1 id='o-no'>Raw!!!</h1>"
+            wrapperTag="article"
+            className="custom-class-name"
+            style={{ background: 'blue' }}
+        />
+    );
+    expect(wrapper.html()).toEqual(
+        '<article class="custom-class-name" style="background: blue;"><h1 id="o-no">Raw!!!</h1></article>'
+    );
+});