import React from "react" ; import { Story } from "@storybook/react" ; import { FieldDocGen } from "./Field.docgen" ; import { Field , FieldProps , ScreenReaderText } from "@okta/odyssey-react" ; import FieldMdx from "./Field.mdx" ; export default { title : `Components/Field` , component : FieldDocGen , parameters : { docs : { page : FieldMdx } } , args : { } , argTypes : { error : { control : "text" } , hint : { control : "text" } , required : { control : "boolean" } , children : { control : false } , inputId : { control : false } , as : { control : "radio" } } } ; const Template = ( props ) => < Field { ... props } / > ; export const KitchenSink = Template . bind ( { } ) ; KitchenSink . args = { label : "Destination" , optionalLabel : "Optional" , hint : "Your planetary destination." , required : false , error : ( < > < ScreenReaderText > Error : < /ScreenReaderText> This field may not be left blank . < />) } ; export const FieldLabel = Template . bind ( { } ) ; FieldLabel . args = { label : "Destination" } ; export const FieldOptional = Template . bind ( { } ) ; FieldOptional . args = { label : "Destination" , optionalLabel : "Optional" , required : false } ; export const FieldHint = Template . bind ( { } ) ; FieldHint . args = { hint : "Your planetary destination." } ; export const FieldError = Template . bind ( { } ) ; FieldError . args = { error : ( < > < ScreenReaderText > Error : < /ScreenReaderText> This field may not be left blank . < />) } ;