diff --git a/src/components/PageWizard/PageWizard.jsx b/src/components/PageWizard/PageWizard.jsx
index 5275281c62..a6d8b9e4c6 100644
--- a/src/components/PageWizard/PageWizard.jsx
+++ b/src/components/PageWizard/PageWizard.jsx
@@ -52,6 +52,8 @@ export const PageWizardPropTypes = {
isProgressIndicatorVertical: PropTypes.bool,
/** Content to render before footer buttons (on left side, in LTR) */
beforeFooterContent: PropTypes.node,
+ /** Content to render after footer buttons (on right side, in LTR) */
+ afterFooterContent: PropTypes.node,
/** Make the ProgressIndicator clickable */
isClickable: PropTypes.bool,
};
@@ -75,6 +77,7 @@ export const defaultProps = {
onBack: null,
setStep: null,
beforeFooterContent: null,
+ afterFooterContent: null,
isClickable: false,
};
@@ -95,6 +98,7 @@ const PageWizard = ({
onClearError,
isProgressIndicatorVertical,
beforeFooterContent,
+ afterFooterContent,
isClickable,
}) => {
const children = ch.length ? ch : [ch];
@@ -119,6 +123,7 @@ const PageWizard = ({
hasStickyFooter,
onClearError,
beforeFooterContent,
+ afterFooterContent,
});
/**
diff --git a/src/components/PageWizard/PageWizard.story.jsx b/src/components/PageWizard/PageWizard.story.jsx
index f1081e1047..2112b60a04 100644
--- a/src/components/PageWizard/PageWizard.story.jsx
+++ b/src/components/PageWizard/PageWizard.story.jsx
@@ -11,6 +11,7 @@ import {
Link,
TextInput,
} from 'carbon-components-react';
+import { InformationFilled20 } from '@carbon/icons-react';
import PageTitleBar from '../PageTitleBar/PageTitleBar';
@@ -468,6 +469,20 @@ storiesOf('Watson IoT/PageWizard', module)
}
isClickable
+ afterFooterContent={
+
+
+ {text('Additional footer content', 'Additional footer content')}
+
+ }
/>
}
/>
diff --git a/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx b/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx
index ef678f3fe8..a57a14b462 100644
--- a/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx
+++ b/src/components/PageWizard/PageWizardStep/PageWizardStep.jsx
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { InlineNotification } from 'carbon-components-react';
+import classnames from 'classnames';
import { settings } from '../../../constants/Settings';
import { childrenPropType } from '../PageWizard';
@@ -41,6 +42,8 @@ const PageWizardStepPropTypes = {
onSubmit: PropTypes.func,
/** Content to render before footer buttons (on left side, in LTR) */
beforeFooterContent: PropTypes.node,
+ /** Content to render after footer buttons (on right side, in LTR) */
+ afterFooterContent: PropTypes.node,
};
const PageWizardStepDefaultProps = {
@@ -63,6 +66,7 @@ const PageWizardStepDefaultProps = {
onNext: null,
onBack: null,
beforeFooterContent: null,
+ afterFooterContent: null,
onSubmit: null,
onClose: null,
};
@@ -84,6 +88,7 @@ const PageWizardStep = ({
sendingData,
onSubmit,
beforeFooterContent,
+ afterFooterContent,
}) => (
{error ? (
@@ -98,11 +103,11 @@ const PageWizardStep = ({
) : null}
{children}
+ className={classnames({
+ [`${iotPrefix}--page-wizard--content--actions--sticky`]: hasStickyFooter,
+ [`${iotPrefix}--page-wizard--content--actions`]: !hasStickyFooter,
+ [`${iotPrefix}--page-wizard--content--after-footer`]: !!afterFooterContent,
+ })}>
{beforeFooterContent}
{!hasPrev ? (
)}
+ {afterFooterContent && (
+
+ {afterFooterContent}
+
+ )}
);
diff --git a/src/components/PageWizard/StatefulPageWizard.jsx b/src/components/PageWizard/StatefulPageWizard.jsx
index af06365a83..8f30c61338 100644
--- a/src/components/PageWizard/StatefulPageWizard.jsx
+++ b/src/components/PageWizard/StatefulPageWizard.jsx
@@ -43,6 +43,8 @@ const StatefulPageWizardPropTypes = {
isProgressIndicatorVertical: PropTypes.bool,
/** Content to render before footer buttons (on left side, in LTR) */
beforeFooterContent: PropTypes.node,
+ /** Content to render after footer buttons (on right side, in LTR) */
+ afterFooterContent: PropTypes.node,
};
const defaultProps = {
@@ -63,6 +65,7 @@ const defaultProps = {
onNext: null,
onBack: null,
beforeFooterContent: null,
+ afterFooterContent: null,
setStep: null,
};
diff --git a/src/components/PageWizard/__snapshots__/PageWizard.story.storyshot b/src/components/PageWizard/__snapshots__/PageWizard.story.storyshot
index 9337e1a460..bf68676215 100644
--- a/src/components/PageWizard/__snapshots__/PageWizard.story.storyshot
+++ b/src/components/PageWizard/__snapshots__/PageWizard.story.storyshot
@@ -1365,7 +1365,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PageW
+
+
+
+ Additional footer content
+
+
diff --git a/src/components/PageWizard/_page-wizard.scss b/src/components/PageWizard/_page-wizard.scss
index 65acb7a5c5..bf2ee7436a 100644
--- a/src/components/PageWizard/_page-wizard.scss
+++ b/src/components/PageWizard/_page-wizard.scss
@@ -66,5 +66,16 @@
margin-right: $spacing-05;
}
}
+
+ &--after-footer {
+ display: flex;
+
+ &--content {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: flex-end;
+ }
+ }
}
}
diff --git a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
index 170deb3ff4..c1e330492c 100644
--- a/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
+++ b/src/utils/__tests__/__snapshots__/publicAPI.test.js.snap
@@ -15042,6 +15042,7 @@ Map {
},
"PageWizard" => Object {
"defaultProps": Object {
+ "afterFooterContent": null,
"beforeFooterContent": null,
"children": Array [],
"currentStepId": null,
@@ -15063,6 +15064,9 @@ Map {
"setStep": null,
},
"propTypes": Object {
+ "afterFooterContent": Object {
+ "type": "node",
+ },
"beforeFooterContent": Object {
"type": "node",
},
@@ -15152,6 +15156,7 @@ Map {
},
"PageWizardStep" => Object {
"defaultProps": Object {
+ "afterFooterContent": null,
"beforeFooterContent": null,
"children": Array [],
"error": null,
@@ -15175,6 +15180,9 @@ Map {
"sendingData": false,
},
"propTypes": Object {
+ "afterFooterContent": Object {
+ "type": "node",
+ },
"beforeFooterContent": Object {
"type": "node",
},
@@ -15348,6 +15356,7 @@ Map {
},
"StatefulPageWizard" => Object {
"defaultProps": Object {
+ "afterFooterContent": null,
"beforeFooterContent": null,
"children": Array [],
"currentStepId": null,
@@ -15368,6 +15377,9 @@ Map {
"setStep": null,
},
"propTypes": Object {
+ "afterFooterContent": Object {
+ "type": "node",
+ },
"beforeFooterContent": Object {
"type": "node",
},