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/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,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__/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="testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div>
+    <div
+      class="euiStepNumber"
+    >
+      1
+    </div>
+    <p
+      class="euiTitle euiStepTitle"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;

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>
+      <p
+        class="euiTitle euiStepTitle"
+      >
+        first title
+      </p>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        2
+      </div>
+      <p
+        class="euiTitle euiStepTitle"
+      >
+        second title
+      </p>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        3
+      </div>
+      <p
+        class="euiTitle euiStepTitle"
+      >
+        third title
+      </p>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        And finally, do this
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiSteps renders steps with firstStepNumber 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSteps testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        10
+      </div>
+      <p
+        class="euiTitle euiStepTitle"
+      >
+        first title
+      </p>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        11
+      </div>
+      <p
+        class="euiTitle euiStepTitle"
+      >
+        second title
+      </p>
+    </div>
+    <div
+      class="euiStep"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div>
+    <div>
+      <div
+        class="euiStepNumber"
+      >
+        12
+      </div>
+      <p
+        class="euiTitle euiStepTitle"
+      >
+        third title
+      </p>
+    </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,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  EuiTitle
+} from '../title';
+
+export const EuiStep = ({
+  className,
+  children,
+  step,
+  title,
+  ...rest
+}) => {
+  return (
+    <div
+      className={className}
+      {...rest}
+    >
+
+      <div>
+        <div className="euiStepNumber">
+          {step}
+        </div>
+        <EuiTitle className="euiStepTitle">
+          <p>{title}</p>
+        </EuiTitle>
+      </div>
+
+      <div className="euiStep">
+        {children}
+      </div>
+
+    </div>
+  );
+};
+
+EuiStep.propTypes = {
+  children: PropTypes.node.isRequired,
+  step: PropTypes.number.isRequired,
+  title: PropTypes.string.isRequired,
+};