@ukhomeoffice/cop-react-form-renderer 7.3.2-alpha.5 → 8.0.0-alpha

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

@@ -1,409 +0,0 @@
-{/* 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';
-
-export const decorators = [withMock]; 
-
-<Meta
-  title='Components/Check your answers'
-  id='D-CheckYourAnswers'
-  component={CheckYourAnswers}
-/>
-
-<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>
-
-