@wordpress/components 19.15.0 → 19.16.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/scroll-lock/stories/index.js

@@ -1,71 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import ScrollLock from '../';
-
-export default { title: 'Components/ScrollLock', component: ScrollLock };
-
-const Example = () => {
-	const [ isScrollLocked, setScrollLocked ] = useState( false );
-	const toggleLock = () => setScrollLocked( ! isScrollLocked );
-
-	return (
-		<StripedBackground>
-			<div>Start scrolling down...</div>
-			<ToggleContainer>
-				<Button variant="secondary" onClick={ toggleLock }>
-					Toggle Scroll Lock
-				</Button>
-				{ isScrollLocked && <ScrollLock /> }
-				<p>
-					Scroll locked:{ ' ' }
-					<strong>{ isScrollLocked ? 'Yes' : 'No' }</strong>
-				</p>
-			</ToggleContainer>
-		</StripedBackground>
-	);
-};
-
-function StripedBackground( props ) {
-	return (
-		<div
-			style={ {
-				backgroundColor: '#fff',
-				backgroundImage:
-					'linear-gradient(transparent 50%, rgba(0, 0, 0, 0.05) 50%)',
-				backgroundSize: '50px 50px',
-				height: 3000,
-				position: 'relative',
-			} }
-			{ ...props }
-		/>
-	);
-}
-
-function ToggleContainer( props ) {
-	const { children } = props;
-	return (
-		<div
-			style={ {
-				position: 'sticky',
-				top: 0,
-				padding: 40,
-				display: 'flex',
-				justifyContent: 'center',
-				textAlign: 'center',
-			} }
-		>
-			<div>{ children }</div>
-		</div>
-	);
-}
-
-export const _default = () => {
-	return <Example />;
-};

package/src/scroll-lock/test/index.js

@@ -1,53 +0,0 @@
-/**
- * External dependencies
- */
-import { mount } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import ScrollLock from '..';
-
-describe( 'scroll-lock', () => {
-	const lockingClassName = 'lockscroll';
-
-	// Use a separate document to reduce the risk of test side-effects.
-	let wrapper = null;
-
-	function expectLocked( locked ) {
-		expect(
-			document.documentElement.classList.contains( lockingClassName )
-		).toBe( locked );
-		// Assert against `body` because `scrollingElement` does not exist on our test DOM implementation.
-		expect( document.body.classList.contains( lockingClassName ) ).toBe(
-			locked
-		);
-	}
-
-	afterEach( () => {
-		if ( wrapper && wrapper.length ) {
-			wrapper.unmount();
-			wrapper = null;
-		}
-	} );
-
-	it( 'locks when mounted', () => {
-		expectLocked( false );
-		wrapper = mount( <ScrollLock /> );
-		expectLocked( true );
-	} );
-
-	it( 'unlocks when unmounted', () => {
-		wrapper = mount( <ScrollLock /> );
-		expectLocked( true );
-		wrapper.unmount();
-
-		// Running cleanup functions now works asynchronously. the unofficial
-		// enzyme adapter for react 17 we're currently using does not account
-		// for this, yet. So for now, we'll use jest.advanceTimersByTime to wait for cleanup.
-		//
-		// @see https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
-		jest.advanceTimersByTime( 1 );
-		expectLocked( false );
-	} );
-} );

package/src/shortcut/test/index.js

@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import Shortcut from '../';
-
-describe( 'Shortcut', () => {
-	it( 'does not render anything if no shortcut prop is provided', () => {
-		const wrapper = shallow( <Shortcut /> );
-
-		expect( wrapper.children() ).toHaveLength( 0 );
-	} );
-
-	it( 'renders the shortcut display text when a string is passed as the shortcut', () => {
-		const wrapper = shallow( <Shortcut shortcut="shortcut text" /> );
-
-		expect( wrapper.text() ).toBe( 'shortcut text' );
-	} );
-
-	it( 'renders the shortcut display text and aria-label when an object is passed as the shortcut with the correct properties', () => {
-		const wrapper = shallow(
-			<Shortcut
-				shortcut={ {
-					display: 'shortcut text',
-					ariaLabel: 'shortcut label',
-				} }
-			/>
-		);
-
-		expect( wrapper.text() ).toBe( 'shortcut text' );
-		expect( wrapper.prop( 'aria-label' ) ).toBe( 'shortcut label' );
-	} );
-} );