@wordpress/components 19.12.0 → 19.15.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/external-link/stories/index.js

@@ -1,23 +0,0 @@
-/**
- * External dependencies
- */
-import { text } from '@storybook/addon-knobs';
-/**
- * Internal dependencies
- */
-import ExternalLink from '../';
-
-export default {
-	title: 'Components/ExternalLink',
-	component: ExternalLink,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	const title = text( 'children', 'WordPress' );
-	const href = text( 'href', 'https://wordpress.org' );
-
-	return <ExternalLink href={ href }>{ title }</ExternalLink>;
-};

package/src/form-toggle/index.js

@@ -1,37 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-import { noop } from 'lodash';
-
-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,75 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-import { noop } from 'lodash';
-
-/**
- * Internal dependencies
- */
-import FormToggle 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 );
-		} );
-	} );
-} );