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

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

@@ -0,0 +1,410 @@
+<!-- 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 { HooksContextProvider, ValidationContextProvider } from '../../context';
+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';
+import GROUP from'../../json/group.json';
+import GROUP_DATA from '../../json/group.data.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 (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
+  </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 (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
+  </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 (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              actions={ACTIONS}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
+  </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 (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+              hide_title={true}
+              summaryListClassModifiers='no-border'
+              noChangeAction={true}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
+  </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 (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={false}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+              groups={CYA.groups}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
+  </Story>
+</Canvas>
+
+
+### Group of address rows
+<Canvas>
+  <Story name='Group of address 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.pages,
+        GROUP.components,
+        GROUP_DATA
+      );
+      const PAGES = Utils.FormPage.getAll(
+        GROUP.pages,
+        GROUP.components,
+        { ...DATA }
+      );
+      const ACTIONS = GROUP.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 (
+        <HooksContextProvider>
+          <ValidationContextProvider>
+            <CheckYourAnswers
+              pages={PAGES}
+              hide_page_titles={true}
+              actions={ACTIONS}
+              onAction={ON_ACTION}
+              onRowAction={ON_ROW_ACTION}
+            />
+          </ValidationContextProvider>
+        </HooksContextProvider>
+      );
+    }}
+  </Story>
+</Canvas>
+
+