feat: combobox React package

.changeset/afraid-bugs-taste.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/listbox-react": major
+---
+
+Create React-listbox component package

.changeset/clean-carrots-greet.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/textbox-react": minor
+---
+
+Re-export React Textbox component package

.changeset/cuddly-balloons-ring.md

@@ -0,0 +1,7 @@
+---
+"@utrecht/component-library-react": patch
+"@utrecht/button-react": patch
+"@utrecht/calendar-react": patch
+---
+
+Fix the button style issue when importing it from `dist/css-module`.

.changeset/cyan-forks-sing.md

@@ -0,0 +1,31 @@
+---
+"@utrecht/combobox-css": minor
+---
+
+Create the rest CSS classes for the combobox elements.
+
+The new classes:
+
+- `utrecht-combobox__textbox-container`
+- `utrecht-combobox__toggle-button`
+
+  ```CSS
+  --utrecht-combobox-toggle-button-background-color: transparent; //default value
+  --utrecht-combobox-toggle-button-color: currentColor; //default value
+  --utrecht-combobox-toggle-button-hover-background-color: transparent; //default value
+  --utrecht-combobox-toggle-button-hover-color: currentColor; //default value
+  --utrecht-combobox-toggle-button-active-background-color: transparent; //default value
+  --utrecht-combobox-toggle-button-active-color: currentColor; //default value
+  --utrecht-combobox-toggle-button-focus-background-color: transparent; //default value
+  --utrecht-combobox-toggle-button-focus-color: currentColor; //default value
+  --utrecht-combobox-toggle-button-pressed-background-color: transparent; //default value
+  --utrecht-combobox-toggle-button-pressed-color: currentColor; //default value
+  ```
+
+- `utrecht-combobox__icon`
+
+  ```CSS
+  --utrecht-combobox-icon-size: 32px; //default value
+  ```
+
+-

.changeset/fair-books-build.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/storybook-react": minor
+---
+
+Add Combobox stories

.changeset/large-dots-pay.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Re-export FormLabel-react component

.changeset/light-trees-smell.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Re-export `FormFieldCombobox` component package

.changeset/rare-carrots-buy.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/combobox-react": major
+---
+
+Create React combobox component

.changeset/rotten-deers-battle.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/form-field-react": major
+---
+
+Create form-field-react package

.changeset/shiny-plants-smell.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/listbox-css": patch
+---
+
+Fix the listbox width on small screens

.changeset/sixty-worms-call.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Re-export React Listbox component package

.changeset/slimy-baboons-grab.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/form-field-combobox-react": major
+---
+
+Create `FormFieldCombobox` react package

.changeset/strange-pigs-drum.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/form-label-react": major
+---
+
+Create FormLabel react component package

.changeset/tasty-socks-accept.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Re-export the new React-Combobox

.changeset/tough-feet-sing.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/component-library-react": minor
+---
+
+Re-export FormField-react component

.changeset/witty-jobs-crash.md

@@ -0,0 +1,5 @@
+---
+"@utrecht/textbox-react": major
+---
+
+Create React Textbox component package

.github/workflows/continuous-delivery.yml

@@ -150,7 +150,9 @@ jobs:
       - name: Install dependencies
         run: |
           pnpm install
-
+      - name: "Continuous Integration: build"
+        run: |
+          pnpm run --if-present build
       - name: "Continuous Integration: test"
         run: |
           pnpm run --if-present test

components/combobox/src/_mixin.scss

@@ -40,3 +40,51 @@
 @mixin utrecht-combobox__popover--hidden {
   display: none !important;
 }
