diff --git a/components/PageHeader/PageHeader.module.css b/components/PageHeader/PageHeader.module.css index de704cb..004118f 100644 --- a/components/PageHeader/PageHeader.module.css +++ b/components/PageHeader/PageHeader.module.css @@ -30,42 +30,15 @@ flex-direction: column; } -.navdsPageHeaderLeft > .navdsPageHeaderWrapper { - text-align: left; -} - .navdsPageHeaderCenter > .navdsPageHeaderWrapper { text-align: center; } -.navdsPageHeaderIllustration { - margin-right: 1.5rem; - pointer-events: none; -} - -.navdsPageHeaderIllustration > svg { - width: 5rem; - height: 5rem; -} - -.navdsPageHeaderSituation { - box-shadow: 0 -4px 0 var(--a-orange-400) inset; -} - -.navdsPageHeaderProduct { - box-shadow: 0 -4px 0 var(--a-green-400) inset; -} - .navdsPageHeaderGuide { box-shadow: 0 -4px 0 var(--a-deepblue-400) inset; } @media (max-width: 649px) { - .navdsPageHeaderIllustration > svg { - width: 3rem; - height: 3rem; - } - .navdsPageHeaderTitle { font-size: var(--a-font-size-heading-xlarge); } diff --git a/components/PageHeader/PageHeader.test.tsx b/components/PageHeader/PageHeader.test.tsx new file mode 100644 index 0000000..462ab04 --- /dev/null +++ b/components/PageHeader/PageHeader.test.tsx @@ -0,0 +1,9 @@ +import { PageHeader } from 'components/PageHeader/index'; +import { render, screen } from 'setUpTest'; + +describe('PageHeader', () => { + test('har overskrift på nivå 1', () => { + render(Overskriften); + expect(screen.getByRole('heading', { level: 1, name: 'Overskriften' })).toBeVisible(); + }); +}); diff --git a/components/PageHeader/index.tsx b/components/PageHeader/index.tsx index 3e0c406..78683b0 100644 --- a/components/PageHeader/index.tsx +++ b/components/PageHeader/index.tsx @@ -1,78 +1,19 @@ -import React, { forwardRef, HTMLAttributes, useMemo } from 'react'; -import { BodyShort, Heading } from '@navikt/ds-react'; +import React from 'react'; +import { Heading } from '@navikt/ds-react'; import * as classes from 'components/PageHeader/PageHeader.module.css'; -export interface PageHeaderProps extends HTMLAttributes { - /** - * PageHeader title - */ +export interface PageHeaderProps { children: string | React.ReactNode; - /** - * Pictogram placed in PageHeader - */ - illustration?: React.ReactNode; - /** - * Short text placed under title - */ - description?: string; - /** - * Predefined variants for PageHeader - * @default "guide" - */ - variant?: 'situation' | 'product' | 'guide'; - /** - * Decides how to align content - * @default "left" - */ - align?: 'left' | 'center'; } -// eslint-disable-next-line react/display-name -const PageHeader = forwardRef( - ( - { children, className, illustration, description, variant = 'guide', align = 'left', ...rest }, - ref - ) => { - const variantClass = useMemo(() => { - switch (variant) { - case 'situation': - return 'navdsPageHeaderSituation'; - case 'product': - return 'navdsPageHeaderProduct'; - default: - return 'navdsPageHeaderGuide'; - } - }, [variant]); - const alignClass = useMemo(() => { - switch (align) { - case 'center': - return 'navdsPageHeaderCenter'; - default: - return 'navdsPageHeaderLeft'; - } - }, [align]); - return ( -
-
- {illustration && ( -
{illustration}
- )} -
- - {children} - - {description && ( - {description} - )} -
-
+export const PageHeader = ({ children }: PageHeaderProps) => { + return ( +
+
+ + {children} +
- ); - } -); - -export default PageHeader; +
+ ); +}; diff --git a/pages/[uuid]/ettersendelse/index.tsx b/pages/[uuid]/ettersendelse/index.tsx index 66e57bc..3e7eb80 100644 --- a/pages/[uuid]/ettersendelse/index.tsx +++ b/pages/[uuid]/ettersendelse/index.tsx @@ -1,7 +1,7 @@ import { BodyShort, Button, Heading, Label, Link, ReadMore } from '@navikt/ds-react'; import { LucaGuidePanel, ScanningGuide, Vedlegg } from '@navikt/aap-felles-react'; import { GetServerSidePropsResult, NextPageContext } from 'next'; -import PageHeader from 'components/PageHeader'; +import { PageHeader } from 'components/PageHeader'; import { Section } from 'components/Section/Section'; import { Søknad, VedleggType } from 'lib/types/types'; import * as styles from 'pages/[uuid]/ettersendelse/Ettersendelse.module.css'; @@ -56,7 +56,7 @@ const Index = ({ søknad }: PageProps) => { )} - nav.no`} - + {formatMessage( { id: 'ettersendelse.appTittel' }, { diff --git a/pages/ettersendelse.tsx b/pages/ettersendelse.tsx index d863cf0..ed63e0d 100644 --- a/pages/ettersendelse.tsx +++ b/pages/ettersendelse.tsx @@ -1,5 +1,5 @@ import { ReadMore, Label, BodyShort, Button, Heading, Link } from '@navikt/ds-react'; -import PageHeader from 'components/PageHeader'; +import { PageHeader } from 'components/PageHeader'; import { Section } from 'components/Section/Section'; import { beskyttetSide, getAccessToken } from '@navikt/aap-felles-utils'; import { GetServerSidePropsResult, NextPageContext } from 'next'; @@ -40,7 +40,7 @@ const Ettersendelse = () => { )} - nav.no`} - + {formatMessage( { id: 'ettersendelse.appTittel' }, {