@digigov/form 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

package/src/FieldObject/index.tsx

@@ -7,9 +7,9 @@ import {
   ALTERNATIVE_COMPONENTS,
 } from '@digigov/form/Field/utils';
 import { calculateField } from '@digigov/form/Field/utils/calculateField';
-import Fieldset, { FieldsetCaption } from '@digigov/form/Fieldset';
+import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
 import { FieldSpec } from '@digigov/form/types';
-import { FieldsetLegend } from '@digigov/react-core/FieldsetLegend';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
@@ -18,6 +18,7 @@ export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   reset: UseFormReturn['reset'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
+  defaultValue?: undefined;
   Field: React.FC<FieldProps>;
 }
 
@@ -30,6 +31,7 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   reset,
   formState,
   error,
+  defaultValue,
   Field,
 }) => {
   const { t } = useTranslation();
@@ -44,14 +46,15 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
       )}
       {extra?.fields.map((field) => (
         <FieldObjectItem
-          key={`${name}.${field.key}`}
-          name={`${name}.${field.key}`}
+          key={`${name}${field.key ? `.${field.key}` : ''}`}
+          name={`${name}${field.key ? `.${field.key}` : ''}`}
           control={control}
           register={register}
           reset={reset}
           field={field}
           error={error && error[field.key]}
           formState={formState}
+          defaultValue={defaultValue}
           Field={Field}
         />
       ))}
@@ -68,6 +71,8 @@ export interface FieldObjectItemProps {
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
   children?: React.ReactNode;
+  // defaultValue?: FormData | undefined;
+  defaultValue?: undefined;
   Field: React.FC<FieldProps>;
 }
 
@@ -80,6 +85,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   formState,
   reset,
   register,
+  defaultValue,
   Field,
 }) => {
   const calculatedField: CalculatedField = useMemo(
@@ -87,7 +93,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
       calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
     [field]
   );
-
+  console.log(field);
   const customError = error ? error : formState?.errors[name];
   return (
     <FieldBase
@@ -98,6 +104,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
       reset={reset}
       register={register}
       error={customError}
+      defaultValue={defaultValue}
     />
   );
 };

package/src/Fieldset/index.tsx

@@ -4,11 +4,11 @@ import {
   FieldsetCaptionProps,
   FieldsetBodyProps,
 } from '@digigov/form/Fieldset/types';
