import React from "react" ; import type { Story } from "@storybook/react" ; import type { ReactElement } from "react" ; import { Select , SelectProps } from "@okta/odyssey-react" ; import { Select as Source } from "../../../../odyssey-react/src" ; import SelectMdx from "./Select.mdx" ; const options = [ "Proxima Centauri" , "Barnard's Star" , "WISE 1049-5319" , "Wolf 359" , "Lalande21185LagrangeAlpha1978Lalande21185LagrangeAlpha1978" , "Sirius A" , "Sirius B" , ] ; export default { title : `Components/Select` , component : Source , parameters : { docs : { page : SelectMdx } } , args : { label : "Destination Star" , name : "star" } , argTypes : { hint : { control : "text" } , label : { control : "text" } , optionalLabel : { control : "text" } , required : { control : "boolean" } , disabled : { control : "boolean" } , name : { control : "text" } , onChange : { control : false } , value : { options : options , control : "select" } } } ; const Template = ( args ) => ( < Select { ... args } > { options . map ( ( option ) => ( < Select . Option key = { option } children = { option } value = { option } / > ) ) } < /Select>); export const Default = Template . bind ( { } ) ; Default . args = { } ; export const Disabled = Template . bind ( { } ) ; Disabled . args = { disabled : true } ; export const Optional = Template . bind ( { } ) ; Optional . args = { required : false , optionalLabel : "Optional" } ; export const Controlled = Template . bind ( { } ) ; Controlled . args = { value : options [ 3 ] } ; export const Multiple = Template . bind ( { } ) ; Multiple . args = { multiple : true } ; export const Group = ( args ) : ReactElement => ( < Select { ... args } > < Select . OptionGroup label = "Planets" > < Select . Option children = "Mars" / > < Select . Option children = "Mercury" / > < Select . Option children = "Venus" / > < /Select.OptionGroup> < Select . OptionGroup label = "Group B" > < Select . Option children = "Option 1" / > < Select . Option children = "Option 2" / > < /Select.OptionGroup> < /Select>);