import React from "react" ; import { Story } from "@storybook/react" ; import { Form , FormProps , FieldGroup , TextInput , Infobox , Button , } from "@okta/odyssey-react" ; import { Form as Source } from "../../../../odyssey-react/src" ; export default { title : `Components/Form` , component : Source , argTypes : { children : { control : { type : null } } , title : { defaultValue : "Interplanetary flight registration" , control : { type : "text" } } , desc : { defaultValue : "Complete this form in order to register for your interplanetary transfer." , control : { type : "text" } } } } ; const Template = ( { title , desc } ) => ( < Form title = { title } desc = { desc } > < Form . Error > < Infobox title = "Signal interrupted" variant = "danger" content = "This is an error." / > < /Form.Error> < Form . Main > < FieldGroup title = "Origination logistics" desc = "This information is required for your craft to leave the starport." > < TextInput label = "Foo" hint = "Bar" error = "Baz" / > < /FieldGroup> < /Form.Main> < Form . Actions > < Button > Register < /Button> < /Form.Actions> < /Form>); export const Default = Template . bind ( { } ) ;