@digigov/form 1.1.3 → 1.1.4-mobile

package/src/MultiplicityField/MultiplicityField.stories.js

@@ -4,9 +4,9 @@ export default {
   component: MultiplicityField,
   displayName: 'MultiplicityField',
 };
-export * from '@digigov/form/MultiplicityField/__stories__/Default';
-export * from '@digigov/form/MultiplicityField/__stories__/WithMinLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithMaxLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength';
-export * from '@digigov/form/MultiplicityField/__stories__/WithExactLength';
-export * from '@digigov/form/MultiplicityField/__stories__/PreviewDisplay';
+export { Default } from '@digigov/form/MultiplicityField/__stories__/Default';
+export { PreviewDisplay } from '@digigov/form/MultiplicityField/__stories__/PreviewDisplay';
+export { WithMinLength } from '@digigov/form/MultiplicityField/__stories__/WithMinLength';
+export { WithMaxLength } from '@digigov/form/MultiplicityField/__stories__/WithMaxLength';
+export { WithMinAndMaxLength } from '@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength';
+export { WithExactLength } from '@digigov/form/MultiplicityField/__stories__/WithExactLength';

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -83,7 +83,7 @@ export const PreviewDisplay = () => (
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 1</CardHeading>
           <CardContent>
-            <SummaryList>
+            <SummaryList noLastBorder marginBottom={0}>
               {fields &&
                 fields.map((field, index) => {
                   return (
@@ -99,7 +99,7 @@ export const PreviewDisplay = () => (
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 2</CardHeading>
           <CardContent>
-            <SummaryList>
+            <SummaryList noLastBorder marginBottom={0}>
               {fields &&
                 fields.map((field, index) => {
                   return (

package/src/MultiplicityField/__stories__/WithExactLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

@@ -62,7 +62,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/__stories__/WithMinLength.tsx

@@ -61,7 +61,7 @@ const fields = [
               },
             },
             {
-              key: 'bod',
+              key: 'dob',
               required: true,
               type: 'date',
               label: {

package/src/MultiplicityField/add-objects.tsx

@@ -19,6 +19,7 @@ import { FieldSpec } from '@digigov/form/types';
 import Fieldset from '@digigov/react-core/Fieldset';
 import RadioConditional from '@digigov/react-core/RadioConditional';
 import Button from '@digigov/ui/form/Button';
+
 export interface AddObjectsProps
   extends Omit<MultiplicityProps, 'key' | 'component'> {
   fields: FieldArrayWithId[];
@@ -27,6 +28,7 @@ export interface AddObjectsProps
   remove: UseFieldArrayReturn['remove'];
   stashedObjects: StashedObject[];
   onStash: (arg0: StashedObject) => void;
+  children?: React.ReactNode;
 }
 
 export const AddObjects: React.FC<AddObjectsProps> = ({
@@ -44,6 +46,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   getValues,
   onStash,
   error,
+  Field
 }) => {
   const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
   const currentName = `${name}.${currentIndex}`;
@@ -67,6 +70,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
       options: [
         {
           label: { primary: extra?.label.question.yes },
+          id: `radio-input-${name}-yes`,
           value: 'yes',
           selected: function RadioSelected() {
             return (
@@ -91,6 +95,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
                     />
                     <Button
                       color="secondary"
+                      name={`${currentName}-add-object`}
                       onClick={async (e) => {
                         e.preventDefault();
                         const nestedFields = extra?.of.extra.fields.map(
@@ -111,16 +116,20 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         },
         {
           label: { primary: extra?.label.question.no },
+          id: `radio-input-${name}-no`,
           value: 'no',
         },
       ],
     },
   };
 
-  const { field, control, register, reset, error: needsMoreError } = useField(
-    radioField.key,
-    radioField?.type ? radioField : null
-  );
+  const {
+    field,
+    control,
+    register,
+    reset,
+    error: needsMoreError,
+  } = useField(radioField.key, radioField?.type ? radioField : null);
 
   const calculatedField: CalculatedField = useMemo(
     () => calculateField(children, field),
@@ -142,27 +151,20 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   // assignment is a temp fix for typescript build to run
   calculatedField.label = calculatedField.label || {};
   if (extra?.length) {
-    calculatedField.label.secondary = `Έχετε προσθέσει ${
-      stashedObjects.length
-    } εγγραφές και σας απομένουν ακόμα ${
-      extra.length - stashedObjects.length
-    } εγγραφές.`;
+    calculatedField.label.secondary = `Έχετε προσθέσει ${stashedObjects.length
+      } εγγραφές και σας απομένουν ακόμα ${extra.length - stashedObjects.length
+      } εγγραφές.`;
   } else if (extra?.min && extra?.max) {
-    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
-      extra?.min - stashedObjects.length
-    } και το μέγιστο ${
-      extra?.max
-    } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
+    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${extra?.min - stashedObjects.length
+      } και το μέγιστο ${extra?.max
+      } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
   } else if (extra?.min) {
-    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${
-      extra?.min - stashedObjects.length
-    } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
+    calculatedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${extra?.min - stashedObjects.length
+      } εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
   } else if (extra?.max) {
-    calculatedField.label.secondary = ` Έχετε προσθέσει ${
-      stashedObjects.length
-    } εγγραφές και σας απομένουν ${
-      extra.max - stashedObjects.length
-    } επιπλέον εγγραφές.`;
+    calculatedField.label.secondary = ` Έχετε προσθέσει ${stashedObjects.length
+      } εγγραφές και σας απομένουν ${extra.max - stashedObjects.length
+      } επιπλέον εγγραφές.`;
   }
   return (
     <Fieldset>
@@ -172,9 +174,10 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
         control={control}
         register={register}
         reset={reset}
+        Field={Field}
         error={
           extra?.max - stashedObjects.length === 0 ||
-          extra?.length - stashedObjects.length === 0
+            extra?.length - stashedObjects.length === 0
             ? error
             : needsMoreError
         }

package/src/MultiplicityField/index.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/form/MultiplicityField/__stories__/Default';
+import { PreviewDisplay } from '@digigov/form/MultiplicityField/__stories__/PreviewDisplay';
+import { WithExactLength } from '@digigov/form/MultiplicityField/__stories__/WithExactLength';
+import { WithMaxLength } from '@digigov/form/MultiplicityField/__stories__/WithMaxLength';
+import { WithMinAndMaxLength } from '@digigov/form/MultiplicityField/__stories__/WithMinAndMaxLength';
+import { WithMinLength } from '@digigov/form/MultiplicityField/__stories__/WithMinLength';
+
+test('renders the All MultiplicityField variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="PreviewDisplay">
+      <PreviewDisplay />
+    </TestVariant>
+    <TestVariant title="WithExactLength">
+      <WithExactLength />
+    </TestVariant>
+    <TestVariant title="WithMaxLength">
+      <WithMaxLength />
+    </TestVariant>
+    <TestVariant title="WithMinAndMaxLength">
+      <WithMinAndMaxLength />
+    </TestVariant>
+    <TestVariant title="WithMinLength">
+      <WithMinLength />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/MultiplicityField/index.tsx

@@ -1,18 +1,16 @@
 import React, { useState } from 'react';
 import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form';
+import { FieldSpec } from '@digigov/form/types';
 import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import FieldObject from '@digigov/form/FieldObject';
 import AddObjects from '@digigov/form/MultiplicityField/add-objects';
-import {
-  Card,
-  CardContent,
-  CardAction,
-  Button,
-  Heading,
-  CardHeading,
-} from '@digigov/react-core';
+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';
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
@@ -48,6 +46,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
+  Field
 }) => {
   const { fields, append, remove } = useFieldArray({
     control,
@@ -114,6 +113,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         unregister={unregister}
         trigger={trigger}
         clearErrors={clearErrors}
+        Field={Field}
       />
     </FieldContainer>
   );

package/src/Questions/Questions.stories.js

@@ -4,4 +4,4 @@ export default {
   component: Questions,
   displayName: 'Questions',
 };
-export * from '@digigov/form/Questions/__stories__/Default';
+export { Default } from '@digigov/form/Questions/__stories__/Default';

package/src/Questions/Step/StepTitle.tsx

@@ -13,6 +13,7 @@ export interface StepTitleInterface {
   backButton?: string;
   caption?: string;
   step?: string;
+  children?: React.ReactNode;
 }
 
 export const StepTitleHeading: React.FC<HeadingProps> = (props) => {

package/src/Questions/Step/index.ts

@@ -7,7 +7,6 @@ export * from '@digigov/form/Questions/Step/StepForm';
 export * from '@digigov/form/Questions/Step/StepQuote';
 export * from '@digigov/form/Questions/Step/StepTitle';
 export * from '@digigov/form/Questions/Step/getAddMoreFields';
-export * from '@digigov/form/Questions/Step/';
 export * from '@digigov/form/Questions/Step/types';
 import Step from '@digigov/form/Questions/Step/Step';
 export default Step;

package/src/Questions/Step/types.tsx

@@ -25,6 +25,7 @@ export interface StepInterface {
   submitStep?: any;
   review?: StepReviewInterface;
   type?: StepType;
+  children?: React.ReactNode;
 }
 export interface StepArrayReviewInterface {
   array: Record<string, any>[];