Add the favorites tooltip to the navigation (https://github.com/woocommerce/woocommerce-admin/pull/6312)
* Add tooltip to plugin category titles * Add useAnchor * Hide tooltips if previously shown * Refactor tooltip and favorite button to separate components * Check if favorites resolved before showing button * Update favorites tooltip option name * Handle rebase changes * Don't show tooltip when nav is folded
This commit is contained in:
Joshua T Flowers
GitHub
parent
d32d88d43c
commit
bf3ed5ad87
|
|
@ -1,68 +1,21 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { NAVIGATION_STORE_NAME } from '@woocommerce/data';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import { FavoriteButton } from '../favorite-button';
|
||||
import { FavoritesTooltip } from '../favorites-tooltip';
|
||||
|
||||
export const CategoryTitle = ( { category } ) => {
|
||||
const { id, title } = category;
|
||||
|
||||
const { favorites, isResolving } = useSelect( ( select ) => {
|
||||
return {
|
||||
favorites: select( NAVIGATION_STORE_NAME ).getFavorites(),
|
||||
isResolving: select( NAVIGATION_STORE_NAME ).isResolving(
|
||||
'getFavorites'
|
||||
),
|
||||
};
|
||||
} );
|
||||
|
||||
const { addFavorite, removeFavorite } = useDispatch(
|
||||
NAVIGATION_STORE_NAME
|
||||
);
|
||||
|
||||
const isFavorited = ( favorites || [] ).includes( id );
|
||||
const className = 'woocommerce-navigation-category-title';
|
||||
|
||||
const toggleFavorite = () => {
|
||||
const toggle = isFavorited ? removeFavorite : addFavorite;
|
||||
toggle( id );
|
||||
recordEvent( 'navigation_favorite', {
|
||||
id,
|
||||
action: isFavorited ? 'unfavorite' : 'favorite',
|
||||
} );
|
||||
};
|
||||
|
||||
if ( [ 'plugins', 'favorites' ].includes( category.menuId ) ) {
|
||||
return (
|
||||
<span className={ className }>
|
||||
<span className={ `${ className }__text` }>{ title }</span>
|
||||
{ ! isResolving && (
|
||||
<Button
|
||||
className={ `${ className }__favorite-button` }
|
||||
isTertiary
|
||||
onClick={ toggleFavorite }
|
||||
icon={ isFavorited ? 'star-filled' : 'star-empty' }
|
||||
aria-label={
|
||||
isFavorited
|
||||
? __(
|
||||
'Add this item to your favorites.',
|
||||
'woocommerce-admin'
|
||||
)
|
||||
: __(
|
||||
'Remove this item from your favorites.',
|
||||
'woocommerce-admin'
|
||||
)
|
||||
}
|
||||
/>
|
||||
) }
|
||||
<FavoriteButton id={ id } />
|
||||
<FavoritesTooltip />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,19 +2,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.woocommerce-navigation-category-title__favorite-button {
|
||||
.woocommerce-navigation-favorite-button {
|
||||
margin-left: auto;
|
||||
|
||||
.dashicon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashicons-star-empty {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.dashicons-star-filled {
|
||||
color: $alert-yellow;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button } from '@wordpress/components';
|
||||
import { NAVIGATION_STORE_NAME } from '@woocommerce/data';
|
||||
import { recordEvent } from '@woocommerce/tracks';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
export const FavoriteButton = ( { id } ) => {
|
||||
const { favorites, isResolving } = useSelect( ( select ) => {
|
||||
return {
|
||||
favorites: select( NAVIGATION_STORE_NAME ).getFavorites(),
|
||||
isResolving: select( NAVIGATION_STORE_NAME ).isResolving(
|
||||
'getFavorites'
|
||||
),
|
||||
};
|
||||
} );
|
||||
|
||||
const { addFavorite, removeFavorite } = useDispatch(
|
||||
NAVIGATION_STORE_NAME
|
||||
);
|
||||
|
||||
const isFavorited = favorites.includes( id );
|
||||
|
||||
const toggleFavorite = () => {
|
||||
const toggle = isFavorited ? removeFavorite : addFavorite;
|
||||
toggle( id );
|
||||
recordEvent( 'navigation_favorite', {
|
||||
id,
|
||||
action: isFavorited ? 'unfavorite' : 'favorite',
|
||||
} );
|
||||
};
|
||||
|
||||
if ( isResolving ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Button
|
||||
id="woocommerce-navigation-favorite-button"
|
||||
className="woocommerce-navigation-favorite-button"
|
||||
isTertiary
|
||||
onClick={ toggleFavorite }
|
||||
icon={ isFavorited ? 'star-filled' : 'star-empty' }
|
||||
aria-label={
|
||||
isFavorited
|
||||
? __(
|
||||
'Add this item to your favorites.',
|
||||
'woocommerce-admin'
|
||||
)
|
||||
: __(
|
||||
'Remove this item from your favorites.',
|
||||
'woocommerce-admin'
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default FavoriteButton;
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.woocommerce-navigation-favorite-button.components-button {
|
||||
.dashicon {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dashicons-star-empty {
|
||||
color: $gray-600;
|
||||
}
|
||||
|
||||
.dashicons-star-filled {
|
||||
color: $alert-yellow;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { NAVIGATION_STORE_NAME, OPTIONS_STORE_NAME } from '@woocommerce/data';
|
||||
import { useDispatch, useSelect } from '@wordpress/data';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { HighlightTooltip } from '../../../header/activity-panel/highlight-tooltip';
|
||||
|
||||
const tooltipHiddenOption = 'woocommerce_navigation_favorites_tooltip_hidden';
|
||||
|
||||
export const FavoritesTooltip = () => {
|
||||
const {
|
||||
isFavoritesResolving,
|
||||
isOptionResolving,
|
||||
isTooltipHidden,
|
||||
} = useSelect( ( select ) => {
|
||||
const { getOption, isResolving } = select( OPTIONS_STORE_NAME );
|
||||
return {
|
||||
isFavoritesResolving: select( NAVIGATION_STORE_NAME ).isResolving(
|
||||
'getFavorites'
|
||||
),
|
||||
isOptionResolving: isResolving( 'getOption', [
|
||||
tooltipHiddenOption,
|
||||
] ),
|
||||
isTooltipHidden: getOption( tooltipHiddenOption ) === 'yes',
|
||||
};
|
||||
} );
|
||||
|
||||
const { updateOptions } = useDispatch( OPTIONS_STORE_NAME );
|
||||
|
||||
if ( isFavoritesResolving || isTooltipHidden || isOptionResolving ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if ( document.body.classList.contains( 'is-wc-nav-folded' ) ) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<HighlightTooltip
|
||||
delay={ 1000 }
|
||||
title={ __( 'Introducing favorites', 'woocommerce-admin' ) }
|
||||
content={ __(
|
||||
'You can now favorite your extensions to pin them in the top level of the navigation.',
|
||||
'woocommerce-admin'
|
||||
) }
|
||||
closeButtonText={ __( 'Got it', 'woocommerce-admin' ) }
|
||||
id="woocommerce-navigation-favorite-button"
|
||||
onClose={ () =>
|
||||
updateOptions( {
|
||||
[ tooltipHiddenOption ]: 'yes',
|
||||
} )
|
||||
}
|
||||
useAnchor
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default FavoritesTooltip;
|
||||
Loading…
Reference in New Issue