generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs: add Form Field component to Storybook CSS
- Loading branch information
Showing
6 changed files
with
143 additions
and
39 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| <!-- @license CC0-1.0 --> | ||
|
|
||
| # Anatomy | ||
|
|
||
| Gebruik het _form field_ component om een alle onderdelen van een formulierveld in te verzamelen: het label, de _form control_, eventueel een extra beschrijving of de status en eventueel een validatiemelding of foutmelding. | ||
|
|
||
| De volgende componenten zijn vaak onderdeel van een _form field_: | ||
|
|
||
| - _form label_ component | ||
| - _form field description_ component met extra beschrijving | ||
| - _form field description_ component met een validatiemelding | ||
| - een form control component zoals bijvoorbeeld: | ||
| - _textbox_ component | ||
| - _textarea_ component | ||
| - _checkbox_ component | ||
| - _radio button_ component | ||
| - _form select_ component | ||
| - etcetera | ||
| - _form field description_ component met een foutmelding | ||
| - _form field description_ component status van component | ||
|
|
||
| ## Gebruikte termen | ||
|
|
||
| - `form` komt van `<form>` in HTML en `role="form"` in WAI-ARIA. | ||
| - `field` komt van `<fieldset>` in HTML. | ||
| - `invalid` komt van `aria-invalid` in WAI-ARIA. | ||
| - `radio` komt van `<input type="radio">` in HTML. | ||
| - `checkbox` komt van `<input type="checkbox">` in HTML. | ||
| - `label` komt van `<label>` in HTML en `aria-labelledby` in WAI-ARIA. | ||
| - `description` komt van `aria-describedby` in WAI-ARIA. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <!-- @license CC0-1.0 --> | ||
|
|
||
| # HTML | ||
|
|
||
| Gebruik een element `<div>` element voor formuliervelden met één _form control_. Een formulierveld moet meerdere `<p>` elementen kunnen bevatten, gebruik daarom geen `<p>` element voor de form field. Je moet geen _landmark role_ gebruiken voor een formulierveld (dus geen `<section>`) element. | ||
|
|
||
| Voor formuliervelden met meerdere _form controls_ mag je een `<fieldset>` element gebruiken, bijvoorbeeld voor: jaar, maand en dag. Voor CSS is het handig om dan nog steeds een `<div>` om de fieldset heen te hebben: `<div><fieldset>...</fieldset></div>`. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| <!-- @license CC0-1.0 --> | ||
|
|
||
| # Relevante WCAG regels | ||
|
|
||
| - [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de tekst van het label moet duidelijk zijn | ||
| - [WCAG eis 3.3.9](https://www.w3.org/TR/WCAG22/#redundant-entry): gebruik niet een formulierveld voor informatie die de gebruiker eerder al heeft ingevuld. | ||
| - Vraag gebruikers niet twee keer achter elkaar identieke gegevens in te vullen, bijvoorbeeld om typfouten te herkennen en daarmee fouten te voorkomen. Bied liever een mogelijkheid aan om de gegevens te controleren als laatste stap. | ||
| - Vul bestaande gegevens in als standaardwaarde wanneer je de gegevens al hebt maar je graag zeker wilt weken of de oude gegevens nog juist zijn. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /* @license CC0-1.0 */ | ||
|
|
||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { FormField, FormFieldErrorMessage, FormLabel, Textbox } from '@utrecht/component-library-react'; | ||
| import tokens from '@utrecht/design-tokens/dist/index.json'; | ||
| import readme from '@utrecht/form-field-css/README.md?raw'; | ||
| import anatomyDocs from '@utrecht/form-field-css/docs/anatomy.nl.md?raw'; | ||
| import htmlDocs from '@utrecht/form-field-css/docs/technology-html.nl.md?raw'; | ||
| import wcagDocs from '@utrecht/form-field-css/docs/wcag.nl.md?raw'; | ||
| import tokensDefinition from '@utrecht/form-field-css/src/tokens.json'; | ||
| import { mergeMarkdown } from '@utrecht/storybook-helpers/src/markdown'; | ||
| import React from 'react'; | ||
| import { designTokenStory } from './design-token-story'; | ||
|
|
||
| const meta = { | ||
| title: 'CSS Component/Form Field', | ||
| id: 'css-form-field', | ||
| component: FormField, | ||
| argTypes: { | ||
| invalid: { | ||
| name: 'invalid', | ||
| type: { name: 'boolean', required: false }, | ||
| table: { | ||
| category: 'Component', | ||
| defaultValue: { summary: false }, | ||
| }, | ||
| }, | ||
| type: { | ||
| description: 'Type of the associated form control', | ||
| name: 'type', | ||
| control: { type: 'select' }, | ||
| options: ['', 'checkbox', 'radio', 'text'], | ||
| table: { | ||
| category: 'Component', | ||
| defaultValue: { summary: false }, | ||
| }, | ||
| }, | ||
| }, | ||
| args: { | ||
| children: '', | ||
| description: undefined, | ||
| input: undefined, | ||
| invalid: undefined, | ||
| label: undefined, | ||
| type: undefined, | ||
| }, | ||
| parameters: { | ||
| bugs: 'https://github.com/nl-design-system/utrecht/issues?q=is%3Aissue+is%3Aopen+label%3Acomponent%2Fform-field', | ||
| nldesignsystem: 'https://nldesignsystem.nl/form-field', | ||
| tokensPrefix: 'utrecht-form-field', | ||
| status: { | ||
| type: 'WORK IN PROGRESS', | ||
| }, | ||
| tokens, | ||
| tokensDefinition, | ||
| docs: { | ||
| description: { | ||
| component: mergeMarkdown([readme, anatomyDocs, htmlDocs, wcagDocs]), | ||
| }, | ||
| }, | ||
| }, | ||
| } satisfies Meta<typeof FormField>; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Default: Story = { | ||
| args: { | ||
| label: <FormLabel htmlFor="17804281-5028-44d6-b8a4-53f83f3f4bd9">Naam</FormLabel>, | ||
| input: <Textbox id="17804281-5028-44d6-b8a4-53f83f3f4bd9" />, | ||
| description: 'Voornaam en achternaam.', | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: 'Styling via `utrecht-form-field` class name.', | ||
| }, | ||
| }, | ||
| status: { | ||
| type: 'ALPHA', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const Invalid: Story = { | ||
| args: { | ||
| label: <FormLabel htmlFor="17804281-5028-44d6-b8a4-53f83f3f4bd9">Naam</FormLabel>, | ||
| input: <Textbox id="17804281-5028-44d6-b8a4-53f83f3f4bd9" />, | ||
| description: 'Voornaam en achternaam.', | ||
| errorMessage: <FormFieldErrorMessage>Vul een voornaam in.</FormFieldErrorMessage>, | ||
| invalid: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const DesignTokens = designTokenStory(meta); |