Text/textbox

components/textbox/src/_mixin.scss

@@ -270,18 +270,33 @@ $utrecht-support-prince-xml: false !default;
   }
 }
 
+@mixin utrecht-textbox--aantalmarkten-size {
+  /* Nummer onder 9999 */
+  --utrecht-textbox-value-max-length: 10;
+}
+
 @mixin utrecht-textbox--postal-code-nl-size {
   /* Dutch postal code: 4 numbers, 1 space and 2 letters */
   --utrecht-textbox-value-max-length: 7;
 }
 
+@mixin utrecht-textbox--postbus-nummer-size {
+  /* A postbusnummer consists of at least one and at most five digits. */
+  --utrecht-textbox-value-max-length: 2;
+}
+
+@mixin utrecht-textbox--postcode-size {
+  /* A postcode consists of four numbers and two letters. */
+  --utrecht-textbox-value-max-length: 2;
+}
+
 @mixin utrecht-textbox--house-number-size {
   /* Dutch house number is 99999 at most: 5 numbers */
-  --utrecht-textbox-value-max-length: 5;
+  --utrecht-textbox-value-max-length: 1;
 }
 
 @mixin utrecht-textbox--house-letter-size {
-  /* Dutch house letter is 1 letter */
+  /* Dutch house letter can be 1 or 2 letters */
   --utrecht-textbox-value-max-length: 1;
 }
 
@@ -290,13 +305,85 @@ $utrecht-support-prince-xml: false !default;
   --utrecht-textbox-value-max-length: 4;
 }
 
+@mixin utrecht-textbox--voorletters-size {
+  /* "Voorletters" depends on how long your name is and after research of the longest name in the Netherlands it can be about 8 to 9 characters.
+     For now im using the longest name source suggestion: 8 */
+  --utrecht-textbox-value-max-length: 8;
+}
+
 @mixin utrecht-textbox--voorvoegsel-size {
   /* "Tabel 36 Voorvoegselstabel" by "Rijksdienst voor Identiteitsgegevens" has a list
    * of all allowed values. The longest value is 10 characters.
    * The class name is in Dutch because it is a Dutch concept. */
   --utrecht-textbox-value-max-length: 10;
 }
 
+@mixin utrecht-textbox--voornamen-size {
+  /* Longest name in the Netherlands is 50 characters. Suggesting: 40 */
+  --utrecht-textbox-value-max-length: 40;
+}
+
+@mixin utrecht-textbox--vestigingnummer-size {
+  /* Typically 9 or lower digits */
+  --utrecht-textbox-value-max-length: 10;
+}
+
+@mixin utrecht-textbox--bsn-size {
+  /* BSN is 8 or 9 characters. Suggest: 5 */
+  --utrecht-textbox-value-max-length: 5;
+}
+
+@mixin utrecht-textbox--email-size {
+  /* Emails can very with how long they are. Suggesting max */
+  --utrecht-textbox-value-max-length: 40;
+}
+
+@mixin utrecht-textbox--geboortedatum-size {
+  /* 2 (for the day) + 1 (for the separator, usually a dash or slash) + 2 (for the month) + 1 (for the separator)
+   + 4 (for the year) = 9 characters (if you include separators). Or "DDMMYY" For now im testing: 5 */
+  --utrecht-textbox-value-max-length: 5;
+}
+
+@mixin utrecht-textbox--geboorteplaats-size {
+  /* testing 25 */
+  --utrecht-textbox-value-max-length: 25;
+}
+
+@mixin utrecht-textbox--achternaam-size {
+  /* Longest lastname in the Netherlands is 58 characters. Suggesting: 40 */
+  --utrecht-textbox-value-max-length: 40;
+}
+
+@mixin utrecht-textbox--kvk-size {
+  /* In the Netherlands a KVK number consists of 8 digits */
+  --utrecht-textbox-value-max-length: 4;
+}
+
+@mixin utrecht-textbox--straatnaam-size {
+  /* The longest street name in the Netherlands is 41 characters long */
+  --utrecht-textbox-value-max-length: 40;
+}
+
+@mixin utrecht-textbox--telefoon-nummer-size {
+  /* Dutch phone number consits of 9 digits, longest phone numer is 15 digits. */
+  --utrecht-textbox-value-max-length: 15;
+}
+
+@mixin utrecht-textbox--naam-bedrijf-size {
+  /* ... */
+  --utrecht-textbox-value-max-length: 40;
+}
+
+@mixin utrecht-textbox--plaats-size {
+  /* ... */
+  --utrecht-textbox-value-max-length: 10;
+}
+
+@mixin utrecht-textbox--tussenvoegsel-size {
+  /* Consits mostly of 6 or lower digits */
+  --utrecht-textbox-value-max-length: 8;
+}
+
 @mixin utrecht-textbox--tel-size {
   /* International telephone number standard E.164 allows 15 numbers, with optional space for 4 spaces */
   --utrecht-textbox-value-max-length: 19;
@@ -316,3 +403,8 @@ $utrecht-support-prince-xml: false !default;
   /* Dutch IBAN: 18 characters, plus 4 spaces (one space after every 4 characters) */
   --utrecht-textbox-value-max-length: 22;
 }
