;
-// export const WithContents = {
-// play: async ({ mount, args }) => {
-// const canvas = await mount();
+export const WithContents = {
+ args: {
+ ...defaultArgs,
+ childComponents: mockChildComponents(0),
+ context: {
+ components: {
+ 'date-of-birth': defaultPatternComponents['date-of-birth'],
+ 'email-input': defaultPatternComponents['email-input'],
+ },
+ config: {
+ patterns: {},
+ },
+ uswdsRoot: '/uswds/',
+ },
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ const legend = await canvas.findByText('Default Heading');
+ expect(legend).toBeInTheDocument();
-// const addButton = canvas.getByRole('button', { name: /Add new item/ });
-// const deleteButton = canvas.getByRole('button', { name: /Delete item/ });
-// await userEvent.click(addButton);
+ const listItems = canvas.getAllByRole('list');
+ expect(listItems.length).toBe(1);
-// let inputs = canvas.queryAllByRole('textbox');
-// await expect(inputs).toHaveLength(1);
+ const dobLabel = await canvas.findByText('Date of Birth');
+ expect(dobLabel).toBeInTheDocument();
-// await userEvent.click(deleteButton);
-// inputs = canvas.queryAllByRole('textbox');
-// await expect(inputs).toHaveLength(0);
-// },
-// args: {
-// ...defaultArgs,
-// type: 'repeater',
-// children: [
-//
-//
-//
-//
,
-// ],
-// },
-// } satisfies StoryObj;
+ const emailLabel = await canvas.findByText('Email Input');
+ expect(emailLabel).toBeInTheDocument();
+ },
+} satisfies StoryObj;
+
+export const ErrorState = {
+ args: {
+ ...defaultArgs,
+ childComponents: mockChildComponents(0, true),
+ error: {
+ type: 'custom',
+ message: 'This field has an error',
+ },
+ context: {
+ components: {
+ 'date-of-birth': defaultPatternComponents['date-of-birth'],
+ 'email-input': defaultPatternComponents['email-input'],
+ },
+ config: {
+ patterns: {},
+ },
+ uswdsRoot: '/uswds/',
+ },
+ },
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ const legend = await canvas.findByText('Default Heading');
+ expect(legend).toBeInTheDocument();
+
+ const listItems = canvas.getAllByRole('list');
+ expect(listItems.length).toBe(1);
+
+ const dobError = await canvas.findByText('Invalid date of birth');
+ expect(dobError).toBeInTheDocument();
+
+ const emailError = await canvas.findByText('Invalid email address');
+ expect(emailError).toBeInTheDocument();
+ },
+} satisfies StoryObj;
diff --git a/packages/design/src/Form/components/Repeater/index.tsx b/packages/design/src/Form/components/Repeater/index.tsx
index 2e5ff5ee..3f11494d 100644
--- a/packages/design/src/Form/components/Repeater/index.tsx
+++ b/packages/design/src/Form/components/Repeater/index.tsx
@@ -1,9 +1,6 @@
import React, { Children, useMemo } from 'react';
import { useFieldArray } from 'react-hook-form';
-import {
- type RepeaterProps,
- type PromptComponent,
-} from '@atj/forms';
+import { type RepeaterProps, type PromptComponent } from '@atj/forms';
import { type PatternComponent } from '../../index.js';
import { renderPromptComponents } from '../../form-common.js';