ToggleShow Component

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();
+});

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;

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

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