98 lines
2.0 KiB
JavaScript
98 lines
2.0 KiB
JavaScript
import React from "react";
|
|
|
|
import Text from "../text";
|
|
import Link from "../link";
|
|
import HelpButton from ".";
|
|
|
|
export default {
|
|
title: "Components/HelpButton",
|
|
component: HelpButton,
|
|
subcomponents: { Text, Link },
|
|
argTypes: {},
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component: "HelpButton is used for a action on a page",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
const Template = (args) => {
|
|
return (
|
|
<>
|
|
<HelpButton {...args} />
|
|
</>
|
|
);
|
|
};
|
|
|
|
export const Default = Template.bind({});
|
|
Default.args = {
|
|
displayType: "auto",
|
|
offsetTop: 0,
|
|
offsetRight: 0,
|
|
offsetBottom: 0,
|
|
offsetLeft: 0,
|
|
tooltipContent: <Text fontSize="13px">Paste you tooltip content here</Text>,
|
|
};
|
|
|
|
const DropDownTemplate = (args) => {
|
|
return (
|
|
<HelpButton
|
|
displayType="dropdown"
|
|
offsetTop={0}
|
|
offsetRight={0}
|
|
offsetBottom={0}
|
|
offsetLeft={0}
|
|
tooltipContent={
|
|
<Text fontSize="13px">Paste you tooltip content here</Text>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const DropDownPosition = DropDownTemplate.bind({});
|
|
|
|
const AsideTemplate = (args) => {
|
|
return (
|
|
<HelpButton
|
|
displayType="aside"
|
|
helpButtonHeaderContent="Aside position HelpButton"
|
|
tooltipContent={
|
|
<Text>
|
|
You tooltip content with{" "}
|
|
<Link
|
|
isHovered={true}
|
|
href="http://localhost:6006/?path=/story/components-helpbutton--default"
|
|
>
|
|
link
|
|
</Link>
|
|
</Text>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const AsidePosition = AsideTemplate.bind({});
|
|
|
|
const AutoTemplate = (args) => {
|
|
return (
|
|
<HelpButton
|
|
displayType="auto"
|
|
helpButtonHeaderContent="Auto position HelpButton"
|
|
tooltipContent={
|
|
<>
|
|
<p>You can put every thing here</p>
|
|
<ul style={{ marginBottom: 0 }}>
|
|
<li>Word</li>
|
|
<li>Chart</li>
|
|
<li>Else</li>
|
|
</ul>
|
|
</>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const AutoPosition = AutoTemplate.bind({});
|