docs(Rating): add Rating docs

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

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

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

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

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

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

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

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

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

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