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 22b8abe4e..af9fc3826 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 { InternalLinkMixin } from 'types/component-props/_mixins'; import style from './ContactStepPage.module.scss'; -type LinkInternal = { - external?: never; - internal: { internalContent: Pick }; - _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: { @@ -36,15 +16,10 @@ export type ContactStepPageProps = ContentCommonProps & { 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 (
@@ -79,36 +46,41 @@ export const ContactStepPage = ({ data }: ContactStepPageProps) => {
- {linksPanelHeading && ( + {linkPanelsHeading && ( - {linksPanelHeading} + {linkPanelsHeading} )} - {linksPanelSubHeadline && {linksPanelSubHeadline}} - {linkPanels && linkPanels.length > 0 && ( -
    - {linkPanels.map((linkPanel, index) => ( -
  • - - {linkPanel.label} - {linkPanel.explanation && ( - - {linkPanel.explanation} - - )} - -
  • - ))} -
- )} -
-
- {text} + {linkPanelsSubHeading && {linkPanelsSubHeading}} + +
    + {linkPanels.map((linkPanel, index) => ( +
  • + + + {linkPanel.text ?? linkPanel.target.displayName} + + {linkPanel.ingress && ( + + {linkPanel.ingress} + + )} + +
  • + ))} +
+ + {backLink.text ?? backLink.target.displayName} +
); };