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

package/dist/components/FormComponent/FormComponent.test.js

@@ -1,264 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _setupTests = require("../../setupTests");
-
-var _FormComponent = _interopRequireDefault(require("./FormComponent"));
-
-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('FormComponent', function () {
-    it('should render a text component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
-      var ID, VALUE, COMPONENT, ON_CHANGE, _renderWithValidation, container, formGroup, label, hint, input;
-
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              ID = 'component';
-              VALUE = 'Text value';
-              COMPONENT = {
-                id: ID,
-                fieldId: ID,
-                type: 'text',
-                label: 'Text component',
-                hint: 'Text hint'
-              };
-
-              ON_CHANGE = function ON_CHANGE() {};
-
-              _renderWithValidation = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-                "data-testid": ID,
-                component: COMPONENT,
-                value: VALUE,
-                onChange: ON_CHANGE
-              })), container = _renderWithValidation.container; // text components are wrapper in a FormGroup by default.
-
-              formGroup = container.childNodes[0];
-              expect(formGroup.tagName).toEqual('DIV');
-              expect(formGroup.classList).toContain('govuk-form-group');
-              label = formGroup.childNodes[0];
-              expect(label.tagName).toEqual('LABEL');
-              expect(label.classList).toContain('govuk-label');
-              expect(label.textContent).toEqual("".concat(COMPONENT.label, " (optional)"));
-              expect(label.getAttribute('for')).toEqual(ID);
-              hint = formGroup.childNodes[1];
-              expect(hint.tagName).toEqual('SPAN');
-              expect(hint.classList).toContain('govuk-hint');
-              expect(hint.textContent).toEqual(COMPONENT.hint);
-              input = formGroup.childNodes[2];
-              expect(input.tagName).toEqual('INPUT');
-              expect(input.classList).toContain('govuk-input');
-              expect(input.id).toEqual(ID);
-              expect(input.value).toEqual(VALUE);
-
-            case 22:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    })));
-    it('should render a text component appropriately with wrap turned off', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var ID, VALUE, COMPONENT, ON_CHANGE, _renderWithValidation2, container, input;
-
-      return regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              ID = 'component';
-              VALUE = 'Text value';
-              COMPONENT = {
-                id: ID,
-                fieldId: ID,
-                type: 'text',
-                label: 'Text component',
-                hint: 'Text hint'
-              };
-
-              ON_CHANGE = function ON_CHANGE() {};
-
-              _renderWithValidation2 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-                "data-testid": ID,
-                component: COMPONENT,
-                wrap: false,
-                value: VALUE,
-                onChange: ON_CHANGE
-              })), container = _renderWithValidation2.container; // With wrap = false, there should be no form group.
-
-              input = container.childNodes[0];
-              expect(input.tagName).toEqual('INPUT');
-              expect(input.classList).toContain('govuk-input');
-              expect(input.id).toEqual(ID);
-              expect(input.value).toEqual(VALUE);
-
-            case 10:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    })));
-    it('should render an html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
-      var ID, COMPONENT, _renderWithValidation3, container, p;
-
-      return regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) {
-          switch (_context3.prev = _context3.next) {
-            case 0:
-              ID = 'component';
-              COMPONENT = {
-                type: 'html',
-                tagName: 'p',
-                content: 'HTML content'
-              };
-              _renderWithValidation3 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-                "data-testid": ID,
-                component: COMPONENT
-              })), container = _renderWithValidation3.container;
-              p = container.childNodes[0];
-              expect(p.tagName).toEqual('P');
-              expect(p.textContent).toEqual(COMPONENT.content);
-
-            case 6:
-            case "end":
-              return _context3.stop();
-          }
-        }
-      }, _callee3);
-    })));
-    it('should render an overridden html component appropriately', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
-      var hooks, ID, COMPONENT, _renderWithValidation4, container, div;
-
-      return regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              hooks = {
-                onGetComponent: function onGetComponent(config, wrap) {
-                  return /*#__PURE__*/_react.default.createElement("div", null, "".concat(config.type, " | ").concat(config.tagName, " | ").concat(config.content, " | ").concat(wrap));
-                }
-              };
-              ID = 'component';
-              COMPONENT = {
-                type: 'html',
-                tagName: 'p',
-                content: 'HTML content'
-              };
-              _renderWithValidation4 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-                "data-testid": ID,
-                component: COMPONENT
-              }), {
-                hooks: hooks
-              }), container = _renderWithValidation4.container;
-              div = container.childNodes[0];
-              expect(div.tagName).toEqual('DIV');
-              expect(div.textContent).toEqual("".concat(COMPONENT.type, " | ").concat(COMPONENT.tagName, " | ").concat(COMPONENT.content, " | true"));
-
-            case 7:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    })));
-    it('should render the correct html component when the override returns null', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
-      var hooks, ID, COMPONENT, _renderWithValidation5, container, p;
-
-      return regeneratorRuntime.wrap(function _callee5$(_context5) {
-        while (1) {
-          switch (_context5.prev = _context5.next) {
-            case 0:
-              hooks = {
-                onGetComponent: function onGetComponent() {
-                  return null;
-                }
-              };
-              ID = 'component';
-              COMPONENT = {
-                type: 'html',
-                tagName: 'p',
-                content: 'HTML content'
-              };
-              _renderWithValidation5 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-                "data-testid": ID,
-                component: COMPONENT
-              }), {
-                hooks: hooks
-              }), container = _renderWithValidation5.container;
-              p = container.childNodes[0];
-              expect(p.tagName).toEqual('P');
-              expect(p.textContent).toEqual(COMPONENT.content);
-
-            case 7:
-            case "end":
-              return _context5.stop();
-          }
-        }
-      }, _callee5);
-    })));
-    it('should render a text component appropriately with interpolated label', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
-      var ID, VALUE, COMPONENT, DATA, ON_CHANGE, _renderWithValidation6, container, formGroup, label, hint, input;
-
-      return regeneratorRuntime.wrap(function _callee6$(_context6) {
-        while (1) {
-          switch (_context6.prev = _context6.next) {
-            case 0:
-              ID = 'component';
-              VALUE = 'Text value'; // eslint-disable-next-line no-template-curly-in-string
-
-              COMPONENT = {
-                id: ID,
-                fieldId: ID,
-                type: 'text',
-                label: '${text} Text component',
-                cya_label: '${text} Text component',
-                hint: 'Text hint'
-              };
-              DATA = {
-                text: 'Interpolated'
-              };
-
-              ON_CHANGE = function ON_CHANGE() {};
-
-              _renderWithValidation6 = (0, _setupTests.renderWithValidation)( /*#__PURE__*/_react.default.createElement(_FormComponent.default, {
-                "data-testid": ID,
-                component: COMPONENT,
-                value: VALUE,
-                onChange: ON_CHANGE,
-                formData: DATA
-              })), container = _renderWithValidation6.container; // text components are wrapper in a FormGroup by default.
-
-              formGroup = container.childNodes[0];
-              expect(formGroup.tagName).toEqual('DIV');
-              expect(formGroup.classList).toContain('govuk-form-group');
-              label = formGroup.childNodes[0];
-              expect(label.tagName).toEqual('LABEL');
-              expect(label.classList).toContain('govuk-label');
-              expect(label.textContent).toEqual('Interpolated Text component (optional)');
-              expect(label.getAttribute('for')).toEqual(ID);
-              hint = formGroup.childNodes[1];
-              expect(hint.tagName).toEqual('SPAN');
-              expect(hint.classList).toContain('govuk-hint');
-              expect(hint.textContent).toEqual(COMPONENT.hint);
-              input = formGroup.childNodes[2];
-              expect(input.tagName).toEqual('INPUT');
-              expect(input.classList).toContain('govuk-input');
-              expect(input.id).toEqual(ID);
-              expect(input.value).toEqual(VALUE);
-
-            case 23:
-            case "end":
-              return _context6.stop();
-          }
-        }
-      }, _callee6);
-    })));
-  });
-});

