feat(form): refactored the form with utrecht components

components/button/css/template.tsx

@@ -3,6 +3,7 @@
  * Copyright (c) 2022 Community for NL Design System
  */
 import '@utrecht/component-library-css';
+import { Button as ButtonUtrecht } from '@utrecht/component-library-react';
 import clsx from 'clsx';
 import React from 'react';
 import { iconNames as iconOptions } from '../../icon/css/template';
@@ -92,22 +93,16 @@ export const Button: React.FC<IButtonProps> = ({
     <div className={clsx(`rvo-button__icon--${kind}-action`, 'rvo-icon', `rvo-icon-${icon}`, 'rvo-icon--md')}></div>
   );
   return (
-    <button
+    <ButtonUtrecht
       className={clsx(
-        'utrecht-button',
         classNames,
-        kind === 'primary' && 'utrecht-button--primary-action',
-        kind === 'secondary' && 'utrecht-button--secondary-action',
         kind === 'tertiary' && 'rvo-button--tertiary-action',
         kind === 'quaternary' && 'rvo-button--quaternary-action',
-        kind === 'warning-subtle' && 'rvo-button--warning-subtle-action',
-        kind === 'warning' && 'rvo-button--warning-action',
         active && 'utrecht-button--active',
         busy && 'utrecht-button--busy',
         hover && 'utrecht-button--hover',
         focus && 'utrecht-button--focus',
         focusVisible && 'utrecht-button--focus-visible',
-        disabled && 'utrecht-button--disabled',
         'rvo-layout-row',
         size === 'xs' && 'rvo-layout-gap--xs',
         size === 'sm' && 'rvo-layout-gap--sm',
@@ -116,12 +111,22 @@ export const Button: React.FC<IButtonProps> = ({
         size === 'sm' && 'rvo-button--sm',
         size === 'md' && 'rvo-button--md',
       )}
-      aria-disabled={disabled || null}
+      disabled={disabled || null}
+      appearance={
+        kind === 'primary'
+          ? 'primary-action-button'
+          : kind === 'secondary'
+          ? 'secondary-action-button'
+          : kind === 'subtle' || kind === 'warning-subtle'
+          ? 'subtle-button'
+          : null
+      }
+      hint={kind === 'warning' || kind === 'warning-subtle' ? 'warning' : null}
     >
       {showIcon === 'before' && iconMarkup}
       {textContent}
       {showIcon === 'after' && iconMarkup}
-    </button>
+    </ButtonUtrecht>
   );
 };
 

components/form-feedback/css/template.tsx

@@ -2,6 +2,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
+import { FormFieldDescription } from '@utrecht/component-library-react';
 import React from 'react';
 import './index.scss';
 
@@ -26,17 +27,23 @@ export const defaultArgs: IFeedbackProps = {
 export const FormFeedback: React.FC<IFeedbackProps> = ({ text = defaultArgs.text, type = defaultArgs.type }) => {
   if (type === 'warning') {
     return (
-      <div className="rvo-form-feedback rvo-form-feedback--warning rvo-layout-row rvo-layout-gap--sm">
-        <div className="rvo-icon rvo-icon-waarschuwing rvo-status-icon-waarschuwing rvo-icon--md"></div>
+      <FormFieldDescription
+        warning
+        className="rvo-form-feedback rvo-form-feedback--warning rvo-layout-row rvo-layout-gap--sm"
+      >
+        <div className="rvo-icon rvo-icon-waarschuwing rvo-status-icon-waarschuwing rvo-icon--md utrecht-icon"></div>
         {text}
-      </div>
+      </FormFieldDescription>
     );
   } else {
     return (
-      <div className="rvo-form-feedback rvo-form-feedback--error rvo-layout-row rvo-layout-gap--sm">
-        <div className="rvo-icon rvo-icon-foutmelding rvo-status-icon-foutmelding rvo-icon--md"></div>
+      <FormFieldDescription
+        invalid
+        className="rvo-form-feedback rvo-form-feedback--error rvo-layout-row rvo-layout-gap--sm"
+      >
+        <div className="rvo-icon rvo-icon-foutmelding rvo-status-icon-foutmelding rvo-icon--md utrecht-icon"></div>
         {text}
-      </div>
+      </FormFieldDescription>
     );
   }
 };

components/form-field/css/template.tsx

@@ -2,6 +2,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
+import { FormField, FormLabel } from '@utrecht/component-library-react';
 import React from 'react';
 import { ExpandableText } from '../../expandable-text/css/template';
 import { FormFeedback } from '../../form-feedback/css/template';
@@ -80,14 +81,16 @@ export const Field: React.FC<IFieldProps> = ({
   }
 
   return (
-    <div className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
-      <label className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs" htmlFor={fieldId}>
-        <span className="rvo-form-field__label-text">{labelText}</span>
+    <FormField className="rvo-form-field rvo-layout-column rvo-layout-gap--sm">
+      <div className="rvo-form-field__label rvo-layout-column rvo-layout-gap--2xs">
+        <FormLabel className="rvo-form-field__label-text" htmlFor={fieldId}>
+          {labelText}
+        </FormLabel>
         {helperTextMarkup}
         {errorText && <FormFeedback text={errorText} type="error" />}
         {warningText && <FormFeedback text={warningText} type="warning" />}
-      </label>
+      </div>
       {children}
-    </div>
+    </FormField>
   );
 };

components/form-fieldset/css/template.tsx

@@ -2,6 +2,7 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
+import { FieldsetLegend, Fieldset as FieldsetUtrecht } from '@utrecht/component-library-react';
 import React from 'react';
 import { ITextInputFieldProps, TextInputField } from '../../form-field/css/textinput-field.template';
 
@@ -61,11 +62,11 @@ export const Fieldset: React.FC<IFieldsetProps> = ({
   children,
 }) => {
   return (
-    <fieldset className="utrecht-form-fieldset rvo-layout-column rvo-layout-gap--xl" disabled={disabled || null}>
-      {legend && <legend className="utrecht-form-fieldset__legend">{legend}</legend>}
+    <FieldsetUtrecht className="rvo-layout-column rvo-layout-gap--xl" disabled={disabled || null}>
+      {legend && <FieldsetLegend>{legend}</FieldsetLegend>}
       {fields &&
         fields.map((fieldProps) => <TextInputField key={fieldProps.id} fieldId={fieldProps.id} {...fieldProps} />)}
       {children}
-    </fieldset>
+    </FieldsetUtrecht>
   );
 };

components/form-textinput/css/template.tsx

@@ -2,8 +2,8 @@
  * @license EUPL-1.2
  * Copyright (c) 2021 Community for NL Design System
  */
-import clsx from 'clsx';
 import './index.scss';
+import { Textarea, Textbox } from '@utrecht/component-library-react';
 import React from 'react';
 
 export interface ITextInputProps {
@@ -65,7 +65,6 @@ export const defaultArgs: ITextInputProps = {
 export const TextInput: React.FC<ITextInputProps> = ({
   id = defaultArgs.id,
   disabled = defaultArgs.disabled,
-  focus = defaultArgs.focus,
   invalid = defaultArgs.invalid,
   readOnly = defaultArgs.readOnly,
   required = defaultArgs.required,
@@ -76,20 +75,11 @@ export const TextInput: React.FC<ITextInputProps> = ({
 }) => {
   const props = {
     id,
-    className: clsx(
-      'utrecht-textbox',
-      'utrecht-textbox--html-input',
-      disabled && 'utrecht-textbox--disabled',
-      focus && 'utrecht-textbox--focus utrecht-textbox--focus-visible',
-      invalid && 'utrecht-textbox--invalid',
-      readOnly && 'utrecht-textbox--readonly',
-      required && 'utrecht-textbox--required',
-    ),
-    disabled: disabled || null,
-    'aria-invalid': invalid || null,
-    required: required || null,
-    readOnly: readOnly || null,
-    placeholder: placeholder || null,
+    disabled,
+    invalid,
+    required,
+    readOnly,
+    placeholder,
     defaultValue: value,
     ...((valueType === 'number' || valueType === 'currency') && {
       inputMode: 'numeric' as any,
@@ -98,13 +88,13 @@ export const TextInput: React.FC<ITextInputProps> = ({
   };
 
   if (inputType === 'text') {
-    const inputMarkup = <input type="text" {...props} />;
+    const inputMarkup = <Textbox {...props} />;
     if (valueType === 'currency') {
       return <div className="rvo-layout-row rvo-layout-gap--md">€{inputMarkup}</div>;
     } else {
       return inputMarkup;
     }
   } else {
-    return <textarea {...props} />;
+    return <Textarea {...props} />;
   }
 };

documentation/demopages/nl-design-system/Formulier.tsx

@@ -0,0 +1,190 @@
+import { Button } from '@nl-rvo/components/button/css/template';
+import { CheckboxField } from '@nl-rvo/components/form-field/css/checkbox-field.template';
+import { FileInputField } from '@nl-rvo/components/form-field/css/fileinput-field.template';
+import { RadioButtonField } from '@nl-rvo/components/form-field/css/radiobutton-field.template';
+import { SelectField } from '@nl-rvo/components/form-field/css/select-field.template';
+import { TextInputField } from '@nl-rvo/components/form-field/css/textinput-field.template';
+import { Fieldset } from '@nl-rvo/components/form-fieldset/css/template';
+import { Header } from '@nl-rvo/components/header/css/template';
+import { Heading } from '@nl-rvo/components/heading/css/template';
+import { LayoutColumnRow } from '@nl-rvo/components/layout-column-row/css/template';
+import { MaxWidthLayout } from '@nl-rvo/components/max-width-layout/css/template';
+import { MenuBar } from '@nl-rvo/components/menubar/css/template';
+import { defaultSteps, ProgressTracker } from '@nl-rvo/components/progress-tracker/css/template';
+import '../common/style.scss';
+import { Link } from '@utrecht/component-library-react';
+import { defaultMenuBarItems } from '../common/defaultMenuBarItems';
+
+const Formulier = () => {
+  return (
+    <div className="rvo-demo-page">
+      <Header />
+      <LayoutColumnRow size="2xl">
+        <MenuBar items={defaultMenuBarItems} size="md" useIcons={true} iconPlacement="before" menuMaxWidth="md" />
+        <MaxWidthLayout size="md">
+          <main>
+            <LayoutColumnRow size="2xl" row={true}>
+              <ProgressTracker steps={defaultSteps} />
+              <div className="rvo-form">
+                <LayoutColumnRow size="sm">
+                  <div className="intro">
+                    <Link href="#">Terug</Link>
+                    <Heading type="h1" textContent="Heading" />
+                  </div>
+                  <form className="rvo-layout-spacer rvo-layout-spacer--2xl">
+                    <Fieldset legend="Keyboard inputs">
+                      <TextInputField labelText="Text" />
+                      <TextInputField
+                        labelText="Text with helper text"
+                        helperText="This is a helper text which can be used for instructions."
+                      />
+                      <TextInputField labelText="Text" />
+                      <TextInputField labelText="Text with an error" errorText="This is an error" invalid={true} />
+                      <TextInputField labelText="Text with a warning" warningText="This is a warning" />
+                      <TextInputField
+                        labelText="Text with expandable helper text"
+                        helperText="This is a helper text which can be used for instructions."
+                        expandableHelperText={true}
+                        expandableHelperTextTitle="Expandable helper text"
+                      />
+                      <TextInputField labelText="Text disabled" disabled={true} />
+                      <TextInputField labelText="Text disabled with value" disabled={true} value="Value" />
+                      <TextInputField labelText="Number" valueType="number" />
+                      <TextInputField labelText="Textarea" inputType="textarea" />
+                    </Fieldset>
+
+                    <Fieldset legend="Options">
+                      <RadioButtonField
+                        layout="vertical"
+                        name="radio-buttons"
+                        labelText="Radio buttons"
+                        helperText="This is an helper text"
+                        options={[
+                          { id: 'optionA', labelText: 'Option A' },
+                          { id: 'optionB', labelText: 'Option B' },
+                          { id: 'optionC', labelText: 'Option C' },
+                          { id: 'optionD', labelText: 'Option D' },
+                        ]}
+                      ></RadioButtonField>
+                      <RadioButtonField
+                        layout="vertical"
+                        name="radio-buttons-error"
+                        labelText="Radio buttons invalid"
+                        errorText="This is an error"
+                        invalid={true}
+                        options={[
+                          { id: 'optionA-error', labelText: 'Option A' },
+                          { id: 'optionB-error', labelText: 'Option B' },
+                          { id: 'optionC-error', labelText: 'Option C' },
+                          { id: 'optionD-error', labelText: 'Option D' },
+                        ]}
+                      ></RadioButtonField>
+
+                      <RadioButtonField
+                        layout="vertical"
+                        name="radio-buttons-warning"
+                        labelText="Radio buttons with warning"
+                        warningText="This is a warning"
+                        options={[
+                          { id: 'optionA-warning', labelText: 'Option A' },
+                          { id: 'optionB-warning', labelText: 'Option B' },
+                          { id: 'optionC-warning', labelText: 'Option C' },
+                          { id: 'optionD-warning', labelText: 'Option D' },
+                        ]}
+                      ></RadioButtonField>
+
+                      <CheckboxField
+                        helperText="This is an helper text"
+                        layout="vertical"
+                        labelText="Checkboxes"
+                        invalid={false}
+                        options={[
+                          { id: 'optionA-cb', labelText: 'Option A' },
+                          { id: 'optionB-cb', labelText: 'Option B' },
+                          { id: 'optionC-cb', labelText: 'Option C' },
+                          { id: 'optionD-cb', labelText: 'Option D' },
+                        ]}
+                      ></CheckboxField>
+
+                      <CheckboxField
+                        errorText="This is an error"
+                        layout="vertical"
+                        labelText="Checkboxes with error"
+                        invalid={true}
+                        options={[
+                          { id: 'optionA-cb-error', labelText: 'Option A' },
+                          { id: 'optionB-cb-error', labelText: 'Option B' },
+                          { id: 'optionC-cb-error', labelText: 'Option C' },
+                          { id: 'optionD-cb-error', labelText: 'Option D' },
+                        ]}
+                      ></CheckboxField>
+
+                      <CheckboxField
+                        warningText="This is a warning"
+                        layout="vertical"
+                        labelText="Checkboxes with a warning"
+                        invalid={false}
+                        options={[
+                          { id: 'optionA-cb-warning', labelText: 'Option A' },
+                          { id: 'optionB-cb-warning', labelText: 'Option B' },
+                          { id: 'optionC-cb-warning', labelText: 'Option C' },
+                          { id: 'optionD-cb-warning', labelText: 'Option D' },
+                        ]}
+                      ></CheckboxField>
+
+                      <SelectField
+                        labelText="Select"
+                        options={[
+                          { value: '1', label: 'Option #1' },
+                          { value: '2', label: 'Option #2' },
+                          { value: '3', label: 'Option #3' },
+                        ]}
+                      ></SelectField>
+                    </Fieldset>
+
+                    <Fieldset legend="Other">
+                      <FileInputField labelText="File" />
+                    </Fieldset>
+
+                    <div className="rvo-button-group utrecht-button-group">
+                      <Button
+                        kind="secondary"
+                        size="md"
+                        textContent="Secondary action"
+                        active={false}
+                        busy={false}
+                        focus={false}
+                        focusVisible={false}
+                        disabled={false}
+                        hover={false}
+                        showIcon="no"
+                      >
+                        Secondary action
+                      </Button>
+                      <Button
+                        kind="primary"
+                        size="md"
+                        textContent="Primary action"
+                        active={false}
+                        busy={false}
+                        focus={false}
+                        focusVisible={false}
+                        disabled={false}
+                        hover={false}
+                        showIcon="no"
+                      >
+                        Secondary action
+                      </Button>
+                    </div>
+                  </form>
+                </LayoutColumnRow>
+              </div>
+            </LayoutColumnRow>
+          </main>
+        </MaxWidthLayout>
+      </LayoutColumnRow>
+    </div>
+  );
+};
+
+export default Formulier;