@wordpress/components 19.14.0 → 19.17.0

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

package/src/tip/stories/index.js

@@ -1,26 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import Tip from '../';
-
-export default {
-	title: 'Components/Tip',
-	component: Tip,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const tipText = text( 'Text', 'An example tip' );
-	return (
-		<Tip>
-			<p>{ tipText }</p>
-		</Tip>
-	);
-};

package/src/visually-hidden/stories/index.js

@@ -1,42 +0,0 @@
-/**
- * Internal dependencies
- */
-import { VisuallyHidden } from '..';
-
-export default {
-	title: 'Components/VisuallyHidden',
-	component: VisuallyHidden,
-};
-
-export const _default = () => (
-	<>
-		<VisuallyHidden>This should not show.</VisuallyHidden>
-		<div>
-			This text will{ ' ' }
-			<VisuallyHidden as="span">but not inline </VisuallyHidden> always
-			show.
-		</div>
-	</>
-);
-
-export const withForwardedProps = () => (
-	<>
-		Additional props can be passed to VisuallyHidden and are forwarded to
-		the rendered element.{ ' ' }
-		<VisuallyHidden as="span" data-id="test">
-			Check out my data attribute!{ ' ' }
-		</VisuallyHidden>
-		Inspect the HTML to see!
-	</>
-);
-
-export const withAdditionalClassNames = () => (
-	<>
-		Additional class names passed to VisuallyHidden extend the component
-		class name.{ ' ' }
-		<VisuallyHidden as="label" className="test-input">
-			Check out my class!{ ' ' }
-		</VisuallyHidden>
-		Inspect the HTML to see!
-	</>
-);

package/src/visually-hidden/test/index.js

@@ -1,19 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { VisuallyHidden } from '..';
-
-describe( 'VisuallyHidden', () => {
-	it( 'should render correctly', () => {
-		const { container } = render(
-			<VisuallyHidden>This is hidden</VisuallyHidden>
-		);
-
-		expect( container.firstChild ).toMatchSnapshot();
-	} );
-} );