+
+@mixin utrecht-combobox__textbox-container {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  inline-size: var(--utrecht-listbox-inline-size);
+  max-inline-size: 100%;
+  position: relative;
+}
+@mixin utrecht-combobox__toggle-button {
+  --utrecht-button-subtle-background-color: var(--utrecht-combobox-toggle-button-background-color, transparent);
+  --utrecht-button-subtle-color: var(--utrecht-combobox-toggle-button-color, currentColor);
+  --utrecht-button-subtle-hover-background-color: var(
+    --utrecht-combobox-toggle-button-hover-background-color,
+    transparent
+  );
+  --utrecht-button-subtle-hover-border-color: transparent;
+  --utrecht-button-subtle-hover-color: var(--utrecht-combobox-toggle-button-hover-color, currentColor);
+  --utrecht-button-hover-scale: none;
+  --utrecht-button-subtle-active-border-color: transparent;
+  --utrecht-button-subtle-active-background-color: var(
+    --utrecht-combobox-toggle-button-active-background-color,
+    transparent
+  );
+  --utrecht-button-subtle-active-color: var(--utrecht-combobox-toggle-button-active-color, currentColor);
+  --utrecht-button-subtle-focus-border-color: transparent;
+  --utrecht-button-subtle-focus-background-color: var(
+    --utrecht-combobox-toggle-button-focus-background-color,
+    transparent
+  );
+  --utrecht-button-subtle-focus-color: var(--utrecht-combobox-toggle-button-focus-color, currentColor);
+  --utrecht-button-subtle-pressed-background-color: var(
+    --utrecht-combobox-toggle-button-pressed-background-color,
+    transparent
+  );
+  --utrecht-button-subtle-pressed-border-color: transparent;
+  --utrecht-button-subtle-pressed-color: var(--utrecht-combobox-toggle-button-pressed-color, currentColor);
+
+  inset-block-start: 50%;
+  inset-inline-end: 0;
+  position: absolute;
+  transform: translateY(-50%);
+}
+
+@mixin utrecht-combobox__icon {
+  block-size: var(--utrecht-combobox-icon-size, 32px);
+  inline-size: var(--utrecht-combobox-icon-size, 32px);
+}

components/combobox/src/index.scss

@@ -20,3 +20,15 @@
 .utrecht-combobox__popover--hidden {
   @include utrecht-combobox__popover--hidden;
 }
+
+.utrecht-combobox__textbox-container {
+  @include utrecht-combobox__textbox-container;
+}
+
+.utrecht-combobox__toggle-button {
+  @include utrecht-combobox__toggle-button;
+}
+
+.utrecht-combobox__icon {
+  @include utrecht-combobox__icon;
+}

components/combobox/src/tokens.json

@@ -0,0 +1,162 @@
+{
+  "utrecht": {
+    "combobox": {
+      "max-inline-size": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<length>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "spacing"
+      },
+      "border-color": {
+        "$extensions": {
+          "nl.nldesignsystem.css.property": {
+            "syntax": "<color>",
+            "inherits": true
+          },
+          "nl.nldesignsystem.figma.supports-token": true
+        },
+        "type": "color"
+      },
+      "input": {
+        "container": {
+          "inline-size": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<length>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "spacing"
+          }
+        }
+      },
+      "toggle-button": {
+        "background-color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "color": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<color>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "color"
+        },
+        "hover": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          }
+        },
+        "active": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          }
+        },
+        "focus": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          }
+        },
+        "pressed": {
+          "background-color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          },
+          "color": {
+            "$extensions": {
+              "nl.nldesignsystem.css.property": {
+                "syntax": "<color>",
+                "inherits": true
+              },
+              "nl.nldesignsystem.figma.supports-token": true
+            },
+            "type": "color"
+          }
+        }
+      },
+      "icon": {
+        "size": {
+          "$extensions": {
+            "nl.nldesignsystem.css.property": {
+              "syntax": "<length>",
+              "inherits": true
+            },
+            "nl.nldesignsystem.figma.supports-token": true
+          },
+          "type": "spacing"
+        }
+      }
+    }
+  }
+}

components/listbox/src/_mixin.scss

@@ -32,6 +32,7 @@
   font-weight: var(--utrecht-listbox-font-weight, var(--utrecht-form-control-font-weight, initial));
   inline-size: var(--utrecht-listbox-inline-size, var(--utrecht-form-control-max-inline-size));
   max-block-size: var(--utrecht-listbox-max-block-size);
+  max-inline-size: 100%;
   min-block-size: 1em;
   overflow-block: auto;
   overflow-y: auto;

packages/component-library-react/jest.config.mjs

@@ -14,9 +14,6 @@ const customJestConfig = {
   testEnvironment: 'jest-environment-jsdom',
   testPathIgnorePatterns: ['/dist/'],
   // transformIgnorePatterns: ['node_modules/(?!@utrecht/web-component-library-react)'],
-  moduleNameMapper: {
-    '^@utrecht/(.*)$': '<rootDir>/packages/$1/src/',
-  },
 };
 
 export default createJestConfig(customJestConfig);