@wordpress/components 19.14.0 → 19.17.0

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/flex/flex/component.js

@@ -1,60 +0,0 @@
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../../ui/context';
-import { useFlex } from './hook';
-import { FlexContext } from './../context';
-import { View } from '../../view';
-
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                       forwardedRef
- */
-function Flex( props, forwardedRef ) {
-	const { children, isColumn, ...otherProps } = useFlex( props );
-
-	return (
-		<FlexContext.Provider
-			value={ { flexItemDisplay: isColumn ? 'block' : undefined } }
-		>
-			<View { ...otherProps } ref={ forwardedRef }>
-				{ children }
-			</View>
-		</FlexContext.Provider>
-	);
-}
-
-/**
- * `Flex` is a primitive layout component that adaptively aligns child content
- * horizontally or vertically. `Flex` powers components like `HStack` and
- * `VStack`.
- *
- * `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`.
- *
- * @example
- * ```jsx
- * import {
- * 	__experimentalFlex as Flex,
- * 	__experimentalFlexBlock as FlexBlock,
- * 	__experimentalFlexItem as FlexItem,
- * 	__experimentalText as Text
- * } from `@wordpress/components`;
- *
- * function Example() {
- * 	return (
- * 		<Flex>
- * 			<FlexItem>
- * 				<Text>Code</Text>
- * 			</FlexItem>
- * 			<FlexBlock>
- * 				<Text>Poetry</Text>
- * 			</FlexBlock>
- * 		</Flex>
- * 	);
- * }
- * ```
- *
- */
-const ConnectedFlex = contextConnect( Flex, 'Flex' );
-
-export default ConnectedFlex;

package/src/flex/flex-block/component.js

@@ -1,30 +0,0 @@
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../../ui/context';
-import { View } from '../../view';
-import { useFlexBlock } from './hook';
-
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                            forwardedRef
- */
-function FlexBlock( props, forwardedRef ) {
-	const flexBlockProps = useFlexBlock( props );
-
-	return <View { ...flexBlockProps } ref={ forwardedRef } />;
-}
-
-/**
- * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`.
- *
- * @example
- * ```jsx
- * <Flex>
- * 	<FlexBlock>...</FlexBlock>
- * </Flex>
- * ```
- */
-const ConnectedFlexBlock = contextConnect( FlexBlock, 'FlexBlock' );
-
-export default ConnectedFlexBlock;

package/src/flex/flex-item/component.js

@@ -1,30 +0,0 @@
-/**
- * Internal dependencies
- */
-import { contextConnect } from '../../ui/context';
-import { View } from '../../view';
-import { useFlexItem } from './hook';
-
-/**
- * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props
- * @param {import('react').ForwardedRef<any>}                                                           forwardedRef
- */
-function FlexItem( props, forwardedRef ) {
-	const flexItemProps = useFlexItem( props );
-
-	return <View { ...flexItemProps } ref={ forwardedRef } />;
-}
-
-/**
- * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`.
- *
- * @example
- * ```jsx
- * <Flex>
- * 	<FlexItem>...</FlexItem>
- * </Flex>
- * ```
- */
-const ConnectedFlexItem = contextConnect( FlexItem, 'FlexItem' );
-
-export default ConnectedFlexItem;

package/src/flex/stories/index.js

@@ -1,29 +0,0 @@
-/**
- * Internal dependencies
- */
-import { Flex, FlexItem } from '../';
-import { View } from '../../view';
-
-export default {
-	component: Flex,
-	title: 'Components (Experimental)/Flex',
-};
-
-export const _default = () => {
-	return (
-		<>
-			<Flex gap={ 3 }>
-				<View>Item</View>
-				<View>Item</View>
-			</Flex>
-			<Flex direction={ [ 'column', 'row' ] } gap={ 3 }>
-				<View style={ { width: '180px' } }>Item</View>
-				<FlexItem isBlock>
-					<View>Item</View>
-				</FlexItem>
-				<View>Item</View>
-				<View>Item</View>
-			</Flex>
-		</>
-	);
-};

package/src/flex/test/index.js

@@ -1,77 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { View } from '../../view';
-import { Flex, FlexBlock, FlexItem } from '../';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render(
-			<Flex>
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render + wrap non Flex children', () => {
-		const { container } = render(
-			<Flex>
-				<FlexItem />
-				<View />
-				<div />
-				<FlexBlock />
-			</Flex>
-		);
-
-		expect( container.firstChild ).toMatchDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render align', () => {
-		const { container } = render(
-			<Flex align="flex-start">
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render justify', () => {
-		const { container } = render(
-			<Flex justify="flex-start">
-				<FlexItem />
-				<FlexBlock />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render spacing', () => {
-		const { container } = render(
-			<Flex gap={ 5 }>
-				<View />
-				<View />
-			</Flex>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-} );

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/placeholder/stories/index.js

@@ -1,44 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-import TextControl from '../../text-control';
-
-export default {
-	title: 'Components/Placeholder',
-	component: Placeholder,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const icon = text( 'Icon', 'smiley' );
-	const instructions = text(
-		'Instructions',
-		'Here are instructions you should follow'
-	);
-	const label = text( 'Label', 'My Placeholder Label' );
-	const isColumnLayout = boolean( 'isColumnLayout', false );
-
-	return (
-		<Placeholder
-			icon={ icon }
-			instructions={ instructions }
-			label={ label }
-			isColumnLayout={ isColumnLayout }
-		>
-			<div>
-				<TextControl
-					label="Sample Field"
-					placeholder="Enter something here"
-				/>
-			</div>
-		</Placeholder>
-	);
-};

package/src/popover/stories/_utils.js

@@ -1,64 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useCallback, useEffect, useState } from '@wordpress/element';
-
-export const DraggableWrapper = (
-	props = { role: 'presentation', style: {} }
-) => {
-	const { role, style, ...restProps } = props;
-	const [ position, setPosition ] = useState( { x: 0, y: 0 } );
-	const [ isDragging, setDragging ] = useState( false );
-
-	const updatePosition = useCallback(
-		( event ) => {
-			if ( ! isDragging ) {
-				return false;
-			}
-			const { movementX, movementY } = event;
-			setPosition( {
-				...position,
-				x: position.x + movementX,
-				y: position.y + movementY,
-			} );
-		},
-		[ isDragging, position ]
-	);
-
-	const startDragging = useCallback( () => setDragging( true ), [] );
-	const stopDragging = useCallback( () => setDragging( false ), [] );
-
-	useEffect( () => {
-		document.addEventListener( 'mousemove', updatePosition );
-		document.addEventListener( 'mouseup', stopDragging );
-		return () => {
-			document.removeEventListener( 'mousemove', updatePosition );
-			document.removeEventListener( 'mouseup', stopDragging );
-		};
-	}, [ updatePosition, stopDragging ] );
-
-	const { x, y } = position;
-
-	/**
-	 * Ideally, the x and y coordinates would be applied transform: translate.
-	 * However, using transform is causing layout rendering issues when
-	 * combined with components like Popover (due to their positioning
-	 * strategy).
-	 */
-	const componentStyle = {
-		...style,
-		position: 'relative',
-		top: y,
-		left: x,
-	};
-
-	return (
-		<div
-			{ ...restProps }
-			onMouseUp={ stopDragging }
-			onMouseDown={ startDragging }
-			role={ role }
-			style={ componentStyle }
-		/>
-	);
-};