la til tilbakelenke

Author: taniaholst

packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss

@@ -7,19 +7,26 @@
     margin: 1.25rem auto var(--a-spacing-10);
     grid-template-areas:
         'header'
-        'content';
+        'content'
+        'link';
 
     @media #{common.$mq-screen-tablet-and-desktop} {
         grid-template-columns: 6rem 2fr 6rem;
         grid-template-areas:
             'pictogram header .'
-            '. content .';
+            '. content .'
+            '. link .';
         column-gap: var(--a-spacing-10);
     }
 }
 
 .pictogram {
     grid-area: pictogram;
+    display: none;
+
+    @media #{common.$mq-screen-tablet-and-desktop} {
+        display: block;
+    }
 }
 .header {
     grid-area: header;
@@ -33,6 +40,10 @@
     }
 }
 
+.link {
+    grid-area: link;
+}
+
 /* Innrykk i ekspanderende paneler */
 .header :global(.navds-expansioncard__content) {
     @media #{common.$mq-screen-desktop} {
@@ -59,4 +70,4 @@
             font-size: 1.25rem;
         }
     }
-}
+}

packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { BodyShort, Heading, LinkPanel } from '@navikt/ds-react';
 import { ContactPageHeader } from 'components/_common/headers/contactPageHeader/ContactPageHeader';
 import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml';
@@ -8,6 +6,7 @@ import { IllustrationStatic } from 'components/_common/illustration/static/Illus
 import { PictogramsProps } from 'types/content-props/pictograms';
 import { stripXpPathPrefix } from 'utils/urls';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
+import { LenkeInline } from 'components/_common/lenke/lenkeInline/LenkeInline';
 import style from './ContactStepPage.module.scss';
 
 export type LinkInternal = {
@@ -40,20 +39,36 @@ export type ContactStepPageProps = ContentCommonProps & {
         linksHeading: string;
         linksSubHeadline: string;
         links: LinkPanel[];
+        link: {
+            internal: {
+                target: { _path: string };
+                text: string;
+            };
+        };
     };
 };
 
-const getHref = (link: Link) => {
-    if (link._selected === 'internal') {
-        return stripXpPathPrefix(link.internal?.internalContent._path);
-    }
-    return link.external.externalUrl;
-};
-
 export const ContactStepPage = (props: ContactStepPageProps) => {
     const { data } = props;
-    const { title, illustration, textAboveTitle, html, links, linksHeading, linksSubHeadline } =
-        data;
+    const {
+        title,
+        illustration,
+        textAboveTitle,
+        html,
+        links,
+        linksHeading,
+        linksSubHeadline,
+        link,
+    } = data;
+
+    const getHref = (link: Link) => {
+        if (link._selected === 'internal') {
+            return stripXpPathPrefix(link.internal?.internalContent._path);
+        }
+        return link.external.externalUrl;
+    };
+
+    const { target, text } = link.internal;
 
     return (
         <div className={style.contactStepPage}>
@@ -100,6 +115,9 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
                     ))}
                 </ul>
             )}
+            <LenkeInline href={target._path} className={style.link}>
+                {text}
+            </LenkeInline>
         </div>
     );
 };