import React from "react" ; import { Story } from "@storybook/react" ; import { Button as Source } from "../../../../odyssey-react/src" ; import { Button , ButtonProps , CloseIcon , SettingsIcon , } from "@okta/odyssey-react" ; import { ThemeProvider } from "@okta/odyssey-react-theme" ; import ButtonMdx from "./Button.mdx" ; export default { title : `Components/Button` , component : Source , parameters : { docs : { page : ButtonMdx } } , argTypes : { children : { control : "text" , defaultValue : "Button label" } , disabled : { control : "boolean" } , wide : { control : "boolean" } } } ; const Template = ( props ) => < Button { ... props } / > ; export const Primary = Template . bind ( { } ) ; Primary . args = { variant : "primary" } ; export const Secondary = Template . bind ( { } ) ; Secondary . args = { variant : "secondary" } ; export const Danger = Template . bind ( { } ) ; Danger . args = { variant : "danger" } ; export const Clear = Template . bind ( { } ) ; Clear . args = { variant : "clear" } ; export const Dismiss = Template . bind ( { } ) ; Dismiss . args = { variant : "dismiss" , icon : < CloseIcon />, children : undefined } ; export const Small = Template . bind ( { } ) ; Small . args = { size : "s" } ; export const Medium = Template . bind ( { } ) ; Medium . args = { size : "m" } ; export const Large = Template . bind ( { } ) ; Large . args = { size : "l" } ; export const Wide = Template . bind ( { } ) ; Wide . args = { wide : true } ; export const WithIcon = Template . bind ( { } ) ; WithIcon . args = { icon : < SettingsIcon /> } ; export const IconOnly = Template . bind ( { } ) ; IconOnly . args = { icon : < SettingsIcon />, children : undefined } ; export const Theme = ( props ) => { const { ColorBackgroundPrimary , ColorBackgroundSecondary , ... rest } = props ; return ( < ThemeProvider theme = { { [ Button . theme ] : { ColorBackgroundPrimary , ColorBackgroundSecondary } } } > < Button { ... rest } / > < /ThemeProvider>); } ; Theme . argTypes = { ColorBackgroundPrimary : { name : "primary background" , defaultValue : "#1662dd" , type : "string" , control : "color" } , ColorBackgroundSecondary : { name : "secondary background" , defaultValue : "#fff" , type : "string" , control : "color" } } ;