History

Kelly Dwan d36511479e Docs Project: Add documentation parser + inline documentation (https://github.com/woocommerce/woocommerce-admin/pull/336 ) * Switch all components to default exports This ensures we can read all components for documentation generation (plus, standardizing is good) * Add documentation to component file * Fix table exports * Move readme docs into inline docs Includes updating new props, adding prop shapes * Add doc-generation scripts to pull exported component docs into folder * Remove key propType, causing react special-keys warning * Fix proptype * Update incorrect comment * Remove template import, we can just use string concat * Fix typo, update docs		2018-08-31 13:27:21 -04:00
..
README.md	Merge pull request woocommerce/woocommerce-admin#63 from woocommerce/add/segmented-selection	2018-05-24 11:19:21 +12:00
index.js	Docs Project: Add documentation parser + inline documentation (https://github.com/woocommerce/woocommerce-admin/pull/336 )	2018-08-31 13:27:21 -04:00
style.scss	Segmented-selection: remove focus outline in favor of inset box-shadow	2018-08-30 08:21:59 +12:00

README.md

Segmented Selection

Create a panel of styled selectable options rendering stylized checkboxes and labels

Usage

const Numbers = () => {
	return (
		<SegmentedSelection
			options={ [
				{ value: 'one', label: 'One' },
				{ value: 'two', label: 'Two' },
				{ value: 'three', label: 'Three' },
				{ value: 'four', label: 'Four' },
			] }
			selected={ 'two' }
			legend="Select a number"
			onSelect={ data => { /* manipulate data here */ } }
			name="numbers"
		/>
	);
}

Props

Required props are marked with *.

Name	Type	Default	Description
`className`	`string`	none	Additional classNames
`name`*	`string`	none	This will be the key in the key and value arguments supplied to `onSelect`
`legend`*	`string`	none	Create a legend visible to screen readers
`options`*	`array`	none	An Array of options to render. The array needs to be composed of objects with properties `label` and `value`.
`selected`	`string`	none	Value of selected item
`onSelect`*	`function`	none	Callback to be executed after selection