@wordpress/components 19.13.0 → 19.14.0

package/src/border-control/stories/index.js

@@ -1,119 +0,0 @@
-/**
- * External dependencies
- */
-import styled from '@emotion/styled';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { BorderControl } from '../';
-import { Provider as SlotFillProvider } from '../../slot-fill';
-import Popover from '../../popover';
-
-export default {
-	title: 'Components (Experimental)/BorderControl',
-	component: BorderControl,
-};
-
-// Available border colors.
-const colors = [
-	{ name: 'Gray 0', color: '#f6f7f7' },
-	{ name: 'Gray 5', color: '#dcdcde' },
-	{ name: 'Gray 20', color: '#a7aaad' },
-	{ name: 'Gray 70', color: '#3c434a' },
-	{ name: 'Gray 100', color: '#101517' },
-	{ name: 'Blue 20', color: '#72aee6' },
-	{ name: 'Blue 40', color: '#3582c4' },
-	{ name: 'Blue 70', color: '#0a4b78' },
-	{ name: 'Red 40', color: '#e65054' },
-	{ name: 'Red 70', color: '#8a2424' },
-	{ name: 'Green 10', color: '#68de7c' },
-	{ name: 'Green 40', color: '#00a32a' },
-	{ name: 'Green 60', color: '#007017' },
-	{ name: 'Yellow 10', color: '#f2d675' },
-	{ name: 'Yellow 40', color: '#bd8600' },
-];
-
-// Multiple origin colors.
-const multipleOriginColors = [
-	{
-		name: 'Default',
-		colors: [
-			{ name: 'Gray 0', color: '#f6f7f7' },
-			{ name: 'Gray 5', color: '#dcdcde' },
-			{ name: 'Gray 20', color: '#a7aaad' },
-			{ name: 'Gray 70', color: '#3c434a' },
-			{ name: 'Gray 100', color: '#101517' },
-		],
-	},
-	{
-		name: 'Theme',
-		colors: [
-			{ name: 'Blue 20', color: '#72aee6' },
-			{ name: 'Blue 40', color: '#3582c4' },
-			{ name: 'Blue 70', color: '#0a4b78' },
-			{ name: 'Red 40', color: '#e65054' },
-			{ name: 'Red 70', color: '#8a2424' },
-		],
-	},
-	{
-		name: 'User',
-		colors: [
-			{ name: 'Green 10', color: '#68de7c' },
-			{ name: 'Green 40', color: '#00a32a' },
-			{ name: 'Green 60', color: '#007017' },
-			{ name: 'Yellow 10', color: '#f2d675' },
-			{ name: 'Yellow 40', color: '#bd8600' },
-		],
-	},
-];
-
-const _default = ( props ) => {
-	const [ border, setBorder ] = useState();
-	const onChange = ( newBorder ) => setBorder( newBorder );
-	const { __experimentalHasMultipleOrigins } = props;
-
-	return (
-		<SlotFillProvider>
-			<WrapperView>
-				<BorderControl
-					{ ...props }
-					colors={
-						__experimentalHasMultipleOrigins
-							? multipleOriginColors
-							: colors
-					}
-					label="Border"
-					onChange={ onChange }
-					value={ border }
-					width={ ! props.isCompact && props.width }
-				/>
-			</WrapperView>
-			<Popover.Slot />
-		</SlotFillProvider>
-	);
-};
-
-export const Default = _default.bind( {} );
-Default.args = {
-	disableCustomColors: false,
-	enableAlpha: true,
-	enableStyle: true,
-	isCompact: true,
-	shouldSanitizeBorder: true,
-	showDropdownHeader: false,
-	width: '110px',
-	withSlider: true,
-	__experimentalIsRenderedInSidebar: false,
-	__experimentalHasMultipleOrigins: false,
-	__next36pxDefaultSize: false,
-};
-
-const WrapperView = styled.div`
-	max-width: 280px;
-`;

package/src/color-indicator/index.js

@@ -1,16 +0,0 @@
-// @ts-nocheck
-
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-const ColorIndicator = ( { className, colorValue, ...props } ) => (
-	<span
-		className={ classnames( 'component-color-indicator', className ) }
-		style={ { background: colorValue } }
-		{ ...props }
-	/>
-);
-
-export default ColorIndicator;

package/src/color-indicator/stories/index.js

@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-
-/**
- * Internal dependencies
- */
-import ColorIndicator from '../';
-
-export default {
-	title: 'Components/ColorIndicator',
-	component: ColorIndicator,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const color = text( 'Color', '#0073aa' );
-	return <ColorIndicator colorValue={ color } />;
-};

