add Steps component

CHANGELOG.md

@@ -1,5 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiSteps` component
 - Added `EuiHealth` components for status checks [(#158)](https://github.com/elastic/eui/pull/158)
 - Cleaned up styling for checkboxes, switches, and radios [(#158)](https://github.com/elastic/eui/pull/158)
 - Form `disabled` states are now more consistant [(#158)](https://github.com/elastic/eui/pull/158)
@@ -51,3 +52,5 @@
 # [`0.0.1`](https://github.com/elastic/eui/tree/v0.0.1) Initial Release
 
 - Initial public release
+
+

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/heading_element_steps.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import {
+  EuiSteps,
+} from '../../../../src/components';
+
+const steps = [
+  {
+    title: 'inspect me',
+    children: (<h3>{'Did you notice the step title is inside a Heading 2 element?'}</h3>)
+  }
+];
+
+export default () => (
+  <div>
+    <h1>Heading 1</h1>
+    <EuiSteps
+      steps={steps}
+      headingElement={'h2'}
+    />
+  </div>
+);

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>firstStepNumber</EuiCode> to continue step numbering after any type of break in the content
+      </p>
+      <EuiSpacer size="m"/>
+    </EuiText>
+
+    <EuiSteps
+      firstStepNumber={firstSetOfSteps.length}
+      steps={nextSetOfSteps}
+    />
+  </div>
+);

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

@@ -0,0 +1,51 @@
+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);
+
+import HeadingElementSteps from './heading_element_steps';
+const headingElementStepsSource = require('!!raw-loader!./heading_element_steps');
+const headingElementStepsHtml = renderToHtml(HeadingElementSteps);
+
+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 />,
+  },
+  {
+    title: 'Heading Element Steps',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: headingElementStepsSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: headingElementStepsHtml,
+    }],
+    text: (
+      <p>
+        something something better accessibility
+      </p>
+    ),
+    demo: <HeadingElementSteps />,
+  }],
+};

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__/step.test.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiStep is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiStep testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div>
+    <div
+      class="euiStepNumber"
+    >
+      1
+    </div>
+    <h3
+      class="euiTitle euiStepTitle"
+    >
+      First step
+    </h3>
+  </div>
+  <div
+    class="euiStepContent"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;