Skip to content

Commit 43dded2

Browse files
taniaholsttaniaholst
committedMar 13, 2025·
styling
·
release/prod@1743402880release/prod@1742380557
1 parent a1876c4 commit 43dded2

File tree

3 files changed

+85
-92
lines changed

3 files changed

+85
-92
lines changed
 

‎packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import { BodyShort, Heading } from '@navikt/ds-react';
22
import { ProductDataMixin } from 'types/component-props/_mixins';
33
import { ContentProps } from 'types/content-props/_content-common';
4+
import { classNames } from 'utils/classnames';
45
import style from './ContactPageHeader.module.scss';
56

67
type Props = {
78
contentProps: Pick<ContentProps, 'data'> & {
89
data: Pick<ProductDataMixin, 'title' | 'illustration'>;
910
};
1011
textAboveTitle?: string;
12+
className?: string;
1113
};
1214

13-
export const ContactPageHeader = ({ contentProps, textAboveTitle }: Props) => {
15+
export const ContactPageHeader = ({ contentProps, textAboveTitle, className }: Props) => {
1416
const { data } = contentProps;
1517

1618
return (
17-
<div className={style.contactPageHeader}>
19+
<div className={classNames(style.contactPageHeader, className)}>
1820
<BodyShort textColor="subtle" className={style.textAboveTitle}>
1921
{textAboveTitle}
2022
</BodyShort>

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

+35-45
Original file line numberDiff line numberDiff line change
@@ -18,56 +18,46 @@
1818
'. link .';
1919
column-gap: var(--a-spacing-10);
2020
}
21-
}
22-
23-
.pictogram {
24-
grid-area: pictogram;
25-
display: none;
21+
.pictogram {
22+
grid-area: pictogram;
23+
display: none;
2624

27-
@media #{common.$mq-screen-tablet-and-desktop} {
28-
display: block;
29-
}
30-
}
31-
.header {
32-
grid-area: header;
33-
}
34-
35-
.content {
36-
grid-area: content;
37-
38-
& > * {
39-
border-radius: common.$border-radius-large;
25+
@media #{common.$mq-screen-tablet-and-desktop} {
26+
display: block;
27+
}
4028
}
41-
}
42-
43-
.link {
44-
grid-area: link;
45-
}
46-
47-
/* Innrykk i ekspanderende paneler */
48-
.header :global(.navds-expansioncard__content) {
49-
@media #{common.$mq-screen-desktop} {
50-
padding-left: 82px;
29+
.header {
30+
grid-area: header;
5131
}
52-
}
5332

54-
.steps {
55-
list-style-type: none;
56-
margin: 0;
57-
padding: 0;
58-
display: flex;
59-
flex-direction: column;
60-
gap: 0.75rem;
61-
}
33+
.content {
34+
grid-area: content;
6235

63-
.linkPanel {
64-
border-radius: 8px;
65-
border: 1px solid var(--a-border-subtle);
36+
& > * {
37+
border-radius: common.$border-radius-large;
38+
}
6639

67-
& :global {
68-
.navds-link-panel__title {
69-
color: var(--default-action-color);
70-
font-size: 1.25rem;
40+
.linkPanels {
41+
display: flex;
42+
flex-direction: column;
43+
gap: 0.5rem;
44+
list-style-type: none;
45+
padding: 0;
46+
47+
.linkPanel {
48+
border-radius: common.$border-radius-large;
49+
border: 1px solid var(--a-border-subtle);
50+
51+
& :global {
52+
.navds-link-panel__title {
53+
color: var(--default-action-color);
54+
font-size: 1.25rem;
55+
}
56+
}
57+
}
7158
}
7259
}
73-
}
60+
.link {
61+
grid-area: link;
62+
}
63+
}

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

+46-45
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,9 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
5555
illustration,
5656
textAboveTitle,
5757
html,
58-
links,
59-
linksHeading,
60-
linksSubHeadline,
58+
links: linkPanels,
59+
linksHeading: linksPanelHeading,
60+
linksSubHeadline: linksPanelSubHeadline,
6161
link,
6262
} = data;
6363

@@ -73,51 +73,52 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
7373
return (
7474
<div className={style.contactStepPage}>
7575
<IllustrationStatic illustration={illustration} className={style.pictogram} />
76-
<div className={style.header}>
77-
<ContactPageHeader
78-
contentProps={{
79-
data: {
80-
title,
81-
illustration,
82-
},
83-
}}
84-
textAboveTitle={textAboveTitle}
85-
/>
86-
</div>
76+
<ContactPageHeader
77+
contentProps={{
78+
data: {
79+
title,
80+
illustration,
81+
},
82+
}}
83+
textAboveTitle={textAboveTitle}
84+
className={style.header}
85+
/>
8786
<div className={style.content}>
8887
<ParsedHtml htmlProps={html} />
88+
89+
{linksPanelHeading && (
90+
<Heading size="medium" level="2">
91+
{linksPanelHeading}
92+
</Heading>
93+
)}
94+
{linksPanelSubHeadline && <BodyShort>{linksPanelSubHeadline}</BodyShort>}
95+
96+
{linkPanels && linkPanels.length > 0 && (
97+
<ul className={style.linkPanels}>
98+
{linkPanels.map((linkPanel, index) => (
99+
<li key={index}>
100+
<LinkPanel
101+
as={LenkeBase}
102+
href={getHref(linkPanel.link)}
103+
className={style.linkPanel}
104+
// TODO finn utav analytics
105+
// analyticsComponent={'mellomsteg'}
106+
// analyticsLinkGroup={currentStepData.stepsHeadline}
107+
// analyticsLabel={step.label}s
108+
>
109+
<LinkPanel.Title>{linkPanel.label}</LinkPanel.Title>
110+
<LinkPanel.Description>
111+
{linkPanel.explanation}
112+
</LinkPanel.Description>
113+
</LinkPanel>
114+
</li>
115+
))}
116+
</ul>
117+
)}
118+
</div>
119+
<div className={style.link}>
120+
<LenkeInline href={target._path}>{text}</LenkeInline>
89121
</div>
90-
{linksHeading && (
91-
<Heading size="medium" level="2">
92-
{linksHeading}
93-
</Heading>
94-
)}
95-
{linksSubHeadline && <BodyShort>{linksSubHeadline}</BodyShort>}
96-
{links && links.length > 0 && (
97-
<ul className={style.links}>
98-
{links.map((linkPanel, index) => (
99-
<li key={index}>
100-
<LinkPanel
101-
as={LenkeBase}
102-
href={getHref(linkPanel.link)}
103-
className={style.linkPanel}
104-
// TODO finn utav analytics
105-
// analyticsComponent={'mellomsteg'}
106-
// analyticsLinkGroup={currentStepData.stepsHeadline}
107-
// analyticsLabel={step.label}s
108-
>
109-
<LinkPanel.Title>{linkPanel.label}</LinkPanel.Title>
110-
<LinkPanel.Description>
111-
{linkPanel.explanation}
112-
</LinkPanel.Description>
113-
</LinkPanel>
114-
</li>
115-
))}
116-
</ul>
117-
)}
118-
<LenkeInline href={target._path} className={style.link}>
119-
{text}
120-
</LenkeInline>
121122
</div>
122123
);
123124
};

0 commit comments

Comments
 (0)
Please sign in to comment.