Fix and TS EuiSteps (elastic#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

@@ -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)
 

src-docs/src/i18ntokens.json

@@ -725,31 +725,31 @@
     "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",
     "defString": "Step",
     "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",

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>

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>,
   },
   {

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,16 +18,16 @@ import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
 const stepsHtml = renderToHtml(Steps);
 const stepsSnippet = [
-  `<EuiSteps 
-  firstStepNumber={3}
+  `<EuiSteps
   steps={[
     {
       title: 'Step 1',
       children: <p>Do this first</p>,
     },
   ]}
 />`,
-  `<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,

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'),
   },

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" />