Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Savi mijn gegevens en overzicht paginas components 2 #21

Draft
wants to merge 23 commits into
base: main
Choose a base branch
from
Draft

Savi mijn gegevens en overzicht paginas components 2 #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
fef9b68
feat: copied story to adapt
savitris Sep 27, 2023
63b1fa3
feat: made components available on index.tsx
savitris Sep 27, 2023
82f421b
fix: made story unique
savitris Sep 27, 2023
1f3797d
fix: deleted unused import headerprops
savitris Sep 27, 2023
f110878
style: commented out nonused List for testing
savitris Sep 28, 2023
cfadd90
feat: imported components missing for Table List
savitris Sep 28, 2023
43490ec
feat: added Table with data
savitris Sep 28, 2023
43f5e2b
feat: added List with data
savitris Sep 28, 2023
f866c4e
feat: added table and imports
savitris Sep 28, 2023
be9d694
fix: replaced invalid story-login file
savitris Sep 28, 2023
5af8077
fix: added table data and icon
savitris Sep 28, 2023
ddee49b
fix: added CaseCards and Icons
savitris Sep 28, 2023
7bfdb24
fix: added Icons to side navigation
savitris Sep 29, 2023
80aca32
fix: update side navigation My-Data
savitris Sep 29, 2023
cbf1666
fix: update icon import list
savitris Sep 29, 2023
401f25f
fix: added breadcrumb link MijnDenHaag
savitris Sep 29, 2023
e4b9e9a
fix: deleted Paragraph
savitris Sep 29, 2023
79db486
fix: correction List data
savitris Sep 29, 2023
dc0319b
fix: commented out TableHeads
savitris Sep 29, 2023
9a1b779
fix: added Actions
savitris Sep 29, 2023
e006c27
style: removed unused commented code
savitris Sep 29, 2023
4964a2a
style: added section for Cards styling
savitris Sep 29, 2023
6abbfee
fix: added dl and nav links
savitris Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 66 additions & 10 deletions .storybook/stories/templates/02-Overview-page.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,29 @@
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { Heading2, Paragraph } from '../../../components/Typography/src';
import { Heading2, Heading3, Paragraph } from '../../../components/Typography/src';
import { Page, PageHeader, PageFooter } from '../../../components/Page/src';
import { HeaderLogic, HeaderLogicProps } from '../../../components/Header/src';
import Footer from '../../../components/Footer/src';
import ResponsiveContent from '../../../components/ResponsiveContent/src';
import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
import { ArchiveIcon, FavoriteIcon, GridIcon, UserIcon } from '../../../components/Icons/src';
import {
ArchiveIcon,
GridIcon,
InboxIcon,
UserIcon,
ArrowRightIcon,
HouseIcon,
ParkingIcon,
} from '../../../components/Icons/src';
import { copyright, headerProps, footerLegalData, footerSocialData, newsletterData, contactData } from './util';
import { Link } from '../../../components/Link/src';

import './template-story.scss';

import { CaseCard } from '../../../components/Card/src';

import { Action } from '../../../components/Action/src';

