@digigov/form 2.0.0-daaf7bdf → 2.0.0-e20fed09

package/src/MultiplicityField/{MultiplicityField.mdx → doc.mdx}

@@ -3,13 +3,11 @@ id: ask-users-recursive
 title: Ask users for recursive data
 ---
 
-import LeadText from '@site/src/components/LeadText';
+# MultiplicityField
 
-<LeadText>
-  Multiplicity & FieldArray fields allow users to input data described by a
-  particular schema for an arbitrary number of times until they are done. It can
-  be used to input a fixed, a minimum, and a maximum length of instances.
-</LeadText>
+Multiplicity & FieldArray fields allow users to input data described by a
+particular schema for an arbitrary number of times until they are done. It can
+be used to input a fixed, a minimum, and a maximum length of instances.
 
 ## What we are trying to achieve
 
@@ -32,7 +30,7 @@ properties for a data entity like a citizen and their personal details, and it
 can be reused internally multiple times by `@digigov/form` to generate data
 objects based on this schema.
 
-## Accessibility & usability
+## Accessibility & Usability
 
 We aim to have semantically correct and valid forms, and as a result we cannot
 mix form-related HTML elements, like `form`, `input`, `label` with generic ones,
@@ -108,43 +106,45 @@ This field is the most complex component we currently offer, and it uses the
 react-hook-form under the hood. First, let's take a look at what it looks like, and then we can
 break down its functionality and how you can use it.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
