From 3f53897575475d5dcd9c8283f59a0e83917d9318 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Thu, 8 Feb 2018 16:03:45 -0500
Subject: [PATCH] Created EuiSubSteps component to wrap sub steps in a class

---
 src-docs/src/views/steps/steps_complex.js     | 13 +++++-----
 src-docs/src/views/steps/steps_example.js     |  6 +++--
 src/components/index.js                       |  1 +
 .../__snapshots__/sub_steps.test.js.snap      |  9 +++++++
 src/components/steps/_index.scss              |  1 +
 src/components/steps/_steps.scss              | 16 ------------
 src/components/steps/_steps_horizontal.scss   |  2 +-
 src/components/steps/_sub_steps.scss          | 15 +++++++++++
 src/components/steps/index.js                 |  4 +++
 src/components/steps/sub_steps.js             | 25 +++++++++++++++++++
 src/components/steps/sub_steps.test.js        | 16 ++++++++++++
 11 files changed, 83 insertions(+), 25 deletions(-)
 create mode 100644 src/components/steps/__snapshots__/sub_steps.test.js.snap
 create mode 100644 src/components/steps/_sub_steps.scss
 create mode 100644 src/components/steps/sub_steps.js
 create mode 100644 src/components/steps/sub_steps.test.js

diff --git a/src-docs/src/views/steps/steps_complex.js b/src-docs/src/views/steps/steps_complex.js
index a6cbcff04ae9..1857745457fa 100644
--- a/src-docs/src/views/steps/steps_complex.js
+++ b/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>
     )
   },
diff --git a/src-docs/src/views/steps/steps_example.js b/src-docs/src/views/steps/steps_example.js
index 0af093d146ae..03c7f3605e75 100644
--- a/src-docs/src/views/steps/steps_example.js
+++ b/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 />
   }],
diff --git a/src/components/index.js b/src/components/index.js
index f889610f0e15..8416e1d83996 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -198,6 +198,7 @@ export {
 
 export {
   EuiSteps,
+  EuiSubSteps,
   EuiStepsHorizontal,
 } from './steps';
 
diff --git a/src/components/steps/__snapshots__/sub_steps.test.js.snap b/src/components/steps/__snapshots__/sub_steps.test.js.snap
new file mode 100644
index 000000000000..350d3eac7869
--- /dev/null
+++ b/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"
+/>
+`;
diff --git a/src/components/steps/_index.scss b/src/components/steps/_index.scss
index 111aaa87d4d2..a30bd442990f 100644
--- a/src/components/steps/_index.scss
+++ b/src/components/steps/_index.scss
@@ -16,4 +16,5 @@ $euiStepNumberMargin: $euiSize !default;
 }
 
 @import 'steps';
+@import 'sub_steps';
 @import 'steps_horizontal';
diff --git a/src/components/steps/_steps.scss b/src/components/steps/_steps.scss
index 080937e59370..51507fc812da 100644
--- a/src/components/steps/_steps.scss
+++ b/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;
-    }
-  }
-
 
diff --git a/src/components/steps/_steps_horizontal.scss b/src/components/steps/_steps_horizontal.scss
index 90bc54fa31aa..cad5e10d74d7 100644
--- a/src/components/steps/_steps_horizontal.scss
+++ b/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 {
diff --git a/src/components/steps/_sub_steps.scss b/src/components/steps/_sub_steps.scss
new file mode 100644
index 000000000000..7feec9bb699c
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/components/steps/index.js b/src/components/steps/index.js
index 4dba467fa49a..2ec2fba1f9af 100644
--- a/src/components/steps/index.js
+++ b/src/components/steps/index.js
@@ -2,6 +2,10 @@ export {
   EuiSteps,
 } from './steps';
 
+export {
+  EuiSubSteps,
+} from './sub_steps';
+
 export {
   EuiStepsHorizontal,
 } from './steps_horizontal';
diff --git a/src/components/steps/sub_steps.js b/src/components/steps/sub_steps.js
new file mode 100644
index 000000000000..e44c5fb97c65
--- /dev/null
+++ b/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,
+};
diff --git a/src/components/steps/sub_steps.test.js b/src/components/steps/sub_steps.test.js
new file mode 100644
index 000000000000..2ff3dedbb5e4
--- /dev/null
+++ b/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();
+  });
+});