import _ from 'lodash'; import React from 'react'; import createClass from 'create-react-class'; import { Meta, Story } from '@storybook/react'; import Button from '../Button/Button'; import ToolTip, { IToolTipProps, ToolTipDumb } from './ToolTip'; const { Target, Body } = ToolTip; export default { title: 'communication/ToolTip', component: ToolTip, parameters: { docs: { description: { component: ToolTip.peek.description, }, }, }, argTypes: { isCloseable: { type: { required: false } as any, control: { type: 'boolean' }, }, isLight: { control: { type: 'boolean' } }, onClose: { control: false }, onMouseOver: { control: false }, onMouseOut: { control: false }, flyOutMaxWidth: { default: { value: '200px' }, control: { type: 'text' } }, direction: { options: ['down', 'up', 'right', 'left'] }, alignment: { options: ['start', 'center', 'end'] }, isExpanded: { control: { type: 'boolean' } }, portalId: { control: { type: 'text' } }, Body: { control: false }, Title: { control: false }, Target: { control: false }, children: { control: false }, className: { control: { type: 'object' }, table: { category: 'Uncommon Props', }, }, style: { control: { type: 'object' }, table: { category: 'Uncommon Props', }, }, flyOutStyle: { control: { type: 'object' }, table: { category: 'Uncommon Props', }, }, }, args: ToolTip.defaultProps, } as Meta; export const Basic: Story = (args) => { return (
ToolTip is a utility component to create a transient message anchored to another component.
Example Target
); }; type Direction = 'right' | 'up' | 'down' | 'left'; type Alignment = 'start' | 'center' | 'end'; const directions: Direction[] = ['right', 'up', 'down', 'left']; const alignments: Alignment[] = ['start', 'center', 'end']; export const DirectionAndAlignmentVariants: Story = (args) => { return (
{_.map(directions, (direction) => (
{_.map(alignments, (alignment) => (
ToolTip: is a utility component to create a transient message anchored to another component. My direction is "{direction}". My alignment is "{alignment}".
Target {direction} {alignment}
))}
))}
); }; export const ToolTipWithButton: Story = (args) => { return (
ToolTip is a utility component to create a transient message anchored to another component.
Example Target
); }; /* Interactive */ export const Interactive: Story = (args) => { const { Target, Title, Body } = ToolTip; type Direction = 'right' | 'up' | 'down' | 'left'; type Alignment = 'start' | 'center' | 'end'; const directions: Direction[] = ['right', 'up', 'down', 'left']; const alignments: Alignment[] = ['start', 'center', 'end']; return (
{_.map(directions, (direction) => (
{_.map(alignments, (alignment) => (
Title: {direction} {alignment} ToolTip is a utility component to create a transient message anchored to another component. My direction is "{direction} ". My alignment is "{alignment}".
Target {direction} {alignment}
))}
))}
); }; /* Variants */ export const Variants: Story = ({ ...args }) => { const { Target, Title, Body } = ToolTipDumb; const Component = createClass({ getInitialState: () => ({ isExpanded: true }), render() { return (
ToolTip is a utility component to create a transient message anchored to another component.
No Title or Close Button
this.setState({ isExpanded: false })} isExpanded={this.state.isExpanded} > ToolTip is a utility component to create a transient message anchored to another component.
With Close Button
this.setState({ isExpanded: false })} isExpanded={this.state.isExpanded} > Title ToolTip is a utility component to create a transient message anchored to another component.
With Title and Close Button
ToolTip is a utility component to create a transient message anchored to another component.
No Title or Close Button
this.setState({ isExpanded: false })} isExpanded={this.state.isExpanded} > ToolTip is a utility component to create a transient message anchored to another component.
With Close Button
this.setState({ isExpanded: false })} isExpanded={this.state.isExpanded} > Title ToolTip is a utility component to create a transient message anchored to another component.
With Title and Close Button
); }, }); return ; }; /* Unchanging */ export const Unchanging: Story = (args) => { const { Target, Title, Body } = ToolTipDumb; return (
{_.map(['right', 'up', 'down', 'left'], (direction) => _.map(['start', 'center', 'end'], (alignment) => (
Title: {direction} {alignment} ToolTip is a utility component to create a transient message anchored to another component. My direction is "{direction} ". My alignment is "{alignment}".
Target {direction} {alignment}
)) )}
); };