@digigov/form 2.0.0-462194bf → 2.0.0-60d81ed8

package/src/Questions/index.mdx

@@ -87,11 +87,11 @@ const steps = [
     ],
   },
   {
-    name: 'bod',
+    name: 'dob',
     title: 'When is your birthday?',
     fields: [
       {
-        key: 'bod',
+        key: 'dob',
         label: {
           primary: 'Birthday',
         },
@@ -117,10 +117,10 @@ export default function Index() {
           <Field name="countries" />
         </StepForm>
       </Step>
-      <Step name="bod">
+      <Step name="dob">
         <StepTitle />
         <StepForm submitButton={true}>
-          <Field name="bod" />
+          <Field name="dob" />
         </StepForm>
       </Step>
     </Questions>

package/src/Questions/index.spec.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import { Field } from '@digigov/form';
 import { Step, StepForm, StepQuote, StepTitle } from '@digigov/form/Questions';
@@ -44,7 +44,7 @@ const steps = [
 
 it('renders the Questions', () => {
   expect(
-    mount(
+    render(
       <Questions
         name={'example'}
         onSubmit={(data): void => {
@@ -67,6 +67,6 @@ it('renders the Questions', () => {
           </StepForm>
         </Step>
       </Questions>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

package/src/Questions/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/Questions/__stories__/Default';
+
+test('renders the All Questions 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/Questions/types.tsx

@@ -13,6 +13,7 @@ export interface QuestionsInterface {
   initialData?: any;
   localDraft?: boolean;
   errorLabels?: Record<string, string>;
+  children?: React.ReactNode;
 }
 
 export interface QuestionsContextInterface {

package/src/index.ts

@@ -1,3 +1,6 @@
-export * from '@digigov/form/internal';
+export { default as Field } from '@digigov/form/Field';
+export { default as Fieldset } from '@digigov/form/Fieldset';
+export * from '@digigov/form/inputs/Label';
 import FormBuilder from '@digigov/form/FormBuilder';
+export * from '@digigov/form/types';
 export default FormBuilder;

package/src/inputs/AutoCompleteInput/AutoComplete.stories.js

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

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -20,7 +20,6 @@ const fields: FieldSpec[] = [
     type: 'choice:multiple',
     extra: {
       component: 'AutoComplete',
-      multiple: true,
       options: results.map((r) => {
         return {
           label: {

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

@@ -0,0 +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';
+
+test('renders the All AutoCompleteInput variants', async ({ mount, page }) => {
+  await mount(
+    
+  <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' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/inputs/AutoCompleteInput/index.tsx

@@ -5,6 +5,7 @@ import { Hint } from '@digigov/react-core/Hint';
 import UIAutoComplete, {
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
+import { Base } from '@digigov/react-core/Base';
 
 export interface AutoCompleteInputExtra
   extends Omit<
@@ -28,7 +29,8 @@ export interface AutoCompleteInputProps
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
-  extra: { options, multiple },
+  type,
+  extra: { options },
   onChange,
   value,
   error,
@@ -55,7 +57,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
 
   return (
     <UIAutoComplete
-      multiple={multiple}
+      multiple={type === 'choice:multiple' ? true : false}
       source={suggest}
       onConfirm={(value) => {
         if (Array.isArray(value)) {
@@ -68,10 +70,10 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
       templates={{
         suggestion({ label, value }) {
           return (
-            <div>
+            <Base as="div">
               {(label && label.primary && label.primary) || value}
               {label && label.secondary && <Hint>{label.secondary}</Hint>}
-            </div>
+            </Base>
           );
         },
         inputValue: (option) => {
@@ -86,6 +88,7 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
         reset: undefined,
         required: undefined,
       }}
+      name={name}
       id={`${name}-id`}
       defaultValue={value}
     />

package/src/inputs/Checkboxes/Checkboxes.stories.js

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

package/src/inputs/Checkboxes/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 { 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';
+
+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>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/inputs/Checkboxes/index.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
-import { Field } from '@digigov/form';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
 import CoreCheckboxes from '@digigov/react-core/Checkbox';
+import { CheckboxConditional } from '@digigov/react-core/CheckboxConditional';
 import CheckboxItem from '@digigov/react-core/CheckboxItem';
 import Hint from '@digigov/react-core/Hint';
 import { useTranslation } from '@digigov/ui/i18n';
@@ -15,6 +14,7 @@ export interface CheckboxesProps
     className?: string;
     options: Array<FieldOptionProps>;
   };
+  fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;
 }
 
 export const Checkboxes: React.FC<CheckboxesProps> = ({
@@ -23,31 +23,34 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   value,
   extra: { options, className },
   disabled,
+  Field,
   ...props
 }) => {
   if (!value) value = [];
-  const handleChange = (optionValue, idx, show) => (evt): void => {
-    let newValue;
-    if (evt.currentTarget.checked) {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      newValue = value.concat([optionValue]);
-    } else {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      newValue = value.filter((val) => val !== optionValue);
-    }
-    if (show && show.length > 0) {
-      setChecked((items) =>
-        items.map((item, index) => (index === idx ? !item : item))
-      );
-    }
+  const handleChange =
+    (optionValue, idx, show) =>
+      (evt): void => {
+        let newValue;
+        if (evt.currentTarget.checked) {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          newValue = value.concat([optionValue]);
+        } else {
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          newValue = value.filter((val) => val !== optionValue);
+        }
+        if (show && show.length > 0) {
+          setChecked((items) =>
+            items.map((item, index) => (index === idx ? !item : item))
+          );
+        }
 
-    // reset value to undefined instead of an empty array
-    // so the error state mechanism can throw validation errors
-    if (newValue.length === 0) newValue = undefined;
-    onChange(newValue);
-  };
+        // reset value to undefined instead of an empty array
+        // so the error state mechanism can throw validation errors
+        if (newValue.length === 0) newValue = undefined;
+        onChange(newValue);
+      };
   const { t } = useTranslation();
   const [checked, setChecked] = useState(
     Array<boolean>(options.length).fill(false)
@@ -69,7 +72,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
           <React.Fragment key={index}>
             <CheckboxItem
               key={`${name}.${index}`}
-              name={name}
+              name={`${name}.${v}`}
               value={v}
               disabled={disabled || optionDisabled}
               checked={value?.includes(v)}
@@ -89,7 +92,7 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
               {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
             </CheckboxItem>
 
-            {!!checked[index] && show && (
+            {!!checked[index] && show && Field && (
               <CheckboxConditional>
                 {show.map((fieldName) => (
                   <Field name={fieldName} key={fieldName} />

package/src/inputs/DateInput/DateInput.stories.js

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

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

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

package/src/inputs/DateInput/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/DateInput/__stories__/Default';
+
+test('renders the All DateInput 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/DateInput/index.tsx

@@ -110,7 +110,7 @@ export const DateInput = ({ name, type, ...props }) => {
         onBlur={(e) => date.setMonth(e, true)}
         value={date.month}
         width={2}
-        name={`${props.name}-month`}
+        name={`${name}-month`}
         maxLength="2"
         disabled={props.disabled}
         aria-required={props['aria-required']}
@@ -121,7 +121,7 @@ export const DateInput = ({ name, type, ...props }) => {
         onChange={date.setYear}
         value={date.year}
         width={4}
-        name={`${props.name}-year`}
+        name={`${name}-year`}
         maxLength="4"
         disabled={props.disabled}
         aria-required={props['aria-required']}

package/src/inputs/FileInput/FileInput.stories.js

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

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,7 @@ 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 { WithInvalidImageDimension } from '@digigov/form/inputs/ImageInput/__stories__/WithInvalidImageDimension';
+export { MaxSize } from '@digigov/form/inputs/ImageInput/__stories__/MaxSize';
+

package/src/inputs/ImageInput/__stories__/MaxSize.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import FormBuilder, { Field, Fieldset } from '@digigov/form';
+import { FieldSpec } from '@digigov/form/types';
+import { Button } from '@digigov/ui/form/Button';
+const FIELDS: FieldSpec[] = [
+  {
+    key: 'image',
+    type: 'image',
+    required: true,
+    label: {
+      primary: 'Ανέβασμα φωτογραφίας',
+      secondary: 'Μέγιστο μέγεθος φωτογραφίας: 10KB.',
+    },
+    extra: {
+      limit: {
+        maxSize: 1000,
+      },
+    }
+  },
+];
+
+export const MaxSize = () => (
+  <FormBuilder
+    fields={FIELDS}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+  >
+    <Fieldset>
+      {FIELDS.map((field) => (
+        <Field key={field.key} name={field.key}  />
+      ))}
+    </Fieldset>
+    <Button type="submit">Συνέχεια</Button>
+  </FormBuilder>
+);
+export default MaxSize;

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

@@ -0,0 +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';
+
+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>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/inputs/ImageInput/index.tsx

@@ -6,7 +6,7 @@ import CoreHint from '@digigov/react-core/Hint';
 import Button, { ButtonGroup } from '@digigov/ui/form/Button';
 import { useTranslation } from '@digigov/ui/i18n';
 import Paragraph from '@digigov/ui/typography/Paragraph';
-
+import { Base } from '@digigov/react-core/Base';
 export interface ImageProps {
   src?: any;
 }
@@ -20,7 +20,7 @@ export interface Limit {
 }
 
 export const Image: React.FC<ImageProps> = React.memo(function Image({ src }) {
-  return <img src={src} className="ds-image--ratio" />;
+  return <Base as='img' src={src} className="ds-image--ratio" />;
 });
 export interface ImageInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
   extra?: {
@@ -72,7 +72,7 @@ export const ImageInput: React.FC<ImageInputProps> = React.forwardRef(
           {selectedImage !== null ? (
             <>
               <Paragraph>
-                <b>{t('upload.image')}:</b> {`${selectedImage?.name}`}
+                <Base as='b'>{t('upload.image')}:</Base> {`${selectedImage?.name}`}
               </Paragraph>
             </>
           ) : (

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"
 />