@financial-times/n-conversion-forms/components/region-selector.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 { RegionSelector } from './region-selector';

export default {
	title: 'Region Selector',
	component: RegionSelector,
	argTypes: {
		country: { control: 'radio', options: ['USA', 'CAN', 'IND'] },
		hasError: { control: 'boolean' },
		isHidden: { control: 'boolean' },
		isBillingSelector: { control: 'boolean' },
		isDisabled: { control: 'boolean' },
		region: { control: 'text' },
		fieldId: { control: 'text' },
		selectId: { control: 'text' },
		label: { control: 'text' },
		value: { control: 'text' },
	},
	parameters: {
		docs: {
			description: {
				component: `
The \`RegionSelector\` component is used to select regions (states, provinces, etc.) based on the selected country. It supports dynamic naming and labeling based on the provided props.

### Props
- **country**: The country code (e.g., 'USA', 'CAN', 'IND') to determine the list of regions.
- **value**: The selected value for the region.
- **fieldId**: Custom ID for the field label. If not provided, it defaults to \`\${region}Field\`.
- **selectId**: Custom ID for the select element. If not provided, it defaults to \`region\`.
- **label**: Custom label for the field. If not provided, it defaults to the region label based on the country.
- **hasError**: Boolean to indicate if the field has an error.
- **isHidden**: Boolean to indicate if the field should be hidden.
- **isBillingState**: Boolean to indicate if the field is for billing purposes. Adds 'Billing' prefix to the label.
- **isDisabled**: Boolean to indicate if the field should be disabled.
- **region**: Custom region name (e.g., 'state', 'province'). If not provided, it defaults to the country's default region.

### Dynamic Logic
- **Dynamic Label**: The label is constructed based on the \`label\` prop, the country's default label, and whether it is a billing field.
- **Dynamic IDs and Names**: The \`fieldId\`, \`selectId\`, and \`name\` attributes are dynamically generated based on the \`region\` prop or the country's default region. If \`fieldId\` and \`selectId\` are provided, they are used directly.

						`,
			},
		},
	},
};

export const Basic = (args) => <RegionSelector {...args} />;
Basic.args = {
	country: 'USA',
	value: '',
	hasError: false,
	isHidden: false,
	isBillingSelector: false,
	isDisabled: false,
	region: '',
	fieldId: '',
	selectId: '',
	label: '',
};

export const BillingState = Basic.bind({});
BillingState.args = {
	...Basic.args,
	isBillingSelector: true,
};

export const CustomRegion = Basic.bind({});
CustomRegion.args = {
	...Basic.args,
	region: 'province',
};

export const CustomFieldIdAndSelectId = Basic.bind({});
CustomFieldIdAndSelectId.args = {
	...Basic.args,
	fieldId: 'customFieldId',
	selectId: 'customSelectId',
};

export const CustomLabel = Basic.bind({});
CustomLabel.args = {
	...Basic.args,
	label: 'Custom Label',
};