@wordpress/components 19.12.0 → 19.15.0

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;

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/tree-select/index.js

@@ -1,48 +0,0 @@
-/**
- * External dependencies
- */
-import { unescape as unescapeString, repeat, flatMap, compact } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { SelectControl } from '../';
-
-function getSelectOptions( tree, level = 0 ) {
-	return flatMap( tree, ( treeNode ) => [
-		{
-			value: treeNode.id,
-			label:
-				repeat( '\u00A0', level * 3 ) + unescapeString( treeNode.name ),
-		},
-		...getSelectOptions( treeNode.children || [], level + 1 ),
-	] );
-}
-
-export default function TreeSelect( {
-	label,
-	noOptionLabel,
-	onChange,
-	selectedId,
-	tree,
-	...props
-} ) {
-	const options = useMemo( () => {
-		return compact( [
-			noOptionLabel && { value: '', label: noOptionLabel },
-			...getSelectOptions( tree ),
-		] );
-	}, [ noOptionLabel, tree ] );
-
-	return (
-		<SelectControl
-			{ ...{ label, options, onChange } }
-			value={ selectedId }
-			{ ...props }
-		/>
-	);
-}

package/src/tree-select/stories/index.js

@@ -1,80 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, object, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import TreeSelect from '../';
-
-export default {
-	title: 'Components/TreeSelect',
-	component: TreeSelect,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const TreeSelectWithState = ( props ) => {
-	const [ selection, setSelection ] = useState();
-
-	return (
-		<TreeSelect
-			{ ...props }
-			onChange={ setSelection }
-			selectedId={ selection }
-		/>
-	);
-};
-
-export const _default = () => {
-	const label = text( 'Label', 'Label Text' );
-	const noOptionLabel = text( 'No Option Label', 'No parent page' );
-	const hideLabelFromVision = boolean( 'Hide Label From Vision', false );
-	const help = text(
-		'Help Text',
-		'Help text to explain the select control.'
-	);
-	const tree = object( 'Tree', [
-		{
-			name: 'Page 1',
-			id: 'p1',
-			children: [
-				{ name: 'Descend 1 of page 1', id: 'p11' },
-				{ name: 'Descend 2 of page 1', id: 'p12' },
-			],
-		},
-		{
-			name: 'Page 2',
-			id: 'p2',
-			children: [
-				{
-					name: 'Descend 1 of page 2',
-					id: 'p21',
-					children: [
-						{
-							name: 'Descend 1 of Descend 1 of page 2',
-							id: 'p211',
-						},
-					],
-				},
-			],
-		},
-	] );
-
-	return (
-		<TreeSelectWithState
-			label={ label }
-			noOptionLabel={ noOptionLabel }
-			hideLabelFromVision={ hideLabelFromVision }
-			help={ help }
-			tree={ tree }
-		/>
-	);
-};

package/src/truncate/stories/index.js

@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import { number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import { Truncate } from '..';
-
-export default {
-	component: Truncate,
-	title: 'Components (Experimental)/Truncate',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const numberOfLines = number( 'numberOfLines', 2 );
-	return (
-		<Truncate numberOfLines={ numberOfLines }>
-			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
-			facilisis dictum tortor, eu tincidunt justo scelerisque tincidunt.
-			Duis semper dui id augue malesuada, ut feugiat nisi aliquam.
-			Vestibulum venenatis diam sem, finibus dictum massa semper in. Nulla
-			facilisi. Nunc vulputate faucibus diam, in lobortis arcu ornare vel.
-			In dignissim nunc sed facilisis finibus. Etiam imperdiet mattis
-			arcu, sed rutrum sapien blandit gravida. Aenean sollicitudin neque
-			eget enim blandit, sit amet rutrum leo vehicula. Nunc malesuada
-			ultricies eros ut faucibus. Aliquam erat volutpat. Nulla nec feugiat
-			risus. Vivamus iaculis dui aliquet ante ultricies feugiat.
-			Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-			posuere cubilia curae; Vivamus nec pretium velit, sit amet
-			consectetur ante. Praesent porttitor ex eget fermentum mattis.
-		</Truncate>
-	);
-};

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

package/src/z-stack/stories/index.js

@@ -1,70 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, number } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import { Elevation } from '../../elevation';
-import { HStack } from '../../h-stack';
-import { View } from '../../view';
-import { ZStack } from '..';
-
-export default {
-	component: ZStack,
-	title: 'Components (Experimental)/ZStack',
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const Avatar = ( { backgroundColor } ) => {
-	return (
-		<View>
-			<View
-				style={ {
-					border: '3px solid black',
-					borderRadius: '9999px',
-					height: '48px',
-					width: '48px',
-					backgroundColor,
-				} }
-			/>
-			<Elevation
-				borderRadius={ 9999 }
-				isInteractive={ false }
-				value={ 3 }
-			/>
-		</View>
-	);
-};
-
-const AnimatedAvatars = () => {
-	const props = {
-		offset: number( 'offset', 20 ),
-		isLayered: boolean( 'isLayered', true ),
-		isReversed: boolean( 'isReversed', false ),
-	};
-
-	return (
-		<HStack>
-			<View>
-				<ZStack { ...props }>
-					<Avatar backgroundColor="#444" />
-					<Avatar backgroundColor="#777" />
-					<Avatar backgroundColor="#aaa" />
-					<Avatar backgroundColor="#fff" />
-				</ZStack>
-			</View>
-		</HStack>
-	);
-};
-
-export const _default = () => {
-	return (
-		<View>
-			<AnimatedAvatars />
-		</View>
-	);
-};