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] 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>
+`;