From 9bb1010d14f436932e278f9e9d84a004998b8f86 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 17 May 2024 13:11:32 +0200 Subject: [PATCH 01/37] Amsterdam Homepage start --- storybook/src/docs/patterns/AmsterdamPage.tsx | 21 ++++++++++++ .../src/docs/patterns/amsterdam.stories.tsx | 34 +++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 storybook/src/docs/patterns/AmsterdamPage.tsx create mode 100644 storybook/src/docs/patterns/amsterdam.stories.tsx diff --git a/storybook/src/docs/patterns/AmsterdamPage.tsx b/storybook/src/docs/patterns/AmsterdamPage.tsx new file mode 100644 index 0000000000..7fd28a7436 --- /dev/null +++ b/storybook/src/docs/patterns/AmsterdamPage.tsx @@ -0,0 +1,21 @@ +import { Grid, Header, Screen, SkipLink } from '@amsterdam/design-system-react' + +export const AmsterdamPage = () => { + return ( + <> + Direct naar inhoud + + + +
Menu} + logoLink="./" + logoLinkTitle="Naar de homepage van gemeente Amsterdam" + /> + + + + + ) +} diff --git a/storybook/src/docs/patterns/amsterdam.stories.tsx b/storybook/src/docs/patterns/amsterdam.stories.tsx new file mode 100644 index 0000000000..00cccd204e --- /dev/null +++ b/storybook/src/docs/patterns/amsterdam.stories.tsx @@ -0,0 +1,34 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +import { Meta, StoryObj } from '@storybook/react' +import { AmsterdamPage } from './AmsterdamPage' + +const meta = { + title: 'Docs/Patterns/Amsterdam/Article', + component: AmsterdamPage, + parameters: { + layout: 'fullscreen', + }, +} satisfies Meta + +export default meta + +export const Default: StoryObj = { + render: () => , +} + +// export const Article: StoryObj = { +// args: { +// children: ( +// +// +//

Article title

+//

Article content

