@digigov/form 1.1.3 → 1.1.4-mobile

package/src/inputs/Radio/index.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
-import { Field } from '@digigov/form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { RadioConditional } from '@digigov/react-core';
+import { RadioConditional } from '@digigov/react-core/RadioConditional';
 import Hint from '@digigov/react-core/Hint';
 import RadioContainer from '@digigov/react-core/RadioContainer';
 import RadioItem from '@digigov/react-core/RadioItem';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Base } from '@digigov/react-core/Base';
 
 export interface RadioButtonsGroupProps
   extends Omit<UncontrolledFieldProps, 'extra'> {
@@ -24,12 +24,13 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
   register,
   extra: { options, className },
   disabled,
+  Field,
   ...props
 }) => {
   const currentValue: string | undefined = useWatch({ control, name });
   const { t } = useTranslation();
   return (
-    <RadioContainer className={className} defaultValue={currentValue} id={name}>
+    <RadioContainer className={className} id={name}>
       {options.map(
         ({
           label,
@@ -39,9 +40,10 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
           selected,
           ...option
         }) => (
-          <div key={`${name}.${v}`}>
+          <Base as="div" key={`${name}.${v}`}>
             <RadioItem
               {...register(name)}
+              id={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               {...option}
@@ -49,11 +51,12 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
                 ...props,
                 reset: undefined,
                 required: undefined,
+                error: undefined,
                 'aria-describedby': undefined,
                 type: 'radio',
               }}
             >
-              {(label && label.primary && t(label.primary)) || v}
+              {(label && label.primary && <Base as="span">{t(label.primary) || v}</Base>)}
               {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
             </RadioItem>
             {selected && selected()}
@@ -64,7 +67,63 @@ export const RadioButtonsGroup: React.FC<RadioButtonsGroupProps> = ({
                 ))}
               </RadioConditional>
             )}
-          </div>
+          </Base>
+        )
+      )}
+    </RadioContainer>
+  );
+};
+export const ControlledRadioButtonsGroup: React.FC<RadioButtonsGroupProps & {onChange: (e:any)=>void; value: any}> = ({
+  name,
+  extra: { options, className },
+  disabled,
+  onChange,
+  value,
+  Field,
+  ...props
+}) => {
+  const currentValue: string | undefined = value;
+  const { t } = useTranslation();
+  return (
+    <RadioContainer className={className} id={name}>
+      {options.map(
+        ({
+          label,
+          value: v,
+          show,
+          disabled: optionDisabled,
+          selected,
+          ...option
+        }) => (
+          <Base as="div" key={`${name}.${v}`}>
+            <RadioItem
+              onChange={(e)=>{console.log(e);onChange(e)}}
+              id={`${name}.${v}`}
+              value={v}
+              checked={currentValue === v}
+              disabled={disabled || optionDisabled}
+              {...option}
+              {...{
+                ...props,
+                reset: undefined,
+                required: undefined,
+                error: undefined,
+                'aria-describedby': undefined,
+                type: 'radio',
+              }}
+            >
+              {(label && label.primary && <Base as="span">{t(label.primary) || v}</Base>)}
+              {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            </RadioItem>
+            {selected && selected()}
+            {currentValue === v && show && (
+              <RadioConditional>
+                {show.map((fieldName) => (
+                  <Field name={fieldName} key={fieldName} />
+                ))}
+              </RadioConditional>
+            )}
+          </Base>
         )
       )}
     </RadioContainer>

package/src/inputs/Select/Select.stories.js

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

package/src/inputs/Select/index.mdx

@@ -0,0 +1,17 @@
+---
+title: Select
+---
+ 
+# Select
+
+The select element represents a control that provides a menu of options.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Select"
+  story="Default.tsx"
+/>

package/src/inputs/Select/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/Select/__stories__/Default';
+
+test('renders the All Select 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/inputsScenarios.ts

@@ -0,0 +1,503 @@
+import el from '@digigov/form/locales/el';
+
+export const INPUTS_FIELDS = [
+    {
+      key: 'date-example',
+      type: 'date',
+      required: true,
+      label: {
+        primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+        secondary:
+          'Για παράδειγμα, 05 11 2020',
+      },
+    },
+    {
+      key: 'otp',
+      type: 'otp',
+      maxLength: 6,
+      label: {
+        primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
+      },
+      required: true,
+    },
+    {
+      key: 'checkbox',
+      type: 'choice:multiple',
+      required: true,
+      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+      extra: {
+        options: [
+          {
+            label: { primary: 'Έχω συνάχι' },
+            value: 'runny-nose',
+          },
+          {
+            label: { primary: 'Έχω πυρετό' },
+            value: 'fever',
+          },
+          {
+            label: { primary: 'Αισθάνομαι κούραση' },
+            value: 'fatigue',
+          },
+        ],
+      }
+    },
+    {
+      key: 'autocomplete_multiple',
+      required: true,
+      type: 'choice:multiple',
+      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+      extra: {
+        component: 'AutoComplete',
+        multiple: true,
+        options: [
+          {
+            label: { primary: 'Έχω συνάχι' },
+            value: 'runny-nose',
+          },
+          {
+            label: { primary: 'Έχω πυρετό' },
+            value: 'fever',
+          },
+          {
+            label: { primary: 'Αισθάνομαι κούραση' },
+            value: 'fatigue',
+          },
+        ],
+      },
+    },
+    {
+      key: 'radio',
+      type: 'choice:single',
+      required: true,
+      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+      extra: {
+        options: [
+          {
+            label: { primary: 'Έχω συνάχι' },
+            value: 'runny-nose',
+          },
+          {
+            label: { primary: 'Έχω πυρετό' },
+            value: 'fever',
+          },
+          {
+            label: { primary: 'Αισθάνομαι κούραση' },
+            value: 'fatigue',
+          },
+        ],
+      }
+    },
+    {
+      key: 'select',
+      type: 'choice:single',
+      required: true,
+      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+      extra: {
+        component: 'Select',
+        options: [
+          {
+            label: { primary: '' },
+            value: '',
+          },
+          {
+            label: { primary: 'Έχω συνάχι' },
+            value: 'runny-nose',
+          },
+          {
+            label: { primary: 'Έχω πυρετό' },
+            value: 'fever',
+          },
+          {
+            label: { primary: 'Αισθάνομαι κούραση' },
+            value: 'fatigue',
+          },
+        ],
+      }
+    },
+    {
+      key: 'autocomplete_single',
+      required: true,
+      type: 'choice:single',
+      label: { primary: 'Πώς αισθάνεστε αυτή τη στιγμή;' },
+      extra: {
+        component: 'AutoComplete',
+        options: [
+          {
+            label: { primary: 'Έχω συνάχι' },
+            value: 'runny-nose',
+          },
+          {
+            label: { primary: 'Έχω πυρετό' },
+            value: 'fever',
+          },
+          {
+            label: { primary: 'Αισθάνομαι κούραση' },
+            value: 'fatigue',
+          },
+        ],
+      },
+    },
+    {
+      key: 'image',
+      type: 'image',
+      required: true,
+      label: {
+        primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+      },
+    },
+    {
+      key: 'file',
+      type: 'file',
+      label: {
+        primary: 'Ανεβάστε το αρχείο της απόδειξης',
+      },
+      required: true,
+    },
+  ]
+
+export const scenarios = [
+  {
+    title: 'success fill for inputs',
+    describe: 'inputs scenario',
+    fields: INPUTS_FIELDS,
+    fill: [
+      {
+        fieldKey: 'date-example',
+        value: {
+          day: '22',
+          month: '11',
+          year: '2020'
+        },
+      },
+      {
+        fieldKey: 'otp',
+        value: {
+          '0': '4',
+          '1': '4',
+          '2': '4',
+          '3': '4',
+          '4': '4',
+          '5': '4',
+        }
+      },
+      {
+        fieldKey: 'checkbox',
+        value: [
+          'fever', 'fatigue'
+        ]
+      },
+      {
+        fieldKey: 'autocomplete_multiple',
+        value: [
+          'fever', 'fatigue'
+        ]
+      },
+      {
+        fieldKey: 'radio',
+        value: 'fever'
+      },
+      {
+        fieldKey: 'select',
+        value: 'fatigue'
+      },
+      {
+        fieldKey: 'autocomplete_single',
+        value: 'fatigue'
+      },
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          width: 500,
+          height: 500,
+          size: 3
+        }
+      },
+      {
+        fieldKey: 'file',
+        value: {
+          fileName: 'file.txt',
+          size: 200
+        }
+      },
+    ],
+    expect: [
+      {
+        type: 'success',
+        fieldKey: 'date-example',
+        text: el.form.error.date.invalid,
+      },
+      {
+        type: 'success',
+        fieldKey: 'otp',
+        args: {
+          'maxLength': 6
+        },
+        text: el.form.error.otp.less_than,
+      },
+      {
+        type: 'success',
+        fieldKey: 'checkbox',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'autocomplete_multiple',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'radio',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'select',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'autocomplete_single',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'image',
+        text: el.form.error.required,
+      },
+      {
+        type: 'success',
+        fieldKey: 'file',
+        text: el.form.error.required,
+      },
+    ]
+  },
+  {
+    title: 'empty fill for inputs',
+    describe: 'inputs scenario',
+    fields: INPUTS_FIELDS,
+    fill: [],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'date-example',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'otp',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'checkbox',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'autocomplete_multiple',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'radio',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'select',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'autocomplete_single',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'image',
+        text: el.form.error.required,
+      },
+      {
+        type: 'error',
+        fieldKey: 'file',
+        text: el.form.error.required,
+      },
+    ]
+  },
+  {
+    title: 'incorrect types for DateInput and OtpInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'date-example',
+        type: 'date',
+        required: true,
+        label: {
+          primary: 'Ποιά είναι η ημερομηνία γέννησής σας;',
+          secondary:
+            'Για παράδειγμα, 05 11 2020',
+        },
+      },
+      {
+        key: 'otp',
+        type: 'otp',
+        maxLength: 6,
+        label: {
+          primary: 'Συμπληρώστε τον κωδικό επιβεβαίωσης',
+        },
+        required: true,
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'date-example',
+        value: {
+          day: 'a2',
+          month: '11',
+          year: '2020'
+        },
+      },
+      {
+        fieldKey: 'otp',
+        value: {
+          '0': 'a',
+          '1': '4',
+          '2': '4',
+          '3': '4',
+          '4': '4',
+          '5': '4',
+        }
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'date-example',
+        text: el.form.error.date.invalid,
+      },
+      {
+        type: 'error',
+        fieldKey: 'otp',
+        args: {
+          'maxLength': 6
+        },
+        text: el.form.error.otp.less_than,
+      },
+    ]
+  },
+  {
+    title: 'wrong sizes for ImageInput and FileInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'image',
+        type: 'image',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+        },
+        extra: {
+          limit: {
+            maxSize: 300,
+          },
+        },
+      },
+      {
+        key: 'file',
+        type: 'file',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε το αρχείο της απόδειξης',
+        },
+        extra: {
+          limit: {
+            maxSize: 300,
+          },
+        },
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          size: 300
+        }
+      },
+      {
+        fieldKey: 'file',
+        value: {
+          fileName: 'file.txt',
+          size: 200
+        }
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'image',
+        args: {
+          maxSizeToMb: 0.0003
+        },
+        text: el.form.error.file_size,
+      },
+      {
+        type: 'error',
+        fieldKey: 'file',
+        args: {
+          maxSizeToMb: 0.0003
+        },
+        text: el.form.error.file_size,
+      },
+    ]
+  },
+  {
+    title: 'wrong dimensions for ImageInput',
+    describe: 'inputs scenario',
+    fields: [
+      {
+        key: 'image',
+        type: 'image',
+        required: true,
+        label: {
+          primary: 'Ανεβάστε τη φωτογραφία του προστίμου',
+        },
+        extra: {
+          limit: {
+            maxHeight: 400,
+            maxWidth: 400,
+            minHeight: 100,
+            minWidth: 100,
+          },
+        },
+      },
+    ],
+    fill: [
+      {
+        fieldKey: 'image',
+        value: {
+          fileName: 'green_image.png',
+          width: 500,
+          height: 500
+        }
+      },
+    ],
+    expect: [
+      {
+        type: 'error',
+        fieldKey: 'image',
+        args: {
+          minWidth: 100,
+          minHeight: 100,
+          maxWidth: 400,
+          maxHeight: 400,
+        },
+        text: el.form.error.image.image_dimension_size,
+      },
+    ]
+  },
+]
+
+export default scenarios;