import React from "react" ; import { Story } from "@storybook/react" ; import { Infobox , InfoboxProps , Link } from "@okta/odyssey-react" ; import { Infobox as Source } from "../../../../odyssey-react/src" ; import InfoboxMdx from "./Infobox.mdx" ; export default { title : `Components/Infobox` , component : Source , parameters : { docs : { page : InfoboxMdx } } , argTypes : { children : { control : { type : null } } , title : { defaultValue : "Infobox title" , control : { type : "text" } } } } ; const content = "An infobox is a type of alert that provides feedback in response to a user action or system activity." ; const actions = ( < Link href = "https://ww.okta.com" variant = "secondary" > Link to associated action < /Link>); const Template = ( { title , variant } ) => ( < Infobox title = { title } variant = { variant } content = { content } actions = { actions } / > ) ; export const Info = Template . bind ( { } ) ; Info . args = { variant : "info" } ; export const Danger = Template . bind ( { } ) ; Danger . args = { variant : "danger" } ; export const Caution = Template . bind ( { } ) ; Caution . args = { variant : "caution" } ; export const Success = Template . bind ( { } ) ; Success . args = { variant : "success" } ;