const meta = {
title: 'Templates/OverviewPage',
parameters: {
Expand All @@ -28,6 +41,8 @@ const overviewHeaderProps: HeaderLogicProps = {
};
type Story = StoryObj<typeof meta>;

let deadlineDate = new Date(new Date().setDate(new Date().getDate() + 2));

export const OverviewPage: Story = {
render: () => (
<Page>
Expand All @@ -39,36 +54,77 @@ export const OverviewPage: Story = {
<SidenavList>
<SidenavItem>
<SidenavLink current={true}>
<GridIcon />
<InboxIcon />
Overzicht
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<ArchiveIcon />
Lopende zaken
Mijn lopende zaken
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<GridIcon />
Belastingzaken
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<HouseIcon />
WOZ
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<ParkingIcon />
Parkeren
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<FavoriteIcon />
Thema's
<GridIcon />
Erfpacht
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<UserIcon />
Mijn account
Mijn gegevens
</SidenavLink>
</SidenavItem>
</SidenavList>
</Sidenav>
<main className="denhaag-page-content__main">
<Heading2>Hallo, Anne Klap!</Heading2>
<Heading2>Hallo Anne</Heading2>
<Paragraph>
In MijnDenHaag kunt u zelf uw persoonlijke zaken regelen wanneer het u uitkomt. U kunt bijvoorbeeld uw
rekeningen betalen en zien wanneer uw aanvraag klaar is.
</Paragraph>

<Heading3>Wat ik moet regelen</Heading3>
{/* Must not be a series of Action components, use another component */}
<Action link="#example" deadline={deadlineDate} relativeDate>
Geef informatie voor uw aanvraag subsidie geluidisolatie
</Action>

<Action link="#example" deadline={deadlineDate}>
Betaal uw parkeerbon van € 74,90 voor parkeren bij Valeriusplein
</Action>

<Action link="#example">Verleng uw identiteitskaart</Action>

<Heading3>Mijn lopende zaken</Heading3>
<Paragraph>
In MijnDenHaag kunt u zelf u persoonlijke zaken regelen wanneer u het uitkomt. Denk aan zaken zoals het zien
wanneer uw aanvraag klaar is of het bijkopen van extra parkeertegoed.
<Link href="#" icon={<ArrowRightIcon />}>
Bekijk alle zaken
</Link>
</Paragraph>
<section className="denhaag-card-group">
<CaseCard date={new Date('2020-10-17T00:00:00.000Z')} href="#" title="Aanvraag subsidie geluidsisolatie" />
<CaseCard date={new Date('2020-08-01T00:00:00.000Z')} href="#" title="Aanvraag Ooievaarspas" />
</section>
</main>
</ResponsiveContent>
<PageFooter>
Expand Down
190 changes: 190 additions & 0 deletions .storybook/stories/templates/My-Data.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { Heading2, Paragraph } from '../../../components/Typography/src';
import { Page, PageHeader, PageFooter } from '../../../components/Page/src';
import { HeaderLogic, HeaderLogicProps } from '../../../components/Header/src';
import Footer from '../../../components/Footer/src';
import ResponsiveContent from '../../../components/ResponsiveContent/src';
import { Sidenav, SidenavItem, SidenavLink, SidenavList } from '../../../components/Sidenav/src';
import {
ArchiveIcon,
GridIcon,
InboxIcon,
UserIcon,
ArrowRightIcon,
HouseIcon,
ParkingIcon,
} from '../../../components/Icons/src';
import { footerLegalData, footerSocialData, newsletterData, contactData } from '../templates/util';

// import './story-login.css'; <-vroegere oplossing niet meer valid
import './template-story.scss';

// import { List, ListItem, ListItemText, ListItemIcon } from '../../../components/List/src';
import {
Table,
TableBody,
TableCaption,
TableHead,
TableRow,
TableCell,
TableHeader,
} from '../../../components/Table/src';

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',
parameters: {
chromatic: { viewports: [1768, 1280, 768, 360] },
},
} as Meta<typeof Page>;

export default meta;

const myDataHeaderProps: HeaderLogicProps = {
breadcrumbs: {
navigationPath: [
{ label: 'Home', href: 'https://denhaag.nl/' },
{ label: 'MijnDenHaag', href: 'https://denhaag.nl/' },
{ label: 'Mijn gegevens' },
],
},
};
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: () => (
<Page>
<PageHeader>
<HeaderLogic {...myDataHeaderProps} />
</PageHeader>
<ResponsiveContent className="denhaag-page-content denhaag-responsive-content--sidebar">
<Sidenav>
<SidenavList>
<SidenavItem>
<SidenavLink current={true}>
<InboxIcon />
Label
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<ArchiveIcon />
Mijn lopende zaken
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<GridIcon />
Belastingzaken
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<HouseIcon />
WOZ
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<ParkingIcon />
Parkeren
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<GridIcon />
Erfpacht
</SidenavLink>
</SidenavItem>
<SidenavItem>
<SidenavLink>
<UserIcon />
Mijn gegevens
</SidenavLink>
</SidenavItem>
</SidenavList>
</Sidenav>
<main className="denhaag-page-content__main">
<Heading2>Mijn gegevens</Heading2>

<DescriptionList caption="Contact" items={items} />
<DescriptionList caption="Persoonsgegevens" items={items2} />
<DescriptionList caption="Adres" items={items3} />

<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>
<Footer
newsletterData={newsletterData}
contactData={contactData}
legalData={footerLegalData}
copyrightLabel={copyright}
socialData={footerSocialData}
/>
</PageFooter>
</Page>
),
};
3 changes: 3 additions & 0 deletions components/List/src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,3 +5,6 @@ export default List;
export * from './List';
export * from './ListItem';
export * from './ListSubheader';

export * from './ListItemIcon';
export * from './ListItemText';