@wordpress/components 19.9.0 → 19.12.0

package/src/button-group/index.js

@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
-/**
- * WordPress dependencies
- */
-import { forwardRef } from '@wordpress/element';
-
-function ButtonGroup( { className, ...props }, ref ) {
-	const classes = classnames( 'components-button-group', className );
-
-	return <div ref={ ref } role="group" className={ classes } { ...props } />;
-}
-
-export default forwardRef( ButtonGroup );

package/src/button-group/stories/index.js

@@ -1,21 +0,0 @@
-/**
- * Internal dependencies
- */
-import Button from '../../button';
-import ButtonGroup from '../';
-
-export default { title: 'Components/ButtonGroup', component: ButtonGroup };
-
-export const _default = () => {
-	const style = { margin: '0 4px' };
-	return (
-		<ButtonGroup>
-			<Button variant="primary" style={ style }>
-				Button 1
-			</Button>
-			<Button variant="primary" style={ style }>
-				Button 2
-			</Button>
-		</ButtonGroup>
-	);
-};

package/src/color-picker/color-display.tsx

@@ -1,169 +0,0 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useCopyToClipboard } from '@wordpress/compose';
-import { useState, useEffect, useRef } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { Text } from '../text';
-import { Flex, FlexItem } from '../flex';
-import { Tooltip } from '../ui/tooltip';
-import type { ColorType } from './types';
-import { space } from '../ui/utils/space';
-import { COLORS } from '../utils/colors-values';
-
-interface ColorDisplayProps {
-	color: Colord;
-	colorType: ColorType;
-	enableAlpha: boolean;
-}
-
-interface DisplayProps {
-	color: Colord;
-	enableAlpha: boolean;
-}
-
-type Values = [ number, string ][];
-
-interface ValueDisplayProps {
-	values: Values;
-}
-
-const ValueDisplay = ( { values }: ValueDisplayProps ) => (
-	<>
-		{ values.map( ( [ value, abbreviation ] ) => {
-			return (
-				<FlexItem key={ abbreviation } isBlock display="flex">
-					<Text color={ COLORS.ui.theme }>{ abbreviation }</Text>
-					<Text>{ value }</Text>
-				</FlexItem>
-			);
-		} ) }
-	</>
-);
-
-const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { h, s, l, a } = color.toHsl();
-
-	const values: Values = [
-		[ Math.floor( h ), 'H' ],
-		[ Math.round( s * 100 ), 'S' ],
-		[ Math.round( l * 100 ), 'L' ],
-	];
-	if ( enableAlpha ) {
-		values.push( [ Math.round( a * 100 ), 'A' ] );
-	}
-
-	return <ValueDisplay values={ values } />;
-};
-
-const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { r, g, b, a } = color.toRgb();
-
-	const values: Values = [
-		[ r, 'R' ],
-		[ g, 'G' ],
-		[ b, 'B' ],
-	];
-
-	if ( enableAlpha ) {
-		values.push( [ Math.round( a * 100 ), 'A' ] );
-	}
-
-	return <ValueDisplay values={ values } />;
-};
-
-const HexDisplay = ( { color }: DisplayProps ) => {
-	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
-	return (
-		<FlexItem>
-			<Text color={ COLORS.ui.theme }>#</Text>
-			<Text>{ colorWithoutHash }</Text>
-		</FlexItem>
-	);
-};
-
-const getComponent = ( colorType: ColorType ) => {
-	switch ( colorType ) {
-		case 'hsl':
-			return HslDisplay;
-		case 'rgb':
-			return RgbDisplay;
-		default:
-		case 'hex':
-			return HexDisplay;
-	}
-};
-
-export const ColorDisplay = ( {
-	color,
-	colorType,
-	enableAlpha,
-}: ColorDisplayProps ) => {
-	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
-	const props = { color, enableAlpha };
-	const Component = getComponent( colorType );
-	const copyRef = useCopyToClipboard< HTMLDivElement >(
-		() => {
-			switch ( colorType ) {
-				case 'hsl': {
-					return color.toHslString();
-				}
-				case 'rgb': {
-					return color.toRgbString();
-				}
-				default:
-				case 'hex': {
-					return color.toHex();
-				}
-			}
-		},
-		() => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
-			}
-			setCopiedColor( color.toHex() );
-			copyTimer.current = setTimeout( () => {
-				setCopiedColor( null );
-				copyTimer.current = undefined;
-			}, 3000 );
-		}
-	);
-	useEffect( () => {
-		// Clear copyTimer on component unmount.
-		return () => {
-			if ( copyTimer.current ) {
-				clearTimeout( copyTimer.current );
-			}
-		};
-	}, [] );
-	return (
-		<Tooltip
-			content={
-				<Text color="white">
-					{ copiedColor === color.toHex()
-						? __( 'Copied!' )
-						: __( 'Copy' ) }
-				</Text>
-			}
-		>
-			<Flex
-				justify="flex-start"
-				gap={ space( 1 ) }
-				ref={ copyRef }
-				style={ { height: 30 } }
-			>
-				<Component { ...props } />
-			</Flex>
-		</Tooltip>
-	);
-};

