@wordpress/components 19.12.0 → 19.15.0

package/src/form-token-field/stories/index.js

@@ -1,102 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FormTokenField from '../';
-
-export default {
-	title: 'Components/FormTokenField',
-	component: FormTokenField,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const continents = [
-	'Africa',
-	'America',
-	'Antarctica',
-	'Asia',
-	'Europe',
-	'Oceania',
-];
-
-const getKnobs = () => ( {
-	showHowTo: boolean( 'Show how to instructions', true ),
-	expandOnFocus: boolean( 'Expand on focus', false ),
-	placeholder: text( 'Placeholder', '' ),
-	enableValidation: boolean( 'Validate that value is in suggestions', false ),
-} );
-
-const FormTokenFieldExample = () => {
-	const knobs = getKnobs();
-	const [ selectedContinents, setSelectedContinents ] = useState( [] );
-
-	return (
-		<FormTokenField
-			value={ selectedContinents }
-			suggestions={ continents }
-			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
-			label="Type a continent"
-			placeholder={ knobs.placeholder }
-			__experimentalExpandOnFocus={ knobs.expandOnFocus }
-			__experimentalShowHowTo={ knobs.showHowTo }
-			__experimentalValidateInput={
-				knobs.enableValidation
-					? ( newValue ) => continents.includes( newValue )
-					: () => true
-			}
-		/>
-	);
-};
-
-export const _default = () => {
-	return <FormTokenFieldExample />;
-};
-
-const FormTokenFieldAsyncExample = () => {
-	const knobs = getKnobs();
-	const [ selectedContinents, setSelectedContinents ] = useState( [] );
-	const [ availableContinents, setAvailableContinents ] = useState( [] );
-	const searchContinents = ( input ) => {
-		const timeout = setTimeout( () => {
-			const available = continents.filter( ( continent ) =>
-				continent.toLowerCase().includes( input.toLowerCase() )
-			);
-			setAvailableContinents( available );
-		}, 1000 );
-
-		return () => clearTimeout( timeout );
-	};
-
-	return (
-		<FormTokenField
-			value={ selectedContinents }
-			suggestions={ availableContinents }
-			onChange={ ( tokens ) => setSelectedContinents( tokens ) }
-			onInputChange={ searchContinents }
-			label="Type a continent"
-			placeholder={ knobs.placeholder }
-			__experimentalExpandOnFocus={ knobs.expandOnFocus }
-			__experimentalShowHowTo={ knobs.showHowTo }
-			__experimentalValidateInput={
-				knobs.enableValidation
-					? ( newValue ) => continents.includes( newValue )
-					: () => true
-			}
-		/>
-	);
-};
-
-export const _async = () => {
-	return <FormTokenFieldAsyncExample />;
-};

package/src/form-token-field/test/lib/token-field-wrapper.js

@@ -1,56 +0,0 @@
-/**
- * External dependencies
- */
-import { unescape } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import fixtures from './fixtures';
-import TokenField from '../../';
-
-const {
-	specialSuggestions: { default: suggestions },
-} = fixtures;
-
-function unescapeAndFormatSpaces( str ) {
-	const nbsp = String.fromCharCode( 160 );
-	return unescape( str ).replace( / /g, nbsp );
-}
-
-class TokenFieldWrapper extends Component {
-	constructor() {
-		super( ...arguments );
-		this.state = {
-			tokenSuggestions: suggestions,
-			tokens: Object.freeze( [ 'foo', 'bar' ] ),
-			isExpanded: false,
-		};
-		this.onTokensChange = this.onTokensChange.bind( this );
-	}
-
-	render() {
-		return (
-			<TokenField
-				suggestions={
-					this.state.isExpanded ? this.state.tokenSuggestions : null
-				}
-				value={ this.state.tokens }
-				displayTransform={ unescapeAndFormatSpaces }
-				onChange={ this.onTokensChange }
-				{ ...this.props }
-			/>
-		);
-	}
-
-	onTokensChange( value ) {
-		this.setState( { tokens: value } );
-	}
-}
-
-export default TokenFieldWrapper;

package/src/form-token-field/token-input.js

@@ -1,81 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-class TokenInput extends Component {
-	constructor() {
-		super( ...arguments );
-		this.onChange = this.onChange.bind( this );
-		this.bindInput = this.bindInput.bind( this );
-	}
-
-	focus() {
-		this.input.focus();
-	}
-
-	hasFocus() {
-		return this.input === this.input.ownerDocument.activeElement;
-	}
-
-	bindInput( ref ) {
-		this.input = ref;
-	}
-
-	onChange( event ) {
-		this.props.onChange( {
-			value: event.target.value,
-		} );
-	}
-
-	render() {
-		const {
-			value,
-			isExpanded,
-			instanceId,
-			selectedSuggestionIndex,
-			className,
-			onChange,
-			...props
-		} = this.props;
-		const size = value ? value.length + 1 : 0;
-
-		return (
-			<input
-				ref={ this.bindInput }
-				id={ `components-form-token-input-${ instanceId }` }
-				type="text"
-				{ ...props }
-				value={ value || '' }
-				onChange={ onChange ? this.onChange : undefined }
-				size={ size }
-				className={ classnames(
-					className,
-					'components-form-token-field__input'
-				) }
-				autoComplete="off"
-				role="combobox"
-				aria-expanded={ isExpanded }
-				aria-autocomplete="list"
-				aria-owns={
-					isExpanded
-						? `components-form-token-suggestions-${ instanceId }`
-						: undefined
-				}
-				aria-activedescendant={
-					selectedSuggestionIndex !== -1
-						? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
-						: undefined
-				}
-				aria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }
-			/>
-		);
-	}
-}
-
-export default TokenInput;