+// +// +// ), +// }, +// } From 3ed39ba1ec7dd19f88691c6243011de33be05468 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 17 May 2024 15:31:42 +0200 Subject: [PATCH 02/37] Article page pattern for demo --- .../docs/patterns/AmsterdamArticleContent.tsx | 30 ++ .../docs/patterns/AmsterdamArticleHeader.tsx | 25 ++ .../docs/patterns/AmsterdamArticlePage.tsx | 43 ++ storybook/src/docs/patterns/AmsterdamPage.tsx | 386 +++++++++++++++++- .../src/docs/patterns/amsterdam.docs.mdx | 26 ++ .../src/docs/patterns/amsterdam.stories.tsx | 33 +- 6 files changed, 521 insertions(+), 22 deletions(-) create mode 100644 storybook/src/docs/patterns/AmsterdamArticleContent.tsx create mode 100644 storybook/src/docs/patterns/AmsterdamArticleHeader.tsx create mode 100644 storybook/src/docs/patterns/AmsterdamArticlePage.tsx create mode 100644 storybook/src/docs/patterns/amsterdam.docs.mdx diff --git a/storybook/src/docs/patterns/AmsterdamArticleContent.tsx b/storybook/src/docs/patterns/AmsterdamArticleContent.tsx new file mode 100644 index 0000000000..42066e2f44 --- /dev/null +++ b/storybook/src/docs/patterns/AmsterdamArticleContent.tsx @@ -0,0 +1,30 @@ +import { Column, Grid, Heading, Paragraph } from '@amsterdam/design-system-react' + +export type AmsterdamArticleContentProps = {} + +export const AmsterdamArticleContent = () => { + return ( + + + + + Tussen 1813 en 1870 was Amsterdam in verval. In 1735 leefden er 240.000 mensen in de stad. In 1815 waren dat + er nog maar 180.000. Amsterdam was een stervende stad, terend op oude roem en een kleine groep rijken. + Verkrotting, isolement en armoede tekenden de stad. Amsterdam verdween bijna van het wereldtoneel. + + + Tot slaaf gemaakte mensen vluchtten en kwamen regelmatig in opstand. De Nederlandse + anti-slavernij-activisten waren vaak jongeren en vrouwen. Bezoekers zien, lezen en horen persoonlijke + verhalen van mensen die tegen de trans-Atlantische slavernij in verzet kwamen. + + Van alle tijden + + “Verzet tegen onrecht is van alle tijden en van alle mensen. Dat is wat ons verbindt. Deze tentoonstelling + past daarom goed in het Verzetsmuseum”, zegt Peggy Brandon, kwartiermaker Nationaal Slavernijmuseum. Het + Verzetsmuseum gaat over de geschiedenis van de Tweede Wereldoorlog. + + + + + ) +} diff --git a/storybook/src/docs/patterns/AmsterdamArticleHeader.tsx b/storybook/src/docs/patterns/AmsterdamArticleHeader.tsx new file mode 100644 index 0000000000..464a118383 --- /dev/null +++ b/storybook/src/docs/patterns/AmsterdamArticleHeader.tsx @@ -0,0 +1,25 @@ +import { AspectRatio, Grid, Heading, Image, Overlap } from '@amsterdam/design-system-react' + +export type AmsterdamArticleHeaderProps = { + src: string + alt: string +} + +export const AmsterdamArticleHeader = ({ src, alt }: AmsterdamArticleHeaderProps) => { + return ( +
+ + + Amsterdam Article Header + + + {src && ( + + + {alt + + + )} +
+ ) +} diff --git a/storybook/src/docs/patterns/AmsterdamArticlePage.tsx b/storybook/src/docs/patterns/AmsterdamArticlePage.tsx new file mode 100644 index 0000000000..80e3d5af4a --- /dev/null +++ b/storybook/src/docs/patterns/AmsterdamArticlePage.tsx @@ -0,0 +1,43 @@ +import { BreadcrumbProps, Footer, FooterProps, Grid, Header, Screen, SkipLink } from '@amsterdam/design-system-react' +import { ReactElement } from 'react' +import { AmsterdamArticleContent } from './AmsterdamArticleContent' +import { AmsterdamArticleHeader } from './AmsterdamArticleHeader' + +export type AmsterdamArticlePageProps = { + articleImage?: string + articleImageAlt?: string + breadcrumbs?: ReactElement + footer?: ReactElement +} + +export const AmsterdamArticlePage = ({ + articleImage = '', + articleImageAlt = '', + breadcrumbs, + footer, +}: AmsterdamArticlePageProps) => { + return ( + <> + Direct naar inhoud + + + +
Menu} /> + + + + {breadcrumbs && ( + + {breadcrumbs} + + )} + + + + + +
{footer}
+ + + ) +} diff --git a/storybook/src/docs/patterns/AmsterdamPage.tsx b/storybook/src/docs/patterns/AmsterdamPage.tsx index 7fd28a7436..1c92150e36 100644 --- a/storybook/src/docs/patterns/AmsterdamPage.tsx +++ b/storybook/src/docs/patterns/AmsterdamPage.tsx @@ -1,4 +1,24 @@ -import { Grid, Header, Screen, SkipLink } from '@amsterdam/design-system-react' +import { + AspectRatio, + Card, + Column, + Footer, + Grid, + Header, + Heading, + Image, + Link, + LinkList, + Overlap, + PageMenu, + Paragraph, + Screen, + SearchField, + SkipLink, + Spotlight, + VisuallyHidden, +} from '@amsterdam/design-system-react' +import { ChattingIcon, PhoneIcon } from '@amsterdam/design-system-react-icons' export const AmsterdamPage = () => { return ( @@ -7,12 +27,366 @@ export const AmsterdamPage = () => { -
Menu} - logoLink="./" - logoLinkTitle="Naar de homepage van gemeente Amsterdam" +
Menu} /> + + + + + + + + + {}}> + + + + + + + + + Meest bezocht + + + + + Gemeentebelastingen + + + Bekijk welke belastingen en heffingen er zijn, hoe u bezwaar maakt of een betalingsregeling treft. + + + + + + + Parkeren + Reizen (P+R) + + + U kunt met uw auto goedkoop parkeren bij een P+R-locatie aan de rand van de stad. + + + + + + + Paspoort, ID-kaart en rijbewijs + + Vraag deze bewijzen aan of verleng ze. Geef een vermissing aan. + + + + + + Onderwijs + + + Meld een kind aan voor basisschool, middelbare school of kinderopvang. Bekijk het kindtegoed op uw + Stadspas. + + + + + + + Meldingen openbare ruimte en overlast + + + Ziet u op straat of in een park iets waarvan u wilt dat het gemaakt of opgeruimd wordt, dan kunt u dat + bij de gemeente melden. + + + + + + + Verhuizing doorgeven + + + Geef uw nieuwe adres door als u binnen Amsterdam of naar Amsterdam verhuist. + + + + + + + Grof afval + + Grof afval zijn spullen die niet in een vuilniszak passen. + + + + + + Kennisgevingen en bekendmakingen + + + Kennisgevingen en bekendmakingen van de gemeente Amsterdam van de laatste 8 weken. + + + + + + + + + Ontheffing of vergunning + + + Check welke ontheffing of vergunning u nodig heeft. Bijvoorbeeld een RVV, TVM, objectvergunning,{' '} + nachtwerkontheffing, e-RVV, e-TVM of filmmelding. Dat regult u allemaal met 1 formulier. + + + Eenvoudig regelen + + + + + Werkzaamheden + + + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores beatae cumque deleniti + exercitationem facere fugiat laudantium libero magnam mollitia nisi, omnis pariatur preferendis. + + + Alle bouw- en verkeerswerkzaamheden + + + + + + + Kalender + + + + 29 juni 2023 + + Presentatie nieuwe Stopera-gebouw + Tijd: 18.00 – 21.00 uur + + + + 22 juni 2023 + + Praat mee over het toekomstige slavernijmuseum + Tijd: 13.00 – 16.00 uur + + + + 15 juni 2023 + + Opening tentoonstelling schilderijen Van Rijn + Tijd: 10.00 – 11.30 uur + + + + + Nieuws + + + + + + + Waar u stormschade kunt melden + + + + Storm Poly raasde woensdag 5 juli over de stad. Het zal in sommige gevallen nog enkele dagen duren + voordat alle schade is opgeruimd. U kunt een melding doen van afgebroken takken, andere stormschade of + wateroverlast. + + + + + + + + + + + Nederlands eerste houten woonwijk komt in Zuidoost + + + + + + + + + + + + Gratis openbaar vervoer voor kinderen + + + + + + + + + + + + Zonnepanelen op uw dak? Zo houdt u uw huis veilig + + + + + +
+ + + Colofon + + + + + + Contact + + + Heeft u een vraag en kunt u het antwoord niet vinden op deze site? Neem dan contact met ons op. + + + + Contactformulier + + + Adressen en openingstijden + + + Bel 14 020 + + + + + + + + Volg de gemeente + + + + Nieuwsbrief Amsterdam + + + Twitter + + + Facebook + + + Instagram + + + LinkedIn + + + Mastodon + + + YouTube + + + Werkenbij + + + + + + + + + Kalender + + + Van buurtactiviteiten tot inspraakavonden. Wat organiseert de gemeente voor u? Kijk op{' '} + + Kalender Amsterdam + + . + + + + + Uit in Amsterdam + + + Benieuwd wat er allemaal te doen is in de stad? Op{' '} + + Iamsterdam.com + {' '} + vindt u de beste tips op het gebied van cultuur, uitgaan en evenementen. + + + + + + +
+ + + + Home + Zoeken + Nieuws + Burgerzaken + Kunst en cultuur + Projecten + Project + Parkeren + diff --git a/storybook/src/docs/patterns/amsterdam.docs.mdx b/storybook/src/docs/patterns/amsterdam.docs.mdx new file mode 100644 index 0000000000..d7d2193444 --- /dev/null +++ b/storybook/src/docs/patterns/amsterdam.docs.mdx @@ -0,0 +1,26 @@ +import { Meta } from "@storybook/blocks"; +import * as AmsterdamStories from "./amsterdam.stories.tsx"; + + + +# Amsterdam.nl Pattern Library + +## Hompage + +The homepage of Amsterdam.nl is the first page that users see when they visit the website. It is the most important page of the website, as it is the first impression that users get of the website. The homepage is designed to be visually appealing and easy to navigate, with a clear layout and intuitive navigation. + +```tsx +Direct naar inhoud + + +
+ + + + + + + +