import React from "react" ; import type { Story } from "@storybook/react" ; import { useEffect } from "react" ; import { Checkbox as Source } from "../../../../odyssey-react/src" ; import { Checkbox , CheckboxProps , ScreenReaderText } from "@okta/odyssey-react" ; import CheckboxMdx from "./Checkbox.mdx" ; export default { title : `Components/Checkbox` , component : Source , parameters : { docs : { page : CheckboxMdx } } , args : { label : "Checkbox label" , value : "checkbox_value" , error : ( < > < ScreenReaderText > Error : < /ScreenReaderText> Descriptive error text. < />) } , argTypes : { checked : { control : "boolean" } , disabled : { control : "boolean" } , id : { control : "text" } , indeterminate : { control : "boolean" } , name : { control : "text" } , onChange : { control : false } , required : { control : "boolean" } , value : { control : "text" } , error : { control : "text" } } } ; const Template = ( args ) => < Checkbox { ... args } / > ; export const Default = Template . bind ( { } ) ; export const Disabled = Template . bind ( { } ) ; Disabled . args = { disabled : true } ; export const Indeterminate = Template . bind ( { } ) ; Indeterminate . args = { indeterminate : true } ; export const Invalid = Template . bind ( { } ) ; Invalid . decorators = [ ( Story ) => { useEffect ( ( ) => window . document . querySelector ( "input" ) ?. setCustomValidity ( "oops" ) ) ; return < Story />; } , ] ;