@digigov/form 0.10.6 → 0.10.7

package/src/Questions/Step/StepForm.tsx

@@ -0,0 +1,60 @@
+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';
+
+export interface StepFormProps {
+  submitButton: boolean;
+  children: React.ReactNode;
+  fields?: FieldProps[];
+  initial?: FormBuilderProps['initial'];
+}
+
+/**
+ * The StepForm component accepts a title, a caption and a
+ * decription about the Step asked to the User
+ */
+export const StepForm: React.FC<StepFormProps> = ({
+  children,
+  submitButton,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const { name, submitStep, ...rest } = useContext(StepContext);
+  const fields = rest.fields.length ? rest.fields : props.fields;
+  const initial = rest.initial ? rest.initial : props.initial;
+  return (
+    <FormBuilder
+      initial={initial}
+      fields={fields}
+      onSubmit={(data): void => {
+        submitStep(name, data);
+      }}
+    >
+      {children ? (
+        <>
+          {children}
+          {submitButton && (
+            <Button type="submit">{t('button.continue')}</Button>
+          )}
+        </>
+      ) : (
+        <>
+          <Fieldset>
+            {fields.map((field) => (
+              <Field key={field.key} name={field.key} />
+            ))}
+          </Fieldset>
+          <Button type="submit">{t('button.continue')}</Button>
+        </>
+      )}
+    </FormBuilder>
+  );
+};
+
+export default StepForm;

package/src/Questions/Step/StepQuote.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Paragraph, { ParagraphProps } from '@digigov/ui/typography/Paragraph';
+
+export const StepQuote: React.FC<ParagraphProps> = ({ children, ...props }) => {
+  return <Paragraph {...props}>{children}</Paragraph>;
+};
+
+export default StepQuote;

package/src/Questions/Step/StepTitle.tsx

@@ -0,0 +1,60 @@
+import React, { useContext } from 'react';
+import { StepContext } from '@digigov/form/Questions/Step/StepContext';
+import PageTitle, {
+  PageTitleHeading,
+  PageTitleHeadingProps,
+  PageTitleSection,
+  PageTitleCaption,
+} from '@digigov/ui/app/PageTitle';
+import BackButton from '@digigov/ui/core/Button/BackButton';
+import { useTranslation } from '@digigov/ui/app/i18n';
+
+export interface StepTitleInterface {
+  title?: string;
+  caption?: string;
+  step?: string;
+}
+
+export const StepTitleHeading: React.FC<PageTitleHeadingProps> = (props) => {
+  return <PageTitleHeading>{props.children}</PageTitleHeading>;
+};
+
+export const StepTitleBase: React.FC<StepTitleInterface> = ({
+  caption,
+  step,
+  title,
+  children,
+}): React.ReactElement => {
+  const { t } = useTranslation();
+  return (
+    <>
+      <BackButton>Πίσω</BackButton>
+      <PageTitle>
+        {children || (
+          <>
+            <PageTitleSection>
+              <PageTitleCaption>{caption && t(caption)}</PageTitleCaption>
+              {step && <PageTitleCaption>{step}</PageTitleCaption>}
+            </PageTitleSection>
+            <StepTitleHeading>{title && t(title)}</StepTitleHeading>
+          </>
+        )}
+      </PageTitle>
+    </>
+  );
+};
+
+/**
+ * The StepTitle component accepts a title, a caption and a step indicator
+ * about the Step asked to the User
+ */
+export const StepTitle: React.FC<StepTitleInterface> = (props) => {
+  const { caption, title, step } = useContext(StepContext);
+  return (
+    <StepTitleBase caption={caption} step={step} title={title}>
+      {props.children}
+    </StepTitleBase>
+  );
+};
+
+export default StepTitle;

package/src/Questions/Step/getAddMoreFields.tsx

@@ -0,0 +1,28 @@
+import { FieldSpec } from '@digigov/form/types';
+import { StepInterface } from '@digigov/form/Questions/Step/types';
+
+export const getAddMoreFields = (currentStep: StepInterface): FieldSpec[] => {
+  return [
+    {
+      key: 'addMore',
+      type: 'choice:single',
+      required: true,
+      extra: {
+        options: [
+          {
+            label: currentStep.review?.addMore.answers.positive || {
+              primary: 'Yes',
+            },
+            value: 'yes',
+          },
+          {
+            label: currentStep.review?.addMore.answers.negative || {
+              primary: 'No',
+            },
+            value: 'no',
+          },
+        ],
+      },
+    },
+  ];
+};

package/src/Questions/Step/index.ts

@@ -0,0 +1,13 @@
+export * from '@digigov/form/Questions/Step/ReviewStep';
+export * from '@digigov/form/Questions/Step/Step';
+export * from '@digigov/form/Questions/Step/StepArrayReview';
+export * from '@digigov/form/Questions/Step/StepContext';
+export { default as StepDescription } from '@digigov/form/Questions/Step/StepDescription';
+export { default as StepForm } from '@digigov/form/Questions/Step/StepForm';
+export { default as StepQuote } from '@digigov/form/Questions/Step/StepQuote';
+export { default as StepTitle } from '@digigov/form/Questions/Step/StepTitle';
+export * from '@digigov/form/Questions/Step/getAddMoreFields';
+export * from '@digigov/form/Questions/Step/';
+export * from '@digigov/form/Questions/Step/types';
+import Step from '@digigov/form/Questions/Step/Step';
+export default Step;

package/src/Questions/Step/types.tsx

@@ -0,0 +1,32 @@
+import { LabelProps } from '@digigov/form/inputs/Label';
+
+export type StepType = 'object' | 'array';
+export type StepReviewAnswersType = 'positive' | 'negative';
+export interface StepAddMoreInterface {
+  title: LabelProps;
+  answers: Record<StepReviewAnswersType, LabelProps>;
+}
+export interface StepReviewInterface {
+  primaryFieldKey: string;
+  title: string;
+  caption?: string;
+  addMore: StepAddMoreInterface;
+}
+export interface StepInterface {
+  name: string;
+  title?: string;
+  description?: string;
+  caption?: string;
+  step?: string;
+  fields?: any;
+  initial?: any;
+  errorLabels?: any;
+  submitStep?: any;
+  review?: StepReviewInterface;
+  type?: StepType;
+}
+export interface StepArrayReviewInterface {
+  array: Record<string, any>[];
+  handleSubmit: (data: any) => void;
+  handleDelete: (data: any) => void;
+}