Småfiks av console-støy (#3466)

* Fikser transient prop for styled component slik at attributtet ikke blir videreført til diven under * Fikser transient prop på EtikettKnapp * Lager egne props for StyledButton, de skal ikke være helt like som Filterknapp * Legger til manglende key-prop på mappede elementer
navikt · Dec 16, 2024 · bdd5554 · bdd5554
1 parent 1299b6e
commit bdd5554
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 19 deletions.
diff --git a/src/frontend/komponenter/Fagsak/Behandlingsresultat/EndretUtbetalingAndelSkjema.tsx b/src/frontend/komponenter/Fagsak/Behandlingsresultat/EndretUtbetalingAndelSkjema.tsx
@@ -245,7 +245,12 @@ const EndretUtbetalingAndelSkjema: React.FunctionComponent<IEndretUtbetalingAnde
                             )
                             .map(utbetaling => {
                                 return (
-                                    <Radio name={'utbetaling'} value={utbetaling} id={utbetaling}>
+                                    <Radio
+                                        name={'utbetaling'}
+                                        value={utbetaling}
+                                        id={utbetaling}
+                                        key={utbetaling}
+                                    >
                                         {utbetalingTilLabel(utbetaling)}
                                     </Radio>
                                 );

diff --git a/src/frontend/komponenter/Fagsak/Behandlingsresultat/TidslinjeEtikett.tsx b/src/frontend/komponenter/Fagsak/Behandlingsresultat/TidslinjeEtikett.tsx
@@ -18,19 +18,19 @@ interface IEtikettProp {
     etikett: Etikett;
 }
 
-const EtikettKnapp = styled(FamilieBaseKnapp)<{ disabled: boolean; valgt: boolean }>`
-    padding: 3px 3px 3px ${({ valgt }) => (valgt ? '5px' : '3px')};
+const EtikettKnapp = styled(FamilieBaseKnapp)<{ disabled: boolean; $valgt: boolean }>`
+    padding: 3px 3px 3px ${({ $valgt }) => ($valgt ? '5px' : '3px')};
     width: 90%;
     text-align: left;
     cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
-    border-left: ${({ valgt }) => (valgt ? `1px solid ${ABorderSubtle}` : 'none')};
+    border-left: ${({ $valgt }) => ($valgt ? `1px solid ${ABorderSubtle}` : 'none')};
 
     > span {
-        text-decoration: ${({ disabled, valgt }) => (disabled || valgt ? 'none' : 'underline')};
-        font-weight: ${({ valgt }) => (valgt ? 'bold' : 'normal')};
-        color: ${({ disabled, valgt }) => {
+        text-decoration: ${({ disabled, $valgt }) => (disabled || $valgt ? 'none' : 'underline')};
+        font-weight: ${({ $valgt }) => ($valgt ? 'bold' : 'normal')};
+        color: ${({ disabled, $valgt }) => {
             if (disabled) return ATextDefault;
-            else if (valgt) return ATextActionSelected;
+            else if ($valgt) return ATextActionSelected;
             else return ATextAction;
         }};
     }
@@ -78,7 +78,7 @@ const TidslinjeEtikett: React.FunctionComponent<IEtikettProp> = ({ etikett }) =>
         <EtikettKnapp
             aria-label={etikett.label}
             disabled={aktivtTidslinjeVindu.vindu.id === TidslinjeVindu.TRE_ÅR}
-            valgt={
+            $valgt={
                 !!aktivEtikett && aktivEtikett.date.toDateString() === etikett.date.toDateString()
             }
             onClick={onEtikettClick}

diff --git a/src/frontend/komponenter/Felleskomponenter/Hendelsesoversikt/komponenter/Filterknapp.tsx b/src/frontend/komponenter/Felleskomponenter/Hendelsesoversikt/komponenter/Filterknapp.tsx
@@ -20,7 +20,13 @@ interface IFilterknappProps {
     onClick: () => void;
 }
 
-const StyledButton = styled(FamilieBaseKnapp)<IFilterknappProps>`
+interface IStyledButtonProps {
+    $aktiv?: boolean;
+    disabled?: boolean;
+    onClick: () => void;
+}
+
+const StyledButton = styled(FamilieBaseKnapp)<IStyledButtonProps>`
     min-height: 50px;
     width: 7.5rem;
     display: flex;
@@ -29,23 +35,23 @@ const StyledButton = styled(FamilieBaseKnapp)<IFilterknappProps>`
     align-items: center;
     transition: box-shadow 0.1s ease-in-out;
     cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
-    box-shadow: ${({ aktiv }) => (aktiv ? `inset 0 -5px 0 -1px ${ABorderFocus}` : '')};
+    box-shadow: ${({ $aktiv }) => ($aktiv ? `inset 0 -5px 0 -1px ${ABorderFocus}` : '')};
 
     > * {
         transition: fill 0.1s ease-in-out;
-        fill: ${({ aktiv, disabled }) => {
+        fill: ${({ $aktiv, disabled }) => {
             if (disabled) {
                 return ATextSubtle;
-            } else if (aktiv) {
+            } else if ($aktiv) {
                 return ATextAction;
             } else {
                 return ATextDefault;
             }
         }};
-        color: ${({ aktiv, disabled }) => {
+        color: ${({ $aktiv, disabled }) => {
             if (disabled) {
                 return ATextSubtle;
-            } else if (aktiv) {
+            } else if ($aktiv) {
                 return ATextAction;
             } else {
                 return '';
@@ -65,7 +71,7 @@ const Filterknapp = ({ children, disabled = false, onClick, aktiv }: IFilterknap
             id={`filter_${randomUUID()}`}
             onClick={onClick}
             disabled={disabled}
-            aktiv={aktiv}
+            $aktiv={aktiv}
         >
             {children}
         </StyledButton>

diff --git a/src/frontend/komponenter/Felleskomponenter/Skjemasteg/Skjemasteg.tsx b/src/frontend/komponenter/Felleskomponenter/Skjemasteg/Skjemasteg.tsx
@@ -36,10 +36,10 @@ interface IProps extends PropsWithChildren {
     steg: BehandlingSteg;
 }
 
-const Container = styled.div<{ maxWidthStyle: string }>`
+const Container = styled.div<{ $maxWidthStyle: string }>`
     position: relative;
     padding: ${ASpacing10};
-    max-width: ${({ maxWidthStyle }) => maxWidthStyle};
+    max-width: ${({ $maxWidthStyle }) => $maxWidthStyle};
 `;
 
 const StyledErrorMessage = styled(ErrorMessage)`
@@ -123,7 +123,7 @@ const Skjemasteg: React.FunctionComponent<IProps> = ({
                 </StyledAlert>
             )}
 
-            <Container id={'skjemasteg'} className={className} maxWidthStyle={maxWidthStyle}>
+            <Container id={'skjemasteg'} className={className} $maxWidthStyle={maxWidthStyle}>
                 <Heading size={'large'} level={'1'} children={tittel} spacing />
 
                 {children}