Merge pull request #1718 from carbon-design-system/page-wizard-step-a…

…fterFooter feat(pagewizard): afterFooterContent new prop
carbon-design-system · Oct 21, 2020 · aba1ef5 · aba1ef5
2 parents ef8fecf + 1b128f0
commit aba1ef5
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 6 deletions.
diff --git 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
@@ -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)
               <Button kind="tertiary">Save and close</Button>
             }
             isClickable
+            afterFooterContent={
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  fontWeight: 600,
+                  fontSize: '1rem',
+                  lineHeight: '1.375rem',
+                  letterSpacing: 0,
+                }}>
+                <InformationFilled20 style={{ marginRight: '0.5rem' }} />
+                {text('Additional footer content', 'Additional footer content')}
+              </div>
+            }
           />
         }
       />

diff --git 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,
 }) => (
   <div className={`${iotPrefix}--page-wizard--step`} id={id}>
     {error ? (
@@ -98,11 +103,11 @@ const PageWizardStep = ({
     ) : null}
     {children}
     <div
-      className={
-        hasStickyFooter
-          ? `${iotPrefix}--page-wizard--content--actions--sticky`
-          : `${iotPrefix}--page-wizard--content--actions`
-      }>
+      className={classnames({
+        [`${iotPrefix}--page-wizard--content--actions--sticky`]: hasStickyFooter,
+        [`${iotPrefix}--page-wizard--content--actions`]: !hasStickyFooter,
+        [`${iotPrefix}--page-wizard--content--after-footer`]: !!afterFooterContent,
+      })}>
       {beforeFooterContent}
       {!hasPrev ? (
         <Button onClick={onClose} kind="secondary">
@@ -132,6 +137,12 @@ const PageWizardStep = ({
           {i18n.submit}
         </Button>
       )}
+      {afterFooterContent && (
+        <div
+          className={`${iotPrefix}--page-wizard--content--after-footer--content`}>
+          {afterFooterContent}
+        </div>
+      )}
     </div>
   </div>
 );

diff --git 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
@@ -1365,7 +1365,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PageW
                   </form>
                 </div>
                 <div
-                  className="iot--page-wizard--content--actions--sticky"
+                  className="iot--page-wizard--content--actions--sticky iot--page-wizard--content--after-footer"
                 >
                   <button
                     className="bx--btn bx--btn--tertiary"
@@ -1393,6 +1393,48 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/PageW
                   >
                     Next
                   </button>
+                  <div
+                    className="iot--page-wizard--content--after-footer--content"
+                  >
+                    <div
+                      style={
+                        Object {
+                          "alignItems": "center",
+                          "display": "flex",
+                          "fontSize": "1rem",
+                          "fontWeight": 600,
+                          "letterSpacing": 0,
+                          "lineHeight": "1.375rem",
+                        }
+                      }
+                    >
+                      <svg
+                        aria-hidden={true}
+                        fill="currentColor"
+                        focusable="false"
+                        height={20}
+                        preserveAspectRatio="xMidYMid meet"
+                        style={
+                          Object {
+                            "marginRight": "0.5rem",
+                          }
+                        }
+                        viewBox="0 0 32 32"
+                        width={20}
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Zm0,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,7Zm4,17.125h-8v-2.25h2.875v-6.75h-1.875v-2.25h4.125v9h2.875Z"
+                        />
+                        <path
+                          d="M16,7a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,16,7Zm4,17.125h-8v-2.25h2.875v-6.75h-1.875v-2.25h4.125v9h2.875Z"
+                          data-icon-path="inner-path"
+                          fill="none"
+                        />
+                      </svg>
+                      Additional footer content
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>

diff --git 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
@@ -15214,6 +15214,7 @@ Map {
   },
   "PageWizard" => Object {
     "defaultProps": Object {
+      "afterFooterContent": null,
       "beforeFooterContent": null,
       "children": Array [],
       "currentStepId": null,
@@ -15235,6 +15236,9 @@ Map {
       "setStep": null,
     },
     "propTypes": Object {
+      "afterFooterContent": Object {
+        "type": "node",
+      },
       "beforeFooterContent": Object {
         "type": "node",
       },
@@ -15324,6 +15328,7 @@ Map {
   },
   "PageWizardStep" => Object {
     "defaultProps": Object {
+      "afterFooterContent": null,
       "beforeFooterContent": null,
       "children": Array [],
       "error": null,
@@ -15347,6 +15352,9 @@ Map {
       "sendingData": false,
     },
     "propTypes": Object {
+      "afterFooterContent": Object {
+        "type": "node",
+      },
       "beforeFooterContent": Object {
         "type": "node",
       },
@@ -15520,6 +15528,7 @@ Map {
   },
   "StatefulPageWizard" => Object {
     "defaultProps": Object {
+      "afterFooterContent": null,
       "beforeFooterContent": null,
       "children": Array [],
       "currentStepId": null,
@@ -15540,6 +15549,9 @@ Map {
       "setStep": null,
     },
     "propTypes": Object {
+      "afterFooterContent": Object {
+        "type": "node",
+      },
       "beforeFooterContent": Object {
         "type": "node",
       },