@digigov/form 1.2.0-dcbd7ded → 2.0.0-2445d5cb

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.mdx

@@ -0,0 +1,23 @@
+---
+title: Date Input
+---
+ 
+# Date input
+
+
+
+Input element of type `date` create input fields that let the user enter a date, 
+either with a textbox that validates the input or a special date picker interface.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/DateInput"
+  story="Default.tsx"
+/>
+
+
+

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

@@ -78,7 +78,7 @@ const DatePart = ({ label, ...props }) => {
   return <CoreDateInputItem {...props}>{label}</CoreDateInputItem>;
 };
 
-export const DateInput = function DateInput({ name, type, ...props }) {
+export const DateInput = ({ name, type, ...props }) => {
   const { t } = useTranslation();
   const [initial] = useState(props.value);
   const value = useMemo(() => {
@@ -110,7 +110,7 @@ export const DateInput = function 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 = function 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.mdx

@@ -0,0 +1,19 @@
+---
+title: File Input
+---
+ 
+# File input
+
+
+
+Input element of type `file` let the user choose one or more files from their device storage.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/FileInput"
+  story="Default.tsx"
+/>

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.mdx

@@ -0,0 +1,19 @@
+---
+title: Image Input
+---
+ 
+# Image input
+
+
+
+Input element of type `image` defines an image as a submit button, i.e. submit buttons that take the form of an image rather than text.
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/ImageInput"
+  story="Default.tsx"
+/>

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

@@ -1,8 +1,95 @@
 ---
 title: Input
-parent: docs/ui/components
 ---
+ 
+# 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
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="String.tsx"
+/>
+
+### Boolean
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Boolean.tsx"
+/>
+### AFM
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="AFM.tsx"
+/>
+
+### IBAN
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="IBAN.tsx"
+/>
+
+### Integer
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="Integer.tsx"
+/>
+
+### Landline number
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="LandlineNumber.tsx"
+/>
+
+### Mobile phone 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="MobilePhone.tsx"
+/>
+
+### Phone number
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="PhoneNumber.tsx"
+/>
+
+### Postal code 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="PostalCode.tsx"
+/>
+
+### Text with character limit 
+
+<Story
+  packageName="@digigov/form"
+  component="inputs/Input"
+  story="TextWithLimit.tsx"
+/>
+
+
 
-## Example
 
-<Input type="text" />

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();
+});
+