From b87f984fd3f212503dd61991630713b6d088e27d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 19 Jul 2018 15:38:41 -0300
Subject: [PATCH 1/4] ToggleShow Component

---
 .../components/ToggleShow/ToggleShow.spec.tsx | 35 +++++++++++++++++++
 .../ui/components/ToggleShow/ToggleShow.tsx   | 33 +++++++++++++++++
 .../ui/components/ToggleShow/ToogleShow.mdx   | 22 ++++++++++++
 .../__snapshots__/ToggleShow.spec.tsx.snap    | 24 +++++++++++++
 4 files changed, 114 insertions(+)
 create mode 100644 src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
 create mode 100644 src/core/client/ui/components/ToggleShow/ToggleShow.tsx
 create mode 100644 src/core/client/ui/components/ToggleShow/ToogleShow.mdx
 create mode 100644 src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap

diff --git a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
new file mode 100644
index 000000000..35bb6a01f
--- /dev/null
+++ b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { create } from "react-test-renderer";
+
+import ToggleShow from "./ToggleShow";
+
+it("renders correctly", () => {
+  const tree = create(
+    <ToggleShow>
+      {({ toggleShow, show }) => (
+        <div>
+          {show && <div>SHOW ME</div>}
+          <button onClick={toggleShow}>Click me and I disapear</button>
+        </div>
+      )}
+    </ToggleShow>
+  ).toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
+it("should work correctly", () => {
+  const renderer = create(
+    <ToggleShow>
+      {({ toggleShow, show }) => (
+        <div>
+          {show && <div>SHOW ME</div>}
+          <button onClick={toggleShow}>Click me and I disapear</button>
+        </div>
+      )}
+    </ToggleShow>
+  );
+
+  renderer.root.findByType("button").props.onClick();
+  expect(renderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/ui/components/ToggleShow/ToggleShow.tsx b/src/core/client/ui/components/ToggleShow/ToggleShow.tsx
new file mode 100644
index 000000000..d8830c56e
--- /dev/null
+++ b/src/core/client/ui/components/ToggleShow/ToggleShow.tsx
@@ -0,0 +1,33 @@
+import React, { ReactNode } from "react";
+
+interface State {
+  show: boolean;
+}
+
+interface Props {
+  children: (props: RenderProps) => ReactNode;
+}
+
+interface RenderProps {
+  toggleShow: () => void;
+  show: boolean;
+}
+
+class ToggleShow extends React.Component<Props, State> {
+  public state = {
+    show: true,
+  };
+
+  public toggleShow = () => {
+    this.setState(state => ({ show: !state.show }));
+  };
+
+  public render() {
+    return this.props.children({
+      toggleShow: this.toggleShow,
+      show: this.state.show,
+    });
+  }
+}
+
+export default ToggleShow;
diff --git a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
new file mode 100644
index 000000000..93c215cd9
--- /dev/null
+++ b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
@@ -0,0 +1,22 @@
+---
+name: ToggleShow
+menu: UI Kit
+---
+
+import { Playground } from 'docz'
+import ToggleShow from './ToogleShow'
+
+# ToggleShow
+A Component that provides a render function to display nodes
+
+## Basic usage
+```js
+  <ToggleShow>
+    {({ toggleShow, show }) => (
+      <div>
+        {show && <div>SHOW ME</div>}
+        <button onClick={toggleShow}>ClickMe and I disapear</button>
+      </div>
+    )}
+  </ToggleShow>
+```
diff --git a/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
new file mode 100644
index 000000000..26bb513b1
--- /dev/null
+++ b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div>
+  <div>
+    SHOW ME
+  </div>
+  <button
+    onClick={[Function]}
+  >
+    Click me and I disapear
+  </button>
+</div>
+`;
+
+exports[`should work correctly 1`] = `
+<div>
+  <button
+    onClick={[Function]}
+  >
+    Click me and I disapear
+  </button>
+</div>
+`;

From 508d9618a23455a9518f9f2e35c0c4900b36183e Mon Sep 17 00:00:00 2001
From: Kiwi <vinh@wikiwi.io>
Date: Thu, 19 Jul 2018 15:44:42 -0300
Subject: [PATCH 2/4] Update ToggleShow.spec.tsx

---
 src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
index 35bb6a01f..d81075019 100644
--- a/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
+++ b/src/core/client/ui/components/ToggleShow/ToggleShow.spec.tsx
@@ -18,13 +18,13 @@ it("renders correctly", () => {
   expect(tree).toMatchSnapshot();
 });
 
-it("should work correctly", () => {
+it("should hide the div", () => {
   const renderer = create(
     <ToggleShow>
       {({ toggleShow, show }) => (
         <div>
           {show && <div>SHOW ME</div>}
-          <button onClick={toggleShow}>Click me and I disapear</button>
+          <button onClick={toggleShow}>Click me and I disappear</button>
         </div>
       )}
     </ToggleShow>

From 49d0296d5cf448513cc27333915a2eaeba69e6a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bel=C3=A9n=20Curcio?= <curciobelen@gmail.com>
Date: Thu, 19 Jul 2018 15:47:00 -0300
Subject: [PATCH 3/4] updated tests

---
 .../ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
index 26bb513b1..323274282 100644
--- a/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
+++ b/src/core/client/ui/components/ToggleShow/__snapshots__/ToggleShow.spec.tsx.snap
@@ -13,12 +13,12 @@ exports[`renders correctly 1`] = `
 </div>
 `;
 
-exports[`should work correctly 1`] = `
+exports[`should hide the div 1`] = `
 <div>
   <button
     onClick={[Function]}
   >
-    Click me and I disapear
+    Click me and I disappear
   </button>
 </div>
 `;

From c5951117c32a37d0484c8c0ccafb76f9a2dc0928 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Fri, 20 Jul 2018 11:05:42 -0300
Subject: [PATCH 4/4] Fix Playground

---
 src/core/client/ui/components/ToggleShow/ToogleShow.mdx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
index 93c215cd9..4fc58d41e 100644
--- a/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
+++ b/src/core/client/ui/components/ToggleShow/ToogleShow.mdx
@@ -4,13 +4,13 @@ menu: UI Kit
 ---
 
 import { Playground } from 'docz'
-import ToggleShow from './ToogleShow'
+import ToggleShow from './ToggleShow'
 
 # ToggleShow
 A Component that provides a render function to display nodes
 
 ## Basic usage
-```js
+<Playground>
   <ToggleShow>
     {({ toggleShow, show }) => (
       <div>
@@ -19,4 +19,4 @@ A Component that provides a render function to display nodes
       </div>
     )}
   </ToggleShow>
-```
+</Playground>