package/src/grid/stories/index.js

@@ -1,49 +0,0 @@
-/**
- * External dependencies
- */
-import { number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { Grid } from '..';
-
-export default {
-	component: Grid,
-	title: 'Components (Experimental)/Grid',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const Item = ( props ) => (
-	<View
-		style={ {
-			borderRadius: 8,
-			background: '#eee',
-			padding: 8,
-			textAlign: 'center',
-		} }
-		{ ...props }
-	/>
-);
-
-export const _default = () => {
-	const props = {
-		columns: number( 'columns', 4 ),
-		gap: number( 'gap', 2 ),
-	};
-	return (
-		<Grid alignment="bottom" { ...props }>
-			<Item>One</Item>
-			<Item>Two</Item>
-			<Item>Three</Item>
-			<Item>Four</Item>
-			<Item>Five</Item>
-			<Item>Six</Item>
-			<Item>Seven</Item>
-			<Item>Eight</Item>
-		</Grid>
-	);
-};

package/src/h-stack/stories/index.js

@@ -1,22 +0,0 @@
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { HStack } from '..';
-
-export default {
-	component: HStack,
-	title: 'Components (Experimental)/HStack',
-};
-
-export const _default = () => {
-	return (
-		<HStack spacing={ 3 }>
-			<View>One</View>
-			<View>Two</View>
-			<View>Three</View>
-			<View>Four</View>
-			<View>Five</View>
-		</HStack>
-	);
-};

package/src/heading/test/index.js

@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Heading } from '../';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render( <Heading>Code is Poetry</Heading> );
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render level as a number', () => {
-		const { container } = render(
-			<Heading level={ 4 }>Code is Poetry</Heading>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render level as a string', () => {
-		const { container } = render(
-			<Heading level="4">Code is Poetry</Heading>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should allow as prop', () => {
-		const { container } = render(
-			<Heading level="1" as="span">
-				Code is Poetry
-			</Heading>
-		);
-		expect( container.firstChild.tagName ).toBe( 'SPAN' );
-	} );
-
-	test( 'should render a11y props when not using a semantic element', () => {
-		const { container } = render(
-			<Heading level="3" as="div">
-				Code is Poetry
-			</Heading>
-		);
-		expect( container.firstChild.getAttribute( 'role' ) ).toBe( 'heading' );
-		expect( container.firstChild.getAttribute( 'aria-level' ) ).toBe( '3' );
-	} );
-
-	test( 'should not render a11y props when using a semantic element', () => {
-		const { container } = render(
-			<Heading level="1" as="h4">
-				Code is Poetry
-			</Heading>
-		);
-		expect( container.firstChild.getAttribute( 'role' ) ).toBeNull();
-		expect( container.firstChild.getAttribute( 'aria-level' ) ).toBeNull();
-	} );
-} );

