@wordpress/components 19.15.0 → 20.0.0

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

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

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

package/src/style-provider/index.js

@@ -1,31 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import memoize from 'memize';
-import * as uuid from 'uuid';
-
-const uuidCache = new Set();
-
-const memoizedCreateCacheWithContainer = memoize( ( container ) => {
-	// Emotion only accepts alphabetical and hyphenated keys so we just strip the numbers from the UUID. It _should_ be fine.
-	let key = uuid.v4().replace( /[0-9]/g, '' );
-	while ( uuidCache.has( key ) ) {
-		key = uuid.v4().replace( /[0-9]/g, '' );
-	}
-	uuidCache.add( key );
-	return createCache( { container, key } );
-} );
-
-export default function StyleProvider( { children, document } ) {
-	if ( ! document ) {
-		return null;
-	}
-
-	const cache = memoizedCreateCacheWithContainer( document.head );
-
-	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
-}

package/src/swatch/index.js

@@ -1,19 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-
-function Swatch( { fill } ) {
-	return fill ? (
-		<span className="components-swatch" style={ { background: fill } } />
-	) : (
-		<Icon icon={ swatch } />
-	);
-}
-
-export default Swatch;

package/src/swatch/style.scss

@@ -1,21 +0,0 @@
-.components-swatch {
-	width: 18px;
-	height: 18px;
-	border-radius: 50%;
-	color: transparent;
-	background: transparent;
-
-	// Regular border doesn't seem to work in the toolbar button, but pseudo-selector border does.
-	&::after {
-		content: "";
-		display: block;
-		width: 100%;
-		height: 100%;
-		border: $border-width solid rgba(0, 0, 0, 0.2);
-		border-radius: 50%;
-	}
-}
-
-.components-button.has-icon.has-text .components-swatch {
-	margin-right: $grid-unit;
-}

package/src/toggle-group-control/stories/index.js

@@ -1,187 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { formatLowercase, formatUppercase } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import {
-	ToggleGroupControl,
-	ToggleGroupControlOption,
-	ToggleGroupControlOptionIcon,
-} from '../index';
-import { View } from '../../view';
-import Button from '../../button';
-
-export default {
-	component: ToggleGroupControl,
-	title: 'Components (Experimental)/ToggleGroupControl',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const KNOBS_GROUPS = {
-	ToggleGroupControl: 'ToggleGroupControl',
-	ToggleGroupControlOption: 'ToggleGroupControlOption',
-};
-
-const _default = ( { options } ) => {
-	const [ value, setValue ] = useState( options[ 0 ].value );
-	const label = text(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: label`,
-		'Toggle Group Control',
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-
-	const hideLabelFromVision = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: hideLabelFromVision`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const isBlock = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: isBlock (render as a css block element)`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const help = text(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: help`,
-		undefined,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const isAdaptiveWidth = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: isAdaptiveWidth`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-
-	const controlOptions = options.map( ( option, index ) => (
-		<ToggleGroupControlOption
-			key={ option.value }
-			value={ option.value }
-			label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				option.label,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-			aria-label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: aria-label`,
-				option[ 'aria-label' ],
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-			showTooltip={ boolean(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
-				option.showTooltip,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-		/>
-	) );
-
-	return (
-		<View>
-			<ToggleGroupControl
-				onChange={ setValue }
-				value={ value }
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-				help={ help }
-				isBlock={ isBlock }
-				isAdaptiveWidth={ isAdaptiveWidth }
-			>
-				{ controlOptions }
-			</ToggleGroupControl>
-		</View>
-	);
-};
-
-export const Default = _default.bind( {} );
-Default.args = {
-	options: [
-		{ value: 'left', label: 'Left' },
-		{ value: 'center', label: 'Center' },
-		{ value: 'right', label: 'Right' },
-		{ value: 'justify', label: 'Justify' },
-	],
-};
-
-export const WithTooltip = _default.bind( {} );
-WithTooltip.args = {
-	...Default.args,
-	options: [
-		{ value: 1, label: '1', showTooltip: true, 'aria-label': 'One' },
-		{ value: 2, label: '2', showTooltip: true, 'aria-label': 'Two' },
-		{ value: 3, label: '3', showTooltip: true, 'aria-label': 'Three' },
-	],
-};
-
-export const WithAriaLabel = _default.bind( {} );
-WithAriaLabel.args = {
-	...Default.args,
-	options: [
-		{ value: 'asc', label: 'A→Z', 'aria-label': 'Ascending' },
-		{ value: 'desc', label: 'Z→A', 'aria-label': 'Descending' },
-	],
-};
-
-export const WithIcons = () => {
-	const [ state, setState ] = useState();
-	return (
-		<ToggleGroupControl
-			onChange={ setState }
-			value={ state }
-			label={ 'With icons' }
-			hideLabelFromVision
-		>
-			<ToggleGroupControlOptionIcon
-				value="uppercase"
-				icon={ formatUppercase }
-				showTooltip={ true }
-				aria-label="Uppercase"
-			/>
-			<ToggleGroupControlOptionIcon
-				value="lowercase"
-				icon={ formatLowercase }
-				showTooltip={ true }
-				aria-label="Lowercase"
-			/>
-		</ToggleGroupControl>
-	);
-};
-
-export const WithReset = () => {
-	const [ alignState, setAlignState ] = useState();
-	const aligns = [ 'Left', 'Center', 'Right' ];
-	const alignOptions = aligns.map( ( key, index ) => (
-		<ToggleGroupControlOption
-			key={ key }
-			value={ key }
-			label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				key,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-		/>
-	) );
-	return (
-		<View>
-			<ToggleGroupControl
-				onChange={ setAlignState }
-				value={ alignState }
-				label={ 'Toggle Group Control' }
-				hideLabelFromVision
-			>
-				{ alignOptions }
-			</ToggleGroupControl>
-			<Button onClick={ () => setAlignState( undefined ) } isTertiary>
-				Reset
-			</Button>
-		</View>
-	);
-};