@digigov/form 2.0.0-rc.7 → 2.0.2

package/src/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/src/inputs/AutoCompleteInput/index.mdx

@@ -1,29 +0,0 @@
----
-title: AutoComplete Input 
----
- 
-# AutoComplete input
-
-AutoCompleteInput element is an enhanced version of text input that shows suggested 
-options as the users type and also let them select an option from the list.
-
-## How to use
-
-### Default
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Default.tsx"
-/>
-
-### Display multiple values
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/AutoCompleteInput"
-  story="Multiple.tsx"
-/>
-
-
-

package/src/inputs/Checkboxes/Checkboxes.stories.playwright.json

@@ -1,85 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form-inputs-checkboxes--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "6mm9fbbYacA3",
-          "title": "show validation error"
-        },
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Space"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Space"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>label>input"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "hBiOJ8xaQSWv",
-          "title": "Focus and check using keyboard, click box and submit"
-        }
-      ]
-    },
-    "digigov-form-inputs-checkboxes--conditional": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>label>input"
-              }
-            }
-          ],
-          "id": "zpUjNzrqwtmW",
-          "title": "Checkboxes conditional action"
-        }
-      ]
-    }
-  }
-}

package/src/inputs/DateInput/DateInput.stories.playwright.json

@@ -1,72 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form-inputs-dateinput--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            },
-            {
-              "name": "keyboard.press",
-              "args": {
-                "key": "Tab"
-              }
-            }
-          ],
-          "id": "n5PFnx7RcuJV",
-          "title": "navigate with keyboard"
-        },
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            },
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(1)>label>input",
-                "text": "33"
-              }
-            },
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(2)>label>input",
-                "text": "33"
-              }
-            },
-            {
-              "name": "type",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>div:nth-child(3)>label>input",
-                "text": "3333"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "Ck7_BFdgITMe",
-          "title": "show validation errors"
-        }
-      ]
-    }
-  }
-}

package/src/inputs/FileInput/FileInput.stories.playwright.json

@@ -1,75 +0,0 @@
-{
-  "version": "4",
-  "stories": {
-    "digigov-form-inputs-fileinput--default": {
-      "actionSets": [
-        {
-          "actions": [
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "c4Jhtju9oCJZ",
-          "title": "show validation error"
-        },
-        {
-          "actions": [
-            {
-              "name": "setFiles",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>label",
-                "file": {
-                  "name": "arxeio.txt",
-                  "size": 200
-                }
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>button"
-              }
-            }
-          ],
-          "id": "WPIcVVWz-299",
-          "title": "add file and remove"
-        },
-        {
-          "actions": [
-            {
-              "name": "setFiles",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>label",
-                "file": {
-                  "name": "arxeio.txt",
-                  "size": 200
-                }
-              }
-            },
-            {
-              "name": "setFiles",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>div>fieldset>div>label",
-                "file": {
-                  "name": "neo_arxeio.txt",
-                  "size": 200
-                }
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>form>button"
-              }
-            }
-          ],
-          "id": "inSBFd25dzkC",
-          "title": "add file, replace and remove"
-        }
-      ]
-    }
-  }
-}

package/src/inputs/FileInput/index.mdx

@@ -1,19 +0,0 @@
----
-title: File Input
----
- 
-# File input
-
-
-
-Input element of type `file` let the user choose one or more files from their device storage.
-
-## How to use
-
-### Default
-
-<Story
-  packageName="@digigov/form"
-  component="inputs/FileInput"
-  story="Default.tsx"
-/>