Add Loader component (#328)

* (feat) Loader #180 * (fix) Loader #180 * (feat) Loader docs #328 * (fix) README.md #328 * (fix) Loader docs #328 * (fix) Loader #328 * (fix) Loader #328
Semantic-Org · Jul 11, 2016 · 29a5482 · 29a5482
1 parent 419552f
commit 29a5482
Show file tree

Hide file tree

Showing 15 changed files with 448 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -128,7 +128,7 @@ Be sure to check out the above migrations before embarking on a new component.
 | x Input         |                 |                 | _ Popup         |                    |
 | x Label         |                 |                 | x Progress      |                    |
 | x List          |                 |                 | _ Rating        |                    |
-| _ Loader        |                 |                 | _ Search        |                    |
+| x Loader        |                 |                 | _ Search        |                    |
 | _ Rail          |                 |                 | _ Shape         |                    |
 | _ Reveal        |                 |                 | _ Sidebar       |                    |
 | x Segment       |                 |                 | _ Sticky        |                    |

diff --git a/docs/app/Examples/elements/Loader/LoaderExamples.js b/docs/app/Examples/elements/Loader/LoaderExamples.js
@@ -0,0 +1,98 @@
+import React, { Component } from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+import { Message } from 'stardust'
+
+// TODO: Update dimmers after implement <Dimmer>
+// TODO: Update messages after convert <Message> to v1 API
+// TODO: Update segments after convert <Segment> to v1 API
+
+export default class LoaderExamples extends Component {
+  render() {
+    return (
+      <div>
+        <ExampleSection title='Types'>
+          <ComponentExample
+            title='Loader'
+            description='A loader'
+            examplePath='elements/Loader/Types/LoaderExample'
+          >
+            <Message>
+              Loaders are hidden unless has prop "active" or inside an "dimmer" with active prop.
+            </Message>
+          </ComponentExample>
+
+          <ComponentExample
+            title='Text Loader'
+            description='A loader can contain text'
+            examplePath='elements/Loader/Types/TextLoaderExamples'
+          />
+        </ExampleSection>
+
+        <ExampleSection title='States'>
+          <ComponentExample
+            title='Indeterminate'
+            description="A loader can show it's unsure of how long a task will take"
+            examplePath='elements/Loader/States/IndeterminateLoaderExample'
+          />
+
+          <ComponentExample
+            title='Active'
+            description='A loader can contain text'
+            examplePath='elements/Loader/States/ActiveLoaderExample'
+          >
+            <Message>
+              An active dimmer may not be clearly visible without using a "ui dimmer".
+            </Message>
+          </ComponentExample>
+
+          <ComponentExample
+            title='Disabled'
+            description='A loader can be disabled or hidden'
+            examplePath='elements/Loader/States/DisabledLoaderExample'
+          />
+        </ExampleSection>
+
+        <ExampleSection title='Variations'>
+          <ComponentExample
+            title='Inline'
+            description='Loaders can appear inline with content'
+            examplePath='elements/Loader/Variations/InlineLoaderExample'
+          />
+
+          <ComponentExample
+            title='Inline Center'
+            description='Loaders can appear inline centered with content'
+            examplePath='elements/Loader/Variations/InlineCenterLoaderExample'
+          >
+            <Message>
+              An active dimmer may not be clearly visible without using a "ui dimmer".
+            </Message>
+          </ComponentExample>
+
+          <ComponentExample
+            title='Size'
+            description='Loaders can have different sizes'
+            examplePath='elements/Loader/Variations/SizeLoaderExamples'
+          />
+
+          <ComponentExample
+            title='Inverted'
+            description='Loaders can have their colors inverted.'
+            examplePath='elements/Loader/Variations/InvertedLoaderExample'
+          />
+
+          <ComponentExample
+            title='Inverted'
+            description='Loaders can have their colors inverted.'
+            examplePath='elements/Loader/Variations/InvertedSizeLoaderExamples'
+          >
+            <Message>
+              Loaders will automatically be inverted inside "inverted dimmer".
+            </Message>
+          </ComponentExample>
+        </ExampleSection>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/States/ActiveLoaderExample.js b/docs/app/Examples/elements/Loader/States/ActiveLoaderExample.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class ActiveLoaderExample extends Component {
+  render() {
+    return (
+      <Segment className='very padded'>
+        <Loader active />
+      </Segment>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/States/DisabledLoaderExample.js b/docs/app/Examples/elements/Loader/States/DisabledLoaderExample.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class ActiveLoaderExample extends Component {
+  render() {
+    return (
+      <Segment className='very padded'>
+        <Loader disabled />
+      </Segment>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/States/IndeterminateLoaderExample.js b/docs/app/Examples/elements/Loader/States/IndeterminateLoaderExample.js
@@ -0,0 +1,22 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class IndeterminateLoaderExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader indeterminate text='Preparing Files' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader indeterminate>Preparing Files</Loader>
+          </div>
+        </Segment>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/Types/LoaderExample.js b/docs/app/Examples/elements/Loader/Types/LoaderExample.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class LoaderExample extends Component {
+  render() {
+    return (
+      <Segment className='very padded'>
+        <div className='ui active dimmer'>
+          <Loader active />
+        </div>
+      </Segment>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/Types/TextLoaderExamples.js b/docs/app/Examples/elements/Loader/Types/TextLoaderExamples.js
@@ -0,0 +1,28 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class TextLoaderExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader>Loading</Loader>
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader inverted>Loading</Loader>
+          </div>
+        </Segment>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/Variations/InlineCenteredLoaderExample.js b/docs/app/Examples/elements/Loader/Variations/InlineCenteredLoaderExample.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Loader } from 'stardust'
+
+export default class InlineCenteredLoaderExample extends Component {
+  render() {
+    return (
+      <Loader active inline='centered' />
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/Variations/InlineLoaderExample.js b/docs/app/Examples/elements/Loader/Variations/InlineLoaderExample.js
@@ -0,0 +1,10 @@
+import React, { Component } from 'react'
+import { Loader } from 'stardust'
+
+export default class InlineLoaderExample extends Component {
+  render() {
+    return (
+      <Loader active inline />
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/Variations/InvertedLoaderExample.js b/docs/app/Examples/elements/Loader/Variations/InvertedLoaderExample.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class InvertedLoaderExample extends Component {
+  render() {
+    return (
+      <Segment className='inverted very padded'>
+        <Loader active inverted />
+      </Segment>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/Variations/InvertedSizeLoaderExamples.js b/docs/app/Examples/elements/Loader/Variations/InvertedSizeLoaderExamples.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class InvertedSizeLoaderExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='mini' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='tiny' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='small' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='medium' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='large' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='big' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='huge' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active inverted dimmer'>
+            <Loader size='massive' text='Loading' />
+          </div>
+        </Segment>
+      </div>
+    )
+  }
+}
diff --git a/docs/app/Examples/elements/Loader/Variations/SizeLoaderExamples.js b/docs/app/Examples/elements/Loader/Variations/SizeLoaderExamples.js
@@ -0,0 +1,58 @@
+import React, { Component } from 'react'
+import { Loader, Segment } from 'stardust'
+
+export default class SizeLoaderExamples extends Component {
+  render() {
+    return (
+      <div>
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='mini' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='tiny' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='small' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='medium' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='large' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='big' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='huge' text='Loading' />
+          </div>
+        </Segment>
+
+        <Segment className='very padded'>
+          <div className='ui active dimmer'>
+            <Loader size='massive' text='Loading' />
+          </div>
+        </Segment>
+      </div>
+    )
+  }
+}