♻️ Gjør komponenten mindre kompleks

Komponenten ble i utgangspunktet kopiert
fra et annet sted. Vi hadde lik bruk begge
steder den ble brukt.

Author: steoiv

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);
   }

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(<PageHeader>Overskriften</PageHeader>);
+    expect(screen.getByRole('heading', { level: 1, name: 'Overskriften' })).toBeVisible();
+  });
+});

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<HTMLDivElement> {
-  /**
-   * 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<HTMLDivElement, PageHeaderProps>(
-  (
-    { 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 (
-      <div className={classes?.pageHeaderWrapper}>
-        <div
-          ref={ref}
-          className={`${classes?.navdsPageHeader} ${className} ${classes?.[variantClass]} ${classes?.[alignClass]}`}
-          {...rest}
-        >
-          {illustration && (
-            <div className={classes?.navdsPageHeaderIllustration}>{illustration}</div>
-          )}
-          <div className="navdsPageHeaderWrapper">
-            <Heading className="navdsPageHeaderTitle" size="xlarge" level="1">
-              {children}
-            </Heading>
-            {description && (
-              <BodyShort className="navdsPageHeaderDescription">{description}</BodyShort>
-            )}
-          </div>
-        </div>
+export const PageHeader = ({ children }: PageHeaderProps) => {
+  return (
+    <div className={classes.pageHeaderWrapper}>
+      <div className={`${classes.navdsPageHeader} ${classes.navdsPageHeaderGuide} ${classes.navdsPageHeaderCenter}`}>
+        <Heading size="xlarge" level="1">
+          {children}
+        </Heading>
       </div>
-    );
-  }
-);
-
-export default PageHeader;
+    </div>
+  );
+};

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`}
         </title>
       </Head>
-      <PageHeader align="center" variant="guide">
+      <PageHeader>
         {formatMessage(
           { id: 'ettersendelse.appTittel' },
           {

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`}
         </title>
       </Head>
-      <PageHeader align="center" variant="guide">
+      <PageHeader>
         {formatMessage(
           { id: 'ettersendelse.appTittel' },
           {