package/src/date-time/index.js

@@ -1,170 +0,0 @@
-/**
- * External dependencies
- */
-// Needed to initialise the default datepicker styles.
-// See: https://github.com/airbnb/react-dates#initialize
-import 'react-dates/initialize';
-import { noop } from 'lodash';
-
-/**
- * WordPress dependencies
- */
-import { useState, forwardRef } from '@wordpress/element';
-import { __, _x } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Button from '../button';
-import { default as DatePicker } from './date';
-import { default as TimePicker } from './time';
-
-export { DatePicker, TimePicker };
-
-function DateTimePicker(
-	{
-		currentDate,
-		is12Hour,
-		isInvalidDate,
-		onMonthPreviewed = noop,
-		onChange,
-		events,
-	},
-	ref
-) {
-	const [ calendarHelpIsVisible, setCalendarHelpIsVisible ] = useState(
-		false
-	);
-
-	function onClickDescriptionToggle() {
-		setCalendarHelpIsVisible( ! calendarHelpIsVisible );
-	}
-
-	return (
-		<div ref={ ref } className="components-datetime">
-			{ ! calendarHelpIsVisible && (
-				<>
-					<TimePicker
-						currentTime={ currentDate }
-						onChange={ onChange }
-						is12Hour={ is12Hour }
-					/>
-					<DatePicker
-						currentDate={ currentDate }
-						onChange={ onChange }
-						isInvalidDate={ isInvalidDate }
-						events={ events }
-						onMonthPreviewed={ onMonthPreviewed }
-					/>
-				</>
-			) }
-			{ calendarHelpIsVisible && (
-				<>
-					<div className="components-datetime__calendar-help">
-						<h4>{ __( 'Click to Select' ) }</h4>
-						<ul>
-							<li>
-								{ __(
-									'Click the right or left arrows to select other months in the past or the future.'
-								) }
-							</li>
-							<li>
-								{ __( 'Click the desired day to select it.' ) }
-							</li>
-						</ul>
-						<h4>{ __( 'Navigating with a keyboard' ) }</h4>
-						<ul>
-							<li>
-								<abbr
-									aria-label={ _x(
-										'Enter',
-										'keyboard button'
-									) }
-								>
-									↵
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								<span>
-									{ __( 'Select the date in focus.' ) }
-								</span>
-							</li>
-							<li>
-								<abbr
-									aria-label={ __( 'Left and Right Arrows' ) }
-								>
-									←/→
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Move backward (left) or forward (right) by one day.'
-								) }
-							</li>
-							<li>
-								<abbr aria-label={ __( 'Up and Down Arrows' ) }>
-									↑/↓
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Move backward (up) or forward (down) by one week.'
-								) }
-							</li>
-							<li>
-								<abbr
-									aria-label={ __( 'Page Up and Page Down' ) }
-								>
-									{ __( 'PgUp/PgDn' ) }
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Move backward (PgUp) or forward (PgDn) by one month.'
-								) }
-							</li>
-							<li>
-								<abbr aria-label={ __( 'Home and End' ) }>
-									{ /* Translators: Home/End reffer to the 'Home' and 'End' buttons on the keyboard.*/ }
-									{ __( 'Home/End' ) }
-								</abbr>
-								{
-									' ' /* JSX removes whitespace, but a space is required for screen readers. */
-								}
-								{ __(
-									'Go to the first (Home) or last (End) day of a week.'
-								) }
-							</li>
-						</ul>
-					</div>
-				</>
-			) }
-			<div className="components-datetime__buttons">
-				{ ! calendarHelpIsVisible && currentDate && (
-					<Button
-						className="components-datetime__date-reset-button"
-						variant="link"
-						onClick={ () => onChange( null ) }
-					>
-						{ __( 'Reset' ) }
-					</Button>
-				) }
-				<Button
-					className="components-datetime__date-help-toggle"
-					variant="link"
-					onClick={ onClickDescriptionToggle }
-				>
-					{ calendarHelpIsVisible
-						? __( 'Close' )
-						: __( 'Calendar Help' ) }
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export default forwardRef( DateTimePicker );

package/src/date-time/stories/date.js

@@ -1,17 +0,0 @@
-/**
- * Internal dependencies
- */
-import DatePicker from '../date';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-export default { title: 'Components/DatePicker', component: DatePicker };
-
-export const _default = () => {
-	const [ date, setDate ] = useState();
-
-	return <DatePicker currentDate={ date } onChange={ setDate } />;
-};

package/src/date-time/stories/index.js

