Justerer spacing i feilmeldingslinja. (#6721)

navikt · Oct 22, 2024 · 4fa2830 · 4fa2830
1 parent d3c9ed8
commit 4fa2830
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/packages/sak-dekorator/src/ErrorMessagePanel.tsx b/packages/sak-dekorator/src/ErrorMessagePanel.tsx
@@ -1,6 +1,6 @@
 import { decodeHtmlEntity } from '@fpsak-frontend/utils';
 import { XMarkIcon } from '@navikt/aksel-icons';
-import { Button, Detail, HGrid } from '@navikt/ds-react';
+import { Button, Detail, HStack } from '@navikt/ds-react';
 import React, { useMemo, useState } from 'react';
 import { FormattedMessage, WrappedComponentProps, injectIntl } from 'react-intl';
 import { v4 as uuidv4 } from 'uuid';
@@ -49,7 +49,7 @@ export const ErrorMessagePanel = (props: OwnProps & WrappedComponentProps) => {
  return (
  <div className={styles.container}>
  {errorMessagesWithId.map((message, index) => (
- <HGrid gap="1" columns={{ xs: '11fr 1fr' }} key={message.id}>
+ <HStack gap="3" key={message.id}>
  <Detail className={styles.wordWrap}>{`${decodeHtmlEntity(message.message)} `}</Detail>
  {message.additionalInfo && (
  <Detail>
@@ -64,7 +64,7 @@ export const ErrorMessagePanel = (props: OwnProps & WrappedComponentProps) => {
  </a>
  </Detail>
  )}
- </HGrid>
+ </HStack>
  ))}
  <div className={styles.lukkContainer}>
  <Button

diff --git a/packages/sak-dekorator/src/HeaderWithErrorPanel.stories.tsx b/packages/sak-dekorator/src/HeaderWithErrorPanel.stories.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import HeaderWithErrorPanel from './HeaderWithErrorPanel';
 
 export default {
@@ -21,7 +21,13 @@ export const visDekoratorUtenFeilmeldinger = () => (
 );
 
 export const visDekoratorMedFeilmeldinger = () => {
- const [errorMessages, removeErrorMessages] = useState([{ message: 'Feilmelding 1' }, { message: 'Feilmelding 2' }]);
+ const [errorMessages, removeErrorMessages] = useState([
+ { message: 'Feilmelding 1' },
+ {
+ message: 'En lang feilmelding som også har ekstra informasjon som kan åpnes i en popup.',
+ additionalInfo: { feilmelding: 'Detaljert feilmelding', url: '' },
+ },
+ ]);
  return (
  <div style={{ marginLeft: '-56px' }}>
  <HeaderWithErrorPanel