Test/textbox

.changeset/twelve-bananas-kiss.md

@@ -0,0 +1,8 @@
+---
+"@utrecht/textbox-css": minor
+---
+
+feat: dynamic input field width based on field type
+
+Input fields now automatically adjust their width based on the specific field type.  
+For example, postcode fields have a shorter width, following the standard Dutch postcode length.

components/textbox/src/_mixin.scss

@@ -276,6 +276,16 @@ $utrecht-support-prince-xml: false !default;
   --utrecht-textbox-value-max-length: 7;
 }
 
+@mixin utrecht-textbox--postbus-nummer-size {
+  /* A postbusnummer consists of four digits. */
+  --utrecht-textbox-value-max-length: 4;
+}
+
+@mixin utrecht-textbox--postcode-size {
+  /* A postcode consists of four numbers and two letters. 7 characters with space bijv 1234 AA */
+  --utrecht-textbox-value-max-length: 7;
+}
+
 @mixin utrecht-textbox--house-number-size {
   /* Dutch house number is 99999 at most: 5 numbers */
   --utrecht-textbox-value-max-length: 5;
@@ -291,13 +301,90 @@ $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: 9;
+}
+
 @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: 9;
+}
+
+@mixin utrecht-textbox--bsn-size {
+  /* BSN is 8 or 9 characters. */
+  --utrecht-textbox-value-max-length: 9;
+}
+
+@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" without separators 6 characters */
+  --utrecht-textbox-value-max-length: 9;
+}
+
+@mixin utrecht-textbox--geboorteplaats-size {
+  /* Geboorteplaats ken een stad, dorp, of zelfs een buurtschap zijn. Langste buurtschap/dorp in Nederland bevat 21 karakters */
+  --utrecht-textbox-value-max-length: 21;
+}
+
+@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: 8;
+}
+
+@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--sapartikelnummer-size {
+  /* An SAP material number typically has between 8 and 18 characters */
+  --utrecht-textbox-value-max-length: 18;
+}
+
+@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 {
+  /* The company name or organization may vary in the number of characters it contains */
+  --utrecht-textbox-value-max-length: 40;
+}
+
+@mixin utrecht-textbox--plaats-size {
+  /* Geboorteplaats ken een stad, dorp, of zelfs een buurtschap zijn. Langste buurtschap/dorp in Nederland bevat 21 karakters */
+  --utrecht-textbox-value-max-length: 21;
+}
+
+@mixin utrecht-textbox--tussenvoegsel-size {
+  /* Consits mostly of 6 or lower digits */
+  --utrecht-textbox-value-max-length: 6;
+}
+
 @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;
@@ -317,3 +404,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 {
+  /* Geboorteplaats ken een stad, dorp, of zelfs een buurtschap zijn. Langste buurtschap/dorp in Nederland bevat 21 karakters */
+  --utrecht-textbox-value-max-length: 21;
+}

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

@@ -0,0 +1,193 @@
+@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--postbus-nummer-size;
+  }
+
+  .utrecht-textbox[name="data[bedragVerlenging]"] {
+    @include utrecht-textbox--postbus-nummer-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[sapArtikelnummer]"] {
+    @include utrecht-textbox--sapartikelnummer-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;
+  }
+}
+
+@mixin utrecht-textbox-char-size {
+  /* The average character inline-size is an approximation, with a default that works for Dutch text.
+   * The average might need to be configured specifically, for other scripts (CJK characters)
+   * and very wide or very narrow fonts.
+   * For monospace fonts it can be set to `1ch`.
+   */
+  --_utrecht-textbox-value-char: 0.667em + 0.334ch;
+
+  /* Because this element uses `border-box` box-sizing, we need to manually add up the
+    * border width, padding width and the content width.
+    * 
+    * Browsers and browser addons can add buttons inside the content box, for example
+    * for autocomplete. To avoid overlap between the UI and the text, we reserve
+    * some additional pixels to make space. We use 44px in accordance with the WCAG target size.
+    * 
+    * When you are certain an element has no such UI, you can set the `autocomplete-ui-size` to `0px` (not to `0`).
+    */
+  --_utrecht-textbox-max-inline-size: calc(
+    calc(var(--utrecht-textbox-value-max-length) * var(--_utrecht-textbox-value-char)) +
+      var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, 0)) +
+      var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, 0)) +
+      var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width, 0)) +
+      var(--utrecht-textbox-autocomplete-ui-size, 0px)
+  );
+
+  max-inline-size: min(
+    var(--_utrecht-textbox-max-inline-size, 100%),
+    var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size))
+  );
+}
+
+.utrecht-open-forms-container {
+  .utrecht-textbox {
+    @include utrecht-textbox-char-size;
+  }
+
+  @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>
+  );
 };