import { Meta , Story } from "@storybook/react" ; import React from "react" ; import { useActionBar } from "../ActionBar" ; import { Savebar , SavebarLabels , SavebarProps , SavebarTooltips , } from "./Savebar" ; const Wrapper = ( { children } ) => { const { anchor } = useActionBar ( ) ; return < div ref = { anchor } > { children } < /div>; } ; const labels = { confirm : "Confirm" , error : "Error" , cancel : "Cancel" , delete : "Delete" } ; const tooltips = { confirm : "Confirm text" , cancel : "Cancel text" , delete : "Delete text" } ; const props = { labels , disabled : false , onCancel : ( ) => undefined , onSubmit : ( ) => undefined , state : "default" } ; export const Default = ( ) => < Savebar { ... props } / > ; export const WithDelete = ( ) => ( < Savebar { ... props } onDelete = { ( ) => undefined } />); export const WithTooltips = ( ) => ( < div style = { { paddingTop : 50 } } > < Savebar { ... props } onDelete = { ( ) => undefined } tooltips = { tooltips } / > < /div>); export default { title : "Savebar" , decorators : [ ( Story ) => ( < Wrapper > < Story /> < /Wrapper>), ] } as Meta ;