Legger til et banner på stegene som vi bruker i behandlingsflyten

components/SoknadFormWrapper/SoknadFormWrapper.module.css

@@ -60,3 +60,9 @@
   height: 50px;
   align-self: center;
 }
+
+.banner {
+  padding: 0.75rem;
+  border-radius: 10px;
+  background-color: var(--a-data-surface-5-subtle);
+}

components/SoknadFormWrapper/SoknadFormWrapper.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
-import { Button, Detail } from '@navikt/ds-react';
+import { Button, Detail, Heading } from '@navikt/ds-react';
 import * as classes from './SoknadFormWrapper.module.css';
 import { useAppStateContext } from 'context/appStateContext';
 import { FormErrorSummary, SøknadValidationError } from 'components/schema/FormErrorSummary';
 import { useIntl } from 'react-intl';
 import LagreModal from './LagreModal';
 import SlettModal from './SlettModal';
+import { isDev, isMock } from 'utils/environments';
+import { useStepWizard } from 'hooks/StepWizardHook';
 
 interface Props {
   children: React.ReactNode;
@@ -32,6 +34,12 @@ const SøknadFormWrapper = (props: Props) => {
   const [visLagreModal, setVisLagreModal] = useState<boolean>(false);
   const [visAvbrytModal, setVisAvbrytModal] = useState<boolean>(false);
 
+  const { currentStep } = useStepWizard();
+
+  const stegSomBrukesIKelvin: string[] = ['BARNETILLEGG', 'YRKESSKADE', 'STUDENT'];
+  const skalViseBannerForOmStegBrukesIKelvin =
+    (isMock() || isDev()) && stegSomBrukesIKelvin.includes(currentStep.name);
+
   return (
     <>
       <form
@@ -41,6 +49,11 @@ const SøknadFormWrapper = (props: Props) => {
         }}
         className={`${classes?.formContent} ${className}`}
       >
+        {skalViseBannerForOmStegBrukesIKelvin && (
+          <div className={classes.banner}>
+            <Heading size={'small'}>Dette steget er koblet til Kelvin</Heading>
+          </div>
+        )}
         {errors && <FormErrorSummary errors={errors} data-testid={'error-summary'} />}
         {children}
         <div className={classes?.fourButtonWrapper}>