@digigov/form 2.0.0-7d9a8d86 → 2.0.0-85c27c19

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

@@ -0,0 +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';
+
+test('renders the All FileInput 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();
+});
+  

package/src/inputs/ImageInput/ImageInput.stories.js

@@ -4,6 +4,6 @@ export default {
   component: ImageInput,
   displayName: 'ImageInput',
 };
-export * from '@digigov/form/inputs/ImageInput/__stories__/Default';
-export * from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
-export * from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { Default } from '@digigov/form/inputs/ImageInput/__stories__/Default';
+export { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
+export { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';

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

@@ -0,0 +1,28 @@
+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 { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+import { WithInvalidImageSize } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageSize';
+
+test('renders the All ImageInput variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </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' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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

@@ -4,13 +4,13 @@ export default {
   component: Input,
   displayName: 'Input',
 };
-export * from '@digigov/form/inputs/Input/__stories__/Default';
-export * from '@digigov/form/inputs/Input/__stories__/Integer';
-export * from '@digigov/form/inputs/Input/__stories__/Boolean';
-export * from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
-export * from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
-export * from '@digigov/form/inputs/Input/__stories__/MobilePhone';
-export * from '@digigov/form/inputs/Input/__stories__/AFM';
-export * from '@digigov/form/inputs/Input/__stories__/IBAN';
-export * from '@digigov/form/inputs/Input/__stories__/PostalCode';
-export * from '@digigov/form/inputs/Input/__stories__/TextWithCharacterLimit';
+export { String } from '@digigov/form/inputs/Input/__stories__/String';
+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';
+export { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
+export { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone';
+export { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
+export { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
+export { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
+export { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';

package/src/inputs/Input/__stories__/{Default.tsx → String.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = () => (
+export const String = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
@@ -21,4 +21,4 @@ export const Default = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
-export default Default;
+export default String;

package/src/inputs/Input/__stories__/{TextWithCharacterLimit.tsx → TextWithLimit.tsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form';
 
-export const TextWithCharacterLimit = () => (
+export const TextWithLimit = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
@@ -21,4 +21,4 @@ export const TextWithCharacterLimit = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
-export default TextWithCharacterLimit;
+export default TextWithLimit;

package/src/inputs/Input/index.mdx

@@ -11,12 +11,12 @@ a wide variety of types of input data and control widgets are available, dependi
 
 ## How to use
 
-### Default
+### String
 
 <Story
   packageName="@digigov/form"
   component="inputs/Input"
-  story="Default.tsx"
+  story="String.tsx"
 />
 
 ### Boolean
@@ -47,7 +47,7 @@ a wide variety of types of input data and control widgets are available, dependi
 <Story
   packageName="@digigov/form"
   component="inputs/Input"
-  story="Default.tsx"
+  story="Integer.tsx"
 />
 
 ### Landline number
@@ -87,7 +87,7 @@ a wide variety of types of input data and control widgets are available, dependi
 <Story
   packageName="@digigov/form"
   component="inputs/Input"
-  story="TextWithCharacterLimit.tsx"
+  story="TextWithLimit.tsx"
 />
 
 

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { AFM } from '@digigov/form/inputs/Input/__stories__/AFM';
+import { Boolean } from '@digigov/form/inputs/Input/__stories__/Boolean';
+import { IBAN } from '@digigov/form/inputs/Input/__stories__/IBAN';
+import { Integer } from '@digigov/form/inputs/Input/__stories__/Integer';
+import { LandlineNumber } from '@digigov/form/inputs/Input/__stories__/LandlineNumber';
+import { MobilePhone } from '@digigov/form/inputs/Input/__stories__/MobilePhone';
+import { PhoneNumber } from '@digigov/form/inputs/Input/__stories__/PhoneNumber';
+import { PostalCode } from '@digigov/form/inputs/Input/__stories__/PostalCode';
+import { String } from '@digigov/form/inputs/Input/__stories__/String';
+import { TextWithLimit } from '@digigov/form/inputs/Input/__stories__/TextWithLimit';
+
+test('renders the All Input variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="AFM">
+      <AFM />
+    </TestVariant>
+    <TestVariant title="Boolean">
+      <Boolean />
+    </TestVariant>
+    <TestVariant title="IBAN">
+      <IBAN />
+    </TestVariant>
+    <TestVariant title="Integer">
+      <Integer />
+    </TestVariant>
+    <TestVariant title="LandlineNumber">
+      <LandlineNumber />
+    </TestVariant>
+    <TestVariant title="MobilePhone">
+      <MobilePhone />
+    </TestVariant>
+    <TestVariant title="PhoneNumber">
+      <PhoneNumber />
+    </TestVariant>
+    <TestVariant title="PostalCode">
+      <PostalCode />
+    </TestVariant>
+    <TestVariant title="String">
+      <String />
+    </TestVariant>
+    <TestVariant title="TextWithLimit">
+      <TextWithLimit />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/inputs/Input/inputsInputScenarios.ts

@@ -0,0 +1,405 @@
+import el from '@digigov/form/locales/el';
+
+const INPUTS_INPUT_FIELDS = [
+  {
+    key: 'location',
+    type: 'string',
+    label: {
+      primary: 'Συμπληρώστε τον τόπο κατοικίας σας',
+    },
+    required: true,
+  },
+  {
+    key: 'text',
+    type: 'text',
+    required: true,
+    label: {
+      primary: 'Συμπληρώστε το αίτημά σας',
+    },
+  },
+  {
+    key: 'email',
+    type: 'email',
+    label: {
+      primary: 'Διεύθυνση ηλεκτρονικού ταχυδρομείου (email)',
+    },
+    required: true,
+  },
+  {
+    key: 'desired-mount',
+    type: 'number',
+    label: {
+      primary: 'Συμπληρώστε το ποσό που σας ενδιαφέρει',
+    },
+    required: true,
+  },
+  {
+    key: 'age',
+    type: 'int',
+    required: true,
+    label: {
+    primary: 'Ποιά είναι η ηλικία σας;',
+    secondary:
+        'Καταχωρίστε την ηλικία σας',
+    },
+  },
+  {
+    key: 'afm',
+    type: 'afm',
+    required: true,
+    label: { primary: 'ΑΦΜ' },
+  },
+  {
+    key: 'iban',
+    type: 'iban',
+    label: {
+      primary: 'Συμπληρώστε το αριθμό του τραπεζικού σας λογαριασμού',
+    },
+    required: true,
+  },
+  {
+    key: 'uuid4',
+    type: 'uuid4',
+    label: {
+      primary: 'Συμπληρώστε το uuid4',
+    },
+    required: true,
+  },
+  {
+    key: 'mobile-phone',
+    type: 'mobile_phone',
+    label: {
+      primary: 'Συμπληρώστε το κινητό σας τηλέφωνο',
+    },
+    required: true,
+    extra: {
+    countries: ['gr'],
+      phoneType: 'mobile',
+    }
+  },
+  {
+    key: 'phone-number',
+    type: 'phone_number',
+    label: {
+      primary: 'Συμπληρώστε το τηλέφωνό σας',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+    }
+  },
+  {
+    key: 'phone-number-landline',
+    type: 'phone_number',
+    label: {
+      primary: 'Συμπληρώστε το σταθερό σας τηλέφωνό',
+    },
+    required: true,
+    extra: {
+      countries: ['gr'],
+      phoneType: 'landline',
+    }
+  },
+  {
+    key: 'postal-code',
+    type: 'postal_code',
+    label: {
+      primary: 'Συμπληρώστε τον ταχυδρομικό σας κώδικα',
+    },
+    extra:{ countries: ['GR'] },
+    required: true,
+  },
+]
+  
+export const scenarios = [
+{
+  title: 'success fill for inputs Input',
+  describe: 'inputs Input scenario',
+  fields: INPUTS_INPUT_FIELDS,
+  fill: [
+    {
+      fieldKey: 'text',
+      value: 'aaaaaaa',
+    },
+    {
+        fieldKey: 'age',
+        value: '12',
+    },
+    {
+        fieldKey: 'email',
+        value: 'example@mail.com',
+    },
+    {
+        fieldKey: 'location',
+        value: 'Location1',
+    },
+    {
+        fieldKey: 'postal-code',
+        value: '42100',
+    },
+    {
+        fieldKey: 'afm',
+        value: '094536469',
+    },
+    {
+        fieldKey: 'desired-mount',
+        value: '12.5'
+    },
+    {
+        fieldKey: 'mobile-phone',
+        value: '+306900000000'
+    },
+    {
+        fieldKey: 'phone-number',
+        value: '6900000000'
+    },
+    {
+        fieldKey: 'phone-number-landline',
+        value: '2100000000'
+    },
+    {
+        fieldKey: 'iban',
+        value: 'GR3201122267115323218375195'
+    },
+    {
+        fieldKey: 'uuid4',
+        value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',
+    }
+  ],
+  expect: [
+    {
+        type: 'success',
+        fieldKey: 'age',
+        text: el.form.error.required,
+    },
+    {
+      type: 'success',
+      fieldKey: 'text',
+      text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'email',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'location',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'postal-code',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'afm',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'desired-mount',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'mobile-phone',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'phone-number',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'phone-number-landline',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'iban',
+        text: el.form.error.required,
+    },
+    {
+        type: 'success',
+        fieldKey: 'uuid4',
+        text: el.form.error.required,
+    },
+  ]
+},
+{
+  title: 'empty fill for inputs Input',
+  describe: 'inputs Input scenario',
+  fields: INPUTS_INPUT_FIELDS,
+  fill: [],
+  expect: [
+  {
+      type: 'error',
+      fieldKey: 'age',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'email',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'location',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'postal-code',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'afm',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'desired-mount',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'mobile-phone',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'phone-number',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'phone-number-landline',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'iban',
+      text: el.form.error.required,
+  },
+  {
+      type: 'error',
+      fieldKey: 'uuid4',
+      text: el.form.error.required,
+  },
+  ]
+},
+{
+  title: 'incorrect types for inputs Input',
+  describe: 'inputs Input scenario',
+  fields: INPUTS_INPUT_FIELDS,
+  fill: [
+  {
+      fieldKey: 'age',
+      value: 'aa',
+  },
+  {
+      fieldKey: 'email',
+      value: '23232',
+  },
+  {
+      fieldKey: 'location',
+      value: '23232',
+  },
+  {
+      fieldKey: 'postal-code',
+      value: 'aaaaa',
+  },
+  {
+      fieldKey: 'afm',
+      value: 'aaaaaaaaa',
+  },
+  {
+      fieldKey: 'desired-mount',
+      value: 'aaa'
+  },
+  {
+      fieldKey: 'mobile-phone',
+      value: '+33690000000'
+  },
+  {
+      fieldKey: 'phone-number',
+      value: '000000000'
+  },
+  {
+      fieldKey: 'phone-number-landline',
+      value: '000000000'
+  },
+  {
+      fieldKey: 'iban',
+      value: 'aaaaaa'
+  },
+  {
+      fieldKey: 'uuid4',
+      value: 'aaaaaa',
+  }
+  ],
+  expect: [
+  {
+      type: 'error',
+      fieldKey: 'age',
+      text: el.form.error.number,
+  },
+  {
+      type: 'error',
+      fieldKey: 'email',
+      text: el.form.error.email,
+  },
+  {
+      type: 'success',
+      fieldKey: 'location',
+      text: el.form.error.string,
+  },
+  {
+      type: 'error',
+      fieldKey: 'postal-code',
+      text: el.form.error.postalCode,
+  },
+  {
+      type: 'error',
+      fieldKey: 'afm',
+      text: el.form.error.afm,
+  },
+  {
+      type: 'error',
+      fieldKey: 'desired-mount',
+      text: el.form.error.number,
+  },
+  {
+      type: 'error',
+      fieldKey: 'mobile-phone',
+      text: el.form.error.mobile_phone,
+  },
+  {
+      type: 'error',
+      fieldKey: 'phone-number',
+      text: el.form.error.phone_number,
+  },
+  {
+      type: 'error',
+      fieldKey: 'phone-number-landline',
+      text: el.form.error.landline,
+  },
+  {
+      type: 'error',
+      fieldKey: 'iban',
+      text: el.form.error.iban,
+  },
+  {
+      type: 'error',
+      fieldKey: 'uuid4',
+      text: el.form.error.uuid4,
+  },
+  ]
+},
+]
+
+export default scenarios

package/src/inputs/Label/Label.stories.js

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

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

@@ -1,5 +1,7 @@
 import React from 'react';
-import FormBuilder, { Field, Label } from '@digigov/form';
+import FormBuilder from '@digigov/form';
+import Field from '@digigov/form/Field';
+import Label from '@digigov/form/inputs/Label';
 import { Button } from '@digigov/ui/form/Button';
 
 export const Default = () => (

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

@@ -0,0 +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/Label/__stories__/Default';
+
+test('renders the All Label 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();
+});
+  

package/src/inputs/Label/index.tsx

@@ -9,7 +9,7 @@ export interface FieldOptionProps {
   value: string;
   show?: string[];
   disabled?: boolean;
-  selected?: () => React.FC;
+  selected?: () => React.ReactNode;
   divider?: string;
 }
 
@@ -39,8 +39,5 @@ export const Label: React.FC<LabelProps> = ({ className, label, value }) => {
   );
 };
 
-Label.defaultProps = {
-  label: {},
-};
 
 export default Label;

package/src/inputs/OtpInput/OtpInput.stories.js

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

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

@@ -0,0 +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/OtpInput/__stories__/Default';
+
+test('renders the All OtpInput 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();
+});
+