Milestone

import { Meta, StoryObj } from '@storybook/react-vite';

import { Milestone } from './Milestone';
import {
	milestoneAboveArgs,
	milestoneSlotArgs,
	milestoneStoryArgs,
	milestoneStoryArgTypes,
	milestoneStoryDocs,
	MilestoneStoryArgs,
	MilestoneStoryExample,
	withMilestoneCanvas,
} from './milestone-story-shared';
import { MilestoneVariantsExample } from './MilestoneVariantsExample';

const meta: Meta<MilestoneStoryArgs> = {
	tags: ['new-pattern', 'ready-for-dev'],
	title: 'Component Proposals/Milestones/Milestone',
	component: Milestone,
	decorators: [withMilestoneCanvas],
	parameters: {
		docs: {
			description: {
				component:
					'**New pattern:** not in PDS v2 today. One milestone (a step in a sequence, with a heading and a body; for events that happened, use Timeline Item) in a Milestone List: a dot on the line, a title, a subtitle and a body, on a card (the default Panel) or flat. The controls on this page and on the Milestone List page are the same: each says which component the prop belongs to.',
			},
		},
	},
	argTypes: milestoneStoryArgTypes,
	args: milestoneStoryArgs,
	render: (args) => <MilestoneStoryExample args={args} />,
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

export const Flat: Story = {
	args: { variant: 'flat' },
	parameters: { docs: { description: { story: milestoneStoryDocs.flat } } },
};

// On a canvas under 480px wide (a phone) the subtitle falls back to below the title.
export const SubtitleAtStart: Story = {
	args: { subtitlePosition: 'start' },
	parameters: { docs: { description: { story: milestoneStoryDocs.start } } },
};

// The subtitle above the title, on cards and flat.
export const SubtitleAbove: Story = {
	args: milestoneAboveArgs,
	argTypes: { variant: { control: false } },
	parameters: { docs: { description: { story: milestoneStoryDocs.above } } },
	render: (args) => (
		<MilestoneVariantsExample>
			{(variant) => <MilestoneStoryExample args={args} variant={variant} />}
		</MilestoneVariantsExample>
	),
};

// `children` is a slot under the title. What goes in it is up to the screen.
export const Slot: Story = {
	args: milestoneSlotArgs,
	argTypes: { variant: { control: false } },
	parameters: { docs: { description: { story: milestoneStoryDocs.slot } } },
	render: (args) => (
		<MilestoneVariantsExample>
			{(variant) => <MilestoneStoryExample args={args} variant={variant} />}
		</MilestoneVariantsExample>
	),
};