add Steps component

src-docs/src/services/routes/routes.js

@@ -109,6 +109,9 @@ import { SideNavExample }
 import { SpacerExample }
   from '../../views/spacer/spacer_example';
 
+import { StepsExample }
+  from '../../views/steps/steps_example';
+
 import { TableExample }
   from '../../views/table/table_example';
 
@@ -200,6 +203,7 @@ const components = [
   ProgressExample,
   SideNavExample,
   SpacerExample,
+  StepsExample,
   TableExample,
   TabsExample,
   TextExample,

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

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {
+  EuiCode,
+  EuiSpacer,
+  EuiSteps,
+  EuiText,
+} from '../../../../src/components';
+
+const firstSetOfSteps = [
+  {
+    title: 'step 1',
+    children: (<p>{'Do this first'}</p>)
+  },
+  {
+    title: 'step 2',
+    children: (<p>{'Then this'}</p>)
+  },
+  {
+    title: 'step 3',
+    children: (<p>{'And finally, do this'}</p>)
+  },
+];
+
+const nextSetOfSteps = [
+  {
+    title: 'good step',
+    children: (<p>{'Do this first'}</p>)
+  },
+  {
+    title: 'better step',
+    children: (<p>{'Then this'}</p>)
+  },
+  {
+    title: 'best step',
+    children: (<p>{'And finally, do this'}</p>)
+  },
+];
+
+export default () => (
+  <div>
+    <EuiSteps
+      steps={firstSetOfSteps}
+    />
+
+    <EuiText>
+      <EuiSpacer size="m"/>
+      <p>
+        Set <EuiCode>offset</EuiCode> to continue step numbering after any type of break in the content
+      </p>
+      <EuiSpacer size="m"/>
+    </EuiText>
+
+    <EuiSteps
+      offset={firstSetOfSteps.length}
+      steps={nextSetOfSteps}
+    />
+  </div>
+);

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+  GuideSectionTypes,
+} from '../../components';
+
+import Steps from './steps';
+const stepsSource = require('!!raw-loader!./steps');
+const stepsHtml = renderToHtml(Steps);
+
+export const StepsExample = {
+  title: 'Steps',
+  sections: [{
+    title: 'Steps',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: stepsSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: stepsHtml,
+    }],
+    text: (
+      <p>
+        Numbered steps
+      </p>
+    ),
+    demo: <Steps />,
+  }],
+};

src/components/index.js

@@ -174,6 +174,10 @@ export {
   EuiSpacer,
 } from './spacer';
 
+export {
+  EuiSteps,
+} from './steps';
+
 export {
   EuiTable,
   EuiTableBody,

src/components/index.scss

@@ -30,6 +30,7 @@
 @import 'progress/index';
 @import 'side_nav/index';
 @import 'spacer/index';
+@import 'steps/index';
 @import 'table/index';
 @import 'tabs/index';
 @import 'title/index';

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

@@ -0,0 +1,145 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSteps renders steps 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSteps testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        1
+      </div>
+      <h3
+        class="euiStepTitle"
+      >
+        first title
+      </h3>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        2
+      </div>
+      <h3
+        class="euiStepTitle"
+      >
+        second title
+      </h3>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        3
+      </div>
+      <h3
+        class="euiStepTitle"
+      >
+        third title
+      </h3>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        And finally, do this
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiSteps renders steps with offset 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSteps testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        10
+      </div>
+      <h3
+        class="euiStepTitle"
+      >
+        first title
+      </h3>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        11
+      </div>
+      <h3
+        class="euiStepTitle"
+      >
+        second title
+      </h3>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        12
+      </div>
+      <h3
+        class="euiStepTitle"
+      >
+        third title
+      </h3>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        And finally, do this
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/components/steps/_index.scss

@@ -0,0 +1 @@
+@import 'steps';

src/components/steps/_steps.scss

@@ -0,0 +1,27 @@
+.euiSteps {
+
+}
+
+.euiStepNumber {
+  width: 32px;
+  height: 32px;
+  display: inline-block;
+  line-height: 32px;
+  text-align: center;
+  color: #FFF;
+  border-radius: 100%;
+  background-color: #0079a5;
+}
+
+.euiStepTitle {
+  display: inline-block;
+  margin-left: 16px;
+}
+
+.euiStep {
+  border-left: medium solid #D9D9D9;
+  margin-top: 8px;
+  margin-bottom: 8px;
+  margin-left: 16px;
+  padding-left: 24px;
+}

src/components/steps/index.js

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

src/components/steps/step.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export function EuiStep({ children, step, title }) {
+  return (
+    <div>
+
+      <div>
+        <div className="euiStepNumber">
+          {step}
+        </div>
+        <h3 className="euiStepTitle">
+          {title}
+        </h3>
+      </div>
+
+      <div className="euiStep">
+        {children}
+      </div>
+
+    </div>
+  );
+}
+
+EuiStep.propTypes = {
+  children: PropTypes.node.isRequired,
+  step: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+};

src/components/steps/steps.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { EuiStep } from './step';
+
+function renderSteps(steps, offset = 0) {
+  return steps.map((step, index) => (
+    <EuiStep
+      className="kuiVerticalRhythm"
+      key={index}
+      step={offset + index + 1}
+      title={step.title}
+    >
+      {step.children}
+    </EuiStep>
+  ));
+}
+
+export const EuiSteps = ({
+  className,
+  offset,
+  steps,
+  ...rest,
+}) => {
+  const classes = classNames('euiSteps', className);
+
+  return (
+    <div
+      className={classes}
+      {...rest}
+    >
+      {renderSteps(steps, offset)}
+    </div>
+  );
+};
+
+const stepPropType = PropTypes.shape({
+  title: PropTypes.string.isRequired,
+  children: PropTypes.node
+});
+
+EuiSteps.propTypes = {
+  className: PropTypes.string,
+  offset: PropTypes.number,
+  steps: PropTypes.arrayOf(stepPropType).isRequired,
+};