From 4ccbc815ea2a6208c6366ee0d3fcaab3ff02c0e7 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Fri, 2 Aug 2019 17:56:08 -0400
Subject: [PATCH] Fix and TS EuiSteps (#2186)

* Fixed alignment of Steps if text causes wrapping
* Converted EuiStep to TS
* Convert EuiSubSteps to TS
* Convert EuiStepHorizontal to TS
* Converted EuiStepsHorizontal to TS
* Converted EuiSteps to TS
---
 CHANGELOG.md                                  |   3 +
 src-docs/src/i18ntokens.json                  |  44 +--
 src-docs/src/views/modal/modal.js             |   8 +-
 src-docs/src/views/steps/steps.js             |   3 +-
 src-docs/src/views/steps/steps_example.js     |  33 +-
 src-docs/src/views/steps/steps_horizontal.js  |   8 +-
 src/components/index.d.ts                     |   1 -
 .../steps/__snapshots__/step.test.js.snap     |  32 --
 .../steps/__snapshots__/step.test.tsx.snap    | 257 ++++++++++++++++
 .../step_horizontal.test.js.snap              |  30 --
 .../step_horizontal.test.tsx.snap             | 287 ++++++++++++++++++
 .../steps/__snapshots__/steps.test.js.snap    | 256 ----------------
 .../steps/__snapshots__/steps.test.tsx.snap   | 256 ++++++++++++++++
 ...js.snap => steps_horizontal.test.tsx.snap} |   0
 ...s.test.js.snap => sub_steps.test.tsx.snap} |   0
 src/components/steps/_steps.scss              |  72 +++--
 src/components/steps/_variables.scss          |   4 +-
 src/components/steps/index.d.ts               |  86 ------
 src/components/steps/{index.js => index.ts}   |   2 +
 src/components/steps/step.js                  |  75 -----
 src/components/steps/step.test.js             |  21 --
 src/components/steps/step.test.tsx            |  54 ++++
 src/components/steps/step.tsx                 |  73 +++++
 src/components/steps/step_horizontal.test.js  |  49 ---
 src/components/steps/step_horizontal.test.tsx |  88 ++++++
 ...step_horizontal.js => step_horizontal.tsx} |  85 +++---
 .../steps/{steps.test.js => steps.test.tsx}   |   4 +-
 src/components/steps/{steps.js => steps.tsx}  |  64 ++--
 src/components/steps/steps_horizontal.js      |  51 ----
 ...ntal.test.js => steps_horizontal.test.tsx} |   0
 src/components/steps/steps_horizontal.tsx     |  32 ++
 src/components/steps/sub_steps.js             |  18 --
 .../{sub_steps.test.js => sub_steps.test.tsx} |   0
 src/components/steps/sub_steps.tsx            |  21 ++
 34 files changed, 1241 insertions(+), 776 deletions(-)
 delete mode 100644 src/components/steps/__snapshots__/step.test.js.snap
 create mode 100644 src/components/steps/__snapshots__/step.test.tsx.snap
 delete mode 100644 src/components/steps/__snapshots__/step_horizontal.test.js.snap
 create mode 100644 src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
 delete mode 100644 src/components/steps/__snapshots__/steps.test.js.snap
 create mode 100644 src/components/steps/__snapshots__/steps.test.tsx.snap
 rename src/components/steps/__snapshots__/{steps_horizontal.test.js.snap => steps_horizontal.test.tsx.snap} (100%)
 rename src/components/steps/__snapshots__/{sub_steps.test.js.snap => sub_steps.test.tsx.snap} (100%)
 delete mode 100644 src/components/steps/index.d.ts
 rename src/components/steps/{index.js => index.ts} (78%)
 delete mode 100644 src/components/steps/step.js
 delete mode 100644 src/components/steps/step.test.js
 create mode 100644 src/components/steps/step.test.tsx
 create mode 100644 src/components/steps/step.tsx
 delete mode 100644 src/components/steps/step_horizontal.test.js
 create mode 100644 src/components/steps/step_horizontal.test.tsx
 rename src/components/steps/{step_horizontal.js => step_horizontal.tsx} (62%)
 rename src/components/steps/{steps.test.js => steps.test.tsx} (90%)
 rename src/components/steps/{steps.js => steps.tsx} (52%)
 delete mode 100644 src/components/steps/steps_horizontal.js
 rename src/components/steps/{steps_horizontal.test.js => steps_horizontal.test.tsx} (100%)
 create mode 100644 src/components/steps/steps_horizontal.tsx
 delete mode 100644 src/components/steps/sub_steps.js
 rename src/components/steps/{sub_steps.test.js => sub_steps.test.tsx} (100%)
 create mode 100644 src/components/steps/sub_steps.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 22366a4adbb..6055c4effe1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,10 +1,13 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiStep`, `EuiSteps`, `EuiStepHorizontal`, `EuiStepsHorizontal`, and `EuiSubSteps` to Typescript ([#2186](https://github.com/elastic/eui/pull/2186))
+
 **Bug fixes**
 
 - Fixed `EuiBadge` truncation and auto-applied `title` attribute with `innerText` ([#2190](https://github.com/elastic/eui/pull/2190))
 - Remove exported TypeScript type and interface exports from built artifacts when they originate from `node_modules` ([#2191](https://github.com/elastic/eui/pull/2191))
 - Fixed `EuiBadge` truncation in IE and for the global filters pattern ([#2194](https://github.com/elastic/eui/pull/2194))
+- Fixed alignment of long titles in `EuiStep` ([#2186](https://github.com/elastic/eui/pull/2186))
 
 ## [`13.1.1`](https://github.com/elastic/eui/tree/v13.1.1)
 
diff --git a/src-docs/src/i18ntokens.json b/src-docs/src/i18ntokens.json
index 88c2de0dff5..7ed52b0dcf7 100644
--- a/src-docs/src/i18ntokens.json
+++ b/src-docs/src/i18ntokens.json
@@ -725,15 +725,15 @@
     "highlighting": "code",
     "loc": {
       "start": {
-        "line": 48,
+        "line": 75,
         "column": 4
       },
       "end": {
-        "line": 60,
+        "line": 87,
         "column": 53
       }
     },
-    "filepath": "src/components/steps/step_horizontal.js"
+    "filepath": "src/components/steps/step_horizontal.tsx"
   },
   {
     "token": "euiStepHorizontal.step",
@@ -741,15 +741,15 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 74,
+        "line": 102,
         "column": 16
       },
       "end": {
-        "line": 74,
+        "line": 102,
         "column": 73
       }
     },
-    "filepath": "src/components/steps/step_horizontal.js"
+    "filepath": "src/components/steps/step_horizontal.tsx"
   },
   {
     "token": "euiStepNumber.isComplete",
@@ -800,36 +800,20 @@
     "filepath": "src/components/steps/step_number.tsx"
   },
   {
-    "token": "euiStep.incompleteStep",
-    "defString": "Incomplete Step",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 27,
-        "column": 6
-      },
-      "end": {
-        "line": 27,
-        "column": 74
-      }
-    },
-    "filepath": "src/components/steps/step.js"
-  },
-  {
-    "token": "euiStep.completeStep",
-    "defString": "Step",
-    "highlighting": "string",
+    "token": "euiStep.ariaLabel",
+    "defString": "({\n  status\n}) => {\n  if (status === 'incomplete') return 'Incomplete Step';\n  return 'Step';\n};",
+    "highlighting": "code",
     "loc": {
       "start": {
-        "line": 30,
-        "column": 23
+        "line": 49,
+        "column": 8
       },
       "end": {
-        "line": 30,
-        "column": 78
+        "line": 55,
+        "column": 30
       }
     },
-    "filepath": "src/components/steps/step.js"
+    "filepath": "src/components/steps/step.tsx"
   },
   {
     "token": "euiTableSortMobile.sorting",
diff --git a/src-docs/src/views/modal/modal.js b/src-docs/src/views/modal/modal.js
index 3ac2b377787..5f5efa69b32 100644
--- a/src-docs/src/views/modal/modal.js
+++ b/src-docs/src/views/modal/modal.js
@@ -74,9 +74,7 @@ export class Modal extends Component {
         </EuiFormRow>
 
         <EuiCodeBlock language="html" paddingSize="s" isCopyable>
-          {
-            '<h1>Titleisonelonglinejfdklsjaflkdsajfkldsajfklsdajfkldsjafkldsjalfkjdsklafjdsklafjkldsajfkldsajfkldsjfkdsjaflsdjaf;djsakfjdskafjdsklafjdksljfkdlsa;jfldksjfkldsajfkldsjflkdsjaklfadjs;</h1>'
-          }
+          {'<h1>Title</h1>'}
         </EuiCodeBlock>
       </EuiForm>
     );
@@ -88,9 +86,7 @@ export class Modal extends Component {
         <EuiOverlayMask>
           <EuiModal onClose={this.closeModal} initialFocus="[name=popswitch]">
             <EuiModalHeader>
-              <EuiModalHeaderTitle>
-                Titleisonelonglinejfdklsjaflkdsajfkldsajfklsdajfkldsjafkldsjalfkjdsklafjdsklafjkldsajfkldsajfkldsjfkdsjaflsdjaf
-              </EuiModalHeaderTitle>
+              <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
             </EuiModalHeader>
 
             <EuiModalBody>{formSample}</EuiModalBody>
diff --git a/src-docs/src/views/steps/steps.js b/src-docs/src/views/steps/steps.js
index a05c88481e1..0a297910c55 100644
--- a/src-docs/src/views/steps/steps.js
+++ b/src-docs/src/views/steps/steps.js
@@ -9,7 +9,8 @@ import {
 
 const firstSetOfSteps = [
   {
-    title: 'Step 1',
+    title:
+      'Step 1 with a long title to check what happens during wrapping which should have been fixed.',
     children: <p>Do this first</p>,
   },
   {
diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js
index 406b5e34263..30ed5841414 100644
--- a/src-docs/src/views/steps/steps_example.js
+++ b/src-docs/src/views/steps/steps_example.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { renderToHtml } from '../../services';
 
@@ -18,8 +18,7 @@ import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
 const stepsHtml = renderToHtml(Steps);
 const stepsSnippet = [
-  `<EuiSteps 
-  firstStepNumber={3}
+  `<EuiSteps
   steps={[
     {
       title: 'Step 1',
@@ -27,7 +26,8 @@ const stepsSnippet = [
     },
   ]}
 />`,