+        multiplicity={true}
+        label={{ primary: 'Οχήματα' }}
         type="array"
         extra={{
           border: true,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              add: 'Add',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε που έχετε προσθέσει',
+              add: 'Προσθήκη',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε και άλλα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε άλλο ένα όχημα',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -152,14 +152,14 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: { primary: 'Ημερομηνία Κυκλοφορίας' },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -167,7 +167,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -176,10 +176,11 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```
 
 ### How to use it
@@ -196,7 +197,7 @@ export default function MultiplicityForm() {
   return (
     <Form>
       {/* this is where all fields will eventually be rendered */}
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
@@ -209,11 +210,11 @@ are asking users for information about their vehicles, we can also fill in the `
 `label.primary`, as well as the `type` and `required`
 props.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
-  label={{ primary: 'Vehicles' }}
+  label={{ primary: 'Οχήματα' }}
   type="array"
   required
 />
@@ -232,14 +233,14 @@ inner form, respectively.
 Inside the `of` key you can add an `extra` key that will then contain a `fields`
 key describing the field props for all inputs needed.
 
-```js
+```js pure
 // this will be used as value for the `extra` prop
 {
   of: {
     type: 'object',
     label: {
-      primary: 'Vehicle details',
-      secondary: 'See and change the details of a vehicle',
+      primary: 'Περιγραφή Οχήματος',
+      secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
     },
     extra: {
       fields: [
@@ -247,14 +248,16 @@ key describing the field props for all inputs needed.
           key: 'registration_date',
           type: 'date',
           required: true,
-          label: { primary: 'Registration date' },
+          label: {
+            primary: 'Ημερομηνία Κυκλοφορίας'
+          },
         },
         {
           key: 'make',
           type: 'string',
           required: true,
           label: {
-            primary: 'Make',
+            primary: 'Κατασκευαστής',
           },
         },
         {
@@ -262,7 +265,7 @@ key describing the field props for all inputs needed.
           type: 'string',
           required: true,
           label: {
-            primary: 'Model',
+            primary: 'Μοντέλο',
           },
         },
       ],
@@ -287,14 +290,14 @@ FieldArray instead of the Multiplicity, is to explicitly disable the
 multiplicity functionality, by using the `multiplicity={false}` prop.
 
 As a result, if you learn how to use one, you can easily use the other, and
-naturally, you can also change their behaviour by changing a single prop in your
+naturally, you can also change their behavior by changing a single prop in your
 React code.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
-  label={{ primary: 'Vehicles' }}
+  label={{ primary: 'Οχήματα' }}
   type="array"
   // highlight-next-line
   multiplicity={false}
@@ -305,45 +308,46 @@ React code.
 The end result looks very different from Multiplicity at first glance, but you
 can achieve the same results with both of them.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
-        type="array"
         multiplicity={false}
+        editable={true}
+        label={{ primary: 'Οχήματα' }}
+        type="array"
         extra={{
           border: true,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              nothing_added: 'You have not added any vehicles yet.',
-              add: 'Add vehicle',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε που έχετε προσθέσει',
+              add: 'Προσθήκη',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε και άλλα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε άλλο ένα όχημα',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -351,14 +355,14 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: { primary: 'Ημερομηνία Κυκλοφορίας' },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -366,7 +370,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -375,10 +379,11 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```
 
 ## Validating form data
@@ -396,7 +401,7 @@ should expect to need some length validation sooner than later.
 You can easily validate the exact length of the items added to the multipliticy
 array, simply by using the `extra.length` prop.
 
-```jsx
+```jsx pure
 <Field
   extra={{
     length: 2,
@@ -409,45 +414,47 @@ array, simply by using the `extra.length` prop.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
+        label={{ primary: 'Οχήματα' }}
         type="array"
         multiplicity={true}
         extra={{
+          length: 2,
           border: true,
-          length: 3,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              add: 'Add',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε προσθέσει',
+              nothing_added: 'Δεν έχετε προσθέσει κανένα όχημα ακόμα.',
+              add: 'Προσθήκη οχήματος',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε περισσότερα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε ακόμα ένα από τα οχήματά σας',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -455,14 +462,16 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: {
+                    primary: 'Ημερομηνία Κυκλοφορίας',
+                  },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -470,7 +479,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -479,10 +488,11 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```
 
 ### Min or max length
@@ -497,7 +507,7 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 
 :::
 
-```jsx
+```jsx pure
 <Field
   extra={{
     min: 2,
@@ -511,47 +521,48 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
 
-export default function SimpleForm() {
+export function SimpleForm() {
   return (
     <Form>
       <Field
         key="vehicles"
         name="vehicles"
-        label={{ primary: 'Vehicles' }}
+        label={{ primary: 'Οχήματα' }}
         type="array"
         multiplicity={true}
         extra={{
-          border: true,
           min: 2,
           max: 5,
+          border: true,
           label: {
             object: {
-              title: 'Vehicle',
-              title_added: 'The vehicles you have already added',
-              nothing_added: 'You have not added any vehicles yet.',
-              add: 'Add',
-              delete: 'Remove',
+              title: 'Οχήματα',
+              title_added: 'Τα οχήματα που έχετε προσθέσει',
+              nothing_added: 'Δεν έχετε προσθέσει κανένα όχημα ακόμα.',
+              add: 'Προσθήκη οχήματος',
+              delete: 'Αφαίρεση',
             },
             question: {
-              title: 'Do you want to add more vehicles?',
+              title: 'Θέλετε να προσθέσετε περισσότερα οχήματα;',
               objectLabel: {
-                primary: 'Add one more of your vehicles',
-                secondary: 'Fill in the details below and then click “Add“.',
+                primary: 'Προσθέστε ακόμα ένα από τα οχήματά σας',
+                secondary:
+                  'Συμπληρώστε τα παρακάτω πεδία και πατήστε "Προσθήκη".',
               },
-              yes: 'Yes',
-              no: 'No',
+              yes: 'Ναι',
+              no: 'Όχι',
             },
           },
           of: {
             type: 'object',
             label: {
-              primary: 'Vehicle details',
-              secondary: 'See and change the details of a vehicle',
+              primary: 'Περιγραφή Οχήματος',
+              secondary: 'Αλλάξτε τα στοιχεία του οχήματος',
             },
             extra: {
               fields: [
@@ -559,14 +570,16 @@ export default function SimpleForm() {
                   key: 'registration_date',
                   type: 'date',
                   required: true,
-                  label: { primary: 'Registration date' },
+                  label: {
+                    primary: 'Ημερομηνία Κυκλοφορίας',
+                  },
                 },
                 {
                   key: 'make',
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Make',
+                    primary: 'Κατασκευαστής',
                   },
                 },
                 {
@@ -574,7 +587,7 @@ export default function SimpleForm() {
                   type: 'string',
                   required: true,
                   label: {
-                    primary: 'Model',
+                    primary: 'Μοντέλο',
                   },
                 },
               ],
@@ -583,8 +596,9 @@ export default function SimpleForm() {
         }}
         required
       />
-      <Button type="submit">Submit</Button>
+      <Button type="submit">Συνέχεια</Button>
     </Form>
   );
 }
+export default SimpleForm;
 ```

package/src/MultiplicityField/index.test.tsx

@@ -34,6 +34,10 @@ test('renders the All MultiplicityField variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/MultiplicityField/index.tsx

@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
-
-import FieldObject from '@digigov/form/FieldObject';
-import AddObjects from '@digigov/form/MultiplicityField/add-objects';
+import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { AddObjects } from '@digigov/form/MultiplicityField/add-objects';
 import {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
-import { Button } from '@digigov/react-core/Button';
-import { Card } from '@digigov/react-core/Card';
-import { CardAction } from '@digigov/react-core/CardAction';
-import { CardContent } from '@digigov/react-core/CardContent';
-import { CardHeading } from '@digigov/react-core/CardHeading';
-import { Heading } from '@digigov/react-core/Heading';
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+import { Heading } from '@digigov/ui/typography/Heading';
 
 // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
 export const Multiplicity: React.FC<MultiplicityProps> = ({
@@ -30,6 +31,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  resetField,
   Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -48,7 +50,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     setStashedObjects(newStashedObjects);
   };
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -56,8 +58,10 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
           ? error
           : undefined
       }
+      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
+      register={register}
     >
       {stashedObjects.length > 0 ? (
         <div>
@@ -96,10 +100,11 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         getValues={getValues}
         unregister={unregister}
         trigger={trigger}
+        resetField={resetField}
         clearErrors={clearErrors}
         Field={Field}
       />
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 

package/src/MultiplicityField/types.ts

@@ -1,6 +1,5 @@
 import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form/Field/types';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
+import { FieldSpec, ControlledFieldProps } from '@digigov/form/Field/types';
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
@@ -13,6 +12,7 @@ export interface MultiplicityProps
   setValue: UseFormReturn['setValue'];
   getValues: UseFormReturn['getValues'];
   unregister: UseFormReturn['unregister'];
+  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   extra?: Record<string, any>;
   label?: FieldSpec['label'];

package/src/Questions/Questions.stories.js

@@ -1,7 +1,10 @@
 import Questions from '@digigov/form/Questions';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/Questions',
   component: Questions,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Questions',
 };
 export { Default } from '@digigov/form/Questions/__stories__/Default';

package/src/Questions/Questions.tsx

@@ -31,7 +31,7 @@ export const Questions: React.FC<QuestionsInterface> = ({
   useEffect(() => {
     if (forceStepName !== currentStep.name) {
       const forceStep = steps.find(({ name }) => name === forceStepName);
-      forceStep && setCurrentStep(forceStep);
+      if (forceStep) setCurrentStep(forceStep);
     }
   }, [forceStepName]);
   const localData =
@@ -42,16 +42,16 @@ export const Questions: React.FC<QuestionsInterface> = ({
   const submitStep = (stepName, stepData): void => {
     data[stepName] = stepData;
     if (localDraft) {
-      isBrowser &&
+      if (isBrowser)
         window.localStorage.setItem(`questions-${name}`, JSON.stringify(data));
     }
     if (onChange) {
-      onChange && onChange(data);
+      onChange(data);
     }
     setData(data);
     const nextStep = getNextStep(currentStep, steps, data);
     if (nextStep) {
-      onActiveStep && onActiveStep(nextStep);
+      if (onActiveStep) onActiveStep(nextStep);
       setCurrentStep(nextStep);
     } else {
       onSubmit(data);