@wordpress/components 23.0.0 → 23.2.0

package/src/mobile/global-styles-context/utils.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -113,9 +113,9 @@ export function getBlockColors(
 		}
 
 		if ( ! isCustomColor ) {
-			const mappedColor = find( defaultColors, {
-				slug: value,
-			} );
+			const mappedColor = Object.values( defaultColors ?? {} ).find(
+				( { slug } ) => slug === value
+			);
 
 			if ( mappedColor ) {
 				blockStyles[ styleKey ] = mappedColor.color;
@@ -143,6 +143,7 @@ export function getBlockTypography(
 	const typographyStyles = {};
 	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+	const parsedFontSizes = Object.values( fontSizes ?? {} );
 
 	// Global styles.
 	if ( blockGlobalStyles?.typography ) {
@@ -153,9 +154,9 @@ export function getBlockTypography(
 			if ( parseInt( fontSize, 10 ) ) {
 				typographyStyles.fontSize = fontSize;
 			} else {
-				const mappedFontSize = find( fontSizes, {
-					slug: fontSize,
-				} );
+				const mappedFontSize = parsedFontSizes.find(
+					( { slug } ) => slug === fontSize
+				);
 
 				if ( mappedFontSize ) {
 					typographyStyles.fontSize = mappedFontSize?.size;
@@ -169,9 +170,9 @@ export function getBlockTypography(
 	}
 
 	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
-		const mappedFontSize = find( fontSizes, {
-			slug: blockStyleAttributes?.fontSize,
-		} );
+		const mappedFontSize = parsedFontSizes.find(
+			( { slug } ) => slug === blockStyleAttributes?.fontSize
+		);
 
 		if ( mappedFontSize ) {
 			typographyStyles.fontSize = mappedFontSize?.size;
@@ -212,9 +213,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				const path = $2.split( '--' );
 				const mappedPresetValue = mappedValues[ path[ 0 ] ];
 				if ( mappedPresetValue && mappedPresetValue.slug ) {
-					const matchedValue = find( mappedPresetValue.values, {
-						slug: path[ 1 ],
-					} );
+					const matchedValue = Object.values(
+						mappedPresetValue.values ?? {}
+					).find( ( { slug } ) => slug === path[ 1 ] );
 					return matchedValue?.[ mappedPresetValue.slug ];
 				}
 				return UNKNOWN_VALUE;
@@ -244,9 +245,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		if ( variable === 'var' ) {
 			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
 				if ( mappedValues?.color ) {
-					const matchedValue = find( mappedValues.color?.values, {
-						slug: $2,
-					} );
+					const matchedValue = mappedValues.color?.values?.find(
+						( { slug } ) => slug === $2
+					);
 					return `"${ matchedValue?.color }"`;
 				}
 				return UNKNOWN_VALUE;

package/src/modal/test/index.tsx

@@ -72,9 +72,7 @@ describe( 'Modal', () => {
 	} );
 
 	it( 'should call onRequestClose when the escape key is pressed', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onRequestClose = jest.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>

package/src/navigable-container/test/navigable-menu.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { NavigableMenu } from '../menu';
 
+jest.useFakeTimers();
+
 const NavigableMenuTestCase = ( props ) => (
 	<NavigableMenu { ...props }>
 		<button>Item 1</button>

package/src/navigable-container/test/tababble-container.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { TabbableContainer } from '../tabbable';
 
+jest.useFakeTimers();
+
 const TabbableContainerTestCase = ( props ) => (
 	<TabbableContainer { ...props }>
 		<button>Item 1</button>

package/src/navigation/test/index.js

@@ -16,6 +16,8 @@ import Navigation from '..';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
+jest.useFakeTimers();
+
 const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>

package/src/navigator/test/index.tsx

@@ -20,6 +20,8 @@ import {
 	NavigatorBackButton,
 } from '..';
 
+jest.useFakeTimers();
+
 jest.mock( 'framer-motion', () => {
 	const actual = jest.requireActual( 'framer-motion' );
 	return {

package/src/notice/stories/index.js

@@ -1,74 +1,46 @@
-/**
- * External dependencies
- */
-import { boolean, select, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
 import Notice from '../';
 
+// TODO: Add a story involving NoticeList to help people understand
+// the difference between onDismiss/onRemove.
+
 export default {
 	title: 'Components/Notice',
 	component: Notice,
+	argTypes: {
+		isDismissible: { control: 'boolean' },
+		onDismiss: { control: { type: null } },
+		onRemove: { control: { type: null } },
+		politeness: {
+			control: 'radio',
+			options: [ 'assertive', 'polite' ],
+		},
+		spokenMessage: { control: 'text' },
+		status: {
+			control: 'radio',
+			options: [ 'warning', 'success', 'error', 'info' ],
+		},
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-
-	return (
-		<Notice status={ status } isDismissible={ isDismissible }>
-			<p>This is a notice.</p>
-		</Notice>
-	);
+const Template = ( props ) => {
+	return <Notice { ...props } />;
 };
 
-export const withCustomSpokenMessage = () => {
-	const status = select(
-		'Status',
-		{
-			Warning: 'warning',
-			Success: 'success',
-			Error: 'error',
-			Info: 'info',
-		},
-		'info'
-	);
-	const isDismissible = boolean( 'Is Dismissible', true );
-	const politeness = select(
-		'Politeness',
-		{
-			Assertive: 'assertive',
-			Polite: 'polite',
-		},
-		'assertive'
-	);
-	const spokenMessage = text(
-		'Spoken Message',
-		'This is a notice with a custom spoken message'
-	);
+export const Default = Template.bind( {} );
+Default.args = {
+	children: 'This is a notice.',
+};
 
-	return (
-		<Notice
-			status={ status }
-			isDismissible={ isDismissible }
-			politeness={ politeness }
-			spokenMessage={ spokenMessage }
-		>
-			<p>This is a notice.</p>
-		</Notice>
-	);
+export const WithCustomSpokenMessage = Template.bind( {} );
+WithCustomSpokenMessage.args = {
+	...Default.args,
+	politeness: 'assertive',
+	spokenMessage: 'This is a notice with a custom spoken message',
 };

package/src/notice/test/index.js

@@ -15,6 +15,10 @@ import Notice from '../index';
 
 jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
 
+function getNoticeWrapper( container ) {
+	return container.firstChild;
+}
+
 describe( 'Notice', () => {
 	beforeEach( () => {
 		speak.mockReset();
@@ -39,15 +43,16 @@ describe( 'Notice', () => {
 
 	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
 		const { container } = render( <Notice isDismissible={ false } /> );
+		const wrapper = getNoticeWrapper( container );
 
-		expect( container.firstChild ).toHaveClass( 'components-notice' );
-		expect( container.firstChild ).not.toHaveClass( 'is-dismissible' );
+		expect( wrapper ).toHaveClass( 'components-notice' );
+		expect( wrapper ).not.toHaveClass( 'is-dismissible' );
 	} );
 
 	it( 'should default to info status', () => {
 		const { container } = render( <Notice /> );
 
-		expect( container.firstChild ).toHaveClass( 'is-info' );
+		expect( getNoticeWrapper( container ) ).toHaveClass( 'is-info' );
 	} );
 
 	describe( 'useSpokenMessage', () => {

package/src/number-control/test/index.tsx

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import NumberControl from '..';
 import type { NumberControlProps } from '../types';
 
+jest.useFakeTimers();
+
 function StatefulNumberControl( props: NumberControlProps ) {
 	const [ value, setValue ] = useState( props.value );
 	const handleOnChange = ( v: string | undefined ) => setValue( v );

package/src/panel/row.js

@@ -8,13 +8,13 @@ import classnames from 'classnames';
  */
 import { forwardRef } from '@wordpress/element';
 
-const PanelRow = forwardRef( ( { className, children }, ref ) => (
+const PanelRow = ( { className, children }, ref ) => (
 	<div
 		className={ classnames( 'components-panel__row', className ) }
 		ref={ ref }
 	>
 		{ children }
 	</div>
-) );
+);
 
-export default PanelRow;
+export default forwardRef( PanelRow );

package/src/panel/stories/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { boolean, text } from '@storybook/addon-knobs';
-
 /**
  * Internal dependencies
  */
@@ -18,88 +13,75 @@ import { wordpress } from '@wordpress/icons';
 export default {
 	title: 'Components/Panel',
 	component: Panel,
+	subcomponents: { PanelRow, PanelBody },
+	argTypes: {
+		children: { control: { type: null } },
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const opened = boolean( 'Opened', true );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened }>
-				<PanelRow>{ rowText }</PanelRow>
+const Template = ( props ) => <Panel { ...props } />;
+
+export const Default = Template.bind( {} );
+Default.args = {
+	header: 'My panel',
+	children: (
+		<>
+			<PanelBody title="First section">
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
+			</PanelBody>
+			<PanelBody title="Second section" initialOpen={ false }>
+				<PanelRow>
+					<div
+						style={ {
+							background: '#ddd',
+							height: 100,
+							width: '100%',
+						} }
+					/>
+				</PanelRow>
 			</PanelBody>
-		</Panel>
-	);
+		</>
+	),
 };
 
-export const multipleBodies = () => {
-	return (
-		<ScrollableContainer>
-			<Panel header="My Panel">
-				<PanelBody title="First Settings">
-					<PanelRow>
-						<Placeholder height={ 250 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Second Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 400 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Third Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder height={ 600 } />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody title="Fourth Settings" initialOpen={ false }>
-					<PanelRow>
-						<Placeholder />
-					</PanelRow>
-				</PanelBody>
-				<PanelBody
-					title="Disabled Settings"
-					initialOpen={ false }
-					buttonProps={ { disabled: true } }
-				/>
-			</Panel>
-		</ScrollableContainer>
-	);
+export const DisabledSection = Template.bind( {} );
+DisabledSection.args = {
+	...Default.args,
+	children: (
+		<PanelBody
+			title="Disabled section"
+			initialOpen={ false }
+			buttonProps={ { disabled: true } }
+		/>
+	),
 };
 
-export const withIcon = () => {
-	const bodyTitle = text( 'Body Title', 'My Block Settings' );
-	const rowText = text( 'Row Text', 'My Panel Inputs and Labels' );
-	const icon = boolean( 'Icon', true ) ? wordpress : undefined;
-	const opened = boolean( 'Opened', true );
-	return (
-		<Panel header="My Panel">
-			<PanelBody title={ bodyTitle } opened={ opened } icon={ icon }>
-				<PanelRow>{ rowText }</PanelRow>
-			</PanelBody>
-		</Panel>
-	);
+export const WithIcon = Template.bind( {} );
+WithIcon.args = {
+	...Default.args,
+	children: (
+		<PanelBody title="Section title" icon={ wordpress }>
+			<PanelRow>
+				<div
+					style={ {
+						background: '#ddd',
+						height: 100,
+						width: '100%',
+					} }
+				/>
+			</PanelRow>
+		</PanelBody>
+	),
 };
-
-function ScrollableContainer( { children } ) {
-	return (
-		<div
-			style={ {
-				width: 300,
-				height: '100vh',
-				overflowY: 'auto',
-				margin: 'auto',
-				boxShadow: '0 0 0 1px #ddd inset',
-			} }
-		>
-			{ children }
-		</div>
-	);
-}
-
-function Placeholder( { height = 200 } ) {
-	return <div style={ { background: '#ddd', height, width: '100%' } } />;
-}

package/src/panel/test/__snapshots__/body.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PanelBody basic rendering should render an empty div with the matching className 1`] = `
+<div>
+  <div
+    class="components-panel__body is-opened"
+  />
+</div>
+`;