From 1d4f64fbaf93654c0eb18b7b4fb315028ad6c370 Mon Sep 17 00:00:00 2001
From: Maxime Thirouin <m@moox.io>
Date: Thu, 1 Sep 2016 08:57:46 +0200
Subject: [PATCH] Removed: ``BodyContainer`` is now avoiding wrapping content
 in a ``<div>``

if a single string is passed as a child.
---
 CHANGELOG.md                                  |  4 ++
 .../BodyContainer/__tests__/index.js          | 49 +++++++++++++++----
 src/components/BodyContainer/index.js         | 28 ++++++++++-
 3 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f327d2127..98ac52d2c 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/components/BodyContainer/__tests__/index.js b/src/components/BodyContainer/__tests__/index.js
index 4ab76ce05..c4a4941a5 100644
--- a/src/components/BodyContainer/__tests__/index.js
+++ b/src/components/BodyContainer/__tests__/index.js
@@ -5,10 +5,11 @@ 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()
@@ -16,19 +17,15 @@ test("should wrap html", () => {
     <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>
+  )
+})
diff --git a/src/components/BodyContainer/index.js b/src/components/BodyContainer/index.js
index 87d690044..705bf8e97 100644
--- a/src/components/BodyContainer/index.js
+++ b/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