docs: improves styleguidist documentation

Author: csvenke

src/components/List/List.md

@@ -1,5 +1,15 @@
+### How to use
+
+```jsx static
+import React from 'react';
+import { List } from 'react-semantics';
+```
+
+#### With render prop
+##### Output
+
 ```jsx
-const data = [1,2,3,4,5,6,7,8,9].map(() => faker.name.findName());
+const data = [1,2,3].map(() => faker.name.findName());
 
 <ul>
   <List 
@@ -12,3 +22,20 @@ const data = [1,2,3,4,5,6,7,8,9].map(() => faker.name.findName());
   />
 </ul>
 ```
+
+#### With children
+##### Output
+
+```jsx
+const data = [1,2,3].map(() => faker.name.findName());
+
+<ul>
+  <List items={data}>
+    {n => (
+      <li key={n}>
+        <div>{n}</div>
+      </li>
+    )}
+  </List>
+</ul>
+```

src/components/List/List.tsx

@@ -1,19 +1,25 @@
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
 
+type ListItemCallbackFn = (
+  value?: any,
+  index?: number,
+  array?: any[],
+) => React.ReactNode;
+
 export interface IListProps {
   /** Array to map. */
   items: any[];
 
   /** Shorthand for primary content. */
-  render?: (value?: any, index?: number, array?: any[]) => React.ReactNode;
+  render?: ListItemCallbackFn;
 
   /** Primary content. */
-  children?: (value?: any, index?: number, array?: any[]) => React.ReactNode;
+  children?: any;
 }
 
 /**
- * Calls `render` or `children` on each element of `items`, and returns the result.
+ * Semantic helper component that calls the specified callback function in either `render` or `children` on each element of `items`.
  */
 const List: React.SFC<IListProps> = ({ items, render, children }) => {
   const func = children ? children : render;

src/components/Resolve/Resolve.md

@@ -1,3 +1,11 @@
+### How to use
+
+```jsx static
+import React from 'react';
+import { Resolve } from 'react-semantics';
+```
+##### Output
+
 ```jsx
 const data = [1,2,3].map(() => faker.fake("{{lorem.sentence}}"));
 
@@ -7,12 +15,12 @@ class Example extends React.Component {
       <>
         <List
           items={data}
-          render={(v,i) => (
+          render={v => (
             <Resolve 
               promise={this._getData(v)}
-              pending={<div key={i}>Fetching data...</div>}
+              pending={<div key={v}>Fetching data...</div>}
               resolved={value => (
-                  <div key={i}>{v}</div>
+                  <div key={v}>{v}</div>
               )}
             />
           )}

src/components/Resolve/Resolve.tsx

@@ -31,7 +31,7 @@ const initialState = {
 type IResolveState = Readonly<typeof initialState>;
 
 /**
- * Returns content based on specified promise.
+ * Semantic helper component that returns content based on the status of the specified promise.
  */
 class Resolve extends React.Component<IResolveProps, IResolveState> {
   public static propTypes = {

src/components/Show/Show.md

@@ -1,3 +1,27 @@
+### How to use
+
+```jsx static
+import React from 'react';
+import { Show } from 'react-semantics';
+```
+
+#### With render prop
+##### Output
+
+```jsx
+const data = faker.fake("{{lorem.words}}");
+
+<Show 
+  when={true}
+  render={() => (
+    <div>{data}</div>
+  )}
+/>
+```
+
+
+#### With children
+##### Output
 
 ```jsx
 const data = faker.fake("{{lorem.words}}");

src/components/Show/Show.tsx

@@ -15,7 +15,7 @@ export interface IShowProps {
 }
 
 /**
- * Renders primary content if `when` equals true.
+ * Semantic helper component that return content if `when` equals true.
  */
 const Show: React.SFC<IShowProps> = ({ when, render, children }) => {
   if (when) {

src/components/Switch/Switch.md

@@ -1,4 +1,20 @@
 
+### Static methods
+
+These helper components can be accessed from the `Switch` component like this `<Switch.Case />`.
+
+* [Case](#/SwitchCase)
+* [Default](#/SwitchDefault)
+
+### How to use
+
+```jsx static
+import React from 'react';
+import { Switch } from 'react-semantics';
+```
+
+##### Output
+
 ```jsx
 <Switch value={3}>
   <Switch.Case value={1}>

src/components/Switch/Switch.tsx

@@ -15,7 +15,8 @@ export interface ISwitchProps {
 }
 
 /**
- * Returns primary content of first case that matches, returns default if no match and null if no default.
+ * Semantic helper component that returns content of the first case that matches `value`.
+ * It returns default if it exists and null if no default exists.
  */
 class Switch extends React.Component<ISwitchProps> {
   public static propTypes = {

src/components/Switch/SwitchCase.md

@@ -0,0 +1,15 @@
+
+### How to use
+
+```jsx static
+import React from 'react';
+import { Switch } from 'react-semantics';
+```
+
+##### Output
+
+```jsx
+<Switch.Case value={'anything'}>
+  <div>Render me!</div>
+</Switch.Case>
+```

src/components/Switch/SwitchCase.tsx

@@ -14,6 +14,10 @@ export interface ISwitchCaseProps {
   children?: React.ReactNode;
 }
 
+/**
+ * Semantic helper component that can be accessed from the `Switch` component.
+ * Only ment to be used inside the children of the `Switch` component.
+ */
 const SwitchCase: React.SFC<ISwitchCaseProps> = ({ value, render, children }) => {
   if (value !== undefined) {
     if (children && !isEmptyChildren(children)) {