All files / RadioButton RadioButton.stories.tsx

83.33% Statements 10/12
100% Branches 0/0
60% Functions 3/5
83.33% Lines 10/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89                                        1x 1x           1x   1x       1x                                 1x 1x         1x   1x                                                       1x    
import _ from 'lodash';
import React, { useState } from 'react';
import createClass from 'create-react-class';
import { Meta, Story } from '@storybook/react';
 
import RadioButton, { IRadioButtonProps } from './RadioButton';
 
export default {
	title: 'Controls/RadioButton',
	component: RadioButton,
	parameters: {
		docs: {
			description: {
				component: (RadioButton as any).peek.description,
			},
		},
	},
} as Meta;
 
/* Interactive */
export const Interactive: Story<IRadioButtonProps> = (args) => {
	const style = {
		listStyleType: 'none',
		display: 'flex',
		alignItems: 'center',
	};
 
	const [selected, setSelected] = useState(false);
 
	const handleSelected = (value) => {
		setSelected(!value);
	};
 
	return (
		<ul>
			<li style={style}>
				<label>Enabled</label>
				<RadioButton
					{...args}
					isSelected={selected}
					name='interactive-radio-buttons'
					onSelect={() => handleSelected(selected)}
					tabIndex={20}
				/>
			</li>
		</ul>
	);
};
 
/* States */
export const States: Story<IRadioButtonProps> = (args) => {
	const style = {
		display: 'flex',
		alignItems: 'center',
	};
 
	const Component = createClass({
		render() {
			return (
				<ul>
					<li style={style}>
						<label>Unselected</label>
						<RadioButton {...args} tabIndex={20} />
					</li>
					<li style={style}>
						<label>Selected</label>
						<RadioButton {...args} isSelected={true} tabIndex={21} />
					</li>
					<li style={style}>
						<label>Disabled</label>
						<RadioButton {...args} isDisabled={true} tabIndex={22} />
					</li>
					<li style={style}>
						<label>Disabled & selected</label>
						<RadioButton
							{...args}
							isDisabled={true}
							isSelected={true}
							tabIndex={23}
						/>
					</li>
				</ul>
			);
		},
	});
 
	return <Component />;
};