diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss index 4b45fecb2ee..494ae521937 100644 --- a/packages/css/src/components/index.scss +++ b/packages/css/src/components/index.scss @@ -56,6 +56,7 @@ @use "paragraph/paragraph"; @use "password-input/password-input"; @use "progress-list/progress-list"; +@use "prose/prose"; @use "radio/radio"; @use "row/row"; @use "search-field/search-field"; diff --git a/packages/css/src/components/prose/prose.scss b/packages/css/src/components/prose/prose.scss new file mode 100644 index 00000000000..161f7d32554 --- /dev/null +++ b/packages/css/src/components/prose/prose.scss @@ -0,0 +1,72 @@ +/** + * @license EUPL-1.2+ + * Copyright Gemeente Amsterdam + */ + +@mixin prose-spacing { + /* Fallback for older browsers: uniform spacing */ + > .ams-heading { + margin-block-end: var(--ams-space-s); + } + + > :not(.ams-heading) { + margin-block-end: var(--ams-space-m); + } + + > :last-child { + margin-block-end: 0; + } + + /* Context-aware spacing for browsers with :has() support */ + /* stylelint-disable-next-line scss/operator-no-unspaced */ + @supports selector(:has(+ *)) { + /* Reset fallback margins */ + > .ams-heading, + > :not(.ams-heading) { + margin-block-end: 0; + } + + /* Heading level 1-2 followed by its content */ + > :is(.ams-heading--1, .ams-heading--2):has(+ :not(.ams-heading)) { + margin-block-end: var(--ams-space-s); + } + + /* Heading level 3-6 followed by its content */ + > :is(.ams-heading--3, .ams-heading--4, .ams-heading--5, .ams-heading--6):has(+ :not(.ams-heading)) { + margin-block-end: var(--ams-space-xs); + } + + /* Consecutive body-level elements */ + > :not(.ams-heading):has(+ :not(.ams-heading)) { + margin-block-end: var(--ams-space-m); + } + + /* Body content before an accordion needs a slightly larger gap */ + > :not(.ams-heading):has(+ .ams-accordion) { + margin-block-end: var(--ams-space-l); + } + + /* Any element before a level 4-6 heading */ + > *:has(+ :is(.ams-heading--4, .ams-heading--5, .ams-heading--6)) { + margin-block-end: var(--ams-space-m); + } + + /* Any element before a level 3 heading (subsection boundary) */ + > *:has(+ .ams-heading--3) { + margin-block-end: var(--ams-space-l); + } + + /* Any element before a level 2 heading (section boundary) */ + > *:has(+ .ams-heading--2) { + margin-block-end: var(--ams-space-xl); + } + } +} + +.ams-prose { + @include prose-spacing; + + .ams-accordion__panel { + @include prose-spacing; + } +} diff --git a/storybook/src/pages/public/ArticlePage/ArticlePage.stories.tsx b/storybook/src/pages/public/ArticlePage/ArticlePage.stories.tsx index 73e721e2d94..5e60b428fe1 100644 --- a/storybook/src/pages/public/ArticlePage/ArticlePage.stories.tsx +++ b/storybook/src/pages/public/ArticlePage/ArticlePage.stories.tsx @@ -6,15 +6,18 @@ import type { Meta, StoryObj } from '@storybook/react-vite' import { + Accordion, Breadcrumb, Card, Grid, Heading, Image, + Link, LinkList, Paragraph, Spotlight, StandaloneLink, + UnorderedList, } from '@amsterdam/design-system-react' import parse from 'html-react-parser' import { Fragment } from 'react' @@ -58,18 +61,18 @@ const meta = { srcSet={args.image.srcSet} /> - + {args.sections.map(({ body, heading, id }) => ( - - {heading} - + {heading} {parse(body, parserOptions)} ))} - - Lees ook - + Lees ook {args.relatedArticles?.map(({ heading, url }) => ( @@ -130,3 +133,226 @@ const getArgsFromNewsArticle = (id: number): NewsArticle | undefined => { export const Default: StoryObj = { args: getArgsFromNewsArticle(1), } + +export const CzaarPeterstraat: StoryObj = { + render: () => ( + <> + + + + Home + Bouwprojecten en verkeersprojecten + Czaar Peterstraat + + + + + + Meer over de herinrichting van de Czaar Peterstraat + + + Nota van uitgangspunten + + Op 16 februari 2022 heeft de gemeenteraad de nota van uitgangspunten voor de + herinrichting van de Czaar Peterstraat vastgesteld. Dit is de basis voor het ontwerp. Voor de vaststelling + van de nota van uitgangspunten is in 2018 inspraak geweest en in 2021 een bijeenkomst over de actualisatie + van de nota van uitgangspunten. Alle inspraakreacties zijn toegelicht in de{' '} + nota van beantwoording. Het college van burgemeester en wethouders heeft deze + vastgesteld. + + Uitwerking ontwerp + + In 2022 zijn we gestart met het opstellen van het programma van eisen. We hebben de vastgestelde + uitgangspunten en randvoorwaarden vanuit het gemeentelijke beleid uitgewerkt tot duidelijke onderdelen voor + het ontwerp van de straat. Ook hebben we onderzoek gedaan naar het verkeer in de straat, naar de invloed van + het verschuiven van de trambaan op het geluids- en trillingsniveau in de straat en naar de geschiktste plek + voor de tramhalte. We gebruikten informatie uit deze onderzoeken en de inbreng vanuit de buurt om het + ontwerp uit te werken tot een voorlopig ontwerp. Van 5 tot en met 20 oktober 2023 konden buurtbewoners, + ondernemers en andere belanghebbenden reageren op het voorlopig ontwerp. Daarna hebben we het ontwerp + definitief gemaakt. In mei 2024 heeft stadsdeel Centrum positief geadviseerd over het ontwerp. + + Onderzoeksresultaten + + We willen bij de herinrichting van de straat de trambaan over de hele lengte van de straat ongeveer 60 + centimeter opschuiven naar de even huisnummers. Zo kunnen we aan beide kanten een breder fietspad aanleggen. + We vervangen het dubbele spoor dat in elkaar loopt door 2 losse tramsporen. Zo hoeven trams niet meer op + elkaar te wachten. Autoverkeer rijdt in 1 richting mee over de trambaan. We voegen de 2 tramhaltes samen tot + 1 nieuwe halte, op een centrale plek. We hebben onderzocht wat de gevolgen van deze voorgenomen aanpassingen + zijn voor de omgeving. De belangrijkste resultaten uit onderzoeken staan hieronder. U kunt ook een onderzoek + opvragen door een e-mail te sturen naar{' '} + binnenring@amsterdam.nl. + + + + + We voegen de 2 tramhaltes Eerste Coehoornstraat en Eerste Leeghwaterstraat samen tot 1 nieuwe halte, met + een gelijkvloerse instap. De plek van de nieuwe tramhalte is een belangrijk en bepalend onderdeel voor + het ontwerp van de Czaar Peterstraat. Daar waar een tramhalte komt, is op de stoep geen ruimte voor + bomen, planten, een terras of andere opvulling. Zo blijft er voldoende ruimte om door te lopen. + + + We hebben onderzocht wat een zo goed mogelijke plek voor de nieuwe tramhalte is. We hebben verschillende + mogelijkheden bekeken, bijvoorbeeld: + + + een halte bij de Eerste Leeghwaterstraat + + een halte met de perrons ver uit elkaar: voor de trams in de richting Azartplein een halteperron net + voor de kruising met de Cruquiusstraat, voor trams in de richting Sloterpark een halteperron bij de + Eerste Leeghwaterstraat, of andersom + + behoud van 1 van de bestaande haltes + + Bij de afweging is gekeken naar: + + + de loopafstand van de nieuwe halteperrons tot woningen, winkels en voorzieningen in de buurt + + de afstand tot andere haltes voor openbaar vervoer in de buurt + + de aansluiting op de nieuwe woonwijk en de nieuwe brug naar Oostenburg + + + het behoud van zoveel mogelijk bomen, de bomenlaan en zichtlijnen in de straat + + voldoende vrije doorloopruimte op de stoep + de verkeersveiligheid, meer overzicht vanuit de zijstraten + + + Een halte bij de Cruquiusstraat scoort in deze keuze het beste. De halte voor trams richting Azartplein + komt bij de sportschool Kensho, huisnummer 22. De halte voor de trams richting Sloterpark komt bij de + huisnummers 51-57. + + + + + In opdracht van de gemeente heeft Crux Engineering met Bouwrisk onderzoek uitgevoerd naar geluid en + trillingen rond de trambaan in de bestaande situatie en in de situatie na de herinrichting. De metingen + waren in 2022, op verschillende meetpunten in de straat, vlak naast de weg en aan de gevel van woningen. + + Trillingen niet tot nauwelijks voelbaar + + Conclusie van de trillingsmetingen is dat de trillingen in de straat gemiddeld zeer laag zijn en niet of + bijna niet voelbaar zijn voor bewoners. In de nieuwe situatie, na het verschuiven van de trambaan en het + autoverkeer, neemt het trillingsniveau wel iets toe, maar blijft niet of bijna niet voelbaar. + + Geluid + + In 2022 zijn geluidsmetingen gedaan bij Czaar Peterstraat 135 en 37-39. In de nieuwe situatie veranderen + de geluidsniveaus vooral door het verplaatsen van de tramhaltes. Waar de tramhaltes weggaan neemt geluid + iets af. Bij de nieuwe halte neemt het geluid iets toe. + + + + + We hebben onderzoek gedaan om de verkeersveiligheid waar nodig te verbeteren. We hebben gekeken naar de + samenstelling van het verkeer, zoals zwaar verkeer, busjes, personenauto’s, (brom-)fietsers, + bestemmingsverkeer, doorgaand verkeer, logistiek verkeer, naar de spreiding van drukte over de dag, en + hoe het verkeer zich op de kruisingen beweegt. + + + In 2022 is met camera’s en telslangen onderzoek gedaan in de Czaar Peterstraat. De belangrijkste + conclusies uit het verkeersonderzoek zijn: + + + + Op een gemiddelde werkdag rijden ongeveer 9.000 fietsers de Czaar Peterstraat in- of uit bij de + kruising bij de Oostenburgergracht en de Cruquiusstraat. + + + Het aantal brom- en snorfietsen is klein, ongeveer 35 per uur. Dit is gemiddeld 23 bromfietsen en 12 + snorfietsen. + + + Op een gemiddelde werkdag rijden ongeveer 1.500 auto’s vanaf de kruising bij de Oostenburgergracht en + Cruquiusstraat de Czaar Peterstraat in. + + + Laden en lossen gebeurt verspreid over de dag, vooral buiten de spitsuren. Op een gemiddelde werkdag + vindt 45 procent van het laden en lossen plaats tussen 10.00 en 15.00 uur. + + + + + Meedoen + + We doen de voorbereiding, uitwerking en uitvoering van het herinrichtingsproject in fasen. Bij iedere fase + betrekken we de omgeving en zijn er momenten waarop u kunt meedenken of meedoen, inbreng geven, voordat + ergens over besloten wordt. + + + In 2023 is onderzoek gedaan naar de technische haalbaarheid en zijn de uitgangspunten uitgewerkt tot + concrete oplossingen voor het ontwerp. Voor de buurt was er ruimte om mee te denken op de volgende momenten: + + Begin 2023: plek van de tramhalte, invulling van de stoep, autoluwe straat + + Tot eind januari konden mensen reageren op de plek van de nieuwe tramhalte, invulling van de ruimte op de + stoep en ideeën geven om de straat autoluwer te maken: + + + + Het voorstel waar de nieuwe tramhalte komt: de tram stopt in de Czaar Peterstraat in beide richtingen voor + de kruising met de Cruquiusstraat. Bij de halte is straks op de stoep geen ruimte voor plantenbakken, + fietsparkeren en bankjes. Zo blijft er voldoende ruimte om door te lopen. + + + De invulling van de beperkte ruimte op de stoep. We zoeken naar een balans tussen de wensen en behoeftes + en de ruimte die er is om dit goed in te passen: + + + (Brom-) fietsparkeren: de parkeerdruk is hoog, maar niet op alle plekken in de straat. + + + Vrije doorloopruimte: de minimale maat voor vrije doorloopruimte van 2 meter wordt nu niet overal + gehaald. We willen de straat zo toegankelijk mogelijke straat maken. + + + Bij het pleintje bij de Eerste Coehoornstraat komt ruimte voor andere invulling door het verdwijnen + van de tramhalte. + + + Laad- en losplekken: het aantal plekken blijft gelijk. Er wordt wat geschoven, zodat er bij de + ophaalpunten voor de post in de straat een plek is. + + + Bomen en groen: samen met de groenbeheerder willen we meer bomen/groen planten. In ieder geval op de + plekken waar eerder bomen gestaan hebben. + + + Een autoluwe straat: welke maatregelen kunnen bijdragen aan minder autoverkeer in de straat? + + + + + Najaar 2023: reageren op voorlopig ontwerp + + Voor bewoners en ondernemers zijn informatiebijeenkomsten georganiseerd waarbij we een toelichting gaven op + het voorlopig ontwerp. Bewoners konden reageren op het ontwerp. Waar mogelijk hebben we de reacties verwerkt + in het definitief ontwerp voor de straat. + + 2024: advies en besluit over definitief ontwerp + + Begin 2024 is het definitief ontwerp afgerond. In april is dit ontwerp in de stadsdeelcommissie van + stadsdeel Centrum behandeld. Hierbij was de mogelijkheid om in te spreken. Op 14 mei heeft het stadsdeel + positief geadviseerd over het ontwerp. Vervolgens hebben we het college gevraagd het ontwerp en het + benodigde geld voor de uitvoering vast te stellen. Dit is gebeurd op 22 oktober 2024. + + Uitvoering + De herinrichting is gestart in maart 2025 en duurt tot eind juli 2026. + Blijf op de hoogte + + Wilt u op de hoogte gehouden worden over dit project? Meld u dan aan voor onze mailing door een bericht te + sturen aan czaarpeterstraat@amsterdam.nl + + + Bron: amsterdam.nl. + + + + + ), +}