From 2d93d6fa8935d4789e3743d27832004c97ac552f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 6 Sep 2024 14:50:52 +0200
Subject: [PATCH 1/5] fix: validation results should only be shown when not
 valid.

---
 packages/core/src/components/question/Question.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/question/Question.tsx b/packages/core/src/components/question/Question.tsx
index 231c99a..e7f982f 100644
--- a/packages/core/src/components/question/Question.tsx
+++ b/packages/core/src/components/question/Question.tsx
@@ -66,7 +66,7 @@ export const Question: React.FC<QuestionProps> = ({ model, style }) => {
                 questionModel={model}
                 {...model.inputProperties ?? {}}
             />
-            {typeof (model.validationResult?.message) !== "undefined" && model.validationResult?.message !== "" && <ErrorMessage message={model.validationResult?.message} />}
+            {typeof (model.validationResult?.message) !== "undefined" && model.validationResult?.message !== "" && !model.validationResult.isValid && <ErrorMessage message={model.validationResult?.message} />}
         </div>
     );
 }
\ No newline at end of file

From 8a0417cdfdafdb37c85677948b63343b88dd27b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Fri, 6 Sep 2024 15:12:14 +0200
Subject: [PATCH 2/5] fix: added option to override the slide button container

---
 packages/core/src/components/button/Button.tsx         |  9 +++++----
 .../renderers/slide-renderer/SlideRenderer.tsx         |  9 +++++++--
 packages/core/src/state/QuickformState.ts              | 10 +++++++++-
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/packages/core/src/components/button/Button.tsx b/packages/core/src/components/button/Button.tsx
index 7aa31cd..2ffe8fd 100644
--- a/packages/core/src/components/button/Button.tsx
+++ b/packages/core/src/components/button/Button.tsx
@@ -2,9 +2,10 @@
 import React, { PropsWithChildren } from "react";
 import { MouseEventHandler, useEffect, useState } from "react";
 import { quickformtokens } from "../../style/quickFormTokensDefinition";
-import { makeStyles, shorthands } from "@griffel/react";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 
 type BtnContainerProps = {
+    readonly buttonClassName?: string;
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly disabled?: boolean;
@@ -37,7 +38,7 @@ const useButtonStyles = makeStyles({
     }
 })
 