+
+@mixin utrecht-textbox--woonplaats-size {
+  /*  ... */
+  --utrecht-textbox-value-max-length: 40;
+}

components/textbox/src/index.scss

@@ -47,7 +47,8 @@
   @include utrecht-textbox--postal-code-nl-size;
 }
 
-.utrecht-textbox--house-number-size {
+.utrecht-textbox--house-number-size,
+.utrecht-textbox[name="huisnummer"] {
   @include utrecht-textbox--house-number-size;
 }
 

packages/storybook-react/src/stories/open-forms/OpenFormsContainer.scss

@@ -0,0 +1,150 @@
+@import "~@utrecht/textbox-css/src/mixin";
+
+.utrecht-textbox {
+  @include utrecht-textbox;
+}
+
+@mixin open-forms-utrecht-input-names {
+  .utrecht-textbox[name="data[voorletterSPZD]"],
+  .utrecht-textbox[name="data[voorletterSPMD]"],
+  .utrecht-textbox[name="data[voorletterSMEH]"],
+  .utrecht-textbox[name="data[voorletterSZEH]"] {
+    @include utrecht-textbox--voorletters-size;
+  }
+
+  .utrecht-textbox[name="data[aantalMarkten]"] {
+    @include utrecht-textbox--aantalmarkten-size;
+  }
+
+  .utrecht-textbox[name="data[voornamenPMD]"],
+  .utrecht-textbox[name="data[voornamenPZD]"] {
+    @include utrecht-textbox--voornamen-size;
+  }
+
+  .utrecht-textbox[name="data[achternaamPMD]"],
+  .utrecht-textbox[name="data[achternaamPZD]"],
+  .utrecht-textbox[name="data[achternaamZEH]"],
+  .utrecht-textbox[name="data[achternaamMEH]"] {
+    @include utrecht-textbox--achternaam-size;
+  }
+
+  .utrecht-textbox[name="data[burgerservicenummerPZD]"],
+  .utrecht-textbox[name="data[burgerservicenummerPMD]"] {
+    @include utrecht-textbox--bsn-size;
+  }
+
+  .utrecht-textbox[name="data[eMailadresPZD]"],
+  .utrecht-textbox[name="data[eMailadresPMD]"],
+  .utrecht-textbox[name="data[eMailadresZEH]"],
+  .utrecht-textbox[name="data[eMailadresMEH]"] {
+    @include utrecht-textbox--email-size;
+  }
+
+  .utrecht-textbox[name="data[geboortedatumPZD]"],
+  .utrecht-textbox[name="data[geboortedatumPMD]"] {
+    @include utrecht-textbox--geboortedatum-size;
+  }
+
+  .utrecht-textbox[name="data[geboorteplaatsPMD]"] {
+    @include utrecht-textbox--geboorteplaats-size;
+  }
+
+  .utrecht-textbox[name="data[huisletterPZD]"],
+  .utrecht-textbox[name="data[huisletterPMD]"],
+  .utrecht-textbox[name="data[huisletterZEH]"],
+  .utrecht-textbox[name="data[huisletterMEH]"],
+  .utrecht-textbox[name="data[huisletterPA]"] {
+    @include utrecht-textbox--house-letter-size;
+  }
+
+  .utrecht-textbox[name="data[huisnummerPZD]"],
+  .utrecht-textbox[name="data[huisnummerPMD]"],
+  .utrecht-textbox[name="data[huisnummerZEH]"],
+  .utrecht-textbox[name="data[huisnummerMEH]"],
+  .utrecht-textbox[name="data[huisnummerPA]"] {
+    @include utrecht-textbox--house-number-size;
+  }
+
+  .utrecht-textbox[name="data[huisnummertoevoegingPZD]"],
+  .utrecht-textbox[name="data[huisnummertoevoegingPMD]"],
+  .utrecht-textbox[name="data[huisnummertoevoegingZEH]"],
+  .utrecht-textbox[name="data[huisnummertoevoegingMEH]"],
+  .utrecht-textbox[name="data[huisnummertoevoegingPA]"] {
+    @include utrecht-textbox--house-addition-size;
+  }
+
+  .utrecht-textbox[name="data[kvKNummerMarktplaats]"] {
+    @include utrecht-textbox--kvk-size;
+  }
+
+  .utrecht-textbox[name="data[kvknummerZEH]"],
+  .utrecht-textbox[name="data[kvknummerMEH]"] {
+    @include utrecht-textbox--kvk-size;
+  }
+
+  .utrecht-textbox[name="data[naamBedrijfOrganisatieZEH]"],
+  .utrecht-textbox[name="data[naamBedrijfOrganisatieMEH]"] {
+    @include utrecht-textbox--naam-bedrijf-size;
+  }
+
+  .utrecht-textbox[name="data[plaatsZEH]"],
+  .utrecht-textbox[name="data[postbus_plaatsZE]"],
+  .utrecht-textbox[name="data[plaatsMEH]"],
+  .utrecht-textbox[name="data[plaatsPB]"],
+  .utrecht-textbox[name="data[plaatsPA]"] {
+    @include utrecht-textbox--plaats-size;
+  }
+
+  .utrecht-textbox[name="data[postbusnummerZEH]"],
+  .utrecht-textbox[name="data[postbusnummerPB]"] {
+    @include utrecht-textbox--postbus-nummer-size;
+  }
+
+  .utrecht-textbox[name="data[postcodePZD]"],
+  .utrecht-textbox[name="data[postcodePMD]"],
+  .utrecht-textbox[name="data[postcodeZEH]"],
+  .utrecht-textbox[name="data[postbus_postcodeZEH]"],
+  .utrecht-textbox[name="data[postcodeMEH]"],
+  .utrecht-textbox[name="data[postcodePB]"],
+  .utrecht-textbox[name="data[postcodePA]"] {
+    @include utrecht-textbox--postcode-size;
+  }
+
+  .utrecht-textbox[name="data[straatnaamPZD]"],
+  .utrecht-textbox[name="data[straatnaamPMD]"],
+  .utrecht-textbox[name="data[straatnaamZEH]"],
+  .utrecht-textbox[name="data[straatnaamMEH]"],
+  .utrecht-textbox[name="data[straatnaamPA]"] {
+    @include utrecht-textbox--straatnaam-size;
+  }
+
+  .utrecht-textbox[name="data[telefoonnummerPZD]"],
+  .utrecht-textbox[name="data[telefoonnummerPMD]"],
+  .utrecht-textbox[name="data[telefoonnummerZEH]"],
+  .utrecht-textbox[name="data[telefoonnummerMEH]"],
+  .utrecht-textbox[name="data[telefoonnummerMobielPZD]"],
+  .utrecht-textbox[name="data[telefoonnummerMobielPMD]"],
+  .utrecht-textbox[name="data[telefoonnummerWerkPZD]"],
+  .utrecht-textbox[name="data[telefoonnummerWerkPMD]"] {
+    @include utrecht-textbox--telefoon-nummer-size;
+  }
+
+  .utrecht-textbox[name="data[tussenvoegselSZEH]"],
+  .utrecht-textbox[name="data[tussenvoegselSMEH]"] {
+    @include utrecht-textbox--tussenvoegsel-size;
+  }
+
+  .utrecht-textbox[name="data[vestigingsnummerZEH]"],
+  .utrecht-textbox[name="data[vestigingsnummerMEH]"] {
+    @include utrecht-textbox--vestigingnummer-size;
+  }
+
+  .utrecht-textbox[name="data[woonplaatsPZD]"],
+  .utrecht-textbox[name="data[woonplaatsPMD]"] {
+    @include utrecht-textbox--woonplaats-size;
+  }
+}
+
+.utrecht-open-forms-container {
+  @include open-forms-utrecht-input-names;
+}

packages/storybook-react/src/stories/open-forms/OpenFormsContainer.tsx

@@ -0,0 +1,17 @@
+import { clsx } from 'clsx';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+import './OpenFormsContainer.scss';
+
+export interface OpenFormsContainerProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const OpenFormsContainer = ({
+  children,
+  className,
+  ...restProps
+}: PropsWithChildren<OpenFormsContainerProps>) => {
+  return (
+    <div className={clsx('utrecht-open-forms-container', className)} {...restProps}>
+      {children}
+    </div>
+  );
+};

packages/storybook-react/src/stories/open-forms/StoryUtil.tsx

@@ -3,6 +3,7 @@ import merge from 'lodash.merge';
 import React, { PropsWithChildren, useEffect, useState } from 'react';
 import { Form, Formio, Templates } from 'react-formio';
 import '@open-formulieren/sdk/styles.css';
+import { OpenFormsContainer } from './OpenFormsContainer';
 
 export type FormConfiguration = { type: string; components: { type: string; key: string; label: string }[] };
 
@@ -69,9 +70,17 @@ export const SingleFormioComponent = ({
   extraComponentProperties = {},
 }: SingleFormioComponentProps) => {
   const component = merge({ type, key, label }, extraComponentProperties);
-  return <RenderFormioForm form={{ type: 'form', components: [component] }} />;
+  return (
+    <OpenFormsContainer>
+      <RenderFormioForm form={{ type: 'form', components: [component] }} />
+    </OpenFormsContainer>
+  );
 };
 
 export const MultipleFormioComponents = ({ components }: MultipleFormioComponentsProps) => {
-  return <RenderFormioForm form={{ type: 'form', components: components }} />;
+  return (
+    <OpenFormsContainer>
+      <RenderFormioForm form={{ type: 'form', components: components }} />
+    </OpenFormsContainer>
+  );
 };