Skip to content

Commit

Permalink
fix: added dl and nav links
Browse files Browse the repository at this point in the history
  • Loading branch information
@savitris
savitris committed Sep 29, 2023
1 parent 4964a2a commit 6abbfee
Showing 1 changed file with 60 additions and 146 deletions.
206 changes: 60 additions & 146 deletions .storybook/stories/templates/My-Data.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import { EditIcon } from '../../../components/Icons/src';
import { List, ListSubheader, ListItem } from '../../../components/List/src';

import { Link } from '../../../components/Link/src';
import { DescriptionList } from '../../../components/DescriptionList/src';

const meta = {
title: 'Templates',
Expand All @@ -56,6 +57,27 @@ const myDataHeaderProps: HeaderLogicProps = {
};
type Story = StoryObj<typeof meta>;

export const items = [
{ title: 'E-mailadres', detail: '[email protected]' },
{ title: 'Telefoonnummer', detail: '-' },
];

export const items2 = [
{ title: 'Voornamen', detail: 'Anne' },
{ title: 'Geslachtsnaam', detail: 'Klap' },
{ title: 'Geslacht', detail: 'Vrouw' },
{ title: 'Burgerservicenummer', detail: '203674581' },
{ title: 'Geboortedatum', detail: '05-12-1988' },
{ title: 'Nationaliteit', detail: 'Nederlandse' },
];

export const items3 = [
{ title: 'Straat', detail: 'Balistraat 44' },
{ title: 'Postcode en plaats', detail: '2538 JH ‘s-Gravenhage' },
{ title: 'Aanvangsdatum', detail: '03-04-2002' },
{ title: 'Aantal inwoner op woonadres', detail: '3' },
];

const copyright = '© 2022 Gemeente Den Haag';
export const myDataPage: Story = {
render: () => (
Expand Down Expand Up @@ -113,153 +135,45 @@ export const myDataPage: Story = {
<main className="denhaag-page-content__main">
<Heading2>Mijn gegevens</Heading2>

<Table>
<TableCaption>Contact</TableCaption>
{/* <TableHead>
<TableRow>
<TableCell />
<TableHeader className="heman">He-Man</TableHeader>
<TableHeader className="skeletor">Skeletor</TableHeader>
</TableRow>
</TableHead> */}
<TableBody>
<TableRow>
<TableHeader scope="row">E-mailadres</TableHeader>
<TableCell>[email protected]</TableCell>
<TableCell>
<EditIcon></EditIcon> Aanpassen
</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Telefoonnummer</TableHeader>
<TableCell>-</TableCell>
<TableCell>
{' '}
<EditIcon></EditIcon> Aanpassen
</TableCell>
</TableRow>
</TableBody>
</Table>
<Table>
<TableCaption>Persoonsgegevens</TableCaption>
{/* <TableHead>
<TableRow>
<TableCell />
<TableHeader className="heman">He-Man</TableHeader>
</TableRow>
</TableHead> */}
<TableBody>
<TableRow>
<TableHeader scope="row">Voornamen</TableHeader>
<TableCell>Anne</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Geslachtsnaam</TableHeader>
<TableCell>Klap</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Geslacht</TableHeader>
<TableCell>Vrouw</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Burgerservicenummer</TableHeader>
<TableCell>203674581</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Geboortedatum</TableHeader>
<TableCell>05-12-1988</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Nationaliteit</TableHeader>
<TableCell>Nederlandse</TableCell>
</TableRow>
</TableBody>
</Table>
<Table>
<TableCaption>Adres</TableCaption>
{/* <TableHead>
<TableRow>
<TableCell />
<TableHeader className="heman">He-Man</TableHeader>
</TableRow>
</TableHead> */}
<TableBody>
<TableRow>
<TableHeader scope="row">Straat</TableHeader>
<TableCell>Balistraat 44</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Postcode en plaats</TableHeader>
<TableCell>2538 JH's-Gravenhage</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Aanvangsdatum</TableHeader>
<TableCell>03-04-2002</TableCell>
</TableRow>
<TableRow>
<TableHeader scope="row">Aantal inwoners op woonadres</TableHeader>
<TableCell>3</TableCell>
</TableRow>
</TableBody>
</Table>
<Paragraph>
Staat er een ander aantal inwoners op uw adres ingeschreven dan u verwacht? Dan kunt u een
<Link href="#"> adresonderzoek aanvragen </Link> bij de gemeente. U kunt een adresonderzoek ook intrekken.
</Paragraph>
<Table>
<TableCaption>Inschrijving</TableCaption>
{/* <TableHead>
<TableRow>
<TableCell />
<TableHeader className="heman">He-Man</TableHeader>
</TableRow>
</TableHead> */}
<TableBody>
<TableRow>
<TableHeader scope="row">Indicatie geheim</TableHeader>
<TableCell>Nee</TableCell>
</TableRow>
</TableBody>
</Table>
<DescriptionList caption="Contact" items={items} />
<DescriptionList caption="Persoonsgegevens" items={items2} />
<DescriptionList caption="Adres" items={items3} />

<List subheader={<ListSubheader>Wijzigingen en aanvragen BRP</ListSubheader>}>
<Link href="#">
<ListItem
primaryText="Meer informatie over adresonderzoek"
leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
/>
</Link>
<Link href="#">
<ListItem
primaryText="Gegevens in BRP laten corrigeren, wijzigen of verwijderen"
leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
/>
</Link>
<Link href="#">
<ListItem
primaryText="Verhuizing doorgeven"
leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
/>
</Link>
<Link href="#">
<ListItem
primaryText="Verandering naamgebruik aanvragen"
leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
/>
</Link>
<Link href="#">
<ListItem
primaryText="Vermelding geslacht wijzigen (transgenders)"
leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
/>
</Link>
<Link href="#">
<ListItem
primaryText="Geheimhouding persoonsgegevens aanvragen"
leftIcon={<ArrowRightIcon color="inherit"></ArrowRightIcon>}
/>
</Link>
</List>
<nav className="denhaag-list__wrapper">
<p className="denhaag-list__subheader">Wijzigingen en aanvragen BRP</p>
<ul className="denhaag-list">
<li className="denhaag-list__item">
<Link component={Link} href="/" icon={<ArrowRightIcon />} iconAlign="start">
Meer informatie over adresonderzoek
</Link>
</li>
<li className="denhaag-list__item">
<Link component={Link} href="/" icon={<ArrowRightIcon />} iconAlign="start">
Gegevens in BRP laten corrigeren, wijzigen of verwijderen
</Link>
</li>
<li className="denhaag-list__item">
<Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
Verhuizing doorgeven
</Link>
</li>
<li className="denhaag-list__item">
<Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
Verandering naamgebruik aanvragen
</Link>
</li>
<li className="denhaag-list__item">
<Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
Vermelding geslacht wijzigen (transgenders)
</Link>
</li>
<li className="denhaag-list__item">
<Link component={Link} href="/nl" icon={<ArrowRightIcon />} iconAlign="start">
Geheimhouding persoonsgegevens aanvragen
</Link>
</li>
</ul>
</nav>
</main>
</ResponsiveContent>
<PageFooter>
Expand Down

0 comments on commit 6abbfee

Please sign in to comment.