import React from "react" ; import type { Story } from "@storybook/react" ; import { TextInput , TextInputProps } from "@okta/odyssey-react" ; import { TextInput as Source } from "../../../../odyssey-react/src" ; import TextInputMdx from "./TextInput.mdx" ; export default { title : `Components/TextInput` , component : Source , parameters : { docs : { page : TextInputMdx } } , args : { label : "Destination" , optionalLabel : "Optional" } , argTypes : { required : { control : "boolean" } , disabled : { control : "boolean" } , readonly : { control : "boolean" } , defaultValue : { control : "text" } , hint : { control : "text" } , optionalLabel : { control : "text" } , placeholder : { control : "text" } , value : { control : "text" } , id : { control : "text" } , name : { control : "text" } , error : { control : "text" } , onChange : { control : false } , onBlur : { control : false } , onFocus : { control : false } } } ; const Template = ( props ) => < TextInput { ... props } / > ; export const Text = Template . bind ( { } ) ; Text . args = { } ; export const Optional = Template . bind ( { } ) ; Optional . args = { required : false , optionalLabel : "Optional" } ; export const KitchenSink = Template . bind ( { } ) ; KitchenSink . args = { hint : "This is a hint" , optionalLabel : "Optional" , error : "This is an error" , required : false } ; export const Search = Template . bind ( { } ) ; Search . args = { defaultValue : "Search Planets" , type : "search" } ;