@ukhomeoffice/cop-react-form-renderer 2.6.1 → 2.7.1

package/dist/components/CheckYourAnswers/CheckYourAnswers.stories.mdx

@@ -1,269 +1,331 @@
-<!-- Global imports -->
-
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import {
-  Details,
-  Heading,
-  Link,
-  Tag,
-} from '@ukhomeoffice/cop-react-components';
-import withMock from 'storybook-addon-mock';
-
-<!-- Local imports -->
-
-import Utils from '../../utils';
-import CheckYourAnswers from './CheckYourAnswers';
-
-<!-- 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';
-import FIRST_FORM from '../../json/firstForm.json';
-
-<Meta
-  title='Components/Check your answers'
-  id='D-CheckYourAnswers'
-  component={CheckYourAnswers}
-  decorators={[withMock]}
-/>
-
-<Heading size='xl' caption='Components'>
-  Check your answers
-</Heading>
-
-Renders the **Check your answers** screen for a form.
-
-<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 DATA = Utils.Data.setupForm(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        USER_PROFILE_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        { ...DATA }
-      );
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <CheckYourAnswers
-          pages={PAGES}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-<Details summary='Properties' className='no-indent'>
-  <ArgsTable of={CheckYourAnswers} />
-</Details>
-
-## Variant
-
-### Without page titles
-
-<Canvas>
-  <Story
-    name='No page titles'
-    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 DATA = Utils.Data.setupForm(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        USER_PROFILE_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        { ...DATA }
-      );
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-### With actions
-
-<Canvas>
-  <Story
-    name='With actions'
-    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 DATA = { firstName: 'John', surname: 'Smith', age: 41 };
-      const PAGES = Utils.FormPage.getAll(
-        FIRST_FORM.pages,
-        FIRST_FORM.components,
-        { ...DATA }
-      );
-      const ACTIONS = FIRST_FORM.cya.actions;
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          actions={ACTIONS}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-        />
-      );
-    }}
-  </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,
-        },
-      ],
-    }}
-  >
-    {() => {
-      const DATA = Utils.Data.setupForm(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        USER_PROFILE_DATA
-      );
-      const PAGES = Utils.FormPage.getAll(
-        USER_PROFILE.pages,
-        USER_PROFILE.components,
-        { ...DATA }
-      );
-      const ON_ACTION = (action, patch, onError) => {
-        console.log('action invoked', action, patch);
-      };
-      const ON_ROW_ACTION = (page) => {
-        console.log('row action invoked', page);
-      };
-      return (
-        <CheckYourAnswers
-          pages={PAGES}
-          hide_page_titles={true}
-          onAction={ON_ACTION}
-          onRowAction={ON_ROW_ACTION}
-          hide_title={true}
-          summaryListClassModifiers='no-border'
-          noChangeAction={true}
-        />
-      );
-    }}
-  </Story>
-</Canvas>
+<!-- Global imports -->
+
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import {
+  Details,
+  Heading,
+  Link,
+  Tag,
+} from '@ukhomeoffice/cop-react-components';
+import withMock from 'storybook-addon-mock';
+
+<!-- Local imports -->
+
+import Utils from '../../utils';
+import CheckYourAnswers from './CheckYourAnswers';
+
+<!-- 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';
+import FIRST_FORM from '../../json/firstForm.json';
+import GROUP_OF_ROW from '../../json/groupOfRow.json';
+import GROUP_OF_ROW_DATA from '../../json/groupOfRowData.json';
+
+<Meta
+  title='Components/Check your answers'
+  id='D-CheckYourAnswers'
+  component={CheckYourAnswers}
+  decorators={[withMock]}
+/>
+
+<Heading size='xl' caption='Components'>
+  Check your answers
+</Heading>
+
+Renders the **Check your answers** screen for a form.
+
+<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 DATA = Utils.Data.setupForm(
+        USER_PROFILE.pages,
+        USER_PROFILE.components,
+        USER_PROFILE_DATA
+      );
+      const PAGES = Utils.FormPage.getAll(
+        USER_PROFILE.pages,
+        USER_PROFILE.components,
+        { ...DATA }
+      );
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <CheckYourAnswers
+          pages={PAGES}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+<Details summary='Properties' className='no-indent'>
+  <ArgsTable of={CheckYourAnswers} />
+</Details>
+
+## Variant
+
+### Without page titles
+
+<Canvas>
+  <Story
+    name='No page titles'
+    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 DATA = Utils.Data.setupForm(
+        USER_PROFILE.pages,
+        USER_PROFILE.components,
+        USER_PROFILE_DATA
+      );
+      const PAGES = Utils.FormPage.getAll(
+        USER_PROFILE.pages,
+        USER_PROFILE.components,
+        { ...DATA }
+      );
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <CheckYourAnswers
+          pages={PAGES}
+          hide_page_titles={true}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+### With actions
+
+<Canvas>
+  <Story
+    name='With actions'
+    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 DATA = { firstName: 'John', surname: 'Smith', age: 41 };
+      const PAGES = Utils.FormPage.getAll(
+        FIRST_FORM.pages,
+        FIRST_FORM.components,
+        { ...DATA }
+      );
+      const ACTIONS = FIRST_FORM.cya.actions;
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <CheckYourAnswers
+          pages={PAGES}
+          hide_page_titles={true}
+          actions={ACTIONS}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+        />
+      );
+    }}
+  </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,
+        },
+      ],
+    }}
+  >
+    {() => {
+      const DATA = Utils.Data.setupForm(
+        USER_PROFILE.pages,
+        USER_PROFILE.components,
+        USER_PROFILE_DATA
+      );
+      const PAGES = Utils.FormPage.getAll(
+        USER_PROFILE.pages,
+        USER_PROFILE.components,
+        { ...DATA }
+      );
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <CheckYourAnswers
+          pages={PAGES}
+          hide_page_titles={true}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+          hide_title={true}
+          summaryListClassModifiers='no-border'
+          noChangeAction={true}
+        />
+      );
+    }}
+  </Story>
+</Canvas>
+
+
+### Group of rows
+
+<Canvas>
+  <Story
+    name='Group of rows'
+    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 DATA = Utils.Data.setupForm(
+        GROUP_OF_ROW.pages,
+        GROUP_OF_ROW.components,
+        GROUP_OF_ROW_DATA
+      );
+      const PAGES = Utils.FormPage.getAll(
+        GROUP_OF_ROW.pages,
+        GROUP_OF_ROW.components,
+        { ...DATA }
+      );
+      const CYA = GROUP_OF_ROW.cya;
+      const ON_ACTION = (action, patch, onError) => {
+        console.log('action invoked', action, patch);
+      };
+      const ON_ROW_ACTION = (page) => {
+        console.log('row action invoked', page);
+      };
+      return (
+        <CheckYourAnswers
+          pages={PAGES}
+          hide_page_titles={false}
+          onAction={ON_ACTION}
+          onRowAction={ON_ROW_ACTION}
+          groups={CYA.groups}
+        />
+      );
+    }}
+  </Story>
+</Canvas>