@digigov/form 2.0.0-0edebf87 → 2.0.0-13876dba

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

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const PhoneNumber = () => (
+export const PhoneNumber = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
@@ -12,6 +12,7 @@ export const PhoneNumber = () => (
       key="phone-number"
       name="phone-number"
       type="phone_number"
+      autoComplete="tel"
       label={{
         primary: 'Tηλέφωνο',
       }}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const PostalCode = () => (
+export const PostalCode = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
@@ -12,6 +12,7 @@ export const PostalCode = () => (
       key="postal-code"
       name="postal-code"
       type="postal_code"
+      autoComplete="postal-code"
       label={{
         primary: 'Ταχυδρομικός κωδικός',
       }}

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 = (_: any) => (
   <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__/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 = (_: any) => (
+  <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__/{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 = (_: any) => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);
@@ -12,6 +12,7 @@ export const TextWithCharacterLimit = () => (
       key="text"
       name="text"
       type="text"
+      trim
       label={{
         primary: 'Μπορείτε να δώσετε περισσότερες πληροφορίες;',
       }}
@@ -21,4 +22,4 @@ export const TextWithCharacterLimit = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
-export default TextWithCharacterLimit;
+export default TextWithLimit;

package/src/inputs/Input/doc.mdx

@@ -0,0 +1,56 @@
+---
+title: Input
+---
+ 
+# Input
+
+The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user; 
+a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
+
+## How to use
+
+### String
+
+<code src="@digigov/form/inputs/Input/__stories__/String.tsx" />
+
+### Boolean
+
+<code src="@digigov/form/inputs/Input/__stories__/Boolean.tsx" />
+
+### AFM
+
+<code src="@digigov/form/inputs/Input/__stories__/AFM.tsx" />
+
+
+### IBAN
+
+<code src="@digigov/form/inputs/Input/__stories__/IBAN.tsx" />
+
+
+### Integer
+
+<code src="@digigov/form/inputs/Input/__stories__/Integer.tsx" />
+
+
+### Landline number
+
+<code src="@digigov/form/inputs/Input/__stories__/LandlineNumber.tsx" />
+
+
+### Mobile phone 
+
+<code src="@digigov/form/inputs/Input/__stories__/MobilePhone.tsx" />
+
+
+### Phone number
+
+<code src="@digigov/form/inputs/Input/__stories__/PhoneNumber.tsx" />
+
+
+### Postal code 
+
+<code src="@digigov/form/inputs/Input/__stories__/PostalCode.tsx" />
+
+### Text with character limit 
+
+<code src="@digigov/form/inputs/Input/__stories__/TextWithLimit.tsx" />

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

@@ -0,0 +1,64 @@
+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 { StringWithTrimValidation } from '@digigov/form/inputs/Input/__stories__/StringWithTrimValidation';
+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="StringWithTrimValidation">
+      <StringWithTrimValidation />
+    </TestVariant>
+    <TestVariant title="TextWithLimit">
+      <TextWithLimit />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/inputs/Input/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { UncontrolledFieldProps } from '@digigov/form/Field/types';
-import { Hint } from '@digigov/react-core/Hint';
-import TextArea from '@digigov/react-core/TextArea';
-import TextInput from '@digigov/react-core/TextInput';
+import { TextArea } from '@digigov/ui/form/TextArea';
+import { TextInput } from '@digigov/ui/form/TextInput';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 const TYPES_MAP = {
   string: 'text',
@@ -40,6 +40,27 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
     const fieldType = TYPES_MAP[type || 'text'] || 'text';
     const { t } = useTranslation();
     const currentValue: string | '' = useWatch({ control, name });
+
+    const getRemainingChars = (currentValue, limit) => {
+      if (currentValue) {
+        return limit?.max - currentValue.length;
+      }
+      return limit?.max;
+    };
+
+    const constructRemainingText = (currentValue, limit) => {
+      const remainingChars = getRemainingChars(currentValue, limit);
+      let remainingText =
+        Math.abs(remainingChars) === 1
+          ? t('form.info.text.character')
+          : t('form.info.text.characters');
+      remainingText +=
+        remainingChars > 0
+          ? ` ${t('form.info.text.remaining')}.`
+          : ` ${t('form.info.text.too_many')}.`;
+      return remainingText;
+    };
+
     if (multiline === true) {
       return (
         <>
@@ -48,40 +69,23 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
             className={className}
             rows={rows}
             ref={ref}
+            id={name}
             {...{
               ...props,
               reset: undefined,
               required: undefined,
               type: fieldType,
+              Field: undefined,
             }}
           />
           {limit?.max && (
-            <Hint>
-              {currentValue === undefined ||
-              (currentValue?.length >= 0 &&
-                currentValue?.length <= limit?.max) ? (
-                <span>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>
-                    {!currentValue
-                      ? limit.max
-                      : limit?.max - currentValue?.length}
-                  </b>{' '}
-                  {currentValue && limit?.max - currentValue?.length === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.remaining')}.
-                </span>
-              ) : (
-                <span style={{ color: '#b60202' }}>
-                  {t('form.info.text.you_have')}{' '}
-                  <b>{currentValue && currentValue?.length - limit?.max}</b>{' '}
-                  {currentValue?.length - limit?.max === 1
-                    ? `${t('form.info.text.character')}`
-                    : `${t('form.info.text.characters')}`}{' '}
-                  {t('form.info.text.too_many')}.
-                </span>
-              )}
+            <Hint display={'flex'}>
+              {t('form.info.text.you_have')}
+              <Hint fontWeight="bold">
+                &nbsp;{`${Math.abs(getRemainingChars(currentValue, limit))}`}
+                &nbsp;
+              </Hint>
+              {constructRemainingText(currentValue, limit)}
             </Hint>
           )}
         </>
@@ -90,10 +94,17 @@ export const Input: React.ExoticComponent<InputProps> = React.forwardRef(
       return (
         <TextInput
           name={name}
+          id={name}
           type={fieldType}
+          data-type={type}
           className={className}
           ref={ref}
-          {...{ ...props, reset: undefined, required: undefined }}
+          {...{
+            ...props,
+            reset: undefined,
+            required: undefined,
+            Field: undefined,
+          }}
         />
       );
     }