package/src/radio-control/index.js

@@ -1,69 +0,0 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { useInstanceId } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import BaseControl from '../base-control';
-
-export default function RadioControl( {
-	label,
-	className,
-	selected,
-	help,
-	onChange,
-	hideLabelFromVision,
-	options = [],
-	...props
-} ) {
-	const instanceId = useInstanceId( RadioControl );
-	const id = `inspector-radio-control-${ instanceId }`;
-	const onChangeValue = ( event ) => onChange( event.target.value );
-
-	return (
-		! isEmpty( options ) && (
-			<BaseControl
-				label={ label }
-				id={ id }
-				hideLabelFromVision={ hideLabelFromVision }
-				help={ help }
-				className={ classnames(
-					className,
-					'components-radio-control'
-				) }
-			>
-				{ options.map( ( option, index ) => (
-					<div
-						key={ `${ id }-${ index }` }
-						className="components-radio-control__option"
-					>
-						<input
-							id={ `${ id }-${ index }` }
-							className="components-radio-control__input"
-							type="radio"
-							name={ id }
-							value={ option.value }
-							onChange={ onChangeValue }
-							checked={ option.value === selected }
-							aria-describedby={
-								!! help ? `${ id }__help` : undefined
-							}
-							{ ...props }
-						/>
-						<label htmlFor={ `${ id }-${ index }` }>
-							{ option.label }
-						</label>
-					</div>
-				) ) }
-			</BaseControl>
-		)
-	);
-}

package/src/radio-control/stories/index.js

@@ -1,41 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import RadioControl from '../';
-
-export default { title: 'Components/RadioControl', component: RadioControl };
-
-const RadioControlWithState = ( props ) => {
-	const [ option, setOption ] = useState( 'public' );
-
-	return (
-		<RadioControl { ...props } selected={ option } onChange={ setOption } />
-	);
-};
-
-const options = [
-	{ label: 'Public', value: 'public' },
-	{ label: 'Private', value: 'private' },
-	{ label: 'Password Protected', value: 'password' },
-];
-
-export const _default = () => {
-	return (
-		<RadioControlWithState label="Post visibility" options={ options } />
-	);
-};
-
-export const withHelp = () => {
-	return (
-		<RadioControlWithState
-			help="The visibility level for the current post"
-			label="Post visibility"
-			options={ options }
-		/>
-	);
-};

package/src/range-control/stories/index.js

