@ukhomeoffice/cop-react-form-renderer 4.18.0 → 5.0.0-alpha

package/dist/components/FormPage/FormPage.test.js

@@ -1,368 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-var _react = require("@testing-library/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _models = require("../../models");
-
-var _setupTests = require("../../setupTests");
-
-var _ActionButton = require("../PageActions/ActionButton");
-
-var _FormPage = _interopRequireWildcard(require("./FormPage"));
-
-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.FormPage', function () {
-  describe('FormPage', function () {
-    var TEXT = {
-      id: 'text',
-      fieldId: 'text',
-      type: 'text',
-      label: 'Text component',
-      hint: 'Text hint'
-    }; // eslint-disable-next-line no-template-curly-in-string
-
-    var TEXT_WITH_EXPRESSION = {
-      id: 'text1',
-      fieldId: 'text1',
-      type: 'text',
-      label: 'Email to ${wrapper.email}',
-      hint: 'Text hint ${currentUser.givenName}'
-    }; // eslint-disable-next-line no-template-curly-in-string
-
-    var AUTO_WITH_EXPRESSION = {
-      id: 'text2',
-      fieldId: 'text2',
-      label: '${text2} ${currentUser.givenName}',
-      hint: '${wrapper.email}',
-      type: 'autocomplete',
-      required: true,
-      source: [],
-      disabled: false
-    };
-    var VALUE = 'Text value';
-    var PAGE = {
-      id: 'pageId',
-      title: 'Page 1',
-      components: [TEXT],
-      actions: [_models.PageAction.TYPES.SUBMIT],
-      formData: {
-        text: VALUE
-      }
-    };
-    var PAGE_WITH_BUTTON_ACTIONS = {
-      id: 'pageId',
-      // eslint-disable-next-line no-template-curly-in-string
-      title: '${title}',
-      components: [TEXT_WITH_EXPRESSION, AUTO_WITH_EXPRESSION],
-      actions: [// eslint-disable-next-line no-template-curly-in-string
-      {
-        type: 'submit',
-        validate: true,
-        label: 'Next ${wrapper.nextAction}'
-      }, // eslint-disable-next-line no-template-curly-in-string
-      {
-        type: 'navigate',
-        page: '1',
-        label: 'Go back ${wrapper.prevAction}'
-      }],
-      formData: {
-        title: 'Order Form',
-        text1: "Text1 ".concat(VALUE),
-        text2: "Text2 ".concat(VALUE),
-        wrapper: {
-          email: 'test@example.email',
-          nextAction: 'Payment',
-          prevAction: 'User Details'
-        },
-        currentUser: {
-          givenName: 'Doe'
-        }
-      }
-    };
-    var PAGE_WITH_CONDITIONAL_BUTTONS = {
-      id: 'pageId',
-      // eslint-disable-next-line no-template-curly-in-string
-      title: '${title}',
-      components: [TEXT_WITH_EXPRESSION, AUTO_WITH_EXPRESSION],
-      actions: [{
-        type: 'submit',
-        validate: true,
-        label: 'Button 1',
-        show_when: [{
-          field: 'currentUser.givenName',
-          op: '!=',
-          value: 'Doe'
-        }]
-      }, {
-        type: 'submit',
-        validate: false,
-        label: 'Button 2',
-        show_when: [{
-          field: 'currentUser.givenName',
-          op: '=',
-          value: 'Doe'
-        }]
-      }],
-      formData: {
-        title: 'Order Form',
-        text1: "Text1 ".concat(VALUE),
-        text2: "Text2 ".concat(VALUE),
-        wrapper: {
-          email: 'test@example.email',
-          nextAction: 'Payment',
-          prevAction: 'User Details'
-        },
-        currentUser: {
-          givenName: 'Doe'
-        }
-      }
-    };
-    var ON_ACTION_CALLS = [];
-
-    var checkInputField = function checkInputField(formGroup, fieldId, lbl, hnt, val) {
-      expect(formGroup.tagName).toEqual('DIV');
-      expect(formGroup.classList).toContain('govuk-form-group');
-      var label = formGroup.childNodes[0];
-      expect(label.tagName).toEqual('LABEL');
-      expect(label.classList).toContain('govuk-label');
-      expect(label.textContent).toEqual(lbl);
-      expect(label.getAttribute('for')).toEqual(fieldId);
-      var hint = formGroup.childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
-      expect(hint.classList).toContain('govuk-hint');
-      expect(hint.textContent).toEqual(hnt);
-      var input = formGroup.childNodes[2];
-      expect(input.tagName).toEqual('INPUT');
-      expect(input.classList).toContain('govuk-input');
-      expect(input.id).toEqual(fieldId);
-      expect(input.value).toEqual(val);
-      return input;
-    };
-
-    var checkAutoCompleteField = function checkAutoCompleteField(formGroup, fieldId, lbl, hnt, val) {
-      expect(formGroup.tagName).toEqual('DIV');
-      expect(formGroup.classList).toContain('govuk-form-group');
-      var label = formGroup.childNodes[0];
-      expect(label.tagName).toEqual('LABEL');
-      expect(label.classList).toContain('govuk-label');
-      expect(label.textContent).toEqual(lbl);
-      expect(label.getAttribute('for')).toEqual(fieldId);
-      var hint = formGroup.childNodes[1];
-      expect(hint.tagName).toEqual('SPAN');
-      expect(hint.classList).toContain('govuk-hint');
-      expect(hint.textContent).toEqual(hnt);
-      var outerWrapper = formGroup.childNodes[2];
-      expect(outerWrapper.classList).toContain('hods-autocomplete__outer-wrapper');
-      var autocomplete = outerWrapper.childNodes[0];
-      expect(autocomplete.classList).toContain('hods-autocomplete__wrapper');
-      var input = [].concat(autocomplete.childNodes).filter(function (e) {
-        return e.tagName === 'INPUT';
-      })[0];
-      expect(input.classList).toContain('hods-autocomplete__input');
-      expect(input.tagName).toEqual('INPUT');
-      expect(input.id).toEqual(fieldId);
-      expect(input.value).toEqual(val);
-      return input;
-    };
-
-    var checkFormButtonGroup = function checkFormButtonGroup(buttonGroup, labels) {
-      var _buttonGroup$childNod;
-
-      var buttons = [];
-      expect(buttonGroup.tagName).toEqual('DIV');
-      expect(buttonGroup.classList).toContain('hods-button-group');
-      expect((_buttonGroup$childNod = buttonGroup.childNodes) === null || _buttonGroup$childNod === void 0 ? void 0 : _buttonGroup$childNod.length).toEqual(labels.length);
-      buttonGroup.childNodes.forEach(function (button, i) {
-        expect(button.tagName).toEqual('BUTTON');
-        expect(button.classList).toContain('hods-button');
-        expect(button.textContent).toEqual(labels[i]);
-        buttons.push(button);
-      });
-      return buttons;
-    };
-
-    var ON_ACTION = function ON_ACTION(action, patch, onError) {
-      ON_ACTION_CALLS.push({
-        action: action,
-        patch: patch,
-        onError: onError
-      });
-    };
-
-    beforeEach(function () {
-      PAGE.formData = {
-        text: VALUE
-      };
-      ON_ACTION_CALLS.length = 0;
-    });
-    it('should render a submit page correctly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var _renderWithValidation, container, page, heading;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
-                page: PAGE,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation.container;
-              page = container.childNodes[0];
-              expect(page.tagName).toEqual('DIV');
-              expect(page.classList).toContain("".concat(_FormPage.DEFAULT_CLASS, "__page"));
-              heading = page.childNodes[0];
-              expect(heading.classList).toContain('govuk-heading-l');
-              expect(heading.textContent).toEqual(PAGE.title);
-              checkInputField(page.childNodes[1], TEXT.fieldId, "".concat(TEXT.label, " (optional)"), TEXT.hint, VALUE);
-              checkFormButtonGroup(page.childNodes[2], [_ActionButton.DEFAULT_LABEL]);
-
-            case 9:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    })));
-    it('should render a submit page correctly and submit action button has interpolated label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var _renderWithValidation2, container, page, FORM_DATA, heading;
-
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
-                page: PAGE_WITH_BUTTON_ACTIONS,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation2.container;
-              page = container.childNodes[0];
-              FORM_DATA = PAGE_WITH_BUTTON_ACTIONS.formData;
-              expect(page.tagName).toEqual('DIV');
-              expect(page.classList).toContain("".concat(_FormPage.DEFAULT_CLASS, "__page"));
-              heading = page.childNodes[0];
-              expect(heading.classList).toContain('govuk-heading-l');
-              expect(heading.textContent).toEqual(FORM_DATA.title);
-              checkInputField(page.childNodes[1], TEXT_WITH_EXPRESSION.fieldId, 'Email to test@example.email (optional)', 'Text hint Doe', 'Text1 Text value');
-              checkAutoCompleteField(page.childNodes[2], AUTO_WITH_EXPRESSION.fieldId, "".concat(FORM_DATA.text2, " ").concat(FORM_DATA.currentUser.givenName), FORM_DATA.wrapper.email, "Text2 ".concat(VALUE));
-              checkFormButtonGroup(page.childNodes[3], ['Next Payment', 'Go back User Details']);
-
-            case 11:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
-    it('should handle a page change appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var _renderWithValidation3, container, page, input, NEW_VALUE, EVENT;
-
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
-                page: PAGE,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation3.container;
-              page = container.childNodes[0];
-              expect(page.tagName).toEqual('DIV'); // Change the input.
-
-              input = page.childNodes[1].childNodes[2];
-              NEW_VALUE = "".concat(VALUE, ".");
-              EVENT = {
-                target: {
-                  name: TEXT.fieldId,
-                  value: NEW_VALUE
-                }
-              };
-
-              _react.fireEvent.change(input, EVENT); // And confirm the formData has been changed.
-
-
-              expect(PAGE.formData.text).toEqual(NEW_VALUE);
-
-            case 8:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    })));
-    it('should handle a page action appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      var _renderWithValidation4, container, page, input, NEW_VALUE, CHANGE_EVENT, button;
-
-      return regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
-                page: PAGE,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation4.container;
-              page = container.childNodes[0]; // Change the input.
-
-              input = page.childNodes[1].childNodes[2];
-              NEW_VALUE = "".concat(VALUE, ".");
-              CHANGE_EVENT = {
-                target: {
-                  name: TEXT.fieldId,
-                  value: NEW_VALUE
-                }
-              };
-
-              _react.fireEvent.change(input, CHANGE_EVENT); // Then click the action button.
-
-
-              button = page.childNodes[2].childNodes[0];
-
-              _react.fireEvent.click(button, {}); // And confirm an appropriate action was received.
-
-
-              expect(ON_ACTION_CALLS.length).toEqual(1);
-              expect(PAGE.formData.text).toEqual(NEW_VALUE);
-              expect(ON_ACTION_CALLS[0].action).toEqual(_models.PageAction.DEFAULTS.submit);
-              expect(ON_ACTION_CALLS[0].patch).toEqual({
-                text: NEW_VALUE
-              });
-
-            case 12:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    })));
-    it('should render only the conditionally shown button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-      var _renderWithValidation5, container, page;
-
-      return regeneratorRuntime.wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react2.default.createElement(_FormPage.default, {
-                page: PAGE_WITH_CONDITIONAL_BUTTONS,
-                onAction: ON_ACTION
-              })), container = _renderWithValidation5.container;
-              page = container.childNodes[0];
-              checkFormButtonGroup(page.childNodes[3], ['Button 2']); // Just the second button shown
-
-            case 3:
-            case "end":
-              return _context5.stop();
-          }
-        }
-      }, _callee5);
-    })));
-  });
-});

