@digigov/form 1.2.0-dcbd7ded → 2.0.0-0c4be34e

package/src/Questions/{index.mdx → doc.mdx}

@@ -14,14 +14,11 @@ import {
   TableDataCell,
 } from '@digigov/react-core';
 
-import LeadText from '@site/src/components/LeadText';
 
-<LeadText>
-  Question pages are used to ask users meaningful questions needed by your
-  GOV.GR service, or even gather data about their persona or their application
-  status. Use step questions to make bigger forms less scary and easier to fill
-  out.
-</LeadText>
+Question pages are used to ask users meaningful questions needed by your
+GOV.GR service, or even gather data about their persona or their application
+status. Use step questions to make bigger forms less scary and easier to fill
+out.
 
 ## Introduction to Question pages
 
@@ -41,7 +38,7 @@ Even if users struggle through to the end of a form and answer honestly, if it
 more work than they expected, they’ll be annoyed about it. That's the exact
 opposite of our goals of making concise, easy-to-use services.
 
-```jsx live
+```jsx
 import React from 'react';
 import Questions, { Step, StepForm, StepTitle } from '@digigov/form/Questions';
 import { Field } from '@digigov/form';
@@ -87,11 +84,11 @@ const steps = [
     ],
   },
   {
-    name: 'bod',
+    name: 'dob',
     title: 'When is your birthday?',
     fields: [
       {
-        key: 'bod',
+        key: 'dob',
         label: {
           primary: 'Birthday',
         },
@@ -117,10 +114,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>
@@ -159,7 +156,7 @@ its subsequent subcomponents that you customise as needed, like the step title,
 description or form. You can also add components that are not form-specific,
 adding paragraphs or other custom components.
 
-```jsx
+```jsx pure
 <Questions name="example" steps={steps} onSubmit={(data) => doSomething(data)}>
   {/* more steps could be rendered here ... */}
   <Step name="age">
@@ -184,7 +181,7 @@ object. The most basic properties are the following:
 - `fields` - an array that describes each input field that will be rendered in
   the `StepForm`. Each fields implements the `FieldSpec` interface as a JSON object.
 
-```json title="step-name.json"
+```json pure title="step-name.json"
 {
   "name": "name",
   "title": "What is your name?",
@@ -209,7 +206,7 @@ basic branching between each step. The `nextStep` property will need to be a
 function that will take the form state as an argument and will return the key of
 the next `step`.
 
-```json title="next-step.json"
+```json pure title="next-step.json"
 const steps = [
   {
     name: 'age',
@@ -263,7 +260,7 @@ For example, you may use a form to determine if citizens are adults or not, and
 we want to ask users different questions according to their persona. We can use
 a branch between the `age` step and the other two steps.
 
-```jsx live
+```jsx
 import React from 'react';
 import GovGRFooter from '@digigov/ui/govgr/Footer';
 import Header from '@digigov/ui/app/Header';

package/src/Questions/index.spec.tsx

@@ -1,9 +1,13 @@
 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';
-import Questions from '@digigov/form/Questions';
+import Questions, {
+  Step,
+  StepForm,
+  StepQuote,
+  StepTitle,
+} from '@digigov/form/Questions';
 
 const steps = [
   {
@@ -44,7 +48,7 @@ const steps = [
 
 it('renders the Questions', () => {
   expect(
-    mount(
+    render(
       <Questions
         name={'example'}
         onSubmit={(data): void => {
@@ -67,6 +71,6 @@ it('renders the Questions', () => {
           </StepForm>
         </Step>
       </Questions>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

package/src/Questions/index.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Default } from '@digigov/form/Questions/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+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/create-simple-form.mdx

@@ -4,12 +4,8 @@ title: Create a simple Digigov Form
 sidebar_label: Creating simple forms
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  This guide walks through building a simple form page, complete with validation
-  and data serialisation.
-</LeadText>
+This guide walks through building a simple form page, complete with validation
+and data serialisation.
 
 ## What we are building
 

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

@@ -4,14 +4,10 @@ title: Digigov Form
 sidebar_label: Introduction to Digigov Form
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  Digigov Form is an off-the-shelf solution for managing web forms using
-  Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
-  This page will guide you through everything you need to create accessible and
-  dynamic forms that can handle all sorts of user inputs.
-</LeadText>
+Digigov Form is an off-the-shelf solution for managing web forms using
+Reactjs. It supports flexible and multi-step forms and easy-to-use validation.
+This page will guide you through everything you need to create accessible and
+dynamic forms that can handle all sorts of user inputs.
 
 <img
   src="/img/form.svg"

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,4 +4,5 @@ export default {
   component: AutoComplete,
   displayName: 'AutoCompleteInput',
 };
-export * from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';
+export { Default } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';
+export { Multiple } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple';

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

@@ -1,13 +1,15 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import { Field } from '@digigov/form/Field';
 import FormBuilder from '@digigov/form/FormBuilder';
 import { FieldSpec } from '@digigov/form/types';
-import { results } from '@digigov/ui/form/AutoComplete/utils';
 import Button from '@digigov/ui/form/Button';
+
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
+
 const fields: FieldSpec[] = [
   {
     key: 'autocomplete',
-    label: { primary: 'An autocomplete field' },
+    label: { primary: 'Επιλέξτε ήπειρο' },
     required: true,
     type: 'choice:single',
     extra: {
@@ -16,7 +18,7 @@ const fields: FieldSpec[] = [
         return {
           label: {
             primary: r,
-            secondary: `Country: ${r}`,
+            secondary: `'Ηπειρος: ${r}`,
           },
           value: r.toLowerCase(),
         };
@@ -28,18 +30,17 @@ const fields: FieldSpec[] = [
 const initialValues = {};
 
 export const Default = () => (
-  <Suspense fallback={<div>loading</div>}>
-    <FormBuilder
-      fields={fields}
-      onSubmit={(data) => {
-        console.log(data);
-      }}
-      initial={initialValues}
-    >
-      {fields.map((field) => (
-        <Field key={field.key} name={field.key} />
-      ))}
-      <Button type="submit">Submit</Button>
-    </FormBuilder>
-  </Suspense>
+  <FormBuilder
+    fields={fields}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    initial={initialValues}
+  >
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+    <Button type="submit">Submit</Button>
+  </FormBuilder>
 );
+export default Default;

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Field } from '@digigov/form/Field';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { FieldSpec } from '@digigov/form/types';
+import Button from '@digigov/ui/form/Button';
+
+const results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
+
+const fields: FieldSpec[] = [
+  {
+    key: 'autocomplete',
+    label: { primary: 'Επιλέξτε ήπειρο' },
+    required: true,
+    type: 'choice:multiple',
+    extra: {
+      component: 'AutoComplete',
+      options: results.map((r) => {
+        return {
+          label: {
+            primary: r,
+            secondary: `Ήπειρος: ${r}`,
+          },
+          value: r.toLowerCase(),
+        };
+      }),
+    },
+  },
+];
+
+const initialValues = {};
+
+export const Multiple = () => (
+  <FormBuilder
+    fields={fields}
+    onSubmit={(data) => {
+      console.log(data);
+    }}
+    initial={initialValues}
+  >
+    {fields.map((field) => (
+      <Field key={field.key} name={field.key} />
+    ))}
+    <Button type="submit">Submit</Button>
+  </FormBuilder>
+);
+
+export default Multiple;

package/src/inputs/AutoCompleteInput/doc.mdx

@@ -0,0 +1,18 @@
+---
+title: AutoComplete Input 
+---
+ 
+# AutoComplete input
+
+AutoCompleteInput element is an enhanced version of text input that shows suggested 
+options as the users type and also let them select an option from the list.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Default.tsx" />
+
+### Display multiple values
+
+<code src="@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple.tsx" />

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Default } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';
+import { Multiple } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+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

@@ -1,11 +1,12 @@
 import React, { useCallback } from 'react';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
 import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { Hint } from '@digigov/react-core/Hint';
-import UIAutoComplete, {
+import {
+  AutoComplete,
   AutoCompleteProps as UIAutoCompleteProps,
 } from '@digigov/ui/form/AutoComplete';
-
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Base } from '@digigov/ui/utils/Base';
 export interface AutoCompleteInputExtra
   extends Omit<
     UIAutoCompleteProps,
@@ -16,56 +17,66 @@ export interface AutoCompleteInputExtra
     | 'onConfirm'
     | 'dropdownArrow'
   > {
-  options: Array<FieldOptionProps>;
+  options: FieldOptionProps[];
 }
 
 export interface AutoCompleteInputProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'extra'> {
   extra: AutoCompleteInputExtra;
   value: string;
-  onChange: (v: string) => void;
+  onChange: (v: string | string[] | undefined) => void;
 }
 
 export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
   name,
+  type,
   extra: { options },
   onChange,
   value,
   ...props
 }) => {
-  const suggest = useCallback(function suggest(
-    query: string,
-    syncResults: (options: any[]) => void
-  ): void {
-    syncResults(
-      query
-        ? options.filter(function (option) {
-            return (
-              `${option.value} ${option.label?.primary || ''} ${
-                option.label?.secondary || ''
-              }`
-                .toLowerCase()
-                .indexOf(query.toLowerCase()) !== -1
-            );
-          })
-        : []
-    );
-  },
-  []);
+  const suggest = useCallback(
+    function suggest(
+      query: string,
+      syncResults: (options: any[]) => void
+    ): void {
+      syncResults(
+        query
+          ? options.filter(function (option) {
+              return (
+                `${option.value} ${option.label?.primary || ''} ${
+                  option.label?.secondary || ''
+                }`
+                  .toLowerCase()
+                  .indexOf(query.toLowerCase()) !== -1
+              );
+            })
+          : options
+      );
+    },
+    [options]
+  );
 
   return (
-    <UIAutoComplete
+    <AutoComplete
+      multiple={type === 'choice:multiple' ? true : false}
       source={suggest}
       onConfirm={(value) => {
-        onChange(value.value);
+        if (Array.isArray(value)) {
+          const selectedValues = value.map((item) => item.value);
+          if (selectedValues.length > 0) onChange(selectedValues);
+          else onChange(undefined);
+        } else {
+          onChange(value.value);
+        }
       }}
       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) => {
@@ -75,7 +86,12 @@ export const AutoCompleteInput: React.FC<AutoCompleteInputProps> = ({
           return option.label.primary || option.value;
         },
       }}
-      {...props}
+      {...{
+        ...props,
+        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/__stories__/Conditional.tsx

@@ -6,7 +6,6 @@ const fields: FieldSpec[] = [
   {
     key: 'landline',
     type: 'phone_number',
-
     label: {
       secondary: 'Εισάγετε το νούμερο του σταθερού σας τηλεφώνου.',
     },
@@ -24,7 +23,6 @@ const fields: FieldSpec[] = [
   {
     key: 'mobile_phone',
     type: 'mobile_phone',
-
     label: {
       secondary: 'Εισάγετε το νούμερο του κινητού σας τηλεφώνου.',
     },
@@ -41,7 +39,6 @@ const fields: FieldSpec[] = [
   },
   {
     key: 'email',
-
     type: 'email',
     label: {
       secondary: 'Εισάγετε την διεύθυνση του ηλεκτρονικού σας ταχυδρομείου.',
@@ -98,3 +95,5 @@ export const Conditional = () => (
     <Button type="submit">Συνέχεια</Button>
   </FormBuilder>
 );
+
+export default Conditional;

package/src/inputs/Checkboxes/doc.mdx

@@ -0,0 +1,23 @@
+---
+title: Checkbox
+---
+ 
+# Checkboxes
+Input element of type `checkbox` are rendered by default as boxes that are checked when activated.
+Checkboxes are used to let a user select one or more options of a limited number of choices.
+
+## How to use
+
+### Default
+
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Default.tsx" />
+
+
+### Conditional
+
+<code src="@digigov/form/inputs/Checkboxes/__stories__/Conditional.tsx" />
+
+
+### With divider
+
+<code src="@digigov/form/inputs/Checkboxes/__stories__/WithDivider.tsx" />

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+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();
+});