From fc71b753a6161191e2136a127b6ddd2ee2690616 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Sun, 7 Aug 2016 19:09:47 -0700
Subject: [PATCH] docs(Rating): add Rating docs

---
 README.md                                     |  2 +-
 .../Rating/Types/RatingClearableExample.js    |  8 +++
 .../Rating/Types/RatingControlledExample.js   | 21 +++++++
 .../Rating/Types/RatingDisabledExample.js     |  8 +++
 .../Rating/Types/RatingHeartExample.js        |  8 +++
 .../Rating/Types/RatingOnRateExample.js       | 17 ++++++
 .../Rating/Types/RatingRatingExample.js       |  8 +++
 .../modules/Rating/Types/RatingStarExample.js |  8 +++
 .../Rating/Variations/RatingSizeExample.js    | 35 ++++++++++++
 docs/app/Examples/modules/Rating/index.js     | 57 +++++++++++++++++++
 10 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 docs/app/Examples/modules/Rating/Types/RatingClearableExample.js
 create mode 100644 docs/app/Examples/modules/Rating/Types/RatingControlledExample.js
 create mode 100644 docs/app/Examples/modules/Rating/Types/RatingDisabledExample.js
 create mode 100644 docs/app/Examples/modules/Rating/Types/RatingHeartExample.js
 create mode 100644 docs/app/Examples/modules/Rating/Types/RatingOnRateExample.js
 create mode 100644 docs/app/Examples/modules/Rating/Types/RatingRatingExample.js
 create mode 100644 docs/app/Examples/modules/Rating/Types/RatingStarExample.js
 create mode 100644 docs/app/Examples/modules/Rating/Variations/RatingSizeExample.js
 create mode 100644 docs/app/Examples/modules/Rating/index.js

diff --git a/README.md b/README.md
index 39a6e3451e..5d51ba2ffd 100644
--- a/README.md
+++ b/README.md
@@ -139,7 +139,7 @@ Be sure to check out the above migrations before embarking on a new component.
 | x Image         |                 |                 | _ Nag           |                    |
 | x Input         |                 |                 | _ Popup         |                    |
 | x Label         |                 |                 | x Progress      |                    |
-| x List          |                 |                 | _ Rating        |                    |
+| x List          |                 |                 | x Rating        |                    |
 | x Loader        |                 |                 | _ Search        |                    |
 | x Rail          |                 |                 | _ Shape         |                    |
 | _ Reveal        |                 |                 | _ Sidebar       |                    |