-import Fieldset from '@digigov/react-core/Fieldset';
-import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import Hint from '@digigov/react-core/Hint';
-import Grid from '@digigov/ui/layouts/Grid';
-import NormalText from '@digigov/ui/typography/NormalText';
+import { Fieldset } from '@digigov/react-core/Fieldset';
+import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
+import { Grid } from '@digigov/ui/layouts/Grid';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const FieldsetLabel: React.FC<FieldsetLabelProps> = ({
   children,

package/src/Fieldset/types.tsx

@@ -1,5 +1,5 @@
-import { FieldsetLegendProps } from '@digigov/react-core/FieldsetLegend';
-import { HintProps } from '@digigov/react-core/Hint';
+import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import { HintProps } from '@digigov/ui/typography/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}

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

@@ -8,11 +8,8 @@ sidebar_label: FormBuilder
 
 `stepForm` component:
 
-<Story
-  packageName="@digigov/form"
-  component="FormBuilder"
-  story="Default.tsx"
-/>
+<code src="@digigov/form/FormBuilder/__stories__/Default.tsx" />
+
 
 ### Importing and using FormBuilder Component
 
@@ -34,18 +31,14 @@ import BasicLayout, {
 import {FormBuilder} from '@digigov/form';
 
 export default function MyComponent({ props }) {
-
   return (
     <BasicLayout>
-      .
-      .
+      /* code */
       <Container>
         <Main>
-          .
-          .
+          /* code */
           <FormBuilder></FormBuilder>
-          .
-          .
+          /* code */
         </Main>
       </Container>
       <Bottom>
@@ -54,7 +47,6 @@ export default function MyComponent({ props }) {
     </BasicLayout>
   );
 }
-}
 ```
 
 ### Props
@@ -83,7 +75,7 @@ Below are demostrated some examples for each type of field
 
 The examples above are implemented by using the code below
 
-```javascript
+```jsx
 import React, { useState } from 'react';
 import BasicLayout, {
   Top,
@@ -91,7 +83,7 @@ import BasicLayout, {
   Main,
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Header, { HeaderTitle, HeaderContent, HeaderSection } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 import GovGRFooter from '@digigov/ui/govgr/Footer';
 import Button from '@digigov/ui/form/Button';
@@ -99,8 +91,9 @@ import PageTitleContainer, {
   PageTitleCaption,
   PageTitleHeading,
 } from '@digigov/ui/app/PageTitleContainer';
-import BackButton from '@digigov/ui/form/Button/BackButton';
-import FormBuilder, { Fieldset, FieldsetLabel, Field } from '@digigov/form';
+import BackLink from '@digigov/ui/navigation/BackLink';
+import FormBuilder, { Fieldset, Field } from '@digigov/form';
+import { FieldsetLabel } from '@digigov/form/Fieldset';
 import { useTranslation } from '@digigov/ui/i18n';
 
 const FIELDS = [
@@ -203,30 +196,24 @@ const initialValues = {
   string: 'default content',
 };
 
-const useStyles = makeStyles(
-  {
-    top: { minHeight: '75px' },
-    main: {},
-    side: {},
-  },
-  { name: 'MuiSite' }
-);
-
 export default function Index() {
-  const styles = useStyles();
   const [data, setData] = useState(null);
   const { t } = useTranslation();
   return (
     <BasicLayout>
-      <Top className={styles.top}>
+      <Top>
         <Header>
-          <GovGRLogo />
-          <HeaderTitle>Service name</HeaderTitle>
+          <HeaderContent>
+            <HeaderSection>
+              <GovGRLogo />
+              <HeaderTitle>Service name</HeaderTitle>
+            </HeaderSection>
+          </HeaderContent>
         </Header>
       </Top>
       <Container>
-        <Main className={styles.main}>
-          <BackButton>{t('button.back')}</BackButton>
+        <Main>
+          <BackLink>Back</BackLink>
           <PageTitleContainer>
             <PageTitleCaption>Before we start</PageTitleCaption>
             <PageTitleHeading>Submit a form</PageTitleHeading>
@@ -237,7 +224,7 @@ export default function Index() {
             initial={initialValues}
           >
             <Fieldset>
-              <FieldsetLabel>This is a fieldset</FieldsetLabel>
+              <FieldsetLabel size="lg">This is a fieldset</FieldsetLabel>
               {FIELDS.map((field) => (
                 <Field key={field.key} name={field.key} />
               ))}

package/src/FormBuilder/index.tsx

@@ -1,15 +1,14 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { useCallback, useContext, useRef } from 'react';
 import { useForm } from 'react-hook-form';
-import Field from '@digigov/form/Field';
+import { Field } from '@digigov/form/Field';
 import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
-import Fieldset from '@digigov/form/Fieldset';
+import { Fieldset } from '@digigov/form/Fieldset';
 import { FormContext } from '@digigov/form/FormContext';
 import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
 import { yupResolver } from '@digigov/form/utils';
 import { useValidationSchema } from '@digigov/form/validators';
-import { Form } from '@digigov/react-core/Form';
 import { Button } from '@digigov/ui/form/Button';
+import { Form } from '@digigov/ui/form/Form';
 
 const FormBase = React.forwardRef(function FormBase(
   {
@@ -41,7 +40,10 @@ const FormBase = React.forwardRef(function FormBase(
 
   const handleSubmit = useCallback(
     (data: FormData): void => {
-      onSubmit && onSubmit(data);
+      if (onSubmit) {
+        form.reset(data);
+        onSubmit(data);
+      }
     },
     [onSubmit]
   );

package/src/FormBuilder/scenarios.test.tsx

@@ -589,7 +589,7 @@ const generateScenarios = (
         };
         scenarioFill.push(finalScenarioFill);
         for (const multiplicityField of fillTemplate?.value?.of?.extra
-          ?.fields) {
+          ?.fields ?? []) {
           scenarioExpect.push({
             type: 'success',
             fieldKey: `${fillTemplate.fieldKey}\\.${i}\\.${multiplicityField.fieldKey}`,
@@ -1847,7 +1847,7 @@ for (const scenario of scenarios) {
     test(scenario.title, async ({ mount, page }) => {
       const formBuilder = await mount(
         // @ts-ignore
-        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => { }} />
+        <FormBuilder auto={true} fields={scenario.fields} onSubmit={() => {}} />
       );
       await fillFields(page, formBuilder, scenario);
       await submitForm(formBuilder);

package/src/FormContext.tsx

@@ -1,5 +1,4 @@
-import React from 'react';
-import { createContext } from 'react';
+import React, { createContext } from 'react';
 import { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({

package/src/MultiplicityField/add-objects.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React, { useEffect, useMemo } from 'react';
 import {
   ErrorOption,
@@ -14,16 +13,15 @@ import {
 } from '@digigov/form/Field/utils';
 import { calculateField } from '@digigov/form/Field/utils/calculateField';
 import { useField } from '@digigov/form/Field/utils/useField';
-
-import FieldObject from '@digigov/form/FieldObject';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { Fieldset } from '@digigov/form/Fieldset';
 import type {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
 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';
+import { Button } from '@digigov/ui/form/Button';
+import { RadioConditional } from '@digigov/ui/form/RadioContainer';
 
 export interface AddObjectsProps
   extends Omit<MultiplicityProps, 'key' | 'component'> {
@@ -51,7 +49,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   getValues,
   onStash,
   error,
-  Field
+  Field,
 }) => {
   const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
   const currentName = `${name}.${currentIndex}`;
@@ -107,8 +105,10 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
                           (f) => `${currentName}.${f.key}`
                         );
                         const result = await trigger(nestedFields);
-                        result && setValue('needs-more', '');
-                        result && onStash(getValues(currentName));
+                        if (result) {
+                          setValue('needs-more', '');
+                          onStash(getValues(currentName));
+                        }
                       }}
                     >
                       {extra?.label.object.add}

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

@@ -3,13 +3,9 @@ id: ask-users-recursive
 title: Ask users for recursive data
 ---
 
-import LeadText from '@site/src/components/LeadText';
-
-<LeadText>
-  Multiplicity & FieldArray fields allow users to input data described by a
-  particular schema for an arbitrary number of times until they are done. It can
-  be used to input a fixed, a minimum, and a maximum length of instances.
-</LeadText>
+Multiplicity & FieldArray fields allow users to input data described by a
+particular schema for an arbitrary number of times until they are done. It can
+be used to input a fixed, a minimum, and a maximum length of instances.
 
 ## What we are trying to achieve
 
@@ -108,7 +104,7 @@ This field is the most complex component we currently offer, and it uses the
 react-hook-form under the hood. First, let's take a look at what it looks like, and then we can
 break down its functionality and how you can use it.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -209,7 +205,7 @@ are asking users for information about their vehicles, we can also fill in the `
 `label.primary`, as well as the `type` and `required`
 props.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
@@ -232,7 +228,7 @@ inner form, respectively.
 Inside the `of` key you can add an `extra` key that will then contain a `fields`
 key describing the field props for all inputs needed.
 
-```js
+```js pure
 // this will be used as value for the `extra` prop
 {
   of: {
@@ -290,7 +286,7 @@ As a result, if you learn how to use one, you can easily use the other, and
 naturally, you can also change their behaviour by changing a single prop in your
 React code.
 
-```jsx
+```jsx pure
 <Field
   key="vehicles"
   name="vehicles"
@@ -305,7 +301,7 @@ React code.
 The end result looks very different from Multiplicity at first glance, but you
 can achieve the same results with both of them.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -396,7 +392,7 @@ should expect to need some length validation sooner than later.
 You can easily validate the exact length of the items added to the multipliticy
 array, simply by using the `extra.length` prop.
 
-```jsx
+```jsx pure
 <Field
   extra={{
     length: 2,
@@ -409,7 +405,7 @@ array, simply by using the `extra.length` prop.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';
@@ -497,7 +493,7 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 
 :::
 
-```jsx
+```jsx pure
 <Field
   extra={{
     min: 2,
@@ -511,7 +507,7 @@ Do not mix and match the exact `length` validation with the `min` or `max`.
 The example below will validate this and show all the error messages necessary
 to make sure that the users understand what is going wrong with the process.
 
-```jsx live
+```jsx
 import React from 'react';
 import Form, { Field } from '@digigov/form';
 import Button from '@digigov/ui/form/Button';

package/src/MultiplicityField/index.tsx

@@ -1,19 +1,20 @@
 import React, { useState } from 'react';
 import { useFieldArray, UseFormReturn } from 'react-hook-form';
-import FieldContainer from '@digigov/form/Field/FieldBaseContainer';
-
-import FieldObject from '@digigov/form/FieldObject';
-import AddObjects from '@digigov/form/MultiplicityField/add-objects';
+import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
+import { FieldObject } from '@digigov/form/FieldObject';
+import { AddObjects } from '@digigov/form/MultiplicityField/add-objects';
 import {
   MultiplicityProps,
   StashedObject,
 } from '@digigov/form/MultiplicityField/types';
-import { Button } from '@digigov/react-core/Button';
-import { Card } from '@digigov/react-core/Card';
-import { CardAction } from '@digigov/react-core/CardAction';
-import { CardContent } from '@digigov/react-core/CardContent';
-import { CardHeading } from '@digigov/react-core/CardHeading';
-import { Heading } from '@digigov/react-core/Heading';
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+import { Heading } from '@digigov/ui/typography/Heading';
 
 // epeidh einai forwardRef to ref mas to dinei xwrista apo ta props
 export const Multiplicity: React.FC<MultiplicityProps> = ({
@@ -48,7 +49,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     setStashedObjects(newStashedObjects);
   };
   return (
-    <FieldContainer
+    <FieldBaseContainer
       label={label}
       layout={layout}
       error={
@@ -99,7 +100,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         clearErrors={clearErrors}
         Field={Field}
       />
-    </FieldContainer>
+    </FieldBaseContainer>
   );
 };
 
@@ -127,7 +128,7 @@ export const ListObject: React.FC<ListObjectProps> = ({
 }) => {
   const currentName = `${name}.${index}`;
   return (
-    <Card variant={extra?.border && 'border'}>
+    <Card variant={extra?.border ? 'border' : 'divider'}>
       <CardHeading>
         {extra?.label.object.title} #{index + 1}
       </CardHeading>

package/src/MultiplicityField/types.ts

@@ -1,6 +1,5 @@
 import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form/Field/types';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
+import { FieldSpec, ControlledFieldProps } from '@digigov/form/Field/types';
 
 export interface MultiplicityProps
   extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {

package/src/Questions/Questions.tsx

@@ -31,7 +31,7 @@ export const Questions: React.FC<QuestionsInterface> = ({
   useEffect(() => {
     if (forceStepName !== currentStep.name) {
       const forceStep = steps.find(({ name }) => name === forceStepName);
-      forceStep && setCurrentStep(forceStep);
+      if (forceStep) setCurrentStep(forceStep);
     }
   }, [forceStepName]);
   const localData =
@@ -42,16 +42,16 @@ export const Questions: React.FC<QuestionsInterface> = ({
   const submitStep = (stepName, stepData): void => {
     data[stepName] = stepData;
     if (localDraft) {
-      isBrowser &&
+      if (isBrowser)
         window.localStorage.setItem(`questions-${name}`, JSON.stringify(data));
     }
     if (onChange) {
-      onChange && onChange(data);
+      onChange(data);
     }
     setData(data);
     const nextStep = getNextStep(currentStep, steps, data);
     if (nextStep) {
-      onActiveStep && onActiveStep(nextStep);
+      if (onActiveStep) onActiveStep(nextStep);
       setCurrentStep(nextStep);
     } else {
       onSubmit(data);

package/src/Questions/Step/StepArrayReview.tsx

@@ -37,7 +37,7 @@ export const StepArrayReview: React.FC<StepArrayReviewInterface> = (props) => {
       </PageTitleContainer>
       <SummaryList>
         {props.array.map(
-          (item: { [x: string]: React.ReactNode }, idx: number) => (
+          (item: Record<string, React.ReactNode>, idx: number) => (
             <SummaryListItem key={idx}>
               <SummaryListItemKey>
                 {t(primaryField.label.primary)}

package/src/Questions/Step/StepTitle.tsx

@@ -1,12 +1,13 @@
 import React, { useContext } from 'react';
 import { StepContext } from '@digigov/form/Questions/Step/StepContext';
-import Heading, { HeadingProps } from '@digigov/react-core/Heading';
-import HeadingCaption from '@digigov/react-core/HeadingCaption';
-import PageTitleContainer, {
+import {
+  PageTitleContainer,
   PageTitleCaption,
 } from '@digigov/ui/app/PageTitleContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { BackLink } from '@digigov/ui/navigation/BackLink';
+import { Heading, HeadingProps } from '@digigov/ui/typography/Heading';
+import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export interface StepTitleInterface {
   title?: string;

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

@@ -1,19 +1,22 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Questions 1`] = `
 <body>
   <div>
     <a
-      class="ds-back-link ds-print-hidden"
+      class="ds-print-hidden ds-back-link"
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--caret ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M18,22V2L6,12L18,22z"
         />
       </svg>
@@ -48,7 +51,7 @@ exports[`renders the Questions 1`] = `
           class="ds-label"
         >
           <span
-            class="ds-heading-sm"
+            class="ds-label__title ds-label__title--sm"
           >
             name.field.primary
           </span>
@@ -60,13 +63,14 @@ exports[`renders the Questions 1`] = `
           <input
             aria-required="true"
             class="ds-input"
+            data-type="string"
             name="name"
             type="text"
           />
         </label>
       </div>
       <button
-        class="ds-btn-primary ds-btn ds-print-hidden"
+        class="ds-print-hidden ds-btn ds-btn-primary"
         type="submit"
       >
         Συνέχεια

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';
@@ -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';