style: setup new pages for form demo

components/form-field/css/index.scss

@@ -3,6 +3,10 @@
  * Copyright (c) 2021 Community for NL Design System
  */
 
+.rvo-form-field {
+  clear: both;
+}
+
 .rvo-form-field__label-text {
-  font-weight: var(--rvo-form-field-label-font-weight);
+  font-weight: var(--utrecht-form-label-font-weight);
 }

documentation/demopages/algemeen/SearchInNav.tsx

@@ -1,12 +1,11 @@
 import { Button } from '@nl-rvo/components/button/css/template';
 import { TextInputField } from '@nl-rvo/components/form-field-textinput/css/template';
-import { Fieldset } from '@nl-rvo/components/form-fieldset/css/template';
 import { Header } from '@nl-rvo/components/header/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 '../common/style.scss';
-
+import { Fieldset, FormField } from '@utrecht/component-library-react';
 const SearchInNav = () => {
   return (
     <div className="rvo-demo-page">
@@ -25,27 +24,31 @@ const SearchInNav = () => {
       />
       <LayoutColumnRow size="md">
         <div className="search-form">
-          <Fieldset legend="">
-            <div className="rvo-form-layout">
-              <MaxWidthLayout size="sm">
-                <div className="rvo-inline-form">
-                  <TextInputField label="Zoekterm"></TextInputField>
-                  <Button
-                    kind="primary"
-                    size="md"
-                    label="Zoeken"
-                    active={false}
-                    busy={false}
-                    focus={false}
-                    focusVisible={false}
-                    disabled={false}
-                    hover={false}
-                    showIcon="no"
-                  ></Button>
-                </div>
-              </MaxWidthLayout>
-            </div>
-          </Fieldset>
+          <div className="rvo-form-layout">
+            <MaxWidthLayout size="sm">
+              <div className="rvo-inline-form">
+                <Fieldset className={'utrecht-form-fieldset--grid'}>
+                  <FormField className="utrecht-form-field--xl">
+                    <TextInputField label="Zoekterm"></TextInputField>
+                  </FormField>
+                  <FormField className="utrecht-form-field--sm">
+                    <Button
+                      kind="primary"
+                      size="md"
+                      label="Zoeken"
+                      active={false}
+                      busy={false}
+                      focus={false}
+                      focusVisible={false}
+                      disabled={false}
+                      hover={false}
+                      showIcon="no"
+                    ></Button>
+                  </FormField>
+                </Fieldset>
+              </div>
+            </MaxWidthLayout>
+          </div>
         </div>
         <MaxWidthLayout size="sm">
           <main>

documentation/demopages/common/style.scss

@@ -440,7 +440,7 @@
     line-height: var(--rvo-line-height-md);
     margin-inline-end: auto;
     margin-inline-start: auto;
-    max-width: 580;
+    max-width: 580px;
     padding-inline-end: var(--rvo-space-xl);
     padding-inline-start: var(--rvo-space-xl);
   }
@@ -689,6 +689,13 @@
 
   /* @SEARCH IN NAV */
 
+  /* stylelint-disable */
+  .search-form {
+    background-color: var(--rvo-color-grijs1);
+    padding-block-end: var(--rvo-space-xl);
+  }
+  /* stylelint-enable */
+
   .rvo-topnav__link--search-active {
     background-color: var(--rvo-color-grijs1);
     color: var(--rvo-color-grijs7);

documentation/demopages/nl-design-system/basiselementen/basiselementen.stories.mdx

@@ -0,0 +1,25 @@
+import { Canvas, Meta, Story } from "@storybook/addon-docs";
+import Form from "./form";
+
+<Meta
+  title="Pagina's/NL Design System Community/Basiselementen"
+  parameters={{
+    layout: "fullscreen",
+    status: {
+      type: "WORK IN PROGRESS",
+    },
+    docs: {
+      source: {
+        state: "closed",
+      },
+    },
+  }}
+/>
+
+# Demo
+
+<Canvas>
+  <Story name="Form">
+    <Form />
+  </Story>
+</Canvas>

documentation/demopages/nl-design-system/basiselementen/form.tsx

@@ -0,0 +1,125 @@
+import '../common/style.scss';
+import {
+  Button,
+  ButtonGroup,
+  CustomRadioButton,
+  Fieldset,
+  FieldsetLegend,
+  FormField,
+  FormFieldDescription,
+  FormLabel,
+  Heading1,
+  Textbox,
+} from '@utrecht/component-library-react';
+
+const Form = () => {
+  return (
+    <div className={'basiselementen-demo-page'}>
+      <Heading1>Gegevens zonnepanelen invullen</Heading1>
+      <form className="basiselementen-layout-form">
+        <Fieldset>
+          {' '}
+          <Fieldset className={'utrecht-form-fieldset--subtle'}>
+            <FormField>
+              <FormLabel htmlFor={'realname'}>Uw naam</FormLabel>
+              <Textbox id={'realname'}></Textbox>
+            </FormField>
+          </Fieldset>
+          <Fieldset className={'utrecht-form-fieldset--subtle'}>
+            <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>
+              Staat uw naam op de energierekening
+            </FieldsetLegend>
+            <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+              <FormLabel htmlFor={'realnameA'}>
+                <CustomRadioButton name={'hasrealname'} id={'realnameA'} />
+                Ja
+              </FormLabel>
+            </FormField>
+            <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+              <FormLabel htmlFor={'realnameB'}>
+                <CustomRadioButton name={'hasrealname'} id={'realnameB'} />
+                Nee
+              </FormLabel>
+            </FormField>
+          </Fieldset>
+        </Fieldset>
+        <Fieldset className={'utrecht-form-fieldset--subtle'}>
+          <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>
+            Staat uw naam op de factuur van de zonnepanelen
+          </FieldsetLegend>
+          <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+            <FormLabel htmlFor={'billingnameA'}>
+              <CustomRadioButton name={'hasbillingname'} id={'billingnameA'} />
+              Ja
+            </FormLabel>
+          </FormField>
+          <FormField className={'utrecht-form-field--xs utrecht-form-field--start'}>
+            <FormLabel htmlFor={'billingnameB'}>
+              <CustomRadioButton name={'hasbillingname'} id={'billingnameB'} />
+              Nee
+            </FormLabel>
+          </FormField>
+        </Fieldset>
+        <Fieldset>
+          <Fieldset aria-describedby={'billingdatedescription'} className={'utrecht-form-fieldset--subtle'}>
+            <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>Factuurdatum</FieldsetLegend>
+            <FormFieldDescription id={'billingdatedescription'}>
+              Vul de datum in die op de factuur van de zonnepanelen staat.
+            </FormFieldDescription>
+            <FormField className={'utrecht-form-field--xs'}>
+              <FormLabel htmlFor={'day'}>Dag</FormLabel>
+              <Textbox id={'day'} invalid={true}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--xs '}>
+              <FormLabel htmlFor={'month'}>Maand</FormLabel>
+              <Textbox id={'month'} invalid={true}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--sm '}>
+              <FormLabel htmlFor={'year'}>Jaar</FormLabel>
+              <Textbox id={'year'} invalid={true}></Textbox>
+            </FormField>
+            <FormFieldDescription invalid={true} id={'invalidbillingdate'}>
+              Vul een geldige datum in.
+            </FormFieldDescription>
+          </Fieldset>
+          <Fieldset aria-describedby={'billingaddressdescription'} className={'utrecht-form-fieldset--subtle'}>
+            <FieldsetLegend className={'utrecht-form-fieldset__legend--label'}>Adres zonnepanelen</FieldsetLegend>
+            <FormFieldDescription id={'billingaddressdescription'}>
+              Vul het adres in waar de zonnepanelen zijn geplaatst.
+            </FormFieldDescription>
+            <FormField className={'utrecht-form-field--lg'}>
+              <FormLabel htmlFor={'street'}>Straatnaam</FormLabel>
+              <Textbox id={'street'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--sm'}>
+              <FormLabel htmlFor={'housenumber'}>Huisnummer</FormLabel>
+              <Textbox id={'housenumber'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--sm'}>
+              <FormLabel htmlFor={'suffix'}>Toevoeging</FormLabel>
+              <Textbox id={'suffix'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--md utrecht-form-field--start'}>
+              <FormLabel htmlFor={'postcode'}>Postcode</FormLabel>
+              <Textbox id={'postcode'}></Textbox>
+            </FormField>
+            <FormField className={'utrecht-form-field--lg'}>
+              <FormLabel htmlFor={'city'}>Plaatsnaam</FormLabel>
+              <Textbox id={'city'}></Textbox>
+            </FormField>
+          </Fieldset>
+        </Fieldset>
+        <ButtonGroup className="utrecht-button-group--horizontal">
+          <Button appearance="secondary-action-button" busy={false} disabled={false}>
+            Vorige
+          </Button>
+          <Button appearance="primary-action-button" busy={false} disabled={false}>
+            Volgende
+          </Button>
+        </ButtonGroup>
+      </form>
+    </div>
+  );
+};
+
+export default Form;

documentation/demopages/nl-design-system/common/basiselementen/_forms.scss

@@ -0,0 +1,48 @@
+.basiselementen-theme {
+  .rvo-nl-demo-page {
+    background-color: var(--basiselementen-color-wit);
+    padding-inline: 32px;
+    form {
+      background-color: var(--basiselementen-color-lichtblauw-tint2);
+      margin-block-start: 32px;
+      margin-inline: auto;
+      padding-block: 32px;
+      padding-inline: 32px;
+      width: min(768px, 100%);
+    }
+  }
+
+  .basiselementen-demo-page {
+    background-color: var(--basiselementen-color-lichtblauw-tint2);
+    padding-block: 9px;
+    padding-inline: 9px;
+
+    form {
+      margin-block-start: 32px;
+      margin-inline: auto;
+      padding-block: 9px;
+      padding-inline: 9px;
+    }
+    .utrecht-form-fieldset {
+      padding-block: 9px;
+      padding-inline: 9px;
+    }
+    @media (min-width: 768px) {
+      form {
+        padding-block: 36px;
+        padding-inline: 36px;
+      }
+      .utrecht-form-fieldset {
+        padding-block: 36px;
+        padding-inline: 36px;
+      }
+    }
+  }
+
+  @media (min-width: 768px) {
+    .basiselementen-demo-page {
+      padding-block: 32px;
+      padding-inline: 32px;
+    }
+  }
+}