@financial-times/n-conversion-forms/components/delivery-option.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 { DeliveryOption } from './delivery-option';

export default {
	title: 'Delivery Options',
	component: DeliveryOption,
	argTypes: {
		options: { control: 'array' },
		productCode: { control: 'text' },
		country: { control: 'text' },
	},
};

export const Basic = (args) => (
	<div className="ncf">
		<DeliveryOption {...args} />
	</div>
);
Basic.args = {
	country: 'GBR',
	options: [
		{
			value: 'PV',
			isValidDeliveryOption: true,
		},
		{
			value: 'HD',
			isValidDeliveryOption: true,
		},
		{
			value: 'EV',
			isValidDeliveryOption: true,
		},
	],
};

export const UKPaperVoucherAutoReniewingDeliveryOptions = (args) => (
	<div className="ncf">
		<DeliveryOption {...args} />
	</div>
);
UKPaperVoucherAutoReniewingDeliveryOptions.args = {
	country: 'GBR',
	options: [
		{
			value: 'PV',
			isValidDeliveryOption: true,
		},
	],
	isAutoRenewingSubscriptionTermType: true,
	isNonRenewingSubscriptionTermType: false,
};

export const UKPaperVoucherNonRenewingDeliveryOptions = (args) => (
	<div className="ncf">
		<DeliveryOption {...args} />
	</div>
);
UKPaperVoucherNonRenewingDeliveryOptions.args = {
	country: 'GBR',
	options: [
		{
			value: 'PV',
			isValidDeliveryOption: true,
		},
	],
	isAutoRenewingSubscriptionTermType: false,
	isNonRenewingSubscriptionTermType: true,
};

export const UnitedStates5or6DaysWeekDeliveryOptions = (args) => (
	<div className="ncf">
		<DeliveryOption {...args} />
	</div>
);
UnitedStates5or6DaysWeekDeliveryOptions.args = {
	options: [
		{
			value: 'HD',
			isValidDeliveryOption: true,
			deliveryOnPublicationDate: true,
			flightMarket: false,
			mailDelivery: false,
		},
		{
			value: 'HD',
			isValidDeliveryOption: true,
			deliveryOnPublicationDate: false,
			flightMarket: false,
			mailDelivery: true,
		},
	],
	country: 'USA',
	productCode: 'P2N6D',
};

export const UnitedStatesWeekendOnlyDeliveryOptions = (args) => (
	<div className="ncf">
		<DeliveryOption {...args} />
	</div>
);
UnitedStatesWeekendOnlyDeliveryOptions.args = {
	options: [
		{
			value: 'HD',
			isValidDeliveryOption: true,
			deliveryOnPublicationDate: false,
			flightMarket: false,
			mailDelivery: false,
		},
		{
			value: 'HD',
			isValidDeliveryOption: true,
			mailDelivery: true,
		},
	],
	country: 'USA',
	productCode: 'NWE',
};

export const JapanDeliveryOptions = (args) => (
	<div className="ncf">
		<DeliveryOption {...args} />
	</div>
);
JapanDeliveryOptions.args = {
	country: 'JPN',
	options: [
		{
			value: 'HD',
			isValidDeliveryOption: true,
		},
	],
};

export const LuxembourgDeliveryOptions = (args) => (
	<div className="ncf">
		<DeliveryOption {...args} />
	</div>
);
LuxembourgDeliveryOptions.args = {
	country: 'LUX',
	productCode: 'EPNWE',
	options: [
		{
			value: 'HD',
			isSelected: true,
			isValidDeliveryOption: true,
			deliveryOnPublicationDate: false,
			flightMarket: true,
			mailDelivery: false,
		},
	],
};