Update textarea styling and add descriptions

navikt · Jan 11, 2024 · f44e785 · f44e785
1 parent e720f04
commit f44e785
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 10 deletions.
diff --git a/src/components/inputs/textareaWithAutosave/TextareaWithAutosave.module.less b/src/components/inputs/textareaWithAutosave/TextareaWithAutosave.module.less
@@ -8,6 +8,13 @@
     }
 }
 
+.textarea {
+    //description på text area får ikke bredden sin satt likt .textareaLabel - konsekvenser av denne er ikke helt kjent...
+    > :nth-child(2) {
+        width: 100%;
+    }
+}
+
 .textareaLabel {
     //ganske så statisk verdi som setter loading ikonet på enden av textarea. Må sikkert endres dersom textarea endres
     width: 100%;

diff --git a/src/components/inputs/textareaWithAutosave/TextareaWithAutosave.tsx b/src/components/inputs/textareaWithAutosave/TextareaWithAutosave.tsx
@@ -1,5 +1,5 @@
 import * as RemoteData from '@devexperts/remote-data-ts';
-import { Button, Loader, Textarea } from '@navikt/ds-react';
+import { BodyShort, Button, Loader, Textarea } from '@navikt/ds-react';
 import React from 'react';
 import { Control, Controller, FieldValues, Path } from 'react-hook-form';
 
@@ -20,6 +20,7 @@ const TextareaWithAutosave = <T extends object, U extends FieldValues>(props: {
         label: string;
         control: Control<U>;
         value: string;
+        description?: string[];
     };
     save: {
         handleSave: () => void;
@@ -43,20 +44,43 @@ const TextareaWithAutosave = <T extends object, U extends FieldValues>(props: {
                 name={props.textarea.name}
                 render={({ field, fieldState }) => (
                     <Textarea
+                        className={styles.textarea}
                         {...field}
+                        description={
+                            props.textarea.description && (
+                                <div className={styles.textareaLabel}>
+                                    <div>
+                                        {props.textarea.description.map((desc) => (
+                                            <BodyShort key={desc}>{desc}</BodyShort>
+                                        ))}
+                                    </div>
+                                    <div>
+                                        {isSaving ? <Loader size="small" /> : null}
+                                        {!isSaving && RemoteData.isSuccess(props.save.status) ? (
+                                            <SuccessIcon width={20} />
+                                        ) : null}
+                                        {!isSaving && RemoteData.isFailure(props.save.status) ? (
+                                            <ErrorIcon width={20} />
+                                        ) : null}
+                                    </div>
+                                </div>
+                            )
+                        }
                         minRows={5}
                         label={
                             <div className={styles.textareaLabel}>
                                 {props.textarea.label}
-                                <div>
-                                    {isSaving ? <Loader size="small" /> : null}
-                                    {!isSaving && RemoteData.isSuccess(props.save.status) ? (
-                                        <SuccessIcon width={20} />
-                                    ) : null}
-                                    {!isSaving && RemoteData.isFailure(props.save.status) ? (
-                                        <ErrorIcon width={20} />
-                                    ) : null}
-                                </div>
+                                {!props.textarea.description && (
+                                    <div>
+                                        {isSaving ? <Loader size="small" /> : null}
+                                        {!isSaving && RemoteData.isSuccess(props.save.status) ? (
+                                            <SuccessIcon width={20} />
+                                        ) : null}
+                                        {!isSaving && RemoteData.isFailure(props.save.status) ? (
+                                            <ErrorIcon width={20} />
+                                        ) : null}
+                                    </div>
+                                )}
                             </div>
                         }
                         value={field.value ?? ''}

diff --git a/src/pages/saksbehandling/tilbakekreving/Tilbakekreving-nb.ts b/src/pages/saksbehandling/tilbakekreving/Tilbakekreving-nb.ts
@@ -39,7 +39,10 @@ export default {
     'brevForTilbakekreving.skalSendeBrev.ja': 'Ja',
     'brevForTilbakekreving.skalSendeBrev.nei': 'Nei',
     'brevForTilbakekreving.fritekst.label': 'Fritekst til brev',
+    'brevForTilbakekreving.fritekst.description': 'Brevet blir lagret automatisk',
     'brevForTilbakekreving.behandlingsnotat.label': 'Behandlingsnotat',
+    'brevForTilbakekreving.behandlingsnotat.description.p1': 'Behandlingsnotatet blir lagret automatisk',
+    'brevForTilbakekreving.behandlingsnotat.description.p2': 'Behandlingsnotatet blir ikke journalført ',
 
     'oppsummeringTilbakekreving.sendtTilAttestering':
         'Behandlingen er sendt til attestering og oppgave i Gosys er schedulert til oppdatering',

diff --git a/...ing/tilbakekreving/behandleTilbakekreving/brevForTilbakekreving/BrevForTilbakekreving.tsx b/...ing/tilbakekreving/behandleTilbakekreving/brevForTilbakekreving/BrevForTilbakekreving.tsx
@@ -138,6 +138,7 @@ const BrevForTilbakekreving = (props: {
                                         label: formatMessage('brevForTilbakekreving.fritekst.label'),
                                         control: form.control,
                                         value: form.watch('brevtekst') ?? '',
+                                        description: [formatMessage('brevForTilbakekreving.fritekst.description')],
                                     }}
                                     save={{
                                         handleSave: () => {
@@ -170,6 +171,10 @@ const BrevForTilbakekreving = (props: {
                                     label: formatMessage('brevForTilbakekreving.behandlingsnotat.label'),
                                     control: form.control,
                                     value: form.watch('notat') ?? '',
+                                    description: [
+                                        formatMessage('brevForTilbakekreving.behandlingsnotat.description.p1'),
+                                        formatMessage('brevForTilbakekreving.behandlingsnotat.description.p2'),
+                                    ],
                                 }}
                                 save={{
                                     handleSave: () =>