@wordpress/components 19.14.0 → 19.15.0

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