@wordpress/components 19.17.0 → 20.0.0

package/src/placeholder/test/index.js

@@ -1,163 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-
-/**
- * WordPress dependencies
- */
-import { more } from '@wordpress/icons';
-import { useResizeObserver } from '@wordpress/compose';
-
-/**
- * Internal dependencies
- */
-import Placeholder from '../';
-
-jest.mock( '@wordpress/compose', () => {
-	return {
-		...jest.requireActual( '@wordpress/compose' ),
-		useResizeObserver: jest.fn( () => [] ),
-	};
-} );
-
-describe( 'Placeholder', () => {
-	beforeEach( () => {
-		useResizeObserver.mockReturnValue( [
-			<div key="1" />,
-			{ width: 320 },
-		] );
-	} );
-
-	describe( 'basic rendering', () => {
-		it( 'should by default render label section and fieldset.', () => {
-			const placeholder = shallow( <Placeholder /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-			const placeholderInstructions = placeholder.find(
-				'.components-placeholder__instructions'
-			);
-			const placeholderFieldset = placeholder.find(
-				'.components-placeholder__fieldset'
-			);
-
-			expect( placeholder.hasClass( 'components-placeholder' ) ).toBe(
-				true
-			);
-			// Test for empty label.
-			expect( placeholderLabel.exists() ).toBe( true );
-			expect( placeholderLabel.find( 'Dashicon' ).exists() ).toBe(
-				false
-			);
-			// Test for non existant instructions.
-			expect( placeholderInstructions.exists() ).toBe( false );
-			// Test for empty fieldset.
-			expect( placeholderFieldset.exists() ).toBe( true );
-		} );
-
-		it( 'should render an Icon in the label section', () => {
-			const placeholder = shallow( <Placeholder icon={ more } /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-
-			expect( placeholderLabel.exists() ).toBe( true );
-			expect( placeholderLabel.find( 'Icon' ).exists() ).toBe( true );
-		} );
-
-		it( 'should render a label section', () => {
-			const label = 'WordPress';
-			const placeholder = shallow( <Placeholder label={ label } /> );
-			const placeholderLabel = placeholder.find(
-				'.components-placeholder__label'
-			);
-			const child = placeholderLabel.childAt( 1 );
-
-			expect( child.text() ).toBe( label );
-		} );
-
-		it( 'should display an instructions element', () => {
-			const element = <div>Instructions</div>;
-			const placeholder = shallow(
-				<Placeholder instructions={ element } />
-			);
-			const placeholderInstructions = placeholder.find(
-				'.components-placeholder__instructions'
-			);
-			const child = placeholderInstructions.childAt( 0 );
-
-			expect( placeholderInstructions.exists() ).toBe( true );
-			expect( child.matchesElement( element ) ).toBe( true );
-		} );
-
-		it( 'should display a fieldset from the children property', () => {
-			const element = <div>Fieldset</div>;
-			const placeholder = shallow( <Placeholder children={ element } /> );
-			const placeholderFieldset = placeholder.find(
-				'fieldset.components-placeholder__fieldset'
-			);
-			const child = placeholderFieldset.childAt( 0 );
-
-			expect( placeholderFieldset.exists() ).toBe( true );
-			expect( child.matchesElement( element ) ).toBe( true );
-		} );
-
-		it( 'should display a legend if instructions are passed', () => {
-			const element = <div>Fieldset</div>;
-			const instructions = 'Choose an option.';
-			const placeholder = shallow(
-				<Placeholder
-					children={ element }
-					instructions={ instructions }
-				/>
-			);
-			const placeholderLegend = placeholder.find(
-				'legend.components-placeholder__instructions'
-			);
-
-			expect( placeholderLegend.exists() ).toBe( true );
-			expect( placeholderLegend.text() ).toEqual( instructions );
-		} );
-
-		it( 'should add an additional className to the top container', () => {
-			const placeholder = shallow(
-				<Placeholder className="wp-placeholder" />
-			);
-			expect( placeholder.hasClass( 'wp-placeholder' ) ).toBe( true );
-		} );
-
-		it( 'should add additional props to the top level container', () => {
-			const placeholder = shallow( <Placeholder test="test" /> );
-			expect( placeholder.prop( 'test' ) ).toBe( 'test' );
-		} );
-	} );
-
-	describe( 'resize aware', () => {
-		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
-			useResizeObserver.mockReturnValue( [
-				<div key="1" />,
-				{ width: 480 },
-			] );
-
-			const placeholder = shallow( <Placeholder /> );
-
-			expect( placeholder.hasClass( 'is-large' ) ).toBe( true );
-			expect( placeholder.hasClass( 'is-medium' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-small' ) ).toBe( false );
-		} );
-
-		it( 'should assign modifier class', () => {
-			useResizeObserver.mockReturnValue( [
-				<div key="1" />,
-				{ width: null },
-			] );
-
-			const placeholder = shallow( <Placeholder /> );
-
-			expect( placeholder.hasClass( 'is-large' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-medium' ) ).toBe( false );
-			expect( placeholder.hasClass( 'is-small' ) ).toBe( false );
-		} );
-	} );
-} );

package/src/swatch/index.tsx

@@ -1,22 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { swatch } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import Icon from '../icon';
-import type { SwatchProps } from './types';
-
-// This component will be deprecated. Use `ColorIndicator` instead.
-// TODO: Consolidate this component with `ColorIndicator`.
-function Swatch( { fill }: SwatchProps ) {
-	return fill ? (
-		<span className="components-swatch" style={ { background: fill } } />
-	) : (
-		<Icon icon={ swatch } />
-	);
-}
-
-export default Swatch;

package/src/swatch/style.scss

@@ -1,21 +0,0 @@
-.components-swatch {
-	width: 18px;
-	height: 18px;
-	border-radius: 50%;
-	color: transparent;
-	background: transparent;
-
-	// Regular border doesn't seem to work in the toolbar button, but pseudo-selector border does.
-	&::after {
-		content: "";
-		display: block;
-		width: 100%;
-		height: 100%;
-		border: $border-width solid rgba(0, 0, 0, 0.2);
-		border-radius: 50%;
-	}
-}
-
-.components-button.has-icon.has-text .components-swatch {
-	margin-right: $grid-unit;
-}

package/src/swatch/types.ts

@@ -1,11 +0,0 @@
-/**
- * External dependencies
- */
-import type { CSSProperties } from 'react';
-
-export type SwatchProps = {
-	/**
-	 * The color to display in the swatch.
-	 */
-	fill?: CSSProperties[ 'background' ];
-};

package/src/toggle-group-control/stories/index.js

@@ -1,203 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { formatLowercase, formatUppercase } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import {
-	ToggleGroupControl,
-	ToggleGroupControlOption,
-	ToggleGroupControlOptionIcon,
-} from '../index';
-import { View } from '../../view';
-import Button from '../../button';
-
-export default {
-	component: ToggleGroupControl,
-	title: 'Components (Experimental)/ToggleGroupControl',
-	argTypes: {
-		size: {
-			control: 'select',
-			options: [ 'default', '__unstable-large' ],
-		},
-	},
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const KNOBS_GROUPS = {
-	ToggleGroupControl: 'ToggleGroupControl',
-	ToggleGroupControlOption: 'ToggleGroupControlOption',
-};
-
-const _default = ( { options, ...props } ) => {
-	const [ value, setValue ] = useState( options[ 0 ].value );
-	const label = text(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: label`,
-		'Toggle Group Control',
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-
-	const hideLabelFromVision = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: hideLabelFromVision`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const isBlock = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: isBlock (render as a css block element)`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const help = text(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: help`,
-		undefined,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-	const isAdaptiveWidth = boolean(
-		`${ KNOBS_GROUPS.ToggleGroupControl }: isAdaptiveWidth`,
-		false,
-		KNOBS_GROUPS.ToggleGroupControl
-	);
-
-	const controlOptions = options.map( ( option, index ) => (
-		<ToggleGroupControlOption
-			key={ option.value }
-			value={ option.value }
-			label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				option.label,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-			aria-label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: aria-label`,
-				option[ 'aria-label' ],
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-			showTooltip={ boolean(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: showTooltip`,
-				option.showTooltip,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-		/>
-	) );
-
-	return (
-		<View>
-			<ToggleGroupControl
-				{ ...props }
-				onChange={ setValue }
-				value={ value }
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-				help={ help }
-				isBlock={ isBlock }
-				isAdaptiveWidth={ isAdaptiveWidth }
-			>
-				{ controlOptions }
-			</ToggleGroupControl>
-		</View>
-	);
-};
-
-export const Default = _default.bind( {} );
-Default.args = {
-	options: [
-		{ value: 'left', label: 'Left' },
-		{ value: 'center', label: 'Center' },
-		{ value: 'right', label: 'Right' },
-		{ value: 'justify', label: 'Justify' },
-	],
-	size: 'default',
-};
-
-export const WithTooltip = _default.bind( {} );
-WithTooltip.args = {
-	...Default.args,
-	options: [
-		{ value: 1, label: '1', showTooltip: true, 'aria-label': 'One' },
-		{ value: 2, label: '2', showTooltip: true, 'aria-label': 'Two' },
-		{ value: 3, label: '3', showTooltip: true, 'aria-label': 'Three' },
-	],
-};
-
-export const WithAriaLabel = _default.bind( {} );
-WithAriaLabel.args = {
-	...Default.args,
-	options: [
-		{ value: 'asc', label: 'A→Z', 'aria-label': 'Ascending' },
-		{ value: 'desc', label: 'Z→A', 'aria-label': 'Descending' },
-	],
-};
-
-export const WithIcons = ( props ) => {
-	const [ state, setState ] = useState();
-	return (
-		<ToggleGroupControl
-			{ ...props }
-			onChange={ setState }
-			value={ state }
-			label={ 'With icons' }
-			hideLabelFromVision
-		>
-			<ToggleGroupControlOptionIcon
-				value="uppercase"
-				icon={ formatUppercase }
-				showTooltip={ true }
-				aria-label="Uppercase"
-			/>
-			<ToggleGroupControlOptionIcon
-				value="lowercase"
-				icon={ formatLowercase }
-				showTooltip={ true }
-				aria-label="Lowercase"
-			/>
-		</ToggleGroupControl>
-	);
-};
-WithIcons.args = {
-	...Default.args,
-};
-
-export const WithReset = ( props ) => {
-	const [ alignState, setAlignState ] = useState();
-	const aligns = [ 'Left', 'Center', 'Right' ];
-	const alignOptions = aligns.map( ( key, index ) => (
-		<ToggleGroupControlOption
-			key={ key }
-			value={ key }
-			label={ text(
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
-				key,
-				`${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
-			) }
-		/>
-	) );
-	return (
-		<View>
-			<ToggleGroupControl
-				{ ...props }
-				onChange={ setAlignState }
-				value={ alignState }
-				label={ 'Toggle Group Control' }
-				hideLabelFromVision
-			>
-				{ alignOptions }
-			</ToggleGroupControl>
-			<Button onClick={ () => setAlignState( undefined ) } isTertiary>
-				Reset
-			</Button>
-		</View>
-	);
-};
-WithReset.args = {
-	...Default.args,
-};

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -1,210 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ToolsPanel first and last panel items should apply first/last classes to appropriate items 1`] = `
-.emotion-0 {
-  display: grid;
-  gap: calc( 4px * 3 );
-  grid-template-columns: repeat( 2, 1fr );
-  grid-template-columns: repeat( 2, minmax(0, 1fr) );
-  -webkit-column-gap: calc(4px * 4);
-  column-gap: calc(4px * 4);
-  row-gap: calc(4px * 6);
-  border-top: 1px solid #ddd;
-  margin-top: -1px;
-  padding: calc(4px * 4);
-}
-
-.emotion-0>div:not( :first-of-type ) {
-  display: grid;
-  grid-template-columns: repeat( 2, minmax(0, 1fr) );
-  -webkit-column-gap: calc(4px * 4);
-  column-gap: calc(4px * 4);
-  row-gap: calc(4px * 6);
-  grid-column: 1/-1;
-}
-
-.emotion-2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  width: 100%;
-  grid-column: 1/-1;
-  gap: calc(4px * 2);
-}
-
-.emotion-2>*+*:not( marquee ) {
-  margin-left: calc(4px * 2);
-}
-
-.emotion-2>* {
-  min-width: 0;
-}
-
-.emotion-2 .components-dropdown-menu {
-  margin: calc(4px * -1) 0;
-  line-height: 0;
-}
-
-.emotion-2.emotion-2.emotion-2.emotion-2 .components-dropdown-menu__toggle {
-  padding: 0;
-  min-width: calc(4px * 6);
-}
-
-.emotion-4 {
-  color: #1e1e1e;
-  line-height: 1.2;
-  margin: 0;
-  color: #1e1e1e;
-  font-size: calc(1.95 * 13px);
-  font-weight: 600;
-  display: block;
-  font-size: inherit;
-  font-weight: 500;
-  line-height: normal;
-}
-
-.emotion-4.emotion-4 {
-  margin: 0;
-}
-
-.emotion-6 {
-  grid-column: 1/-1;
-  display: none;
-}
-
-.emotion-6>div,
-.emotion-6>fieldset {
-  padding-bottom: 0;
-  margin-bottom: 0;
-  max-width: 100%;
-}
-
-.emotion-6.emotion-6 .ej5x27r4 {
-  margin-bottom: 0;
-}
-
-.emotion-6.emotion-6 .ej5x27r4 .ej5x27r3:last-child {
-  margin-bottom: 0;
-}
-
-.emotion-6 .ej5x27r1 {
-  margin-bottom: 0;
-}
-
-.emotion-6.emotion-6 .em5sgkm3 label {
-  line-height: 1.4em;
-}
-
-.emotion-8 {
-  grid-column: 1/-1;
-}
-
-.emotion-8>div,
-.emotion-8>fieldset {
-  padding-bottom: 0;
-  margin-bottom: 0;
-  max-width: 100%;
-}
-
-.emotion-8.emotion-8 .ej5x27r4 {
-  margin-bottom: 0;
-}
-
-.emotion-8.emotion-8 .ej5x27r4 .ej5x27r3:last-child {
-  margin-bottom: 0;
-}
-
-.emotion-8 .ej5x27r1 {
-  margin-bottom: 0;
-}
-
-.emotion-8.emotion-8 .em5sgkm3 label {
-  line-height: 1.4em;
-}
-
-<div>
-  <div
-    class="components-grid components-tools-panel emotion-0 emotion-1"
-    data-wp-c16t="true"
-    data-wp-component="ToolsPanel"
-  >
-    <div
-      class="components-flex components-h-stack components-tools-panel-header emotion-2 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelHeader"
-    >
-      <h2
-        class="components-truncate components-text components-heading emotion-4 emotion-1"
-        data-wp-c16t="true"
-        data-wp-component="Heading"
-      >
-        Panel header
-      </h2>
-      <div
-        class="components-dropdown components-dropdown-menu"
-        tabindex="-1"
-      >
-        <button
-          aria-expanded="false"
-          aria-haspopup="true"
-          aria-label="Panel header options"
-          class="components-button components-dropdown-menu__toggle is-small has-icon"
-          type="button"
-        >
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            height="24"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-    <div
-      class="components-tools-panel-item emotion-6 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    />
-    <div
-      class="components-tools-panel-item first emotion-8 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    >
-      <div>
-        Item 2
-      </div>
-    </div>
-    <div
-      class="components-tools-panel-item last emotion-8 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    >
-      <div>
-        Item 3
-      </div>
-    </div>
-    <div
-      class="components-tools-panel-item emotion-6 emotion-1"
-      data-wp-c16t="true"
-      data-wp-component="ToolsPanelItem"
-    />
-  </div>
-</div>
-`;