@@ -1,72 +0,0 @@
-/**
- * External dependencies
- */
-import { boolean, button } from '@storybook/addon-knobs';
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import DateTimePicker from '../';
-
-export default {
-	title: 'Components/DateTimePicker',
-	component: DateTimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-const DateTimePickerWithState = ( { is12Hour } ) => {
-	const [ date, setDate ] = useState();
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			is12Hour={ is12Hour }
-		/>
-	);
-};
-
-export const _default = () => {
-	const is12Hour = boolean( 'Is 12 hour (shows AM/PM)', false );
-	return <DateTimePickerWithState is12Hour={ is12Hour } />;
-};
-
-// Date utils, for demo purposes.
-const DAY_IN_MS = 24 * 60 * 60 * 1000;
-const aFewDaysAfter = ( date ) => {
-	// eslint-disable-next-line no-restricted-syntax
-	return new Date( date.getTime() + ( 1 + Math.random() * 5 ) * DAY_IN_MS );
-};
-
-const now = new Date();
-
-export const WithDaysHighlighted = () => {
-	const [ date, setDate ] = useState( now );
-
-	const [ highlights, setHighlights ] = useState( [
-		{ date: aFewDaysAfter( now ) },
-	] );
-
-	button( 'Add random highlight', () => {
-		const lastHighlight = highlights[ highlights.length - 1 ];
-		setHighlights( [
-			...highlights,
-			{ date: aFewDaysAfter( lastHighlight.date ) },
-		] );
-	} );
-
-	return (
-		<DateTimePicker
-			currentDate={ date }
-			onChange={ setDate }
-			events={ highlights }
-		/>
-	);
-};

package/src/date-time/stories/time.js

@@ -1,32 +0,0 @@
-/**
- * Internal dependencies
- */
-import TimePicker from '../time';
-
-/**
- * External dependencies
- */
-import { date, boolean } from '@storybook/addon-knobs';
-import { noop } from 'lodash';
-
-export default {
-	title: 'Components/TimePicker',
-	component: TimePicker,
-	parameters: {
-		knobs: { disable: false },
-	},
-};
-
-export const _default = () => {
-	return (
-		<TimePicker
-			currentTime={
-				new Date(
-					date( 'currentTime', new Date( '1986-10-18T11:00:00' ) )
-				)
-			}
-			is12Hour={ boolean( 'is12Hour', false ) }
-			onChange={ noop }
-		/>
-	);
-};

package/src/date-time/test/date.js

@@ -1,97 +0,0 @@
-/**
- * External dependencies
- */
-import { shallow } from 'enzyme';
-import moment from 'moment';
-
-/**
- * Internal dependencies
- */
-import DatePicker from '../date';
-
-const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss';
-
-describe( 'DatePicker', () => {
-	it( 'should pass down a moment object for currentDate', () => {
-		const currentDate = '1986-10-18T23:00:00';
-		const wrapper = shallow( <DatePicker currentDate={ currentDate } /> );
-		const date = wrapper.children().props().date;
-		expect( moment.isMoment( date ) ).toBe( true );
-		expect( date.isSame( moment( currentDate ) ) ).toBe( true );
-	} );
-
-	it( 'should pass down a null date when currentDate is set to null', () => {
-		const wrapper = shallow( <DatePicker currentDate={ null } /> );
-		expect( wrapper.children().props().date ).toBeNull();
-	} );
-
-	it( 'should pass down a moment object for now when currentDate is undefined', () => {
-		const wrapper = shallow( <DatePicker /> );
-		const date = wrapper.children().props().date;
-		expect( moment.isMoment( date ) ).toBe( true );
-	} );
-
-	describe( 'onChangeMoment', () => {
-		it( 'should call onChange with a formated date of the input', () => {
-			const onChangeSpy = jest.fn();
-			const currentDate = '1986-10-18T11:00:00';
-			const wrapper = shallow(
-				<DatePicker
-					currentDate={ currentDate }
-					onChange={ onChangeSpy }
-				/>
-			);
-			const newDate = moment();
-
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect( onChangeSpy ).toHaveBeenCalledWith(
-				newDate.format( TIMEZONELESS_FORMAT )
-			);
-		} );
-
-		it( 'should call onChange with hours, minutes, seconds of the current time when currentDate is undefined', () => {
-			let onChangeSpyArgument;
-			const onChangeSpy = ( arg ) => ( onChangeSpyArgument = arg );
-			const wrapper = shallow( <DatePicker onChange={ onChangeSpy } /> );
-			const newDate = moment( '1986-10-18T11:00:00' );
-			const current = moment();
-			const newDateWithCurrentTime = newDate.clone().set( {
-				hours: current.hours(),
-				minutes: current.minutes(),
-				seconds: current.seconds(),
-			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect(
-				moment( onChangeSpyArgument ).isSame(
-					newDateWithCurrentTime,
-					'minute'
-				)
-			).toBe( true );
-		} );
-
-		it( 'should call onChange with hours, minutes, seconds of the current time when currentDate is null', () => {
-			let onChangeSpyArgument;
-			const onChangeSpy = ( arg ) => ( onChangeSpyArgument = arg );
-			const wrapper = shallow(
-				<DatePicker currentDate={ null } onChange={ onChangeSpy } />
-			);
-			const newDate = moment( '1986-10-18T11:00:00' );
-			const current = moment();
-			const newDateWithCurrentTime = newDate.clone().set( {
-				hours: current.hours(),
-				minutes: current.minutes(),
-				seconds: current.seconds(),
-			} );
-			wrapper.childAt( 0 ).props().onDateChange( newDate );
-
-			expect(
-				moment( onChangeSpyArgument ).isSame(
-					newDateWithCurrentTime,
-					'minute'
-				)
-			).toBe( true );
-		} );
-	} );
-} );