Semantic-ui-react: <Step /> Component

[levithomason]

http://semantic-ui.com/elements/step.html

[layershifter]

I'll work about this issue after #184.

[layershifter]

API

Types

Step

A single step

<div class="ui steps">
  <div class="step">
    Shipping
  </div>
</div>

<Step.Group>
  <Step.Item>Shipping</Step.Item>
</Step.Group>
// or
const items = [
  {text: 'Shipping'}
];

<Step.Group steps={items}>

Groups

Steps

A set of steps

<div class="ui steps">
  <div class="step">
    <i class="truck icon"></i>
    <div class="content">
      <div class="title">Shipping</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
  <div class="active step">
    <i class="payment icon"></i>
    <div class="content">
      <div class="title">Billing</div>
      <div class="description">Enter billing information</div>
    </div>
  </div>
  <div class="disabled step">
    <i class="info icon"></i>
    <div class="content">
      <div class="title">Confirm Order</div>
    </div>
  </div>
</div>

<Step.Group>
  <Step.Item icon='truck'>
    <Step.Item.Title>Shipping</Step.Item.Title>
    <Step.Item.Description>Shipping</Step.Item.Description>
  </Step.Item>
  <Step.Item active icon='payment'>
    <Step.Item.Title>Billing</Step.Item.Title>
    <Step.Item.Description>Confirm Order</Step.Item.Description>
  </Step.Item>
  <Step.Item disabled icon='info' title='Confirm Order' />
</Step.Group>
// or
const items = [
  {icon: 'truck', title: 'Shipping', description: 'Shipping'},
  {active: true, icon: 'payment', title: 'Billing', description: 'Confirm Order'},
  {disabled: true, icon: 'info', title: 'Confirm Order'},
];

<Step.Group steps={items}>

Ordered

A step can show a ordered sequence of steps

<div class="ui ordered steps">
  <div class="completed step">
    <div class="content">
      <div class="title">Shipping</div>
      <div class="description">Choose your shipping options</div>
    </div>
  </div>
...
</div>

<Step.Group ordered>
  <Step.Item completed>
    <Step.Item.Title>Shipping</Step.Item.Title>
    <Step.Item.Description>Shipping</Step.Item.Description>
  </Step.Item>
</Step.Group>
// or
const items = [
  {completed: true, title: 'Billing', description: 'Confirm Order'},
];

<Step.Group ordered steps={items}>

Vertical

A step can be displayed stacked vertically

<div class="ui vertical steps">...</div>

<Step.Group vertical>...</Step.Group>
<Step.Group vertical steps={items}>

Content

Description

A step can contain a description

_Already described_

Icon

A step can contain an icon

_Already described_

Link

A step can link

// Case 1
<div class="link step"></div>
// Case 2
<a class="active step">...</a>

// Case 1
<Step.Item link>...</Step.Item>

// Case 2
<Step.Item active href='http://google.com'>...</Step.Item>
<Step.Item active onClick={handler}>...</Step.Item>

States

Active

A step can be highlighted as active

_Already described_

Completed

A step can show that a user has completed it

_Already described_

Disabled

A step can show that it cannot be selected

<div class="disabled step"></div>

<Step.Item disabled>...</Step.Item>

Variations

Stackable

A step can stack vertically only on smaller screens

Vertical

A step can be displayed stacked vertically

<div class="ui tablet stackable steps">...</div>

<Step.Group stackable='tablet'>...</Step.Group>
<Step.Group stackable='tablet' steps={items}>

Fluid

A fluid step takes up the width of its container

<div class="ui fluid steps">...</div>

<Step.Group fluid>...</Step.Group>

Attached

Steps can be attached to other elements

<div class="ui top attached steps">...</div>

<Step.Group attached='top'>...</Step.Group>

Evenly Divided

Steps can be divided evenly inside their parent

<div class="ui two steps"></div>

Propositions?

Size

Steps can have different sizes

<div class="ui mini steps">...</div>

<Step.Group size='mini'>...</Step.Group>

[levithomason]

<Steps /> => <Step.Group /> See https://github.com/TechnologyAdvice/stardust/issues/203 for more info.

[layershifter]

@levithomason I've made update, take a look

[levithomason]

Groups and props look great.

Evenly Divided

I've just chatted this over quite a bit with our team. We considered a whole slew of options for this. This functionality is applicable to many components and groups like Grid Columns, Button Groups, Field Groups, etc. So what we do here will apply to the framework as a whole.

We currently support equal widths in Form Fields with the prop evenlyDivided. This prop counts the number of Form children and adds the proper two fields class, or however many Field children there are. In the Button API we've also discussed use of a widths prop to explicitly set the widths, see https://github.com/TechnologyAdvice/stardust/pull/295#discussion_r68552676.

We'd like to continue supporting equal width children and explicitly sized children. Here's the API we think makes the most sense moving forward:

Equal Width

Reference FormFields.js for helpful utils and an example implementation of calculating the width className.

<Step.Group widths='equal'>
  <Step />
  <Step />
</Step.Group>

<div class="ui two steps">
  <div class="step"></div>
  <div class="step"></div>
</div>

Explicit Widths

<Step.Group widths={2}> // or widths='two'
  <Step />
  <Step />
</Step.Group>

<div class="ui two steps">
  <div class="step"></div>
  <div class="step"></div>
</div>