package/dist/components/FormPage/FormPage.stories.mdx

@@ -1,131 +0,0 @@
-<!-- Global imports -->
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Details, Heading, Link } from '@ukhomeoffice/cop-react-components';
-import withMock from 'storybook-addon-mock';
-
-<!-- Local imports -->
-import { HooksContextProvider, ValidationContextProvider } from '../../context';
-import Utils from '../../utils';
-import FormPage from './FormPage';
-
-<!-- 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/Form page" id="D-FormPage" component={ FormPage } decorators={[withMock]} />
-
-<Heading size="xl" caption="Components">Form page</Heading>
-
-Renders a page on 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-page">JSON</Link> configuration.
-
-<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
-      }
-    ]
-  }}>
-    {() => {
-      const PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'civil-servant-status');
-      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <FormPage page={PAGE} onAction={ON_ACTION} />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-<Details summary="Properties" className="no-indent">
-  <ArgsTable of={ FormPage } />
-</Details>
-
-
-## Variants
-### With `autocomplete`
-<Canvas>
-  <Story name="With autocomplete" 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
-      }
-    ]
-  }}>
-    {() => {
-      const PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'team-name');
-      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <FormPage page={PAGE} onAction={ON_ACTION} />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### Without editable controls
-
-<Canvas>
-  <Story name="Without editable controls">
-    {() => {
-      const PAGE_JSON = USER_PROFILE.pages.find(p => p.id === 'add-or-change-line-manager');
-      const PAGE = Utils.FormPage.get(PAGE_JSON, USER_PROFILE.components, { ...USER_PROFILE_DATA });
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      return (
-        <HooksContextProvider>
-          <ValidationContextProvider>
-            <FormPage page={PAGE} onAction={ON_ACTION} />
-          </ValidationContextProvider>
-        </HooksContextProvider>
-      );
-    }}
-  </Story>
-</Canvas>