@wordpress/components 19.15.0 → 20.0.0

package/src/duotone-picker/duotone-picker.js

@@ -14,9 +14,11 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import ColorListPicker from '../color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
+import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
+import { Spacer } from '../spacer';
 
 function DuotonePicker( {
 	clearable = true,
@@ -97,32 +99,38 @@ function DuotonePicker( {
 				)
 			}
 		>
-			{ ! disableCustomColors && ! disableCustomDuotone && (
-				<CustomDuotoneBar
-					value={ isUnset ? undefined : value }
-					onChange={ onChange }
-				/>
-			) }
-			{ ! disableCustomDuotone && (
-				<ColorListPicker
-					labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
-					colors={ colorPalette }
-					value={ isUnset ? undefined : value }
-					disableCustomColors={ disableCustomColors }
-					enableAlpha
-					onChange={ ( newColors ) => {
-						if ( ! newColors[ 0 ] ) {
-							newColors[ 0 ] = defaultDark;
-						}
-						if ( ! newColors[ 1 ] ) {
-							newColors[ 1 ] = defaultLight;
-						}
-						const newValue =
-							newColors.length >= 2 ? newColors : undefined;
-						onChange( newValue );
-					} }
-				/>
-			) }
+			<Spacer paddingTop={ 4 }>
+				<VStack spacing={ 3 }>
+					{ ! disableCustomColors && ! disableCustomDuotone && (
+						<CustomDuotoneBar
+							value={ isUnset ? undefined : value }
+							onChange={ onChange }
+						/>
+					) }
+					{ ! disableCustomDuotone && (
+						<ColorListPicker
+							labels={ [ __( 'Shadows' ), __( 'Highlights' ) ] }
+							colors={ colorPalette }
+							value={ isUnset ? undefined : value }
+							disableCustomColors={ disableCustomColors }
+							enableAlpha
+							onChange={ ( newColors ) => {
+								if ( ! newColors[ 0 ] ) {
+									newColors[ 0 ] = defaultDark;
+								}
+								if ( ! newColors[ 1 ] ) {
+									newColors[ 1 ] = defaultLight;
+								}
+								const newValue =
+									newColors.length >= 2
+										? newColors
+										: undefined;
+								onChange( newValue );
+							} }
+						/>
+					) }
+				</VStack>
+			</Spacer>
 		</CircularOptionPicker>
 	);
 }

package/src/duotone-picker/duotone-swatch.js