-export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style }) => {
+export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ children, showPressEnter, onClick, disabled, visible, style, className, buttonClassName }) => {
 
     if (typeof visible !== "undefined" && visible === false) {
         return (<></>);
@@ -60,9 +61,9 @@ export const Button: React.FC<PropsWithChildren<BtnContainerProps>> = ({ childre
     }, []);
 
     return (
-        <div className={styles.container}>
+        <div className={mergeClasses(styles.container, className)}>
             <button
-                className={styles.button}
+                className={mergeClasses(styles.button, buttonClassName)}
                 style={style}
                 disabled={disabled}
                 type="button"
diff --git a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
index 388a961..37fdedd 100644
--- a/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
+++ b/packages/core/src/components/renderers/slide-renderer/SlideRenderer.tsx
@@ -4,15 +4,19 @@ import { useQuickForm } from '../../../state/QuickFormContext';
 import { Button, Slide } from '../../index';
 import { useHandleEnterKeypress } from '../../../hooks';
 import { quickformtokens } from "../../../style";
-import { mergeClasses } from '@griffel/react';
+import { makeStyles, mergeClasses } from '@griffel/react';
 import { IconResolver } from '../../icons/IconResolver';
 import { SlideModel } from '../../../model';
 
+const useSlideRenderStyles = makeStyles({
+    button: { display: 'flex', alignItems: 'center', justifyContent: 'center' }
+});
  
 export const SlideRenderer: React.FC = () => {
 
     const { state, goToNextSlide } = useQuickForm();
     const [className, setClassName] = useState(state.classes.slide);
+    const styles = useSlideRenderStyles();
 
     const currentSlide: SlideModel = state.slides[state.currIdx];
 
@@ -47,7 +51,8 @@ export const SlideRenderer: React.FC = () => {
         >
             <Slide model={currentSlide} />
             <Button
-                style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+                className={state.classes.slideButtonContainer}
+                buttonClassName={mergeClasses(styles.button, state.classes.slideButton)}
                 onClick={goToNextSlide}
                 showPressEnter={showPressEnter}
                 children={
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index 31564aa..24008e3 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -3,7 +3,15 @@ import { SlideModel } from "../model/SlideModel";
 import { LayoutDefinition, QuickFormModel } from "../model";
 import { IconType } from "../components/icons/IconResolver";
 
-export type QuickformClassNames = { slide: string, slideIsIn: string, slideIsOut: string, submit:string, ending:string };
+export type QuickformClassNames = {
+    slide: string,
+    slideButton: string,
+    slideButtonContainer: string;
+    slideIsIn: string,
+    slideIsOut: string,
+    submit: string,
+    ending: string
+};
 export type QuickformState = {
     autoAdvanceSlides?: boolean;
     enableQuestionNumbers?: boolean;

From cab15d5df18cd85e5d6056c8d01c5ca5d3a09006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Sat, 7 Sep 2024 09:04:39 +0200
Subject: [PATCH 3/5] fix: lineheight should be the same as fontsize

---
 packages/core/src/components/paragraph/Paragraph.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/core/src/components/paragraph/Paragraph.tsx b/packages/core/src/components/paragraph/Paragraph.tsx
index fd5dccf..bd8bc96 100644
--- a/packages/core/src/components/paragraph/Paragraph.tsx
+++ b/packages/core/src/components/paragraph/Paragraph.tsx
@@ -10,7 +10,7 @@ const useParagraphStyles = makeStyles({
         color: quickformtokens.onSurface,
         fontSize: quickformtokens.questionParagraphFontSize,
         fontWeight: 'unset',
-        lineHeight: '1.4em',
+        lineHeight: quickformtokens.questionParagraphFontSize, // '1.4em',
         ...shorthands.margin(0, 0, quickformtokens.gap1, 0),
         '@media screen and (max-width: 599px)': { fontSize: quickformtokens.paragraphMobileFontSize },
     },

From b66651befc02c7122a4e6063e9f4474d67a59631 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Sat, 7 Sep 2024 16:12:59 +0200
Subject: [PATCH 4/5] fix: Added the slide button styles to submit slide also

---
 packages/core/src/components/submit/Submit.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/src/components/submit/Submit.tsx b/packages/core/src/components/submit/Submit.tsx
index aa9941e..9376cac 100644
--- a/packages/core/src/components/submit/Submit.tsx
+++ b/packages/core/src/components/submit/Submit.tsx
@@ -79,6 +79,8 @@ export const Submit: React.FC<SubmitProps> = ({ model }) => {
             </div>
 
             <Button
+                className={state.classes.slideButtonContainer}
+                buttonClassName={ state.classes.slideButton}
                 showPressEnter={typeof state.showPressEnter !== "undefined" && state.showPressEnter !== false}
                 onClick={handleSubmit}
             >

From a8ff99b00f36c602c630424bec14e5eede133d6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Poul=20Kjeldager=20S=C3=B8rensen?= <pks@delegate.dk>
Date: Mon, 9 Sep 2024 06:14:12 +0200
Subject: [PATCH 5/5] fix: clearing validation result on each new answers

---
 .../baseinput/BaseInputComponent.tsx          |  5 -----
 packages/core/src/model/QuestionModel.ts      |  6 ------
 .../defaults/DefaultQuestionTransformer.ts    |  1 -
 packages/core/src/state/QuickformReducer.ts   |  2 +-
 packages/core/src/state/QuickformState.ts     |  2 --
 .../action-handlers/QuestionActionHandler.ts  | 19 +++++++++++++------
 6 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
index f4269be..1e5efd3 100644
--- a/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
+++ b/packages/core/src/components/question/input-types/baseinput/BaseInputComponent.tsx
@@ -107,12 +107,7 @@ export const BaseInputComponent: React.FC<BaseInputComponentProps> = ({ question
         if (span) {
             span.addEvent("BaseInputComponent:handleChange", { 'value': event.target.value });
         }
-        //EXPLAIN: WHY IS THIS HERE? If no reason, lets remove.
-        if (event.target.value === "")
-            questionModel.errorMsg = "";
 
-
-       // setText(() => event.target.value);
         answerQuestion(questionModel.logicalName, event.target.value, true);
         resize();
     }
diff --git a/packages/core/src/model/QuestionModel.ts b/packages/core/src/model/QuestionModel.ts
index fa8916e..f4c1782 100644
--- a/packages/core/src/model/QuestionModel.ts
+++ b/packages/core/src/model/QuestionModel.ts
@@ -13,12 +13,6 @@ export type QuestionModel<TProps = InputPropertiesTypes> = {
      */
     dataType: "string" | "number" | "boolean";
 
-    /**
-     * Displays an error message adjacent to the question or input component, 
-     * informing the user of validation issues with their input.
-     */
-    errorMsg: string;
-
     /**
      * Optional properties related to the input, defined by the generic type TProps.
      */
diff --git a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
index 649b420..7f61393 100644
--- a/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
+++ b/packages/core/src/services/defaults/DefaultQuestionTransformer.ts
@@ -21,7 +21,6 @@ function mapJsonQuestionToModelQuestion(questionKey: string, question: QuestionJ
     return {
         answered: hasDefaultValueOrPayload,
         dataType: question.dataType ?? "string",
-        errorMsg: "",
         inputProperties: parseInputProperties(question),
         inputType: question.inputType ?? "text",
         intermediate: false,
diff --git a/packages/core/src/state/QuickformReducer.ts b/packages/core/src/state/QuickformReducer.ts
index 0a60667..8a7e16e 100644
--- a/packages/core/src/state/QuickformReducer.ts
+++ b/packages/core/src/state/QuickformReducer.ts
@@ -57,7 +57,7 @@ export const quickformReducer = (state: QuickformState, action: QuickformAction)
             }
 
             state = QuestionActionHandler.answerQuestion(state, action);
-
+  
             // Validate the question input
             if (!action.intermediate) {
                 const timestamp = new Date().getTime();
diff --git a/packages/core/src/state/QuickformState.ts b/packages/core/src/state/QuickformState.ts
index 24008e3..a9dac21 100644
--- a/packages/core/src/state/QuickformState.ts
+++ b/packages/core/src/state/QuickformState.ts
@@ -79,7 +79,6 @@ export const defaultData: QuickFormModel = {
         buttonText: "Submit",
         submitFields: [
             {
-                errorMsg: "",
                 intermediate: false,
                 visited: false,
                 questionKey: "question1",
@@ -93,7 +92,6 @@ export const defaultData: QuickFormModel = {
                 output: {}
             },
             {
-                errorMsg: "",
                 intermediate: false,
                 visited: false,
                 questionKey: "question1",
diff --git a/packages/core/src/state/action-handlers/QuestionActionHandler.ts b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
index 9061189..6ebee67 100644
--- a/packages/core/src/state/action-handlers/QuestionActionHandler.ts
+++ b/packages/core/src/state/action-handlers/QuestionActionHandler.ts
@@ -53,17 +53,14 @@ export class QuestionActionHandler {
     };
 
     static answerQuestion = (state: QuickformState, { logicalName, output, intermediate, validationResult }: QuickformAnswerQuestionAction) => {
-        const propertiesToUpdate = {
+        const propertiesToUpdate: Partial<QuestionModel> = {
             answered: output !== undefined && output !== '' && !intermediate,
             intermediate: intermediate,
             visited: true,
             output: output,
-            errorMsg: validationResult?.message,
+            validationResult: undefined
         };
-
-        // DISCUSS, should answer clear error message ?
-        // This is currently undergoing changes since we have decided to move errorMsg to both questionModel and globally.
-        // state.errorMsg = '';
+ 
 
         return this.updateQuestionProperties(state, logicalName, propertiesToUpdate);
     };
@@ -76,6 +73,15 @@ export class QuestionActionHandler {
         });
     };
 
+    /**
+     * Update the validation result of a question
+     * The actually update is only done if the timestamp of the current validation result matches the timestamp of the action
+     * @param state - the current state
+     * @param logicalName - the logical name of the question
+     * @param validationResult - the new validation result
+     * @param timestamp - the timestamp of the action
+     * @returns the updated state
+     */
     static updateQuestionValidation = (state: QuickformState, logicalName: string, validationResult: ValidationResult, timestamp: number) => {
         const currentValidationResult = findQuestionByLogicalName(logicalName, getAllQuestions(state.slides))?.validationResult;
         if (currentValidationResult?.timestamp !== timestamp) {
@@ -98,4 +104,5 @@ export class QuestionActionHandler {
         }
         return await QuestionActionHandler.inputValidator(questionRef, state);
     }
+    
 }
\ No newline at end of file