@decisiv/ui-components 2.0.1-alpha.222 → 2.0.1-alpha.224

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

@@ -30,6 +30,135 @@ var render = function render(ui, options) {
 };
 
 describe('Wizard', function () {
+  describe('renderActions', function () {
+    describe('when not provided', function () {
+      it('renders the default action buttons', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          }),
+          nextButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          }
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/continue/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+      });
+    });
+    describe('when provided', function () {
+      it('renders the custom action buttons', 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"
+          })
+        }];
+
+        var _render2 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          renderActions: function renderActions() {
+            return _react.default.createElement("div", null, "Custom Actions");
+          }
+        })),
+            getByRole = _render2.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/custom actions/i)).toBeInTheDocument();
+      });
+    });
+  });
+  describe('hideBodyTitle', function () {
+    it('hides the content title when hideBodyTitle is true for the step', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        }),
+        hideBodyTitle: true
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+
+      var _render3 = render(_react.default.createElement(_.default, {
+        title: "Wizard Title",
+        visible: true,
+        activeStep: 1,
+        submitButtonProps: {
+          onClick: function onClick() {
+            return null;
+          }
+        },
+        steps: steps
+      })),
+          getByRole = _render3.getByRole;
+
+      var modal = getByRole('dialog');
+      expect(modal).toBeInTheDocument();
+      expect((0, _react2.within)(modal).queryByText(/first step/i, {
+        selector: 'h3'
+      })).not.toBeInTheDocument();
+    });
+  });
   describe('size', function () {
     describe('normal / default', function () {
       it('renders the modal with a max-width of 650px', function () {
@@ -50,7 +179,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render = render(_react.default.createElement(_.default, {
+        var _render4 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -61,7 +190,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render.getByRole;
+            getByRole = _render4.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toHaveStyle('max-width: 650px');
@@ -86,7 +215,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render2 = render(_react.default.createElement(_.default, {
+        var _render5 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           size: "extraLarge",
           visible: true,
@@ -98,7 +227,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render2.getByRole;
+            getByRole = _render5.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toHaveStyle("max-width: ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)));
@@ -123,7 +252,7 @@ describe('Wizard', function () {
       })
     }];
 
-    var _render3 = render(_react.default.createElement(_.default, {
+    var _render6 = render(_react.default.createElement(_.default, {
       title: "Wizard Title",
       visible: true,
       activeStep: 1,
@@ -134,7 +263,7 @@ describe('Wizard', function () {
       },
       steps: steps
     })),
-        getByRole = _render3.getByRole;
+        getByRole = _render6.getByRole;
 
     var modal = getByRole('dialog');
     expect(modal).toBeInTheDocument();
@@ -161,7 +290,7 @@ describe('Wizard', function () {
         })
       }];
 
-      var _render4 = render(_react.default.createElement(_.default, {
+      var _render7 = render(_react.default.createElement(_.default, {
         title: "Wizard Title",
         visible: true,
         activeStep: 1,
@@ -172,7 +301,7 @@ describe('Wizard', function () {
         },
         steps: steps
       })),
-          getByRole = _render4.getByRole;
+          getByRole = _render7.getByRole;
 
       var modal = getByRole('dialog');
       expect(modal).toBeInTheDocument();
@@ -202,7 +331,7 @@ describe('Wizard', function () {
         })
       }];
 
-      var _render5 = render(_react.default.createElement(_.default, {
+      var _render8 = render(_react.default.createElement(_.default, {
         title: "Wizard Title",
         visible: true,
         activeStep: activeStep,
@@ -213,7 +342,7 @@ describe('Wizard', function () {
         },
         steps: steps
       })),
-          getByRole = _render5.getByRole;
+          getByRole = _render8.getByRole;
 
       var modal = getByRole('dialog');
       expect(modal).toBeInTheDocument();
@@ -242,7 +371,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render6 = render(_react.default.createElement(_.default, {
+        var _render9 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           onCancel: onCancelMock,
@@ -254,7 +383,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render6.getByRole;
+            getByRole = _render9.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -285,7 +414,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render7 = render(_react.default.createElement(_.default, {
+        var _render10 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -296,7 +425,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render7.getByRole;
+            getByRole = _render10.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -327,7 +456,7 @@ describe('Wizard', function () {
           }
         }];
 
-        var _render8 = render(_react.default.createElement(_.default, {
+        var _render11 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: steps.length,
@@ -338,7 +467,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render8.getByRole;
+            getByRole = _render11.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -371,7 +500,7 @@ describe('Wizard', function () {
           })
         }];
         it('calls the onClick from the continueProps of the active step', function () {
-          var _render9 = render(_react.default.createElement(_.default, {
+          var _render12 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 1,
@@ -382,7 +511,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render9.getByRole;
+              getByRole = _render12.getByRole;
 
           var modal = getByRole('dialog');
           expect(modal).toBeInTheDocument();
@@ -421,7 +550,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render10 = render(_react.default.createElement(_.default, {
+        var _render13 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 2,
@@ -432,7 +561,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render10.getByRole;
+            getByRole = _render13.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -463,7 +592,7 @@ describe('Wizard', function () {
           })
         }];
 
-        var _render11 = render(_react.default.createElement(_.default, {
+        var _render14 = render(_react.default.createElement(_.default, {
           title: "Wizard Title",
           visible: true,
           activeStep: 1,
@@ -474,7 +603,7 @@ describe('Wizard', function () {
           },
           steps: steps
         })),
-            getByRole = _render11.getByRole;
+            getByRole = _render14.getByRole;
 
         var modal = getByRole('dialog');
         expect(modal).toBeInTheDocument();
@@ -508,7 +637,7 @@ describe('Wizard', function () {
           }
         }];
         it('calls the onClick from the continueProps of the active step', function () {
-          var _render12 = render(_react.default.createElement(_.default, {
+          var _render15 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 2,
@@ -519,7 +648,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render12.getByRole;
+              getByRole = _render15.getByRole;
 
           var modal = getByRole('dialog');
           expect(modal).toBeInTheDocument();
@@ -554,7 +683,7 @@ describe('Wizard', function () {
         it('doesnt render if im not in the last step', function () {
           var submitCallbackMock = jest.fn();
 
-          var _render13 = render(_react.default.createElement(_.default, {
+          var _render16 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: 1,
@@ -563,7 +692,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render13.getByRole;
+              getByRole = _render16.getByRole;
 
           var modal = getByRole('dialog');
           expect((0, _react2.within)(modal).queryByText(/submit/i)).not.toBeInTheDocument();
@@ -571,7 +700,7 @@ describe('Wizard', function () {
         it('renders if im in the last step', function () {
           var submitCallbackMock = jest.fn();
 
-          var _render14 = render(_react.default.createElement(_.default, {
+          var _render17 = render(_react.default.createElement(_.default, {
             title: "Wizard Title",
             visible: true,
             activeStep: steps.length,
@@ -580,7 +709,7 @@ describe('Wizard', function () {
             },
             steps: steps
           })),
-              getByRole = _render14.getByRole;
+              getByRole = _render17.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;AA6CnD,eAAe,MAAM,CAAC"}
+{"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"}

package/lib/components/Wizard/schema.js

@@ -23,15 +23,17 @@ schema.propTypes = {
     title: _reactDesc.PropTypes.string.isRequired,
     content: _reactDesc.PropTypes.node.isRequired,
     previousButtonProps: _reactDesc.PropTypes.shape({
-      onClick: _reactDesc.PropTypes.func.isRequired
+      onClick: _reactDesc.PropTypes.func
     }),
     nextButtonProps: _reactDesc.PropTypes.shape({
-      onClick: _reactDesc.PropTypes.func.isRequired
-    })
+      onClick: _reactDesc.PropTypes.func
+    }),
+    hideBodyTitle: _reactDesc.PropTypes.bool
   })).description('Define the steps to render in the wizard. For more info on the usage, see the Step Props table below').isRequired,
   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').isRequired
+  }).description('the props to pass to the submit button, this button is rendered by default in the last stesp'),
+  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;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.1-alpha.222",
+  "version": "2.0.1-alpha.224",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",
@@ -39,6 +39,7 @@
     "react-beautiful-dnd": "^13.0.0",
     "react-desc": "^4.1.2",
     "react-popper": "^1.3.3",
+    "react-window": "^1.8.10",
     "styled-components-modifiers": "^1.2.5",
     "styled-theming": "^2.2.0",
     "stylis-plugin-extra-scope": "^0.1.1"
@@ -61,6 +62,7 @@
     "@types/prop-types": "^15.7.1",
     "@types/react": "^16.8.22",
     "@types/react-beautiful-dnd": "^13.0.0",
+    "@types/react-window": "^1.8.5",
     "@types/styled-components": "^4.1.15",
     "@types/styled-theming": "^2.2.2",
     "babel-plugin-styled-components": "^1.10.6",