Skip to content

Commit a2f4191

Browse files
taniaholsttaniaholst
committed
ny komponent LanguageDisclaimer, flyttet den til inni formIntermediateStepLink, flyttet den til components-mappen og lagde stories til begge
1 parent bc7fb7f commit a2f4191

File tree

7 files changed

+148
-60
lines changed

7 files changed

+148
-60
lines changed

‎packages/nextjs/src/components/_common/formIntermediateStepLink/FormIntermediateStepLink.stories.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
3+
import { FormIntermediateStepLink } from './FormIntermediateStepLink';
4+
5+
const meta = {
6+
component: FormIntermediateStepLink,
7+
} satisfies Meta<typeof FormIntermediateStepLink>;
8+
9+
export default meta;
10+
11+
type Story = StoryObj<typeof meta>;
12+
13+
export const Default: Story = {
14+
args: {
15+
label: 'Steg 1',
16+
explanation: 'Dette er et eksempel på hva som kan stå her',
17+
href: '/example-path',
18+
isStepNavigation: true,
19+
analyticsComponent: 'mellomsteg',
20+
analyticsLinkGroup: 'Example Group',
21+
analyticsLabel: 'Example Step',
22+
nextStep: {
23+
_selected: 'next',
24+
next: {
25+
editorial: { html: '' },
26+
stepsHeadline: '',
27+
steps: [],
28+
},
29+
},
30+
},
31+
};
32+
33+
export const LanguageDisclaimer: Story = {
34+
args: {
35+
label: 'Steg med språk',
36+
explanation: 'Dette er et eksempel på hva som kan stå her',
37+
languageDisclaimer: 'Kun på bokmål',
38+
href: '/example-path',
39+
isStepNavigation: true,
40+
analyticsComponent: 'mellomsteg',
41+
analyticsLinkGroup: 'Example Group',
42+
analyticsLabel: 'Example Step',
43+
nextStep: {
44+
_selected: 'next',
45+
next: {
46+
editorial: { html: '' },
47+
stepsHeadline: '',
48+
steps: [],
49+
},
50+
},
51+
},
52+
};

‎packages/nextjs/src/components/pages/form-intermediate-step-page/FormIntermediateStepLink.tsx ‎packages/nextjs/src/components/_common/formIntermediateStepLink/FormIntermediateStepLink.tsx

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React from 'react';
22
import { LinkPanel } from '@navikt/ds-react';
3-
import { InfoBox } from 'components/_common/infoBox/InfoBox';
43
import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
54
import { FormIntermediateStep_StepLinkData } from 'components/pages/form-intermediate-step-page/useFormIntermediateStepPage';
65
import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
6+
import { LanguageDisclaimer } from 'components/_common/languageDisclaimer/LanguageDisclaimer';
77

88
type Props = FormIntermediateStep_StepLinkData &
99
Omit<React.ComponentProps<typeof LenkeBase>, 'children' | 'href'>;
@@ -23,12 +23,10 @@ export const FormIntermediateStepLink = ({
2323
}
2424

2525
return (
26-
<>
27-
{languageDisclaimer && <InfoBox>{languageDisclaimer}</InfoBox>}
28-
<LinkPanel {...rest} as={LenkeBase} href={href} shallow={isStepNavigation}>
29-
<LinkPanel.Title>{label}</LinkPanel.Title>
30-
<LinkPanel.Description>{explanation}</LinkPanel.Description>
31-
</LinkPanel>
32-
</>
26+
<LinkPanel {...rest} as={LenkeBase} href={href} shallow={isStepNavigation}>
27+
<LinkPanel.Title>{label}</LinkPanel.Title>
28+
<LinkPanel.Description>{explanation}</LinkPanel.Description>
29+
{languageDisclaimer && <LanguageDisclaimer>{languageDisclaimer}</LanguageDisclaimer>}
30+
</LinkPanel>
3331
);
3432
};

‎packages/nextjs/src/components/_common/languageDisclaimer/LanguageDisclaimer.module.scss

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.languageDisclaimer {
2+
display: flex;
3+
align-items: center;
4+
gap: 0.5rem;
5+
margin-top: 1rem;
6+
7+
svg {
8+
color: var(--a-icon-subtle);
9+
}
10+
}

‎packages/nextjs/src/components/_common/languageDisclaimer/LanguageDisclaimer.stories.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
3+
import { LanguageDisclaimer } from './LanguageDisclaimer';
4+
5+
const meta = {
6+
component: LanguageDisclaimer,
7+
} satisfies Meta<typeof LanguageDisclaimer>;
8+
9+
export default meta;
10+
11+
type Story = StoryObj<typeof meta>;
12+
13+
export const Default: Story = {
14+
args: {
15+
children: 'Kun på bokmål',
16+
},
17+
};

