@digigov/form 0.13.1 → 1.0.0-002c630d

package/src/MultiplicityField/MultiplicityField.stories.js

@@ -2,7 +2,7 @@ import MultiplicityField from '@digigov/form/MultiplicityField';
 export default {
   title: 'Digigov Form/MultiplicityField',
   component: MultiplicityField,
-  displayName: 'MultiplicityField'
+  displayName: 'MultiplicityField',
 };
 export * from '@digigov/form/MultiplicityField/__stories__/Default';
 export * from '@digigov/form/MultiplicityField/__stories__/WithMinLength';

package/src/MultiplicityField/__stories__/Default.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, FieldSpec } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const fields = [
   {

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -1,10 +1,4 @@
 import React from 'react';
-import Layout, { Content, Main } from '@digigov/ui/layouts/Basic/';
-import SummaryList, {
-  SummaryListItem,
-  SummaryListItemKey,
-  SummaryListItemValue,
-} from '@digigov/ui/core/SummaryList';
 import {
   Header,
   HeaderSection,
@@ -15,12 +9,18 @@ import {
   Paragraph,
   Card,
   CardHeading,
-  CardText,
+  CardContent,
   List,
   ListItem,
 } from '@digigov/ui';
+import SummaryList, {
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/content/SummaryList';
 import GovGRFooter from '@digigov/ui/govgr/Footer';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
+import Layout, { Content, Main } from '@digigov/ui/layouts/Basic/';
 
 const fields = [
   {
@@ -82,7 +82,7 @@ export const PreviewDisplay = () => (
         </Paragraph>
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 1</CardHeading>
-          <CardText>
+          <CardContent>
             <SummaryList>
               {fields &&
                 fields.map((field, index) => {
@@ -94,11 +94,11 @@ export const PreviewDisplay = () => (
                   );
                 })}
             </SummaryList>
-          </CardText>
+          </CardContent>
         </Card>
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 2</CardHeading>
-          <CardText>
+          <CardContent>
             <SummaryList>
               {fields &&
                 fields.map((field, index) => {
@@ -110,20 +110,20 @@ export const PreviewDisplay = () => (
                   );
                 })}
             </SummaryList>
-          </CardText>
+          </CardContent>
         </Card>
         <Card variant="border" borderColor="dark">
           <CardHeading>Συνυπογράφοντας 3</CardHeading>
-          <CardText>
+          <CardContent>
             <SummaryList>
               <SummaryListItem>
                 <SummaryListItemKey>Όνομα</SummaryListItemKey>
                 <SummaryListItemValue>Μάριος</SummaryListItemValue>
               </SummaryListItem>
             </SummaryList>
-          </CardText>
+          </CardContent>
         </Card>
-        <Heading size="m">Στοιχεία Δήλωσης</Heading>
+        <Heading size="md">Στοιχεία Δήλωσης</Heading>
         <SummaryList>
           <SummaryListItem>
             <SummaryListItemKey>Όνομα</SummaryListItemKey>

package/src/MultiplicityField/__stories__/WithExactLength.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, FieldSpec } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const fields = [
   {

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, FieldSpec } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const fields = [
   {

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, FieldSpec } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const fields = [
   {

package/src/MultiplicityField/__stories__/WithMinLength.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import FormBuilder, { Field, FieldSpec } from '@digigov/form';
-import { Button } from '@digigov/ui/core';
+import { Button } from '@digigov/ui/form/Button';
 
 const fields = [
   {

package/src/MultiplicityField/add-objects.tsx

@@ -1,9 +1,6 @@
 /* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
 // import { FormBuilderProps } from '@digigov/form';
-import Button from '@digigov/ui/core/Button';
-import Fieldset from '@digigov/react-core/Fieldset';
-import RadioConditional from '@digigov/react-core/RadioConditional';
 import {
   ErrorOption,
   FieldArrayWithId,
@@ -19,6 +16,9 @@ import {
   StashedObject,
 } from '@digigov/form/MultiplicityField';
 import { FieldSpec } from '@digigov/form/types';
+import Fieldset from '@digigov/react-core/Fieldset';
+import RadioConditional from '@digigov/react-core/RadioConditional';
+import Button from '@digigov/ui/form/Button';
 export interface AddObjectsProps
   extends Omit<MultiplicityProps, 'key' | 'component'> {
   fields: FieldArrayWithId[];

package/src/MultiplicityField/index.tsx

@@ -1,18 +1,18 @@
 import React, { useState } from 'react';
+import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import { FieldSpec } from '@digigov/form';
+import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
 import { ControlledFieldProps } from '@digigov/form/Field/types';
+import FieldObject from '@digigov/form/FieldObject';
+import AddObjects from '@digigov/form/MultiplicityField/add-objects';
 import {
   Card,
-  CardText,
+  CardContent,
   CardAction,
   Button,
   Heading,
   CardHeading,
 } from '@digigov/react-core';
-import { FieldSpec } from '@digigov/form';
-import AddObjects from '@digigov/form/MultiplicityField/add-objects';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldObject from '@digigov/form/FieldObject';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
@@ -78,7 +78,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     >
       {stashedObjects.length > 0 ? (
         <div>
-          <Heading size="m">{extra?.label.object.title_added}</Heading>
+          <Heading size="md">{extra?.label.object.title_added}</Heading>
           {stashedObjects.map((_Object, index) => {
             return (
               <ListObject
@@ -147,7 +147,7 @@ export const ListObject: React.FC<ListObjectProps> = ({
       <CardHeading>
         {extra?.label.object.title} #{index + 1}
       </CardHeading>
-      <CardText>
+      <CardContent>
         <FieldObject
           name={currentName}
           formState={formState}
@@ -155,7 +155,7 @@ export const ListObject: React.FC<ListObjectProps> = ({
           control={control}
           {...extra?.of}
         />
-      </CardText>
+      </CardContent>
       <CardAction>
         <Button type="button" variant="link" onClick={() => onDelete(index)}>
           {extra?.label.object.delete}

package/src/Questions/Questions.stories.js

@@ -2,6 +2,6 @@ import Questions from '@digigov/form/Questions';
 export default {
   title: 'Digigov Form/Questions',
   component: Questions,
-  displayName: 'Questions'
+  displayName: 'Questions',
 };
 export * from '@digigov/form/Questions/__stories__/Default';

package/src/Questions/Questions.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
+import { getNextStep } from '@digigov/form/Questions/getNextStep';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
 import { StepInterface } from '@digigov/form/Questions/Step/types';
 import { QuestionsInterface } from '@digigov/form/Questions/types';
-import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
-import { getNextStep } from '@digigov/form/Questions/getNextStep';
 
 const isBrowser = typeof window !== 'undefined';
 

package/src/Questions/Step/ReviewStep.tsx

@@ -1,17 +1,17 @@
 import React, { useContext } from 'react';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
+import { StepTitleBase } from '@digigov/form/Questions/Step/StepTitle';
 import {
   SummaryList,
   SummaryListItem,
   SummaryListItemKey,
   SummaryListItemValue,
   SummaryListItemAction,
-} from '@digigov/ui/core/SummaryList';
+} from '@digigov/ui/content/SummaryList';
+import { Button } from '@digigov/ui/form/Button';
+import { useTranslation } from '@digigov/ui/i18n';
 import Title from '@digigov/ui/typography/Title';
-import { Button } from '@digigov/ui/core';
-import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
-import { StepTitleBase } from '@digigov/form/Questions/Step/StepTitle';
-import { StepContext } from '@digigov/form/Questions/Step/StepContext';
-import { useTranslation } from '@digigov/ui/app/i18n';
 
 export const ReviewStep = (): React.ReactElement => {
   const { t } = useTranslation();

package/src/Questions/Step/Step.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useState } from 'react';
 import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
-import { StepContext } from '@digigov/form/Questions/Step/StepContext';
 import { StepArrayReview } from '@digigov/form/Questions/Step/StepArrayReview';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
 import { StepInterface } from '@digigov/form/Questions/Step/types';
 
 /**

package/src/Questions/Step/StepArrayReview.tsx

@@ -1,22 +1,22 @@
 import React, { useContext } from 'react';
-import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
-import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';
-import Button from '@digigov/ui/core/Button';
-import FormBuilder from '@digigov/form/FormBuilder';
-import { FieldSpec } from '@digigov/form/types';
 import { Field } from '@digigov/form/Field';
 import { Fieldset } from '@digigov/form/Fieldset';
+import FormBuilder from '@digigov/form/FormBuilder';
 import Label from '@digigov/form/inputs/Label';
+import { QuestionsContext } from '@digigov/form/Questions/QuestionsContext';
+import { getAddMoreFields } from '@digigov/form/Questions/Step/getAddMoreFields';
+import { StepArrayReviewInterface } from '@digigov/form/Questions/Step/types';
+import { FieldSpec } from '@digigov/form/types';
+import PageTitle, { PageTitleHeading } from '@digigov/ui/app/PageTitle';
 import {
   SummaryList,
   SummaryListItem,
   SummaryListItemKey,
   SummaryListItemValue,
   SummaryListItemAction,
-} from '@digigov/ui/core/SummaryList';
-import { useTranslation } from '@digigov/ui/app/i18n';
-import { StepArrayReviewInterface } from '@digigov/form/Questions/Step/types';
-import { getAddMoreFields } from '@digigov/form/Questions/Step/getAddMoreFields';
+} from '@digigov/ui/content/SummaryList';
+import Button from '@digigov/ui/form/Button';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export const StepArrayReview: React.FC<StepArrayReviewInterface> = (props) => {
   const { t } = useTranslation();

package/src/Questions/Step/StepDescription.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { StepContext } from '@digigov/form/Questions/Step/StepContext';
+import { useTranslation } from '@digigov/ui/i18n';
 import Paragraph, { ParagraphProps } from '@digigov/ui/typography/Paragraph';
-import { useTranslation } from '@digigov/ui/app/i18n';
 
 export interface StepDescriptionInterface extends ParagraphProps {
   description?: string;

package/src/Questions/Step/StepForm.tsx

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { StepContext } from '@digigov/form/Questions/Step/StepContext';
-import FormBuilder from '@digigov/form/FormBuilder';
-import Fieldset from '@digigov/form/Fieldset';
 import Field from '@digigov/form/Field';
-import { FormBuilderProps } from '@digigov/form/types';
 import { FieldProps } from '@digigov/form/Field/types';
-import Button from '@digigov/ui/core/Button';
-import { useTranslation } from '@digigov/ui/app/i18n';
+import Fieldset from '@digigov/form/Fieldset';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
+import { FormBuilderProps } from '@digigov/form/types';
+import Button from '@digigov/ui/form/Button';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export interface StepFormProps {
   submitButton: boolean;

package/src/Questions/Step/StepTitle.tsx

@@ -6,8 +6,8 @@ import PageTitle, {
   PageTitleSection,
   PageTitleCaption,
 } from '@digigov/ui/app/PageTitle';
-import BackButton from '@digigov/ui/core/Button/BackButton';
-import { useTranslation } from '@digigov/ui/app/i18n';
+import BackButton from '@digigov/ui/form/Button/BackButton';
+import { useTranslation } from '@digigov/ui/i18n';
 
 export interface StepTitleInterface {
   title?: string;
@@ -53,7 +53,12 @@ export const StepTitleBase: React.FC<StepTitleInterface> = ({
 export const StepTitle: React.FC<StepTitleInterface> = (props) => {
   const { caption, title, step, backButton } = useContext(StepContext);
   return (
-    <StepTitleBase backButton={backButton} caption={caption} step={step} title={title}>
+    <StepTitleBase
+      backButton={backButton}
+      caption={caption}
+      step={step}
+      title={title}
+    >
       {props.children}
     </StepTitleBase>
   );

package/src/Questions/Step/getAddMoreFields.tsx

@@ -1,5 +1,5 @@
-import { FieldSpec } from '@digigov/form/types';
 import { StepInterface } from '@digigov/form/Questions/Step/types';
+import { FieldSpec } from '@digigov/form/types';
 
 export const getAddMoreFields = (currentStep: StepInterface): FieldSpec[] => {
   return [

package/src/Questions/__snapshots__/index.spec.tsx.snap

@@ -113,10 +113,10 @@ exports[`renders the Questions 1`] = `
                     <ForwardRef(PageTitleCaption)>
                       <ForwardRef(Base)
                         as="span"
-                        className="govgr-caption-l"
+                        className="govgr-caption-lg"
                       >
                         <span
-                          className="govgr-caption-l"
+                          className="govgr-caption-lg"
                         >
                           intro.caption
                         </span>
@@ -381,14 +381,14 @@ exports[`renders the Questions 1`] = `
                                       }
                                     >
                                       <ForwardRef(LabelTitle)
-                                        size="s"
+                                        size="sm"
                                       >
                                         <ForwardRef(Base)
                                           as="span"
-                                          className="govgr-heading-s"
+                                          className="govgr-heading-sm"
                                         >
                                           <span
-                                            className="govgr-heading-s"
+                                            className="govgr-heading-sm"
                                           >
                                             name.field.primary
                                           </span>

package/src/Questions/__stories__/Default.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
-import GovGRFooter from '@digigov/ui/govgr/Footer';
+import { Field } from '@digigov/form';
+import Questions, { Step, StepForm, StepTitle } from '@digigov/form/Questions';
 import Header from '@digigov/ui/app/Header';
-import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
 import HeaderContent from '@digigov/ui/app/Header/HeaderContent';
+import HeaderSection from '@digigov/ui/app/Header/HeaderSection';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 import BasicLayout, {
   Top,
@@ -10,8 +12,6 @@ import BasicLayout, {
   Main,
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-import Questions, { Step, StepForm, StepTitle } from '@digigov/form/Questions';
-import { Field } from '@digigov/form';
 
 const steps = [
   {

package/src/Questions/index.mdx

@@ -14,12 +14,14 @@ import {
   TableDataCell,
 } from '@digigov/react-core';
 
-import LeadText from "@site/src/components/LeadText";
+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>
+<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>
 
 ## Introduction to Question pages
 
@@ -94,10 +96,10 @@ const steps = [
           primary: 'Birthday',
         },
         type: 'date',
-        required: true
-      }
-    ]
-  }
+        required: true,
+      },
+    ],
+  },
 ];
 
 export default function Index() {
@@ -152,18 +154,13 @@ Each step can be defined using a `Step` React component and all steps should be
 place inside a `Questions` component, that will provide the steps subcomponents
 the required state.
 
-First, you declare an array called `steps` and then you pass it to `<Questions
-/>` as a prop. Then for each step you can declare a `<Step />` component and
+First, you declare an array called `steps` and then you pass it to `<Questions />` as a prop. Then for each step you can declare a `<Step />` component and
 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
-<Questions
-  name="example"
-  steps={steps}
-  onSubmit={(data) => doSomething(data)}
->
+<Questions name="example" steps={steps} onSubmit={(data) => doSomething(data)}>
   {/* more steps could be rendered here ... */}
   <Step name="age">
     <StepTitle />
@@ -181,21 +178,21 @@ adding paragraphs or other custom components.
 Steps can be described using `StepInterface` interface declared as a JSON
 object. The most basic properties are the following:
 
-* `name` - a unique identifier, must be different for each step
-* `title` - the main questions title that communicates to the users what this
+- `name` - a unique identifier, must be different for each step
+- `title` - the main questions title that communicates to the users what this
   question page is about, rendered by `StepTitle`
-* `fields` - an array that describes each input field that will be rendered in
+- `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"
 {
-  name: 'name',
-  title: 'What is your name?',
-  fields: [
+  "name": "name",
+  "title": "What is your name?",
+  "fields": [
     {
-      key: 'name',
-      type: 'string',
-      required: true,
+      "key": "name",
+      "type": "string",
+      "required": true
     }
   ]
 }
@@ -264,7 +261,7 @@ const steps = [
 
 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.  
+a branch between the `age` step and the other two steps.
 
 ```jsx live
 import React from 'react';
@@ -292,11 +289,11 @@ const steps = [
         key: 'age',
         type: 'int',
         required: true,
-      }
+      },
     ],
     nextStep: (data) => {
       return data.age < 18 ? 'citizen-adult' : 'citizen-underage';
-    }
+    },
   },
   {
     name: 'citizen-underage',
@@ -309,17 +306,17 @@ const steps = [
         extra: {
           options: [
             {
-              label: {primary: "Yes"},
+              label: { primary: 'Yes' },
               value: 'yes',
             },
             {
-              label: {primary: "No"},
+              label: { primary: 'No' },
               value: 'no',
-            }
-          ]
-        }
-      }
-    ]
+            },
+          ],
+        },
+      },
+    ],
   },
   {
     name: 'citizen-adult',
@@ -332,17 +329,17 @@ const steps = [
         extra: {
           options: [
             {
-              label: {primary: "Yes"},
+              label: { primary: 'Yes' },
               value: 'yes',
             },
             {
-              label: {primary: "No"},
+              label: { primary: 'No' },
               value: 'no',
-            }
-          ]
-        }
-      }
-    ]
+            },
+          ],
+        },
+      },
+    ],
   },
 ];
 
@@ -396,7 +393,7 @@ export default function Index() {
 }
 ```
 
-## Prop types 
+## Prop types
 
 <TableContainer>
   <Table>
@@ -409,7 +406,7 @@ export default function Index() {
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableDataCell>Πρώτες 6 εβδομάδες   </TableDataCell>
+        <TableDataCell>Πρώτες 6 εβδομάδες </TableDataCell>
         <TableDataCell> €109.80 / εβδομάδα</TableDataCell>
         <TableDataCell> €69.80 / εβδομάδα</TableDataCell>
       </TableRow>

package/src/Questions/index.spec.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { mount } from 'enzyme';
 
+import { Field } from '@digigov/form';
 import { Step, StepForm, StepQuote, StepTitle } from '@digigov/form/Questions';
 import Questions from '@digigov/form/Questions';
-import { Field } from '@digigov/form';
 
 const steps = [
   {