Prototype trouwen webteksten

packages/storybook-react/src/stories/prototype-src/accordionteksten/trouwen/BelangrijkAchternaam.tsx

@@ -0,0 +1,30 @@
+import {
+  Heading3,
+  Heading4,
+  Link,
+  Paragraph,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react/dist/css-module';
+import React from 'react';
+
+const BelangrijkAchternaamContent = () => (
+  <>
+    <Paragraph>
+      Koos u bij de erkenning van uw (ongeboren) kinderen voor een bepaalde achternaam? En gaat u als ouders trouwen of
+      een partnerschap registreren? Dan kunt u voor 1 keer en alleen op dat moment de achternaam veranderen van de
+      kinderen die u samen hebt. U kunt daarbij kiezen voor de achternaam van een van u of voor een combinatie van beide
+      achternamen. Voor de verandering van de achternaam moet uw kind wel de Nederlandse nationaliteit hebben. Wilt u
+      dit? Laat ons dit zo snel mogelijk weten. U kunt hiervoor bellen naar 14 030.
+    </Paragraph>
+    <br />
+  </>
+);
+
+export default BelangrijkAchternaamContent;

packages/storybook-react/src/stories/prototype-src/accordionteksten/trouwen/BelangrijkAnnuleren.tsx

@@ -0,0 +1,29 @@
+import {
+  Heading3,
+  Heading4,
+  Link,
+  Paragraph,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react/dist/css-module';
+import React from 'react';
+
+const BelangrijkAnnulerenContent = () => (
+  <>
+    <Paragraph>
+      U kunt uw huwelijk gratis wijzigen of annuleren tot minimaal 3 weken voor de afgesproken huwelijksdatum. Annuleert
+      u het huwelijk minder dan 3 weken van tevoren? Dan betaalt u een deel of alle kosten van de huwelijksregistratie.
+      Wilt u uw afspraak wijzigen of annuleren? Neem dan contact met ons op via{' '}
+      <Link href="mailto:huwelijkszaken@utrecht.nl">huwelijkszaken@utrecht.nl</Link> of bel 14 030.
+    </Paragraph>
+    <br />
+  </>
+);
+
+export default BelangrijkAnnulerenContent;

packages/storybook-react/src/stories/prototype-src/accordionteksten/trouwen/BelangrijkGemeenschapGoederen.tsx

@@ -0,0 +1,32 @@
+import {
+  Heading3,
+  Heading4,
+  Link,
+  Paragraph,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react/dist/css-module';
+import React from 'react';
+
+const BelangrijkGemeenschapGoederenContent = () => (
+  <>
+    <Paragraph>
+      U trouwt standaard in beperkte gemeenschap van goederen. Wilt u dit aanpassen? Dan regelt u dit bij een notaris. U
+      hoeft ons niet door te geven of u gaat trouwen in (beperkte) gemeenschap van goederen of onder huwelijkse
+      voorwaarden.
+    </Paragraph>
+    <Paragraph>
+      Meer informatie hierover staat op <Link href="https://www.rijksoverheid.nl/">rijksoverheid.nl</Link> en op{' '}
+      <Link href="https://www.notaris.nl/">notaris.nl</Link>
+    </Paragraph>
+    <br />
+  </>
+);
+
+export default BelangrijkGemeenschapGoederenContent;

packages/storybook-react/src/stories/prototype-src/accordionteksten/trouwen/BelangrijkNietNederlands.tsx

@@ -0,0 +1,27 @@
+import {
+  Heading3,
+  Heading4,
+  Link,
+  Paragraph,
+  Table,
+  TableBody,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react/dist/css-module';
+import React from 'react';
+
+const BelangrijkNietNederlandsContent = () => (
+  <>
+    <Paragraph>
+      Hebt u niet de Nederlandse nationaliteit? Vraag dan aan uw eigen land (bijvoorbeeld de ambassade) welke zaken u
+      bij hen voor en na het huwelijk moet regelen.
+    </Paragraph>
+    <br />
+  </>
+);
+
+export default BelangrijkNietNederlandsContent;

packages/storybook-react/src/stories/prototype-src/accordionteksten/trouwen/MogelijkhedenCeremonie.tsx

@@ -0,0 +1,153 @@
+import {
+  Heading3,
+  Heading4,
+  Heading5,
+  Link,
+  Paragraph,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react/dist/css-module';
+import React from 'react';
+import { Separator } from 'storybook/internal/components';
+
+const MogelijkhedenCeremonieContent = () => (
+  <>
+    <Heading4>Locatie van de gemeente: stadhuis of wijkservicecentrum Vleuten-De Meern</Heading4>
+    <Table>
+      <TableCaption>Dagen, tijden en kosten</TableCaption>
+
+      <TableHeader className="utrecht-table__header--sticky">
+        <TableRow>
+          <TableHeaderCell scope="col">Dagen</TableHeaderCell>
+          <TableHeaderCell scope="col">Tijden</TableHeaderCell>
+          <TableHeaderCell scope="col">Kosten</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell scope="row">Maandag – vrijdag</TableCell>
+          <TableCell>8.00 – 18.00 uur</TableCell>
+          <TableCell>€ 1.043,30</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Maandag – vrijdag</TableCell>
+          <TableCell>na 18.00 uur</TableCell>
+          <TableCell>€ 1.554,60</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Zaterdag en zondag</TableCell>
+          <TableCell></TableCell>
+          <TableCell>€ 1.554,60</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Feestdagen</TableCell>
+          <TableCell></TableCell>
+          <TableCell>€ 2.095,15</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+    <UnorderedList>
+      <UnorderedListItem>U betaalt tijdens de vervolgafspraak</UnorderedListItem>
+      <UnorderedListItem>U kunt kiezen uit verschillende zalen</UnorderedListItem>
+    </UnorderedList>
+    <br />
+    <Link href="https://loket.digitaal.utrecht.nl/nl/products/trouwlocaties-in-utrecht">
+      Lees meer over deze locatie en bekijk de foto
+    </Link>
+    <Heading4>Andere locaties die door de gemeente zijn goedgekeurd</Heading4>
+    <Table>
+      <TableCaption>Dagen, tijden en kosten</TableCaption>
+
+      <TableHeader className="utrecht-table__header--sticky">
+        <TableRow>
+          <TableHeaderCell scope="col">Dagen</TableHeaderCell>
+          <TableHeaderCell scope="col">Tijden</TableHeaderCell>
+          <TableHeaderCell scope="col">Kosten</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell scope="row">Maandag – vrijdag</TableCell>
+          <TableCell>8.00 – 18.00 uur</TableCell>
+          <TableCell>€ 815,65</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Maandag – vrijdag</TableCell>
+          <TableCell>na 18.00 uur</TableCell>
+          <TableCell>€ 1.107,85</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Zaterdag, zondag en feestdagen</TableCell>
+          <TableCell></TableCell>
+          <TableCell>€ 1.107,85</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+    <UnorderedList>
+      <UnorderedListItem>U betaalt tijdens de vervolgafspraak</UnorderedListItem>
+      <UnorderedListItem>
+        Informeer bij de trouwlocatie welke kosten u daar aanvullend moet betalen voor het gebruik ervan.
+      </UnorderedListItem>
+    </UnorderedList>
+    <br />
+    <Link href="https://loket.digitaal.utrecht.nl/nl/products/trouwlocaties-in-utrecht">
+      Bekijk welke locaties dit zijn
+    </Link>
+
+    <Heading4>Locatie die u zelf kiest</Heading4>
+    <Paragraph>
+      U kunt ook zelf een trouwlocatie kiezen en door ons laten goedkeuren. Dat zijn bijvoorbeeld het café om de hoek,
+      uw eigen huiskamer of een feestzaal. U kunt niet iedere locatie kiezen. Een park, bos, boomgaard of een (varende)
+      boot, zijn niet mogelijk als trouwlocatie. Ook moet de locatie in de gemeente Utrecht zijn.
+    </Paragraph>
+    <Table>
+      <TableCaption>Dagen, tijden en kosten</TableCaption>
+
+      <TableHeader className="utrecht-table__header--sticky">
+        <TableRow>
+          <TableHeaderCell scope="col">Dagen</TableHeaderCell>
+          <TableHeaderCell scope="col">Tijden</TableHeaderCell>
+          <TableHeaderCell scope="col">Kosten</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell scope="row">Maandag – vrijdag</TableCell>
+          <TableCell>8.00 – 18.00 uur</TableCell>
+          <TableCell>€ 1.076,15</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Maandag – vrijdag</TableCell>
+          <TableCell>na 18.00 uur</TableCell>
+          <TableCell>€ 1.527,80</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Zaterdag, zondag en feestdagen</TableCell>
+          <TableCell></TableCell>
+          <TableCell>€ 1.527,80</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+    <UnorderedList>
+      <UnorderedListItem>U betaalt tijdens de vervolgafspraak</UnorderedListItem>
+      <UnorderedListItem>
+        Informeer bij de trouwlocatie welke kosten u daar aanvullend moet betalen voor het gebruik ervan.
+      </UnorderedListItem>
+    </UnorderedList>
+    <br />
+    <Link href="https://loket.digitaal.utrecht.nl/nl/products/trouwlocaties-in-utrecht">
+      Lees meer over trouwen op locatie naar keuze en vraag onze goedkeuring aan
+    </Link>
+    <br />
+    <br />
+  </>
+);
+
+export default MogelijkhedenCeremonieContent;

packages/storybook-react/src/stories/prototype-src/accordionteksten/trouwen/MogelijkhedenEenvoudig.tsx

@@ -0,0 +1,64 @@
+import {
+  Heading3,
+  Link,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHeader,
+  TableHeaderCell,
+  TableRow,
+  UnorderedList,
+  UnorderedListItem,
+} from '@utrecht/component-library-react/dist/css-module';
+import React from 'react';
+
+const MogelijkhedenEenvoudigContent = () => (
+  <>
+    <Table>
+      <TableCaption>Dagen, tijden en kosten</TableCaption>
+
+      <TableHeader className="utrecht-table__header--sticky">
+        <TableRow>
+          <TableHeaderCell scope="col">Dagen</TableHeaderCell>
+          <TableHeaderCell scope="col">Tijden</TableHeaderCell>
+          <TableHeaderCell scope="col">Kosten</TableHeaderCell>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell scope="row">Maandag</TableCell>
+          <TableCell>11.00 – 11.30 uur</TableCell>
+          <TableCell>€ 310,30</TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell scope="row">Dinsdag, woensdag en vrijdag</TableCell>
+          <TableCell>10.00, 10.30 of 11.30 uur</TableCell>
+          <TableCell>€ 310,30</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+    <UnorderedList>
+      <UnorderedListItem>U trouwt in de trouwzaal van het stadskantoor</UnorderedListItem>
+      <UnorderedListItem>U betaalt na het maken van een afspraak voor een eenvoudig huwelijk</UnorderedListItem>
+      <UnorderedListItem>De trouwambtenaar houdt geen toespraak en heeft vooraf geen contact met u</UnorderedListItem>
+      <UnorderedListItem>Een eenvoudig huwelijk duurt maximaal 5-10 minuten</UnorderedListItem>
+      <UnorderedListItem>
+        U bent welkom met maximaal 10 personen, dit is inclusief het bruidspaar, de getuigen en een fotograaf.
+      </UnorderedListItem>
+      <UnorderedListItem>De wachtlijst voor eenvoudig trouwen is ongeveer 3 maanden</UnorderedListItem>
+      <UnorderedListItem>
+        Hebt u uw <Link href="#regelen">voorgenomen huwelijk al gemeld</Link> en is deze goedgekeurd? Dan kunt u pas een
+        afspraak maken voor een flitshuwelijk.
+      </UnorderedListItem>
+    </UnorderedList>
+    <br />
+    <Link href="https://loket.digitaal.utrecht.nl/nl/products/trouwlocaties-in-utrecht">
+      Lees meer over deze locatie en bekijk de foto
+    </Link>
+    <br />
+    <br />
+  </>
+);
+
+export default MogelijkhedenEenvoudigContent;