lucid-ui
Version:
A UI component library from Xandr.
218 lines • 11.3 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import Button from '../Button/Button';
import ToolTip, { 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 },
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,
};
export const Basic = (args) => {
return (React.createElement("section", { style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
} },
React.createElement(ToolTip, { ...args },
React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
React.createElement(Target, null,
React.createElement("div", null, "Example Target")))));
};
const directions = ['right', 'up', 'down', 'left'];
const alignments = ['start', 'center', 'end'];
export const DirectionAndAlignmentVariants = (args) => {
return (React.createElement("section", { style: { display: 'flex', flexDirection: 'row' } }, _.map(directions, (direction) => (React.createElement("section", { key: direction, style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1,
} }, _.map(alignments, (alignment) => (React.createElement("section", { key: `${direction}${alignment}`, style: { margin: '30px' } },
React.createElement(ToolTip, { ...args, direction: direction, alignment: alignment },
React.createElement(Body, null,
"ToolTip: is a utility component to create a transient message anchored to another component. My direction is \"",
direction,
"\". My alignment is \"",
alignment,
"\"."),
React.createElement(Target, null,
React.createElement("div", null,
"Target ",
direction,
" ",
alignment)))))))))));
};
export const ToolTipWithButton = (args) => {
return (React.createElement("section", { style: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
} },
React.createElement(ToolTip, { ...args },
React.createElement(Body, null,
"ToolTip is a utility component to create a transient message anchored to another component.",
React.createElement(Button, { kind: 'primary' }, "View Results")),
React.createElement(Target, null,
React.createElement("div", null, "Example Target")))));
};
/* Interactive */
export const Interactive = (args) => {
const { Target, Title, Body } = ToolTip;
const directions = ['right', 'up', 'down', 'left'];
const alignments = ['start', 'center', 'end'];
return (React.createElement("section", { style: { display: 'flex', flexDirection: 'row' } }, _.map(directions, (direction) => (React.createElement("section", { key: direction, style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
flexGrow: 1,
} }, _.map(alignments, (alignment) => (React.createElement("section", { key: `${direction}${alignment}`, style: { margin: '30px' } },
React.createElement(ToolTip, { ...args, direction: direction, alignment: alignment },
React.createElement(Title, null,
"Title: ",
direction,
" ",
alignment),
React.createElement(Body, null,
"ToolTip is a utility component to create a transient message anchored to another component. My direction is \"",
direction,
"\". My alignment is \"",
alignment,
"\"."),
React.createElement(Target, null,
React.createElement("div", null,
"Target ",
direction,
" ",
alignment)))))))))));
};
/* Variants */
export const Variants = ({ ...args }) => {
const { Target, Title, Body } = ToolTipDumb;
const Component = createClass({
getInitialState: () => ({ isExpanded: true }),
render() {
return (React.createElement("section", { style: {
display: 'flex',
flexDirection: 'column',
} },
React.createElement("section", { style: {
marginTop: 150,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
} },
React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
React.createElement(ToolTipDumb, { ...args, isExpanded: this.state.isExpanded },
React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
React.createElement(Target, null,
React.createElement("div", null, "No Title or Close Button")))),
React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
React.createElement(ToolTipDumb, { isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded },
React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
React.createElement(Target, null,
React.createElement("div", null, "With Close Button")))),
React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
React.createElement(ToolTipDumb, { isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded },
React.createElement(Title, null, "Title"),
React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
React.createElement(Target, null,
React.createElement("div", null, "With Title and Close Button"))))),
React.createElement("section", { style: {
marginTop: 150,
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-around',
} },
React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
React.createElement(ToolTipDumb, { isLight: true, isExpanded: this.state.isExpanded },
React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
React.createElement(Target, null,
React.createElement("div", null, "No Title or Close Button")))),
React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
React.createElement(ToolTipDumb, { isLight: true, isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded },
React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
React.createElement(Target, null,
React.createElement("div", null, "With Close Button")))),
React.createElement("div", { style: { marginTop: 60, marginBottom: 60 } },
React.createElement(ToolTipDumb, { isLight: true, isCloseable: true, onClose: () => this.setState({ isExpanded: false }), isExpanded: this.state.isExpanded },
React.createElement(Title, null, "Title"),
React.createElement(Body, null, "ToolTip is a utility component to create a transient message anchored to another component."),
React.createElement(Target, null,
React.createElement("div", null, "With Title and Close Button")))))));
},
});
return React.createElement(Component, null);
};
/* Unchanging */
export const Unchanging = (args) => {
const { Target, Title, Body } = ToolTipDumb;
return (React.createElement("section", { style: {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
} }, _.map(['right', 'up', 'down', 'left'], (direction) => _.map(['start', 'center', 'end'], (alignment) => (React.createElement("section", { key: `${direction}${alignment}`, style: { margin: '90px' } },
React.createElement(ToolTipDumb, { ...args, direction: direction, alignment: alignment, isExpanded: true },
React.createElement(Title, null,
"Title: ",
direction,
" ",
alignment),
React.createElement(Body, null,
"ToolTip is a utility component to create a transient message anchored to another component. My direction is \"",
direction,
"\". My alignment is \"",
alignment,
"\"."),
React.createElement(Target, null,
React.createElement("div", null,
"Target ",
direction,
" ",
alignment)))))))));
};
//# sourceMappingURL=ToolTip.stories.js.map