[EuiTour] Add ability to pass an array of buttons to footerAction

src-docs/src/views/tour/not_action_driven.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiSpacer,
+  EuiTourStep,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPanel,
+  EuiButtonIcon,
+} from '../../../../src/components';
+
+const demoTourSteps = [
+  {
+    step: 1,
+    title: 'Preview mode',
+    content: <p>See how your project looks like.</p>,
+    anchorRef: 'notActionDrivenStep1',
+    iconType: 'eye',
+  },
+  {
+    step: 2,
+    title: 'Build Mode',
+    content: <p>Build your project.</p>,
+    anchorRef: 'notActionDrivenStep2',
+    iconType: 'editorCodeBlock',
+  },
+  {
+    step: 3,
+    title: 'Comment mode',
+    content: <p>Collaborate with your colleagues.</p>,
+    anchorRef: 'notActionDrivenStep3',
+    iconType: 'editorComment',
+  },
+  {
+    step: 2,
+    title: 'Share',
+    content: <p>Share your project.</p>,
+    anchorRef: 'notActionDrivenStep4',
+    iconType: 'share',
+  },
+];
+
+const tourConfig = {
+  currentTourStep: 1,
+  isTourActive: true,
+  tourPopoverWidth: 360,
+  tourSubtitle: 'Demo tour',
+};
+
+const STORAGE_KEY = 'notActionDrivenDemoTour';
+
+export default () => {
+  const [state, setState] = useState(() => {
+    let initialState: any = localStorage.getItem(STORAGE_KEY);
+    if (initialState) {
+      initialState = JSON.parse(initialState);
+    } else {
+      initialState = tourConfig;
+    }
+    return initialState;
+  });
+  useEffect(() => {
+    // Store the tour data
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  }, [state]);
+
+  const incrementStep = () => {
+    setState({
+      ...state,
+      currentTourStep: state.currentTourStep + 1,
+    });
+  };
+
+  const handleClick = () => {
+    incrementStep();
+  };
+
+  const resetTour = () => {
+    setState({
+      ...state,
+      currentTourStep: 1,
+      isTourActive: true,
+    });
+  };
+
+  const finishTour = () => {
+    setState({
+      ...state,
+      isTourActive: false,
+    });
+  };
+
+  return (
+    <div>
+      <EuiPanel style={{ width: 'max-content' }}>
+        <EuiFlexGroup>
+          {demoTourSteps.map((step, index) => (
+            <EuiFlexItem grow={false}>
+              <EuiTourStep
+                content={step.content}
+                isStepOpen={
+                  state.isTourActive && state.currentTourStep === index + 1
+                }
+                minWidth={state.tourPopoverWidth}
+                onFinish={finishTour}
+                step={index + 1}
+                stepsTotal={demoTourSteps.length}
+                subtitle={state.tourSubtitle}
+                title={step.title}
+                anchorPosition="rightUp"
+                footerAction={
+                  // if it's the last step, we don't want to show the next button
+                  index === demoTourSteps.length - 1 ? (
+                    <EuiButton color="success" size="s" onClick={finishTour}>
+                      Finish tour
+                    </EuiButton>
+                  ) : (
+                    [
+                      <EuiButtonEmpty
+                        size="s"
+                        color="text"
+                        onClick={finishTour}
+                      >
+                        Close tour
+                      </EuiButtonEmpty>,
+                      <EuiButton color="success" size="s" onClick={handleClick}>
+                        Next
+                      </EuiButton>,
+                    ]
+                  )
+                }
+              >
+                <EuiButtonIcon iconType={step.iconType} color="text" />
+              </EuiTourStep>
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      </EuiPanel>
+      <EuiSpacer size="m" />
+      <EuiButtonEmpty iconType="refresh" onClick={resetTour}>
+        Reset tour
+      </EuiButtonEmpty>
+    </div>
+  );
+};

src-docs/src/views/tour/tour_example.js

@@ -15,6 +15,7 @@ import Tour from './tour';
 import Managed from './managed';
 import ManagedHook from './managed_hook';
 import FullScreen from './fullscreen';
+import NotActionDriven from './not_action_driven';
 
 import Guidelines from './guidelines';
 
@@ -44,6 +45,7 @@ const stepDomSource = require('!!raw-loader!./step_dom');
 const tourSource = require('!!raw-loader!./tour');
 const managedSource = require('!!raw-loader!./managed');
 const managedHookSource = require('!!raw-loader!./managed_hook');
+const notActionDriven = require('!!raw-loader!./not_action_driven');
 
 const fullSource = require('!!raw-loader!./fullscreen');
 
@@ -170,6 +172,24 @@ export const TourExample = {
       ),
       demo: <Managed />,
     },
+    {
+      title: 'Not action driven tour',
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: notActionDriven,
+        },
+      ],
+      text: (
+        <p>
+          Use the <strong>EuiTour</strong> to provide sequential help without
+          the user performing any action (e.g. filling out a form or copying a
+          text). For this scenario, consider using two buttons,{' '}
+          <strong>Close tour</strong> and <strong>Next</strong>.
+        </p>
+      ),
+      demo: <NotActionDriven />,
+    },
     {
       title: 'Fullscreen demo',
       source: [

src/components/tour/__snapshots__/tour_step.test.tsx.snap

@@ -1,5 +1,103 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EuiTourStep accepts an array of buttons in the footerAction prop 1`] = `
+<div
+  class="euiPopover euiPopover-isOpen emotion-euiPopover"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiPopover__anchor css-16vtueo-render"
+  >
+    <span>
+      Test
+    </span>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+  <div
+    data-focus-lock-disabled="disabled"
+  >
+    <div
+      aria-label="aria-label"
+      aria-labelledby="generated-id"
+      aria-live="assertive"
+      aria-modal="true"
+      class="euiPanel euiPanel--plain euiPanel--paddingMedium euiPopover__panel euiTour testClass1 testClass2 emotion-euiPanel-grow-m-m-plain-euiPopover__panel-isOpen-left-euiTour"
+      data-popover-open="true"
+      data-popover-panel="true"
+      role="dialog"
+      style="top: -22px; left: -26px; will-change: transform, opacity; z-index: 2000;"
+    >
+      <div
+        class="euiPopover__arrow emotion-euiPopoverArrow-left"
+        data-popover-arrow="left"
+        style="left: 0px; top: 10px;"
+      >
+        <div
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
+          style="height: 12px; width: 12px;"
+        />
+      </div>
+      <div>
+        <div
+          style="min-width: 300px; max-width: 600px;"
+        >
+          <div
+            class="euiPopoverTitle euiTourHeader emotion-euiPopoverTitle-m-m-euiTourHeader"
+            id="generated-id"
+          >
+            <h2
+              class="euiTitle emotion-euiTitle-xxs-euiTourHeader__title"
+            >
+              A demo
+            </h2>
+          </div>
+          <div
+            class="euiTour__content"
+          >
+            You are here
+          </div>
+          <div
+            class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-euiTourFooter"
+          >
+            <div
+              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
+            >
+              <div
+                class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexEnd-center-row"
+              >
+                <div
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
+                >
+                  <button>
+                    Button 1
+                  </button>
+                </div>
+                <div
+                  class="euiFlexItem emotion-euiFlexItem-growZero"
+                >
+                  <button>
+                    Button 2
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    data-focus-guard="true"
+    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+    tabindex="-1"
+  />
+</div>
+`;
+
 exports[`EuiTourStep can be closed 1`] = `
 <div
   class="euiPopover emotion-euiPopover"
@@ -79,7 +177,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
             class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-euiTourFooter"
           >
             <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-stretch-row"
+              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
             >
               <div
                 class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -182,7 +280,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
             class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-euiTourFooter"
           >
             <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-stretch-row"
+              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
             >
               <div
                 class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -280,7 +378,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
             class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-euiTourFooter"
           >
             <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-stretch-row"
+              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
             >
               <div
                 class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -362,7 +460,7 @@ exports[`EuiTourStep can turn off the beacon 1`] = `
             class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-euiTourFooter"
           >
             <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-stretch-row"
+              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
             >
               <div
                 class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -460,7 +558,7 @@ exports[`EuiTourStep is rendered 1`] = `
             class="euiPopoverFooter euiTourFooter emotion-euiPopoverFooter-m-euiTourFooter"
           >
             <div
-              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-stretch-row"
+              class="euiFlexGroup emotion-euiFlexGroup-l-flexEnd-center-row"
             >
               <div
                 class="euiFlexItem emotion-euiFlexItem-growZero"

src/components/tour/tour_step.test.tsx

@@ -99,6 +99,23 @@ describe('EuiTourStep', () => {
     expect(component.render()).toMatchSnapshot();
   });
 
+  test('accepts an array of buttons in the footerAction prop', () => {
+    const component = mount(
+      <EuiTourStep
+        {...props}
+        isStepOpen
+        footerAction={[
+          <button onClick={() => {}}>Button 1</button>,
+          <button onClick={() => {}}>Button 2</button>,
+        ]}
+      >
+        <span>Test</span>
+      </EuiTourStep>
+    );
+
+    expect(component.render()).toMatchSnapshot();
+  });
+
   test('can turn off the beacon', () => {
     const component = mount(
       <EuiTourStep {...props} isStepOpen decoration="none">