@wordpress/components 19.13.0 → 19.16.0

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

@@ -1,31 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Scrollable } from '../index';
-
-describe( 'props', () => {
-	let base;
-
-	beforeEach( () => {
-		( { container: base } = render(
-			<Scrollable>WordPress.org - Code is Poetry</Scrollable>
-		) );
-	} );
-	test( 'should render correctly', () => {
-		expect( base.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render smoothScroll', () => {
-		const { container } = render(
-			<Scrollable smoothScroll>WordPress.org - Code is Poetry</Scrollable>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-} );

package/src/shortcut/index.js

@@ -1,41 +0,0 @@
-/**
- * External dependencies
- */
-import { isString, isObject } from 'lodash';
-
-/** @typedef {string | { display: string, ariaLabel: string }} Shortcut */
-/**
- * @typedef Props
- * @property {Shortcut} shortcut    Shortcut configuration
- * @property {string}   [className] Classname
- */
-
-/**
- * @param {Props} props Props
- * @return {JSX.Element | null} Element
- */
-function Shortcut( { shortcut, className } ) {
-	if ( ! shortcut ) {
-		return null;
-	}
-
-	let displayText;
-	let ariaLabel;
-
-	if ( isString( shortcut ) ) {
-		displayText = shortcut;
-	}
-
-	if ( isObject( shortcut ) ) {
-		displayText = shortcut.display;
-		ariaLabel = shortcut.ariaLabel;
-	}
-
-	return (
-		<span className={ className } aria-label={ ariaLabel }>
-			{ displayText }
-		</span>
-	);
-}
-
-export default Shortcut;

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

@@ -1,59 +0,0 @@
-/**
- * External dependencies
- */
-import { number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-/**
- * Internal dependencies
- */
-import { Spacer } from '..';
-
-export default {
-	component: Spacer,
-	title: 'Components (Experimental)/Spacer',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const PROPS = [
-	'margin',
-	'marginY',
-	'marginX',
-	'marginTop',
-	'marginBottom',
-	'marginLeft',
-	'marginRight',
-
-	'padding',
-	'paddingY',
-	'paddingX',
-	'paddingTop',
-	'paddingBottom',
-	'paddingLeft',
-	'paddingRight',
-];
-
-const BlackBox = () => (
-	<div
-		style={ { backgroundColor: 'black', width: '100px', height: '100px' } }
-	/>
-);
-
-export const _default = () => {
-	const props = PROPS.reduce(
-		( acc, prop ) => ( { ...acc, [ prop ]: number( prop, undefined ) } ),
-		{}
-	);
-
-	return (
-		<>
-			<BlackBox />
-			<Spacer { ...props }>This is the spacer</Spacer>
-			<BlackBox />
-		</>
-	);
-};

package/src/spacer/test/index.js

@@ -1,146 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Spacer } from '../index';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render( <Spacer /> ).container;
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render margin', () => {
-		const { container } = render( <Spacer margin={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginX', () => {
-		const { container } = render( <Spacer marginX={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginY', () => {
-		const { container } = render( <Spacer marginY={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginTop', () => {
-		const { container } = render( <Spacer marginTop={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginBottom', () => {
-		const { container } = render( <Spacer marginBottom={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginLeft', () => {
-		const { container } = render( <Spacer marginLeft={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render marginRight', () => {
-		const { container } = render( <Spacer marginRight={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should override margin props from less to more specific', () => {
-		const { container } = render(
-			<Spacer
-				margin={ 10 }
-				marginX={ 3 }
-				marginRight={ 5 }
-				marginBottom={ 1 }
-			/>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render padding', () => {
-		const { container } = render( <Spacer padding={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingX', () => {
-		const { container } = render( <Spacer paddingX={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingY', () => {
-		const { container } = render( <Spacer paddingY={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingTop', () => {
-		const { container } = render( <Spacer paddingTop={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingBottom', () => {
-		const { container } = render( <Spacer paddingBottom={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingLeft', () => {
-		const { container } = render( <Spacer paddingLeft={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should render paddingRight', () => {
-		const { container } = render( <Spacer paddingRight={ 5 } /> );
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-
-	test( 'should override padding props from less to more specific', () => {
-		const { container } = render(
-			<Spacer
-				padding={ 10 }
-				paddingY={ 2 }
-				paddingTop={ 5 }
-				paddingLeft={ 3 }
-			/>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.firstChild
-		);
-	} );
-} );

package/src/spinner/stories/index.js

@@ -1,43 +0,0 @@
-/**
- * External dependencies
- */
-import { css } from '@emotion/react';
-
-/**
- * Internal dependencies
- */
-import { useCx } from '../../utils';
-import { space } from '../../ui/utils/space';
-import Spinner from '../';
-
-const sizes = {
-	default: undefined,
-	medium: space( 20 ),
-	large: space( 40 ),
-};
-
-export default {
-	title: 'Components/Spinner',
-	component: Spinner,
-	argTypes: {
-		size: {
-			options: Object.keys( sizes ),
-			mapping: sizes,
-			control: { type: 'select' },
-		},
-	},
-};
-
-const Template = ( { size } ) => {
-	const cx = useCx();
-	const spinnerClassname = cx( css`
-		width: ${ size };
-		height: ${ size };
-	` );
-	return <Spinner className={ spinnerClassname } />;
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	size: 'default',
-};

package/src/text-highlight/index.js

@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { escapeRegExp } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { createInterpolateElement } from '@wordpress/element';
-
-const TextHighlight = ( { text = '', highlight = '' } ) => {
-	const trimmedHighlightText = highlight.trim();
-
-	if ( ! trimmedHighlightText ) {
-		return text;
-	}
-
-	const regex = new RegExp(
-		`(${ escapeRegExp( trimmedHighlightText ) })`,
-		'gi'
-	);
-
-	return createInterpolateElement( text.replace( regex, '<mark>$&</mark>' ), {
-		mark: <mark />,
-	} );
-};
-
-export default TextHighlight;

package/src/text-highlight/stories/index.js

@@ -1,28 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import TextHighlight from '../';
-
-export default {
-	title: 'Components/TextHighlight',
-	component: TextHighlight,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const textToMatch = text(
-		'Text',
-		'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.'
-	);
-
-	const textToHighlight = text( 'Text to be highlighted ', 'Gutenberg' );
-
-	return <TextHighlight text={ textToMatch } highlight={ textToHighlight } />;
-};

package/src/text-highlight/test/index.js

@@ -1,120 +0,0 @@
-/**
- * External dependencies
- */
-import { render, unmountComponentAtNode } from 'react-dom';
-import { act } from 'react-dom/test-utils';
-
-/**
- * Internal dependencies
- */
-import TextHighlight from '../index';
-
-let container = null;
-
-beforeEach( () => {
-	// Setup a DOM element as a render target.
-	container = document.createElement( 'div' );
-	document.body.appendChild( container );
-} );
-
-afterEach( () => {
-	// Cleanup on exiting.
-	unmountComponentAtNode( container );
-	container.remove();
-	container = null;
-} );
-
-const defaultText =
-	'We call the new editor Gutenberg. The entire editing experience has been rebuilt for media rich pages and posts.';
-
-describe( 'Basic rendering', () => {
-	it.each( [ [ 'Gutenberg' ], [ 'media' ] ] )(
-		'should highlight the singular occurance of the text "%s" in the text if it exists',
-		( highlight ) => {
-			act( () => {
-				render(
-					<TextHighlight
-						text={ defaultText }
-						highlight={ highlight }
-					/>,
-					container
-				);
-			} );
-
-			const highlightedEls = Array.from(
-				container.querySelectorAll( 'mark' )
-			);
-
-			highlightedEls.forEach( ( el ) => {
-				expect( el.innerHTML ).toEqual(
-					expect.stringContaining( highlight )
-				);
-			} );
-		}
-	);
-
-	it( 'should highlight multiple occurances of the string every time it exists in the text', () => {
-		const highlight = 'edit';
-
-		act( () => {
-			render(
-				<TextHighlight text={ defaultText } highlight={ highlight } />,
-				container
-			);
-		} );
-
-		const highlightedEls = Array.from(
-			container.querySelectorAll( 'mark' )
-		);
-
-		expect( highlightedEls ).toHaveLength( 2 );
-
-		highlightedEls.forEach( ( el ) => {
-			expect( el.innerHTML ).toEqual(
-				expect.stringContaining( highlight )
-			);
-		} );
-	} );
-
-	it( 'should highlight occurances of a string regardless of capitalisation', () => {
-		const highlight = 'The'; // Note this occurs in both sentance of lowercase forms.
-
-		act( () => {
-			render(
-				<TextHighlight text={ defaultText } highlight={ highlight } />,
-				container
-			);
-		} );
-
-		const highlightedEls = Array.from(
-			container.querySelectorAll( 'mark' )
-		);
-
-		// Our component matcher is case insensitive so string.Containing will
-		// return a false failure.
-		const regex = new RegExp( highlight, 'i' );
-
-		expect( highlightedEls ).toHaveLength( 2 );
-
-		highlightedEls.forEach( ( el ) => {
-			expect( el.innerHTML ).toMatch( regex );
-		} );
-	} );
-
-	it( 'should not highlight a string that is not in the text', () => {
-		const highlight = 'Antidisestablishmentarianism';
-
-		act( () => {
-			render(
-				<TextHighlight text={ defaultText } highlight={ highlight } />,
-				container
-			);
-		} );
-
-		const highlightedEls = Array.from(
-			container.querySelectorAll( 'mark' )
-		);
-
-		expect( highlightedEls ).toHaveLength( 0 );
-	} );
-} );

package/src/tip/index.js

@@ -1,24 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { Icon, tip } from '@wordpress/icons';
-
-/**
- * @typedef Props
- * @property {import('react').ReactNode} children Children to render in the tip.
- */
-
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
- */
-function Tip( props ) {
-	return (
-		<div className="components-tip">
-			<Icon icon={ tip } />
-			<p>{ props.children }</p>
-		</div>
-	);
-}
-
-export default Tip;