fjernet de fleste første spørsmål og lagt på introduksjons-step

Author: kmriise

src/components/Introduction.tsx

@@ -0,0 +1,65 @@
+import {
+  Checkbox,
+  ConfirmationPanel,
+  Heading,
+  Radio,
+  RadioGroup,
+} from "@navikt/ds-react";
+import Spacer from "./Spacer";
+import NavPanelWithButtons from "./NavPanelWithButtons";
+import { CommonFormProps } from "../pages/form";
+import { FormEvent, useState } from "react";
+
+export default function Introduction(props: CommonFormProps) {
+  const {
+    questionWork,
+    setQuestionWork,
+    questionMeasures,
+    setQuestionMeasures,
+    questionIllness,
+    setQuestionIllness,
+    questionVacation,
+    setQuestionVacation,
+    nextStep,
+    showLoader,
+  } = props;
+
+  const [isChecked, setIsChecked] = useState<boolean>(false);
+  const [notShow, setNotShow] = useState<boolean>(false);
+
+  // Check form
+  const checkForm = (event: FormEvent) => {
+    setIsChecked(true);
+
+    if (true) {
+      nextStep(event);
+    }
+  };
+
+  // Render
+  return (
+    <>
+      <Heading level="3" size="large">
+        Introduksjon
+      </Heading>
+      <p>Slik fyller du ut dagpenger!</p>
+      <Spacer />
+
+      <ConfirmationPanel
+        checked={notShow}
+        label="Ikke vis denne introduksjonen igjen"
+        onChange={() => setNotShow((notShow) => !notShow)}
+      >
+        Her kan du velge å ikke se denne introduksjonen mer
+      </ConfirmationPanel>
+
+      <Spacer />
+
+      <NavPanelWithButtons
+        nextText="Neste steg"
+        nextOnClick={checkForm}
+        showLoader={showLoader}
+      />
+    </>
+  );
+}

src/components/Step1.tsx

@@ -5,7 +5,6 @@ import { CommonFormProps } from "../pages/form";
 import { FormEvent, useState } from "react";
 
 export default function Step1(props: CommonFormProps) {
-
   const {
     questionWork,
     setQuestionWork,
@@ -16,97 +15,65 @@ export default function Step1(props: CommonFormProps) {
     questionVacation,
     setQuestionVacation,
     nextStep,
-    showLoader
+    showLoader,
   } = props;
 
   const [isChecked, setIsChecked] = useState<boolean>(false);
 
   // Validators
   const questionWorkValidated = () => {
     return questionWork != null;
-  }
+  };
   const questionMeasuresValidated = () => {
     return questionMeasures != null;
-  }
+  };
   const questionIllnessValidated = () => {
     return questionIllness != null;
-  }
+  };
   const questionVacationValidated = () => {
     return questionVacation != null;
-  }
+  };
 
   // Check form
   const checkForm = (event: FormEvent) => {
     setIsChecked(true);
 
-    if (questionWorkValidated() &&
-      questionMeasuresValidated() &&
-      questionIllnessValidated() &&
-      questionVacationValidated()) {
+    if (questionWorkValidated()) {
       nextStep(event);
     }
-  }
+  };
 
   // Render
   return (
     <>
-      <Heading level="3" size="large">Aktivitet siste 14 dager</Heading>
+      <Heading level="3" size="large">
+        Aktivitet siste 14 dager
+      </Heading>
 
       <Spacer />
 
       <RadioGroup
-        legend="Har du vært i arbeid de siste 14 dager?"
-        description="Med &quot;arbeid&quot; mener vi aktivitet som kan gi inntekt eller som normalt ville ha vært betalt"
+        legend="Har du vært i annen aktivitet enn det å være arbeidssøker i løpet av denne perioden?"
+        description='Med "arbeid" mener vi aktivitet som kan gi inntekt eller som normalt ville ha vært betalt'
         onChange={(val: boolean) => setQuestionWork(val)}
         value={questionWork}
-        error={isChecked && !questionWorkValidated() && "Du må svare på dette spørsmålet"}
-      >
-        <Radio value={true}>Ja</Radio>
-        <Radio value={false}>Nei</Radio>
-      </RadioGroup>
-
-      <Spacer />
-
-      <RadioGroup
-        legend="Har du deltatt på tiltak, kurs eller utdanning?"
-        description="Med &quot;tiltak&quot; mener vi aktivitet som kan gi..."
-        onChange={(val: boolean) => setQuestionMeasures(val)}
-        value={questionMeasures}
-        error={isChecked && !questionMeasuresValidated() && "Du må svare på dette spørsmålet"}
-      >
-        <Radio value={true}>Ja</Radio>
-        <Radio value={false}>Nei</Radio>
-      </RadioGroup>
-
-      <Spacer />
-
-      <RadioGroup
-        legend="Har du vært syk?"
-        description="Har du vært forhindret fra å ta arbeid, delta på tiltak eller være arbeidssøker fordi du har vært syk?"
-        onChange={(val: boolean) => setQuestionIllness(val)}
-        value={questionIllness}
-        error={isChecked && !questionIllnessValidated() && "Du må svare på dette spørsmålet"}
-      >
-        <Radio value={true}>Ja</Radio>
-        <Radio value={false}>Nei</Radio>
-      </RadioGroup>
-
-      <Spacer />
-
-      <RadioGroup
-        legend="Har du hatt ferie eller annet fravær?"
-        description="Har du hatt ferie eller annet fravær slik at du ikke har kunnet ta arbeid, delta på tiltak eller være arbeidssøker?"
-        onChange={(val: boolean) => setQuestionVacation(val)}
-        value={questionVacation}
-        error={isChecked && !questionVacationValidated() && "Du må svare på dette spørsmålet"}
+        error={
+          isChecked &&
+          !questionWorkValidated() &&
+          "Du må svare på dette spørsmålet"
+        }
       >
         <Radio value={true}>Ja</Radio>
         <Radio value={false}>Nei</Radio>
       </RadioGroup>
 
       <Spacer />
 
-      <NavPanelWithButtons nextText="Neste steg" nextOnClick={checkForm} showLoader={showLoader} />
+      <NavPanelWithButtons
+        nextText="Neste steg"
+        nextOnClick={checkForm}
+        showLoader={showLoader}
+      />
     </>
   );
 }

src/pages/form.tsx

@@ -19,6 +19,7 @@ import { ActivityType, Data, Day, SavedDates } from "../models/Data";
 import { LoadedData } from "../models/LoadedData";
 import { fromStringToDate } from "../utils/date.utils";
 import CenteredLoader from "../components/CenteredLoader";
+import Introduction from "../components/Introduction";
 
 export type CommonFormProps = {
   startDate: Date;
@@ -260,10 +261,9 @@ export default function Page() {
       {!showReceipt && (
         <CustomStepper numberOfSteps={maxStep} currentStep={currentStep} />
       )}
-
-      {currentStep == 1 && <Step1 {...commonFormProps} />}
-      {currentStep == 2 && <Step2 {...commonFormProps} />}
-      {currentStep == 3 && <Step3 {...commonFormProps} />}
+      {currentStep == 1 && <Introduction {...commonFormProps} />}
+      {currentStep == 2 && <Step1 {...commonFormProps} />}
+      {currentStep == 3 && <Step2 {...commonFormProps} />}
       {currentStep == 4 && <Step4 {...commonFormProps} />}
       {showReceipt && <Receipt />}
 

src/styles/globals.css

@@ -18,7 +18,7 @@ a {
   box-sizing: border-box;
 }
 
-@media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: light) {
   html {
     color-scheme: dark;
   }