All files / ButtonGroup ButtonGroup.stories.tsx

75% Statements 15/20
100% Branches 0/0
55.55% Functions 5/9
75% Lines 15/20

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 90 91 92 93 94 95 96 97 98 99 100 101 102 103                                          1x 1x 1x                 1x 1x   1x           1x                           1x 1x                               1x 1x 1x                       1x 1x       1x                      
import React, { useState } from 'react';
import _ from 'lodash';
import { Meta, Story } from '@storybook/react';
 
import ButtonGroup, { IButtonGroupProps } from './ButtonGroup';
 
export default {
	title: 'Controls/ButtonGroup',
	component: ButtonGroup,
	subcomponents: { 'ButtonGroup.Button': ButtonGroup.Button },
	args: ButtonGroup.defaultProps,
	parameters: {
		docs: {
			inlineStories: false,
			description: {
				component: ButtonGroup.peek.description,
			},
		},
	},
} as Meta;
 
export const Basic: Story<IButtonGroupProps> = (args) => {
	const buttonStyle = { width: '100px' };
	return (
		<ButtonGroup {...args}>
			<ButtonGroup.Button style={buttonStyle}>Smol</ButtonGroup.Button>
			<ButtonGroup.Button style={buttonStyle}>Lonnnnnnnng</ButtonGroup.Button>
			<ButtonGroup.Button style={buttonStyle}>Medium</ButtonGroup.Button>
		</ButtonGroup>
	);
};
 
export const Stateful: Story<IButtonGroupProps> = (args) => {
	const [selectedIndices, setSelectedIndices] = useState<number[]>([]);
 
	const handleSelect = (selectedIndex: number, { event, props }) => {
		const currentIndices = selectedIndices;
		// If the item does not exist in the original array add it, if it exists remove it.
		setSelectedIndices(_.xor(currentIndices, [selectedIndex]));
	};
 
	return (
		<ButtonGroup
			{...args}
			selectedIndices={selectedIndices}
			onSelect={handleSelect}
		>
			<ButtonGroup.Button>Zero</ButtonGroup.Button>
			<ButtonGroup.Button>One</ButtonGroup.Button>
			<ButtonGroup.Button>Two</ButtonGroup.Button>
			<ButtonGroup.Button>Three</ButtonGroup.Button>
		</ButtonGroup>
	);
};
 
export const Stateless: Story<IButtonGroupProps> = (args) => {
	return (
		<ButtonGroup {...args} selectedIndices={[7, 8]}>
			<ButtonGroup.Button>Zero</ButtonGroup.Button>
			<ButtonGroup.Button>One</ButtonGroup.Button>
			<ButtonGroup.Button>Two</ButtonGroup.Button>
			<ButtonGroup.Button>Three</ButtonGroup.Button>
			<ButtonGroup.Button>Four</ButtonGroup.Button>
			<ButtonGroup.Button isDisabled={true}>Five</ButtonGroup.Button>
			<ButtonGroup.Button>Six</ButtonGroup.Button>
			<ButtonGroup.Button>Seven</ButtonGroup.Button>
			<ButtonGroup.Button>Eight</ButtonGroup.Button>
			<ButtonGroup.Button>Nine</ButtonGroup.Button>
		</ButtonGroup>
	);
};
 
export const Disabled: Story<IButtonGroupProps> = (args) => {
	const buttonStyle = { width: '100px' };
	return (
		<ButtonGroup {...args}>
			<ButtonGroup.Button style={buttonStyle}>Zero</ButtonGroup.Button>
			<ButtonGroup.Button isDisabled={true} style={buttonStyle}>
				One
			</ButtonGroup.Button>
			<ButtonGroup.Button style={buttonStyle}>Two</ButtonGroup.Button>
			<ButtonGroup.Button style={buttonStyle}>Three</ButtonGroup.Button>
		</ButtonGroup>
	);
};
 
export const OnClick: Story<IButtonGroupProps> = (args) => {
	const handleClick = (label) => {
		alert(label);
	};
 
	return (
		<ButtonGroup {...args}>
			<ButtonGroup.Button onClick={() => handleClick('Zero')}>
				Zero
			</ButtonGroup.Button>
			<ButtonGroup.Button onClick={() => handleClick('One')}>
				One
			</ButtonGroup.Button>
		</ButtonGroup>
	);
};