✅ [#571] Update stories

* Added some pristine state stories & tests for hidden components
* Updated zod story to use semantically correct component in favour
  of form-control div/styles to be deleted.

src/formio/components/composite.stories.js

@@ -1,3 +1,4 @@
+import {expect} from '@storybook/jest';
 import {userEvent, within} from '@storybook/testing-library';
 
 import {withUtrechtDocument} from 'story-utils/decorators';
@@ -14,6 +15,7 @@ export default {
         type: 'textfield',
         key: 'textfield',
         label: 'Required text field',
+        description: 'Text field description',
         validate: {
           required: true,
           pattern: '^\\d+',
@@ -38,6 +40,12 @@ export default {
         html: '<p>Some WYSIWYG content</p>',
         customClass: 'info',
       },
+      {
+        type: 'textfield',
+        key: 'hiddenTextfield',
+        label: 'Hidden text field',
+        hidden: true,
+      },
       {
         label: 'Submit',
         showValidations: false,
@@ -57,6 +65,17 @@ export default {
   },
 };
 
+export const Pristine = {
+  render: MultipleFormioComponents,
+
+  play: async ({canvasElement}) => {
+    const canvas = within(canvasElement);
+
+    expect(canvas.queryByText('Required text field')).toBeVisible();
+    expect(canvas.queryByText('Hidden text field')).not.toBeInTheDocument();
+  },
+};
+
 export const WithValidationErrors = {
   render: args => (
     <form onSubmit={e => e.preventDefault()}>

src/i18n-zod.stories.js

@@ -1,4 +1,5 @@
 import {userEvent, within} from '@storybook/testing-library';
+import {ButtonGroup} from '@utrecht/component-library-react';
 import {Form, Formik} from 'formik';
 import {useIntl} from 'react-intl';
 import {z} from 'zod';
@@ -102,14 +103,11 @@ const AccessibleErrorsExample = ({onSubmit}) => {
       <Form>
         <TextField name="name" label={labels.name} />
         <EmailField name="email" label={labels.email} />
-        <div
-          className="openforms-form-control"
-          style={{display: 'flex', justifyContent: 'flex-end'}}
-        >
+        <ButtonGroup style={{justifyContent: 'flex-end'}}>
           <Button type="submit" variant="primary">
             Submit
           </Button>
-        </div>
+        </ButtonGroup>
       </Form>
     </Formik>
   );