+ Use the EuiTour to provide sequential help without
+ the user performing any actions (e.g. filling out a form or copying a
+ text). In this scenario, consider using two buttons,{' '}
+ Close tour and Next.
+
+ ),
+ demo: ,
+ },
{
title: 'Fullscreen demo',
source: [
diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
index acbf0c7ca91..c58a9e158d1 100644
--- a/src/components/tour/__snapshots__/tour_step.test.tsx.snap
+++ b/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`] = `
+
+
+
+ Test
+
+
+
+
+
+
+
+
+
+
+
+
+ A demo
+
+
+
+ You are here
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
+
exports[`EuiTourStep can be closed 1`] = `
{
expect(component.render()).toMatchSnapshot();
});
+ test('accepts an array of buttons in the footerAction prop', () => {
+ const component = mount(
+ {}}>Button 1,
+ ,
+ ]}
+ >
+ Test
+
+ );
+
+ expect(component.render()).toMatchSnapshot();
+ });
+
test('can turn off the beacon', () => {
const component = mount(
diff --git a/src/components/tour/tour_step.tsx b/src/components/tour/tour_step.tsx
index 97cd3c36170..8fe6e1500ef 100644
--- a/src/components/tour/tour_step.tsx
+++ b/src/components/tour/tour_step.tsx
@@ -129,9 +129,10 @@ export type EuiTourStepProps = CommonProps &
decoration?: 'none' | 'beacon';
/**
- * Element to replace the 'Skip tour' link in the footer
+ * Accepts any `ReactNode` to replace the 'Skip tour' link in the footer.
+ * Ideally, pass one button or an array of up to 2 buttons.
*/
- footerAction?: ReactElement;
+ footerAction?: ReactNode | ReactNode[];
};
export const EuiTourStep: FunctionComponent = ({
@@ -204,10 +205,29 @@ export const EuiTourStep: FunctionComponent = ({
size: 'xs',
};
+ const optionalFooterAction: JSX.Element = Array.isArray(footerAction) ? (
+
+ {footerAction.map((action, index) => (
+
+ {action}
+
+ ))}
+
+ ) : (
+ {footerAction}
+ );
+
const footer = (
1 ? 'spaceBetween' : 'flexEnd'}
+ alignItems="center"
>
{stepsTotal > 1 && (
@@ -228,7 +248,7 @@ export const EuiTourStep: FunctionComponent = ({
)}
{footerAction ? (
- {footerAction}
+ optionalFooterAction
) : (