@ukhomeoffice/cop-react-form-renderer 0.1.0-beta → 1.0.0-delta

package/dist/components/FormRenderer/helpers/getNextPageId.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _models = require("../../../models");
+
+var getNextHubPageId = function getNextHubPageId(action) {
+  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+    return _models.FormPages.HUB;
+  }
+
+  return (action === null || action === void 0 ? void 0 : action.nextPageId) || _models.FormPages.HUB;
+};
+
+var getNextCYAPageId = function getNextCYAPageId(pages, currentPageId, action) {
+  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+    return undefined;
+  }
+
+  var nextIndex = pages.findIndex(function (p) {
+    return p.id === currentPageId;
+  }) + 1;
+  return nextIndex < pages.length ? pages[nextIndex].id : _models.FormPages.CYA;
+};
+
+var getNextWizardPageId = function getNextWizardPageId(pages, currentPageId, action) {
+  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+    return undefined;
+  }
+
+  var nextIndex = pages.findIndex(function (p) {
+    return p.id === currentPageId;
+  }) + 1;
+  return nextIndex < pages.length ? pages[nextIndex].id : undefined;
+};
+
+var getNextFormPageId = function getNextFormPageId(pages, action) {
+  if ((action === null || action === void 0 ? void 0 : action.type) === _models.PageAction.TYPES.SAVE_AND_RETURN) {
+    return undefined;
+  }
+
+  return pages.length > 0 ? pages[0].id : undefined;
+};
+
+var getNextPageId = function getNextPageId(formType, pages, currentPageId, action) {
+  switch (formType) {
+    case _models.FormTypes.HUB:
+      return getNextHubPageId(action);
+
+    case _models.FormTypes.CYA:
+      return getNextCYAPageId(pages, currentPageId, action);
+
+    case _models.FormTypes.WIZARD:
+      return getNextWizardPageId(pages, currentPageId, action);
+
+    default:
+      return getNextFormPageId(pages, action);
+  }
+};
+
+var _default = getNextPageId;
+exports.default = _default;

package/dist/components/FormRenderer/helpers/getNextPageId.test.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _models = require("../../../models");
+
+var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('components', function () {
+  describe('FormRenderer', function () {
+    describe('helpers', function () {
+      describe('getNextPageId', function () {
+        var PAGES = [{
+          id: 'alpha'
+        }, {
+          id: 'bravo'
+        }];
+        describe("when the form type is '".concat(_models.FormTypes.HUB, "'"), function () {
+          var FORM_TYPE = _models.FormTypes.HUB;
+          it("should return '".concat(_models.FormPages.HUB, "' by default"), function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(_models.FormPages.HUB);
+          });
+          it("should return '".concat(_models.FormPages.HUB, "' if the action is '").concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
+            var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toEqual(_models.FormPages.HUB);
+          });
+          it('should return action.nextPageId if specified', function () {
+            var ACTION = {
+              nextPageId: 'bob'
+            };
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, undefined, ACTION)).toEqual(ACTION.nextPageId);
+          });
+        });
+        describe("when the form type is '".concat(_models.FormTypes.CYA, "'"), function () {
+          var FORM_TYPE = _models.FormTypes.CYA;
+          it('should return the first page by default', function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(PAGES[0].id);
+          });
+          it('should return the second page when on the first page', function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id)).toEqual(PAGES[1].id);
+          });
+          it("should return '".concat(_models.FormPages.CYA, "' when on the last page"), function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[PAGES.length - 1].id)).toEqual(_models.FormPages.CYA);
+          });
+          it("should return undefined if the action is '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
+            var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toBeUndefined();
+          });
+        });
+        describe("when the form type is '".concat(_models.FormTypes.WIZARD, "'"), function () {
+          var FORM_TYPE = _models.FormTypes.WIZARD;
+          it('should return the first page by default', function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(PAGES[0].id);
+          });
+          it('should return the second page when on the first page', function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id)).toEqual(PAGES[1].id);
+          });
+          it('should return undefined when on the last page', function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[PAGES.length - 1].id)).toBeUndefined();
+          });
+          it("should return undefined if the action is '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
+            var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toBeUndefined();
+          });
+        });
+        describe("when the form type is '".concat(_models.FormTypes.FORM, "'"), function () {
+          var FORM_TYPE = _models.FormTypes.FORM;
+          it("should always return the first page if there any pages and the action is not '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
+            var ACTION = {
+              type: _models.PageAction.TYPES.SUBMIT,
+              nextPageId: 'bob'
+            };
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES)).toEqual(PAGES[0].id);
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id)).toEqual(PAGES[0].id);
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[1].id)).toEqual(PAGES[0].id);
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toEqual(PAGES[0].id);
+          });
+          it("should return undefined if the action is '".concat(_models.PageAction.TYPES.SAVE_AND_RETURN, "'"), function () {
+            var ACTION = _models.PageAction.DEFAULTS.saveAndReturn;
+            expect((0, _getNextPageId.default)(FORM_TYPE, PAGES, PAGES[0].id, ACTION)).toBeUndefined();
+          });
+          it('should return undefined if there are no pages', function () {
+            expect((0, _getNextPageId.default)(FORM_TYPE, [])).toBeUndefined();
+          });
+        });
+      });
+    });
+  });
+});