diff --git a/docs/app/Examples/modules/Rating/Types/RatingClearableExample.js b/docs/app/Examples/modules/Rating/Types/RatingClearableExample.js
new file mode 100644
index 0000000000..cd14922d06
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Types/RatingClearableExample.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Rating } from 'stardust'
+
+const RatingClearableExample = () => (
+  <Rating maxRating={5} clearable />
+)
+
+export default RatingClearableExample
diff --git a/docs/app/Examples/modules/Rating/Types/RatingControlledExample.js b/docs/app/Examples/modules/Rating/Types/RatingControlledExample.js
new file mode 100644
index 0000000000..b6dd1dfd2d
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Types/RatingControlledExample.js
@@ -0,0 +1,21 @@
+import React, { Component } from 'react'
+import { Rating } from 'stardust'
+
+export default class RatingControlledExample extends Component {
+  state = { rating: 0 }
+
+  handleChange = (e) => this.setState({ rating: e.target.value })
+
+  render() {
+    const { rating } = this.state
+
+    return (
+      <div>
+        <div>Rating: {rating}</div>
+        <input type='range' min={0} max={5} value={rating} onChange={this.handleChange} />
+        <br />
+        <Rating rating={this.state.rating} maxRating={5} />
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/modules/Rating/Types/RatingDisabledExample.js b/docs/app/Examples/modules/Rating/Types/RatingDisabledExample.js
new file mode 100644
index 0000000000..79fc4cc174
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Types/RatingDisabledExample.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Rating } from 'stardust'
+
+const RatingDisabledExample = () => (
+  <Rating defaultRating={3} maxRating={5} disabled />
+)
+
+export default RatingDisabledExample
diff --git a/docs/app/Examples/modules/Rating/Types/RatingHeartExample.js b/docs/app/Examples/modules/Rating/Types/RatingHeartExample.js
new file mode 100644
index 0000000000..8c2935819c
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Types/RatingHeartExample.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Rating } from 'stardust'
+
+const RatingHeartExample = () => (
+  <Rating icon='heart' defaultRating={1} maxRating={3} />
+)
+
+export default RatingHeartExample
diff --git a/docs/app/Examples/modules/Rating/Types/RatingOnRateExample.js b/docs/app/Examples/modules/Rating/Types/RatingOnRateExample.js
new file mode 100644
index 0000000000..b7fb911d50
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Types/RatingOnRateExample.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import { Rating } from 'stardust'
+
+export default class RatingOnRateExample extends Component {
+  state = {}
+
+  handleRate = (e, { rating, maxRating }) => this.setState({ rating, maxRating })
+
+  render() {
+    return (
+      <div>
+        <Rating maxRating={5} onRate={this.handleRate} />
+        <pre>{JSON.stringify(this.state, null, 2)}</pre>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/modules/Rating/Types/RatingRatingExample.js b/docs/app/Examples/modules/Rating/Types/RatingRatingExample.js
new file mode 100644
index 0000000000..907b683754
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Types/RatingRatingExample.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Rating } from 'stardust'
+
+const RatingExample = () => (
+  <Rating />
+)
+
+export default RatingExample
diff --git a/docs/app/Examples/modules/Rating/Types/RatingStarExample.js b/docs/app/Examples/modules/Rating/Types/RatingStarExample.js
new file mode 100644
index 0000000000..ce10585bdd
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Types/RatingStarExample.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Rating } from 'stardust'
+
+const RatingStarExample = () => (
+  <Rating icon='star' defaultRating={3} maxRating={4} />
+)
+
+export default RatingStarExample
diff --git a/docs/app/Examples/modules/Rating/Variations/RatingSizeExample.js b/docs/app/Examples/modules/Rating/Variations/RatingSizeExample.js
new file mode 100644
index 0000000000..24d47ecea2
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/Variations/RatingSizeExample.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { Rating } from 'stardust'
+
+const RatingSizeExample = () => (
+  <div>
+    <Rating maxRating={5} defaultRating={3} icon='star' size='mini' />
+    <br />
+    <br />
+
+    <Rating maxRating={5} defaultRating={3} icon='star' size='tiny' />
+    <br />
+    <br />
+
+    <Rating maxRating={5} defaultRating={3} icon='star' size='small' />
+    <br />
+    <br />
+
+    <Rating maxRating={5} defaultRating={3} icon='star' />
+    <br />
+    <br />
+
+    <Rating maxRating={5} defaultRating={3} icon='star' size='large' />
+    <br />
+    <br />
+
+    <Rating maxRating={5} defaultRating={3} icon='star' size='huge' />
+    <br />
+    <br />
+
+    <Rating maxRating={5} defaultRating={3} icon='star' size='massive' />
+    <br />
+    <br />
+  </div>
+)
+export default RatingSizeExample
diff --git a/docs/app/Examples/modules/Rating/index.js b/docs/app/Examples/modules/Rating/index.js
new file mode 100644
index 0000000000..6daf928cdc
--- /dev/null
+++ b/docs/app/Examples/modules/Rating/index.js
@@ -0,0 +1,57 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+export default class RatingExamples extends Component {
+  render() {
+    return (
+      <div>
+        <ExampleSection title='Types'>
+          <ComponentExample
+            title='Rating'
+            description='A basic rating'
+            examplePath='modules/Rating/Types/RatingRatingExample'
+          />
+          <ComponentExample
+            title='Star'
+            description='A rating can use a set of star icons'
+            examplePath='modules/Rating/Types/RatingStarExample'
+          />
+          <ComponentExample
+            title='Heart'
+            description='A rating can use a set of heart icons'
+            examplePath='modules/Rating/Types/RatingHeartExample'
+          />
+          <ComponentExample
+            title='Clearable'
+            description='A rating can be cleared by clicking again'
+            examplePath='modules/Rating/Types/RatingClearableExample'
+          />
+          <ComponentExample
+            title='Disabled'
+            description='A rating can be disabled'
+            examplePath='modules/Rating/Types/RatingDisabledExample'
+          />
+          <ComponentExample
+            title='Controlled'
+            description='A rating can be a controlled component'
+            examplePath='modules/Rating/Types/RatingControlledExample'
+          />
+          <ComponentExample
+            title='onRate Callback'
+            description='A rating calls back when the rating changes'
+            examplePath='modules/Rating/Types/RatingOnRateExample'
+          />
+        </ExampleSection>
+
+        <ExampleSection title='Variations'>
+          <ComponentExample
+            title='Size'
+            description='A rating can vary in size'
+            examplePath='modules/Rating/Variations/RatingSizeExample'
+          />
+        </ExampleSection>
+      </div>
+    )
+  }
+}