lagt til grå boks hvis ingen aktivitet er valgt

Author: kmriise

src/components/ActivitySelector.module.css

@@ -12,8 +12,7 @@
 }
 
 .summary {
-    justify-self: flex-start;
-    width: 20rem;
+    width: 25rem;
     margin: auto;
 }
 

src/components/ActivitySummary.tsx

@@ -12,6 +12,10 @@ export default function ActivitySummary(props: ActivitySummaryProps) {
   let illnessDays = 0;
   let measuresDays = 0;
   let vacationDays = 0;
+  const hasActivity = () => {
+    if (workHours + illnessDays + measuresDays + vacationDays > 0) return true;
+    return false;
+  };
   for (const key in savedDates) {
     const currentData = savedDates[key];
 
@@ -69,13 +73,20 @@ export default function ActivitySummary(props: ActivitySummaryProps) {
       </div>
     );
   }
+  const summaryNothing = (
+    <div className={styles.summaryLine + " " + styles.none}>
+      Ingen aktivitet utenom å være arbeidssøker
+    </div>
+  );
+
   return (
-    <div className={styles.summary}>
+    <div>
       <div className={styles.summaryHeader}>Sammenlagt for meldeperioden:</div>
-      {summaryWork}
-      {summaryIllness}
-      {summaryMeasures}
-      {summaryVacation}
+      {hasActivity() && summaryWork}
+      {hasActivity() && summaryIllness}
+      {hasActivity() && summaryMeasures}
+      {hasActivity() && summaryVacation}
+      {!hasActivity() && summaryNothing}
     </div>
   );
 }

src/components/StepFillDays.tsx

@@ -1,5 +1,5 @@
 import styles from "./ActivitySelector.module.css";
-import { Heading } from "@navikt/ds-react";
+import { Heading, Panel } from "@navikt/ds-react";
 import Spacer from "./Spacer";
 import ActivitySelector from "./ActivitySelector";
 import Error from "./Error";
@@ -50,8 +50,9 @@ export default function StepFillDays(props: CommonFormProps) {
         savedDates={savedDates}
         setSavedDates={setSavedDates}
       />
-
-      <ActivitySummary savedDates={savedDates} />
+      <Panel className={styles.summary}>
+        <ActivitySummary savedDates={savedDates} />
+      </Panel>
 
       <div className={styles.summary}>
         <Error

src/components/StepSummary.module.css

@@ -0,0 +1,3 @@
+.summary {
+    display: flex;
+}

src/components/StepSummary.tsx

@@ -7,6 +7,7 @@ import { FormEvent, useState } from "react";
 import { format } from "date-fns";
 import { ActivityType } from "../models/Data";
 import ActivitySummary from "./ActivitySummary";
+import styles from "./StepSummary.module.css";
 
 export default function StepSummary(props: CommonFormProps) {
   const {
@@ -64,10 +65,10 @@ export default function StepSummary(props: CommonFormProps) {
         </Heading>
         <BodyShort>{questionWork ? "Ja" : "Nei"}</BodyShort>
       </Panel>
-      <Panel>
+      <Panel className={styles.summary}>
         <ActivitySummary savedDates={savedDates} />
       </Panel>
-      <Panel>
+      <Panel className={styles.summary}>
         <Heading spacing level="4" size="small">
           Ønsker du fortsatt å være registrert hos NAV som arbeidssøker de neste
           14 dager?