From b087a000ad8e248447ee25a113cfa645d4348d4f Mon Sep 17 00:00:00 2001 From: Jeroen du Chatinier <49227194+JeroenduC@users.noreply.github.com> Date: Tue, 19 Nov 2024 10:36:17 +0100 Subject: [PATCH 1/7] fix: link formulier 1 --- .../FormPage1.stories.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx index cd255020b2e..c73fe6b42fb 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx @@ -26,6 +26,7 @@ import { UtrechtIconArrow, UtrechtIconChevronLeft } from '@utrecht/web-component import React from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component +import urls from '../prototype-src/variables'; const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 1', @@ -47,7 +48,7 @@ export const One: Story = { - + @@ -65,10 +66,7 @@ export const One: Story = { U kunt uw klacht op 3 manieren indienen: met het klachtenformulier, bellen of een brief sturen. - + Ga naar klachtenformulier  From 65f242632f4eb4316f06c936e6be97f9c65fcd23 Mon Sep 17 00:00:00 2001 From: Olling <48805670+Ollie-nl@users.noreply.github.com> Date: Tue, 19 Nov 2024 13:09:52 +0100 Subject: [PATCH 2/7] fix: borders background and form input styling fix: borders background and form input styling --- .../FormPage1.stories.tsx | 94 +++---- .../FormPage2.stories.tsx | 88 ++++--- .../FormPage3.stories.tsx | 240 +++++++++--------- .../FormPage4.stories.tsx | 74 +++--- .../introductie.stories.tsx | 44 ++-- .../scenario.stories.tsx | 44 ++-- .../speeltuin.stories.tsx | 178 ++++++------- .../FormPage1.stories.tsx | 94 +++---- .../FormPage2.stories.tsx | 88 ++++--- .../FormPage3.stories.tsx | 192 +++++++------- .../FormPage4.stories.tsx | 74 +++--- .../introductie.stories.tsx | 44 ++-- .../scenario.stories.tsx | 44 ++-- .../src/stories/prototype-src/index.css | 3 - 14 files changed, 694 insertions(+), 607 deletions(-) diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx index c73fe6b42fb..f439af7551e 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx @@ -18,6 +18,7 @@ import { Paragraph, Separator, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -32,6 +33,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 1', id: 'klachtenformulier-form-pages-stap-1A', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -40,50 +44,52 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - - - - - - - Terug - - -
-
- Klacht - - Bent u ontevreden over hoe de gemeente haar taken uitvoert? Bent u bijvoorbeeld niet goed geholpen? Of - bent u niet netjes behandeld? De gemeente vindt dat vervelend en zoekt graag samen naar een oplossing. - - - U kunt uw klacht op 3 manieren indienen: met het klachtenformulier, bellen of een brief sturen. - + + + + + + + + + + + + + + Terug + + +
+
+ Klacht + + Bent u ontevreden over hoe de gemeente haar taken uitvoert? Bent u bijvoorbeeld niet goed geholpen? Of + bent u niet netjes behandeld? De gemeente vindt dat vervelend en zoekt graag samen naar een oplossing. + + + U kunt uw klacht op 3 manieren indienen: met het klachtenformulier, bellen of een brief sturen. + - - Ga naar klachtenformulier  - - - Bellen - - U kunt bellen naar telefoonnummer 14030 (of vanuit het buitenland: +31 30 286 00 00). Dit kan van maandag - tot en met vrijdag tussen 9.00 en 17.00 uur. - - Een brief sturen - - U kunt een brief schrijven met uw klacht. Stuur uw brief naar: Gemeente Utrecht Klachtenbehandeling - Antwoordnummer 51066 3501 VC Utrecht (geen postzegel nodig) - -
-
- - - + + Ga naar klachtenformulier  + + + Bellen + + U kunt bellen naar telefoonnummer 14030 (of vanuit het buitenland: +31 30 286 00 00). Dit kan van + maandag tot en met vrijdag tussen 9.00 en 17.00 uur. + + Een brief sturen + + U kunt een brief schrijven met uw klacht. Stuur uw brief naar: Gemeente Utrecht Klachtenbehandeling + Antwoordnummer 51066 3501 VC Utrecht (geen postzegel nodig) + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx index 62b78f2e984..f724f67bc95 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx @@ -15,6 +15,7 @@ import { Paragraph, Separator, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -29,6 +30,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 2', id: 'klachtenformulier-form-pages-stap-2A', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -37,46 +41,48 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - - - - - - - Terug - - -
-
- Klacht over de gemeente - - - In dit formulier doorloopt u de volgende stappen: uw klacht, voorstel oplossing, uw gegevens en het - controleren van de ingevulde informatie. - - - Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. - - U kunt het formulier tussentijds opslaan en later verder gaan. - - Na het versturen ontvangt u een bevestigingsmail. Ook heeft u de mogelijkheid uw klacht te downloaden of - printen. - - - - Doorgaan  - - -
-
- - - + + + + + + + + + + + + + + Terug + + +
+
+ Klacht over de gemeente + + + In dit formulier doorloopt u de volgende stappen: uw klacht, voorstel oplossing, uw gegevens en het + controleren van de ingevulde informatie. + + + Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. + + U kunt het formulier tussentijds opslaan en later verder gaan. + + Na het versturen ontvangt u een bevestigingsmail. Ook heeft u de mogelijkheid uw klacht te downloaden + of printen. + + + + Doorgaan  + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx index a0979bd2e0e..9875c1fd843 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx @@ -22,6 +22,7 @@ import { Paragraph, Separator, Strong, + Surface, UnorderedList, UnorderedListItem, } from '@utrecht/component-library-react/dist/css-module'; @@ -40,6 +41,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 3', id: 'klachtenformulier-form-pages-stap-3A', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -102,123 +106,131 @@ export const One: Story = { }; return ( - - - - - - - - - - - - - Terug - - -
-
- Klacht over de gemeente -
- Uw Klacht - - Een duidelijke beschrijving helpt ons bij het behandelen van de klacht. -
- Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. - - {/* Dynamische FormFieldTextarea met aangepaste karaktertelling */} -
+ + + + + + + + + + + + + + Terug + + +
+
+ Klacht over de gemeente + + Uw Klacht + + Een duidelijke beschrijving helpt ons bij het behandelen van de klacht. +
+ Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. + + {/* Dynamische FormFieldTextarea met aangepaste karaktertelling */} +
+ +
+ + Datum (niet verplicht) + + } + name="datum" + description="Bijvoorbeeld: 23 januari of 2 dagen geleden" + /> + + Tijdstip (niet verplicht) + + } + name="tijdstip" + description="Bijvoorbeeld: 13:15" + /> + Locatie (niet verplicht) + + } + name="locatie" + rows={3} /> -
- - Datum (niet verplicht) - - } - name="datum" - description="Bijvoorbeeld: 23 januari of 2 dagen geleden" - /> - - Tijdstip (niet verplicht) - - } - name="tijdstip" - description="Bijvoorbeeld: 13:15" - /> - - Locatie (niet verplicht) - - } - name="locatie" - rows={3} - /> - - Bestand toevoegen (niet verplicht) - - Bijvoorbeeld: een foto van de situatie die de klacht duidelijker maakt - - U kunt meerdere bestanden tegelijk toevoegen. - U mag maximaal 10 MB aan bestanden toevoegen. - - Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif. - - - - - - {selectedFiles && ( -
-

Geselecteerde bestanden:

- - {Array.from(selectedFiles).map((file, index) => ( - {file.name} - ))} - -
- )} + + Bestand toevoegen (niet verplicht) + + Bijvoorbeeld: een foto van de situatie die de klacht duidelijker maakt + + U kunt meerdere bestanden tegelijk toevoegen. + U mag maximaal 10 MB aan bestanden toevoegen. + + Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif. + + + + + + {selectedFiles && ( +
+

Geselecteerde bestanden:

+ + {Array.from(selectedFiles).map((file, index) => ( + {file.name} + ))} + +
+ )} - - Volgende stap - - - - Opslaan en later verder gaan - - - - Stoppen met formulier - - - -
-
- - - + + Volgende stap + + + + Opslaan en later verder gaan + + + + Stoppen met formulier + + + + + + + + + ); }, }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx index fe0c796e16a..427dc67342d 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx @@ -20,6 +20,7 @@ import { Separator, SpotlightSection, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -34,6 +35,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Stap 4', id: 'klachtenformulier-form-pages-stap-4A', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -42,39 +46,41 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - - - - - - - Terug - - -
-
- Einde van het klachtenformulier - - Dank je wel! - - In het echt zou je doorgaan naar de volgende stap. Maar voor deze test is dit nu het einde van het - formulier. We hebben nog een paar korte vragen, en dan zijn we klaar. - - - - Terug naar het begin  - - -
-
- - - + + + + + + + + + + + + + + Terug + + +
+
+ Einde van het klachtenformulier + + Dank je wel! + + In het echt zou je doorgaan naar de volgende stap. Maar voor deze test is dit nu het einde van het + formulier. We hebben nog een paar korte vragen, en dan zijn we klaar. + + + + Terug naar het begin  + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx index ce0be0ea8b5..dfec83818aa 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/introductie.stories.tsx @@ -27,6 +27,7 @@ import { Separator, SpotlightSection, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -55,6 +56,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Introductie ', id: 'klachtenformulier-introductie-A', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -63,24 +67,26 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - -
-
- - - Starten - - -
-
- - - + + + + + + + + +
+
+ + + Starten + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx index f4f089fd8fa..8fa3427d51c 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/scenario.stories.tsx @@ -27,6 +27,7 @@ import { Separator, SpotlightSection, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -55,6 +56,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Scenario', id: 'klachtenformulier-scenario-A', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -63,24 +67,26 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - -
-
- - - Naar de klachtenpagina  - - -
-
- - - + + + + + + + + +
+
+ + + Naar de klachtenpagina  + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx index 426a986ce65..d253493daca 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/speeltuin.stories.tsx @@ -18,6 +18,7 @@ import { PageFooter, PageHeader, Paragraph, + Surface, Textbox, } from '@utrecht/component-library-react/dist/css-module'; import { @@ -34,6 +35,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario A/Speeltuin', id: 'template-klachten-speeltuin-A', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -62,96 +66,98 @@ export const One: Story = { }; return ( - - - - - - - - - - - - - Terug - - -
-
- - - Speeltuin voor React componenten - - Uw klacht - - Een duidelijke beschrijving helpt ons bij het behandelen van de klacht. -
- Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. - + + + + + + + + + + + + + + Terug + + +
+
+ + + Speeltuin voor React componenten + + Uw klacht + + Een duidelijke beschrijving helpt ons bij het behandelen van de klacht. +
+ Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. + - Klachten formulier + Klachten formulier - Contact gegevens + Contact gegevens -
- {/* Dynamische FormFieldTextarea met aangepaste karaktertelling */} - -
- -
- - Datum (niet verplicht) - - } - name="datum" - description="Bijvoorbeeld: 23 januari of 2 dagen geleden" - /> - - - - Vragen met een * zijn verplicht. - - - - Volgende stap - - +
+ {/* Dynamische FormFieldTextarea met aangepaste karaktertelling */} + +
+ +
+ + Datum (niet verplicht) + + } + name="datum" + description="Bijvoorbeeld: 23 januari of 2 dagen geleden" + /> + + + + Vragen met een * zijn verplicht. + + + + Volgende stap + + - - - - - Opslaan en later verder gaan - - - - Stoppen met formulier - - -
-
- - - + + + + + Opslaan en later verder gaan + + + + Stoppen met formulier + + +
+
+ + + + ); }, }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx index 6bac9608139..24c6eb8a915 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx @@ -18,6 +18,7 @@ import { Paragraph, Separator, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -32,6 +33,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 1', id: 'klachtenformulier-form-pages-stap-1B', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -40,50 +44,52 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - - - - - - - Terug - - -
-
- Klacht - - Bent u ontevreden over hoe de gemeente haar taken uitvoert? Bent u bijvoorbeeld niet goed geholpen? Of - bent u niet netjes behandeld? De gemeente vindt dat vervelend en zoekt graag samen naar een oplossing. - - - U kunt uw klacht op 3 manieren indienen: met het klachtenformulier, bellen of een brief sturen. - + + + + + + + + + + + + + + Terug + + +
+
+ Klacht + + Bent u ontevreden over hoe de gemeente haar taken uitvoert? Bent u bijvoorbeeld niet goed geholpen? Of + bent u niet netjes behandeld? De gemeente vindt dat vervelend en zoekt graag samen naar een oplossing. + + + U kunt uw klacht op 3 manieren indienen: met het klachtenformulier, bellen of een brief sturen. + - - Ga naar klachtenformulier  - - - Bellen - - U kunt bellen naar telefoonnummer 14030 (of vanuit het buitenland: +31 30 286 00 00). Dit kan van maandag - tot en met vrijdag tussen 9.00 en 17.00 uur. - - Een brief sturen - - U kunt een brief schrijven met uw klacht. Stuur uw brief naar: Gemeente Utrecht Klachtenbehandeling - Antwoordnummer 51066 3501 VC Utrecht (geen postzegel nodig) - -
-
- - - + + Ga naar klachtenformulier  + + + Bellen + + U kunt bellen naar telefoonnummer 14030 (of vanuit het buitenland: +31 30 286 00 00). Dit kan van + maandag tot en met vrijdag tussen 9.00 en 17.00 uur. + + Een brief sturen + + U kunt een brief schrijven met uw klacht. Stuur uw brief naar: Gemeente Utrecht Klachtenbehandeling + Antwoordnummer 51066 3501 VC Utrecht (geen postzegel nodig) + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx index 450204268fe..36c6a66409a 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx @@ -15,6 +15,7 @@ import { Paragraph, Separator, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -29,6 +30,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 2', id: 'klachtenformulier-form-pages-stap-2B', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -37,46 +41,48 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - - - - - - - Terug - - -
-
- Klacht over de gemeente - - - In dit formulier doorloopt u de volgende stappen: uw klacht, voorstel oplossing, uw gegevens en het - controleren van de ingevulde informatie. - - - Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. - - U kunt het formulier tussentijds opslaan en later verder gaan. - - Na het versturen ontvangt u een bevestigingsmail. Ook heeft u de mogelijkheid uw klacht te downloaden of - printen. - - - - Doorgaan  - - -
-
- - - + + + + + + + + + + + + + + Terug + + +
+
+ Klacht over de gemeente + + + In dit formulier doorloopt u de volgende stappen: uw klacht, voorstel oplossing, uw gegevens en het + controleren van de ingevulde informatie. + + + Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. + + U kunt het formulier tussentijds opslaan en later verder gaan. + + Na het versturen ontvangt u een bevestigingsmail. Ook heeft u de mogelijkheid uw klacht te downloaden + of printen. + + + + Doorgaan  + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx index e80f31936fe..aef1c1c4fdb 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx @@ -20,6 +20,7 @@ import { PageContent, PageHeader, Paragraph, + Surface, UnorderedList, UnorderedListItem, } from '@utrecht/component-library-react/dist/css-module'; @@ -40,6 +41,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 3', id: 'klachtenformulier-form-pages-stap-3B', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -102,96 +106,104 @@ export const One: Story = { }; return ( - - - - - - - - - - - - - Terug - - -
-
- Klacht over de gemeente -
- Uw Klacht - - Een duidelijke beschrijving helpt ons bij het behandelen van de klacht. -
- Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. - - {/* Dynamische FormFieldTextarea met aangepaste karaktertelling */} -
- -
- - Bestand toevoegen (niet verplicht) - - Bijvoorbeeld: een foto van de situatie die de klacht duidelijker maakt - - U kunt meerdere bestanden tegelijk toevoegen. - U mag maximaal 10 MB aan bestanden toevoegen. - - Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif. - - - - - - {selectedFiles && ( -
-

Geselecteerde bestanden:

- - {Array.from(selectedFiles).map((file, index) => ( - {file.name} - ))} - -
- )} - - Volgende stap - - - - Opslaan en later verder gaan - - - - Stoppen met formulier - - -
-
-
- - - + + + + + + + + + + + + + + Terug + + +
+
+ Klacht over de gemeente +
+ Uw Klacht + + Een duidelijke beschrijving helpt ons bij het behandelen van de klacht. +
+ Vul alle velden in. Als een veld niet verplicht is, staat dit erbij. + + {/* Dynamische FormFieldTextarea met aangepaste karaktertelling */} +
+ +
+ + Bestand toevoegen (niet verplicht) + + Bijvoorbeeld: een foto van de situatie die de klacht duidelijker maakt + + U kunt meerdere bestanden tegelijk toevoegen. + U mag maximaal 10 MB aan bestanden toevoegen. + + Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif. + + + + + + {selectedFiles && ( +
+

Geselecteerde bestanden:

+ + {Array.from(selectedFiles).map((file, index) => ( + {file.name} + ))} + +
+ )} + + Volgende stap + + + + Opslaan en later verder gaan + + + + Stoppen met formulier + + +
+
+
+ + + + ); }, }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx index c9f0f0bf4cf..c75a56fa9b1 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage4.stories.tsx @@ -20,6 +20,7 @@ import { Separator, SpotlightSection, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -34,6 +35,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Stap 4', id: 'klachtenformulier-form-pages-stap-4B', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -42,39 +46,41 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - - - - - - - Terug - - -
-
- Einde van het klachtenformulier - - Dank je wel! - - In het echt zou je doorgaan naar de volgende stap. Maar voor deze test is dit nu het einde van het - formulier. We hebben nog een paar korte vragen, en dan zijn we klaar. - - - - Terug naar het begin  - - -
-
- - - + + + + + + + + + + + + + + Terug + + +
+
+ Einde van het klachtenformulier + + Dank je wel! + + In het echt zou je doorgaan naar de volgende stap. Maar voor deze test is dit nu het einde van het + formulier. We hebben nog een paar korte vragen, en dan zijn we klaar. + + + + Terug naar het begin  + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx index f9b53c7a694..e90eb2279bb 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/introductie.stories.tsx @@ -27,6 +27,7 @@ import { Separator, SpotlightSection, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -55,6 +56,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Introductie ', id: 'klachtenformulier-introductie-B', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -63,24 +67,26 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - -
-
- - - Starten - - -
-
- - - + + + + + + + + +
+
+ + + Starten + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx index a2799148034..531b3f9a90d 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx @@ -27,6 +27,7 @@ import { Separator, SpotlightSection, Strong, + Surface, Textbox, UnorderedList, UnorderedListItem, @@ -55,6 +56,9 @@ const meta = { title: 'Prototypes/Klachtenformulier Scenario B/Scenario', id: 'klachtenformulier-scenario-B', component: Page, + parameters: { + layout: 'fullscreen', + }, } satisfies Meta; export default meta; @@ -63,24 +67,26 @@ type Story = StoryObj; export const One: Story = { render: (args) => ( - - - - - - - -
-
- - - Naar de klachtenpagina  - - -
-
- - - + + + + + + + + +
+
+ + + Naar de klachtenpagina  + + +
+
+ + + + ), }; diff --git a/packages/storybook-react/src/stories/prototype-src/index.css b/packages/storybook-react/src/stories/prototype-src/index.css index 66bbe91e4bd..d3b4fba7674 100644 --- a/packages/storybook-react/src/stories/prototype-src/index.css +++ b/packages/storybook-react/src/stories/prototype-src/index.css @@ -106,8 +106,5 @@ section { max-inline-size: 65ch; } - .sb-show-main { - padding: 0; - } /* stylelint-enable selector-class-pattern, property-disallowed-list */ } From 02fcbf0dacadfff612a4e180c4b0a685c8864d3d Mon Sep 17 00:00:00 2001 From: Olling <48805670+Ollie-nl@users.noreply.github.com> Date: Tue, 19 Nov 2024 15:36:03 +0100 Subject: [PATCH 3/7] fix: css update fix: css update --- .../src/stories/prototype-src/index.css | 71 ++++++++++++++++--- 1 file changed, 60 insertions(+), 11 deletions(-) diff --git a/packages/storybook-react/src/stories/prototype-src/index.css b/packages/storybook-react/src/stories/prototype-src/index.css index d3b4fba7674..c7a5be399db 100644 --- a/packages/storybook-react/src/stories/prototype-src/index.css +++ b/packages/storybook-react/src/stories/prototype-src/index.css @@ -46,6 +46,14 @@ .utrecht-form-field-error-message { margin-block-end: var(--utrecht-space-row-xs); } + .utrecht-html .utrecht-breadcrumb-nav ol, + footer ul, + footer li { + padding-inline-start: 0 !important; + } + .utrecht-button-link { + color: var(--utrecht-document-background-color); + } .utrecht-footer-grid { display: grid; gap: 16px; @@ -84,6 +92,21 @@ } } /* stylelint-disable selector-class-pattern, property-disallowed-list */ + utrecht-icon-arrow, + utrecht-icon-cross { + block-size: 14px; + inline-size: 14px; + } + .utrecht-link utrecht-icon-arrow, + .utrecht-link utrecht-icon-cross { + transform: translateY(-4px); /* Verschuift het icoon 2px naar beneden zodat ik lekker smoelt in het midden */ + } + .utrecht-button-link--primary-action utrecht-icon-arrow { + transform: translateY(-5px); /* Verschuift het icoon 2px naar beneden zodat ik lekker smoelt in het midden */ + } + footer .utrecht-link utrecht-icon-arrow { + transform: translateY(1px); /* Verschuift het icoon 2px naar beneden zodat ik lekker smoelt in het midden */ + } .utrecht-advanced-link--with-icon { align-items: center; display: flex; @@ -94,17 +117,43 @@ .utrecht-advanced-link { --utrecht-link-icon-size: var(--utrecht-advanced-link-icon-size, var(--utrecht-document-font-size)); } - utrecht-icon-cross, - utrecht-icon-arrow { - block-size: 14px; - inline-size: 14px; - transform: translateY(-2px); /* Verschuift het icoon 2px naar beneden zodat ik lekker smoelt in het midden */ - } - input[name="tijdstip"] { - max-inline-size: 100px; - } - section { - max-inline-size: 65ch; + .utrecht-html .utrecht-button-link--primary-action:focus { + --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color); + --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color); + --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color); + --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color); + --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color); + --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width); + --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color); + --_utrecht-button-appearance-disabled-background-color: var( + --utrecht-button-primary-action-disabled-background-color + ); + --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color); + --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color); + --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color); + --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color); + --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color); + --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size); + --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight); + --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color); + --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color); + --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color); + --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height); + --_utrecht-button-appearance-pressed-background-color: var( + --utrecht-button-primary-action-pressed-background-color + ); + --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color); + --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color); + --_utrecht-link-state-color: var(--utrecht-link-focus-color); } /* stylelint-enable selector-class-pattern, property-disallowed-list */ } +/* stylelint-disable selector-class-pattern, property-disallowed-list */ + +input[name="tijdstip"] { + max-inline-size: 100px !important; +} +section { + max-inline-size: 65ch; +} +/* stylelint-enable selector-class-pattern, property-disallowed-list */ From 95a43e45fa6d7876bd3d444a56b082f303a7b860 Mon Sep 17 00:00:00 2001 From: Olling <48805670+Ollie-nl@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:09:53 +0100 Subject: [PATCH 4/7] fix: buttonlink focus color fix: buttonlink focus color --- .../src/stories/prototype-src/index.css | 28 +------------------ 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/packages/storybook-react/src/stories/prototype-src/index.css b/packages/storybook-react/src/stories/prototype-src/index.css index c7a5be399db..c8f1058fd28 100644 --- a/packages/storybook-react/src/stories/prototype-src/index.css +++ b/packages/storybook-react/src/stories/prototype-src/index.css @@ -118,33 +118,7 @@ --utrecht-link-icon-size: var(--utrecht-advanced-link-icon-size, var(--utrecht-document-font-size)); } .utrecht-html .utrecht-button-link--primary-action:focus { - --_utrecht-button-appearance-active-background-color: var(--utrecht-button-primary-action-active-background-color); - --_utrecht-button-appearance-active-border-color: var(--utrecht-button-primary-action-active-border-color); - --_utrecht-button-appearance-active-color: var(--utrecht-button-primary-action-active-color); - --_utrecht-button-appearance-background-color: var(--utrecht-button-primary-action-background-color); - --_utrecht-button-appearance-border-color: var(--utrecht-button-primary-action-border-color); - --_utrecht-button-appearance-border-width: var(--utrecht-button-primary-action-border-width); - --_utrecht-button-appearance-color: var(--utrecht-button-primary-action-color); - --_utrecht-button-appearance-disabled-background-color: var( - --utrecht-button-primary-action-disabled-background-color - ); - --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color); - --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color); - --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color); - --_utrecht-button-appearance-focus-border-color: var(--utrecht-button-primary-action-focus-border-color); - --_utrecht-button-appearance-focus-color: var(--utrecht-button-primary-action-focus-color); - --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size); - --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight); - --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-primary-action-hover-background-color); - --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-primary-action-hover-border-color); - --_utrecht-button-appearance-hover-color: var(--utrecht-button-primary-action-hover-color); - --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height); - --_utrecht-button-appearance-pressed-background-color: var( - --utrecht-button-primary-action-pressed-background-color - ); - --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-primary-action-pressed-border-color); - --_utrecht-button-appearance-pressed-color: var(--utrecht-button-primary-action-pressed-color); - --_utrecht-link-state-color: var(--utrecht-link-focus-color); + background-color: var(--utrecht-color-blue-30); } /* stylelint-enable selector-class-pattern, property-disallowed-list */ } From c4387a7da8dd7c14df3661097d04effb265b401b Mon Sep 17 00:00:00 2001 From: Olling <48805670+Ollie-nl@users.noreply.github.com> Date: Wed, 20 Nov 2024 10:11:06 +0100 Subject: [PATCH 5/7] fix: buttonlink focus bg color fix: buttonlink focus bg color --- packages/storybook-react/src/stories/prototype-src/index.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/storybook-react/src/stories/prototype-src/index.css b/packages/storybook-react/src/stories/prototype-src/index.css index c8f1058fd28..eb21495a391 100644 --- a/packages/storybook-react/src/stories/prototype-src/index.css +++ b/packages/storybook-react/src/stories/prototype-src/index.css @@ -118,7 +118,7 @@ --utrecht-link-icon-size: var(--utrecht-advanced-link-icon-size, var(--utrecht-document-font-size)); } .utrecht-html .utrecht-button-link--primary-action:focus { - background-color: var(--utrecht-color-blue-30); + background-color: var(--utrecht-color-blue-30); /* Work arround */ } /* stylelint-enable selector-class-pattern, property-disallowed-list */ } From 110e2e3c8838e88982b802888be7be31dbec5a1a Mon Sep 17 00:00:00 2001 From: Olling <48805670+Ollie-nl@users.noreply.github.com> Date: Wed, 20 Nov 2024 11:23:36 +0100 Subject: [PATCH 6/7] fix: removed nbsp in bottonlink fix: removed nbsp in bottonlink --- .../FormPage1.stories.tsx | 2 +- .../FormPage2.stories.tsx | 2 +- .../FormPage3.stories.tsx | 1 + .../FormPage4.stories.tsx | 4 ++-- .../FormPage1.stories.tsx | 2 +- .../FormPage2.stories.tsx | 2 +- .../FormPage3.stories.tsx | 1 + .../FormPage4.stories.tsx | 2 +- .../scenario.stories.tsx | 2 +- 9 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx index f439af7551e..9759af02b77 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx @@ -72,7 +72,7 @@ export const One: Story = { - Ga naar klachtenformulier  + Ga naar klachtenformulier Bellen diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx index f724f67bc95..ffb66671fb8 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx @@ -75,7 +75,7 @@ export const One: Story = { - Doorgaan  + Doorgaan diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx index 9875c1fd843..394ce0e3396 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage3.stories.tsx @@ -206,6 +206,7 @@ export const One: Story = { Volgende stap + - Terug naar het begin  + Terug naar het begin diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx index 24c6eb8a915..c36781a97e9 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage1.stories.tsx @@ -72,7 +72,7 @@ export const One: Story = { - Ga naar klachtenformulier  + Ga naar klachtenformulier Bellen diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx index 36c6a66409a..7cb621432a3 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage2.stories.tsx @@ -75,7 +75,7 @@ export const One: Story = { - Doorgaan  + Doorgaan diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx index aef1c1c4fdb..4c888322ca6 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/FormPage3.stories.tsx @@ -179,6 +179,7 @@ export const One: Story = { )} Volgende stap + - Terug naar het begin  + Terug naar het begin diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx index 531b3f9a90d..5c13d8922cd 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-b/scenario.stories.tsx @@ -79,7 +79,7 @@ export const One: Story = {
- Naar de klachtenpagina  + Naar de klachtenpagina
From de876b185228ffc47435a30e8b5af1c51d4526cf Mon Sep 17 00:00:00 2001 From: Olling <48805670+Ollie-nl@users.noreply.github.com> Date: Wed, 20 Nov 2024 11:31:16 +0100 Subject: [PATCH 7/7] fix: spotlight fix: spotlight --- .../FormPage4.stories.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx index 0aff7a1ef6a..93e771b0aed 100644 --- a/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx +++ b/packages/storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage4.stories.tsx @@ -4,13 +4,16 @@ import { BreadcrumbNavLink, BreadcrumbNavSeparator, Button, + ButtonGroup, ButtonLink, + FormFieldErrorMessage, + FormFieldTextarea, + FormFieldTextbox, + FormLabel, Heading1, Heading2, Heading3, Link, - LinkList, - LinkListLink, Logo, LogoImage, Page, @@ -21,14 +24,18 @@ import { SpotlightSection, Strong, Surface, - Textbox, UnorderedList, UnorderedListItem, } from '@utrecht/component-library-react/dist/css-module'; -import { UtrechtIconArrow, UtrechtIconChevronLeft } from '@utrecht/web-component-library-react'; -import React from 'react'; +import { + UtrechtIconArrow, + UtrechtIconChevronLeft, + UtrechtIconCross, + UtrechtLogo, +} from '@utrecht/web-component-library-react'; +import React, { useRef, useState } from 'react'; import '../prototype-src/index.css'; // Importeer stylesheet -import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-componentnt +import FooterKlachten from '../prototype-src/FooterKlachtenFormulier'; // Importeer het footer-component import urls from '../prototype-src/variables'; const meta = {