From 1a08aba96908d91acb287f633578972ccfaa5fd7 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 12 Jul 2018 02:02:47 -0300
Subject: [PATCH] Add docs

---
 .../client/ui/components/Center/Center.css    |  6 ---
 .../client/ui/components/Center/Center.tsx    | 30 --------------
 src/core/client/ui/components/Center/index.ts |  2 -
 src/core/client/ui/components/Flex/Flex.mdx   | 16 ++++++++
 .../ui/components/MatchMedia/MatchMedia.mdx   | 40 +++++++++++++++++++
 .../ui/components/MatchMedia/MatchMedia.tsx   |  2 +-
 src/core/client/ui/components/index.ts        |  1 -
 7 files changed, 57 insertions(+), 40 deletions(-)
 delete mode 100644 src/core/client/ui/components/Center/Center.css
 delete mode 100644 src/core/client/ui/components/Center/Center.tsx
 delete mode 100644 src/core/client/ui/components/Center/index.ts
 create mode 100644 src/core/client/ui/components/Flex/Flex.mdx
 create mode 100644 src/core/client/ui/components/MatchMedia/MatchMedia.mdx

diff --git a/src/core/client/ui/components/Center/Center.css b/src/core/client/ui/components/Center/Center.css
deleted file mode 100644
index 67d72755f..000000000
--- a/src/core/client/ui/components/Center/Center.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.root {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-}
-
diff --git a/src/core/client/ui/components/Center/Center.tsx b/src/core/client/ui/components/Center/Center.tsx
deleted file mode 100644
index 369d9cc8e..000000000
--- a/src/core/client/ui/components/Center/Center.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import cn from "classnames";
-import React from "react";
-import { ReactNode, StatelessComponent } from "react";
-
-import { withStyles } from "talk-ui/hocs";
-import { PropTypesOf } from "talk-ui/types";
-
-import * as styles from "./Center.css";
-
-interface InnerProps {
-  /**
-   * This prop can be used to add custom classnames.
-   * It is handled by the `withStyles `HOC.
-   */
-  classes: Partial<typeof styles>;
-  className?: string;
-  children: ReactNode;
-}
-
-const Center: StatelessComponent<InnerProps> = props => {
-  return (
-    <div className={cn(props.className, props.classes.root)}>
-      {props.children}
-    </div>
-  );
-};
-
-const enhanced = withStyles(styles)(Center);
-export type CenterProps = PropTypesOf<typeof enhanced>;
-export default enhanced;
diff --git a/src/core/client/ui/components/Center/index.ts b/src/core/client/ui/components/Center/index.ts
deleted file mode 100644
index 47237abf5..000000000
--- a/src/core/client/ui/components/Center/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Center";
-export { default } from "./Center";
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
new file mode 100644
index 000000000..b0d8e4d23
--- /dev/null
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -0,0 +1,16 @@
+---
+name: Flex
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import Flex from './Flex'
+
+# Flex
+
+`Flex` is a wrapper around `flexbox`.
+
+## Basic usage
+<Playground>
+  <Flex justifyContent="center">I'm centered</Flex>
+</Playground>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.mdx b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
new file mode 100644
index 000000000..3f3186bb6
--- /dev/null
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.mdx
@@ -0,0 +1,40 @@
+---
+name: MatchMedia
+menu: UI Kit
+---
+
+import { Playground, PropsTable } from 'docz'
+import MatchMedia from './MatchMedia'
+
+# MatchMedia
+
+`MatchMedia` uses media queries to provide responsive rendering.
+
+## Basic usage
+<Playground>
+  <MatchMedia maxWidth="xs">
+    I'm a very small screen
+  </MatchMedia>
+  <MatchMedia minWidth="xs" maxWidth="sm">
+    I'm a small screen
+  </MatchMedia>
+  <MatchMedia minWidth="sm" maxWidth="md">
+    I'm a medium screen
+  </MatchMedia>
+  <MatchMedia minWidth="md" maxWidth="lg">
+    I'm a large screen
+  </MatchMedia>
+  <MatchMedia minWidth="lg" maxWidth="xl">
+    I'm a very large screen
+  </MatchMedia>
+  <MatchMedia minWidth="xl">
+    I'm a super large screen
+  </MatchMedia>
+</Playground>
+
+## Using render props
+<Playground>
+  <MatchMedia minWidth="lg">
+    {matches => <span>{matches ? "I'm big" : "I'm small"}</span>}
+  </MatchMedia>
+</Playground>
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
index 80f692ddc..dae2456ee 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
@@ -9,7 +9,7 @@ type Breakpoints = keyof typeof theme.breakpoints;
 interface InnerProps {
   minWidth?: Breakpoints;
   maxWidth?: Breakpoints;
-  children: ReactNode;
+  children: ReactNode | ((matches: boolean) => React.ReactNode);
   className?: string;
   component?:
     | string
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index 9052f7fee..afca18af3 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -1,6 +1,5 @@
 export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
-export { default as Center } from "./Center";
 export { default as Typography } from "./Typography";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";