@digigov/form 2.0.0-aefd0709 → 2.0.0-b15d5d44

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}
     >
@@ -128,7 +129,7 @@ export const ListObject: React.FC<ListObjectProps> = ({
 }) => {
   const currentName = `${name}.${index}`;
   return (
-    <Card variant={extra?.border && 'border'}>
+    <Card variant={extra?.border ? 'border' : 'divider'}>
       <CardHeading>
         {extra?.label.object.title} #{index + 1}
       </CardHeading>

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/AutoCompleteInput/index.tsx

@@ -90,6 +90,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
         ...props,
         reset: undefined,
         required: undefined,
+        Field: undefined,
       }}
       name={name}
       id={`${name}-id`}

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/Checkboxes/index.tsx

@@ -86,6 +86,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
                 defaultValue: undefined,
                 onBlur: undefined,
                 required: undefined,
+                Field: undefined,
                 'aria-describedby': undefined,
                 type: 'checkbox',
               }}

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/DateTimeInput/DateTimeInput.stories.js

@@ -0,0 +1,8 @@
+import { Default } from './__stories__/Default';
+
+export default {
+  title: 'Form/Inputs/DateTimeInput',
+  component: Default,
+};
+
+export { Default };

package/src/inputs/DateTimeInput/__stories__/Default.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FormBuilder, { Field } from '@digigov/form';
+import { Button } from '@digigov/ui/form/Button';
+
+const fields = [
+  {
+    key: 'datetime-example',
+    type: 'datetime',
+    required: true,
+    label: {
+      primary: 'Πότε εκδόθηκε το διαβατήριο σας;',
+      secondary: 'Για παράδειγμα, 05 11 2020',
+    },
+  } as const,
+];
+
+export const Default = () => (
+  <FormBuilder onSubmit={() => console.log('kati')}>
+    {fields.map(({ key, ...field }) => {
+      return <Field {...field} name={key} key={key} />;
+    })}
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default Default;

package/src/inputs/DateTimeInput/doc.mdx

@@ -0,0 +1,16 @@
+---
+title: DateTime Input
+---
+ 
+# DateTime input
+
+
+
+Input element of type `datetime` create input fields that let the user enter a date and time, 
+either with a textbox that validates the input or a special date picker interface.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/DateTimeInput/__stories__/Default.tsx" />

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

@@ -0,0 +1,18 @@
+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/DateTimeInput/__stories__/Default';
+
+test('renders the All DateTimeInput variants', async ({ mount, page }) => {
+  await mount(
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});