@@ -1,180 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { styles, wordpress } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import RangeControl from '../index';
-
-const ICONS = { styles, wordpress };
-
-export default {
-	title: 'Components/RangeControl',
-	component: RangeControl,
-	argTypes: {
-		afterIcon: {
-			control: { type: 'select' },
-			options: Object.keys( ICONS ),
-			mapping: ICONS,
-		},
-		allowReset: { control: { type: 'boolean' } },
-		beforeIcon: {
-			control: { type: 'select' },
-			options: Object.keys( ICONS ),
-			mapping: ICONS,
-		},
-		color: { control: { type: 'color' } },
-		disabled: { control: { type: 'boolean' } },
-		help: { control: { type: 'text' } },
-		initialPosition: { control: { type: 'number' } },
-		marks: { control: { type: 'object' } },
-		min: { control: { type: 'number' } },
-		max: { control: { type: 'number' } },
-		railColor: { control: { type: 'color' } },
-		showTooltip: { control: { type: 'boolean' } },
-		step: { control: { type: 'number' } },
-		trackColor: { control: { type: 'color' } },
-		withInputField: { control: { type: 'boolean' } },
-	},
-	parameters: {
-		docs: { source: { state: 'open' } },
-	},
-};
-
-const RangeControlWithState = ( props ) => {
-	const [ value, setValue ] = useState();
-
-	return <RangeControl { ...props } value={ value } onChange={ setValue } />;
-};
-
-export const Default = RangeControlWithState.bind( {} );
-Default.args = {
-	label: 'Range label',
-};
-
-/**
- * The `initialPosition` prop sets the starting position of the slider when no `value` is provided.
- */
-export const InitialValueZero = RangeControlWithState.bind( {} );
-InitialValueZero.args = {
-	...Default.args,
-	initialPosition: 0,
-	max: 20,
-};
-
-/**
- * Setting the `step` prop to `"any"` will allow users to select non-integer values.
- * This also overrides both `withInputField` and `showTooltip` props to `false`.
- */
-export const WithAnyStep = ( props ) => {
-	const [ value, setValue ] = useState( 1.2345 );
-
-	return (
-		<>
-			<RangeControl value={ value } onChange={ setValue } { ...props } />
-			<p>Current value: { value }</p>
-		</>
-	);
-};
-WithAnyStep.args = {
-	label: 'Brightness',
-	step: 'any',
-};
-
-export const WithHelp = RangeControlWithState.bind( {} );
-WithHelp.args = {
-	...Default.args,
-	label: 'How many columns should this use?',
-	help: 'Please select the number of columns you would like this to contain.',
-};
-
-/**
- * Set `min` and `max` values to constrain the range of allowed values.
- */
-export const WithMinimumAndMaximumLimits = RangeControlWithState.bind( {} );
-WithMinimumAndMaximumLimits.args = {
-	...Default.args,
-	min: 2,
-	max: 10,
-};
-
-export const WithIconBefore = RangeControlWithState.bind( {} );
-WithIconBefore.args = {
-	...Default.args,
-	beforeIcon: wordpress,
-};
-
-export const WithIconAfter = RangeControlWithState.bind( {} );
-WithIconAfter.args = {
-	...Default.args,
-	afterIcon: wordpress,
-};
-
-export const WithReset = RangeControlWithState.bind( {} );
-WithReset.args = {
-	...Default.args,
-	allowReset: true,
-};
-
-/**
- * Use `marks` to render a visual representation of `step` ticks. Custom mark indicators can be provided by an `Array`.
- */
-export const WithMarks = ( props ) => {
-	const marksBase = [
-		{ value: 0, label: '0' },
-		{ value: 1, label: '1' },
-		{ value: 2, label: '2' },
-		{ value: 8, label: '8' },
-		{ value: 10, label: '10' },
-	];
-	const marksWithDecimal = [
-		...marksBase,
-		{ value: 3.5, label: '3.5' },
-		{ value: 5.8, label: '5.8' },
-	];
-	const marksWithNegatives = [
-		...marksBase,
-		{ value: -1, label: '-1' },
-		{ value: -2, label: '-2' },
-		{ value: -4, label: '-4' },
-		{ value: -8, label: '-8' },
-	];
-	const stepInteger = { min: 0, max: 10, step: 1 };
-	const stepDecimal = { min: 0, max: 10, step: 0.1 };
-	const minNegative = { min: -10, max: 10, step: 1 };
-	const rangeNegative = { min: -10, max: -1, step: 1 };
-
-	const Range = ( localProps ) => {
-		const label = Array.isArray( localProps.marks )
-			? 'Custom'
-			: 'Automatic';
-		return <RangeControl { ...{ ...localProps, ...props, label } } />;
-	};
-
-	return (
-		<>
-			<h2>Integer Step</h2>
-			<Range marks { ...stepInteger } />
-			<Range marks={ marksBase } { ...stepInteger } />
-
-			<h2>Decimal Step</h2>
-			<Range marks { ...stepDecimal } />
-			<Range marks={ marksWithDecimal } { ...stepDecimal } />
-
-			<h2>Negative Minimum</h2>
-			<Range marks { ...minNegative } />
-			<Range marks={ marksWithNegatives } { ...minNegative } />
-
-			<h2>Negative Range</h2>
-			<Range marks { ...rangeNegative } />
-			<Range marks={ marksWithNegatives } { ...rangeNegative } />
-
-			<h2>Any Step</h2>
-			<Range marks { ...{ ...stepInteger, step: 'any' } } />
-			<Range marks={ marksBase } { ...{ ...stepInteger, step: 'any' } } />
-		</>
-	);
-};