Skip to content

Commit abe14be

Browse files
JeroenduCJeroenduC
authored
Trouwen webteksten huwelijk (#3051)
prototype ten behoeve van het testen van een nieuwe structuur voor de webteksten rondom trouwen
1 parent 157d561 commit abe14be

File tree

9 files changed

+1007
-2
lines changed

9 files changed

+1007
-2
lines changed

‎packages/storybook-react/src/stories/prototype-src/variables.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,5 +27,10 @@ const urls = {
2727
'https://www.figma.com/proto/J8GosPQdIRzYgXiwB79gks/Formulieren-prototypes--openForms-?page-id=2161%3A44997&node-id=2162-50715&viewport=-3757%2C978%2C0.59&t=SkZGMPwW1sc23wwv-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=2162%3A50715',
2828
contactformEmailDesktop:
2929
'https://www.figma.com/proto/J8GosPQdIRzYgXiwB79gks/Formulieren-prototypes--openForms-?page-id=2161%3A44997&node-id=4084-5696&viewport=-3757%2C978%2C0.59&t=IOqHaEt7ON9DGEUb-8&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=4084%3A5696&hide-ui=1',
30+
trouwenNavigatie: './iframe.html?args=&id=trouwen-navigeren--one&viewMode=story',
31+
trouwenRegelen: './iframe.html?args=&id=trouwen-regelen--one&viewMode=story',
32+
trouwenRegelenChecklist: './iframe.html?args=&id=trouwen-regelen--one&viewMode=story#regelwerk',
33+
trouwenVeelgesteldeVragen: './iframe.html?args=&id=trouwen-veelgesteldevragen--one&viewMode=story',
34+
trouwenSoortenTrouwen: './iframe.html?args=&id=trouwen-soorten-trouwen--one&viewMode=story',
3035
};
3136
export default urls;

‎packages/storybook-react/src/stories/prototype-src/webpaginablokken/HulpEnContact.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ const HulpEnContact: React.FC<HulpEnContactProps> = ({ onSubmit }) => {
103103
return (
104104
<div className="utrecht-help-contact-block">
105105
<Heading2 class="utrecht-heading-3" style={{ textTransform: 'uppercase' }}>
106-
Hulp en Contact <span style={{ fontWeight: 'normal' }}>Amsterdamsestraatweg</span>
106+
Hulp en Contact <span style={{ fontWeight: 'normal' }}>Trouwen</span>
107107
</Heading2>
108108

109109
<div className="utrecht-help-contact-content">

‎packages/storybook-react/src/stories/prototype-src/webpaginablokken/HulpEnContact2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const HulpEnContact2: React.FC = () => {
2323
return (
2424
<div className="utrecht-help-contact-block">
2525
<Heading2 style={{ textTransform: 'uppercase' }}>
26-
Hulp en Contact <span style={{ fontWeight: 'normal' }}>Amsterdamsestraatweg</span>
26+
Hulp en Contact <span style={{ fontWeight: 'normal' }}>Trouwen</span>
2727
</Heading2>
2828

2929
<div className="utrecht-help-contact-content">

‎packages/storybook-react/src/stories/prototype-webopbouw-trouwen/introductie.stories.tsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import {
3+
ButtonLink,
4+
Logo,
5+
LogoImage,
6+
Page,
7+
PageContent,
8+
PageHeader,
9+
Surface,
10+
} from '@utrecht/component-library-react/dist/css-module';
11+
import { UtrechtIconArrow } from '@utrecht/web-component-library-react';
12+
import React from 'react';
13+
import '../prototype-src/index.css'; // Importeer stylesheet
14+
import FooterContact from '../prototype-src/contactformulier/FooterContactFormulier.js';
15+
import IntroductieContact from '../prototype-src/contactformulier/IntroductieContactFormulier.js'; // Importeer het footer-component
16+
import urls from '../prototype-src/variables.js';
17+
import '../styles.css';
18+
19+
const meta = {
20+
title: 'Prototypes/Trouwen/Testpaginas/Introductie ',
21+
id: 'trouwen-introductie',
22+
component: Page,
23+
parameters: {
24+
layout: 'fullscreen',
25+
},
26+
} satisfies Meta<typeof Page>;
27+
28+
export default meta;
29+
30+
type Story = StoryObj<typeof meta>;
31+
32+
export const One: Story = {
33+
render: (args: any) => (
34+
<Surface className="utrecht-custom-theme">
35+
<Page {...args}>
36+
<PageHeader>
37+
<Logo>
38+
<LogoImage />
39+
</Logo>
40+
</PageHeader>
41+
<PageContent>
42+
<main>
43+
<section>
44+
<IntroductieContact />
45+
<br />
46+
<ButtonLink appearance="primary-action-button" href={urls.contactformScenario}>
47+
Starten
48+
<UtrechtIconArrow />
49+
</ButtonLink>
50+
</section>
51+
</main>
52+
</PageContent>
53+
<FooterContact />
54+
</Page>
55+
</Surface>
56+
),
57+
};

‎packages/storybook-react/src/stories/prototype-webopbouw-trouwen/navigatie.stories.tsx‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
import { Meta, StoryObj } from '@storybook/react';
2+
import {
3+
AccordionProvider,
4+
BreadcrumbNav,
5+
BreadcrumbNavLink,
6+
BreadcrumbNavSeparator,
7+
ButtonLink,
8+
Heading1,
9+
Heading2,
10+
Heading3,
11+
Image,
12+
Link,
13+
Logo,
14+
LogoImage,
15+
Page,
16+
PageContent,
17+
PageHeader,
18+
Paragraph,
19+
Surface,
20+
UnorderedList,
21+
UnorderedListItem,
22+
} from '@utrecht/component-library-react/dist/css-module';
23+
import {
24+
UtrechtIconArrow,
25+
UtrechtIconChevronLeft,
26+
UtrechtIconChevronRight,
27+
} from '@utrecht/web-component-library-react';
28+
import React, { useState } from 'react';
29+
import '../prototype-src/index.css';
30+
import Chatbot from '../prototype-src/contactformulier/Chatbot.js';
31+
import FooterContact from '../prototype-src/contactformulier/FooterContactFormulier.js';
32+
import urls from '../prototype-src/variables.js';
33+
import HoofdNavigatie from '../prototype-src/webpaginablokken/HoofdNavigatie.js';
34+
import HulpEnContact from '../prototype-src/webpaginablokken/HulpEnContact.js';
35+
import HulpEnContact2 from '../prototype-src/webpaginablokken/HulpEnContact2.js';
36+
import KTO from '../prototype-src/webpaginablokken/KTO.js';
37+
import '../styles.css';
38+
import PageHeaderWithSearch from '../prototype-src/webpaginablokken/PageHeaderWithSearch.js';
39+
40+
const meta = {
41+
title: 'Prototypes/Trouwen/Pagina indeling/Navigeren',
42+
id: 'trouwen-navigeren',
43+
component: Page,
44+
parameters: {
45+
layout: 'fullscreen',
46+
},
47+
} satisfies Meta<typeof Page>;
48+
49+
export default meta;
50+
51+
type Story = StoryObj<typeof meta>;
52+
53+
export const One: Story = {
54+
render: (args: any) => {
55+
// State om te bepalen welke HulpEnContact component getoond wordt
56+
const [showHulpEnContact2, setShowHulpEnContact2] = useState(false);
57+
58+
return (
59+
<Surface className="utrecht-custom-theme">
60+
<Page {...args}>
61+
<PageHeaderWithSearch />
62+
<HoofdNavigatie />
63+
<PageContent>
64+
<BreadcrumbNav>
65+
<BreadcrumbNavLink href="https://www.utrecht.nl/">
66+
<BreadcrumbNavSeparator></BreadcrumbNavSeparator>
67+
Home
68+
</BreadcrumbNavLink>
69+
<BreadcrumbNavLink href="https://www.utrecht.nl/wonen-en-leven">
70+
<BreadcrumbNavSeparator>
71+
<UtrechtIconChevronRight />
72+
</BreadcrumbNavSeparator>
73+
Wonen en leven
74+
</BreadcrumbNavLink>
75+
</BreadcrumbNav>
76+
<main>
77+
<section>
78+
<Heading1>Trouwen, partnerschap en samenlevingscontract</Heading1>
79+
<Paragraph appearance="lead">
80+
U wilt trouwen of een geregistreerd partnerschap aangaan. Gefeliciteerd! Bekijk hieronder welke
81+
mogelijkheden er zijn en wat u daarvoor moeten regelen.{' '}
82+
</Paragraph>
83+
<Heading2>Trouwen</Heading2>
84+
<Paragraph>
85+
U kunt uw relatie officieel maken door te trouwen. U geeft elkaar dan het ja-woord. Huwelijk wordt in
86+
alle landen erkend.
87+
</Paragraph>
88+
<Link
89+
className="utrecht-link utrecht-link--html-a utrecht-advanced-link utrecht-advanced-link--with-icon"
90+
href={urls.trouwenRegelen}
91+
>
92+
<UtrechtIconChevronRight />
93+
Lees meer over trouwen en wat u hiervoor moet regelen
94+
</Link>
95+
<Heading2>Geregistreerd Partnerschap</Heading2>
96+
<Paragraph>
97+
U kunt uw relatie ook officieel maken door een geregistreerd partnerschap te sluiten. Partnerschap
98+
lijkt heel erg op huwelijk. Verschil is dat u hier geen ja-woord hoeft te geven en dat partnerschap
99+
niet in alle landen erkend wordt.
100+
</Paragraph>
101+
<Link
102+
className="utrecht-link utrecht-link--html-a utrecht-advanced-link utrecht-advanced-link--with-icon"
103+
href="https://loket.digitaal.utrecht.nl/nl/producten/geregistreerd-partnerschap"
104+
>
105+
<UtrechtIconChevronRight />
106+
Lees meer over het geregistreerd partnerschap en wat u hiervoor moet regelen
107+
</Link>
108+
<Heading2>Omzetten partnerschap in huwelijk </Heading2>
109+
<Paragraph>
110+
Hebt u al een geregistreerd partnerschap gesloten? Dan kunt u er ook voor kiezen om uw partnerschap om
111+
te zetten in een huwelijk. Hoe u dit doet bepaalt u zelf. Net als bij een huwelijk kan dat van heel
112+
eenvoudig tot een uitgebreide ceremonie. Wilt u graag advies? U kunt ons bellen op 14 030.
113+
</Paragraph>
114+
<Link
115+
className="utrecht-link utrecht-link--html-a utrecht-advanced-link utrecht-advanced-link--with-icon"
116+
href="https://loket.digitaal.utrecht.nl/nl/producten/geregistreerd-partnerschap#geregistreerd-partnerschap-omzetten-in-huwelijk"
117+
>
118+
<UtrechtIconChevronRight />
119+
Lees meer over het omzetten van een partnerschap in een huwelijk
120+
</Link>
121+
<Heading2>Samenlevingscontract </Heading2>
122+
<Paragraph>
123+
Wilt u uw relatie vastleggen, maar wilt u niet trouwen of een partnerschap sluiten? Dan kunt ook een
124+
samenlevingscontract laten opstellen. Dit doet u bij de notaris. Een samenlevingscontract is niet
125+
hetzelfde als een geregistreerd partnerschap.
126+
</Paragraph>
127+
<Link
128+
className="utrecht-link utrecht-link--html-a utrecht-advanced-link utrecht-advanced-link--with-icon"
129+
href="https://www.rijksoverheid.nl/onderwerpen/trouwen-samenlevingscontract-en-geregistreerd-partnerschap/vraag-en-antwoord/checklist-samenlevingscontract"
130+
>
131+
<UtrechtIconChevronRight />
132+
Lees meer over het samenlevingscontract
133+
</Link>
134+
135+
{/* Conditioneel renderen van HulpEnContact of HulpEnContact2 */}
136+
{!showHulpEnContact2 ? (
137+
<HulpEnContact onSubmit={() => setShowHulpEnContact2(true)} />
138+
) : (
139+
<HulpEnContact2 />
140+
)}
141+
<KTO />
142+
</section>
143+
</main>
144+
</PageContent>
145+
<FooterContact />
146+
<Chatbot />
147+
</Page>
148+
</Surface>
149+
);
150+
},
151+
};

0 commit comments

Comments
 (0)