121 lines
3.1 KiB
TypeScript
121 lines
3.1 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/nextjs'
|
|
import { useState } from 'react'
|
|
import CustomPopover from '.'
|
|
|
|
type PopoverContentProps = {
|
|
open?: boolean
|
|
onClose?: () => void
|
|
onClick?: () => void
|
|
title: string
|
|
description: string
|
|
}
|
|
|
|
const PopoverContent = ({ title, description, onClose }: PopoverContentProps) => {
|
|
return (
|
|
<div className="flex min-w-[220px] flex-col gap-2 p-3">
|
|
<div className="text-xs font-semibold uppercase tracking-[0.12em] text-text-tertiary">
|
|
{title}
|
|
</div>
|
|
<p className="text-sm leading-5 text-text-secondary">{description}</p>
|
|
<button
|
|
type="button"
|
|
className="self-start rounded-md border border-divider-subtle px-2 py-1 text-xs font-medium text-text-tertiary hover:bg-state-base-hover"
|
|
onClick={onClose}
|
|
>
|
|
Dismiss
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const Template = ({
|
|
trigger = 'hover',
|
|
position = 'bottom',
|
|
manualClose,
|
|
disabled,
|
|
}: {
|
|
trigger?: 'click' | 'hover'
|
|
position?: 'bottom' | 'bl' | 'br'
|
|
manualClose?: boolean
|
|
disabled?: boolean
|
|
}) => {
|
|
const [hoverHint] = useState(
|
|
trigger === 'hover'
|
|
? 'Hover over the badge to reveal quick tips.'
|
|
: 'Click the badge to open the contextual menu.',
|
|
)
|
|
|
|
return (
|
|
<div className="flex w-full max-w-lg flex-col gap-4 rounded-2xl border border-divider-subtle bg-components-panel-bg p-6">
|
|
<p className="text-sm text-text-secondary">{hoverHint}</p>
|
|
<div className="flex flex-wrap items-center gap-6">
|
|
<CustomPopover
|
|
trigger={trigger}
|
|
position={position}
|
|
manualClose={manualClose}
|
|
disabled={disabled}
|
|
btnElement={<span className="text-xs font-medium text-text-secondary">Popover trigger</span>}
|
|
htmlContent={
|
|
<PopoverContent
|
|
title={trigger === 'hover' ? 'Quick help' : 'More actions'}
|
|
description={trigger === 'hover'
|
|
? 'Use hover-triggered popovers for light contextual hints and inline docs.'
|
|
: 'Click-triggered popovers are ideal for menus that require user decisions.'}
|
|
/>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const meta = {
|
|
title: 'Base/Feedback/Popover',
|
|
component: Template,
|
|
parameters: {
|
|
layout: 'centered',
|
|
docs: {
|
|
description: {
|
|
component: 'Headless UI popover wrapper supporting hover and click triggers. These examples highlight alignment controls and manual closing.',
|
|
},
|
|
},
|
|
},
|
|
argTypes: {
|
|
trigger: {
|
|
control: 'radio',
|
|
options: ['hover', 'click'],
|
|
},
|
|
position: {
|
|
control: 'radio',
|
|
options: ['bottom', 'bl', 'br'],
|
|
},
|
|
manualClose: { control: 'boolean' },
|
|
disabled: { control: 'boolean' },
|
|
},
|
|
args: {
|
|
trigger: 'hover',
|
|
position: 'bottom',
|
|
manualClose: false,
|
|
disabled: false,
|
|
},
|
|
tags: ['autodocs'],
|
|
} satisfies Meta<typeof Template>
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const HoverPopover: Story = {}
|
|
|
|
export const ClickPopover: Story = {
|
|
args: {
|
|
trigger: 'click',
|
|
position: 'br',
|
|
},
|
|
}
|
|
|
|
export const DisabledState: Story = {
|
|
args: {
|
|
disabled: true,
|
|
},
|
|
}
|