Removal of Utrecht Components and upgrade React Package to React 19 Support

.changeset/calm-hats-smoke.md

@@ -0,0 +1,15 @@
+---
+"@nl-rvo/component-library-css": minor
+---
+
+Updates to several components using `.rvo-` prefix instead of `.utrecht-`. Affect components are:
+
+- Button
+- Action Group
+- Fieldset
+- Textarea
+
+Smaller fixes to the following CSS
+
+- Footer payoff color added
+- Autocomplete placeholder color added

.changeset/famous-paws-glow.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/css-footer": minor
+---
+
+Removed third party Footer Component to use default footer html tag. Added correct color to `.rvo-footer__payoff` in CSS.

.changeset/gentle-houses-lay.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/autocomplete": minor
+---
+
+Classnames parameter didn't work as intented, fixed this issues. Updated placeholder color to use correct color.

.changeset/new-ants-warn.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/css-dialog": patch
+---
+
+Updated ActionGroup check for Dialogs

.changeset/plenty-news-learn.md

@@ -0,0 +1,17 @@
+---
+"@nl-rvo/component-library-react": major
+---
+
+Added Support for React 19.
+
+Removed third party component imports from the following Components:
+
+- Action Group
+- Button
+- Datalist
+- Footer
+- Form Feedback
+- Form Field
+- Form Fieldset
+- Form Textarea
+- Form Textinput

.changeset/slow-lies-serve.md

@@ -0,0 +1,19 @@
+---
+"@nl-rvo/css-button": major
+---
+
+Removed third party Button Component to use own button setup and updated clasnames.
+Removed the following parameters which where used through Storybook or no longer required:
+
+- active
+- busy
+- focus
+- focusVisible
+- hover
+- alignToRightInGroup
+
+Using new classname for button: `rvo-button` instead of `utrecht-button`. All other class names using the previous classnames have also been updated with the classname prefix.
+Removed allButtons export from Component, as this is only used in Storybook Stories.
+
+Style Changes:
+No direct changes in the display of the Compnent, but the naming convension of the Component has been updated to use `.rvo-button` as prefix, instead of `.utrecht-button`.

.changeset/tiny-ravens-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/expandable-table": minor
+---
+
+Fixed Issues with the isExpandable check

.changeset/twenty-penguins-compete.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/design-tokens": minor
+---
+
+Update Button Design tokens

.changeset/two-sheep-confess.md

@@ -0,0 +1,10 @@
+---
+"@nl-rvo/css-form-textinput": minor
+"@nl-rvo/css-form-timeinput": minor
+"@nl-rvo/css-form-feedback": minor
+"@nl-rvo/css-form-fieldset": minor
+"@nl-rvo/css-form-textarea": minor
+"@nl-rvo/css-form-field": minor
+---
+
+Removed third party component imports and updated CSS to be inline with the original designs

.changeset/unlucky-ants-march.md

@@ -0,0 +1,6 @@
+---
+"@nl-rvo/css-action-group": minor
+---
+
+Remove third party ButtonGroup component and replaced this with a div.
+Renamed class .utrecht-button-group to .rvo-button-group and added additional changes to the CSS of the Action Group Component.

.changeset/unlucky-sheep-listen.md

@@ -0,0 +1,5 @@
+---
+"@nl-rvo/css-alert": minor
+---
+
+Icon on Alert button updated with new parameters. CSS now targets .rvo-button instead of .utrecht-button

components/action-group/package.json

@@ -30,8 +30,5 @@
   },
   "devDependencies": {
     "@nl-rvo/build-utils-css": "workspace:*"
-  },
-  "dependencies": {
-    "@utrecht/button-group-css": "1.3.1"
   }
 }

components/action-group/src/index.scss

@@ -2,20 +2,19 @@
  * @license CC0-1.0
  * Copyright (c) 2021 Community for NL Design System
  */
-@use "~@utrecht/button-group-css/dist/index.css" as *;
 
-.utrecht-button-group {
+.rvo-action-group {
+  align-items: baseline;
+  break-inside: avoid;
+  display: flex;
   flex-wrap: wrap;
+  gap: var(--rvo-space-md);
 }
 
-.rvo-action-groul--position-right {
+.rvo-action-group--position-right {
   justify-content: flex-end;
 }
 
-.rvo-action-group--align-right {
-  margin-inline-start: auto;
-}
-
 .rvo-action-group--full-width {
   --utrecht-button-inline-size: 100%;
   --utrecht-button-max-inline-size: 100%;

components/action-group/src/template.tsx

@@ -2,7 +2,6 @@
  * @license CC0-1.0
  * Copyright (c) 2022 Community for NL Design System
  */
-import { ButtonGroup } from '@utrecht/component-library-react';
 import clsx from 'clsx';
 import React, { ReactNode } from 'react';
 import { defaultArgs } from './defaultArgs';
@@ -58,12 +57,11 @@ export const ActionGroup: React.FC<IActionGroupProps & React.HTMLAttributes<HTML
   ...rootElementProps
 }) => {
   return (
-    <ButtonGroup
+    <div
       className={clsx(
-        {
-          'rvo-action-group--full-width': fullWidth,
-          'rvo-action-groul--position-right': position === 'right',
-        },
+        'rvo-action-group',
+        fullWidth && 'rvo-action-group--full-width',
+        position === 'right' && 'rvo-action-group--position-right',
         className,
       )}
       {...rootElementProps}
@@ -74,7 +72,7 @@ export const ActionGroup: React.FC<IActionGroupProps & React.HTMLAttributes<HTML
           return <Button key={index} {...buttonProps} />;
         })}
       {!children && buttonsRight?.map((buttonProps, index) => <Button key={index} {...buttonProps} />)}