package/dist/components/FormRenderer/helpers/getPage.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _models = require("../../../models");
+
+// Local imports
+
+/**
+ * Gets the current page to render, which may be undefined if the current page is the "hub".
+ * @param {string} pageId The current page identifier.
+ * @param {Array} pages All of the pages in the form.
+ * @param {object} hub The hub, if there is one.
+ * @returns The current page to render.
+ */
+var getPage = function getPage(pageId, pages, hub) {
+  if (pageId) {
+    if (pageId === _models.FormPages.HUB) {
+      return hub === _models.HubFormats.CYA ? undefined : hub;
+    }
+
+    return pages.find(function (p) {
+      return p.id === pageId;
+    });
+  }
+
+  return undefined;
+};
+
+var _default = getPage;
+exports.default = _default;

package/dist/components/FormRenderer/helpers/getPage.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _models = require("../../../models");
+
+var _getPage = _interopRequireDefault(require("./getPage"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+describe('components', function () {
+  describe('FormRenderer', function () {
+    describe('helpers', function () {
+      var HUB = {
+        id: _models.FormPages.HUB,
+        components: []
+      };
+      var PAGES = [{
+        id: 'alpha',
+        components: ['x']
+      }, {
+        id: 'bravo',
+        components: ['y', 'z']
+      }, HUB];
+      describe('getPage', function () {
+        it('should give undefined if the pageId is undefined', function () {
+          expect((0, _getPage.default)(undefined, PAGES, _models.HubFormats.CYA)).toBeUndefined();
+        });
+        it('should give undefined if the pageId is "hub" but the hub is the CYA', function () {
+          expect((0, _getPage.default)(_models.FormPages.HUB, PAGES, _models.HubFormats.CYA)).toBeUndefined();
+        });
+        it('should give hub if the pageId is "hub" and the hub is NOT the CYA', function () {
+          expect((0, _getPage.default)(_models.FormPages.HUB, PAGES, HUB)).toEqual(HUB);
+        });
+        it('should give find the appropriate page if the pageId is not "hub"', function () {
+          expect((0, _getPage.default)('alpha', PAGES, HUB)).toEqual({
+            id: 'alpha',
+            components: ['x']
+          });
+        });
+        it('should give undefined if the pageId is not "hub" and not found in the pages collection', function () {
+          expect((0, _getPage.default)('charlie', PAGES, HUB)).toBeUndefined();
+        });
+      });
+    });
+  });
+});

package/dist/components/FormRenderer/helpers/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.helpers = exports.default = void 0;
+
+var _canActionProceed = _interopRequireDefault(require("./canActionProceed"));
+
+var _canCYASubmit = _interopRequireDefault(require("./canCYASubmit"));
+
+var _getFormState = _interopRequireDefault(require("./getFormState"));
+
+var _getNextPageId = _interopRequireDefault(require("./getNextPageId"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Local imports
+var helpers = {
+  canActionProceed: _canActionProceed.default,
+  canCYASubmit: _canCYASubmit.default,
+  getFormState: _getFormState.default,
+  getNextPageId: _getNextPageId.default
+};
+exports.helpers = helpers;
+var _default = helpers;
+exports.default = _default;

package/dist/components/PageActions/ActionButton.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DEFAULT_LABEL = void 0;
+
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _models = require("../../models");
+
+var _excluded = ["action", "onAction"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var DEFAULT_LABEL = 'Continue';
+exports.DEFAULT_LABEL = DEFAULT_LABEL;
+
+var ActionButton = function ActionButton(_ref) {
+  var _action = _ref.action,
+      onAction = _ref.onAction,
+      attrs = _objectWithoutProperties(_ref, _excluded);
+
+  var action = typeof _action === 'string' ? _models.PageAction.DEFAULTS[_action] : _action;
+
+  if (!action) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, _extends({}, attrs, {
+    className: action.className,
+    classModifiers: action.classModifiers,
+    start: action.start || false,
+    onClick: function onClick() {
+      return onAction(action);
+    }
+  }), action.label || DEFAULT_LABEL);
+};
+
+ActionButton.propTypes = {
+  action: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
+  onAction: _propTypes.default.func.isRequired
+};
+ActionButton.defaultProps = {
+  action: ''
+};
+var _default = ActionButton;
+exports.default = _default;

package/dist/components/PageActions/ActionButton.test.js

@@ -0,0 +1,116 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _models = require("../../models");
+
+var _ActionButton = _interopRequireWildcard(require("./ActionButton"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
+describe('components', function () {
+  describe('PageActions.ActionButton', function () {
+    var ON_ACTION_CALLS = [];
+
+    var ON_ACTION = function ON_ACTION(action) {
+      ON_ACTION_CALLS.push(action);
+    };
+
+    beforeEach(function () {
+      ON_ACTION_CALLS.length = 0;
+    });
+    it('should handle an unknown action identifier', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var ACTION, _render, container;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              ACTION = 'unknown';
+              _render = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionButton.default, {
+                action: ACTION,
+                onAction: ON_ACTION
+              })), container = _render.container;
+              expect(container.childNodes.length).toEqual(0);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+    it('should appropriately display a submit action', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
+      var ACTION, _render2, container, button;
+
+      return regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              ACTION = 'submit';
+              _render2 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionButton.default, {
+                action: ACTION,
+                onAction: ON_ACTION
+              })), container = _render2.container;
+              button = container.childNodes[0];
+              expect(button.tagName).toEqual('BUTTON');
+              expect(button.textContent).toEqual(_ActionButton.DEFAULT_LABEL); // Click the button and make sure it fires the onAction handler.
+
+              _react.fireEvent.click(button, {});
+
+              expect(ON_ACTION_CALLS.length).toEqual(1);
+              expect(ON_ACTION_CALLS[0]).toEqual(_models.PageAction.DEFAULTS.submit);
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    })));
+    it('should appropriately display a custom action', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var ACTION, _render3, container, button;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              ACTION = {
+                type: 'navigate',
+                url: '/alpha',
+                label: 'Alpha'
+              };
+              _render3 = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_ActionButton.default, {
+                action: ACTION,
+                onAction: ON_ACTION
+              })), container = _render3.container;
+              button = container.childNodes[0];
+              expect(button.tagName).toEqual('BUTTON');
+              expect(button.textContent).toEqual(ACTION.label); // Click the button and make sure it fires the onAction handler.
+
+              _react.fireEvent.click(button, {});
+
+              expect(ON_ACTION_CALLS.length).toEqual(1);
+              expect(ON_ACTION_CALLS[0]).toEqual(ACTION);
+
+            case 8:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
+  });
+});

