diff --git a/packages/design/src/Form/components/Fieldset/index.tsx b/packages/design/src/Form/components/Fieldset/index.tsx index 7ae5c611..54e925f7 100644 --- a/packages/design/src/Form/components/Fieldset/index.tsx +++ b/packages/design/src/Form/components/Fieldset/index.tsx @@ -6,9 +6,9 @@ import { type PatternComponent } from '../../../Form'; const Fieldset: PatternComponent = props => { return ( -
+
{props.legend !== '' && props.legend !== undefined && ( - + {props.legend} )} diff --git a/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx b/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx index bc0cbfac..7c4cb331 100644 --- a/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx +++ b/packages/design/src/Form/components/RadioGroup/RadioGroup.tsx @@ -8,8 +8,8 @@ import { type PatternComponent } from '../../../Form'; export const RadioGroupPattern: PatternComponent = props => { const { register } = useFormContext(); return ( -
- {props.legend} +
+ {props.legend} {props.options.map((option, index) => { return (
diff --git a/packages/design/src/Form/components/TextInput/index.tsx b/packages/design/src/Form/components/TextInput/index.tsx index ad97c117..3c3b20ec 100644 --- a/packages/design/src/Form/components/TextInput/index.tsx +++ b/packages/design/src/Form/components/TextInput/index.tsx @@ -10,7 +10,7 @@ const TextInput: PatternComponent = props => { return (
diff --git a/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx index 8932e53f..64655e21 100644 --- a/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/CheckboxPatternEdit.tsx @@ -24,7 +24,9 @@ const CheckboxPatternEdit: PatternEditComponent = ({ editComponent={} > ) : ( - +
+ +
)} ); @@ -37,7 +39,7 @@ const CheckboxEditComponent = ({ pattern }: { pattern: CheckboxPattern }) => { const label = getFieldState('label'); return ( -
+
diff --git a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx index b951b683..5176941f 100644 --- a/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/FieldsetEdit.tsx @@ -12,6 +12,7 @@ import { PatternEditForm } from './common/PatternEditForm'; import { usePatternEditFormContext } from './common/hooks'; import { FieldsetPattern } from '@atj/forms/src/patterns/fieldset'; import classNames from 'classnames'; +import styles from '../formEditStyles.module.css'; const FieldsetEdit: PatternEditComponent = ({ focus, @@ -39,8 +40,8 @@ const FieldsetPreview: PatternComponent = props => { <>
{pattern && pattern.data.patterns.length === 0 && ( -
-
+
+

Empty sections will not display. @@ -100,6 +101,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => { defaultValue={pattern.data.legend} {...register('legend')} type="text" + autoFocus >

diff --git a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx index 0c8130bc..b06ede51 100644 --- a/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/FormSummaryEdit.tsx @@ -23,7 +23,9 @@ const FormSummaryEdit: PatternEditComponent = ({ editComponent={} > ) : ( - +
+ +
)} ); @@ -57,6 +59,7 @@ const EditComponent = ({ pattern }: { pattern: Pattern }) => { {...register('title')} defaultValue={pattern.data.title} type="text" + autoFocus >
diff --git a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx index 341c6c68..995b9bfc 100644 --- a/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/InputPatternEdit.tsx @@ -25,7 +25,9 @@ const InputPatternEdit: PatternEditComponent = ({ editComponent={} > ) : ( - +
+ +
)} ); @@ -72,6 +74,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => { defaultValue={pattern.data.label} {...register('label')} type="text" + autoFocus >
diff --git a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx index a8b75c15..46632a30 100644 --- a/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PageEdit.tsx @@ -14,6 +14,13 @@ import { PatternPreviewSequence } from './PreviewSequencePattern'; import styles from '../formEditStyles.module.css'; export const PageEdit: PatternEditComponent = props => { + const handleParentClick = (event: React.MouseEvent) => { + if (event.target === event.currentTarget) { + // Trigger focus or any other action you want when the parent div is clicked + event.currentTarget.focus(); + } + }; + return ( <> {props.focus ? ( @@ -24,6 +31,8 @@ export const PageEdit: PatternEditComponent = props => { ) : (
{ id={fieldId('title')} defaultValue={pattern.data.title} {...register('title')} + autoFocus >
@@ -88,4 +98,4 @@ const PageEditComponent = ({ pattern }: { pattern: PagePattern }) => {
); -}; +}; \ No newline at end of file diff --git a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx index d839e7ab..9ce5cc18 100644 --- a/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/ParagraphPatternEdit.tsx @@ -25,7 +25,9 @@ const ParagraphPatternEdit: PatternEditComponent = ({ editComponent={} > ) : ( - +
+ +
)} ); @@ -62,6 +64,7 @@ const EditComponent = ({ patternId }: { patternId: PatternId }) => { rows={4} {...register('text')} defaultValue={pattern.data.text} + autoFocus >
diff --git a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx index 028ea445..6bc03617 100644 --- a/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx +++ b/packages/design/src/FormManager/FormEdit/components/PreviewSequencePattern/DraggableList.tsx @@ -87,16 +87,16 @@ const SortableItem = ({ return (
-
+
diff --git a/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx b/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx index c4cbd4fe..85e0b3fa 100644 --- a/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx +++ b/packages/design/src/FormManager/FormEdit/components/RadioGroupPatternEdit.tsx @@ -11,6 +11,7 @@ import { PatternEditActions } from './common/PatternEditActions'; import { PatternEditForm } from './common/PatternEditForm'; import { usePatternEditFormContext } from './common/hooks'; import { en as message } from '@atj/common/src/locales/en/app'; +import styles from '../formEditStyles.module.css'; const RadioGroupPatternEdit: PatternEditComponent = ({ focus, @@ -24,7 +25,9 @@ const RadioGroupPatternEdit: PatternEditComponent = ({ editComponent={} > ) : ( - +
+ +
)} ); @@ -38,7 +41,7 @@ const EditComponent = ({ pattern }: { pattern: RadioGroupPattern }) => { return (
-
+
@@ -75,7 +79,7 @@ const EditComponent = ({ pattern }: { pattern: RadioGroupPattern }) => { {optionLabel.error.message} ) : null} -
+
{ ); })}