@digigov/form 1.1.2 → 1.1.4-mobile

package/cjs/Questions/index.mdx

@@ -1,415 +0,0 @@
----
-id: ask-questions-steps
-title: Asking questions in multiple steps
----
-
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-} from '@digigov/react-core';
-
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  Question pages are used to ask users meaningful questions needed by your
-  GOV.GR service, or even gather data about their persona or their application
-  status. Use step questions to make bigger forms less scary and easier to fill
-  out.
-</LeadText>
-
-## Introduction to Question pages
-
-Asking questions is a vital part of interacting with our users, and asking them
-to provide information needed for your service. We want to build forms that
-are accessible to a lot of people regardless of their cognitive or other
-impairments, challenges, or other technological drawbacks.
-
-In our case, we don't have to worry about profit, conversions, and sales, but
-there are other hidden costs. If there are too many questions in the form,
-you’ll lose users. You’ll also lose users if there are questions in the form
-that users consider impertinent or irrelevant—or, even worse, you’ll get made-up
-data. If you find that your users have names like John Doe or Mickey Mouse and
-live on Anystreet, in Anywhere, you’ve collected a lot of rubbish that costs a
-lot to clean up. Plus, there is the further hidden cost of loss of goodwill.
-Even if users struggle through to the end of a form and answer honestly, if it’s
-more work than they expected, they’ll be annoyed about it. That's the exact
-opposite of our goals of making concise, easy-to-use services.
-
-```jsx live
-import React from 'react';
-import Questions, { Step, StepForm, StepTitle } from '@digigov/form/Questions';
-import { Field } from '@digigov/form';
-
-const steps = [
-  {
-    name: 'residency',
-    title: 'Where do you live?',
-    fields: [
-      {
-        key: 'countries',
-        type: 'choice:single',
-        required: true,
-        extra: {
-          options: [
-            {
-              label: {
-                primary: 'Greece',
-              },
-              value: 'greece',
-            },
-            {
-              label: {
-                primary: 'Cyprus',
-              },
-              value: 'cyprus',
-            },
-            {
-              label: {
-                primary: 'European Union',
-              },
-              value: 'eu',
-            },
-            {
-              label: {
-                primary: 'United States of America',
-              },
-              value: 'usa',
-            },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    name: 'bod',
-    title: 'When is your birthday?',
-    fields: [
-      {
-        key: 'bod',
-        label: {
-          primary: 'Birthday',
-        },
-        type: 'date',
-        required: true,
-      },
-    ],
-  },
-];
-
-export default function Index() {
-  return (
-    <Questions
-      name={'example'}
-      steps={steps}
-      onSubmit={(data) => {
-        console.log(data);
-      }}
-    >
-      <Step name="residency">
-        <StepTitle />
-        <StepForm submitButton={true}>
-          <Field name="countries" />
-        </StepForm>
-      </Step>
-      <Step name="bod">
-        <StepTitle />
-        <StepForm submitButton={true}>
-          <Field name="bod" />
-        </StepForm>
-      </Step>
-    </Questions>
-  );
-}
-```
-
-When we started working on forms, we started following the GOV.UK paradigm,
-asking just one question per screen, making it very manageable on mobiles. When
-we sent this early design around internally for comments, a common response was
-that it felt odd on large screens and it slowed users down. In reality, even if
-it adds more clicks, it makes the process feel simpler and easy - there wasn’t
-too much to take in and process at any one time. So we stuck with the simpler
-screens for everyone. [Read
-more](https://designnotes.blog.gov.uk/2014/07/14/things-we-learnt-designing-register-to-vote/)
-about this topic.
-
-The approach gave us other advantages. For example, say someone makes a mistake
-answering a question: entering an email address with no ‘@’. The mistake and how
-to correct it is a lot clearer if the question is on the screen. With longer
-pages, it’s common for the question to be off the top or bottom of the screen,
-making it harder to find.
-
-For more information about the design specification of question pages, you can
-read our [“Question pages“ pattern
-page](https://guide.services.gov.gr/docs/questions-pages).
-
-## How to use it
-
-Each step can be defined using a `Step` React component and all steps should be
-place inside a `Questions` component, that will provide the steps subcomponents
-the required state.
-
-First, you declare an array called `steps` and then you pass it to `<Questions />` as a prop. Then for each step you can declare a `<Step />` component and
-its subsequent subcomponents that you customise as needed, like the step title,
-description or form. You can also add components that are not form-specific,
-adding paragraphs or other custom components.
-
-```jsx
-<Questions name="example" steps={steps} onSubmit={(data) => doSomething(data)}>
-  {/* more steps could be rendered here ... */}
-  <Step name="age">
-    <StepTitle />
-    <StepDescription />
-    <StepForm submitButton={true}>
-      <Field name="age" />
-    </StepForm>
-  </Step>
-  {/* and of course more could be down here as well */}
-</Questions>
-```
-
-### Step specification
-
-Steps can be described using `StepInterface` interface declared as a JSON
-object. The most basic properties are the following:
-
-- `name` - a unique identifier, must be different for each step
-- `title` - the main questions title that communicates to the users what this
-  question page is about, rendered by `StepTitle`
-- `fields` - an array that describes each input field that will be rendered in
-  the `StepForm`. Each fields implements the `FieldSpec` interface as a JSON object.
-
-```json title="step-name.json"
-{
-  "name": "name",
-  "title": "What is your name?",
-  "fields": [
-    {
-      "key": "name",
-      "type": "string",
-      "required": true
-    }
-  ]
-}
-```
-
-### Branching between steps
-
-Each step will be rendered in the order that matches their index inside the
-array of fields. You can change this order and create branching between any two
-steps.
-
-Each step can be programmaticaly linked to the next step so you can do some
-basic branching between each step. The `nextStep` property will need to be a
-function that will take the form state as an argument and will return the key of
-the next `step`.
-
-```json title="next-step.json"
-const steps = [
-  {
-    name: 'age',
-    title: 'What is your age?',
-    fields: [
-      {
-        key: 'age',
-        type: 'int',
-        required: true,
-      }
-    ],
-    // highlight-start
-    nextStep: (data) => {
-      return data.age < 18 ? 'citizen-adult' : citizen-underage;
-    }
-    // highlight-end
-  },
-  {
-    name: 'citizen-underage',
-    title: 'Are you a student?',
-    fields: [ ... ]
-  },
-  {
-    // highlight-next-line
-    name: 'citizen-adult',
-    title: 'Are you currently employed?',
-    fields: [
-      {
-        key: 'citizen-underage-employed',
-        type: 'choice:single',
-        required: true,
-        extra: {
-          options: [
-            {
-              label: {primary: "Yes"},
-              value: 'yes',
-            },
-            {
-              label: {primary: "No"},
-              value: 'no',
-            }
-          ]
-        }
-      }
-    ]
-  },
-];
-```
-
-For example, you may use a form to determine if citizens are adults or not, and
-we want to ask users different questions according to their persona. We can use
-a branch between the `age` step and the other two steps.
-
-```jsx live
-import React from 'react';
-import GovGRFooter from '@digigov/ui/govgr/Footer';
-import Header from '@digigov/ui/app/Header';
-import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
-import HeaderContent from '@digigov/ui/app/Header/HeaderContent';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import BasicLayout, {
-  Top,
-  Container,
-  Main,
-  Bottom,
-} from '@digigov/ui/layouts/Basic';
-import Questions, { Step, StepForm, StepTitle } from '@digigov/form/Questions';
-import { Field } from '@digigov/form';
-import TranslatorsHeader from 'translators-landing/components/TranslatorsHeader';
-
-const steps = [
-  {
-    name: 'age',
-    title: 'What is your age?',
-    fields: [
-      {
-        key: 'age',
-        type: 'int',
-        required: true,
-      },
-    ],
-    nextStep: (data) => {
-      return data.age < 18 ? 'citizen-adult' : 'citizen-underage';
-    },
-  },
-  {
-    name: 'citizen-underage',
-    title: 'Are you a student?',
-    fields: [
-      {
-        key: 'citizen-underage-student',
-        type: 'choice:single',
-        required: true,
-        extra: {
-          options: [
-            {
-              label: { primary: 'Yes' },
-              value: 'yes',
-            },
-            {
-              label: { primary: 'No' },
-              value: 'no',
-            },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    name: 'citizen-adult',
-    title: 'Are you currently employed?',
-    fields: [
-      {
-        key: 'citizen-adult-employed',
-        type: 'choice:single',
-        required: true,
-        extra: {
-          options: [
-            {
-              label: { primary: 'Yes' },
-              value: 'yes',
-            },
-            {
-              label: { primary: 'No' },
-              value: 'no',
-            },
-          ],
-        },
-      },
-    ],
-  },
-];
-
-export default function Index() {
-  return (
-    <BasicLayout>
-      <Top>
-        <Header>
-          <HeaderContent>
-            <HeaderSection>
-              <GovGRLogo href="#" />
-            </HeaderSection>
-          </HeaderContent>
-        </Header>
-      </Top>
-      <Container>
-        <Main>
-          <Questions
-            name={'example'}
-            steps={steps}
-            onSubmit={(data) => {
-              console.log(data);
-            }}
-          >
-            <Step name="age">
-              <StepTitle />
-              <StepForm submitButton={true}>
-                <Field name="age" />
-              </StepForm>
-            </Step>
-            <Step name="citizen-underage">
-              <StepTitle />
-              <StepForm submitButton={true}>
-                <Field name="citizen-underage-student" />
-              </StepForm>
-            </Step>
-            <Step name="citizen-adult">
-              <StepTitle />
-              <StepForm submitButton={true}>
-                <Field name="citizen-adult-employed" />
-              </StepForm>
-            </Step>
-          </Questions>
-        </Main>
-      </Container>
-      <Bottom>
-        <GovGRFooter />
-      </Bottom>
-    </BasicLayout>
-  );
-}
-```
-
-## Prop types
-
-<TableContainer>
-  <Table>
-    <TableHead>
-      <TableRow>
-        <TableHeadCell>Περίοδος</TableHeadCell>
-        <TableHeadCell>Κανονικό ποσό</TableHeadCell>
-        <TableHeadCell>Μειωμένο ποσό</TableHeadCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableDataCell>Πρώτες 6 εβδομάδες </TableDataCell>
-        <TableDataCell> €109.80 / εβδομάδα</TableDataCell>
-        <TableDataCell> €69.80 / εβδομάδα</TableDataCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-</TableContainer>

package/cjs/Questions/index.spec/index.js

@@ -1,63 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-var React = _interopRequireWildcard(require("react"));
-var _enzyme = require("enzyme");
-var _form = require("@digigov/form");
-var _Questions = _interopRequireWildcard(require("@digigov/form/Questions"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var steps = [{
-  name: 'intro',
-  caption: 'intro.caption',
-  title: 'intro.title',
-  description: 'intro.description',
-  fields: [{
-    key: 'name',
-    label: {
-      primary: 'name.field.primary',
-      secondary: 'name.field.secondary'
-    },
-    required: true,
-    type: 'string'
-  }]
-}, {
-  name: 'age',
-  caption: 'age.caption',
-  title: 'age.title',
-  description: 'age.description',
-  fields: [{
-    key: 'dateOfBirth',
-    label: {
-      primary: 'age.field.primary',
-      secondary: 'age.field.secondary'
-    },
-    required: true,
-    type: 'number'
-  }]
-}];
-var _ref = /*#__PURE__*/React.createElement(_Questions.Step, {
-  name: "intro"
-}, /*#__PURE__*/React.createElement(_Questions.StepTitle, null), /*#__PURE__*/React.createElement(_Questions.StepQuote, null, "This is the intro"), /*#__PURE__*/React.createElement(_Questions.StepForm, {
-  submitButton: true
-}, /*#__PURE__*/React.createElement(_form.Field, {
-  key: 'name',
-  name: "name"
-})));
-var _ref2 = /*#__PURE__*/React.createElement(_Questions.Step, {
-  name: "age"
-}, /*#__PURE__*/React.createElement(_Questions.StepTitle, null), /*#__PURE__*/React.createElement(_Questions.StepQuote, null, "This is the age"), /*#__PURE__*/React.createElement(_Questions.StepForm, {
-  submitButton: true
-}, /*#__PURE__*/React.createElement(_form.Field, {
-  key: 'dateOfBirth',
-  name: "dateOfBirth"
-})));
-it('renders the Questions', function () {
-  expect((0, _enzyme.mount)( /*#__PURE__*/React.createElement(_Questions["default"], {
-    name: 'example',
-    onSubmit: function onSubmit(data) {
-      console.log(data);
-    },
-    steps: steps
-  }, _ref, _ref2))).toMatchSnapshot();
-});