Steps are styled (#208)

Styled the steps component. Added some accessibility helpers and moved the step number into a pseudo element of the title.

CHANGELOG.md

@@ -1,6 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-- Added `EuiSteps` component
+- Added `EuiSteps` component ([(#202)](https://github.com/elastic/eui/pull/202), [(#208)](https://github.com/elastic/eui/pull/208))
 - 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)

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

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

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

@@ -9,30 +9,30 @@ import {
 
 const firstSetOfSteps = [
   {
-    title: 'step 1',
+    title: 'Step 1',
     children: <p>Do this first</p>
   },
   {
-    title: 'step 2',
+    title: 'Step 2',
     children: <p>Then this</p>
   },
   {
-    title: 'step 3',
+    title: 'Step 3',
     children: <p>And finally, do this</p>
   },
 ];
 
 const nextSetOfSteps = [
   {
-    title: 'good step',
+    title: 'Good step',
     children: <p>Do this first</p>
   },
   {
-    title: 'better step',
+    title: 'Better step',
     children: <p>Then this</p>
   },
   {
-    title: 'best step',
+    title: 'Best step',
     children: <p>And finally, do this</p>
   },
 ];

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

@@ -6,6 +6,10 @@ import {
   GuideSectionTypes,
 } from '../../components';
 
+import {
+  EuiCode,
+} from '../../../../src/components';
+
 import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
 const stepsHtml = renderToHtml(Steps);
@@ -33,7 +37,7 @@ export const StepsExample = {
     demo: <Steps />,
   },
   {
-    title: 'Heading Element Steps',
+    title: 'Heading elements',
     source: [{
       type: GuideSectionTypes.JS,
       code: headingElementStepsSource,
@@ -42,9 +46,17 @@ export const StepsExample = {
       code: headingElementStepsHtml,
     }],
     text: (
-      <p>
-        something something better accessibility
-      </p>
+      <div>
+        <p>
+          To aid with accessibility and hierarchical headings,
+          you can and should pass in a heading element to use for each step title.
+          The example below shows that the logical heading element should be an <EuiCode>h2</EuiCode>
+          and therefore adds <EuiCode>headingElement=&quot;h2&quot;</EuiCode> to the EuiSteps component.
+        </p>
+        <p>
+          The style of the title will <strong>not</strong> be affected.
+        </p>
+      </div>
     ),
     demo: <HeadingElementSteps />,
   }],

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

@@ -6,20 +6,19 @@ exports[`EuiStep is rendered 1`] = `
   class="euiStep testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <div>
-    <div
-      class="euiStepNumber"
-    >
-      1
-    </div>
-    <h3
-      class="euiTitle euiStepTitle"
-    >
-      First step
-    </h3>
-  </div>
+  <span
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </span>
+  <h3
+    class="euiTitle euiStep__title"
+    data-step-num="1"
+  >
+    First step
+  </h3>
   <div
-    class="euiStepContent"
+    class="euiStep__content"
   >
     <p>
       Do this