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] 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 */ }