Step status props (#673)

Steps now pass a status prop for optional styling.

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.42`.
+- Added `status` prop to `EuiStep` for additional styling ([#673](https://github.com/elastic/eui/pull/673))
 
 ## [`0.0.42`](https://github.com/elastic/eui/tree/v0.0.42)
 

src-docs/src/views/steps/status.js

@@ -0,0 +1,69 @@
+
+import React, {
+  Component,
+  Fragment,
+} from 'react';
+
+import {
+  EuiSpacer,
+  EuiSteps,
+  EuiButton,
+} from '../../../../src/components';
+
+export default class extends Component {
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      status: 'incomplete',
+    };
+
+    this.handleComplete = this.handleComplete.bind(this);
+  }
+
+  handleComplete() {
+    this.setState({
+      status: 'complete',
+    });
+  }
+
+  render() {
+
+    let button;
+    if (this.state.status === "incomplete") {
+      button = (
+        <EuiButton onClick={this.handleComplete}>You complete me</EuiButton>
+      );
+    }
+
+    const firstSetOfSteps = [
+      {
+        title: 'Normal step',
+        children: <p>Do this first</p>,
+      },
+      {
+        title: 'Push the button to complete this final step',
+        children: (
+          <Fragment>
+            <p>
+              I am a fancy button just waiting to be pushed!
+            </p>
+            <EuiSpacer />
+            {button}
+          </Fragment>
+        ),
+        status: this.state.status,
+      },
+    ];
+
+    return (
+      <div>
+        <EuiSteps
+          steps={firstSetOfSteps}
+        />
+
+      </div>
+    );
+  }
+}

src-docs/src/views/steps/steps_example.js

@@ -9,6 +9,7 @@ import {
 import {
   EuiCode,
   EuiSteps,
+  EuiStep,
 } from '../../../../src/components';
 
 import Steps from './steps';
@@ -27,6 +28,10 @@ import StepsHorizontal from './steps_horizontal';
 const stepsHorizontalSource = require('!!raw-loader!./steps_horizontal');
 const stepsHorizontalHtml = renderToHtml(StepsHorizontal);
 
+import Status from './status';
+const statusSource = require('!!raw-loader!./status');
+const statusHtml = renderToHtml(Steps);
+
 export const StepsExample = {
   title: 'Steps',
   sections: [{
@@ -42,7 +47,7 @@ export const StepsExample = {
         Numbered steps
       </p>
     ),
-    props: { EuiSteps },
+    props: { EuiSteps, EuiStep },
     demo: <Steps />,
   },
   {
@@ -87,6 +92,24 @@ export const StepsExample = {
     ),
     demo: <HeadingElementSteps />,
   },
+  {
+    title: 'Steps status',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: statusSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: statusHtml,
+    }],
+    text: (
+      <p>
+        Steps can optionally include <EuiCode>status</EuiCode> prop with
+        a value of <EuiCode>complete</EuiCode> or <EuiCode>incomplete</EuiCode>. This
+        is used mostly as a final step when you need to make some sort of final check.
+      </p>
+    ),
+    demo: <Status />,
+  },
   {
     title: 'Horizontal',
     source: [{

src/components/index.js

@@ -234,6 +234,7 @@ export {
 } from './spacer';
 
 export {
+  EuiStep,
   EuiSteps,
   EuiSubSteps,
   EuiStepsHorizontal,

src/components/steps/__snapshots__/step.test.js.snap

@@ -11,9 +11,13 @@ exports[`EuiStep is rendered 1`] = `
   >
     Step
   </span>
+  <div
+    class="euiStep__circle"
+  >
+    1
+  </div>
   <h3
     class="euiTitle euiTitle--small euiStep__title"
-    data-step-num="1"
   >
     First step
   </h3>

src/components/steps/__snapshots__/steps.test.js.snap

@@ -14,9 +14,13 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      1
+    </div>
     <h2
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="1"
     >
       first title
     </h2>
@@ -36,9 +40,13 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      2
+    </div>
     <h2
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="2"
     >
       second title
     </h2>
@@ -58,9 +66,13 @@ exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      3
+    </div>
     <h2
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="3"
     >
       third title
     </h2>
@@ -89,9 +101,13 @@ exports[`EuiSteps renders steps 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      1
+    </div>
     <p
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="1"
     >
       first title
     </p>
@@ -111,9 +127,13 @@ exports[`EuiSteps renders steps 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      2
+    </div>
     <p
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="2"
     >
       second title
     </p>
@@ -133,9 +153,13 @@ exports[`EuiSteps renders steps 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      3
+    </div>
     <p
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="3"
     >
       third title
     </p>
@@ -164,9 +188,13 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      10
+    </div>
     <p
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="10"
     >
       first title
     </p>
@@ -186,9 +214,13 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      11
+    </div>
     <p
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="11"
     >
       second title
     </p>
@@ -208,9 +240,13 @@ exports[`EuiSteps renders steps with firstStepNumber 1`] = `
     >
       Step
     </span>
+    <div
+      class="euiStep__circle"
+    >
+      12
+    </div>
     <p
       class="euiTitle euiTitle--small euiStep__title"
-      data-step-num="12"
     >
       third title
     </p>

src/components/steps/_steps.scss

@@ -12,18 +12,33 @@
     line-height: $euiStepNumberSize; /* 1 */
   }
 
-  .euiStep__title {
-    font-weight: $euiFontWeightMedium;
+  .euiStep__circle {
+    @include createStepsNumber();
+
+    margin-right: $euiStepNumberMargin;
+    vertical-align: top; /* 1 */
 
-    &::before {
-      content: attr(data-step-num); // Get the number from the data attribute
-      @include createStepsNumber();
+    &.euiStep__circle--incomplete {
+      background-color: transparent;
+      border: solid 2px $euiColorPrimary;
+      color: $euiColorDarkShade;
+    }
+
+    &.euiStep__circle--complete {
+      animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce;
+    }
 
-      margin-right: $euiStepNumberMargin;
-      vertical-align: top; /* 1 */
+    .euiStep__circleIcon {
+      position: relative;
+      top: -2px;
     }
   }
 
+  .euiStep__title {
+    font-weight: $euiFontWeightMedium;
+    display: inline-block;
+  }
+
   .euiStep__content {
     border-left: $euiBorderThick;
     padding: $euiSize $euiSize $euiSizeXL;
@@ -36,4 +51,3 @@
     margin-left: ($euiStepNumberSize/2) - 1px;
   }
 }
-

src/components/steps/index.js

@@ -1,3 +1,7 @@
+export {
+  EuiStep,
+} from './step';
+
 export {
   EuiSteps,
 } from './steps';