@wordpress/components 19.15.0 → 20.0.1-next.d6164808d3.0

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/menu-group/test/__snapshots__/index.js.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`MenuGroup should match snapshot 1`] = `
-<div
-  className="components-menu-group"
->
-  <div
-    aria-hidden="true"
-    className="components-menu-group__label"
-    id="components-menu-group-label-1"
-  >
-    My group
-  </div>
-  <div
-    aria-labelledby="components-menu-group-label-1"
-    role="group"
-  >
-    <p>
-      My item
-    </p>
-  </div>
-</div>
-`;

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

@@ -1,163 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { more } from '@wordpress/icons';
-import { useResizeObserver } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-
-jest.mock( '@wordpress/compose', () => {
-	return {
-		...jest.requireActual( '@wordpress/compose' ),
-		useResizeObserver: jest.fn( () => [] ),
-	};
-} );
-
-describe( 'Placeholder', () => {
-	beforeEach( () => {
-		useResizeObserver.mockReturnValue( [
-			<div key="1" />,
-			{ width: 320 },
-		] );
-	} );
-
-	describe( 'basic rendering', () => {
-		it( 'should by default render label section and fieldset.', () => {
-			const placeholder = shallow( <Placeholder /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-			const placeholderInstructions = placeholder.find(
-				'.components-placeholder__instructions'
-			);
-			const placeholderFieldset = placeholder.find(
-				'.components-placeholder__fieldset'
-			);
-
-			expect( placeholder.hasClass( 'components-placeholder' ) ).toBe(
-				true
-			);
-			// Test for empty label.
-			expect( placeholderLabel.exists() ).toBe( true );
-			expect( placeholderLabel.find( 'Dashicon' ).exists() ).toBe(
-				false
-			);
-			// Test for non existant instructions.
-			expect( placeholderInstructions.exists() ).toBe( false );
-			// Test for empty fieldset.
-			expect( placeholderFieldset.exists() ).toBe( true );
-		} );
-
-		it( 'should render an Icon in the label section', () => {
-			const placeholder = shallow( <Placeholder icon={ more } /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-
-			expect( placeholderLabel.exists() ).toBe( true );
-			expect( placeholderLabel.find( 'Icon' ).exists() ).toBe( true );
-		} );
-
-		it( 'should render a label section', () => {
-			const label = 'WordPress';
-			const placeholder = shallow( <Placeholder label={ label } /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-			const child = placeholderLabel.childAt( 1 );
-
-			expect( child.text() ).toBe( label );
-		} );
-
-		it( 'should display an instructions element', () => {
-			const element = <div>Instructions</div>;
-			const placeholder = shallow(
-				<Placeholder instructions={ element } />
-			);
-			const placeholderInstructions = placeholder.find(
-				'.components-placeholder__instructions'
-			);
-			const child = placeholderInstructions.childAt( 0 );
-
-			expect( placeholderInstructions.exists() ).toBe( true );
-			expect( child.matchesElement( element ) ).toBe( true );
-		} );
-
-		it( 'should display a fieldset from the children property', () => {
-			const element = <div>Fieldset</div>;
-			const placeholder = shallow( <Placeholder children={ element } /> );
-			const placeholderFieldset = placeholder.find(
-				'fieldset.components-placeholder__fieldset'
-			);
-			const child = placeholderFieldset.childAt( 0 );
-
-			expect( placeholderFieldset.exists() ).toBe( true );
-			expect( child.matchesElement( element ) ).toBe( true );
-		} );
-
-		it( 'should display a legend if instructions are passed', () => {
-			const element = <div>Fieldset</div>;
-			const instructions = 'Choose an option.';
-			const placeholder = shallow(
-				<Placeholder
-					children={ element }
-					instructions={ instructions }
-				/>
-			);
-			const placeholderLegend = placeholder.find(
-				'legend.components-placeholder__instructions'
-			);
-
-			expect( placeholderLegend.exists() ).toBe( true );
-			expect( placeholderLegend.text() ).toEqual( instructions );
-		} );
-
-		it( 'should add an additional className to the top container', () => {
-			const placeholder = shallow(
-				<Placeholder className="wp-placeholder" />
-			);
-			expect( placeholder.hasClass( 'wp-placeholder' ) ).toBe( true );
-		} );
-
-		it( 'should add additional props to the top level container', () => {
-			const placeholder = shallow( <Placeholder test="test" /> );
-			expect( placeholder.prop( 'test' ) ).toBe( 'test' );
-		} );
-	} );
-
-	describe( 'resize aware', () => {
-		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
-			useResizeObserver.mockReturnValue( [
-				<div key="1" />,
-				{ width: 480 },
-			] );
-
-			const placeholder = shallow( <Placeholder /> );
-
-			expect( placeholder.hasClass( 'is-large' ) ).toBe( true );
-			expect( placeholder.hasClass( 'is-medium' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-small' ) ).toBe( false );
-		} );
-
-		it( 'should assign modifier class', () => {
-			useResizeObserver.mockReturnValue( [
-				<div key="1" />,
-				{ width: null },
-			] );
-
-			const placeholder = shallow( <Placeholder /> );
-
-			expect( placeholder.hasClass( 'is-large' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-medium' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-small' ) ).toBe( false );
-		} );
-	} );
-} );