Merge pull request #51 from reactioncommerce/docs-chip

docs(Chip): update Chip docs w/ new formatting, new types

.reaction/scripts/templates/Component.md.template

@@ -1,11 +1,29 @@
 ### Overview
 
+<!-- Get this short paragraph from design. -->
+
+The X component inherits from the Material-UI [X component](https://material-ui.com/components/X/). Refer to the Material-UI [X docs](https://material-ui.com/api/X/) for more information.
+
 ### Usage
 
-Document various live component examples here. See https://react-styleguidist.js.org/docs/documenting.html
+<!-- Show all the variants/combos we use in Reaction Admin, without the code box > -->
+
+```jsx noeditor
+<div>
+ All possible examples, types go here
+</div>
+```
+
+#### Types
+
+<!-- Show all Types of the component used in Reaction Admin -->
+
+##### Name of type
 
-### Theme
+<!-- Explain when to use this type of the component, and give a real life Reaction Admin example. If needed, add instruction for developers on how to set up the component. -->
 
-Assume that any theme prop that does not begin with "rui" is within `rui_components`. See [Theming Components](./#!/Theming%20Components).
+Use a X component to allow a user to XX, such as XYXY.
 
-| Theme Prop | Default | Description |
+```jsx
+<span>Example of the component goes here</span>
+```

package/src/components/Chip/Chip.md

@@ -1,32 +1,50 @@
 ### Overview
 
-The Catalyst Chip inherits from the Material-UI [Chip component](https://material-ui.com/components/chips/). Refer to the Material-UI [Chip API docs](https://material-ui.com/api/chip/) for more information. 
+Chips are compact visual elements that are used to present information to an operator to communicate status or feedback on an action taken. Chips can be used to represent tags, badges, and other compact bits of information to a user.
 
-### Usage
+[Chips](https://material.io/design/components/chips.html) allow users to enter information, make selections, filter content, or trigger actions.
 
-#### Default Catalyst chip
+The Catalyst Chip inherits from the Material-UI [Chip component](https://material-ui.com/components/chips/). Refer to the Material-UI [Chip API docs](https://material-ui.com/api/chip/) for more information.
 
-This is what a chip with all the default prop options looks like:
+### Usage
 
-```jsx
-<div style={{ display: "flex" }}>
-  <div style={{ marginRight: "1rem" }}>
-    <Chip label="Default" />
+<!-- Show all the variants/combos we use in Reaction Admin, without the code box > -->
+
+```jsx noeditor
+const onDelete = () => { console.log("stuff") };
+<div>
+  <div style={{ display: "flex" }}>
+    <div style={{ marginRight: "1rem" }}>
+      <Chip label="stuff.csv" variant="outlined" color="primary" onDelete={onDelete} />
+    </div>
+    <div style={{ marginRight: "1rem" }}>
+      <Chip color="error" label="Order Cancelled" />
+    </div>
   </div>
 </div>
 ```
 
-It's a chip with `variant` set to `outlined`, and `color` set to `primary`.
+#### Types
 
-#### Catalyst-custom chips
+<!-- Show all Types of the component used in Reaction Admin -->
 
-- **Error chip**: The error chip is used to indicate an error condition.
+##### Deletable chip
+
+<!-- Explain when to use this type of the component, and give a real life Reaction Admin example -->
+
+Use a Deletable chip to allow a user to remove something, like removing a tag from a filter. To create a Deletable chip, pass a Delete function to `onDelete`.
 
 ```jsx
-<div style={{ display: "flex" }}>
-  <div style={{ marginRight: "1rem" }}>
-    <Chip color="error" label="Error" />
-  </div>
-</div>
+const onDelete = () => { console.log("stuff") };
+<Chip label="stuff.csv" variant="outlined" color="primary" onDelete={onDelete} />
 ```
 
+##### Error chip
+
+<!-- Explain when to use this type of the component, and give a real life Reaction Admin example -->
+
+The error chip is used to indicate an error status, such as when an order has been cancelled.
+
+```jsx
+<Chip color="error" label="Order Cancelled" />
+```