Removed: BodyContainer is now avoiding wrapping content in a ``<d…

…iv>``

if a single string is passed as a child.

CHANGELOG.md

@@ -1,5 +1,8 @@
 # HEAD
 
+- Removed: ``BodyContainer`` now avoid wrapping content in a ``<div>`` if a
+  single string is passed as a child.
+  (@MoOx)
 - Removed: ``PageContainer`` does not wrap its child into a ``<div>``
   ([#691](https://github.com/MoOx/phenomic/pull/691) - @MoOx, based on @DavidWells [idea](https://github.com/MoOx/phenomic/pull/690))
 - Changed: ``phenomic/lib/PageContainer`` has been relocated.
@@ -9,6 +12,7 @@
   ```js
   import { PageContainer as PhenomicPageContainer } from "phenomic"
   ```
+  ([ref #433](https://github.com/MoOx/phenomic/issues/433) - @MoOx)
 
 ## Boilerplate
 

src/components/BodyContainer/__tests__/index.js

@@ -5,30 +5,27 @@ import { createRenderer } from "react-addons-test-utils"
 import expect from "expect"
 import expectJSX from "expect-jsx"
 
-expect.extend(expectJSX)
-
 import BodyContainer from "../index.js"
 
+expect.extend(expectJSX)
+const Noop = () => {}
+
 test("should wrap html", () => {
   const html = "<a>test</a>"
   const renderer = createRenderer()
   renderer.render(
     <BodyContainer>{ html }</BodyContainer>
   )
   expect(renderer.getRenderOutput()).toEqualJSX(
-    <div>
-      <div
-        key={ 1 }
-        className="phenomic-BodyContainer"
-        dangerouslySetInnerHTML={ { __html: html } }
-      />
-    </div>
+    <div
+      className="phenomic-BodyContainer"
+      dangerouslySetInnerHTML={ { __html: html } }
+    />
   )
 })
 
 test("should wrap html and children", () => {
   const html = "<a>test</a>"
-  const Noop = () => {}
   const renderer = createRenderer()
   renderer.render(
     <BodyContainer>
@@ -53,3 +50,35 @@ test("should wrap html and children", () => {
     </div>
   )
 })
+
+test("should accept props", () => {
+  const html = "<a>test</a>"
+  const renderer = createRenderer()
+  renderer.render(
+    <BodyContainer className="test">{ html }</BodyContainer>
+  )
+  expect(renderer.getRenderOutput()).toEqualJSX(
+    <div
+      className="test"
+      dangerouslySetInnerHTML={ { __html: html } }
+    />
+  )
+})
+
+test("should accept props for wrapper", () => {
+  const html = "<a>test</a>"
+  const renderer = createRenderer()
+  renderer.render(
+    <BodyContainer className="test">{ html }<Noop /></BodyContainer>
+  )
+  expect(renderer.getRenderOutput()).toEqualJSX(
+    <div className="test">
+      <div
+        key={ 1 }
+        className="phenomic-BodyContainer"
+        dangerouslySetInnerHTML={ { __html: html } }
+      />
+      <Noop />
+    </div>
+  )
+})

src/components/BodyContainer/index.js

@@ -10,11 +10,35 @@ class BodyContainer extends Component<void, Props, void> {
 
   render(): React$Element<any> {
     const { props }: { props: Props } = this
+    const { children, ...otherProps } = props
+
+    let child
+    if (typeof children === "string") {
+      child = children
+    }
+    else {
+      try {
+        child = React.Children.only(children)
+      }
+      catch (e) {
+        console.log("phenomic: BodyContainer: multiple childs")
+      }
+    }
+
+    if (child) {
+      return (
+        <div
+          className="phenomic-BodyContainer"
+          dangerouslySetInnerHTML={ { __html: child } }
+          { ...otherProps }
+        />
+      )
+    }
 
     return (
-      <div>
+      <div { ...otherProps }>
       {
-        React.Children.map(props.children, (child: any, i) => {
+        React.Children.map(children, (child: any, i) => {
           if (typeof child === "string") {
             return (
               <div