Add Step component (#335)

* (feat) Rail #181 * (feat) Rail #181 * (feat) Rail docs #181 * (fix) Sort Rail props #181 * (fix) Rail review fixes #181 * (fix) Rail review fixes #181 * (fix) Rail review fixes #181 * (fix) Rail sizes #181 * (fix) Rail sizes in docs #181 * (feat) Step Title * feat(Step) Step component * feat(Step) Step component * feat(Step) Step component * feat(Step) Examples and implements * feat(Step) Fix * fix(Step) Refactor fragment * feat(Step) Shorthand props * feat(Step) More docs and feats * feat(Parts) Title & Description * feat(Parts) Move code to parts * feat(Parts) Step cleanup * fix(Step) Fix doc and prop * fix(Step) Fix for content * fix(Step) Fix examples and components * fix(Step) Fix comment * fix(Step) Fix prop and tests * fix(Step) Content test * feat(Step) Tests for group * feat(Step) Tests for Step * fix(Step) Add test for children * fix(Step) Update example * fix(Step) Remove library from _meta * fix(Step) Fix link example * fix(Step) Update components, docs and tests
Semantic-Org · Aug 14, 2016 · e96a0e9 · e96a0e9
1 parent f6b0713
commit e96a0e9
Show file tree

Hide file tree

Showing 30 changed files with 995 additions and 0 deletions.
diff --git a/docs/app/Examples/elements/Step/Content/Descriptions.js b/docs/app/Examples/elements/Step/Content/Descriptions.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Step } from 'stardust'
+
+const { Description, Group, Title } = Step
+
+const Descriptions = () => (
+  <div>
+    <Group>
+      <Step>
+        <Title>Shipping</Title>
+        <Description>Choose your shipping options</Description>
+      </Step>
+    </Group>
+
+    <br />
+
+    <Group>
+      <Step>
+        <Title title='Shipping' />
+        <Description description='Choose your shipping options' />
+      </Step>
+    </Group>
+
+    <br />
+
+    <Group>
+      <Step title='Shipping' description='Choose your shipping options' />
+    </Group>
+  </div>
+)
+
+export default Descriptions
diff --git a/docs/app/Examples/elements/Step/Content/Icons.js b/docs/app/Examples/elements/Step/Content/Icons.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Icon, Step } from 'stardust'
+
+const { Content, Description, Group, Title } = Step
+
+const Icons = () => (
+  <Group>
+    <Step>
+      <Icon name='truck' />
+      <Content>
+        <Title>Shipping</Title>
+        <Description>Choose your shipping options</Description>
+      </Content>
+    </Step>
+
+    <Step>
+      <Icon name='truck' />
+      <Content title='Shipping' description='Choose your shipping options' />
+    </Step>
+
+    <Step icon='truck' title='Shipping' description='Choose your shipping options' />
+  </Group>
+)
+
+export default Icons
diff --git a/docs/app/Examples/elements/Step/Content/Links.js b/docs/app/Examples/elements/Step/Content/Links.js
@@ -0,0 +1,37 @@
+import React, { Component } from 'react'
+import { Step } from 'stardust'
+
+class ClickableStep extends Component {
+  state = {}
+
+  handleClick = () => this.setState({ active: !this.state.active })
+
+  render() {
+    return <Step {...this.props} active={this.state.active} onClick={this.handleClick} />
+  }
+}
+
+const Links = () => (
+  <div>
+    <Step.Group>
+      <Step active href='http://google.com' icon='truck' title='Shipping' description='Choose your shipping options' />
+      <Step href='http://google.com' icon='credit card' title='Billing' description='Enter billing information' />
+    </Step.Group>
+
+    <br />
+
+    <Step.Group>
+      <ClickableStep icon='truck' title='Shipping' description='Choose your shipping options' />
+      <ClickableStep icon='credit card' title='Billing' description='Enter billing information' />
+    </Step.Group>
+
+    <br />
+
+    <Step.Group>
+      <Step link icon='truck' title='Shipping' description='Choose your shipping options' />
+      <Step link icon='credit card' title='Billing' description='Enter billing information' />
+    </Step.Group>
+  </div>
+)
+
+export default Links
diff --git a/docs/app/Examples/elements/Step/Content/index.js b/docs/app/Examples/elements/Step/Content/index.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title='Content'>
+    <ComponentExample
+      title='Description'
+      description='A step can contain a description.'
+      examplePath='elements/Step/Content/Descriptions'
+    />
+
+    <ComponentExample
+      title='Icon'
+      description='A step can contain an icon.'
+      examplePath='elements/Step/Content/Icons'
+    />
+
+    <ComponentExample
+      title='Link'
+      description='A step can link.'
+      examplePath='elements/Step/Content/Links'
+    />
+  </ExampleSection>
+)
+
+export default Content
diff --git a/docs/app/Examples/elements/Step/Groups/Groups.js b/docs/app/Examples/elements/Step/Groups/Groups.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Icon, Step } from 'stardust'
+
+const { Content, Description, Group, Title } = Step
+const steps = [
+  { icon: 'truck', title: 'Shipping', description: 'Choose your shipping options' },
+  { active: true, icon: 'payment', title: 'Billing', description: 'Enter billing information' },
+  { disabled: true, icon: 'info', title: 'Confirm Order' },
+]
+
+const Groups = () => (
+  <div>
+    <Group>
+      <Step>
+        <Icon name='truck' />
+        <Content>
+          <Title>Shipping</Title>
+          <Description>Choose your shipping options</Description>
+        </Content>
+      </Step>
+
+      <Step active>
+        <Icon name='payment' />
+        <Content title='Billing' description='Enter billing information' />
+      </Step>
+
+      <Step disabled icon='info' title='Confirm Order' />
+    </Group>
+
+    <br />
+
+    <Group items={steps} />
+  </div>
+)
+
+export default Groups
diff --git a/docs/app/Examples/elements/Step/Groups/Ordered.js b/docs/app/Examples/elements/Step/Groups/Ordered.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Step } from 'stardust'
+
+const { Content, Description, Group, Title } = Step
+const steps = [
+  { completed: true, title: 'Shipping', description: 'Choose your shipping options' },
+  { completed: true, title: 'Billing', description: 'Enter billing information' },
+  { active: true, title: 'Confirm Order', description: 'Verify order details' },
+]
+
+const Ordered = () => (
+  <div>
+    <Group ordered>
+      <Step completed>
+        <Content>
+          <Title>Shipping</Title>
+          <Description>Choose your shipping options</Description>
+        </Content>
+      </Step>
+
+      <Step completed title='Billing' description='Enter billing information' />
+
+      <Step active title='Confirm Order' description='Verify order details' />
+    </Group>
+
+    <br />
+
+    <Group ordered items={steps} />
+  </div>
+)
+
+export default Ordered
diff --git a/docs/app/Examples/elements/Step/Groups/Vertical.js b/docs/app/Examples/elements/Step/Groups/Vertical.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Icon, Step } from 'stardust'
+
+const { Content, Description, Group, Title } = Step
+const steps = [
+  { completed: true, icon: 'truck', title: 'Shipping', description: 'Choose your shipping options' },
+  { completed: true, icon: 'credit card', title: 'Billing', description: 'Enter billing information' },
+  { active: true, icon: 'info', title: 'Confirm Order', description: 'Verify order details' },
+]
+
+const Vertical = () => (
+  <div>
+    <Group vertical>
+      <Step completed>
+        <Icon name='truck' />
+        <Content>
+          <Title>Shipping</Title>
+          <Description>Choose your shipping options</Description>
+        </Content>
+      </Step>
+
+      <Step completed>
+        <Icon name='credit card' />
+        <Content title='Billing' description='Enter billing information' />
+      </Step>
+
+      <Step active icon='info' title='Confirm Order' description='Verify order details' />
+    </Group>
+
+    <br />
+
+    <Group vertical items={steps} />
+  </div>
+)
+
+export default Vertical
diff --git a/docs/app/Examples/elements/Step/Groups/index.js b/docs/app/Examples/elements/Step/Groups/index.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import { Message } from 'stardust'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+// TODO: Update <Message> usage after v1 API
+
+const Groups = () => (
+  <ExampleSection title='Groups'>
+    <ComponentExample
+      title='Steps'
+      description='A set of steps.'
+      examplePath='elements/Step/Groups/Groups'
+    >
+      <Message className='positive' icon='mobile' header='Responsive Element'>
+        Steps will automatically stack on mobile. To make steps automatically stack for tablet use the <b>tablet
+        stackable</b> variation.
+      </Message>
+    </ComponentExample>
+
+    <ComponentExample
+      title='Ordered'
+      description='A step can show a ordered sequence of steps.'
+      examplePath='elements/Step/Groups/Ordered'
+    />
+
+    <ComponentExample
+      title='Vertical'
+      description='A step can be displayed stacked vertically.'
+      examplePath='elements/Step/Groups/Vertical'
+    />
+  </ExampleSection>
+)
+
+export default Groups
diff --git a/docs/app/Examples/elements/Step/States/Active.js b/docs/app/Examples/elements/Step/States/Active.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Icon, Step } from 'stardust'
+
+const { Content, Description, Group, Title } = Step
+
+const Active = () => (
+  <Group>
+    <Step active>
+      <Icon name='credit card' />
+      <Content>
+        <Title>Billing</Title>
+        <Description>Enter billing information</Description>
+      </Content>
+    </Step>
+
+    <Step active icon='credit card' title='Billing' description='Enter billing information' />
+  </Group>
+)
+
+export default Active
diff --git a/docs/app/Examples/elements/Step/States/Completed.js b/docs/app/Examples/elements/Step/States/Completed.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Step } from 'stardust'
+
+const { Group } = Step
+
+const Completed = () => (
+  <div>
+    <Group>
+      <Step completed icon='payment' title='Billing' description='Enter billing information' />
+    </Group>
+
+    <br />
+
+    <Group ordered>
+      <Step completed title='Billing' description='Enter billing information' />
+    </Group>
+  </div>
+)
+
+export default Completed
diff --git a/docs/app/Examples/elements/Step/States/Disabled.js b/docs/app/Examples/elements/Step/States/Disabled.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Step } from 'stardust'
+
+const Disabled = () => (
+  <Step.Group>
+    <Step disabled>Billing</Step>
+  </Step.Group>
+)
+
+export default Disabled
diff --git a/docs/app/Examples/elements/Step/States/index.js b/docs/app/Examples/elements/Step/States/index.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title='Groups'>
+    <ExampleSection title='States'>
+      <ComponentExample
+        title='Active'
+        description='A step can be highlighted as active.'
+        examplePath='elements/Step/States/Active'
+      />
+
+      <ComponentExample
+        title='Completed'
+        description='A step can show that a user has completed it.'
+        examplePath='elements/Step/States/Completed'
+      />
+
+      <ComponentExample
+        title='Disabled'
+        description='A step can show that it cannot be selected.'
+        examplePath='elements/Step/States/Disabled'
+      />
+    </ExampleSection>
+  </ExampleSection>
+)
+
+export default States
diff --git a/docs/app/Examples/elements/Step/Types/Basic.js b/docs/app/Examples/elements/Step/Types/Basic.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import { Step } from 'stardust'
+
+const Basic = () => (
+  <Step.Group>
+    <Step>Shipping</Step>
+  </Step.Group>
+)
+
+export default Basic
diff --git a/docs/app/Examples/elements/Step/Types/index.js b/docs/app/Examples/elements/Step/Types/index.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title='Groups'>
+    <ExampleSection title='Types'>
+      <ComponentExample
+        title='Step'
+        description='A single step.'
+        examplePath='elements/Step/Types/Basic'
+      />
+    </ExampleSection>
+  </ExampleSection>
+)
+
+export default Types