Created EuiSubSteps component to wrap sub steps in a class

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

@@ -5,6 +5,7 @@ import {
   EuiSteps,
   EuiText,
   EuiCodeBlock,
+  EuiSubSteps,
 } from '../../../../src/components';
 
 const steps = [
@@ -24,13 +25,13 @@ const steps = [
     children: (
       <EuiText>
         <p>In order to complete this step, do the following things <strong>in order</strong>.</p>
-        <div className="euiStep__subSteps">
+        <EuiSubSteps>
           <ol>
             <li>Do thing 1</li>
             <li>Do thing 2</li>
             <li>Do thing 3</li>
           </ol>
-        </div>
+        </EuiSubSteps>
         <p>Here are some bullet point reminders.</p>
         <ul>
           <li>Reminder 1</li>
@@ -57,21 +58,21 @@ const steps = [
     children: (
       <EuiText>
         <h3><strong>Option 1:</strong> If you have this type of instance</h3>
-        <div className="euiStep__subSteps">
+        <EuiSubSteps>
           <ol>
             <li>Do thing 1</li>
             <li>Do thing 2</li>
             <li>Do thing 3</li>
           </ol>
-        </div>
+        </EuiSubSteps>
         <h3><strong>Option 2:</strong> If you have the other type of instance</h3>
-        <div className="euiStep__subSteps">
+        <EuiSubSteps>
           <ol>
             <li>Do thing 1</li>
             <li>Do thing 2</li>
             <li>Do thing 3</li>
           </ol>
-        </div>
+        </EuiSubSteps>
       </EuiText>
     )
   },

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

@@ -57,7 +57,9 @@ export const StepsExample = {
     }],
     text: (
       <p>
-        Here&apos;s how to handle complex content within steps.
+        If you need to call out a set of substeps that are not lines of code,
+        most likely a <EuiCode>&lt;ol/&gt;</EuiCode>, wrap
+        the block in a <EuiCode>&lt;EuiSubSteps/&gt;</EuiCode>.
       </p>
     ),
     demo: <StepsComplex />,
@@ -96,7 +98,7 @@ export const StepsExample = {
       code: stepsHorizontalHtml,
     }],
     text: (
-      <p>Description needed: how to use the StepsHorizontal component.</p>
+      <p>For use when forms/setup instructions can and should be split into multiple pages.</p>
     ),
     demo: <StepsHorizontal />
   }],

src/components/index.js

@@ -198,6 +198,7 @@ export {
 
 export {
   EuiSteps,
+  EuiSubSteps,
   EuiStepsHorizontal,
 } from './steps';
 

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSubSteps is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiSubSteps testClass1 testClass2"
+  data-test-subj="test subject string"
+/>
+`;

src/components/steps/_index.scss

@@ -16,4 +16,5 @@ $euiStepNumberMargin: $euiSize !default;
 }
 
 @import 'steps';
+@import 'sub_steps';
 @import 'steps_horizontal';

src/components/steps/_steps.scss

@@ -33,20 +33,4 @@
     margin-left: ($euiStepNumberSize/2) - 1px;
   }
 
-  // add shading to callout substeps within the content
-  .euiStep__subSteps {
-    padding: $euiSize;
-    background-color: tint($euiColorPrimary, 93%);
-    margin-bottom: $euiSize;
-
-    > *:last-child {
-      margin-bottom: 0;
-    }
-
-    // change ordered list from numbers to lowercase letters
-    .euiText & ol {
-      list-style-type: lower-alpha;
-    }
-  }
-
 

src/components/steps/_steps_horizontal.scss

@@ -26,7 +26,7 @@
   &:focus {
     .euiStepHorizontal__number {
       //box-shadow: 0 0 0 2px rgba($euiColorPrimary, .2);
-      animation: .3s $euiAnimSlightResistance 1 normal forwards focusRingAnimate;
+      animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate;
     }
 
     .euiStepHorizontal__title {

src/components/steps/_sub_steps.scss

@@ -0,0 +1,15 @@
+.euiSubSteps {
+  padding: $euiSize;
+  background-color: tint($euiColorPrimary, 93%);
+  margin-bottom: $euiSize;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+
+  // change ordered list from numbers to lowercase letters
+  .euiText & ol,
+  & ol {
+    list-style-type: lower-alpha;
+  }
+}

src/components/steps/index.js

@@ -2,6 +2,10 @@ export {
   EuiSteps,
 } from './steps';
 
+export {
+  EuiSubSteps,
+} from './sub_steps';
+
 export {
   EuiStepsHorizontal,
 } from './steps_horizontal';

src/components/steps/sub_steps.js

@@ -0,0 +1,25 @@
+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,
+};

src/components/steps/sub_steps.test.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test';
+
+import { EuiSubSteps } from './sub_steps';
+
+describe('EuiSubSteps', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiSubSteps {...requiredProps} />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+});