@wordpress/components 19.13.0 → 19.16.0

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

@@ -1,119 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { BorderControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import Popover from '../../popover';
-
-export default {
-	title: 'Components (Experimental)/BorderControl',
-	component: BorderControl,
-};
-
-// Available border colors.
-const colors = [
-	{ name: 'Gray 0', color: '#f6f7f7' },
-	{ name: 'Gray 5', color: '#dcdcde' },
-	{ name: 'Gray 20', color: '#a7aaad' },
-	{ name: 'Gray 70', color: '#3c434a' },
-	{ name: 'Gray 100', color: '#101517' },
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Blue 70', color: '#0a4b78' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Green 10', color: '#68de7c' },
-	{ name: 'Green 40', color: '#00a32a' },
-	{ name: 'Green 60', color: '#007017' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-
-// Multiple origin colors.
-const multipleOriginColors = [
-	{
-		name: 'Default',
-		colors: [
-			{ name: 'Gray 0', color: '#f6f7f7' },
-			{ name: 'Gray 5', color: '#dcdcde' },
-			{ name: 'Gray 20', color: '#a7aaad' },
-			{ name: 'Gray 70', color: '#3c434a' },
-			{ name: 'Gray 100', color: '#101517' },
-		],
-	},
-	{
-		name: 'Theme',
-		colors: [
-			{ name: 'Blue 20', color: '#72aee6' },
-			{ name: 'Blue 40', color: '#3582c4' },
-			{ name: 'Blue 70', color: '#0a4b78' },
-			{ name: 'Red 40', color: '#e65054' },
-			{ name: 'Red 70', color: '#8a2424' },
-		],
-	},
-	{
-		name: 'User',
-		colors: [
-			{ name: 'Green 10', color: '#68de7c' },
-			{ name: 'Green 40', color: '#00a32a' },
-			{ name: 'Green 60', color: '#007017' },
-			{ name: 'Yellow 10', color: '#f2d675' },
-			{ name: 'Yellow 40', color: '#bd8600' },
-		],
-	},
-];
-
-const _default = ( props ) => {
-	const [ border, setBorder ] = useState();
-	const onChange = ( newBorder ) => setBorder( newBorder );
-	const { __experimentalHasMultipleOrigins } = props;
-
-	return (
-		<SlotFillProvider>
-			<WrapperView>
-				<BorderControl
-					{ ...props }
-					colors={
-						__experimentalHasMultipleOrigins
-							? multipleOriginColors
-							: colors
-					}
-					label="Border"
-					onChange={ onChange }
-					value={ border }
-					width={ ! props.isCompact && props.width }
-				/>
-			</WrapperView>
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
-};
-
-export const Default = _default.bind( {} );
-Default.args = {
-	disableCustomColors: false,
-	enableAlpha: true,
-	enableStyle: true,
-	isCompact: true,
-	shouldSanitizeBorder: true,
-	showDropdownHeader: false,
-	width: '110px',
-	withSlider: true,
-	__experimentalIsRenderedInSidebar: false,
-	__experimentalHasMultipleOrigins: false,
-	__next36pxDefaultSize: false,
-};
-
-const WrapperView = styled.div`
-	max-width: 280px;
-`;

package/src/color-indicator/index.js

@@ -1,16 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-const ColorIndicator = ( { className, colorValue, ...props } ) => (
-	<span
-		className={ classnames( 'component-color-indicator', className ) }
-		style={ { background: colorValue } }
-		{ ...props }
-	/>
-);
-
-export default ColorIndicator;

package/src/color-indicator/stories/index.js

@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import ColorIndicator from '../';
-
-export default {
-	title: 'Components/ColorIndicator',
-	component: ColorIndicator,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const color = text( 'Color', '#0073aa' );
-	return <ColorIndicator colorValue={ color } />;
-};

package/src/color-indicator/test/__snapshots__/index.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorIndicator matches the snapshot 1`] = `
-<span
-  aria-label="sample label"
-  className="component-color-indicator"
-  style={
-    Object {
-      "background": "#fff",
-    }
-  }
-/>
-`;

package/src/divider/test/index.js

@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Divider } from '../index';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render( <Divider /> );
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render marginStart', () => {
-		const { container } = render( <Divider marginStart={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render marginEnd', () => {
-		const { container } = render( <Divider marginEnd={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render margin', () => {
-		const { container } = render( <Divider margin={ 7 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-} );

package/src/elevation/component.js

@@ -1,43 +0,0 @@
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../ui/context';
-import { View } from '../view';
-import { useElevation } from './hook';
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                               forwardedRef
- */
-function Elevation( props, forwardedRef ) {
-	const elevationProps = useElevation( props );
-
-	return <View { ...elevationProps } ref={ forwardedRef } />;
-}
-
-/**
- * `Elevation` is a core component that renders shadow, using the library's shadow system.
- *
- * The shadow effect is generated using the `value` prop.
- *
- * @example
- * ```jsx
- * import {
- *	__experimentalElevation as Elevation,
- *	__experimentalSurface as Surface,
- *	__experimentalText as Text,
- * } from '@wordpress/components';
- *
- * function Example() {
- * 	return (
- * 		<Surface>
- * 			<Text>Code is Poetry</Text>
- * 			<Elevation value={ 5 } />
- * 		</Surface>
- * 	);
- * }
- * ```
- */
-const ConnectedElevation = contextConnect( Elevation, 'Elevation' );
-
-export default ConnectedElevation;

package/src/elevation/stories/index.js

@@ -1,148 +0,0 @@
-/**
- * External dependencies
- */
-import { number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import { Elevation } from '../index';
-import { Grid } from '../../grid';
-import { View } from '../../view';
-import { HStack } from '../../h-stack';
-import { Divider } from '../../divider';
-import {
-	ExampleGrid,
-	ExampleGridItem,
-	ExampleMetaContent,
-} from '../../ui/__storybook-utils';
-
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
-export default {
-	component: Elevation,
-	title: 'Components (Experimental)/Elevation',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const ElevationWrapper = ( { children } ) => (
-	<HStack alignment="center">
-		<View
-			style={ {
-				position: 'relative',
-				width: 40,
-				height: 40,
-			} }
-		>
-			{ children }
-		</View>
-	</HStack>
-);
-
-const elevations = new Array( 11 )
-	.fill( 0 )
-	.map( ( a, i ) => i )
-	.map( ( index ) => {
-		return [
-			`x: 0px`,
-			`y: ${ index }px`,
-			`spread: ${ index * 2 }px`,
-			`color: rgba(0, 0, 0, ${ index / 20 })`,
-		];
-	} );
-
-export const _default = () => {
-	return (
-		<ExampleGrid>
-			{ elevations.map( ( elevation, index ) => {
-				return (
-					<ExampleGridItem key={ index }>
-						<View style={ { padding: 20, paddingBottom: 40 } }>
-							<ElevationWrapper>
-								<Elevation
-									style={ { background: 'white' } }
-									value={ index }
-								/>
-							</ElevationWrapper>
-						</View>
-						<Divider mt={ 3 } />
-						<ExampleMetaContent title="value" items={ [ index ] } />
-						<Divider mt={ 3 } />
-						<ExampleMetaContent title="info" items={ elevation } />
-					</ExampleGridItem>
-				);
-			} ) }
-		</ExampleGrid>
-	);
-};
-
-export const Focus = () => {
-	const borderRadius = number( 'borderRadius', 0 );
-	const value = number( 'value', 5 );
-	const hover = number( 'hover', 5 );
-	const active = number( 'active', 1 );
-	const focus = number( 'focus', 10 );
-
-	const Card = useCallback(
-		( props ) => (
-			<View
-				{ ...props }
-				as="a"
-				href="#"
-				onClick={ ( e ) => e.preventDefault() }
-				style={ {
-					display: 'block',
-					width: 100,
-					height: 100,
-					borderRadius,
-					position: 'relative',
-					margin: '20vh auto 10vw',
-				} }
-			/>
-		),
-		[]
-	);
-
-	return (
-		<View
-			style={ {
-				padding: '10vh',
-			} }
-		>
-			<Grid columns={ 3 }>
-				<Card>
-					<Elevation
-						borderRadius={ borderRadius }
-						value={ value }
-						focus={ focus }
-						active={ active }
-						hover={ hover }
-					/>
-				</Card>
-				<Card>
-					<Elevation
-						borderRadius={ borderRadius }
-						value={ value }
-						focus={ focus }
-						active={ active }
-						hover={ hover }
-					/>
-				</Card>
-				<Card>
-					<Elevation
-						borderRadius={ borderRadius }
-						value={ value }
-						focus={ focus }
-						active={ active }
-						hover={ hover }
-					/>
-				</Card>
-			</Grid>
-		</View>
-	);
-};

package/src/elevation/test/index.js

@@ -1,51 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Elevation } from '../index';
-
-describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const { container } = render( <Elevation /> );
-
-		expect( container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render isInteractive', () => {
-		const { container } = render( <Elevation isInteractive /> );
-
-		expect( container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render value', () => {
-		const { container } = render( <Elevation value={ 7 } /> );
-
-		expect( container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render hover', () => {
-		const { container } = render( <Elevation hover={ 14 } value={ 7 } /> );
-
-		expect( container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render active', () => {
-		const { container } = render(
-			<Elevation active={ 5 } hover={ 14 } value={ 7 } />
-		);
-
-		expect( container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render offset', () => {
-		const { container } = render(
-			<Elevation active={ 5 } hover={ 14 } offset={ -2 } value={ 7 } />
-		);
-
-		expect( container.firstChild ).toMatchSnapshot();
-	} );
-} );

package/src/form-toggle/index.js

@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-export const noop = () => {};
-
-function FormToggle( {
-	className,
-	checked,
-	id,
-	disabled,
-	onChange = noop,
-	...props
-} ) {
-	const wrapperClasses = classnames( 'components-form-toggle', className, {
-		'is-checked': checked,
-		'is-disabled': disabled,
-	} );
-
-	return (
-		<span className={ wrapperClasses }>
-			<input
-				className="components-form-toggle__input"
-				id={ id }
-				type="checkbox"
-				checked={ checked }
-				onChange={ onChange }
-				disabled={ disabled }
-				{ ...props }
-			/>
-			<span className="components-form-toggle__track"></span>
-			<span className="components-form-toggle__thumb"></span>
-		</span>
-	);
-}
-
-export default FormToggle;

package/src/form-toggle/stories/index.js

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FormToggle from '../';
-
-export default { title: 'Components/FormToggle', component: FormToggle };
-
-const FormToggleWithState = ( { checked, ...props } ) => {
-	const [ isChecked, setChecked ] = useState( checked );
-	return (
-		<FormToggle
-			{ ...props }
-			checked={ isChecked }
-			onChange={ () => {
-				setChecked( ! isChecked );
-			} }
-		/>
-	);
-};
-
-export const _default = () => {
-	return <FormToggleWithState checked />;
-};

package/src/form-toggle/test/index.js

@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import FormToggle, { noop } from '../';
-
-describe( 'FormToggle', () => {
-	describe( 'basic rendering', () => {
-		it( 'should render a span element with an unchecked checkbox', () => {
-			const formToggle = shallow( <FormToggle /> );
-			expect( formToggle.hasClass( 'components-form-toggle' ) ).toBe(
-				true
-			);
-			expect( formToggle.hasClass( 'is-checked' ) ).toBe( false );
-			expect( formToggle.type() ).toBe( 'span' );
-		} );
-
-		it( 'should render a checked checkbox and change the accessibility text to On when providing checked prop', () => {
-			const formToggle = shallow( <FormToggle checked /> );
-			expect( formToggle.hasClass( 'is-checked' ) ).toBe( true );
-			expect(
-				formToggle
-					.find( '.components-form-toggle__input' )
-					.prop( 'checked' )
-			).toBe( true );
-		} );
-
-		it( 'should render with an additional className', () => {
-			const formToggle = shallow( <FormToggle className="testing" /> );
-			expect( formToggle.hasClass( 'testing' ) ).toBe( true );
-		} );
-
-		it( 'should render an id prop for the input checkbox', () => {
-			// Disabled because of our rule restricting literal IDs, preferring
-			// `withInstanceId`. In this case, it's fine to use literal IDs.
-			// eslint-disable-next-line no-restricted-syntax
-			const formToggle = shallow( <FormToggle id="test" /> );
-			expect(
-				formToggle.find( '.components-form-toggle__input' ).prop( 'id' )
-			).toBe( 'test' );
-		} );
-
-		it( 'should render a checkbox with a noop onChange', () => {
-			const formToggle = shallow( <FormToggle /> );
-			const checkBox = formToggle
-				.prop( 'children' )
-				.find(
-					( child ) =>
-						'input' === child.type &&
-						'checkbox' === child.props.type
-				);
-			expect( checkBox.props.onChange ).toBe( noop );
-		} );
-
-		it( 'should render a checkbox with a user-provided onChange', () => {
-			const testFunction = ( event ) => event;
-			const formToggle = shallow(
-				<FormToggle onChange={ testFunction } />
-			);
-			const checkBox = formToggle
-				.prop( 'children' )
-				.find(
-					( child ) =>
-						'input' === child.type &&
-						'checkbox' === child.props.type
-				);
-			expect( checkBox.props.onChange ).toBe( testFunction );
-		} );
-	} );
-} );

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>
-	);
-};