Horizontal & Complex Steps (#375)

New EuiStepsHorizontal (for tab-like progression) and EuiSubSteps for demarcating areas of non-code steps.

CHANGELOG.md

@@ -1,6 +1,7 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-- No public interface changes since `0.0.20`.
+- Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375))
+- Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375))
 
 # [`0.0.20`](https://github.com/elastic/eui/tree/v0.0.20)
 

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

@@ -16,10 +16,6 @@ const firstSetOfSteps = [
     title: 'Step 2',
     children: <p>Then this</p>
   },
-  {
-    title: 'Step 3',
-    children: <p>And finally, do this</p>
-  },
 ];
 
 const nextSetOfSteps = [
@@ -31,10 +27,6 @@ const nextSetOfSteps = [
     title: 'Better step',
     children: <p>Then this</p>
   },
-  {
-    title: 'Best step',
-    children: <p>And finally, do this</p>
-  },
 ];
 
 export default () => (

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

@@ -0,0 +1,88 @@
+import React from 'react';
+
+import {
+  EuiCode,
+  EuiSteps,
+  EuiText,
+  EuiCodeBlock,
+  EuiSubSteps,
+} from '../../../../src/components';
+
+const steps = [
+  {
+    title: 'Step 1 has intro plus code snippet',
+    children: (
+      <EuiText>
+        <p>Run this code snippet to install things.</p>
+        <EuiCodeBlock language="bash">
+          npm install
+        </EuiCodeBlock>
+      </EuiText>
+    )
+  },
+  {
+    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>
+    )
+  },
+  {
+    title: 'Step 3 has an intro and one line instruction',
+    children: (
+      <EuiText>
+        <p>Now that you&apos;ve completed step 2, go find the <EuiCode>thing</EuiCode>.</p>
+        <p className="euiStep__subSteps">
+          Go to <strong>Overview &gt;&gt; Endpoints</strong> note
+          <strong>Elasticsearch</strong> as <EuiCode>&lt;thing&gt;</EuiCode>.
+        </p>
+      </EuiText>
+    )
+  },
+  {
+    title: 'The last step has two options',
+    children: (
+      <EuiText>
+        <h3><strong>Option 1:</strong> If you have this type of instance</h3>
+        <EuiSubSteps>
+          <ol>
+            <li>Do thing 1</li>
+            <li>Do thing 2</li>
+            <li>Do thing 3</li>
+          </ol>
+        </EuiSubSteps>
+        <h3><strong>Option 2:</strong> If you have the other type of instance</h3>
+        <EuiSubSteps>
+          <ol>
+            <li>Do thing 1</li>
+            <li>Do thing 2</li>
+            <li>Do thing 3</li>
+          </ol>
+        </EuiSubSteps>
+      </EuiText>
+    )
+  },
+];
+
+export default () => (
+  <div>
+    <EuiSteps
+      headingElement="h2"
+      steps={steps}
+    />
+  </div>
+);

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

@@ -15,10 +15,18 @@ import Steps from './steps';
 const stepsSource = require('!!raw-loader!./steps');
 const stepsHtml = renderToHtml(Steps);
 
+import StepsComplex from './steps_complex';
+const stepsComplexSource = require('!!raw-loader!./steps_complex');
+const stepsComplexHtml = renderToHtml(StepsComplex);
+
 import HeadingElementSteps from './heading_element_steps';
 const headingElementStepsSource = require('!!raw-loader!./heading_element_steps');
 const headingElementStepsHtml = renderToHtml(HeadingElementSteps);
 
