@wordpress/nux 9.47.0 → 10.0.0

package/src/components/dot-tip/test/index.js

@@ -1,77 +1,20 @@
-/**
- * External dependencies
- */
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-/**
- * Internal dependencies
- */
-import { DotTip } from '..';
+import { render } from '@testing-library/react';
+import DotTip, { DotTip as NamedDotTip } from '..';
 
 describe( 'DotTip', () => {
-	it( 'should not render anything if invisible', () => {
-		render(
-			<DotTip>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should render correctly', async () => {
-		render(
-			<DotTip isVisible>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		// Wait for the dialog element to be positioned (aligned with the button)
-		await waitFor( () =>
-			expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover()
-		);
-
-		expect( screen.getByRole( 'dialog' ) ).toMatchSnapshot();
-	} );
-
-	it( 'should call onDismiss when the dismiss button is clicked', async () => {
-		const user = userEvent.setup();
-		const onDismiss = jest.fn();
-
-		render(
-			<DotTip isVisible onDismiss={ onDismiss }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
+	it( 'renders nothing when accessed through the default export', () => {
+		const { container } = render(
+			<DotTip tipId="test/tip">Tip content</DotTip>
 		);
 
-		await waitFor( () =>
-			expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover()
-		);
-
-		await user.click( screen.getByRole( 'button', { name: 'Got it' } ) );
-
-		expect( onDismiss ).toHaveBeenCalled();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
-	it( 'should call onDisable when the X button is clicked', async () => {
-		const user = userEvent.setup();
-		const onDisable = jest.fn();
-
-		render(
-			<DotTip isVisible onDisable={ onDisable }>
-				It looks like you’re writing a letter. Would you like help?
-			</DotTip>
-		);
-
-		await waitFor( () =>
-			expect( screen.getByRole( 'dialog' ) ).toBePositionedPopover()
-		);
-
-		await user.click(
-			screen.getByRole( 'button', { name: 'Disable tips' } )
+	it( 'renders nothing when accessed through the named export', () => {
+		const { container } = render(
+			<NamedDotTip tipId="test/tip">Tip content</NamedDotTip>
 		);
 
-		expect( onDisable ).toHaveBeenCalled();
+		expect( container ).toBeEmptyDOMElement();
 	} );
 } );

package/src/store/actions.js

@@ -1,8 +1,8 @@
 /**
- * Returns an action object that, when dispatched, presents a guide that takes
- * the user through a series of tips step by step.
+ * Returns a no-op action object. This package is deprecated and no longer
+ * displays tips, but the action remains for backward compatibility.
  *
- * @param {string[]} tipIds Which tips to show in the guide.
+ * @param {string[]} tipIds Which tips would have been shown in the guide.
  *
  * @return {Object} Action object.
  */
@@ -14,10 +14,10 @@ export function triggerGuide( tipIds ) {
 }
 
 /**
- * Returns an action object that, when dispatched, dismisses the given tip. A
- * dismissed tip will not show again.
+ * Returns a no-op action object. This package is deprecated and no longer
+ * displays tips, but the action remains for backward compatibility.
  *
- * @param {string} id The tip to dismiss.
+ * @param {string} id The tip that would have been dismissed.
  *
  * @return {Object} Action object.
  */
@@ -29,8 +29,8 @@ export function dismissTip( id ) {
 }
 
 /**
- * Returns an action object that, when dispatched, prevents all tips from
- * showing again.
+ * Returns a no-op action object. This package is deprecated and no longer
+ * displays tips, but the action remains for backward compatibility.
  *
  * @return {Object} Action object.
  */
@@ -41,7 +41,8 @@ export function disableTips() {
 }
 
 /**
- * Returns an action object that, when dispatched, makes all tips show again.
+ * Returns a no-op action object. This package is deprecated and no longer
+ * displays tips, but the action remains for backward compatibility.
  *
  * @return {Object} Action object.
  */

package/src/store/reducer.js

@@ -1,70 +1,22 @@
 /**
- * WordPress dependencies
+ * Deprecated NUX store state kept only so the core/nux store can still be
+ * registered for backward compatibility.
  */
-import { combineReducers } from '@wordpress/data';
+const DEFAULT_STATE = {
+	guides: [],
+	preferences: {
+		areTipsEnabled: false,
+		dismissedTips: {},
+	},
+};
 
 /**
- * Reducer that tracks which tips are in a guide. Each guide is represented by
- * an array which contains the tip identifiers contained within that guide.
+ * Reducer that preserves state without responding to actions.
  *
- * @param {Array}  state  Current state.
- * @param {Object} action Dispatched action.
+ * @param {Object} state Current state.
  *
- * @return {Array} Updated state.
+ * @return {Object} Current state.
  */
-export function guides( state = [], action ) {
-	switch ( action.type ) {
-		case 'TRIGGER_GUIDE':
-			return [ ...state, action.tipIds ];
-	}
-
+export default function reducer( state = DEFAULT_STATE ) {
 	return state;
 }
-
-/**
- * Reducer that tracks whether or not tips are globally enabled.
- *
- * @param {boolean} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {boolean} Updated state.
- */
-export function areTipsEnabled( state = true, action ) {
-	switch ( action.type ) {
-		case 'DISABLE_TIPS':
-			return false;
-
-		case 'ENABLE_TIPS':
-			return true;
-	}
-
-	return state;
-}
-
-/**
- * Reducer that tracks which tips have been dismissed. If the state object
- * contains a tip identifier, then that tip is dismissed.
- *
- * @param {Object} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
- */
-export function dismissedTips( state = {}, action ) {
-	switch ( action.type ) {
-		case 'DISMISS_TIP':
-			return {
-				...state,
-				[ action.id ]: true,
-			};
-
-		case 'ENABLE_TIPS':
-			return {};
-	}
-
-	return state;
-}
-
-const preferences = combineReducers( { areTipsEnabled, dismissedTips } );
-
-export default combineReducers( { guides, preferences } );

package/src/store/selectors.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { createSelector } from '@wordpress/data';
-
 /**
  * An object containing information about a guide.
  *
@@ -13,69 +8,28 @@ import { createSelector } from '@wordpress/data';
  */
 
 /**
- * Returns an object describing the guide, if any, that the given tip is a part
- * of.
+ * Returns null because the deprecated NUX package no longer displays guides.
  *
- * @param {Object} state Global application state.
- * @param {string} tipId The tip to query.
- *
- * @return {?NUXGuideInfo} Information about the associated guide.
+ * @return {null} No associated guide.
  */
-export const getAssociatedGuide = createSelector(
-	( state, tipId ) => {
-		for ( const tipIds of state.guides ) {
-			if ( tipIds.includes( tipId ) ) {
-				const nonDismissedTips = tipIds.filter(
-					( tId ) =>
-						! Object.keys(
-							state.preferences.dismissedTips
-						).includes( tId )
-				);
-				const [ currentTipId = null, nextTipId = null ] =
-					nonDismissedTips;
-				return { tipIds, currentTipId, nextTipId };
-			}
-		}
-
-		return null;
-	},
-	( state ) => [ state.guides, state.preferences.dismissedTips ]
-);
+export function getAssociatedGuide() {
+	return null;
+}
 
 /**
- * Determines whether or not the given tip is showing. Tips are hidden if they
- * are disabled, have been dismissed, or are not the current tip in any
- * guide that they have been added to.
- *
- * @param {Object} state Global application state.
- * @param {string} tipId The tip to query.
+ * Returns false because the deprecated NUX package no longer displays tips.
  *
  * @return {boolean} Whether or not the given tip is showing.
  */
-export function isTipVisible( state, tipId ) {
-	if ( ! state.preferences.areTipsEnabled ) {
-		return false;
-	}
-
-	if ( state.preferences.dismissedTips?.hasOwnProperty( tipId ) ) {
-		return false;
-	}
-
-	const associatedGuide = getAssociatedGuide( state, tipId );
-	if ( associatedGuide && associatedGuide.currentTipId !== tipId ) {
-		return false;
-	}
-
-	return true;
+export function isTipVisible() {
+	return false;
 }
 
 /**
- * Returns whether or not tips are globally enabled.
- *
- * @param {Object} state Global application state.
+ * Returns false because the deprecated NUX package no longer displays tips.
  *
  * @return {boolean} Whether tips are globally enabled.
  */
-export function areTipsEnabled( state ) {
-	return state.preferences.areTipsEnabled;
+export function areTipsEnabled() {
+	return false;
 }

package/src/store/test/reducer.js

@@ -1,69 +1,29 @@
-/**
- * Internal dependencies
- */
-import { guides, areTipsEnabled, dismissedTips } from '../reducer';
+import reducer from '../reducer';
 
 describe( 'reducer', () => {
-	describe( 'guides', () => {
-		it( 'should start out empty', () => {
-			expect( guides( undefined, {} ) ).toEqual( [] );
-		} );
-
-		it( 'should add a guide when it is triggered', () => {
-			const state = guides( [], {
-				type: 'TRIGGER_GUIDE',
-				tipIds: [ 'test/tip-1', 'test/tip-2' ],
-			} );
-			expect( state ).toEqual( [ [ 'test/tip-1', 'test/tip-2' ] ] );
-		} );
-	} );
-
-	describe( 'areTipsEnabled', () => {
-		it( 'should default to true', () => {
-			expect( areTipsEnabled( undefined, {} ) ).toBe( true );
-		} );
-
-		it( 'should flip when tips are disabled', () => {
-			const state = areTipsEnabled( true, {
-				type: 'DISABLE_TIPS',
-			} );
-			expect( state ).toBe( false );
-		} );
-
-		it( 'should flip when tips are enabled', () => {
-			const state = areTipsEnabled( false, {
-				type: 'ENABLE_TIPS',
-			} );
-			expect( state ).toBe( true );
+	it( 'defaults to disabled empty state', () => {
+		expect( reducer( undefined, {} ) ).toEqual( {
+			guides: [],
+			preferences: {
+				areTipsEnabled: false,
+				dismissedTips: {},
+			},
 		} );
 	} );
 
-	describe( 'dismissedTips', () => {
-		it( 'should start out empty', () => {
-			expect( dismissedTips( undefined, {} ) ).toEqual( {} );
-		} );
-
-		it( 'should mark tips as dismissed', () => {
-			const state = dismissedTips(
-				{},
-				{
-					type: 'DISMISS_TIP',
-					id: 'test/tip',
-				}
-			);
-			expect( state ).toEqual( {
-				'test/tip': true,
-			} );
-		} );
+	it( 'ignores legacy actions', () => {
+		const state = reducer( undefined, {} );
 
-		it( 'should reset if tips are enabled', () => {
-			const initialState = {
-				'test/tip': true,
-			};
-			const state = dismissedTips( initialState, {
+		expect(
+			reducer( state, {
 				type: 'ENABLE_TIPS',
-			} );
-			expect( state ).toEqual( {} );
-		} );
+			} )
+		).toBe( state );
+		expect(
+			reducer( state, {
+				type: 'TRIGGER_GUIDE',
+				tipIds: [ 'test/tip' ],
+			} )
+		).toBe( state );
 	} );
 } );

package/src/store/test/selectors.js

@@ -1,146 +1,21 @@
-/**
- * Internal dependencies
- */
 import { getAssociatedGuide, isTipVisible, areTipsEnabled } from '../selectors';
 
 describe( 'selectors', () => {
 	describe( 'getAssociatedGuide', () => {
-		const state = {
-			guides: [
-				[ 'test/tip-1', 'test/tip-2', 'test/tip-3' ],
-				[ 'test/tip-a', 'test/tip-b', 'test/tip-c' ],
-				[ 'test/tip-α', 'test/tip-β', 'test/tip-γ' ],
-			],
-			preferences: {
-				dismissedTips: {
-					'test/tip-1': true,
-					'test/tip-a': true,
-					'test/tip-b': true,
-					'test/tip-α': true,
-					'test/tip-β': true,
-					'test/tip-γ': true,
-				},
-			},
-		};
-
-		it( 'should return null when there is no associated guide', () => {
-			expect( getAssociatedGuide( state, 'test/unknown' ) ).toBeNull();
-		} );
-
-		it( 'should return the associated guide', () => {
-			expect( getAssociatedGuide( state, 'test/tip-2' ) ).toEqual( {
-				tipIds: [ 'test/tip-1', 'test/tip-2', 'test/tip-3' ],
-				currentTipId: 'test/tip-2',
-				nextTipId: 'test/tip-3',
-			} );
-		} );
-
-		it( 'should indicate when there is no next tip', () => {
-			expect( getAssociatedGuide( state, 'test/tip-b' ) ).toEqual( {
-				tipIds: [ 'test/tip-a', 'test/tip-b', 'test/tip-c' ],
-				currentTipId: 'test/tip-c',
-				nextTipId: null,
-			} );
-		} );
-
-		it( 'should indicate when there is no current or next tip', () => {
-			expect( getAssociatedGuide( state, 'test/tip-β' ) ).toEqual( {
-				tipIds: [ 'test/tip-α', 'test/tip-β', 'test/tip-γ' ],
-				currentTipId: null,
-				nextTipId: null,
-			} );
+		it( 'returns null', () => {
+			expect( getAssociatedGuide( {}, 'test/tip' ) ).toBeNull();
 		} );
 	} );
 
 	describe( 'isTipVisible', () => {
-		it( 'is tolerant to individual preferences being undefined', () => {
-			// See: https://github.com/WordPress/gutenberg/issues/14580
-			const state = {
-				guides: [],
-				preferences: {},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'is tolerant to undefined dismissedTips', () => {
-			// See: https://github.com/WordPress/gutenberg/issues/14580
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( true );
-		} );
-
-		it( 'should return true by default', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( true );
-		} );
-
-		it( 'should return false if tips are disabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: false,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'should return false if the tip is dismissed', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {
-						'test/tip': true,
-					},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip' ) ).toBe( false );
-		} );
-
-		it( 'should return false if the tip is in a guide and it is not the current tip', () => {
-			const state = {
-				guides: [ [ 'test/tip-1', 'test/tip-2', 'test/tip-3' ] ],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( isTipVisible( state, 'test/tip-2' ) ).toBe( false );
+		it( 'returns false', () => {
+			expect( isTipVisible( {}, 'test/tip' ) ).toBe( false );
 		} );
 	} );
 
 	describe( 'areTipsEnabled', () => {
-		it( 'should return true if tips are enabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: true,
-					dismissedTips: {},
-				},
-			};
-			expect( areTipsEnabled( state ) ).toBe( true );
-		} );
-
-		it( 'should return false if tips are disabled', () => {
-			const state = {
-				guides: [],
-				preferences: {
-					areTipsEnabled: false,
-					dismissedTips: {},
-				},
-			};
-			expect( areTipsEnabled( state ) ).toBe( false );
+		it( 'returns false', () => {
+			expect( areTipsEnabled( {} ) ).toBe( false );
 		} );
 	} );
 } );

package/src/style.scss

@@ -1 +1,4 @@
-@use "./components/dot-tip/style.scss" as *;
+/**
+ * Intentionally no styles.
+ * This entry point is kept so existing @wordpress/nux style imports continue to resolve.
+ */

package/src/components/dot-tip/style.scss

@@ -1,131 +0,0 @@
-@use "sass:math";
-@use "@wordpress/base-styles/breakpoints" as *;
-@use "@wordpress/base-styles/mixins" as *;
-@use "@wordpress/base-styles/variables" as *;
-@use "@wordpress/base-styles/z-index" as *;
-
-$dot-size: 8px; // Size of the indicator dot
-$dot-scale: 3;  // How much the pulse animation should scale up by in size
-
-.nux-dot-tip {
-	&::before,
-	&::after {
-		border-radius: 100%;
-		content: " ";
-		pointer-events: none;
-		position: absolute;
-	}
-
-	&::before {
-		background: rgba(#00739c, 0.9);
-		opacity: 0.9;
-		height: $dot-size * $dot-scale;
-		left: -($dot-size * $dot-scale) * 0.5;
-		top: -($dot-size * $dot-scale) * 0.5;
-		transform: scale(math.div(1, $dot-scale));
-		width: $dot-size * $dot-scale;
-
-		@media not (prefers-reduced-motion) {
-			animation: nux-pulse 1.6s infinite cubic-bezier(0.17, 0.67, 0.92, 0.62);
-		}
-	}
-
-	&::after {
-		background: #00739c;
-		height: $dot-size;
-		left: -$dot-size * 0.5;
-		top: -$dot-size * 0.5;
-		width: $dot-size;
-	}
-
-	@keyframes nux-pulse {
-		100% {
-			background: rgba(#00739c, 0);
-			transform: scale(1);
-		}
-	}
-
-	.components-popover__content {
-		width: 350px;
-		padding: 20px 18px;
-
-		@include break-small {
-			width: 450px;
-		}
-
-		.nux-dot-tip__disable {
-			position: absolute;
-			right: 0;
-			top: 0;
-		}
-	}
-
-	// Position the dot right next to the edge of the button
-	&[data-y-axis="top"] {
-		margin-top: -$dot-size * 0.5;
-	}
-	&[data-y-axis="bottom"] {
-		margin-top: $dot-size * 0.5;
-	}
-	&[data-y-axis="middle"][data-y-axis="left"] {
-		margin-left: -$dot-size * 0.5;
-	}
-	&[data-y-axis="middle"][data-y-axis="right"] {
-		margin-left: $dot-size * 0.5;
-	}
-
-	// Position the tip content away from the dot
-	&[data-y-axis="top"] .components-popover__content {
-		margin-bottom: 20px;
-	}
-	&[data-y-axis="bottom"] .components-popover__content {
-		margin-top: 20px;
-	}
-	&[data-y-axis="middle"][data-y-axis="left"] .components-popover__content {
-		margin-right: 20px;
-	}
-	&[data-y-axis="middle"][data-y-axis="right"] .components-popover__content {
-		margin-left: 20px;
-	}
-
-	// Extra specificity so that we can override the styles in .component-popover
-	&[data-y-axis="left"],
-	&[data-y-axis="center"],
-	&[data-y-axis="right"] {
-		// Position tips above popovers
-		z-index: z-index(".nux-dot-tip");
-
-		// On mobile, always position the tip below the dot and fill the width of the viewport
-		@media (max-width: $break-small) {
-			.components-popover__content {
-				align-self: end;
-				left: 5px;
-				margin: 20px 0 0 0;
-				max-width: none !important; // Override the inline style set by <Popover>
-				position: fixed;
-				right: 5px;
-				width: auto;
-			}
-		}
-	}
-
-	&.components-popover:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-left: 0;
-	}
-
-	&.components-popover:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-right: 0;
-	}
-
-	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="right"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-left: -12px;
-	}
-
-	&.components-popover.interface-more-menu-dropdown__content:not([data-y-axis="middle"])[data-y-axis="left"] .components-popover__content {
-		/*!rtl:ignore*/
-		margin-right: -12px;
-	}
-}