-  `<EuiSteps 
+  `<EuiSteps
+  firstStepNumber={3}
   steps={[
     {
       title: 'Step 3',
@@ -50,13 +50,17 @@ const headingElementStepsSnippet = `<EuiSteps steps={steps} headingElement="h2"
 import StepsHorizontal from './steps_horizontal';
 const stepsHorizontalSource = require('!!raw-loader!./steps_horizontal');
 const stepsHorizontalHtml = renderToHtml(StepsHorizontal);
-const stepsHorizontalSnippet = `<EuiStepsHorizontal steps={horizontalSteps} />
+const stepsHorizontalSnippet = `<EuiStepsHorizontal steps={[{
+  title: 'Completed step',
+  isComplete: true,
+  onClick: function,
+}]} />
 `;
 
 import Status from './status';
 const statusSource = require('!!raw-loader!./status');
 const statusHtml = renderToHtml(Steps);
-const statusSnippet = `<EuiSteps 
+const statusSnippet = `<EuiSteps
   steps={[
     {
       title: 'Warning',
@@ -165,7 +169,7 @@ export const StepsExample = {
       demo: <Status />,
     },
     {
-      title: 'Horizontal',
+      title: 'Horizontal steps',
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -177,10 +181,17 @@ export const StepsExample = {
         },
       ],
       text: (
-        <p>
-          For use when forms/setup instructions can and should be split into
-          multiple pages.
-        </p>
+        <Fragment>
+          <p>
+            For use when forms/setup instructions can and should be split into
+            multiple pages.
+          </p>
+          <p>
+            For each step object, be sure to signify previous/completed steps
+            with <EuiCode>isComplete: true</EuiCode> and the current/selected
+            step with <EuiCode>isSelected: true</EuiCode>.
+          </p>
+        </Fragment>
       ),
       demo: <StepsHorizontal />,
       snippet: stepsHorizontalSnippet,
diff --git a/src-docs/src/views/steps/steps_horizontal.js b/src-docs/src/views/steps/steps_horizontal.js
index 6a1611f0701..1b21ecda31d 100644
--- a/src-docs/src/views/steps/steps_horizontal.js
+++ b/src-docs/src/views/steps/steps_horizontal.js
@@ -4,21 +4,21 @@ import { EuiStepsHorizontal } from '../../../../src/components';
 
 const horizontalSteps = [
   {
-    title: 'Completed Step 1',
+    title: 'Completed step 1',
     isComplete: true,
     onClick: () => window.alert('Step 1 clicked'),
   },
   {
-    title: 'Selected Step 2',
+    title: 'Selected step 2',
     isSelected: true,
     onClick: () => window.alert('Step 2 clicked'),
   },
   {
-    title: 'Incomplete Step 3 which will wrap to the next line',
+    title: 'Incomplete step 3 which will wrap to the next line',
     onClick: () => window.alert('Step 3 clicked'),
   },
   {
-    title: 'Disabled Step 4',
+    title: 'Disabled step 4',
     disabled: true,
     onClick: () => window.alert('Step 4 clicked'),
   },
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 77e550cbdf5..571bd6f1622 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -22,7 +22,6 @@
 /// <reference path="./pagination/index.d.ts" />
 /// <reference path="./panel/index.d.ts" />
 /// <reference path="./popover/index.d.ts" />
-/// <reference path="./steps/index.d.ts" />
 /// <reference path="./table/index.d.ts" />
 /// <reference path="./tabs/index.d.ts" />
 
diff --git a/src/components/steps/__snapshots__/step.test.js.snap b/src/components/steps/__snapshots__/step.test.js.snap
deleted file mode 100644
index ba9b4124a7a..00000000000
--- a/src/components/steps/__snapshots__/step.test.js.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// 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"
->
-  <span
-    class="euiScreenReaderOnly"
-  >
-    Step 
-  </span>
-  <div
-    class="euiStepNumber euiStep__circle"
-  >
-    1
-  </div>
-  <h3
-    class="euiTitle euiTitle--small euiStep__title"
-  >
-    First step
-  </h3>
-  <div
-    class="euiStep__content"
-  >
-    <p>
-      Do this
-    </p>
-  </div>
-</div>
-`;
diff --git a/src/components/steps/__snapshots__/step.test.tsx.snap b/src/components/steps/__snapshots__/step.test.tsx.snap
new file mode 100644
index 00000000000..ff9f26b51bd
--- /dev/null
+++ b/src/components/steps/__snapshots__/step.test.tsx.snap
@@ -0,0 +1,257 @@
+// 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
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 1"
+      class="euiStepNumber euiStep__circle"
+    >
+      1
+    </div>
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
+exports[`EuiStep props headingElement 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 1"
+      class="euiStepNumber euiStep__circle"
+    >
+      1
+    </div>
+    <h3
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </h3>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
+exports[`EuiStep props status complete is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 1"
+      class="euiStepNumber euiStepNumber--complete euiStep__circle"
+    >
+      <svg
+        aria-label="complete"
+        class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    </div>
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
+exports[`EuiStep props status danger is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 1"
+      class="euiStepNumber euiStepNumber--danger euiStep__circle"
+    >
+      <svg
+        aria-label="has errors"
+        class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    </div>
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
+exports[`EuiStep props status disabled is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 1"
+      class="euiStepNumber euiStepNumber--disabled euiStep__circle"
+    >
+      1
+    </div>
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
+exports[`EuiStep props status incomplete is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Incomplete Step 1"
+      class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+    />
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
+exports[`EuiStep props status warning is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 1"
+      class="euiStepNumber euiStepNumber--warning euiStep__circle"
+    >
+      <svg
+        aria-label="has warnings"
+        class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
+        focusable="false"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xmlns="http://www.w3.org/2000/svg"
+      />
+    </div>
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
+
+exports[`EuiStep props step 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <div
+      aria-label="Step 5"
+      class="euiStepNumber euiStep__circle"
+    >
+      5
+    </div>
+    <p
+      class="euiTitle euiTitle--small euiStep__title"
+    >
+      First step
+    </p>
+  </div>
+  <div
+    class="euiStep__content"
+  >
+    <p>
+      Do this
+    </p>
+  </div>
+</div>
+`;
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.js.snap b/src/components/steps/__snapshots__/step_horizontal.test.js.snap
deleted file mode 100644
index fc3d40cedbd..00000000000
--- a/src/components/steps/__snapshots__/step_horizontal.test.js.snap
+++ /dev/null
@@ -1,30 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiStepHorizontal is rendered 1`] = `
-<div
-  aria-disabled="false"
-  aria-label="aria-label"
-  aria-selected="false"
-  class="euiStepHorizontal testClass1 testClass2 euiStepHorizontal-isIncomplete"
-  data-test-subj="test subject string"
-  role="tab"
-  tabindex="0"
-  title="Step 1: First step"
->
-  <div
-    class="euiScreenReaderOnly"
-  >
-    Step
-  </div>
-  <div
-    class="euiStepNumber euiStepNumber--incomplete euiStepHorizontal__number"
-  >
-    1
-  </div>
-  <div
-    class="euiStepHorizontal__title"
-  >
-    First step
-  </div>
-</div>
-`;
diff --git a/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
new file mode 100644
index 00000000000..8501189d02d
--- /dev/null
+++ b/src/components/steps/__snapshots__/step_horizontal.test.tsx.snap
@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiStepHorizontal is rendered 1`] = `
+<div
+  aria-disabled="false"
+  aria-label="aria-label"
+  aria-selected="false"
+  class="euiStepHorizontal testClass1 testClass2 euiStepHorizontal-isIncomplete"
+  data-test-subj="test subject string"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--incomplete euiStepHorizontal__number"
+  >
+    1
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props isComplete 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isComplete"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined is complete"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--complete euiStepHorizontal__number"
+  >
+    <svg
+      aria-label="complete"
+      class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props isSelected 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="true"
+  class="euiStepHorizontal euiStepHorizontal-isSelected"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepHorizontal__number"
+  >
+    1
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props status complete is rendered 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--complete euiStepHorizontal__number"
+  >
+    <svg
+      aria-label="complete"
+      class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props status danger is rendered 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--danger euiStepHorizontal__number"
+  >
+    <svg
+      aria-label="has errors"
+      class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props status disabled is rendered 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--disabled euiStepHorizontal__number"
+  >
+    1
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props status incomplete is rendered 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--incomplete euiStepHorizontal__number"
+  >
+    1
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props status warning is rendered 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  role="tab"
+  tabindex="0"
+  title="Step 1: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--warning euiStepHorizontal__number"
+  >
+    <svg
+      aria-label="has warnings"
+      class="euiIcon euiIcon--medium euiIcon-isLoading euiStepNumber__icon"
+      focusable="false"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    />
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props step 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  role="tab"
+  tabindex="0"
+  title="Step 5: undefined"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--incomplete euiStepHorizontal__number"
+  >
+    5
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  />
+</div>
+`;
+
+exports[`EuiStepHorizontal props title 1`] = `
+<div
+  aria-disabled="false"
+  aria-selected="false"
+  class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+  role="tab"
+  tabindex="0"
+  title="Step 1: First step"
+>
+  <div
+    class="euiScreenReaderOnly"
+  >
+    Step
+  </div>
+  <div
+    class="euiStepNumber euiStepNumber--incomplete euiStepHorizontal__number"
+  >
+    1
+  </div>
+  <div
+    class="euiStepHorizontal__title"
+  >
+    First step
+  </div>
+</div>
+`;
diff --git a/src/components/steps/__snapshots__/steps.test.js.snap b/src/components/steps/__snapshots__/steps.test.js.snap
deleted file mode 100644
index 7bd0c2225f3..00000000000
--- a/src/components/steps/__snapshots__/steps.test.js.snap
+++ /dev/null
@@ -1,256 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiSteps testClass1 testClass2"
-  data-test-subj="test subject string"
->
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Step 
-    </span>
-    <div
-      class="euiStepNumber euiStep__circle"
-    >
-      1
-    </div>
-    <h2
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      first title
-    </h2>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        Do this first
-      </p>
-    </div>
-  </div>
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Step 
-    </span>
-    <div
-      class="euiStepNumber euiStep__circle"
-    >
-      2
-    </div>
-    <h2
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      second title
-    </h2>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        Then this
-      </p>
-    </div>
-  </div>
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Incomplete Step 
-    </span>
-    <div
-      class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
-    />
-    <h2
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      third title
-    </h2>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        And finally, do this
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSteps renders steps 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiSteps testClass1 testClass2"
-  data-test-subj="test subject string"
->
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Step 
-    </span>
-    <div
-      class="euiStepNumber euiStep__circle"
-    >
-      1
-    </div>
-    <p
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      first title
-    </p>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        Do this first
-      </p>
-    </div>
-  </div>
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Step 
-    </span>
-    <div
-      class="euiStepNumber euiStep__circle"
-    >
-      2
-    </div>
-    <p
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      second title
-    </p>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        Then this
-      </p>
-    </div>
-  </div>
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Incomplete Step 
-    </span>
-    <div
-      class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
-    />
-    <p
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      third title
-    </p>
-    <div
-      class="euiStep__content"
-    >
-      <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
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Step 
-    </span>
-    <div
-      class="euiStepNumber euiStep__circle"
-    >
-      10
-    </div>
-    <p
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      first title
-    </p>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        Do this first
-      </p>
-    </div>
-  </div>
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Step 
-    </span>
-    <div
-      class="euiStepNumber euiStep__circle"
-    >
-      11
-    </div>
-    <p
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      second title
-    </p>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        Then this
-      </p>
-    </div>
-  </div>
-  <div
-    class="euiStep"
-  >
-    <span
-      class="euiScreenReaderOnly"
-    >
-      Incomplete Step 
-    </span>
-    <div
-      class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
-    />
-    <p
-      class="euiTitle euiTitle--small euiStep__title"
-    >
-      third title
-    </p>
-    <div
-      class="euiStep__content"
-    >
-      <p>
-        And finally, do this
-      </p>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/steps/__snapshots__/steps.test.tsx.snap b/src/components/steps/__snapshots__/steps.test.tsx.snap
new file mode 100644
index 00000000000..ae3c4d844fd
--- /dev/null
+++ b/src/components/steps/__snapshots__/steps.test.tsx.snap
@@ -0,0 +1,256 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSteps renders step title inside "headingElement" element 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSteps testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 1"
+        class="euiStepNumber euiStep__circle"
+      >
+        1
+      </div>
+      <h2
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        first title
+      </h2>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 2"
+        class="euiStepNumber euiStep__circle"
+      >
+        2
+      </div>
+      <h2
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        second title
+      </h2>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Incomplete Step 3"
+        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+      />
+      <h2
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        third title
+      </h2>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        And finally, do this
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiSteps renders steps 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSteps testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 1"
+        class="euiStepNumber euiStep__circle"
+      >
+        1
+      </div>
+      <p
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        first title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 2"
+        class="euiStepNumber euiStep__circle"
+      >
+        2
+      </div>
+      <p
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        second title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Incomplete Step 3"
+        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+      />
+      <p
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        third title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <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
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 10"
+        class="euiStepNumber euiStep__circle"
+      >
+        10
+      </div>
+      <p
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        first title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Do this first
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Step 11"
+        class="euiStepNumber euiStep__circle"
+      >
+        11
+      </div>
+      <p
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        second title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        Then this
+      </p>
+    </div>
+  </div>
+  <div
+    class="euiStep"
+  >
+    <div
+      class="euiStep__titleWrapper"
+    >
+      <div
+        aria-label="Incomplete Step 12"
+        class="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+      />
+      <p
+        class="euiTitle euiTitle--small euiStep__title"
+      >
+        third title
+      </p>
+    </div>
+    <div
+      class="euiStep__content"
+    >
+      <p>
+        And finally, do this
+      </p>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/steps/__snapshots__/steps_horizontal.test.js.snap b/src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
similarity index 100%
rename from src/components/steps/__snapshots__/steps_horizontal.test.js.snap
rename to src/components/steps/__snapshots__/steps_horizontal.test.tsx.snap
diff --git a/src/components/steps/__snapshots__/sub_steps.test.js.snap b/src/components/steps/__snapshots__/sub_steps.test.tsx.snap
similarity index 100%
rename from src/components/steps/__snapshots__/sub_steps.test.js.snap
rename to src/components/steps/__snapshots__/sub_steps.test.tsx.snap
diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
index 2b36aa26af9..e3494439d10 100644
--- a/src/components/steps/_steps.scss
+++ b/src/components/steps/_steps.scss
@@ -3,45 +3,55 @@
  */
 
 .euiStep {
-  // Do not show the content border if it is the last step
-  &:last-of-type .euiStep__content {
-    border-left-color: transparent;
-  }
-
-  .euiTitle {
-    line-height: $euiStepNumberSize; /* 1 */
+  // sass-lint:disable indentation
+  // Create border on all but the last step
+  &:not(:last-of-type) {
+    background-image: linear-gradient(
+                        to right,
+                        transparent 0,
+                        transparent ($euiSize - 1),
+                        $euiBorderColor ($euiSize - 1),
+                        $euiBorderColor ($euiSize + 1),
+                        transparent ($euiSize + 1),
+                        transparent 100%
+                      );
+    background-repeat: no-repeat;
+    background-position: left $euiSizeXXL;
   }
+}
 
-  .euiStep__circle {
-    margin-right: $euiStepNumberMargin;
-    vertical-align: top; /* 1 */
+.euiStep__titleWrapper {
+  display: flex;
+}
 
-    &[class*='complete'],
-    &[class*='warning'],
-    &[class*='danger'] {
-      animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce;
-    }
+.euiStep__circle {
+  flex-shrink: 0;
+  margin-right: $euiStepNumberMargin;
+  vertical-align: top; /* 1 */
 
-    &[class*='incomplete'] {
-      border-color: $euiColorPrimary;
-      animation: none;
-    }
+  &[class*='complete'],
+  &[class*='warning'],
+  &[class*='danger'] {
+    animation: euiGrow $euiAnimSpeedFast $euiAnimSlightBounce;
   }
 
-  .euiStep__title {
-    font-weight: $euiFontWeightMedium;
-    display: inline-block;
+  &[class*='incomplete'] {
+    border-color: $euiColorPrimary;
+    animation: none;
   }
+}
+
+.euiStep__title {
+  font-weight: $euiFontWeightMedium;
+}
 
-  .euiStep__content {
-    border-left: $euiBorderThick;
-    padding: $euiSize $euiSize $euiSizeXL;
-    margin: $euiSizeS 0;
+.euiStep__content {
+  padding: $euiSize $euiSize $euiSizeXL;
+  margin: $euiSizeS 0;
 
-    // Align the content's contents with the title
-    padding-left: ($euiStepNumberSize / 2) - 1px + $euiStepNumberMargin;
+  // Align the content's contents with the title
+  padding-left: ($euiStepNumberSize / 2) + $euiStepNumberMargin;
 
-    // Align content border to horizontal center of step number
-    margin-left: ($euiStepNumberSize / 2) - 1px;
-  }
+  // Align content border to horizontal center of step number
+  margin-left: ($euiStepNumberSize / 2);
 }
diff --git a/src/components/steps/_variables.scss b/src/components/steps/_variables.scss
index 56c90fb4d3e..7fa14cae48d 100644
--- a/src/components/steps/_variables.scss
+++ b/src/components/steps/_variables.scss
@@ -5,6 +5,6 @@ $euiStepNumberMargin: $euiSize !default;
 $euiStepStatusColorsToFade: (
   warning: $euiColorWarning,
   danger: $euiColorDanger,
-  disabled: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade),
-  incomplete: lightOrDarkTheme($euiColorDarkShade, $euiColorLightShade),
+  disabled: $euiColorDarkShade,
+  incomplete: $euiColorDarkShade,
 ) !default;
diff --git a/src/components/steps/index.d.ts b/src/components/steps/index.d.ts
deleted file mode 100644
index 067944441ba..00000000000
--- a/src/components/steps/index.d.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {
-  FunctionComponent,
-  ReactNode,
-  HTMLAttributes,
-  MouseEventHandler,
-} from 'react';
-import { CommonProps, Omit } from '../common';
-
-declare module '@elastic/eui' {
-  export type EuiStepStatus =
-    | 'complete'
-    | 'incomplete'
-    | 'warning'
-    | 'danger'
-    | 'disabled';
-
-  /**
-   * @see './step.js'
-   */
-
-  export interface EuiStepProps {
-    children: ReactNode; // required
-    status?: EuiStepStatus;
-    step: number;
-    title: string;
-    headingElement?: string;
-  }
-
-  type StandaloneEuiStepProps = CommonProps &
-    HTMLAttributes<HTMLDivElement> &
-    EuiStepProps;
-
-  export const EuiStep: FunctionComponent<StandaloneEuiStepProps>;
-
-  /**
-   * @see './steps.js'
-   */
-
-  export type EuiContainedStepProps = Omit<StandaloneEuiStepProps, 'step'>;
-
-  export interface EuiStepsProps {
-    firstStepNumber?: number;
-    headingElement?: string;
-    steps: EuiContainedStepProps[];
-  }
-
-  export const EuiSteps: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepsProps
-  >;
-
-  /**
-   * @see './sub_steps.js'
-   */
-
-  export interface EuiSubStepsProps {}
-
-  export const EuiSubSteps: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiSubStepsProps
-  >;
-
-  /**
-   * @see './steps_horizontal.js'
-   */
-
-  // EuiStepHorizontal is not exported by EUI
-  type EuiStepHorizontalProp = CommonProps &
-    HTMLAttributes<HTMLDivElement> & {
-      isSelected?: boolean;
-      isComplete?: boolean;
-      onClick: MouseEventHandler<HTMLDivElement>; // required
-      step: number;
-      title: ReactNode;
-      disabled?: boolean;
-      status?: EuiStepStatus;
-    };
-
-  type ContainedEuiStepHorizontalProps = Omit<EuiStepHorizontalProp, 'step'>;
-
-  export interface EuiStepsHorizontalProps {
-    steps: ContainedEuiStepHorizontalProps[];
-  }
-
-  export const EuiStepsHorizontal: FunctionComponent<
-    CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepsHorizontalProps
-  >;
-}
diff --git a/src/components/steps/index.js b/src/components/steps/index.ts
similarity index 78%
rename from src/components/steps/index.js
rename to src/components/steps/index.ts
index 7fdbaed1084..88fb7b8c660 100644
--- a/src/components/steps/index.js
+++ b/src/components/steps/index.ts
@@ -5,3 +5,5 @@ export { EuiSteps } from './steps';
 export { EuiSubSteps } from './sub_steps';
 
 export { EuiStepsHorizontal } from './steps_horizontal';
+
+export { EuiStepStatus } from './step_number';
diff --git a/src/components/steps/step.js b/src/components/steps/step.js
deleted file mode 100644
index c6ef700f084..00000000000
--- a/src/components/steps/step.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiScreenReaderOnly } from '../accessibility';
-
-import { EuiTitle } from '../title';
-
-import { STATUS, EuiStepNumber } from './step_number';
-
-import { EuiI18n } from '../i18n';
-
-export const EuiStep = ({
-  className,
-  children,
-  headingElement,
-  step,
-  title,
-  status,
-  ...rest
-}) => {
-  const classes = classNames('euiStep', className);
-
-  let screenReaderStep;
-  if (status === 'incomplete') {
-    screenReaderStep = (
-      <EuiI18n token="euiStep.incompleteStep" default="Incomplete Step" />
-    );
-  } else {
-    screenReaderStep = <EuiI18n token="euiStep.completeStep" default="Step" />;
-  }
-
-  return (
-    <div className={classes} {...rest}>
-      <EuiScreenReaderOnly>
-        <span>{screenReaderStep}&nbsp;</span>
-      </EuiScreenReaderOnly>
-
-      <EuiStepNumber
-        className="euiStep__circle"
-        number={step}
-        status={status}
-        isHollow={status === 'incomplete'}
-      />
-
-      <EuiTitle size="s" className="euiStep__title">
-        {React.createElement(headingElement, null, title)}
-      </EuiTitle>
-
-      <div className="euiStep__content">{children}</div>
-    </div>
-  );
-};
-
-EuiStep.propTypes = {
-  children: PropTypes.node.isRequired,
-  /**
-   * Will replace the number provided in props.step with alternate styling.
-   * Options: `complete`, `incomplete`, `warning`, `danger`, `disabled`
-   */
-  status: PropTypes.oneOf(STATUS),
-  /**
-   * 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,
-};
-
-EuiStep.defaultProps = {
-  headingElement: 'p',
-};
diff --git a/src/components/steps/step.test.js b/src/components/steps/step.test.js
deleted file mode 100644
index 29973827f25..00000000000
--- a/src/components/steps/step.test.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { EuiStep } from './step';
-
-describe('EuiStep', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiStep
-        {...requiredProps}
-        headingElement={'h3'}
-        step={1}
-        title={'First step'}>
-        <p>Do this</p>
-      </EuiStep>
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-});
diff --git a/src/components/steps/step.test.tsx b/src/components/steps/step.test.tsx
new file mode 100644
index 00000000000..9c7c4354f2d
--- /dev/null
+++ b/src/components/steps/step.test.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiStep } from './step';
+import { STATUS } from './step_number';
+
+describe('EuiStep', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiStep {...requiredProps} title={'First step'}>
+        <p>Do this</p>
+      </EuiStep>
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    test('headingElement', () => {
+      const component = render(
+        <EuiStep headingElement={'h3'} title={'First step'}>
+          <p>Do this</p>
+        </EuiStep>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('step', () => {
+      const component = render(
+        <EuiStep step={5} title={'First step'}>
+          <p>Do this</p>
+        </EuiStep>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    describe('status', () => {
+      STATUS.forEach(status => {
+        test(`${status} is rendered`, () => {
+          const component = render(
+            <EuiStep status={status} title={'First step'}>
+              <p>Do this</p>
+            </EuiStep>
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+  });
+});
diff --git a/src/components/steps/step.tsx b/src/components/steps/step.tsx
new file mode 100644
index 00000000000..5271c3e4a99
--- /dev/null
+++ b/src/components/steps/step.tsx
@@ -0,0 +1,73 @@
+import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+import { CommonProps } from '../common';
+
+import classNames from 'classnames';
+
+import { EuiTitle } from '../title';
+
+import { EuiStepStatus, EuiStepNumber } from './step_number';
+
+import { EuiI18n } from '../i18n';
+
+export interface EuiStepProps {
+  children: ReactNode;
+  /**
+   * The HTML tag used for the title
+   */
+  headingElement?: string;
+  /**
+   * The number of the step in the list of steps
+   */
+  step?: number;
+  title: string;
+  /**
+   * May replace the number provided in props.step with alternate styling.
+   */
+  status?: EuiStepStatus;
+}
+
+export type StandaloneEuiStepProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> &
+  EuiStepProps;
+
+export const EuiStep: FunctionComponent<StandaloneEuiStepProps> = ({
+  className,
+  children,
+  headingElement = 'p',
+  step = 1,
+  title,
+  status,
+  ...rest
+}) => {
+  const classes = classNames('euiStep', className);
+
+  return (
+    <div className={classes} {...rest}>
+      <div className="euiStep__titleWrapper">
+        <EuiI18n
+          token="euiStep.ariaLabel"
+          default={({ status }: { status?: EuiStepStatus }) => {
+            if (status === 'incomplete') return 'Incomplete Step';
+            return 'Step';
+          }}
+          values={{ status }}>
+          {(ariaLabel: string) => (
+            <EuiStepNumber
+              className="euiStep__circle"
+              aria-label={`${ariaLabel} ${step}`}
+              number={step}
+              status={status}
+              isHollow={status === 'incomplete'}
+            />
+          )}
+        </EuiI18n>
+
+        <EuiTitle size="s" className="euiStep__title">
+          {React.createElement(headingElement, null, title)}
+        </EuiTitle>
+      </div>
+
+      <div className="euiStep__content">{children}</div>
+    </div>
+  );
+};
diff --git a/src/components/steps/step_horizontal.test.js b/src/components/steps/step_horizontal.test.js
deleted file mode 100644
index 93526ff6c1e..00000000000
--- a/src/components/steps/step_horizontal.test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import { render, mount } from 'enzyme';
-import sinon from 'sinon';
-import { requiredProps } from '../../test/required_props';
-
-import { EuiStepHorizontal } from './step_horizontal';
-
-describe('EuiStepHorizontal', () => {
-  test('is rendered', () => {
-    const component = render(
-      <EuiStepHorizontal
-        {...requiredProps}
-        step={1}
-        title={'First step'}
-        onClick={() => {}}
-      />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  describe('props', () => {
-    describe('onClick', () => {
-      test('is called when clicked', () => {
-        const onClickHandler = sinon.stub();
-
-        const component = mount(
-          <EuiStepHorizontal step={1} onClick={onClickHandler} />
-        );
-
-        component.simulate('click');
-
-        sinon.assert.calledOnce(onClickHandler);
-      });
-
-      test("isn't called when clicked if it's disabled", () => {
-        const onClickHandler = sinon.stub();
-
-        const component = mount(
-          <EuiStepHorizontal disabled step={1} onClick={onClickHandler} />
-        );
-
-        component.simulate('click');
-
-        sinon.assert.notCalled(onClickHandler);
-      });
-    });
-  });
-});
diff --git a/src/components/steps/step_horizontal.test.tsx b/src/components/steps/step_horizontal.test.tsx
new file mode 100644
index 00000000000..8f496a34498
--- /dev/null
+++ b/src/components/steps/step_horizontal.test.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, mount } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { STATUS } from './step_number';
+import { EuiStepHorizontal } from './step_horizontal';
+
+describe('EuiStepHorizontal', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiStepHorizontal {...requiredProps} onClick={() => {}} />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('props', () => {
+    test('step', () => {
+      const component = render(
+        <EuiStepHorizontal step={5} onClick={() => {}} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('title', () => {
+      const component = render(
+        <EuiStepHorizontal title={'First step'} onClick={() => {}} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('isSelected', () => {
+      const component = render(
+        <EuiStepHorizontal isSelected onClick={() => {}} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    test('isComplete', () => {
+      const component = render(
+        <EuiStepHorizontal isComplete onClick={() => {}} />
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
+    describe('status', () => {
+      STATUS.forEach(status => {
+        test(`${status} is rendered`, () => {
+          const component = render(
+            <EuiStepHorizontal status={status} onClick={() => {}} />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+
+    describe('onClick', () => {
+      test('is called when clicked', () => {
+        const onClickHandler = jest.fn();
+
+        const component = mount(
+          <EuiStepHorizontal step={1} onClick={onClickHandler} />
+        );
+
+        component.simulate('click');
+
+        expect(onClickHandler).toBeCalledTimes(1);
+      });
+
+      test("isn't called when clicked if it's disabled", () => {
+        const onClickHandler = jest.fn();
+
+        const component = mount(
+          <EuiStepHorizontal disabled step={1} onClick={onClickHandler} />
+        );
+
+        component.simulate('click');
+
+        expect(onClickHandler).not.toBeCalled();
+      });
+    });
+  });
+});
diff --git a/src/components/steps/step_horizontal.js b/src/components/steps/step_horizontal.tsx
similarity index 62%
rename from src/components/steps/step_horizontal.js
rename to src/components/steps/step_horizontal.tsx
index 1915d3a3507..c17dd8729cb 100644
--- a/src/components/steps/step_horizontal.js
+++ b/src/components/steps/step_horizontal.tsx
@@ -1,16 +1,44 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  MouseEventHandler,
+} from 'react';
+import { CommonProps } from '../common';
 import classNames from 'classnames';
 
+import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly, EuiKeyboardAccessible } from '../accessibility';
 
-import { EuiI18n } from '../i18n';
+import { EuiStepStatus, EuiStepNumber } from './step_number';
 
-import { STATUS, EuiStepNumber } from './step_number';
+export interface EuiStepHorizontalProps {
+  /**
+   * Is the current step
+   */
+  isSelected?: boolean;
+  /**
+   * Is a previous step that has been completed
+   */
+  isComplete?: boolean;
+  onClick: MouseEventHandler<HTMLDivElement>;
+  disabled?: boolean;
+  /**
+   * The number of the step in the list of steps
+   */
+  step?: number;
+  title?: string;
+  /**
+   * May replace the number provided in props.step with alternate styling.
+   * The `isSelected`, `isComplete`, and `disabled` props will override these.
+   */
+  status?: EuiStepStatus;
+}
 
-export const EuiStepHorizontal = ({
+export const EuiStepHorizontal: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepHorizontalProps
+> = ({
   className,
-  step,
+  step = 1,
   title,
   isSelected,
   isComplete,
@@ -36,18 +64,23 @@ export const EuiStepHorizontal = ({
     status = 'incomplete';
   }
 
-  const onStepClick = e => {
-    if (disabled) {
-      return;
-    }
-
-    onClick(e);
+  const onStepClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (disabled) return;
+    onClick(event);
   };
 
   return (
     <EuiI18n
       token="euiStepHorizontal.buttonTitle"
-      default={({ step, title, disabled, isComplete }) => {
+      default={({
+        step,
+        title,
+        disabled,
+        isComplete,
+      }: Pick<
+        EuiStepHorizontalProps,
+        'step' | 'title' | 'disabled' | 'isComplete'
+      >) => {
         let titleAppendix = '';
         if (disabled) {
           titleAppendix = ' is disabled';
@@ -58,7 +91,7 @@ export const EuiStepHorizontal = ({
         return `Step ${step}: ${title}${titleAppendix}`;
       }}
       values={{ step, title, disabled, isComplete }}>
-      {buttonTitle => (
+      {(buttonTitle: string) => (
         <EuiKeyboardAccessible>
           <div
             role="tab"
@@ -66,7 +99,7 @@ export const EuiStepHorizontal = ({
             aria-disabled={!!disabled}
             className={classes}
             onClick={onStepClick}
-            tabIndex={disabled ? '-1' : '0'}
+            tabIndex={disabled ? -1 : 0}
             title={buttonTitle}
             {...rest}>
             <EuiScreenReaderOnly>
@@ -88,25 +121,3 @@ export const EuiStepHorizontal = ({
     </EuiI18n>
   );
 };
-
-EuiStepHorizontal.propTypes = {
-  isSelected: PropTypes.bool,
-  isComplete: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
-  step: PropTypes.number.isRequired,
-  title: PropTypes.node,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  /**
-   * Will replace the number provided in props.step with alternate styling.
-   * Options: `complete`, `incomplete`, `warning`, `danger`, `disabled`.
-   * The `isSelected`, `isComplete`, and `disabled` props will override these.
-   */
-  status: PropTypes.oneOf(STATUS),
-};
-
-EuiStepHorizontal.defaultProps = {
-  isSelected: false,
-  isComplete: false,
-  disabled: false,
-};
diff --git a/src/components/steps/steps.test.js b/src/components/steps/steps.test.tsx
similarity index 90%
rename from src/components/steps/steps.test.js
rename to src/components/steps/steps.test.tsx
index 3f67923f043..6a22bab87c0 100644
--- a/src/components/steps/steps.test.js
+++ b/src/components/steps/steps.test.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiSteps } from './steps';
+import { EuiContainedStepProps, EuiSteps } from './steps';
 
-const steps = [
+const steps: EuiContainedStepProps[] = [
   {
     title: 'first title',
     children: <p>Do this first</p>,
diff --git a/src/components/steps/steps.js b/src/components/steps/steps.tsx
similarity index 52%
rename from src/components/steps/steps.js
rename to src/components/steps/steps.tsx
index f00231c2462..b2d8688fb34 100644
--- a/src/components/steps/steps.js
+++ b/src/components/steps/steps.tsx
@@ -1,9 +1,31 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import { CommonProps, Omit } from '../common';
 import classNames from 'classnames';
-import { EuiStep } from './step';
 
-function renderSteps(steps, firstStepNumber, headingElement) {
+import { StandaloneEuiStepProps, EuiStep } from './step';
+
+export type EuiContainedStepProps = Omit<StandaloneEuiStepProps, 'step'>;
+
+export interface EuiStepsProps {
+  /**
+   * An array of `EuiStep` objects excluding the `step` prop
+   */
+  steps: EuiContainedStepProps[];
+  /**
+   * The number the steps should begin from
+   */
+  firstStepNumber?: number;
+  /**
+   * The HTML tag used for the title
+   */
+  headingElement?: string;
+}
+
+function renderSteps(
+  steps: EuiContainedStepProps[],
+  firstStepNumber: number,
+  headingElement: string
+) {
   return steps.map((step, index) => {
     const { className, children, title, status, ...rest } = step;
 
@@ -22,10 +44,12 @@ function renderSteps(steps, firstStepNumber, headingElement) {
   });
 }
 
-export const EuiSteps = ({
+export const EuiSteps: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepsProps
+> = ({
   className,
-  firstStepNumber,
-  headingElement,
+  firstStepNumber = 1,
+  headingElement = 'p',
   steps,
   ...rest
 }) => {
@@ -37,29 +61,3 @@ export const EuiSteps = ({
     </div>
   );
 };
-
-const stepPropType = PropTypes.shape({
-  title: PropTypes.string.isRequired,
-  children: PropTypes.node,
-});
-
-EuiSteps.propTypes = {
-  className: PropTypes.string,
-  /**
-   * The number the steps should begin from
-   */
-  firstStepNumber: PropTypes.number,
-  /**
-   * The HTML tag used for the title
-   */
-  headingElement: PropTypes.string,
-  /**
-   * An array of individual step objects
-   */
-  steps: PropTypes.arrayOf(stepPropType).isRequired,
-};
-
-EuiSteps.defaultProps = {
-  firstStepNumber: 1,
-  headingElement: 'p',
-};
diff --git a/src/components/steps/steps_horizontal.js b/src/components/steps/steps_horizontal.js
deleted file mode 100644
index c9ab743028d..00000000000
--- a/src/components/steps/steps_horizontal.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { EuiStepHorizontal } from './step_horizontal';
-
-function renderHorizontalSteps(steps) {
-  return steps.map((step, index) => {
-    const {
-      children,
-      className,
-      disabled,
-      isSelected,
-      onClick,
-      ...rest
-    } = step;
-
-    return (
-      <EuiStepHorizontal
-        className={className}
-        key={index}
-        step={index + 1}
-        disabled={disabled}
-        isSelected={isSelected}
-        onClick={onClick}
-        {...rest}>
-        {children}
-      </EuiStepHorizontal>
-    );
-  });
-}
-
-export const EuiStepsHorizontal = ({ className, steps, ...rest }) => {
-  const classes = classNames('euiStepsHorizontal', className);
-
-  return (
-    <div role="tablist" className={classes} {...rest}>
-      {renderHorizontalSteps(steps)}
-    </div>
-  );
-};
-
-const stepPropType = PropTypes.shape({
-  isSelected: PropTypes.bool,
-  disabled: PropTypes.bool,
-  children: PropTypes.node,
-});
-
-EuiStepsHorizontal.propTypes = {
-  className: PropTypes.string,
-  steps: PropTypes.arrayOf(stepPropType).isRequired,
-};
diff --git a/src/components/steps/steps_horizontal.test.js b/src/components/steps/steps_horizontal.test.tsx
similarity index 100%
rename from src/components/steps/steps_horizontal.test.js
rename to src/components/steps/steps_horizontal.test.tsx
diff --git a/src/components/steps/steps_horizontal.tsx b/src/components/steps/steps_horizontal.tsx
new file mode 100644
index 00000000000..2613f5048c8
--- /dev/null
+++ b/src/components/steps/steps_horizontal.tsx
@@ -0,0 +1,32 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import { CommonProps, Omit } from '../common';
+import classNames from 'classnames';
+
+import { EuiStepHorizontalProps, EuiStepHorizontal } from './step_horizontal';
+
+type ContainedEuiStepHorizontalProps = Omit<EuiStepHorizontalProps, 'step'>;
+
+export interface EuiStepsHorizontalProps {
+  /**
+   * An array of `EuiStepHorizontal` objects excluding the `step` prop
+   */
+  steps: ContainedEuiStepHorizontalProps[];
+}
+
+function renderHorizontalSteps(steps: ContainedEuiStepHorizontalProps[]) {
+  return steps.map((step, index) => {
+    return <EuiStepHorizontal key={index} step={index + 1} {...step} />;
+  });
+}
+
+export const EuiStepsHorizontal: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLDivElement> & EuiStepsHorizontalProps
+> = ({ className, steps, ...rest }) => {
+  const classes = classNames('euiStepsHorizontal', className);
+
+  return (
+    <div role="tablist" className={classes} {...rest}>
+      {renderHorizontalSteps(steps)}
+    </div>
+  );
+};
diff --git a/src/components/steps/sub_steps.js b/src/components/steps/sub_steps.js
deleted file mode 100644
index 2af453ace3c..00000000000
--- a/src/components/steps/sub_steps.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export const EuiSubSteps = ({ children, className, ...rest }) => {
-  const classes = classNames('euiSubSteps', className);
-
-  return (
-    <div className={classes} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-EuiSubSteps.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};
diff --git a/src/components/steps/sub_steps.test.js b/src/components/steps/sub_steps.test.tsx
similarity index 100%
rename from src/components/steps/sub_steps.test.js
rename to src/components/steps/sub_steps.test.tsx
diff --git a/src/components/steps/sub_steps.tsx b/src/components/steps/sub_steps.tsx
new file mode 100644
index 00000000000..71e35fa0e95
--- /dev/null
+++ b/src/components/steps/sub_steps.tsx
@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, FunctionComponent } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+export type EuiSubStepsProps = FunctionComponent<
+  HTMLAttributes<HTMLDivElement> & CommonProps
+>;
+
+export const EuiSubSteps: EuiSubStepsProps = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiSubSteps', className);
+
+  return (
+    <div className={classes} {...rest}>
+      {children}
+    </div>
+  );
+};