@wordpress/components 19.11.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/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.tsx

@@ -1,196 +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';
-import type { ForwardedRef } from 'react';
-
-/**
- * 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';
-import type { DateTimePickerProps } from './types';
-
-export { DatePicker, TimePicker };
-
-function UnforwardedDateTimePicker(
-	{
-		currentDate,
-		is12Hour,
-		isInvalidDate,
-		onMonthPreviewed = noop,
-		onChange,
-		events,
-	}: DateTimePickerProps,
-	ref: ForwardedRef< any >
-) {
-	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>
-	);
-}
-
-/**
- * DateTimePicker is a React component that renders a calendar and clock for
- * date and time selection. The calendar and clock components can be accessed
- * individually using the `DatePicker` and `TimePicker` components respectively.
- *
- * ```jsx
- * import { DateTimePicker } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const MyDateTimePicker = () => {
- *   const [ date, setDate ] = useState( new Date() );
- *
- *   return (
- *     <DateTimePicker
- *       currentDate={ date }
- *       onChange={ ( newDate ) => setDate( newDate ) }
- *       is12Hour
- *     />
- *   );
- * };
- * ```
- */
-export const DateTimePicker = forwardRef( UnforwardedDateTimePicker );
-
-export default DateTimePicker;