126 lines
2.5 KiB
TypeScript
126 lines
2.5 KiB
TypeScript
// Copyright 2020 Signal Messenger, LLC
|
|
// SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
import * as React from 'react';
|
|
import type { Meta } from '@storybook/react';
|
|
import type { PropsType } from './Tooltip';
|
|
import { Tooltip, TooltipPlacement } from './Tooltip';
|
|
import { Theme } from '../util/theme';
|
|
|
|
export default {
|
|
title: 'Components/Tooltip',
|
|
argTypes: {
|
|
content: { control: { type: 'text' } },
|
|
direction: {
|
|
control: { type: 'select' },
|
|
options: Object.values(TooltipPlacement),
|
|
},
|
|
sticky: { control: { type: 'boolean' } },
|
|
theme: {
|
|
control: { type: 'select' },
|
|
options: Object.keys(Theme),
|
|
mappings: Theme,
|
|
},
|
|
},
|
|
args: {
|
|
content: 'Hello World',
|
|
direction: TooltipPlacement.Top,
|
|
sticky: false,
|
|
},
|
|
decorators: [
|
|
(Story): JSX.Element => {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
height: '100vh',
|
|
}}
|
|
>
|
|
<Story />
|
|
</div>
|
|
);
|
|
},
|
|
],
|
|
} satisfies Meta<PropsType>;
|
|
|
|
const Trigger = (
|
|
<span
|
|
style={{
|
|
display: 'inline-block',
|
|
background: '#eee',
|
|
padding: 20,
|
|
borderRadius: 4,
|
|
}}
|
|
>
|
|
Trigger
|
|
</span>
|
|
);
|
|
|
|
export function Top(args: PropsType): JSX.Element {
|
|
return (
|
|
<Tooltip {...args} direction={TooltipPlacement.Top}>
|
|
{Trigger}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export function Right(args: PropsType): JSX.Element {
|
|
return (
|
|
<Tooltip {...args} direction={TooltipPlacement.Right}>
|
|
{Trigger}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export function Bottom(args: PropsType): JSX.Element {
|
|
return (
|
|
<Tooltip {...args} direction={TooltipPlacement.Bottom}>
|
|
{Trigger}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export function Left(args: PropsType): JSX.Element {
|
|
return (
|
|
<Tooltip {...args} direction={TooltipPlacement.Left}>
|
|
{Trigger}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export function Sticky(args: PropsType): JSX.Element {
|
|
return (
|
|
<Tooltip {...args} sticky>
|
|
{Trigger}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export function WithAppliedPopperModifiers(args: PropsType): JSX.Element {
|
|
return (
|
|
<Tooltip
|
|
{...args}
|
|
direction={TooltipPlacement.Bottom}
|
|
popperModifiers={[
|
|
{
|
|
name: 'offset',
|
|
options: {
|
|
offset: [80, 80],
|
|
},
|
|
},
|
|
]}
|
|
>
|
|
{Trigger}
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
export function DarkTheme(args: PropsType): JSX.Element {
|
|
return (
|
|
<Tooltip {...args} sticky theme={Theme.Dark}>
|
|
{Trigger}
|
|
</Tooltip>
|
|
);
|
|
}
|