@digigov/form 2.0.0-254f7786 → 2.0.0-2a26e869

package/src/FormBuilder/scenarios.test.tsx

@@ -469,7 +469,11 @@ const expectErrorMessages = async (formBuilder, scenarioExpect, expect) => {
           );
         }
       }
-      await expect(labelLocator).toHaveText(expectText);
+      if (expectObj.textAssertion === 'toContainText') {
+        await expect(labelLocator).toContainText(expectText);
+      } else {
+        await expect(labelLocator).toHaveText(expectText);
+      }
     }
   }
 };
@@ -1289,6 +1293,54 @@ const INPUTS_INPUT_FIELDS = [
   },
 ];
 
+const ERROR_GROUPING_FIELDS = [
+  {
+    key: 'address',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Οδός',
+    },
+  },
+  {
+    key: 'address_number',
+    type: 'int',
+    required: true,
+    layout: { xl: 2, lg: 2, md: 2, xs: 6 },
+    label: {
+      primary: 'Αριθμός',
+    },
+  },
+  {
+    key: 'postal_code',
+    type: 'postal_code',
+    required: true,
+    layout: { xl: 4, lg: 4, md: 4, xs: 6 },
+    label: {
+      primary: 'Ταχ. Κώδικας',
+    },
+  },
+  {
+    key: 'town',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Πόλη',
+    },
+  },
+  {
+    key: 'country',
+    type: 'string',
+    required: true,
+    layout: { xl: 6, lg: 6, md: 6, xs: 6 },
+    label: {
+      primary: 'Χώρα',
+    },
+  },
+];
+
 const inputsInputScenarios = [
   {
     title: 'success fill for inputs Input',
@@ -1410,7 +1462,7 @@ const inputsInputScenarios = [
   {
     title: 'empty fill for inputs Input',
     describe: 'inputs Input scenario',
-    fields: INPUTS_INPUT_FIELDS,
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
     fill: [],
     expect: [
       {
@@ -1468,12 +1520,42 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.required,
       },
+      {
+        type: 'error',
+        fieldKey: 'address',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'address_number',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal_code',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'town',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'country',
+        text: el.form.error.required,
+        textAssertion: 'toContainText',
+      },
     ],
   },
   {
     title: 'incorrect types for inputs Input',
     describe: 'inputs Input scenario',
-    fields: INPUTS_INPUT_FIELDS,
+    fields: [...INPUTS_INPUT_FIELDS, ...ERROR_GROUPING_FIELDS],
     fill: [
       {
         fieldKey: 'age',
@@ -1519,6 +1601,14 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         value: 'aaaaaa',
       },
+      {
+        fieldKey: 'address_number',
+        value: 'aa',
+      },
+      {
+        fieldKey: 'postal_code',
+        value: 'aaaaa',
+      },
     ],
     expect: [
       {
@@ -1576,6 +1666,18 @@ const inputsInputScenarios = [
         fieldKey: 'uuid4',
         text: el.form.error.uuid4,
       },
+      {
+        type: 'error',
+        fieldKey: 'address_number',
+        text: el.form.error.number,
+        textAssertion: 'toContainText',
+      },
+      {
+        type: 'error',
+        fieldKey: 'postal_code',
+        text: el.form.error.postalCode,
+        textAssertion: 'toContainText',
+      },
     ],
   },
 ];
@@ -1847,7 +1949,12 @@ for (const scenario of scenarios) {
     test(scenario.title, async ({ mount, page }) => {
       const formBuilder = await mount(
         // @ts-ignore
-        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => {}} />
+        <FormBuilder
+          auto={true}
+          grid={true}
+          fields={scenario.fields}
+          onSubmit={() => {}}
+        />
       );
       await fillFields(page, formBuilder, scenario);
       await submitForm(formBuilder);

package/src/MultiplicityField/index.test.tsx

@@ -1,41 +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';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 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>
-  );
+    
+  <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',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/MultiplicityField/index.tsx

@@ -57,6 +57,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
           ? error
           : undefined
       }
+      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
     >

package/src/Questions/__snapshots__/index.spec.tsx.snap

@@ -45,7 +45,7 @@ exports[`renders the Questions 1`] = `
       class="ds-form"
     >
       <div
-        class="ds-field xs:ds-grid__col-span-12"
+        class="ds-field xs:ds-grid__col-span-12 sm:ds-grid__col-span-12 md:ds-grid__col-span-12 lg:ds-grid__col-span-12 xl:ds-grid__col-span-12"
       >
         <label
           class="ds-label"
@@ -64,6 +64,7 @@ exports[`renders the Questions 1`] = `
             aria-required="true"
             class="ds-input"
             data-type="string"
+            id="name"
             name="name"
             type="text"
           />

package/src/Questions/index.spec.tsx

@@ -46,6 +46,14 @@ const steps = [
   },
 ];
 
+beforeAll(() => {
+  global.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  };
+});
+
 it('renders the Questions', () => {
   expect(
     render(

package/src/Questions/index.test.tsx

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

package/src/inputs/AutoCompleteInput/index.test.tsx

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

package/src/inputs/Checkboxes/index.test.tsx

@@ -1,29 +1,28 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Conditional } from '@digigov/form/inputs/Checkboxes/__stories__/Conditional';
 import { Default } from '@digigov/form/inputs/Checkboxes/__stories__/Default';
 import { WithDivider } from '@digigov/form/inputs/Checkboxes/__stories__/WithDivider';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Checkboxes variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Conditional">
-        <Conditional />
-      </TestVariant>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-      <TestVariant title="WithDivider">
-        <WithDivider />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Conditional">
+      <Conditional />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithDivider">
+      <WithDivider />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/DateInput/index.test.tsx

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

package/src/inputs/DateInput/index.tsx

@@ -36,12 +36,12 @@ function useDate(value, onChange) {
   }
 
   function setYear(evt) {
-    const val = evt.target.value;
+    const val = evt.target.value.trim();
     set(val, month, day);
   }
 
   function setMonth(evt, cast) {
-    let val = evt.target.value;
+    let val = evt.target.value.trim();
     if (cast && val && val.length === 1) {
       val = '0' + val;
     }
@@ -49,7 +49,7 @@ function useDate(value, onChange) {
   }
 
   function setDay(evt, cast) {
-    let val = evt.target.value;
+    let val = evt.target.value.trim();
     if (cast && val && val.length === 1) {
       val = '0' + val;
     }

package/src/inputs/FileInput/index.test.tsx

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

package/src/inputs/ImageInput/index.test.tsx

@@ -1,33 +1,32 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
 import { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
 import { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
 import { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
-import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All ImageInput variants', async ({ mount, page }) => {
   await mount(
-    <div>
-      <TestVariant title="Default">
-        <Default />
-      </TestVariant>
-      <TestVariant title="MaxSize">
-        <MaxSize />
-      </TestVariant>
-      <TestVariant title="WithInvalidImageDimension">
-        <WithInvalidImageDimension />
-      </TestVariant>
-      <TestVariant title="WithInvalidImageSize">
-        <WithInvalidImageSize />
-      </TestVariant>
-    </div>
-  );
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="MaxSize">
+      <MaxSize />
+    </TestVariant>
+    <TestVariant title="WithInvalidImageDimension">
+      <WithInvalidImageDimension />
+    </TestVariant>
+    <TestVariant title="WithInvalidImageSize">
+      <WithInvalidImageSize />
+    </TestVariant>
+  </div>
+  )
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({
-    fullPage: true,
-    animations: 'disabled',
-  });
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });
+  

package/src/inputs/Input/Input.stories.js

@@ -5,6 +5,7 @@ export default {
   displayName: 'Input',
 };
 export { String } from '@digigov/form/inputs/Input/__stories__/String';
+export { StringWithTrimValidation } from '@digigov/form/inputs/Input/__stories__/StringWithTrimValidation';
 export { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
 export { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
 export { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber';

package/src/inputs/Input/__stories__/StringWithTrimValidation.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+export const StringWithTrimValidation = () => (
+  <FormBuilder
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Field
+      key="business-title"
+      name="business-title"
+      type="string"
+      trim={true}
+      label={{
+        primary: 'Όνομα επιχείρησης',
+        secondary:
+          'Εισάγετε μια σειρά από χαρακτήρες και αριθμούς (το πειδίο δεν δέχεται κενά στην αρχή της πρότασης)',
+      }}
+      required
+    />
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default StringWithTrimValidation;

package/src/inputs/Input/__stories__/TextWithLimit.tsx

@@ -12,6 +12,7 @@ export const TextWithLimit = () => (
       key="text"
       name="text"
       type="text"
+      trim
       label={{
         primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;',
       }}