Merge branch 'contact-step-page' of github.com:navikt/nav-enonicxp-frontend into contact-step-page

Author: taniaholst

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

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

@@ -4,47 +4,22 @@ 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 { InternalLinkMixin } from 'types/component-props/_mixins';
 import style from './ContactStepPage.module.scss';
 
-type LinkInternal = {
-    external?: never;
-    internal: { internalContent: Pick<ContentCommonProps, '_path'> };
-    _selected: 'internal';
-};
-
-type LinkExternal = {
-    external: { externalUrl: string };
-    internal?: never;
-    _selected: 'external';
-};
-
-type Link = LinkInternal | LinkExternal;
-
-interface LinkPanel {
-    label: string;
-    explanation?: string;
-    link: Link;
-}
-
 export type ContactStepPageProps = ContentCommonProps & {
     type: ContentType.ContactStepPage;
     data: {
         title: string;
         illustration: PictogramsProps;
         textAboveTitle?: string;
         html: string;
-        linksHeading: string;
-        linksSubHeadline: string;
-        links: LinkPanel[];
-        link: {
-            internal: {
-                target: { _path: string };
-                text: string;
-            };
-        };
+        linkPanelsHeading: string;
+        linkPanelsSubHeading: string;
+        linkPanels: (InternalLinkMixin & { ingress?: string })[];
+        backLink: InternalLinkMixin;
     };
 };
 
@@ -54,20 +29,12 @@ export const ContactStepPage = ({ data }: ContactStepPageProps) => {
         illustration,
         textAboveTitle,
         html,
-        links: linkPanels,
-        linksHeading: linksPanelHeading,
-        linksSubHeadline: linksPanelSubHeadline,
-        link,
+        linkPanelsHeading,
+        linkPanelsSubHeading,
+        linkPanels,
+        backLink,
     } = data;
 
-    const getHref = (link: Link) => {
-        return link._selected === 'internal'
-            ? stripXpPathPrefix(link.internal?.internalContent._path)
-            : link.external.externalUrl;
-    };
-
-    const { target, text } = link.internal;
-
     return (
         <div className={style.contactStepPage}>
             <IllustrationStatic illustration={illustration} className={style.pictogram} />
@@ -79,36 +46,41 @@ export const ContactStepPage = ({ data }: ContactStepPageProps) => {
             <div className={style.content}>
                 <ParsedHtml htmlProps={html} />
 
-                {linksPanelHeading && (
+                {linkPanelsHeading && (
                     <Heading size="medium" level="2">
-                        {linksPanelHeading}
+                        {linkPanelsHeading}
                     </Heading>
                 )}
-                {linksPanelSubHeadline && <BodyShort>{linksPanelSubHeadline}</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}
-                                >
-                                    <LinkPanel.Title>{linkPanel.label}</LinkPanel.Title>
-                                    {linkPanel.explanation && (
-                                        <LinkPanel.Description>
-                                            {linkPanel.explanation}
-                                        </LinkPanel.Description>
-                                    )}
-                                </LinkPanel>
-                            </li>
-                        ))}
-                    </ul>
-                )}
-            </div>
-            <div className={style.link}>
-                <LenkeInline href={target._path}>{text}</LenkeInline>
+                {linkPanelsSubHeading && <BodyShort>{linkPanelsSubHeading}</BodyShort>}
+
+                <ul className={style.linkPanels}>
+                    {linkPanels.map((linkPanel, index) => (
+                        <li key={index}>
+                            <LinkPanel
+                                as={LenkeBase}
+                                href={linkPanel.target._path}
+                                className={style.linkPanel}
+                                // TODO finn utav analytics
+                                // analyticsComponent={'mellomsteg'}
+                                // analyticsLinkGroup={currentStepData.stepsHeadline}
+                                // analyticsLabel={step.label}s
+                            >
+                                <LinkPanel.Title>
+                                    {linkPanel.text ?? linkPanel.target.displayName}
+                                </LinkPanel.Title>
+                                {linkPanel.ingress && (
+                                    <LinkPanel.Description>
+                                        {linkPanel.ingress}
+                                    </LinkPanel.Description>
+                                )}
+                            </LinkPanel>
+                        </li>
+                    ))}
+                </ul>
             </div>
+            <LenkeInline href={backLink.target._path} className={style.backLink}>
+                {backLink.text ?? backLink.target.displayName}
+            </LenkeInline>
         </div>
     );
 };