feat: add open forms container

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>
+  );
 };