Merge pull request #1206 from navikt/samtidig-uttak-visning

Første utkast for visning av samtidig uttak Former-commit-id: 146656eff21e43683cf03e288bd937fa80ab7f6d
navikt · Aug 29, 2019 · 8617547 · 8617547
2 parents 4fd4b27 + d252aeb
commit 8617547
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 6 deletions.
diff --git a/src/app/components/uttaksplanlegger/Uttaksplanlegger.tsx b/src/app/components/uttaksplanlegger/Uttaksplanlegger.tsx
@@ -206,7 +206,8 @@ class Uttaksplanlegger extends React.Component<Props, State> {
                         info={infoOmTaptUttakVedUttakEtterSeksUkerFarMedmor}
                         onLeggTilOpphold={this.settInnNyttOpphold}
                     />
-                )
+                ),
+                erSamtidigUttak: false
             });
         }
 

diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/Periodeliste.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/Periodeliste.tsx
@@ -136,6 +136,7 @@ class Periodeliste extends React.Component<Props> {
                                     tittel={item.tittel}
                                     beskrivelse={item.beskrivelse}
                                     onToggle={onToggle}
+                                    erSamtidigUttak={false}
                                 />
                             ))}
                         {filteredPerioder.map((periode) => {

diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodeHeader.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/elements/PeriodeHeader.tsx
@@ -7,7 +7,9 @@ import {
     Periodetype,
     StønadskontoType,
     isForeldrepengerFørFødselUttaksperiode,
-    isUtsettelseAnnenPart
+    isUtsettelseAnnenPart,
+    isUttakAnnenPart,
+    isUttaksperiode
 } from '../../../../../types/uttaksplan/periodetyper';
 import { Tidsperioden, getValidTidsperiode } from '../../../../../util/uttaksplan/Tidsperioden';
 import getMessage from 'common/util/i18nUtils';
@@ -90,12 +92,16 @@ const PeriodeHeader: React.StatelessComponent<Props & InjectedIntlProps> = ({
     }
     const foreldernavn = getPeriodeForelderNavn(periode, navnPåForeldre);
     const periodetittel = getPeriodeTittel(intl, periode, navnPåForeldre);
+    const samtidigUttakAnnenPart = isUttakAnnenPart(periode) && periode.ønskerSamtidigUttak === true;
+    const samtidigUttak = isUttaksperiode(periode) && periode.ønskerSamtidigUttak === true;
+
     return (
         <PeriodelisteItemHeader
             type="periode"
             isOpen={isOpen}
             melding={melding}
             tittel={periodetittel}
+            erSamtidigUttak={samtidigUttak || samtidigUttakAnnenPart}
             beskrivelse={
                 <>
                     {varighetString}

diff --git a/...p/components/uttaksplanlegger/components/periodeliste/elements/PeriodelisteItemHeader.tsx b/...p/components/uttaksplanlegger/components/periodeliste/elements/PeriodelisteItemHeader.tsx
@@ -18,6 +18,7 @@ interface Props {
     beskrivelse?: React.ReactNode;
     melding?: VeilederMessage;
     tidsperiode?: Tidsperiode;
+    erSamtidigUttak?: boolean;
     type: 'periode' | 'info';
 }
 
@@ -46,7 +47,8 @@ const PeriodelisteItemHeader: React.StatelessComponent<Props> = ({
     tittel,
     beskrivelse,
     melding,
-    tidsperiode
+    tidsperiode,
+    erSamtidigUttak
 }) => {
     return (
         <div className={BEM.modifier(type)}>
@@ -58,8 +60,13 @@ const PeriodelisteItemHeader: React.StatelessComponent<Props> = ({
                     {ikon}
                 </div>
                 <div className={BEM.element('beskrivelse')}>
-                    <Element tag="h1">{tittel}</Element>
-                    {beskrivelse && <Normaltekst>{beskrivelse}</Normaltekst>}
+                    <div className={BEM.element('beskrivelse__tekst')}>
+                        <Element tag="h1">{tittel}</Element>
+                        {beskrivelse && <Normaltekst>{beskrivelse}</Normaltekst>}
+                    </div>
+                    <div>
+                        {erSamtidigUttak && <div className={BEM.element('samtidig-uttak-punkt')}>Samtidig uttak</div>}
+                    </div>
                 </div>
                 {melding && (
                     <div className={BEM.element('advarsel')}>

diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/elements/periodeheader.less b/src/app/components/uttaksplanlegger/components/periodeliste/elements/periodeheader.less
@@ -25,15 +25,34 @@
         line-height: 0;
     }
     &__beskrivelse {
+        display: flex;
         padding-left: 1rem;
         padding-top: 1rem;
         padding-bottom: 1rem;
         flex-grow: 3;
     }
+    &__beskrivelse__tekst {
+        min-width: 200px;
+    }
     &__advarsel {
         width: 3rem;
         flex-grow: 0;
     }
+
+    &__samtidig-uttak-punkt {
+        position: relative;
+
+        &:before {
+            content: ' \00b7';
+            font-size: 70px;
+            display: inline-block;
+            color: #634689;
+            position: absolute;
+            left: -1.25rem;
+            top: -0.125rem;
+        }
+    }
+
     &__tidsrom {
         min-width: 11rem;
         @media (max-width: @tablet-breakpoint) {

diff --git a/.../components/uttaksplanlegger/components/periodeliste/items/PeriodelisteAvslåttPeriode.tsx b/.../components/uttaksplanlegger/components/periodeliste/items/PeriodelisteAvslåttPeriode.tsx
@@ -69,6 +69,7 @@ const PeriodelisteAvslåttPeriode: React.StatelessComponent<Props & InjectedIntl
             onToggle={onToggle}
             beskrivelse={beskrivelse}
             ikon={<UttaksplanAdvarselIkon />}
+            erSamtidigUttak={false}
             renderContent={() => (
                 <div>
                     <Block>

diff --git a/...omponents/uttaksplanlegger/components/periodeliste/items/PeriodelisteGruppertInfoPart.tsx b/...omponents/uttaksplanlegger/components/periodeliste/items/PeriodelisteGruppertInfoPart.tsx
@@ -41,6 +41,7 @@ const PeriodelisteGruppertInfoPart: React.StatelessComponent<Props & InjectedInt
             tittel={tittel}
             isExpanded={isExpanded}
             onToggle={onToggle}
+            erSamtidigUttak={false}
             ikon={getPeriodeIkon(periode, navnPåForeldre)}
             farge="transparent"
             border={stil === 'medRammeOgStrek'}

diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteHull.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteHull.tsx
@@ -89,6 +89,7 @@ const PeriodelisteHullItem: React.StatelessComponent<Props & InjectedIntlProps>
             onToggle={onToggle}
             beskrivelse={beskrivelse}
             ikon={<UttaksplanAdvarselIkon />}
+            erSamtidigUttak={false}
             renderContent={() => (
                 <div>
                     {isAvslåttPeriode(periode) ? (

diff --git a/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteInfo.tsx b/src/app/components/uttaksplanlegger/components/periodeliste/items/PeriodelisteInfo.tsx
@@ -21,6 +21,7 @@ export interface PeriodelisteInformasjon {
     farge?: UttaksplanColor;
     periodeFargestrek?: UttaksplanColor;
     border?: boolean;
+    erSamtidigUttak: boolean;
 }
 
 const PeriodelisteInfo: React.StatelessComponent<Props> = ({
@@ -34,7 +35,8 @@ const PeriodelisteInfo: React.StatelessComponent<Props> = ({
     tidsperiode,
     farge = 'yellow',
     border,
-    periodeFargestrek
+    periodeFargestrek,
+    erSamtidigUttak
 }) => {
     return (
         <PeriodelisteItemWrapper
@@ -54,6 +56,7 @@ const PeriodelisteInfo: React.StatelessComponent<Props> = ({
                         tittel={tittel}
                         beskrivelse={beskrivelse}
                         tidsperiode={tidsperiode}
+                        erSamtidigUttak={erSamtidigUttak}
                     />
                 )}
                 renderContent={renderContent}

diff --git a/...omponents/uttaksplanlegger/components/periodeliste/items/PeriodelisteOppholdAnnenPart.tsx b/...omponents/uttaksplanlegger/components/periodeliste/items/PeriodelisteOppholdAnnenPart.tsx
@@ -48,6 +48,7 @@ const PeriodelisteOppholdAnnenPart: React.StatelessComponent<Props & InjectedInt
             ikon={getPeriodeIkon(periode, navnPåForeldre)}
             farge="transparent"
             border={true}
+            erSamtidigUttak={isUttakAnnenPart(periode) ? periode.ønskerSamtidigUttak === true : false}
             renderContent={() => (
                 <div>
                     <strong>