[EuiSteps] Updates for Amsterdam and added disabled and loading states

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Adjusted the shadow in `EuiComment` ([#4321](https://github.com/elastic/eui/pull/4321))
 - Added `success` and `warning` colors to `EuiButtonEmpty` ([#4325](https://github.com/elastic/eui/pull/4325))
+- Added `disabled` and `loading` `status` to `EuiStep` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 **Bug fixes**
 
@@ -19,6 +20,7 @@
 - Increased font size for `m` size of `EuiListGroupItem` ([#4340](https://github.com/elastic/eui/pull/4340))
 - Reduced padding in `EuiToolTip` ([#4353](https://github.com/elastic/eui/pull/4353))
 - Reduced border-radius in `EuiRange`'s tooltip ([#4353](https://github.com/elastic/eui/pull/4353))
+- Consolidated `EuiStepNumber` indicators for `EuiSteps` and `EuiHorizontalSteps` ([#4338](https://github.com/elastic/eui/pull/4338))
 
 ## [`30.5.1`](https://github.com/elastic/eui/tree/v30.5.1)
 

src-docs/src/services/playground/simulateFunction.js

@@ -1,10 +1,13 @@
 import { PropTypes } from 'react-view';
 
-export const simulateFunction = (prop = { custom: {} }) => {
+export const simulateFunction = (
+  prop = { custom: {} },
+  defaultValue = false
+) => {
   const newProp = {
     ...prop,
     type: PropTypes.Custom,
-    value: undefined,
+    value: defaultValue,
     custom: {
       ...prop.custom,
       use: 'switch',

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

@@ -1,8 +1,10 @@
 import { PropTypes } from 'react-view';
-import { EuiStep } from '../../../../src/components/';
+import { EuiStep, EuiStepHorizontal } from '../../../../src/components/steps';
 import {
   propUtilityForPlayground,
   createOptionalEnum,
+  simulateFunction,
+  dummyFunction,
 } from '../../services/playground';
 
 export const stepConfig = () => {
@@ -36,3 +38,34 @@ export const stepConfig = () => {
     },
   };
 };
+
+export const stepHorizontalConfig = () => {
+  const docgenInfo = Array.isArray(EuiStepHorizontal.__docgenInfo)
+    ? EuiStepHorizontal.__docgenInfo[0]
+    : EuiStepHorizontal.__docgenInfo;
+  const propsToUse = propUtilityForPlayground(docgenInfo.props);
+
+  propsToUse.title.value = 'Horizontal step';
+
+  propsToUse.status = createOptionalEnum(propsToUse.status);
+
+  propsToUse.onClick = simulateFunction(propsToUse.onClick, true);
+
+  return {
+    config: {
+      componentName: 'EuiStepHorizontal',
+      props: propsToUse,
+      scope: {
+        EuiStepHorizontal,
+      },
+      imports: {
+        '@elastic/eui': {
+          named: ['EuiStepHorizontal'],
+        },
+      },
+      customProps: {
+        onClick: dummyFunction,
+      },
+    },
+  };
+};

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

@@ -9,39 +9,54 @@ import {
 
 const firstSetOfSteps = [
   {
-    title:
-      'Step 1 with a long title to check what happens during wrapping which should have been fixed.',
-    children: <p>Do this first</p>,
+    title: 'Step 1',
+    children: (
+      <EuiText>
+        <p>Do this first</p>
+      </EuiText>
+    ),
   },
   {
     title: 'Step 2',
-    children: <p>Then this</p>,
+    children: (
+      <EuiText>
+        <p>Then this</p>
+      </EuiText>
+    ),
   },
 ];
 
 const nextSetOfSteps = [
   {
     title: 'Good step',
-    children: <p>Do this first</p>,
+    children: (
+      <EuiText>
+        <p>Do this first</p>
+      </EuiText>
+    ),
   },
   {
     title: 'Better step',
-    children: <p>Then this</p>,
+    children: (
+      <EuiText>
+        <p>Then this</p>
+      </EuiText>
+    ),
   },
 ];
 
 export default () => (
   <div>
     <EuiSteps steps={firstSetOfSteps} />
 
+    <EuiSpacer size="m" />
     <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>
+    <EuiSpacer size="m" />
 
     <EuiSteps
       firstStepNumber={firstSetOfSteps.length + 1}

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

@@ -7,15 +7,19 @@ import {
   EuiCodeBlock,
   EuiSubSteps,
 } from '../../../../src/components';
+import { EuiSpacer } from '../../../../src/components/spacer';
 
 const steps = [
   {
     title: 'Step 1 has intro plus code snippet',
     children: (
-      <EuiText>
-        <p>Run this code snippet to install things.</p>
+      <>
+        <EuiText>
+          <p>Run this code snippet to install things.</p>
+        </EuiText>
+        <EuiSpacer />
         <EuiCodeBlock language="bash">npm install</EuiCodeBlock>
-      </EuiText>
+      </>
     ),
   },
   {
@@ -50,7 +54,7 @@ const steps = [
           Now that you&apos;ve completed step 2, go find the{' '}
           <EuiCode>thing</EuiCode>.
         </p>
-        <p className="euiStep__subSteps">
+        <p>
           Go to <strong>Overview &gt;&gt; Endpoints</strong> note{' '}
           <strong>Elasticsearch</strong> as <EuiCode>&lt;thing&gt;</EuiCode>.
         </p>

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

@@ -14,7 +14,7 @@ import {
 
 import { EuiStepHorizontal } from '../../../../src/components/steps/step_horizontal';
 
-import { stepConfig } from './playground';
+import { stepConfig, stepHorizontalConfig } from './playground';
 
 import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
@@ -24,7 +24,7 @@ const stepsSnippet = [
   steps={[
     {
       title: 'Step 1',
-      children: <p>Do this first</p>,
+      children: <EuiText><p>Do this first</p></EuiText>,
     },
   ]}
 />`,
@@ -33,7 +33,7 @@ const stepsSnippet = [
   steps={[
     {
       title: 'Step 3',
-      children: <p>Do this third first</p>,
+      children: <EuiText><p>Do this third first</p></EuiText>,
     },
   ]}
 />`,
@@ -42,6 +42,51 @@ const stepsSnippet = [
 import StepsComplex from './steps_complex';
 const stepsComplexSource = require('!!raw-loader!./steps_complex');
 const stepsComplexHtml = renderToHtml(StepsComplex);
+const stepsComplexSnippet = [
+  `<EuiSteps
+  steps={[
+    {
+      title: 'Step 1 has intro plus code snippet',
+      children: (
+        <>
+          <EuiText>
+            <p>Run this code snippet to install things.</p>
+          </EuiText>
+          <EuiSpacer />
+          <EuiCodeBlock language="bash">npm install</EuiCodeBlock>
+        </>
+      ),
+    },
+  ]}
+/>`,
+  `<EuiSteps
+  steps={[
+    {
+      title: 'Step 2 has sub steps',
+      children: (
+        <EuiText>
+          <p>
+            In order to complete this step, do the following things <strong>in order</strong>.
+          </p>
+          <EuiSubSteps>
+            <ol>
+              <li>Do thing 1</li>
+              <li>Do thing 2</li>
+              <li>Do thing 3</li>
+            </ol>
+          </EuiSubSteps>
+          <p>Here are some bullet point reminders.</p>
+          <ul>
+            <li>Reminder 1</li>
+            <li>Reminder 2</li>
+            <li>Reminder 3</li>
+          </ul>
+        </EuiText>
+      ),
+    },
+  ]}
+/>`,
+];
 
 import HeadingElementSteps from './heading_element_steps';
 const headingElementStepsSource = require('!!raw-loader!./heading_element_steps');
@@ -75,9 +120,7 @@ const statusSnippet = `<EuiSteps
 import StepsTitleSizes from './steps_title_sizes';
 const stepsTitleSizesSource = require('!!raw-loader!./steps_title_sizes');
 const stepsTitleSizesHtml = renderToHtml(StepsTitleSizes);
-const stepsTitleSizesSnippet = `<EuiSteps titleSize="xs" steps={[{
-  title: 'Completed step',
-}]} />
+const stepsTitleSizesSnippet = `<EuiSteps titleSize="xs" steps={steps} />
 `;
 
 export const StepsExample = {
@@ -97,7 +140,11 @@ export const StepsExample = {
       text: (
         <p>
           <strong>EuiSteps</strong> presents procedural content in a numbered
-          outline format.
+          outline format. It is best used when presenting instructional content
+          that must be conducted in a particular order. It requires a{' '}
+          <EuiCode>title</EuiCode> and <EuiCode>children</EuiCode> to be present
+          and will automatically increment the step number based on the initial{' '}
+          <EuiCode>firstStepNumber</EuiCode>.
         </p>
       ),
       props: { EuiSteps, EuiStep },
@@ -125,6 +172,7 @@ export const StepsExample = {
       ),
       demo: <StepsComplex />,
       props: { EuiSubSteps },
+      snippet: stepsComplexSnippet,
     },
     {
       title: 'Heading elements',
@@ -174,7 +222,8 @@ export const StepsExample = {
           Steps can optionally include <EuiCode>status</EuiCode> prop that will
           alter the look of the number prefix. The options are{' '}
           <EuiCode>incomplete</EuiCode>, <EuiCode>complete</EuiCode>,{' '}
-          <EuiCode>warning</EuiCode>, and <EuiCode>danger</EuiCode>. This is
+          <EuiCode>warning</EuiCode>, <EuiCode>danger</EuiCode>,{' '}
+          <EuiCode>disabled</EuiCode> and <EuiCode>loading</EuiCode>. This is
           used mostly as a final step when you need to make some sort of final
           check.
         </p>
@@ -240,5 +289,5 @@ export const StepsExample = {
       props: { EuiStepsHorizontal, EuiStepHorizontal },
     },
   ],
-  playground: stepConfig,
+  playground: [stepConfig, stepHorizontalConfig],
 };

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

@@ -19,6 +19,7 @@ exports[`EuiStep is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -56,6 +57,7 @@ exports[`EuiStep props headingElement 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -142,7 +144,7 @@ exports[`EuiStep props status danger is rendered 1`] = `
 
 exports[`EuiStep props status disabled is rendered 1`] = `
 <div
-  class="euiStep"
+  class="euiStep euiStep-isDisabled"
 >
   <div
     class="euiStep__titleWrapper"
@@ -157,6 +159,7 @@ exports[`EuiStep props status disabled is rendered 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>
@@ -192,6 +195,47 @@ exports[`EuiStep props status incomplete is rendered 1`] = `
       >
         Step 1 is incomplete
       </span>
+      <span
+        aria-hidden="true"
+        class="euiStepNumber__number"
+      >
+        1
+      </span>
+    </span>
+    <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 loading is rendered 1`] = `
+<div
+  class="euiStep"
+>
+  <div
+    class="euiStep__titleWrapper"
+  >
+    <span
+      class="euiStepNumber euiStepNumber--loading euiStep__circle"
+    >
+      <span
+        class="euiScreenReaderOnly"
+      >
+        Step 1 is loading
+      </span>
+      <span
+        class="euiLoadingSpinner euiLoadingSpinner--xLarge euiStepNumber__loader"
+      />
     </span>
     <p
       class="euiTitle euiTitle--small euiStep__title"
@@ -258,6 +302,7 @@ exports[`EuiStep props step 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         5
       </span>
@@ -295,6 +340,7 @@ exports[`EuiStep props titleSize 1`] = `
       </span>
       <span
         aria-hidden="true"
+        class="euiStepNumber__number"
       >
         1
       </span>