@decisiv/ui-components 2.0.1-alpha.226 → 2.0.1-alpha.227

package/lib/components/Wizard/index.d.ts

@@ -14,7 +14,8 @@ export interface WizardProps extends Pick<ModalProps, 'id' | 'visible' | 'zIndex
     steps: Step[];
     activeStep: number;
     submitButtonProps?: ButtonProps;
-    onCancel: NonNullable<ModalProps['onClose']>;
+    cancelButtonProps?: ButtonProps;
+    onCancel?: ModalProps['onClose'];
     renderActions?: (context: {
         step: Step;
         stepIndex: number;

package/lib/components/Wizard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;IAC7C,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,IAAI,EAAE,IAAI,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,OAAO,CAAC;QACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;KACjC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAsID,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,IAAI,EAAE,IAAI,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,OAAO,CAAC;QACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;KACjC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AA8ID,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}

package/lib/components/Wizard/index.js

@@ -61,6 +61,7 @@ var Wizard = function Wizard(_ref) {
       wizardTitle = _ref.title,
       currentStepNumber = _ref.activeStep,
       submitButtonProps = _ref.submitButtonProps,
+      cancelButtonProps = _ref.cancelButtonProps,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'normal' : _ref$size,
       steps = _ref.steps,
@@ -103,13 +104,14 @@ var Wizard = function Wizard(_ref) {
       text: translate('Back', 'wizard.actions.back'),
       kind: "secondary",
       icon: _ArrowLeft.default
-    }, previousButtonProps))), _react.default.createElement(_.Button, {
+    }, previousButtonProps))), (onCancel || cancelButtonProps) && _react.default.createElement(_.Button, _extends({
       text: translate('Cancel', 'wizard.actions.cancel'),
       kind: "secondary",
       variant: "ghost",
-      onClick: onCancel
-    }));
-  }, [breakpoint, showSubmit, translate, submitButtonProps, showNext, nextButtonProps, showPrevious, previousButtonProps, onCancel]);
+      onClick: onCancel,
+      disabled: cancelButtonProps ? !cancelButtonProps.onClick : !onCancel
+    }, cancelButtonProps)));
+  }, [breakpoint, showSubmit, translate, submitButtonProps, showNext, nextButtonProps, showPrevious, previousButtonProps, onCancel, cancelButtonProps]);
   return _react.default.createElement(_ResponsiveModalWrapper.default, {
     id: id,
     size: sizeMapping[size],

package/lib/components/Wizard/index.test.js

@@ -59,6 +59,9 @@ describe('Wizard', function () {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
+          onCancel: function onCancel() {
+            return null;
+          },
           submitButtonProps: {
             onClick: function onClick() {
               return null;
@@ -395,6 +398,223 @@ describe('Wizard', function () {
         expect(onCancelMock).toHaveBeenCalled();
       });
     });
+    describe('cancelButtonProps', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+      it('passes additional props to the cancel button', function () {
+        var _render10 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            disabled: true
+          }
+        })),
+            getByRole = _render10.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeDisabled();
+      });
+      it('allows overriding the cancel button text', function () {
+        var _render11 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            text: 'Dismiss'
+          }
+        })),
+            getByRole = _render11.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/dismiss/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+      });
+      it('allows overriding onClick, replacing onCancel', function () {
+        var onCancelMock = jest.fn();
+        var cancelButtonOnClickMock = jest.fn();
+
+        var _render12 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          onCancel: onCancelMock,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            onClick: cancelButtonOnClickMock
+          }
+        })),
+            getByRole = _render12.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+
+        _react2.fireEvent.click((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        }));
+
+        expect(cancelButtonOnClickMock).toHaveBeenCalled();
+        expect(onCancelMock).not.toHaveBeenCalled();
+      });
+    });
+    describe('when onCancel is not provided', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+      it('does not render the Cancel button when neither onCancel nor cancelButtonProps are provided', function () {
+        var _render13 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render13.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).queryByText(/cancel/i, {
+          selector: 'button'
+        })).not.toBeInTheDocument();
+      });
+      it('does not call onCancel when Esc is pressed', function () {
+        var onCancelMock = jest.fn();
+        render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        }));
+
+        _react2.fireEvent.keyDown(document, {
+          key: 'Escape'
+        });
+
+        expect(onCancelMock).not.toHaveBeenCalled();
+      });
+      it('renders the Cancel button (disabled) when cancelButtonProps is provided without onClick', function () {
+        var _render14 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            text: 'Cancel'
+          }
+        })),
+            getByRole = _render14.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeDisabled();
+      });
+    });
+    describe('when only onCancel is provided', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+      it('renders the Cancel button in an enabled state', function () {
+        var onCancelMock = jest.fn();
+
+        var _render15 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          onCancel: onCancelMock,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render15.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeEnabled();
+      });
+    });
     describe('Continue action', function () {
       it('doesnt render the button if nextButtonProps is not provided to the step', function () {
         var steps = [{
@@ -414,7 +634,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render10 = render(_react.default.createElement(_.default, {
+        var _render16 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -425,7 +645,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render10.getByRole;
+            getByRole = _render16.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -456,7 +676,7 @@ describe('Wizard', function () {
           }
         }];
 
-        var _render11 = render(_react.default.createElement(_.default, {
+        var _render17 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: steps.length,
@@ -467,7 +687,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render11.getByRole;
+            getByRole = _render17.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -500,7 +720,7 @@ describe('Wizard', function () {
           })
         }];
         it('calls the onClick from the continueProps of the active step', function () {
-          var _render12 = render(_react.default.createElement(_.default, {
+          var _render18 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 1,
@@ -511,7 +731,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render12.getByRole;
+              getByRole = _render18.getByRole;
 
           var modal = getByRole('dialog');
           expect(modal).toBeInTheDocument();
@@ -550,7 +770,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render13 = render(_react.default.createElement(_.default, {
+        var _render19 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 2,
@@ -561,7 +781,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render13.getByRole;
+            getByRole = _render19.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -592,7 +812,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render14 = render(_react.default.createElement(_.default, {
+        var _render20 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -603,7 +823,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render14.getByRole;
+            getByRole = _render20.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -637,7 +857,7 @@ describe('Wizard', function () {
           }
         }];
         it('calls the onClick from the continueProps of the active step', function () {
-          var _render15 = render(_react.default.createElement(_.default, {
+          var _render21 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 2,
@@ -648,7 +868,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render15.getByRole;
+              getByRole = _render21.getByRole;
 
           var modal = getByRole('dialog');
           expect(modal).toBeInTheDocument();
@@ -683,7 +903,7 @@ describe('Wizard', function () {
         it('doesnt render if im not in the last step', function () {
           var submitCallbackMock = jest.fn();
 
-          var _render16 = render(_react.default.createElement(_.default, {
+          var _render22 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 1,
@@ -692,7 +912,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render16.getByRole;
+              getByRole = _render22.getByRole;
 
           var modal = getByRole('dialog');
           expect((0, _react2.within)(modal).queryByText(/submit/i)).not.toBeInTheDocument();
@@ -700,7 +920,7 @@ describe('Wizard', function () {
         it('renders if im in the last step', function () {
           var submitCallbackMock = jest.fn();
 
-          var _render17 = render(_react.default.createElement(_.default, {
+          var _render23 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: steps.length,
@@ -709,7 +929,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render17.getByRole;
+              getByRole = _render23.getByRole;
 
           var modal = getByRole('dialog');
           expect((0, _react2.within)(modal).getByText(/submit/i)).toBeInTheDocument();

package/lib/components/Wizard/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAiDnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAsDnD,eAAe,MAAM,CAAC"}

package/lib/components/Wizard/schema.js

@@ -15,7 +15,7 @@ schema.propTypes = {
   id: _reactDesc.PropTypes.string.description('A unique identifier for the modal.'),
   size: _reactDesc.PropTypes.oneOf(['normal', 'extraLarge']).description('Define the max width size of the modal').defaultValue('normal'),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the modal').isRequired,
-  onCancel: _reactDesc.PropTypes.func.description('The event handler called to close the modal. This is called by either pressing Esc or clicking the "Cancel" button').isRequired,
+  onCancel: _reactDesc.PropTypes.func.description('The event handler called when the Cancel button is clicked or the Esc key is pressed. If not provided, the Cancel button will be disabled and pressing Esc will not close the modal.'),
   visible: _reactDesc.PropTypes.bool.description('A boolean value used to control whether the modal is visible or not').defaultValue('false'),
   zIndex: _reactDesc.PropTypes.number.description('Sets the z-index value for the modal & overlay.'),
   activeStep: _reactDesc.PropTypes.number.description('The currently active step in the wizard. This has to be handled by the user').isRequired,
@@ -33,6 +33,9 @@ schema.propTypes = {
   submitButtonProps: _reactDesc.PropTypes.shape({
     onClick: _reactDesc.PropTypes.func.isRequired
   }).description('the props to pass to the submit button, this button is rendered by default in the last stesp'),
+  cancelButtonProps: _reactDesc.PropTypes.shape({
+    onClick: _reactDesc.PropTypes.func
+  }).description('The props to pass to the cancel button. These props are spread after the defaults, so they can override the default text, kind, variant, and onClick.'),
   renderActions: _reactDesc.PropTypes.func.description('Function to render custom action buttons. It receives an object with the current step, step index, isFirstStep, isLastStep and the default actions as parameters')
 };
 var _default = schema;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.226",
+  "version": "2.0.1-alpha.227",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",