+import StepsHorizontal from './steps_horizontal';
+const stepsHorizontalSource = require('!!raw-loader!./steps_horizontal');
+const stepsHorizontalHtml = renderToHtml(StepsHorizontal);
+
 export const StepsExample = {
   title: 'Steps',
   sections: [{
@@ -38,6 +46,24 @@ export const StepsExample = {
     props: { EuiSteps },
     demo: <Steps />,
   },
+  {
+    title: 'Complex steps',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: stepsComplexSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: stepsComplexHtml,
+    }],
+    text: (
+      <p>
+        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 />,
+  },
   {
     title: 'Heading elements',
     source: [{
@@ -61,5 +87,19 @@ export const StepsExample = {
       </div>
     ),
     demo: <HeadingElementSteps />,
+  },
+  {
+    title: 'Horizontal',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: stepsHorizontalSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: stepsHorizontalHtml,
+    }],
+    text: (
+      <p>For use when forms/setup instructions can and should be split into multiple pages.</p>
+    ),
+    demo: <StepsHorizontal />
   }],
 };

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

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import {
+  EuiStepsHorizontal,
+} from '../../../../src/components';
+
+const horizontalSteps = [
+  {
+    title: 'Completed Step 1',
+    isComplete: true,
+    onClick: () => window.alert('Step 1 clicked')
+  },
+  {
+    title: 'Selected Step 2',
+    isSelected: true,
+  },
+  {
+    title: 'Incomplete Step 3',
+  },
+  {
+    title: 'Disabled Step 4',
+    disabled: true,
+  },
+];
+
+export default () => (
+  <div>
+    <EuiStepsHorizontal
+      steps={horizontalSteps}
+    />
+  </div>
+);

src/components/index.js

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

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

@@ -0,0 +1,121 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiStepsHorizontal is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiStepsHorizontal testClass1 testClass2"
+  data-test-subj="test subject string"
+  role="tablist"
+>
+  <button
+    aria-selected="false"
+    class="euiStepHorizontal euiStepHorizontal-isComplete"
+    role="tab"
+    title="Step 1: Completed Step 1 is complete"
+    type="button"
+  >
+    <span
+      class="euiScreenReaderOnly"
+    >
+      Step
+    </span>
+    <div
+      class="euiStepHorizontal__number"
+    >
+      <svg
+        class="euiIcon euiIcon--medium euiIcon--ghost"
+        height="16"
+        viewBox="0 0 16 16"
+        width="16"
+        xlink="http://www.w3.org/1999/xlink"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <path
+            d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
+            id="check-a"
+          />
+        </defs>
+        <use
+          href="#check-a"
+        />
+      </svg>
+    </div>
+    <span
+      class="euiStepHorizontal__title"
+    >
+      Completed Step 1
+    </span>
+  </button>
+  <button
+    aria-selected="true"
+    class="euiStepHorizontal euiStepHorizontal-isSelected"
+    role="tab"
+    title="Step 2: Selected Step 2"
+    type="button"
+  >
+    <span
+      class="euiScreenReaderOnly"
+    >
+      Step
+    </span>
+    <div
+      class="euiStepHorizontal__number"
+    >
+      2
+    </div>
+    <span
+      class="euiStepHorizontal__title"
+    >
+      Selected Step 2
+    </span>
+  </button>
+  <button
+    aria-selected="false"
+    class="euiStepHorizontal euiStepHorizontal-isIncomplete"
+    role="tab"
+    title="Step 3: Incomplete Step 3"
+    type="button"
+  >
+    <span
+      class="euiScreenReaderOnly"
+    >
+      Step
+    </span>
+    <div
+      class="euiStepHorizontal__number"
+    >
+      3
+    </div>
+    <span
+      class="euiStepHorizontal__title"
+    >
+      Incomplete Step 3
+    </span>
+  </button>
+  <button
+    aria-selected="false"
+    class="euiStepHorizontal euiStepHorizontal-isIncomplete euiStepHorizontal-isDisabled"
+    disabled=""
+    role="tab"
+    title="Step 4: Disabled Step 4 is disabled"
+    type="button"
+  >
+    <span
+      class="euiScreenReaderOnly"
+    >
+      Step
+    </span>
+    <div
+      class="euiStepHorizontal__number"
+    >
+      4
+    </div>
+    <span
+      class="euiStepHorizontal__title"
+    >
+      Disabled Step 4
+    </span>
+  </button>
+</div>
+`;

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

@@ -1 +1,20 @@
+$euiStepNumberSize: $euiSizeXL !default;
+$euiStepNumberMargin: $euiSize !default;
+
+@mixin createStepsNumber(){
+  display: inline-block;
+  @include size($euiStepNumberSize);
+  line-height: $euiStepNumberSize;
+  border-radius: $euiStepNumberSize;
+  text-align: center;
+
+  color: $euiColorEmptyShade;
+  background-color: $euiColorPrimary;
+
+  font-size: $euiFontSize;
+  font-weight: $euiFontWeightMedium;
+}
+
 @import 'steps';
+@import 'sub_steps';
+@import 'steps_horizontal';