From 08e44d489d726b3984a49df7316bf268c3f9d511 Mon Sep 17 00:00:00 2001
From: bdahle <bdahle@hey.com>
Date: Mon, 17 Mar 2025 13:21:45 +0100
Subject: [PATCH 1/2] bruk LinkWithIngressMixin

---
 .../contact-step-page/ContactStepPage.tsx     | 98 +++++++------------
 1 file changed, 34 insertions(+), 64 deletions(-)

diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx
index 5773debb4..a5ca2ed5a 100644
--- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx
+++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx
@@ -4,31 +4,11 @@ import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml';
 import { ContentType, ContentCommonProps } from 'types/content-props/_content-common';
 import { IllustrationStatic } from 'components/_common/illustration/static/IllustrationStatic';
 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 { LinkWithIngressMixin } from 'types/component-props/_mixins';
 import style from './ContactStepPage.module.scss';
 
-export type LinkInternal = {
-    external?: never;
-    internal: { internalContent: Pick<ContentCommonProps, '_path'> };
-    _selected: 'internal';
-};
-
-export type LinkExternal = {
-    external: { externalUrl: string };
-    internal?: never;
-    _selected: 'external';
-};
-
-export type Link = LinkInternal | LinkExternal;
-
-export interface LinkPanel {
-    label: string;
-    explanation?: string;
-    link: Link;
-}
-
 export type ContactStepPageProps = ContentCommonProps & {
     type: ContentType.ContactStepPage;
     data: {
@@ -36,9 +16,9 @@ export type ContactStepPageProps = ContentCommonProps & {
         illustration: PictogramsProps;
         textAboveTitle?: string;
         html: string;
-        linksHeading: string;
-        linksSubHeadline: string;
-        links: LinkPanel[];
+        linkPanelsHeading: string;
+        linkPanelsSubHeading: string;
+        linkPanels: LinkWithIngressMixin[];
         link: {
             internal: {
                 target: { _path: string };
@@ -55,21 +35,12 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
         illustration,
         textAboveTitle,
         html,
-        links: linkPanels,
-        linksHeading: linksPanelHeading,
-        linksSubHeadline: linksPanelSubHeadline,
+        linkPanelsHeading,
+        linkPanelsSubHeading,
+        linkPanels,
         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}>
             <IllustrationStatic illustration={illustration} className={style.pictogram} />
@@ -86,40 +57,39 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
             <div className={style.content}>
                 <ParsedHtml htmlProps={html} />
 
-                {linksPanelHeading && (
+                {linkPanelsHeading && (
                     <Heading size="medium" level="2">
-                        {linksPanelHeading}
+                        {linkPanelsHeading}
                     </Heading>
                 )}
-                {linksPanelSubHeadline && <BodyShort>{linksPanelSubHeadline}</BodyShort>}
+                {linkPanelsSubHeading && <BodyShort>{linkPanelsSubHeading}</BodyShort>}
 
-                {linkPanels && linkPanels.length > 0 && (
-                    <ul className={style.linkPanels}>
-                        {linkPanels.map((linkPanel, index) => (
-                            <li key={index}>
-                                <LinkPanel
-                                    as={LenkeBase}
-                                    href={getHref(linkPanel.link)}
-                                    className={style.linkPanel}
-                                    // TODO finn utav analytics
-                                    // analyticsComponent={'mellomsteg'}
-                                    // analyticsLinkGroup={currentStepData.stepsHeadline}
-                                    // analyticsLabel={step.label}s
-                                >
-                                    <LinkPanel.Title>{linkPanel.label}</LinkPanel.Title>
-                                    {linkPanel.explanation && (
-                                        <LinkPanel.Description>
-                                            {linkPanel.explanation}
-                                        </LinkPanel.Description>
-                                    )}
-                                </LinkPanel>
-                            </li>
-                        ))}
-                    </ul>
-                )}
+                <ul className={style.linkPanels}>
+                    {linkPanels.map((linkPanel, index) => (
+                        <li key={index}>
+                            <LinkPanel
+                                as={LenkeBase}
+                                //TODO finn utav ekstern lenke
+                                href={linkPanel.link.internal.target._path}
+                                className={style.linkPanel}
+                                // TODO finn utav analytics
+                                // analyticsComponent={'mellomsteg'}
+                                // analyticsLinkGroup={currentStepData.stepsHeadline}
+                                // analyticsLabel={step.label}s
+                            >
+                                <LinkPanel.Title>{linkPanel.link.internal.text}</LinkPanel.Title>
+                                {linkPanel.ingress && (
+                                    <LinkPanel.Description>
+                                        {linkPanel.ingress}
+                                    </LinkPanel.Description>
+                                )}
+                            </LinkPanel>
+                        </li>
+                    ))}
+                </ul>
             </div>
             <div className={style.link}>
-                <LenkeInline href={target._path}>{text}</LenkeInline>
+                <LenkeInline href={link.internal.target._path}>{link.internal.text}</LenkeInline>
             </div>
         </div>
     );

From 70349982a82c23672e42fda9f0a6e7f210813b92 Mon Sep 17 00:00:00 2001
From: bdahle <bdahle@hey.com>
Date: Mon, 17 Mar 2025 14:13:32 +0100
Subject: [PATCH 2/2] bruk InternalLinkMixin

---
 .../ContactStepPage.module.scss               |  8 +++---
 .../contact-step-page/ContactStepPage.tsx     | 26 ++++++++-----------
 2 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss
index f719b60f0..cd55811c9 100644
--- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss
+++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss
@@ -8,14 +8,14 @@
     grid-template-areas:
         'header'
         'content'
-        'link';
+        'backLink';
 
     @media #{common.$mq-screen-tablet-and-desktop} {
         grid-template-columns: 1fr 40rem 1fr;
         grid-template-areas:
             'pictogram header .'
             '. content .'
-            '. link .';
+            '. backLink .';
         column-gap: var(--a-spacing-10);
     }
     .pictogram {
@@ -60,7 +60,7 @@
             }
         }
     }
-    .link {
-        grid-area: link;
+    .backLink {
+        grid-area: backLink;
     }
 }
diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx
index a5ca2ed5a..e649c57a5 100644
--- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx
+++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx
@@ -6,7 +6,7 @@ import { IllustrationStatic } from 'components/_common/illustration/static/Illus
 import { PictogramsProps } from 'types/content-props/pictograms';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 import { LenkeInline } from 'components/_common/lenke/lenkeInline/LenkeInline';
-import { LinkWithIngressMixin } from 'types/component-props/_mixins';
+import { InternalLinkMixin } from 'types/component-props/_mixins';
 import style from './ContactStepPage.module.scss';
 
 export type ContactStepPageProps = ContentCommonProps & {
@@ -18,13 +18,8 @@ export type ContactStepPageProps = ContentCommonProps & {
         html: string;
         linkPanelsHeading: string;
         linkPanelsSubHeading: string;
-        linkPanels: LinkWithIngressMixin[];
-        link: {
-            internal: {
-                target: { _path: string };
-                text: string;
-            };
-        };
+        linkPanels: (InternalLinkMixin & { ingress?: string })[];
+        backLink: InternalLinkMixin;
     };
 };
 
@@ -38,7 +33,7 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
         linkPanelsHeading,
         linkPanelsSubHeading,
         linkPanels,
-        link,
+        backLink,
     } = data;
 
     return (
@@ -69,15 +64,16 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
                         <li key={index}>
                             <LinkPanel
                                 as={LenkeBase}
-                                //TODO finn utav ekstern lenke
-                                href={linkPanel.link.internal.target._path}
+                                href={linkPanel.target._path}
                                 className={style.linkPanel}
                                 // TODO finn utav analytics
                                 // analyticsComponent={'mellomsteg'}
                                 // analyticsLinkGroup={currentStepData.stepsHeadline}
                                 // analyticsLabel={step.label}s
                             >
-                                <LinkPanel.Title>{linkPanel.link.internal.text}</LinkPanel.Title>
+                                <LinkPanel.Title>
+                                    {linkPanel.text ?? linkPanel.target.displayName}
+                                </LinkPanel.Title>
                                 {linkPanel.ingress && (
                                     <LinkPanel.Description>
                                         {linkPanel.ingress}
@@ -88,9 +84,9 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
                     ))}
                 </ul>
             </div>
-            <div className={style.link}>
-                <LenkeInline href={link.internal.target._path}>{link.internal.text}</LenkeInline>
-            </div>
+            <LenkeInline href={backLink.target._path} className={style.backLink}>
+                {backLink.text ?? backLink.target.displayName}
+            </LenkeInline>
         </div>
     );
 };