@financial-times/n-conversion-forms/components/progress-indicator.stories.js

Containing jsx components and styles for forms included on Accounts and Acquisition apps (next-signup, next-profile, next-retention, etc).

import React from 'react';
import { ProgressIndicator } from './progress-indicator';

export default {
	title: 'Progress Indicator',
	component: ProgressIndicator,
};

export const Basic = (args) => <ProgressIndicator {...args} />;
Basic.args = {
	items: [
		{
			isComplete: true,
			isCurrent: false,
			name: 'Get Business',
			url: 'https://ft.com',
		},
		{
			isComplete: false,
			isCurrent: true,
			name: '????',
			url: 'https://google.com',
		},
		{
			isComplete: false,
			isCurrent: false,
			name: 'Profit',
			url: 'https://ft.com',
		},
	],
};

export const WithLinksDisabled = (args) => <ProgressIndicator {...args} />;
WithLinksDisabled.args = {
	items: [
		{
			isComplete: true,
			isCurrent: false,
			name: 'Get Business',
			url: 'https://ft.com',
		},
		{
			isComplete: true,
			isCurrent: true,
			name: '????',
			url: 'https://google.com',
		},
		{
			isComplete: false,
			isCurrent: false,
			name: 'Profit',
			url: 'https://ft.com',
		},
	],
	disableLinks: true,
};