package/src/color-indicator/test/__snapshots__/index.js.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ColorIndicator matches the snapshot 1`] = `
-<span
-  aria-label="sample label"
-  className="component-color-indicator"
-  style={
-    Object {
-      "background": "#fff",
-    }
-  }
-/>
-`;

package/src/form-toggle/index.js

@@ -1,38 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-export const noop = () => {};
-
-function FormToggle( {
-	className,
-	checked,
-	id,
-	disabled,
-	onChange = noop,
-	...props
-} ) {
-	const wrapperClasses = classnames( 'components-form-toggle', className, {
-		'is-checked': checked,
-		'is-disabled': disabled,
-	} );
-
-	return (
-		<span className={ wrapperClasses }>
-			<input
-				className="components-form-toggle__input"
-				id={ id }
-				type="checkbox"
-				checked={ checked }
-				onChange={ onChange }
-				disabled={ disabled }
-				{ ...props }
-			/>
-			<span className="components-form-toggle__track"></span>
-			<span className="components-form-toggle__thumb"></span>
-		</span>
-	);
-}
-
-export default FormToggle;

package/src/form-toggle/stories/index.js

@@ -1,28 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import FormToggle from '../';
-
-export default { title: 'Components/FormToggle', component: FormToggle };
-
-const FormToggleWithState = ( { checked, ...props } ) => {
-	const [ isChecked, setChecked ] = useState( checked );
-	return (
-		<FormToggle
-			{ ...props }
-			checked={ isChecked }
-			onChange={ () => {
-				setChecked( ! isChecked );
-			} }
-		/>
-	);
-};
-
-export const _default = () => {
-	return <FormToggleWithState checked />;
-};

package/src/form-toggle/test/index.js

@@ -1,74 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * Internal dependencies
- */
-import FormToggle, { noop } from '../';
-
-describe( 'FormToggle', () => {
-	describe( 'basic rendering', () => {
-		it( 'should render a span element with an unchecked checkbox', () => {
-			const formToggle = shallow( <FormToggle /> );
-			expect( formToggle.hasClass( 'components-form-toggle' ) ).toBe(
-				true
-			);
-			expect( formToggle.hasClass( 'is-checked' ) ).toBe( false );
-			expect( formToggle.type() ).toBe( 'span' );
-		} );
-
-		it( 'should render a checked checkbox and change the accessibility text to On when providing checked prop', () => {
-			const formToggle = shallow( <FormToggle checked /> );
-			expect( formToggle.hasClass( 'is-checked' ) ).toBe( true );
-			expect(
-				formToggle
-					.find( '.components-form-toggle__input' )
-					.prop( 'checked' )
-			).toBe( true );
-		} );
-
-		it( 'should render with an additional className', () => {
-			const formToggle = shallow( <FormToggle className="testing" /> );
-			expect( formToggle.hasClass( 'testing' ) ).toBe( true );
-		} );
-
-		it( 'should render an id prop for the input checkbox', () => {
-			// Disabled because of our rule restricting literal IDs, preferring
-			// `withInstanceId`. In this case, it's fine to use literal IDs.
-			// eslint-disable-next-line no-restricted-syntax
-			const formToggle = shallow( <FormToggle id="test" /> );
-			expect(
-				formToggle.find( '.components-form-toggle__input' ).prop( 'id' )
-			).toBe( 'test' );
-		} );
-
-		it( 'should render a checkbox with a noop onChange', () => {
-			const formToggle = shallow( <FormToggle /> );
-			const checkBox = formToggle
-				.prop( 'children' )
-				.find(
-					( child ) =>
-						'input' === child.type &&
-						'checkbox' === child.props.type
-				);
-			expect( checkBox.props.onChange ).toBe( noop );
-		} );
-
-		it( 'should render a checkbox with a user-provided onChange', () => {
-			const testFunction = ( event ) => event;
-			const formToggle = shallow(
-				<FormToggle onChange={ testFunction } />
-			);
-			const checkBox = formToggle
-				.prop( 'children' )
-				.find(
-					( child ) =>
-						'input' === child.type &&
-						'checkbox' === child.props.type
-				);
-			expect( checkBox.props.onChange ).toBe( testFunction );
-		} );
-	} );
-} );

package/src/heading/test/index.js

@@ -1,67 +0,0 @@
-/**
- * External dependencies
- */
-import { render } from '@testing-library/react';
-
-/**
- * Internal dependencies
- */
-import { Heading } from '../';
-
-describe( 'props', () => {
-	let base;
-	beforeEach( () => {
-		base = render( <Heading>Code is Poetry</Heading> );
-	} );
-
-	test( 'should render correctly', () => {
-		expect( base.container.firstChild ).toMatchSnapshot();
-	} );
-
-	test( 'should render level as a number', () => {
-		const { container } = render(
-			<Heading level={ 4 }>Code is Poetry</Heading>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should render level as a string', () => {
-		const { container } = render(
-			<Heading level="4">Code is Poetry</Heading>
-		);
-		expect( container.firstChild ).toMatchStyleDiffSnapshot(
-			base.container.firstChild
-		);
-	} );
-
-	test( 'should allow as prop', () => {
-		const { container } = render(
-			<Heading level="1" as="span">
-				Code is Poetry
-			</Heading>
-		);
-		expect( container.firstChild.tagName ).toBe( 'SPAN' );
-	} );
-
-	test( 'should render a11y props when not using a semantic element', () => {
-		const { container } = render(
-			<Heading level="3" as="div">
-				Code is Poetry
-			</Heading>
-		);
-		expect( container.firstChild.getAttribute( 'role' ) ).toBe( 'heading' );
-		expect( container.firstChild.getAttribute( 'aria-level' ) ).toBe( '3' );
-	} );
-
-	test( 'should not render a11y props when using a semantic element', () => {
-		const { container } = render(
-			<Heading level="1" as="h4">
-				Code is Poetry
-			</Heading>
-		);
-		expect( container.firstChild.getAttribute( 'role' ) ).toBeNull();
-		expect( container.firstChild.getAttribute( 'aria-level' ) ).toBeNull();
-	} );
-} );

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