Skip to content

Commit

Permalink
Oppdater snarveier og pageheaders (#4685)
Browse files Browse the repository at this point in the history
  • Loading branch information
@johannbm
johannbm authored Sep 20, 2024
1 parent 07e3c22 commit ca68a08
Show file tree
Hide file tree
Showing 13 changed files with 100 additions and 151 deletions.
2 changes: 1 addition & 1 deletion apps/foreldrepengeoversikt/src/app/Foreldrepengeoversikt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ const Foreldrepengeoversikt: React.FunctionComponent = () => {

if (!søkerInfoQuery.data || sakerQuery.isPending) {
return (
<div style={{ textAlign: 'center', padding: '12rem 0' }}>
<div className="py-48 px-0 text-center">
<Loader type="XXL" />
</div>
);
Expand Down
25 changes: 4 additions & 21 deletions ...eldrepengeoversikt/src/app/components/bekreftelse-sendt-søknad/BekreftelseSendtSøknad.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,10 @@ const BekreftelseSendtSøknad: React.FunctionComponent<Props> = ({ relevantNyTid
const sendtInfoTekst = getTidspunktTekst(mottattDato);

return (
<VStack
gap="6"
style={{
padding: 'var(--a-spacing-6)',
background: 'white',
borderRadius: '8px',
boxShadow: 'var(--a-shadow-xsmall)',
}}
>
<VStack gap="6" className="p-6 bg-white rounded-large shadow-xsmall">
<HStack gap="4">
<div
style={{
width: '52px',
height: '52px',
borderRadius: '50%',
background: 'var(--a-green-100)',
paddingTop: '14px',
paddingLeft: '14px',
}}
>
<CheckmarkIcon fontSize={24} style={{ color: 'var(--a-green-800)' }} aria-hidden={true} />
<div className="w-[52px] h-[52px] rounded-[50%] bg-green-100 pt-[14px] pl-[14px]">
<CheckmarkIcon fontSize={24} className="text-green-800" aria-hidden={true} />
</div>
<VStack>
<Heading level="2" size="small">
Expand All @@ -68,7 +51,7 @@ const BekreftelseSendtSøknad: React.FunctionComponent<Props> = ({ relevantNyTid
</VStack>
</HStack>
{relevantDokument && (
<ul style={{ padding: 0, margin: 0 }}>
<ul className="p-0 m-0">
<DokumentHendelse dokument={relevantDokument} key={relevantDokument.url} visesITidslinjen={false} />
</ul>
)}
Expand Down
14 changes: 5 additions & 9 deletions apps/foreldrepengeoversikt/src/app/components/dokument/Dokument.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,8 @@ function DokumentLenke({ dokument }: { dokument: DokumentType }) {

return (
<>
<FileContent style={{ color: 'var(--a-text-action)' }} height={24} width={24} aria-hidden={true} />
<Link
href={url}
target="_blank"
style={{ overflow: 'hidden', textOverflow: 'ellipsis', display: 'block', whiteSpace: 'nowrap' }}
>
<FileContent className="text-text-action" height={24} width={24} aria-hidden={true} />
<Link href={url} target="_blank" className="overflow-hidden overflow-ellipsis block whitespace-nowrap">
{dokument.tittel}
</Link>
</>
Expand All @@ -41,7 +37,7 @@ function DokumentAvsender({ dokumentType }: { dokumentType: DokumentTypeEnum })
})();

return (
<Tag size="small" style={{ width: 'max-content', justifySelf: 'flex-end' }} variant="neutral">
<Tag size="small" className="w-max justify-self-end" variant="neutral">
{text}
</Tag>
);
Expand All @@ -51,8 +47,8 @@ const Dokument: React.FunctionComponent<Props> = ({ dokument }) => {
const { type, mottatt } = dokument;

return (
<div className="border-b-2 p-4 pr-0 border-gray-300">
<Hide above="md" style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<div className="border-b-2 p-4 pr-3 border-gray-300 last:border-none">
<Hide above="md" className="flex flex-col gap-4">
<HGrid columns={'max-content 1fr'} gap="4">
<DokumentLenke dokument={dokument} />
</HGrid>
Expand Down
4 changes: 1 addition & 3 deletions apps/foreldrepengeoversikt/src/app/components/error-boundary/ErrorBoundary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,7 @@ class ErrorBoundary extends Component<any, State> {

render() {
if (this.state.hasError) {
return (
<div style={{ padding: '2rem', maxWidth: '704px', margin: '0 auto' }}>{this.state.error?.message}</div>
);
return <div className="p-8 w-[704px] m-0 ml-auto mr-auto">{this.state.error?.message}</div>;
}

return this.props.children;
Expand Down
6 changes: 3 additions & 3 deletions apps/foreldrepengeoversikt/src/app/components/grupperte-dokumenter/GrupperteDokumenter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,11 @@ const GrupperteDokumenter: React.FunctionComponent<Props> = ({ dokumenter }) =>
<Accordion>
<Accordion.Item>
<Accordion.Header
className="flex-row-reverse justify-between p-4 pt-0"
// NOTE: tailwind støtter ikke box-shadows.
// Enten må det være et Aksel-token, eller så må det legges inn i custom config. Tar det derfor i style
style={{
boxShadow: 'inset 0 -2px 0 0 rgb(7 26 54 / 21%)',
padding: '1rem 0 1rem 1rem',
flexDirection: 'row-reverse',
justifyContent: 'space-between',
}}
>
<HStack gap="4">
Expand Down
97 changes: 30 additions & 67 deletions apps/foreldrepengeoversikt/src/app/components/header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,25 @@ export const getSaksoversiktHeading = (ytelse: Ytelse | undefined) => {
function HeaderWrapper({ children }: { children: ReactNode }) {
const selectedRoute = useGetSelectedRoute();
return (
<div className="bg-bg-default border-b-2 border-deepblue-200 pt-4 mb-8">
<div className={`bg-bg-default border-b-2 border-deepblue-200 pt-4 mb-8`}>
<Breadcrumb selectedRoute={selectedRoute} />
<LayoutWrapper className="pt-6 pb-6 pl-4 pr-4">{children}</LayoutWrapper>
</div>
);
}

function SimpleHeaderWrapper({ children }: { children: ReactNode }) {
const selectedRoute = useGetSelectedRoute();
return (
<div className={`bg-bg-default pt-4`}>
<Breadcrumb selectedRoute={selectedRoute} />
<LayoutWrapper className="pt-6 pb-6 pl-4 pr-4">{children}</LayoutWrapper>
</div>
);
}

function BlueDot() {
return <div style={{ height: '4px', width: '4px', borderRadius: '50%', background: 'var(--a-deepblue-300)' }} />;
return <div className="h-[4px] w-[4px] rounded-[50%] bg-deepblue-300" />;
}

function BabyIkon({ ytelse }: { ytelse: Ytelse | undefined }) {
Expand All @@ -64,31 +74,13 @@ function BabyIkon({ ytelse }: { ytelse: Ytelse | undefined }) {
return (
<>
<Show above="md">
<div
style={{
width: '60px',
height: '60px',
borderRadius: '50%',
background: 'var(--a-deepblue-100)',
paddingTop: '8px',
paddingLeft: '8px',
}}
>
<YtelseIkon fontSize={44} style={{ color: 'var(--a-lightblue-800)' }} />
<div className="w-[60px] h-[60px] rounded-full bg-deepblue-100 pt-2 pl-2">
<YtelseIkon fontSize={44} className="text-lightblue-800" />
</div>
</Show>
<Show below="md">
<div
style={{
width: '38px',
height: '38px',
borderRadius: '50%',
background: 'var(--a-deepblue-100)',
paddingTop: '8px',
paddingLeft: '8px',
}}
>
<YtelseIkon fontSize={22} style={{ color: 'var(--a-lightblue-800)' }} />
<div className="w-[38px] h-[38px] rounded-full bg-deepblue-100 pt-2 pl-2">
<YtelseIkon fontSize={22} className="text-lightblue-800" />
</div>
</Show>
</>
Expand Down Expand Up @@ -119,55 +111,26 @@ function SaksnummerDetail() {
}

export function DokumenterHeader() {
const heading = (
<Heading level="1" size="medium">
Dokumenter
</Heading>
);

const { saksnummer } = useParams();
return (
<HeaderWrapper>
<Show above="md">
<VStack gap="3">
{heading}
<HStack gap="3" align="center">
<SaksnummerDetail />
<BlueDot />
<Detail textColor="subtle">Dokumenter som du, arbeidsgiver og NAV har sendt</Detail>
</HStack>
</VStack>
</Show>
<Show below="md">
<VStack gap="1">
{heading}
<SaksnummerDetail />
</VStack>
</Show>
</HeaderWrapper>
<SimpleHeaderWrapper>
<Heading level="1" size="medium">
Dokumenter
</Heading>
<Detail textColor="subtle">
Dokumenter fra du, arbeidsgiver og NAV som tilhører saken din ({saksnummer})
</Detail>
</SimpleHeaderWrapper>
);
}

export function EttersendingHeader() {
const header = (
<Heading level="1" size="medium">
Last opp dokumenter
</Heading>
);
return (
<HeaderWrapper>
<Show above="md">
<VStack gap="3">
{header}
<SaksnummerDetail />
</VStack>
</Show>
<Show below="md">
<VStack gap="1">
{header}
<SaksnummerDetail />
</VStack>
</Show>
</HeaderWrapper>
<SimpleHeaderWrapper>
<Heading level="1" size="medium">
Last opp dokumenter
</Heading>
</SimpleHeaderWrapper>
);
}

Expand Down
6 changes: 3 additions & 3 deletions ...src/app/components/minidialog-skjema/minidialog-venter-på-svar/MinidialogVenterPåSvar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { FunctionComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';

import { Alert, Loader, VStack } from '@navikt/ds-react';
import { Alert, HStack, Loader, VStack } from '@navikt/ds-react';

import ScrollToTop from 'app/components/scroll-to-top/ScrollToTop';

Expand All @@ -18,10 +18,10 @@ const MinidialogVenterPåSvar: FunctionComponent<Props> = ({ fetchCounter, allow
<>
<ScrollToTop />
<Alert variant="info">
<div style={{ display: 'flex', justifyContent: 'center', gap: '1rem' }}>
<HStack gap="4" justify="center">
<Loader />
Svaret ditt registreres i våre systemer.
</div>
</HStack>
</Alert>
</>
);
Expand Down
9 changes: 7 additions & 2 deletions apps/foreldrepengeoversikt/src/app/components/noe-gikk-galt/NoeGikkGalt.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,15 @@ import { Alert } from '@navikt/ds-react';

interface Props {
children: React.ReactNode;
className?: string;
}

const NoeGikkGalt: React.FunctionComponent<Props> = ({ children }) => {
return <Alert variant="info">{children}</Alert>;
const NoeGikkGalt: React.FunctionComponent<Props> = ({ children, className }) => {
return (
<Alert className={className} variant="info">
{children}
</Alert>
);
};

export default NoeGikkGalt;
51 changes: 23 additions & 28 deletions apps/foreldrepengeoversikt/src/app/components/snarveier/Snarveier.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { ReactNode } from 'react';
import { useIntl } from 'react-intl';

import { HGrid, Heading, LinkPanel } from '@navikt/ds-react';
import { HGrid, Heading } from '@navikt/ds-react';

import { links } from '@navikt/fp-constants';

import { LenkePanel } from 'app/components/lenke-panel/LenkePanel';
import { useGetSelectedSak } from 'app/hooks/useSelectedSak';
import { NavRoutes } from 'app/routes/routes';
import { Sak } from 'app/types/Sak';
Expand Down Expand Up @@ -67,14 +67,6 @@ const getSaksbehandlingstidLink = (ytelse: Ytelse | undefined) => {
return NavRoutes.SAKSBEHANDLINGSTIDER;
};

const SnarveiLinkPanel = ({ href, children }: { href: string; children: ReactNode }) => {
return (
<LinkPanel href={href} border={false} className="bg-gray-100 rounded-large p-4 pt-2 pb-2 h-fit">
<LinkPanel.Title className="text-lg">{children}</LinkPanel.Title>
</LinkPanel>
);
};

const Snarveier: React.FunctionComponent = () => {
const intl = useIntl();
const currentSak = useGetSelectedSak();
Expand All @@ -89,27 +81,30 @@ const Snarveier: React.FunctionComponent = () => {
{intl.formatMessage({ id: 'saksoversikt.snarveier' })}
</Heading>
<HGrid gap="4" columns={{ sm: 1, md: 2 }}>
<SnarveiLinkPanel href={lesMerLink}>
{intl.formatMessage({ id: 'snarveier.lesMerOm' }, { ytelse: ytelseTekst })}
</SnarveiLinkPanel>
<SnarveiLinkPanel href={getSaksbehandlingstidLink(ytelse)}>
{intl.formatMessage({ id: 'snarveier.saksbehandlingstider' })}
</SnarveiLinkPanel>
<SnarveiLinkPanel href={NavRoutes.MELD_FRA_OM_ENDRINGER}>
{intl.formatMessage({ id: 'snarveier.endringerIDinSituasjon' })}
</SnarveiLinkPanel>
<LenkePanel
tittel={intl.formatMessage({ id: 'snarveier.lesMerOm' }, { ytelse: ytelseTekst })}
to={lesMerLink}
/>
<LenkePanel
to={getSaksbehandlingstidLink(ytelse)}
tittel={intl.formatMessage({ id: 'snarveier.saksbehandlingstider' })}
/>
<LenkePanel
to={NavRoutes.MELD_FRA_OM_ENDRINGER}
tittel={intl.formatMessage({ id: 'snarveier.endringerIDinSituasjon' })}
/>
{currentSak !== undefined ? (
<SnarveiLinkPanel href={getKlageLinkMedSak(ytelse, currentSak)}>
{intl.formatMessage({ id: 'snarveier.jegVilKlage' })}
</SnarveiLinkPanel>
<LenkePanel
to={getKlageLinkMedSak(ytelse, currentSak)}
tittel={intl.formatMessage({ id: 'snarveier.jegVilKlage' })}
/>
) : (
<SnarveiLinkPanel href={getKlageLink(ytelse)}>
{intl.formatMessage({ id: 'snarveier.slikKlagerDu' })}
</SnarveiLinkPanel>
<LenkePanel
to={getKlageLink(ytelse)}
tittel={intl.formatMessage({ id: 'snarveier.slikKlagerDu' })}
/>
)}
<SnarveiLinkPanel href={links.brukerprofil}>
{intl.formatMessage({ id: 'snarveier.kontonummer' })}
</SnarveiLinkPanel>
<LenkePanel tittel={intl.formatMessage({ id: 'snarveier.kontonummer' })} to={links.brukerprofil} />
</HGrid>
</div>
</div>
Expand Down
Loading

0 comments on commit ca68a08

Please sign in to comment.