‎packages/nextjs/src/components/_common/languageDisclaimer/LanguageDisclaimer.tsx

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { PropsWithChildren } from 'react';
2+
import { InformationSquareIcon } from '@navikt/aksel-icons';
3+
import style from './LanguageDisclaimer.module.scss';
4+
5+
export const LanguageDisclaimer = (props: PropsWithChildren) => {
6+
return (
7+
<div className={style.languageDisclaimer}>
8+
<InformationSquareIcon fontSize="1.5rem" title="Informasjon" />
9+
{props.children}
10+
</div>
11+
);
12+
};

‎packages/nextjs/src/components/pages/form-intermediate-step-page/FormIntermediateStepPage.module.scss

+50-51
Original file line numberDiff line numberDiff line change
@@ -8,65 +8,64 @@ $padding: 2rem;
88
flex-direction: column;
99
justify-content: flex-start;
1010
width: 100%;
11-
}
12-
13-
.content {
14-
margin-top: 2rem;
15-
display: flex;
16-
flex-direction: column;
17-
justify-content: flex-start;
18-
align-self: center;
19-
width: 100%;
20-
max-width: common.$contentMaxWidth;
2111

22-
& > * {
12+
.content {
13+
margin-top: 2rem;
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: flex-start;
17+
align-self: center;
2318
width: 100%;
24-
}
25-
}
19+
max-width: common.$contentMaxWidth;
2620

27-
.stepOptionsWrapper {
28-
display: flex;
29-
flex-direction: column;
30-
align-items: flex-start;
31-
max-width: common.$sectionMaxWidth;
32-
}
21+
& > * {
22+
width: 100%;
23+
}
3324

34-
.stepList {
35-
list-style-type: none;
36-
margin: 0;
37-
padding: 0;
38-
}
25+
.stepOptionsWrapper {
26+
display: flex;
27+
flex-direction: column;
28+
align-items: flex-start;
29+
max-width: common.$sectionMaxWidth;
3930

40-
.stepItem {
41-
margin-bottom: var(--a-spacing-7);
42-
}
31+
.stepList {
32+
list-style-type: none;
33+
margin: 0;
34+
padding: 0;
4335

44-
.stepAction {
45-
&:global(.navds-link-panel) {
46-
border-color: var(--default-action-color);
47-
}
48-
& :global {
49-
.navds-link-panel__title,
50-
.navds-link-panel__chevron {
51-
color: var(--default-action-color);
52-
}
53-
}
54-
@media #{common.$mq-screen-mobile} {
55-
padding: 0.75rem;
56-
}
57-
}
36+
.stepItem {
37+
margin-bottom: var(--a-spacing-7);
5838

59-
.buttonGroup {
60-
display: flex;
61-
}
39+
.stepAction {
40+
&:global(.navds-link-panel) {
41+
border-color: var(--default-action-color);
42+
}
43+
& :global {
44+
.navds-link-panel__title,
45+
.navds-link-panel__chevron {
46+
color: var(--default-action-color);
47+
}
48+
}
49+
@media #{common.$mq-screen-mobile} {
50+
padding: 0.75rem;
51+
}
52+
}
53+
}
54+
}
55+
}
56+
.buttonGroup {
57+
display: flex;
58+
}
6259

63-
.backButton {
64-
text-decoration-line: underline;
65-
text-underline-offset: 4px;
66-
padding: 0;
67-
margin-top: 1rem;
60+
.backButton {
61+
text-decoration-line: underline;
62+
text-underline-offset: 4px;
63+
padding: 0;
64+
margin-top: 1rem;
6865

69-
&:hover {
70-
background-color: transparent;
66+
&:hover {
67+
background-color: transparent;
68+
}
69+
}
7170
}
7271
}

‎packages/nextjs/src/components/pages/form-intermediate-step-page/FormIntermediateStepPage.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { FormIntermediateStepPageProps } from 'types/content-props/form-intermed
66
import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml';
77
import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
88
import { useFormIntermediateStepPage } from 'components/pages/form-intermediate-step-page/useFormIntermediateStepPage';
9-
import { FormIntermediateStepLink } from 'components/pages/form-intermediate-step-page/FormIntermediateStepLink';
9+
import { FormIntermediateStepLink } from 'components/_common/formIntermediateStepLink/FormIntermediateStepLink';
1010

1111
import style from './FormIntermediateStepPage.module.scss';
1212

0 commit comments

Comments
 (0)