@@ -1,15 +1,22 @@
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import Swatch from '../swatch';
+import { swatch } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import ColorIndicator from '../color-indicator';
+import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
 
 function DuotoneSwatch( { values } ) {
-	return (
-		<Swatch
-			fill={ values && getGradientFromCSSColors( values, '135deg' ) }
+	return values ? (
+		<ColorIndicator
+			colorValue={ getGradientFromCSSColors( values, '135deg' ) }
 		/>
+	) : (
+		<Icon icon={ swatch } />
 	);
 }
 

package/src/duotone-picker/stories/duotone-picker.js

@@ -0,0 +1,66 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { DuotonePicker } from '../';
+
+export default {
+	title: 'Components/DuotonePicker',
+	component: DuotonePicker,
+	argTypes: {
+		clearable: { control: { type: 'boolean' } },
+		disableCustomColors: { control: { type: 'boolean' } },
+		disableCustomDuotone: { control: { type: 'boolean' } },
+		onChange: { action: 'onChange' },
+		unsetable: { control: { type: 'boolean' } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+
+const DUOTONE_PALETTE = [
+	{
+		colors: [ '#8c00b7', '#fcff41' ],
+		name: 'Purple and yellow',
+		slug: 'purple-yellow',
+	},
+	{
+		colors: [ '#000097', '#ff4747' ],
+		name: 'Blue and red',
+		slug: 'blue-red',
+	},
+];
+
+const COLOR_PALETTE = [
+	{ color: '#ff4747', name: 'Red', slug: 'red' },
+	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+	{ color: '#000097', name: 'Blue', slug: 'blue' },
+	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+];
+
+const Template = ( { onChange, ...args } ) => {
+	const [ value, setValue ] = useState();
+
+	return (
+		<DuotonePicker
+			{ ...args }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+			value={ value }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	colorPalette: COLOR_PALETTE,
+	duotonePalette: DUOTONE_PALETTE,
+};

package/src/duotone-picker/stories/duotone-swatch.js

@@ -0,0 +1,32 @@
+/**
+ * Internal dependencies
+ */
+import { DuotoneSwatch } from '../';
+
+export default {
+	title: 'Components/DuotoneSwatch',
+	component: DuotoneSwatch,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+
+const Template = ( args ) => {
+	return <DuotoneSwatch { ...args } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	values: [ '#000', '#fff' ],
+};
+
+export const SingleColor = Template.bind( {} );
+SingleColor.args = {
+	values: [ 'pink' ],
+};
+
+export const Null = Template.bind( {} );
+Null.args = {
+	values: null,
+};

package/src/elevation/README.md

@@ -33,46 +33,45 @@ function Example() {
 
 Size of the shadow value when active (see the `value` and `isInteractive` props).
 
-- Required: No
+-   Required: No
 
 ### `borderRadius`: `CSSProperties[ 'borderRadius' ]`
 
 Renders the border-radius of the shadow.
 
-- Required: No
-- Default: `inherit`
+-   Required: No
+-   Default: `inherit`
 
 ### `focus`: `number`
 
-Size of the shadow value when focused (see the `value` and `isInteractive` props).
+Size of the shadow value when focused (see the `value` and `isInteractive`props).
 
-- Required: No
+-   Required: No
 
 ### `hover`: `number`
 
-Size of the shadow value when hovered  (see the `value` and `isInteractive` props).
+Size of the shadow value when hovered (see the `value` and `isInteractive` props).
 
-- Required: No
+-   Required: No
 
 ### `isInteractive`: `boolean`
 
 Determines if `hover`, `active`, and `focus` shadow values should be automatically calculated and rendered.
 
-- Required: No
-- Default: `false`
+-   Required: No
+-   Default: `false`
 
 ### `offset`: `number`
 
 Dimensional offsets (margin) for the shadow.
 
-- Required: No
-- Default: `0`
+-   Required: No
+-   Default: `0`
 
-### `value`
-
-**Type**: `number`
+### `value`: `number`
 
 Size of the shadow, based on the Style system's elevation system. The `value` determines the strength of the shadow, which sense of depth.
+
 In the example below, `isInteractive` is activated to give a better sense of depth.
 
 ```jsx
@@ -86,3 +85,6 @@ function Example() {
 	);
 }
 ```
+
+-   Required: No
+-   Default: `0`

package/src/elevation/component.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { contextConnect, WordPressComponentProps } from '../ui/context';
+import { View } from '../view';
+import { useElevation } from './hook';
+import type { ElevationProps } from './types';
+
+function UnconnectedElevation(
+	props: WordPressComponentProps< ElevationProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const elevationProps = useElevation( props );
+
+	return <View { ...elevationProps } ref={ forwardedRef } />;
+}
+
+/**
+ * `Elevation` is a core component that renders shadow, using the component
+ * system's shadow system.
+ *
+ * The shadow effect is generated using the `value` prop.
+ *
+ * ```jsx
+ * import {
+ *	__experimentalElevation as Elevation,
+ *	__experimentalSurface as Surface,
+ *	__experimentalText as Text,
+ * } from '@wordpress/components';
+ *
+ * function Example() {
+ *   return (
+ *     <Surface>
+ *       <Text>Code is Poetry</Text>
+ *       <Elevation value={ 5 } />
+ *     </Surface>
+ *   );
+ * }
+ * ```
+ */
+export const Elevation = contextConnect( UnconnectedElevation, 'Elevation' );
+
+export default Elevation;

package/src/elevation/{hook.js → hook.ts}

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { css } from '@emotion/react';
+import { css, SerializedStyles } from '@emotion/react';
 
 /**
  * WordPress dependencies
@@ -11,28 +11,24 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import * as styles from './styles';
 import { CONFIG, reduceMotion } from '../utils';
 import { useCx } from '../utils/hooks/use-cx';
 import { isValueDefined } from '../utils/values';
+import type { ElevationProps } from './types';
 
-/**
- * @param {number} value
- * @return {string} The box shadow value.
- */
-export function getBoxShadow( value ) {
-	const boxShadowColor = `rgba(0 ,0, 0, ${ value / 20 })`;
+export function getBoxShadow( value: number ) {
+	const boxShadowColor = `rgba(0, 0, 0, ${ value / 20 })`;
 	const boxShadow = `0 ${ value }px ${ value * 2 }px 0
 	${ boxShadowColor }`;
 
 	return boxShadow;
 }
 
-/**
- * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props
- */
-export function useElevation( props ) {
+export function useElevation(
+	props: WordPressComponentProps< ElevationProps, 'div' >
+) {
 	const {
 		active,
 		borderRadius = 'inherit',
@@ -48,10 +44,12 @@ export function useElevation( props ) {
 	const cx = useCx();
 
 	const classes = useMemo( () => {
-		/** @type {number | undefined} */
-		let hoverValue = isValueDefined( hover ) ? hover : value * 2;
-		/** @type {number | undefined} */
-		let activeValue = isValueDefined( active ) ? active : value / 2;
+		let hoverValue: number | undefined = isValueDefined( hover )
+			? hover
+			: value * 2;
+		let activeValue: number | undefined = isValueDefined( active )
+			? active
+			: value / 2;
 
 		if ( ! isInteractive ) {
 			hoverValue = isValueDefined( hover ) ? hover : undefined;
@@ -60,7 +58,12 @@ export function useElevation( props ) {
 
 		const transition = `box-shadow ${ CONFIG.transitionDuration } ${ CONFIG.transitionTimingFunction }`;
 
-		const sx = {};
+		const sx: {
+			Base?: SerializedStyles;
+			hover?: SerializedStyles;
+			active?: SerializedStyles;
+			focus?: SerializedStyles;
+		} = {};
 
 		sx.Base = css(
 			{

package/src/elevation/stories/index.tsx

@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Elevation } from '..';
+
+const meta: ComponentMeta< typeof Elevation > = {
+	component: Elevation,
+	title: 'Components (Experimental)/Elevation',
+	argTypes: {
+		as: { control: { type: 'text' } },
+		borderRadius: { control: { type: 'text' } },
+	},
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Elevation > = ( args ) => {
+	return (
+		<div
+			style={ {
+				width: 150,
+				height: 150,
+				position: 'relative',
+			} }
+		>
+			<Elevation { ...args } />
+		</div>
+	);
+};
+
+const InteractiveTemplate: ComponentStory< typeof Elevation > = ( args ) => {
+	return (
+		<button
+			style={ {
+				border: 0,
+				background: 'transparent',
+				width: 150,
+				height: 150,
+				position: 'relative',
+			} }
+		>
+			Click me
+			<Elevation { ...args } />
+		</button>
+	);
+};
+
+export const Default: ComponentStory< typeof Elevation > = Template.bind( {} );
+Default.args = {
+	value: 5,
+};
+
+/**
+ * Enable the `isInteractive` prop to automatically generate values
+ * for the hover/active/focus states.
+ */
+export const WithInteractive: ComponentStory< typeof Elevation > =
+	InteractiveTemplate.bind( {} );
+WithInteractive.args = {
+	...Default.args,
+	isInteractive: true,
+};
+
+/**
+ * You can also provide custom values for the hover/active/focus states
+ * instead of using the `isInteractive` prop.
+ */
+export const WithCustomInteractive: ComponentStory< typeof Elevation > =
+	InteractiveTemplate.bind( {} );
+WithCustomInteractive.args = {
+	...Default.args,
+	hover: 7,
+	active: 1,
+	focus: 10,
+};

package/src/elevation/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -10,7 +10,7 @@ exports[`props should render active 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: 0;
   right: 0;
@@ -26,16 +26,17 @@ exports[`props should render active 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 14px 28px 0 rgba(0 ,0, 0, 0.7);
+  box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.7);
 }
 
 *:active>.emotion-0 {
-  box-shadow: 0 5px 10px 0 rgba(0 ,0, 0, 0.25);
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -51,7 +52,7 @@ exports[`props should render correctly 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -69,6 +70,7 @@ exports[`props should render correctly 1`] = `
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -84,7 +86,7 @@ exports[`props should render hover 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: 0;
   right: 0;
@@ -100,12 +102,13 @@ exports[`props should render hover 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 14px 28px 0 rgba(0 ,0, 0, 0.7);
+  box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.7);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -121,7 +124,7 @@ exports[`props should render isInteractive 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
   opacity: 1;
   left: 0;
   right: 0;
@@ -137,16 +140,17 @@ exports[`props should render isInteractive 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
 }
 
 *:active>.emotion-0 {
-  box-shadow: 0 0px 0px 0 rgba(0 ,0, 0, 0);
+  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -162,7 +166,7 @@ exports[`props should render offset 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: -2px;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: -2px;
   right: -2px;
@@ -178,16 +182,17 @@ exports[`props should render offset 1`] = `
 }
 
 *:hover>.emotion-0 {
-  box-shadow: 0 14px 28px 0 rgba(0 ,0, 0, 0.7);
+  box-shadow: 0 14px 28px 0 rgba(0, 0, 0, 0.7);
 }
 
 *:active>.emotion-0 {
-  box-shadow: 0 5px 10px 0 rgba(0 ,0, 0, 0.25);
+  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
 }
 
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />
@@ -203,7 +208,7 @@ exports[`props should render value 1`] = `
   will-change: box-shadow;
   border-radius: inherit;
   bottom: 0;
-  box-shadow: 0 7px 14px 0 rgba(0 ,0, 0, 0.35);
+  box-shadow: 0 7px 14px 0 rgba(0, 0, 0, 0.35);
   opacity: 1;
   left: 0;
   right: 0;
@@ -221,6 +226,7 @@ exports[`props should render value 1`] = `
 <div
   aria-hidden="true"
   class="components-elevation emotion-0 emotion-1"
+  data-testid="elevation"
   data-wp-c16t="true"
   data-wp-component="Elevation"
 />

package/src/elevation/test/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import { Elevation } from '..';
+
+describe( 'props', () => {
+	test( 'should render correctly', () => {
+		render( <Elevation data-testid="elevation" /> );
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render isInteractive', () => {
+		render( <Elevation isInteractive data-testid="elevation" /> );
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render value', () => {
+		render( <Elevation value={ 7 } data-testid="elevation" /> );
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render hover', () => {
+		render(
+			<Elevation hover={ 14 } value={ 7 } data-testid="elevation" />
+		);
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render active', () => {
+		render(
+			<Elevation
+				active={ 5 }
+				hover={ 14 }
+				value={ 7 }
+				data-testid="elevation"
+			/>
+		);
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+
+	test( 'should render offset', () => {
+		render(
+			<Elevation
+				active={ 5 }
+				hover={ 14 }
+				offset={ -2 }
+				value={ 7 }
+				data-testid="elevation"
+			/>
+		);
+
+		expect( screen.getByTestId( 'elevation' ) ).toMatchSnapshot();
+	} );
+} );