-    </ButtonGroup>
+    </div>
   );
 };
 

components/alert/src/index.scss

@@ -96,7 +96,7 @@
   background-color: var(--rvo-alert-success-background-color);
 }
 
-.utrecht-button--subtle.rvo-button__close {
+.rvo-button--subtle.rvo-button__close {
   --utrecht-icon-color: var(--rvo-color-zwart);
 
   margin-inline-start: auto;

components/alert/src/template.tsx

@@ -118,7 +118,7 @@ export const Alert: React.FC<IAlertProps> = ({
           <Button
             kind="subtle"
             className="rvo-button__close"
-            label={<Icon icon="kruis" size="md" />}
+            label={<Icon icon="kruis" size="sm" color="zwart" />}
             aria-label="Sluiten"
             onClick={handleClose}
           />

components/button/button.icon.stories.tsx

@@ -1,8 +1,8 @@
-import { AllButtonKinds, argTypes } from './src/template';
+import { argTypes, Button } from './src/template';
 
 export default {
   title: 'Componenten/Button/Icons',
-  component: AllButtonKinds,
+  component: Button,
   argTypes: argTypes,
 
   parameters: {
@@ -20,8 +20,31 @@ export default {
   },
 };
 
+const allButtons = (buttonArgs) => (
+  <div>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="primary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="secondary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="tertiary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="quaternary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="warning-subtle" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="warning" />
+    </p>
+  </div>
+);
+
 export const WithIconBefore = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'With icon before',
 
   args: {
@@ -31,7 +54,7 @@ export const WithIconBefore = {
 };
 
 export const WithIconAfter = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'With icon after',
 
   args: {

components/button/button.sizes.stories.tsx

@@ -1,8 +1,8 @@
-import { AllButtonKinds, argTypes } from './src/template';
+import { argTypes, Button } from './src/template';
 
 export default {
   title: 'Componenten/Button/Sizes',
-  component: AllButtonKinds,
+  component: Button,
   argTypes: argTypes,
 
   parameters: {
@@ -20,8 +20,31 @@ export default {
   },
 };
 
+const allButtons = (buttonArgs) => (
+  <div>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="primary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="secondary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="tertiary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="quaternary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="warning-subtle" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="warning" />
+    </p>
+  </div>
+);
+
 export const ExtraSmall = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Extra small',
 
   args: {
@@ -31,7 +54,7 @@ export const ExtraSmall = {
 };
 
 export const Small = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Small',
 
   args: {
@@ -41,7 +64,7 @@ export const Small = {
 };
 
 export const Medium = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Medium',
 
   args: {

components/button/button.states.stories.tsx

@@ -1,8 +1,8 @@
-import { AllButtonKinds, argTypes } from './src/template';
+import { argTypes, Button } from './src/template';
 
 export default {
   title: 'Componenten/Button/States',
-  component: AllButtonKinds,
+  component: Button,
   argTypes: argTypes,
 
   parameters: {
@@ -20,8 +20,31 @@ export default {
   },
 };
 
+const allButtons = (buttonArgs) => (
+  <div>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="primary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="secondary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="tertiary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="quaternary" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="warning-subtle" />
+    </p>
+    <p>
+      <Button label="Button" {...buttonArgs} kind="warning" />
+    </p>
+  </div>
+);
+
 export const Hover = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Hover',
 
   args: {
@@ -31,7 +54,7 @@ export const Hover = {
 };
 
 export const Active = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Active',
 
   args: {
@@ -41,7 +64,7 @@ export const Active = {
 };
 
 export const Focus = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Focus',
 
   args: {
@@ -51,7 +74,7 @@ export const Focus = {
 };
 
 export const FocusVisible = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Focus visible',
 
   args: {
@@ -62,7 +85,7 @@ export const FocusVisible = {
 };
 
 export const Disabled = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Disabled',
 
   args: {
@@ -72,7 +95,7 @@ export const Disabled = {
 };
 
 export const Busy = {
-  render: AllButtonKinds.bind({}),
+  render: allButtons,
   name: 'Busy',
 
   args: {