@digigov/form 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/src/inputs/Input/inputsInputScenarios.ts

@@ -38,9 +38,8 @@ const INPUTS_INPUT_FIELDS = [
     type: 'int',
     required: true,
     label: {
-    primary: 'Ποιά είναι η ηλικία σας;',
-    secondary:
-        'Καταχωρίστε την ηλικία σας',
+      primary: 'Ποιά είναι η ηλικία σας;',
+      secondary: 'Καταχωρίστε την ηλικία σας',
     },
   },
   {
@@ -73,9 +72,9 @@ const INPUTS_INPUT_FIELDS = [
     },
     required: true,
     extra: {
-    countries: ['gr'],
+      countries: ['gr'],
       phoneType: 'mobile',
-    }
+    },
   },
   {
     key: 'phone-number',
@@ -86,7 +85,7 @@ const INPUTS_INPUT_FIELDS = [
     required: true,
     extra: {
       countries: ['gr'],
-    }
+    },
   },
   {
     key: 'phone-number-landline',
@@ -98,7 +97,7 @@ const INPUTS_INPUT_FIELDS = [
     extra: {
       countries: ['gr'],
       phoneType: 'landline',
-    }
+    },
   },
   {
     key: 'postal-code',
@@ -106,300 +105,300 @@ const INPUTS_INPUT_FIELDS = [
     label: {
       primary: 'Συμπληρώστε τον ταχυδρομικό σας κώδικα',
     },
-    extra:{ countries: ['GR'] },
+    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',
-    },
-    {
+  {
+    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'
-    },
-    {
+        value: '12.5',
+      },
+      {
         fieldKey: 'mobile-phone',
-        value: '+306900000000'
-    },
-    {
+        value: '+306900000000',
+      },
+      {
         fieldKey: 'phone-number',
-        value: '6900000000'
-    },
-    {
+        value: '6900000000',
+      },
+      {
         fieldKey: 'phone-number-landline',
-        value: '2100000000'
-    },
-    {
+        value: '2100000000',
+      },
+      {
         fieldKey: 'iban',
-        value: 'GR3201122267115323218375195'
-    },
-    {
+        value: 'GR3201122267115323218375195',
+      },
+      {
         fieldKey: 'uuid4',
         value: '1e805d00-ea67-478a-ab8b-d13ff8b38fa3',
-    }
-  ],
-  expect: [
-    {
+      },
+    ],
+    expect: [
+      {
         type: 'success',
         fieldKey: 'age',
         text: el.form.error.required,
-    },
-    {
-      type: 'success',
-      fieldKey: 'text',
-      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,
+    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,
+      },
+    ],
   },
   {
-      type: 'error',
-      fieldKey: 'uuid4',
-      text: el.form.error.uuid4,
+    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
+export default scenarios;

package/src/inputs/Label/doc.mdx

@@ -0,0 +1,14 @@
+---
+title: Label
+---
+ 
+# Label
+
+
+The Label component is used to display descriptive text for form sections or fields. It supports both primary and secondary text, allowing for a title and optional subtitle.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/Label/__stories__/Default.tsx" />

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

@@ -14,6 +14,10 @@ test('renders the All Label variants', async ({ mount, page }) => {
   )
   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/Label/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { FieldLabelProps } from '@digigov/form/types';
-import Hint from '@digigov/react-core/Hint';
-import LabelTitle from '@digigov/react-core/LabelTitle';
+import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
+import { Hint } from '@digigov/ui/typography/Hint';
 
 export interface FieldOptionProps {
   label?: FieldLabelProps;
@@ -16,9 +16,6 @@ export interface FieldOptionProps {
 export interface LabelProps {
   primary?: string;
   secondary?: string;
-}
-
-export interface LabelProps {
   className?: string;
   value?: string;
   label?: FieldLabelProps;
@@ -39,5 +36,4 @@ export const Label: React.FC<LabelProps> = ({ className, label, value }) => {
   );
 };
 
-
 export default Label;

package/src/inputs/OtpInput/{index.mdx → doc.mdx}

@@ -13,11 +13,4 @@ on a computer system or other digital device.
 
 ### Default
 
-<Story
-  packageName="@digigov/form"
-  component="inputs/OtpInput"
-  story="Default.tsx"
-/>
-
-
-
+<code src="@digigov/form/inputs/OtpInput/__stories__/Default.tsx" />

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

@@ -14,6 +14,10 @@ test('renders the All OtpInput variants', async ({ mount, page }) => {
   )
   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/OtpInput/index.tsx

@@ -40,7 +40,8 @@ export function useOtp(onChange, maxLength) {
   }, []);
 
   const focusToPrevInput = useCallback((target: HTMLElement) => {
-    const previousElement = target.previousElementSibling as HTMLInputElement | null;
+    const previousElement =
+      target.previousElementSibling as HTMLInputElement | null;
     if (previousElement) {
       previousElement.focus();
     }
@@ -130,6 +131,7 @@ export const OtpInput = ({ name, maxLength = 6, ...props }) => {
       {otp.otpValues.map((digit, idx) => (
         <SingleCharacterInputPart
           name={`${name}-${idx}`}
+          id={`${name}-${idx}`}
           type="text"
           key={idx}
           autoComplete="one-time-code"