Skip to content

Commit

Permalink
fix: borders background and form input styling
Browse files Browse the repository at this point in the history 
fix: borders background and form input styling
  • Loading branch information
@Ollie-nl
Ollie-nl committed Nov 19, 2024
1 parent b087a00 commit 65f2426
Show file tree
Hide file tree
Showing 14 changed files with 694 additions and 607 deletions.
94 changes: 50 additions & 44 deletions .../storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage1.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
Paragraph,
Separator,
Strong,
Surface,
Textbox,
UnorderedList,
UnorderedListItem,
Expand All @@ -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<typeof Page>;

export default meta;
Expand All @@ -40,50 +44,52 @@ type Story = StoryObj<typeof meta>;

export const One: Story = {
render: (args) => (
<Page {...args}>
<PageHeader>
<Logo>
<LogoImage />
</Logo>
</PageHeader>
<PageContent style={{ '--utrecht-space-around': 1 } as any}>
<BreadcrumbNav>
<BreadcrumbNavLink href={urls.scenarioAscenario}>
<BreadcrumbNavSeparator>
<UtrechtIconChevronLeft />
</BreadcrumbNavSeparator>
Terug
</BreadcrumbNavLink>
</BreadcrumbNav>
<main>
<section>
<Heading1>Klacht</Heading1>
<Paragraph appearance="lead">
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.
</Paragraph>
<Paragraph>
U kunt uw klacht op 3 manieren indienen: met het klachtenformulier, bellen of een brief sturen.
</Paragraph>
<Surface className="utrecht-html">
<Page {...args}>
<PageHeader>
<Logo>
<LogoImage />
</Logo>
</PageHeader>
<PageContent style={{ '--utrecht-space-around': 1 } as any}>
<BreadcrumbNav>
<BreadcrumbNavLink href={urls.scenarioAscenario}>
<BreadcrumbNavSeparator>
<UtrechtIconChevronLeft />
</BreadcrumbNavSeparator>
Terug
</BreadcrumbNavLink>
</BreadcrumbNav>
<main>
<section>
<Heading1>Klacht</Heading1>
<Paragraph appearance="lead">
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.
</Paragraph>
<Paragraph>
U kunt uw klacht op 3 manieren indienen: met het klachtenformulier, bellen of een brief sturen.
</Paragraph>

<ButtonLink appearance="primary-action-button" href={urls.scenarioAPage2}>
Ga naar klachtenformulier&nbsp;
<UtrechtIconArrow />
</ButtonLink>
<Heading2>Bellen</Heading2>
<Paragraph>
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.
</Paragraph>
<Heading2>Een brief sturen</Heading2>
<Paragraph>
U kunt een brief schrijven met uw klacht. Stuur uw brief naar: Gemeente Utrecht Klachtenbehandeling
Antwoordnummer 51066 3501 VC Utrecht (geen postzegel nodig)
</Paragraph>
</section>
</main>
</PageContent>
<FooterKlachten />
</Page>
<ButtonLink appearance="primary-action-button" href={urls.scenarioAPage2}>
Ga naar klachtenformulier&nbsp;
<UtrechtIconArrow />
</ButtonLink>
<Heading2>Bellen</Heading2>
<Paragraph>
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.
</Paragraph>
<Heading2>Een brief sturen</Heading2>
<Paragraph>
U kunt een brief schrijven met uw klacht. Stuur uw brief naar: Gemeente Utrecht Klachtenbehandeling
Antwoordnummer 51066 3501 VC Utrecht (geen postzegel nodig)
</Paragraph>
</section>
</main>
</PageContent>
<FooterKlachten />
</Page>
</Surface>
),
};
88 changes: 47 additions & 41 deletions .../storybook-react/src/stories/prototype-klachtenformulier-scenario-a/FormPage2.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
Paragraph,
Separator,
Strong,
Surface,
Textbox,
UnorderedList,
UnorderedListItem,
Expand All @@ -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<typeof Page>;

export default meta;
Expand All @@ -37,46 +41,48 @@ type Story = StoryObj<typeof meta>;

export const One: Story = {
render: (args) => (
<Page {...args}>
<PageHeader>
<Logo>
<LogoImage />
</Logo>
</PageHeader>
<PageContent style={{ '--utrecht-space-around': 1 } as any}>
<BreadcrumbNav>
<BreadcrumbNavLink href={urls.scenarioAPage1}>
<BreadcrumbNavSeparator>
<UtrechtIconChevronLeft />
</BreadcrumbNavSeparator>
Terug
</BreadcrumbNavLink>
</BreadcrumbNav>
<main>
<section>
<Heading1>Klacht over de gemeente</Heading1>
<UnorderedList>
<UnorderedListItem>
In dit formulier doorloopt u de volgende stappen: uw klacht, voorstel oplossing, uw gegevens en het
controleren van de ingevulde informatie.
</UnorderedListItem>
<UnorderedListItem>
Vul alle velden in. Als een veld niet verplicht is, staat dit erbij.
</UnorderedListItem>
<UnorderedListItem>U kunt het formulier tussentijds opslaan en later verder gaan.</UnorderedListItem>
<UnorderedListItem>
Na het versturen ontvangt u een bevestigingsmail. Ook heeft u de mogelijkheid uw klacht te downloaden of
printen.
</UnorderedListItem>
</UnorderedList>
<ButtonLink appearance="primary-action-button" href={urls.scenarioAPage3}>
Doorgaan&nbsp;
<UtrechtIconArrow />
</ButtonLink>
</section>
</main>
</PageContent>
<FooterKlachten />
</Page>
<Surface className="utrecht-html">
<Page {...args}>
<PageHeader>
<Logo>
<LogoImage />
</Logo>
</PageHeader>
<PageContent style={{ '--utrecht-space-around': 1 } as any}>
<BreadcrumbNav>
<BreadcrumbNavLink href={urls.scenarioAPage1}>
<BreadcrumbNavSeparator>
<UtrechtIconChevronLeft />
</BreadcrumbNavSeparator>
Terug
</BreadcrumbNavLink>
</BreadcrumbNav>
<main>
<section>
<Heading1>Klacht over de gemeente</Heading1>
<UnorderedList>
<UnorderedListItem>
In dit formulier doorloopt u de volgende stappen: uw klacht, voorstel oplossing, uw gegevens en het
controleren van de ingevulde informatie.
</UnorderedListItem>
<UnorderedListItem>
Vul alle velden in. Als een veld niet verplicht is, staat dit erbij.
</UnorderedListItem>
<UnorderedListItem>U kunt het formulier tussentijds opslaan en later verder gaan.</UnorderedListItem>
<UnorderedListItem>
Na het versturen ontvangt u een bevestigingsmail. Ook heeft u de mogelijkheid uw klacht te downloaden
of printen.
</UnorderedListItem>
</UnorderedList>
<ButtonLink appearance="primary-action-button" href={urls.scenarioAPage3}>
Doorgaan&nbsp;
<UtrechtIconArrow />
</ButtonLink>
</section>
</main>
</PageContent>
<FooterKlachten />
</Page>
</Surface>
),
};
Loading

0 comments on commit 65f2426

Please sign in to comment.