Step status props

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

@@ -27,6 +27,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: [{
@@ -87,6 +91,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/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 ease-in;
+    }
 
-      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/step.js

@@ -10,15 +10,35 @@ import {
   EuiTitle,
 } from '../title';
 
+import {
+  EuiIcon,
+} from '../icon';
+
 export const EuiStep = ({
   className,
   children,
   headingElement,
   step,
   title,
+  status,
   ...rest
 }) => {
   const classes = classNames('euiStep', className);
+  const circleClasses = classNames(
+    'euiStep__circle',
+    {
+      'euiStep__circle--complete': (status === "complete"),
+      'euiStep__circle--incomplete': (status === "incomplete"),
+    }
+  );
+
+  let numberOrIcon;
+  if (status === "complete") {
+      numberOrIcon = <EuiIcon type="check" color="ghost" className="euiStep__circleIcon" />;
+  } else if (status !== "incomplete") {
+    numberOrIcon = step;
+  }
+
   return (
     <div
       className={classes}
@@ -27,7 +47,11 @@ export const EuiStep = ({
 
       <EuiScreenReaderOnly><span>Step</span></EuiScreenReaderOnly>
 
-      <EuiTitle size="s" className="euiStep__title" data-step-num={step}>
+      <div className={circleClasses}>
+        {numberOrIcon}
+      </div>
+
+      <EuiTitle size="s" className="euiStep__title">
         {React.createElement(headingElement, null, title)}
       </EuiTitle>
 
@@ -41,8 +65,18 @@ export const EuiStep = ({
 
 EuiStep.propTypes = {
   children: PropTypes.node.isRequired,
+  /**
+   * Will replace the number provided in props.step with alternate styling
+   */
+  status: PropTypes.oneOf(['complete', 'incomplete']),
+  /**
+   * The number of the step in the list of steps
+   */
   step: PropTypes.number.isRequired,
   title: PropTypes.string.isRequired,
+  /**
+   * The HTML tag used for the title
+   */
   headingElement: PropTypes.string.isRequired,
 };
 

src/components/steps/steps.js

@@ -9,6 +9,7 @@ function renderSteps(steps, firstStepNumber, headingElement) {
       className,
       children,
       title,
+      status,
       ...rest
     } = step;
 
@@ -19,6 +20,7 @@ function renderSteps(steps, firstStepNumber, headingElement) {
         headingElement={headingElement}
         step={firstStepNumber + index}
         title={title}
+        status={status}
         {...rest}
       >
         {children}