Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | import{R as e}from"./iframe-Bn_dKj27.js";import{F as c,a as l}from"./FormField-BYt8PKU5.js";import"./index-CtfpA6-5.js";const{expect:s,fn:T,userEvent:t}=__STORYBOOK_MODULE_TEST__,D={component:c,tags:["autodocs"],args:{onSubmit:T(),action:"/api",method:"post",tagName:"form"},argTypes:{method:{control:{type:"radio"},options:["post","put","get"]}}},m={render(a){return e.createElement(c,{...a},e.createElement("input",{name:"title",type:"text",placeholder:"title"}),e.createElement("input",{name:"description",type:"text",placeholder:"description"}),e.createElement("input",{type:"submit"}))},play:async({args:a,canvas:i})=>{const o=await i.getByPlaceholderText("title");await t.type(o,"The Form Example");const n=await i.getByPlaceholderText("description");await t.type(n,"dedicated to all the developers");const r=await i.getByRole("button");await s(r).toBeDefined(),await t.click(r),await s(a.onSubmit).toHaveBeenCalledOnce()}},p={render(a){return e.createElement(c,{...a},e.createElement("label",{htmlFor:"title_input"},"title"),e.createElement("input",{id:"title_input",name:"title",type:"text"}),e.createElement("label",{htmlFor:"description_input"},"description"),e.createElement("input",{id:"description_input",name:"description",type:"text"}),e.createElement("input",{type:"submit"}))},play:async({args:a,canvas:i,canvasElement:o})=>{const n=o.ownerDocument,r=await i.getByText("title");await t.click(r),await t.type(n.activeElement,"The Form Example");const u=await i.getByText("description");await t.click(u),await t.type(n.activeElement,"dedicated to all the developers {Enter}"),await s(a.onSubmit).toHaveBeenCalledOnce()}},d={render(a){return e.createElement(c,{...a},e.createElement(l,{name:"title",label:"Title"},e.createElement(l.Label,null),e.createElement(l.Input,null)),e.createElement(l,{name:"description",label:"Description",describedBy:"extraDescription"},e.createElement(l.Label,null),e.createElement(l.Input,null),e.createElement("div",{id:"extraDescription"},"some extra content")),e.createElement(c.Submit,null))},play:async({args:a,canvas:i,canvasElement:o})=>{const n=o.ownerDocument,r=await i.getByText(/title/i);await t.click(r),await t.type(n.activeElement,"The Form Example");const u=await i.getByText(/description/i);await t.click(u),await t.type(n.activeElement,"dedicated to all the developers {Enter}");const E=await i.getByRole("button");await s(E).toBeDefined(),await t.click(E),await s(a.onSubmit).toHaveBeenCalledTimes(2)}};var y,b,w;m.parameters={...m.parameters,docs:{...(y=m.parameters)==null?void 0:y.docs,source:{originalSource:`{ render(args) { return <Form {...args}> <input name="title" type="text" placeholder="title" /> <input name="description" type="text" placeholder="description" /> <input type="submit" /> </Form>; }, play: async ({ args, canvas }) => { const input = await canvas.getByPlaceholderText('title'); await userEvent.type(input, 'The Form Example'); const input2 = await canvas.getByPlaceholderText('description'); await userEvent.type(input2, 'dedicated to all the developers'); const submitBtn = await canvas.getByRole('button'); await expect(submitBtn).toBeDefined(); await userEvent.click(submitBtn); await expect(args.onSubmit).toHaveBeenCalledOnce(); } }`,...(w=(b=m.parameters)==null?void 0:b.docs)==null?void 0:w.source}}};var v,F,x;p.parameters={...p.parameters,docs:{...(v=p.parameters)==null?void 0:v.docs,source:{originalSource:`{ render(args) { return <Form {...args}> <label htmlFor="title_input">title</label> <input id="title_input" name="title" type="text" /> <label htmlFor="description_input">description</label> <input id="description_input" name="description" type="text" /> <input type="submit" /> </Form>; }, play: async ({ args, canvas, canvasElement }) => { const document = canvasElement.ownerDocument; const titleLabel = await canvas.getByText('title'); await userEvent.click(titleLabel); await userEvent.type(document.activeElement, 'The Form Example'); const descriptionLabel = await canvas.getByText('description'); await userEvent.click(descriptionLabel); await userEvent.type(document.activeElement, 'dedicated to all the developers {Enter}'); await expect(args.onSubmit).toHaveBeenCalledOnce(); } }`,...(x=(F=p.parameters)==null?void 0:F.docs)==null?void 0:x.source}}};var B,g,h;d.parameters={...d.parameters,docs:{...(B=d.parameters)==null?void 0:B.docs,source:{originalSource:`{ render(args) { return <Form {...args}> <FormField name="title" label="Title"> <FormField.Label /> <FormField.Input /> </FormField> <FormField name="description" label="Description" describedBy="extraDescription"> <FormField.Label /> <FormField.Input /> <div id="extraDescription">some extra content</div> </FormField> <Form.Submit /> </Form>; }, play: async ({ args, canvas, canvasElement }) => { const document = canvasElement.ownerDocument; const titleLabel = await canvas.getByText(/title/i); await userEvent.click(titleLabel); await userEvent.type(document.activeElement, 'The Form Example'); const descriptionLabel = await canvas.getByText(/description/i); await userEvent.click(descriptionLabel); await userEvent.type(document.activeElement, 'dedicated to all the developers {Enter}'); const submitBtn = await canvas.getByRole('button'); await expect(submitBtn).toBeDefined(); await userEvent.click(submitBtn); await expect(args.onSubmit).toHaveBeenCalledTimes(2); } }`,...(h=(g=d.parameters)==null?void 0:g.docs)==null?void 0:h.source}}};const k=["FormInAction","FormOnSubmitAccessibly","FormFieldExample"];export{d as FormFieldExample,m as FormInAction,p as FormOnSubmitAccessibly,k as __namedExportsOrder,D as default}; |