[Emotion] Convert EuiSteps

src-docs/src/views/steps/status.js → src-docs/src/views/steps/status.tsx

@@ -1,9 +1,16 @@
 import React, { useState, Fragment } from 'react';
 
-import { EuiSpacer, EuiSteps, EuiButton } from '../../../../src/components';
+import {
+  EuiSpacer,
+  EuiSteps,
+  EuiStepStatus,
+  EuiButton,
+  EuiFlexGroup,
+  EuiFlexItem,
+} from '../../../../src/components';
 
 export default () => {
-  const [status, setStatus] = useState('incomplete');
+  const [status, setStatus] = useState<EuiStepStatus>('incomplete');
 
   let completeButton;
   if (status !== 'complete') {
@@ -59,7 +66,16 @@ export default () => {
         <Fragment>
           <p>We are fancy buttons just waiting to be pushed!</p>
           <EuiSpacer />
-          {completeButton} {warningButton} {dangerButton}
+          <EuiFlexGroup
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+            wrap
+          >
+            <EuiFlexItem grow={false}> {completeButton} </EuiFlexItem>
+            <EuiFlexItem grow={false}> {warningButton} </EuiFlexItem>
+            <EuiFlexItem grow={false}> {dangerButton} </EuiFlexItem>
+          </EuiFlexGroup>
         </Fragment>
       ),
       status: status,

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

@@ -129,7 +129,7 @@ export const StepsExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: stepsSource,
         },
       ],
@@ -152,7 +152,7 @@ export const StepsExample = {
       title: 'Complex steps',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: stepsComplexSource,
         },
       ],
@@ -171,7 +171,7 @@ export const StepsExample = {
       title: 'Heading elements',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: headingElementStepsSource,
         },
       ],
@@ -198,7 +198,7 @@ export const StepsExample = {
       title: 'Steps status',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: statusSource,
         },
       ],
@@ -220,7 +220,7 @@ export const StepsExample = {
       title: 'Custom title sizes',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: stepsTitleSizesSource,
         },
       ],
@@ -243,7 +243,7 @@ export const StepsExample = {
       title: 'Horizontal steps',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: stepsHorizontalSource,
         },
       ],

src-docs/src/views/steps/steps_horizontal.js → src-docs/src/views/steps/steps_horizontal.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 
-import { EuiStepsHorizontal } from '../../../../src/components';
+import {
+  EuiStepsHorizontal,
+  EuiStepsHorizontalProps,
+} from '../../../../src/components';
 
-const horizontalSteps = [
+const horizontalSteps: EuiStepsHorizontalProps['steps'] = [
   {
     title: 'Completed step 1',
     status: 'complete',

src/components/index.scss

@@ -24,6 +24,5 @@
 @import 'side_nav/index';
 @import 'search_bar/index';
 @import 'selectable/index';
-@import 'steps/index';
 @import 'suggest/index';
 @import 'table/index';