Milestone

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

import { Milestone } from './Milestone';
import { MilestoneList } from './MilestoneList';

const meta: Meta<typeof MilestoneList> = {
	tags: ['new-pattern', 'ready-for-dev'],
	title: 'Component Proposals/Milestones/Milestone List',
	component: MilestoneList,
	// The padding keeps the dots, which sit on the line, inside the canvas.
	decorators: [
		(Story) => (
			<div
				style={{
					maxWidth: 'calc(14 * var(--pds-spacing-4xl))',
					padding: 'var(--pds-spacing-l)',
					paddingInlineStart: 'var(--pds-spacing-2xl)',
				}}
			>
				{Story()}
			</div>
		),
	],
	parameters: {
		docs: {
			description: {
				component:
					'**New pattern:** not in PDS v2 today. A list of Milestones hung off one line that runs the full height of the list. It owns the list semantics, the spacing, the line and the card or flat look that its milestones follow.',
			},
		},
	},
	argTypes: {
		children: { control: false, table: { category: 'Content' } },
		className: { table: { category: 'Base attributes' } },
		subtitlePosition: {
			control: 'select',
			options: ['below', 'start'],
			table: { category: 'Component configuration' },
		},
		variant: {
			control: 'select',
			options: ['card', 'flat'],
			table: { category: 'Component configuration' },
		},
	},
	args: {
		subtitlePosition: 'below',
		variant: 'card',
	},
	render: (args) => (
		<MilestoneList {...args}>
			<Milestone subtitle='Spring 2022' title='Organize your info'>
				Before you start, you may want to make a list of all your senior year
				classes and extracurricular activities.
			</Milestone>
			<Milestone isActive subtitle='Summer 2022' title='Pick your campus'>
				You can apply to any campus using one app, and you’ll only pay one
				application fee.
			</Milestone>
			<Milestone subtitle='Fall 2022' title='Send your scores'>
				Ask your school to send your test scores before the deadline.
			</Milestone>
		</MilestoneList>
	),
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {};

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