package/dist/components/FormRenderer/FormRenderer.stories.mdx

@@ -1,183 +0,0 @@
-<!-- Global imports -->
-
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import {
-  Button,
-  Details,
-  Heading,
-  Link,
-  Panel,
-} from '@ukhomeoffice/cop-react-components';
-import { useState } from 'react';
-import withMock from 'storybook-addon-mock';
-
-<!-- Local imports -->
-import FormRenderer from './FormRenderer';
-
-<!-- JSON documents -->
-import CIVIL_SERVANT from '../../json/areYouACivilServant.json';
-import FIRST_FORM from '../../json/firstForm.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/Form renderer'
-  id='D-FormRenderer'
-  component={FormRenderer}
-  decorators={[withMock]}
-/>
-
-<Heading size='xl' caption='Components'>
-  Form renderer
-</Heading>
-
-Renders a form with <Link href="https://ukhomeoffice.github.io/cop-react-components/?path=/docs/d-alert--default-story">COP React components</Link>,
-on the basis of a <Link href="/?path=/docs/f-json-form">JSON</Link> that describes which elements are required.
-
-<Canvas withToolbar>
-  <Story
-    name='Default'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}
-  >
-    {() => {
-      return <FormRenderer {...USER_PROFILE} data={USER_PROFILE_DATA} />;
-    }}
-  </Story>
-</Canvas>
-
-<Details summary='Properties' className='no-indent'>
-  <ArgsTable of={FormRenderer} />
-</Details>
-
-## CYA type
-
-<Canvas>
-  <Story name='CYA'>
-    {() => {
-      const [complete, setComplete] = useState(false);
-      const [returnLater, setReturnLater] = useState(false);
-      const reset = () => {
-        setComplete(false);
-        setReturnLater(false);
-      };
-      return (
-        <>
-          {!complete && !returnLater && (
-            <FormRenderer
-              {...FIRST_FORM}
-              data={{}}
-              hooks={{
-                onRequest: (req) => {
-                  // Do whatever you need to do to the request in here, such as adding an Authorization header.
-                  console.log('onRequest hook called');
-                  return req;
-                },
-                onFormLoad: () => {
-                  console.log('onFormLoad called');
-                },
-                onFormComplete: () => {
-                  console.log('onFormComplete called');
-                  setComplete(true);
-                },
-                onPageChange: (pageId) => {
-                  console.log('onPageChange called', pageId);
-                  setReturnLater(!!pageId === false);
-                },
-                onSubmit: (type, payload, onSuccess, onError) => {
-                  console.log(
-                    'onSubmit called of type',
-                    type,
-                    'called, with the payload',
-                    payload
-                  );
-                  onSuccess();
-                }
-              }}
-            />
-          )}
-          {complete && (
-            <div>
-              <Panel title='Submission successful'>
-                Your submission was successful.
-              </Panel>
-              <Button onClick={() => reset()}>Start again</Button>
-            </div>
-          )}
-          {!complete && returnLater && (
-            <div>
-              <Panel title='Saved to return later'>
-                You clicked on "Save and return later".
-              </Panel>
-              <Button onClick={() => reset()}>Start again</Button>
-            </div>
-          )}
-        </>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Read-only style
-
-<Canvas>
-  <Story
-    name='Read-only style'
-    parameters={{
-      mockData: [
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/areYouACivilServant`,
-          method: 'GET',
-          status: 200,
-          response: CIVIL_SERVANT,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/grade`,
-          method: 'GET',
-          status: 200,
-          response: GRADE,
-        },
-        {
-          url: `${USER_PROFILE_DATA.urls.refData}/team`,
-          method: 'GET',
-          status: 200,
-          response: TEAMS,
-        },
-      ],
-    }}
-  >
-    {() => {
-      return (
-        <FormRenderer
-          {...USER_PROFILE}
-          data={USER_PROFILE_DATA}
-          summaryListClassModifiers='no-border'
-          hide_title={true}
-          noChangeAction={true}
-        />
-      );
-    }}
-  </Story>
-</Canvas>