package/dist/components/PageActions/PageActions.js

@@ -3,47 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.DEFAULT_LABEL = exports.DEFAULT_ACTIONS = void 0;
+exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _copReactComponents = require("@ukhomeoffice/cop-react-components");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _copReactComponents = require("@ukhomeoffice/cop-react-components");
+var _react = _interopRequireDefault(require("react"));
+
+var _ActionButton = _interopRequireDefault(require("./ActionButton"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 // Global imports
-var DEFAULT_LABEL = 'Continue';
-exports.DEFAULT_LABEL = DEFAULT_LABEL;
-var DEFAULT_ACTIONS = {
-  submit: {
-    type: 'submit',
-    validate: true
-  }
-};
-exports.DEFAULT_ACTIONS = DEFAULT_ACTIONS;
-
+// Local imports
 var PageActions = function PageActions(_ref) {
   var actions = _ref.actions,
       onAction = _ref.onAction;
 
-  var getAction = function getAction(action, index) {
-    var props = typeof action === 'string' ? DEFAULT_ACTIONS[action] : action;
-    return /*#__PURE__*/_react.default.createElement(_copReactComponents.Button, {
+  if (!actions || actions.length === 0) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, actions.map(function (action, index) {
+    return /*#__PURE__*/_react.default.createElement(_ActionButton.default, {
       key: index,
-      className: props.className,
-      onClick: function onClick() {
-        return onAction(props);
-      }
-    }, props.label || DEFAULT_LABEL);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_copReactComponents.ButtonGroup, null, actions.map(getAction));
+      action: action,
+      onAction: onAction
+    });
+  }));
 };
 
 PageActions.propTypes = {
-  actions: _propTypes.default.array.isRequired
+  actions: _propTypes.default.array,
+  onAction: _propTypes.default.func.isRequired
 };
 var _default = PageActions;
 exports.default = _default;

package/dist/components/PageActions/PageActions.stories.mdx

@@ -0,0 +1,74 @@
+<!-- Global imports -->
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
+
+<!-- Local imports -->
+import Utils from '../../utils';
+import PageActions from './PageActions';
+
+<!-- JSON documents -->
+import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
+import GRADE from '../../json/grade.json';
+import TEAMS from '../../json/team.json';
+import USER_PROFILE_DATA from '../../json/userProfile.data.json';
+import USER_PROFILE from '../../json/userProfile.json';
+
+<Meta title="Components/Page actions" id="D-PageActions" component={ PageActions } />
+
+<Heading size="xl" caption="Components">Page actions</Heading>
+
+Renders the buttons at the bottom of a Page.
+
+<Canvas withToolbar>
+  <Story name="Default">
+    {() => {
+      const ACTIONS = ['submit'];
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <PageActions actions={ACTIONS} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+<Details summary="Properties" className="no-indent">
+  <ArgsTable of={ PageActions } />
+</Details>
+
+## Variations
+### Custom action
+
+<Canvas>
+  <Story name="Custom action">
+    {() => {
+      const ACTIONS = [{ type: 'navigate', url: '/profile', label: 'Go to profile' }];
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <PageActions actions={ACTIONS} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### Multiple actions
+
+<Canvas>
+  <Story name="Multiple actions">
+    {() => {
+      const ACTIONS = [
+        { type: 'navigate', label: 'Previous' },
+        { type: 'submit', label: 'Next', validate: true }
+      ];
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      return (
+        <PageActions actions={ACTIONS} onAction={ON_ACTION} />
+      );
+    }}
+  </Story>
+</Canvas>