Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[Performance]: Replace `classnames` usage with `clsx` (#47760) 

* Replace classnames with clsx within woocommerce-blocks.

* Undo unnecessary change to getClassnames const.

* Replace classnames with clsx within woocommerce-admin.

* Add changelog.

* Update the pnpm lock file

* Address lint.

* Address lint errors for the block-library.
This commit is contained in:
Patricia Hillebrandt 2024-05-31 05:49:36 +02:00 committed by GitHub
parent 38dbde4ba8
commit 5dd7713346
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
282 changed files with 708 additions and 908 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
plugins/woocommerce-admin/client/activity-panel/activity-card/index.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { cloneElement, Component } from '@wordpress/element'; import { cloneElement, Component } from '@wordpress/element';
import NoticeOutline from 'gridicons/dist/notice-outline'; import NoticeOutline from 'gridicons/dist/notice-outline';
import moment from 'moment'; import moment from 'moment';
@ -36,10 +36,7 @@ class ActivityCard extends Component {
title, title,
unread, unread,
} = this.props; } = this.props;
const cardClassName = classnames( const cardClassName = clsx( 'woocommerce-activity-card', className );
'woocommerce-activity-card',
className
);
const actionsList = Array.isArray( actions ) ? actions : [ actions ]; const actionsList = Array.isArray( actions ) ? actions : [ actions ];
const dateString = isDateString( date ) const dateString = isDateString( date )
? moment.utc( date ).fromNow() ? moment.utc( date ).fromNow()

4
plugins/woocommerce-admin/client/activity-panel/activity-card/placeholder.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { Component } from '@wordpress/element'; import { Component } from '@wordpress/element';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { range } from 'lodash'; import { range } from 'lodash';
@ -10,7 +10,7 @@ class ActivityCardPlaceholder extends Component {
render() { render() {
const { className, hasAction, hasDate, hasSubtitle, lines } = const { className, hasAction, hasDate, hasSubtitle, lines } =
this.props; this.props;
const cardClassName = classnames( const cardClassName = clsx(
'woocommerce-activity-card is-loading', 'woocommerce-activity-card is-loading',
className className
); );

4
plugins/woocommerce-admin/client/activity-panel/activity-header/index.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { Component } from '@wordpress/element'; import { Component } from '@wordpress/element';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Text } from '@woocommerce/experimental'; import { Text } from '@woocommerce/experimental';
@ -15,7 +15,7 @@ import './style.scss';
class ActivityHeader extends Component { class ActivityHeader extends Component {
render() { render() {
const { className, menu, subtitle, title, unreadMessages } = this.props; const { className, menu, subtitle, title, unreadMessages } = this.props;
const cardClassName = classnames( const cardClassName = clsx(
{ {
'woocommerce-layout__inbox-panel-header': subtitle, 'woocommerce-layout__inbox-panel-header': subtitle,
'woocommerce-layout__activity-panel-header': ! subtitle, 'woocommerce-layout__activity-panel-header': ! subtitle,

4
plugins/woocommerce-admin/client/activity-panel/panel.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { Suspense, useRef, useCallback } from '@wordpress/element'; import { Suspense, useRef, useCallback } from '@wordpress/element';
import classnames from 'classnames'; import clsx from 'clsx';
import { Spinner } from '@woocommerce/components'; import { Spinner } from '@woocommerce/components';
/** /**
@ -68,7 +68,7 @@ export const Panel = ( {
return null; return null;
} }
const classNames = classnames( panelClass, { const classNames = clsx( panelClass, {
'is-open': isPanelOpen, 'is-open': isPanelOpen,
'is-switching': isPanelSwitching, 'is-switching': isPanelSwitching,
} ); } );

4
plugins/woocommerce-admin/client/activity-panel/tab/index.js
View File

@ -3,7 +3,7 @@
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
import classnames from 'classnames'; import clsx from 'clsx';
export const Tab = ( { export const Tab = ( {
icon, icon,
@ -14,7 +14,7 @@ export const Tab = ( {
isPanelOpen, isPanelOpen,
onTabClick, onTabClick,
} ) => { } ) => {
const className = classnames( 'woocommerce-layout__activity-panel-tab', { const className = clsx( 'woocommerce-layout__activity-panel-tab', {
'is-active': isPanelOpen && selected, 'is-active': isPanelOpen && selected,
'has-unread': unread, 'has-unread': unread,
} ); } );

11
plugins/woocommerce-admin/client/activity-panel/toggle-bubble.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const ActivityPanelToggleBubble = ( { const ActivityPanelToggleBubble = ( {
@ -9,12 +9,9 @@ const ActivityPanelToggleBubble = ( {
width = 24, width = 24,
hasUnread = false, hasUnread = false,
} ) => { } ) => {
const classes = classnames( const classes = clsx( 'woocommerce-layout__activity-panel-toggle-bubble', {
'woocommerce-layout__activity-panel-toggle-bubble', 'has-unread': hasUnread,
{ } );
'has-unread': hasUnread,
}
);
/* eslint-disable max-len */ /* eslint-disable max-len */
return ( return (

4
plugins/woocommerce-admin/client/core-profiler/components/choice/choice.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -35,7 +35,7 @@ export const Choice = ( {
return ( return (
<div <div
role="radio" role="radio"
className={ classNames( className={ clsx(
'woocommerce-profiler-choice-container', 'woocommerce-profiler-choice-container',
className className
) } ) }

9
plugins/woocommerce-admin/client/core-profiler/components/heading/heading.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -16,12 +16,7 @@ type Props = {
export const Heading = ( { className, title, subTitle }: Props ) => { export const Heading = ( { className, title, subTitle }: Props ) => {
return ( return (
<div <div className={ clsx( 'woocommerce-profiler-heading', className ) }>
className={ classNames(
'woocommerce-profiler-heading',
className
) }
>
<h1 className="woocommerce-profiler-heading__title">{ title }</h1> <h1 className="woocommerce-profiler-heading__title">{ title }</h1>
{ subTitle && ( { subTitle && (
<h2 className="woocommerce-profiler-heading__subtitle"> <h2 className="woocommerce-profiler-heading__subtitle">

11
plugins/woocommerce-admin/client/core-profiler/components/multiple-selector/render-menu.tsx
View File

@ -8,7 +8,7 @@ import {
__experimentalSelectControlMenuItem as MenuItem, __experimentalSelectControlMenuItem as MenuItem,
} from '@woocommerce/components'; } from '@woocommerce/components';
import { ChildrenProps } from '@woocommerce/components/build-types/experimental-select-control/types'; import { ChildrenProps } from '@woocommerce/components/build-types/experimental-select-control/types';
import classNames from 'classnames'; import clsx from 'clsx';
type Props = { type Props = {
selectedOptions: Array< { label: string; value: string } >; selectedOptions: Array< { label: string; value: string } >;
@ -51,12 +51,9 @@ export const renderMenu =
} } } }
> >
<CheckboxControl <CheckboxControl
className={ classNames( className={ clsx( 'core-profiler__checkbox', {
'core-profiler__checkbox', 'is-selected': isSelected,
{ } ) }
'is-selected': isSelected,
}
) }
onChange={ () => {} } onChange={ () => {} }
checked={ isSelected } checked={ isSelected }
label={ item.label } label={ item.label }

6
plugins/woocommerce-admin/client/core-profiler/components/navigation/navigation.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
/** /**
* Internal dependencies * Internal dependencies
@ -33,7 +33,7 @@ export const Navigation = ( {
}: NavigationProps ) => { }: NavigationProps ) => {
return ( return (
<div <div
className={ classnames( className={ clsx(
'woocommerce-profiler-navigation-container', 'woocommerce-profiler-navigation-container',
classNames classNames
) } ) }
@ -58,7 +58,7 @@ export const Navigation = ( {
{ typeof onSkip === 'function' && ( { typeof onSkip === 'function' && (
<Button <Button
onClick={ onSkip } onClick={ onSkip }
className={ classnames( className={ clsx(
'woocommerce-profiler-navigation-skip-link', 'woocommerce-profiler-navigation-skip-link',
classNames.mobile ? 'mobile' : '' classNames.mobile ? 'mobile' : ''
) } ) }

6
plugins/woocommerce-admin/client/core-profiler/components/plugin-card/plugin-card.tsx
View File

@ -4,7 +4,7 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { CheckboxControl } from '@wordpress/components'; import { CheckboxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -43,7 +43,7 @@ export const PluginCard = ( {
) } ) }
{ icon } { icon }
<div <div
className={ classnames( className={ clsx(
'woocommerce-profiler-plugins-plugin-card-text-header', 'woocommerce-profiler-plugins-plugin-card-text-header',
{ {
installed, installed,
@ -58,7 +58,7 @@ export const PluginCard = ( {
</div> </div>
<div <div
className={ classnames( className={ clsx(
'woocommerce-profiler-plugins-plugin-card-text', 'woocommerce-profiler-plugins-plugin-card-text',
{ 'smaller-margin-left': installed } { 'smaller-margin-left': installed }
) } ) }

4
plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx
View File

@ -20,7 +20,7 @@ import {
import { findCountryOption, getCountry } from '@woocommerce/onboarding'; import { findCountryOption, getCountry } from '@woocommerce/onboarding';
import { decodeEntities } from '@wordpress/html-entities'; import { decodeEntities } from '@wordpress/html-entities';
import { z } from 'zod'; import { z } from 'zod';
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -395,7 +395,7 @@ export const BusinessInfo = ( {
{ {
<> <>
<TextControl <TextControl
className={ classNames( className={ clsx(
'woocommerce-profiler-business-info-email-adddress', 'woocommerce-profiler-business-info-email-adddress',
{ 'is-error': isEmailInvalid } { 'is-error': isEmailInvalid }
) } ) }

4
plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx
View File

@ -6,7 +6,7 @@ import { Button } from '@wordpress/components';
import { useState } from '@wordpress/element'; import { useState } from '@wordpress/element';
import { SelectControl } from '@woocommerce/components'; import { SelectControl } from '@woocommerce/components';
import { Icon, chevronDown } from '@wordpress/icons'; import { Icon, chevronDown } from '@wordpress/icons';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -236,7 +236,7 @@ export const UserProfile = ( {
} }
/> />
<div <div
className={ classnames( className={ clsx(
'woocommerce-profiler-page__content woocommerce-profiler-user-profile__content', 'woocommerce-profiler-page__content woocommerce-profiler-user-profile__content',
{ {
'is-platform-selector-open': isPlatformDropdownOpen, 'is-platform-selector-open': isPlatformDropdownOpen,

4
plugins/woocommerce-admin/client/customize-store/assembler-hub/editor.tsx
View File

@ -4,7 +4,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useEffect, useMemo } from '@wordpress/element'; import { useEffect, useMemo } from '@wordpress/element';
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
import { InterfaceSkeleton } from '@wordpress/interface'; import { InterfaceSkeleton } from '@wordpress/interface';
@ -73,7 +73,7 @@ export const Editor = ( { isLoading }: { isLoading: boolean } ) => {
<BlockContextProvider value={ blockContext }> <BlockContextProvider value={ blockContext }>
<InterfaceSkeleton <InterfaceSkeleton
enableRegionNavigation={ false } enableRegionNavigation={ false }
className={ classnames( className={ clsx(
'woocommerce-customize-store__edit-site-editor', 'woocommerce-customize-store__edit-site-editor',
'edit-site-editor__interface-skeleton', 'edit-site-editor__interface-skeleton',
{ {

4
plugins/woocommerce-admin/client/customize-store/assembler-hub/iframe.jsx
View File

@ -4,7 +4,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
useState, useState,
createPortal, createPortal,
@ -123,7 +123,7 @@ function Iframe( {
createPortal( createPortal(
<body <body
ref={ bodyRef } ref={ bodyRef }
className={ classnames( className={ clsx(
'block-editor-iframe__body', 'block-editor-iframe__body',
'editor-styles-wrapper' 'editor-styles-wrapper'
) } ) }

6
plugins/woocommerce-admin/client/customize-store/assembler-hub/layout.tsx
View File

@ -4,7 +4,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
useReducedMotion, useReducedMotion,
useResizeObserver, useResizeObserver,
@ -156,7 +156,7 @@ export const Layout = () => {
type={ templateType } type={ templateType }
id={ templateId } id={ templateId }
> >
<div className={ classnames( 'edit-site-layout' ) }> <div className={ clsx( 'edit-site-layout' ) }>
<motion.div <motion.div
className="edit-site-layout__header-container" className="edit-site-layout__header-container"
animate={ 'view' } animate={ 'view' }
@ -204,7 +204,7 @@ export const Layout = () => {
<motion.div <motion.div
initial={ false } initial={ false }
layout="position" layout="position"
className={ classnames( className={ clsx(
'edit-site-layout__canvas' 'edit-site-layout__canvas'
) } ) }
> >

6
plugins/woocommerce-admin/client/customize-store/assembler-hub/resizable-frame.jsx
View File

@ -4,7 +4,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useState, useRef } from '@wordpress/element'; import { useState, useRef } from '@wordpress/element';
import { import {
ResizableBox, ResizableBox,
@ -202,7 +202,7 @@ function ResizableFrame( {
key="handle" key="handle"
role="separator" role="separator"
aria-orientation="vertical" aria-orientation="vertical"
className={ classnames( 'edit-site-resizable-frame__handle', { className={ clsx( 'edit-site-resizable-frame__handle', {
'is-resizing': isResizing, 'is-resizing': isResizing,
} ) } } ) }
variants={ resizeHandleVariants } variants={ resizeHandleVariants }
@ -302,7 +302,7 @@ function ResizableFrame( {
onResizeStart={ handleResizeStart } onResizeStart={ handleResizeStart }
onResize={ handleResize } onResize={ handleResize }
onResizeStop={ handleResizeStop } onResizeStop={ handleResizeStop }
className={ classnames( 'edit-site-resizable-frame__inner', { className={ clsx( 'edit-site-resizable-frame__inner', {
'is-resizing': isResizing, 'is-resizing': isResizing,
} ) } } ) }
> >

4
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/variation-container.jsx
View File

@ -2,7 +2,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useMemo, useContext } from '@wordpress/element'; import { useMemo, useContext } from '@wordpress/element';
import { ENTER } from '@wordpress/keycodes'; import { ENTER } from '@wordpress/keycodes';
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
@ -144,7 +144,7 @@ export const VariationContainer = ( { variation, children } ) => {
> >
<GlobalStylesContext.Provider value={ context }> <GlobalStylesContext.Provider value={ context }>
<div <div
className={ classnames( className={ clsx(
'woocommerce-customize-store_global-styles-variations_item', 'woocommerce-customize-store_global-styles-variations_item',
{ {
'is-active': isActive, 'is-active': isActive,

11
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/sidebar-navigation-screen.tsx
View File

@ -4,7 +4,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useContext, useState } from '@wordpress/element'; import { useContext, useState } from '@wordpress/element';
import { import {
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
@ -66,12 +66,9 @@ export const SidebarNavigationScreen = ( {
return ( return (
<> <>
<VStack <VStack
className={ classnames( className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
'edit-site-sidebar-navigation-screen__main', 'has-footer': !! footer,
{ } ) }
'has-footer': !! footer,
}
) }
spacing={ 0 } spacing={ 0 }
justify="flex-start" justify="flex-start"
> >

11
plugins/woocommerce-admin/client/customize-store/assembler-hub/site-hub.tsx
View File

@ -4,7 +4,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useSelect } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { import {
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
@ -60,10 +60,7 @@ export const SiteHub = forwardRef(
<motion.div <motion.div
ref={ ref } ref={ ref }
{ ...restProps } { ...restProps }
className={ classnames( className={ clsx( 'edit-site-site-hub', restProps.className ) }
'edit-site-site-hub',
restProps.className
) }
initial={ false } initial={ false }
transition={ { transition={ {
type: 'tween', type: 'tween',
@ -82,7 +79,7 @@ export const SiteHub = forwardRef(
spacing="0" spacing="0"
> >
<div <div
className={ classnames( className={ clsx(
'edit-site-site-hub__view-mode-toggle-container', 'edit-site-site-hub__view-mode-toggle-container',
{ {
'has-transparent-background': isTransparent, 'has-transparent-background': isTransparent,
@ -118,7 +115,7 @@ export const SiteHub = forwardRef(
exit={ { exit={ {
opacity: 0, opacity: 0,
} } } }
className={ classnames( className={ clsx(
'edit-site-site-hub__site-title', 'edit-site-site-hub__site-title',
{ 'is-transparent': isTransparent } { 'is-transparent': isTransparent }
) } ) }

7
plugins/woocommerce-admin/client/customize-store/design-with-ai/components/choice/choice.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -35,10 +35,7 @@ export const Choice = ( {
return ( return (
<div <div
role="radio" role="radio"
className={ classNames( className={ clsx( 'woocommerce-cys-choice-container', className ) }
'woocommerce-cys-choice-container',
className
) }
onClick={ changeHandler } onClick={ changeHandler }
onKeyDown={ ( e ) => { onKeyDown={ ( e ) => {
if ( e.key === 'Enter' ) { if ( e.key === 'Enter' ) {

4
plugins/woocommerce-admin/client/customize-store/intro/intro-banners.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classNames from 'classnames'; import clsx from 'clsx';
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
import { getNewPath } from '@woocommerce/navigation'; import { getNewPath } from '@woocommerce/navigation';
import interpolateComponents from '@automattic/interpolate-components'; import interpolateComponents from '@automattic/interpolate-components';
@ -45,7 +45,7 @@ export const BaseIntroBanner = ( {
} ) => { } ) => {
return ( return (
<div <div
className={ classNames( className={ clsx(
'woocommerce-customize-store-banner', 'woocommerce-customize-store-banner',
bannerClass bannerClass
) } ) }

25
plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classNames from 'classnames'; import clsx from 'clsx';
import { Fragment, useState } from '@wordpress/element'; import { Fragment, useState } from '@wordpress/element';
import LineGraphIcon from 'gridicons/dist/line-graph'; import LineGraphIcon from 'gridicons/dist/line-graph';
import StatsAltIcon from 'gridicons/dist/stats-alt'; import StatsAltIcon from 'gridicons/dist/stats-alt';
@ -210,14 +210,10 @@ const DashboardCharts = ( props ) => {
role="menubar" role="menubar"
> >
<Button <Button
className={ classNames( className={ clsx( 'woocommerce-chart__type-button', {
'woocommerce-chart__type-button', 'woocommerce-chart__type-button-selected':
{ ! query.chartType || query.chartType === 'line',
'woocommerce-chart__type-button-selected': } ) }
! query.chartType ||
query.chartType === 'line',
}
) }
title={ __( 'Line chart', 'woocommerce' ) } title={ __( 'Line chart', 'woocommerce' ) }
aria-checked={ query.chartType === 'line' } aria-checked={ query.chartType === 'line' }
role="menuitemradio" role="menuitemradio"
@ -227,13 +223,10 @@ const DashboardCharts = ( props ) => {
<LineGraphIcon /> <LineGraphIcon />
</Button> </Button>
<Button <Button
className={ classNames( className={ clsx( 'woocommerce-chart__type-button', {
'woocommerce-chart__type-button', 'woocommerce-chart__type-button-selected':
{ query.chartType === 'bar',
'woocommerce-chart__type-button-selected': } ) }
query.chartType === 'bar',
}
) }
title={ __( 'Bar chart', 'woocommerce' ) } title={ __( 'Bar chart', 'woocommerce' ) }
aria-checked={ query.chartType === 'bar' } aria-checked={ query.chartType === 'bar' }
role="menuitemradio" role="menuitemradio"

4
plugins/woocommerce-admin/client/header/index.js
View File

@ -3,7 +3,7 @@
*/ */
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import { useEffect, useLayoutEffect, useRef } from '@wordpress/element'; import { useEffect, useLayoutEffect, useRef } from '@wordpress/element';
import classnames from 'classnames'; import clsx from 'clsx';
import { decodeEntities } from '@wordpress/html-entities'; import { decodeEntities } from '@wordpress/html-entities';
import { import {
WC_HEADER_SLOT_NAME, WC_HEADER_SLOT_NAME,
@ -52,7 +52,7 @@ export const Header = ( { sections, isEmbedded = false, query } ) => {
const pageTitle = getPageTitle( sections ); const pageTitle = getPageTitle( sections );
const { isScrolled } = useIsScrolled(); const { isScrolled } = useIsScrolled();
let debounceTimer = null; let debounceTimer = null;
const className = classnames( 'woocommerce-layout__header', { const className = clsx( 'woocommerce-layout__header', {
'is-scrolled': isScrolled, 'is-scrolled': isScrolled,
} ); } );

4
plugins/woocommerce-admin/client/homescreen/activity-panel/reviews/index.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { Component, Fragment } from '@wordpress/element'; import { Component, Fragment } from '@wordpress/element';
import { Button, Tooltip } from '@wordpress/components'; import { Button, Tooltip } from '@wordpress/components';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
@ -201,7 +201,7 @@ class ReviewsPanel extends Component {
const productImage = const productImage =
get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] ); get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
const productImageClasses = classnames( const productImageClasses = clsx(
'woocommerce-review-activity-card__image-overlay__product', 'woocommerce-review-activity-card__image-overlay__product',
{ {
'is-placeholder': ! productImage || ! productImage.src, 'is-placeholder': ! productImage || ! productImage.src,

15
plugins/woocommerce-admin/client/homescreen/activity-panel/stock/card.js
View File

@ -3,7 +3,7 @@
*/ */
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import { BaseControl, Button } from '@wordpress/components'; import { BaseControl, Button } from '@wordpress/components';
import classnames from 'classnames'; import clsx from 'clsx';
import { Component, Fragment } from '@wordpress/element'; import { Component, Fragment } from '@wordpress/element';
import { ESCAPE } from '@wordpress/keycodes'; import { ESCAPE } from '@wordpress/keycodes';
import { get } from 'lodash'; import { get } from 'lodash';
@ -175,7 +175,7 @@ export class ProductStockCard extends Component {
return ( return (
<span <span
className={ classnames( className={ clsx(
'woocommerce-stock-activity-card__stock-quantity', 'woocommerce-stock-activity-card__stock-quantity',
{ {
'out-of-stock': product.stock_quantity < 1, 'out-of-stock': product.stock_quantity < 1,
@ -239,7 +239,7 @@ export class ProductStockCard extends Component {
const productImage = const productImage =
get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] ); get( product, [ 'images', 0 ] ) || get( product, [ 'image' ] );
const productImageClasses = classnames( const productImageClasses = clsx(
'woocommerce-stock-activity-card__image-overlay__product', 'woocommerce-stock-activity-card__image-overlay__product',
{ {
'is-placeholder': ! productImage || ! productImage.src, 'is-placeholder': ! productImage || ! productImage.src,
@ -252,12 +252,9 @@ export class ProductStockCard extends Component {
</div> </div>
</div> </div>
); );
const activityCardClasses = classnames( const activityCardClasses = clsx( 'woocommerce-stock-activity-card', {
'woocommerce-stock-activity-card', 'is-dimmed': ! editing && ! isLowStock,
{ } );
'is-dimmed': ! editing && ! isLowStock,
}
);
const activityCard = ( const activityCard = (
<ActivityCard <ActivityCard

9
plugins/woocommerce-admin/client/homescreen/header-banner-slot/header-banner-slot.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { useSlot } from '@woocommerce/experimental'; import { useSlot } from '@woocommerce/experimental';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -24,12 +24,7 @@ export const WooHomescreenHeaderBanner = ( {
return null; return null;
} }
return ( return (
<div <div className={ clsx( 'woocommerce-homescreen__header', className ) }>
className={ classnames(
'woocommerce-homescreen__header',
className
) }
>
<WooHomescreenHeaderBannerItem.Slot /> <WooHomescreenHeaderBannerItem.Slot />
</div> </div>
); );

6
plugins/woocommerce-admin/client/homescreen/layout.js
View File

@ -10,7 +10,7 @@ import {
} from '@wordpress/element'; } from '@wordpress/element';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data'; import { withDispatch, withSelect } from '@wordpress/data';
import classnames from 'classnames'; import clsx from 'clsx';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { import {
useUserPreferences, useUserPreferences,
@ -141,13 +141,13 @@ export const Layout = ( {
<> <>
{ isDashboardShown && ( { isDashboardShown && (
<WooHomescreenHeaderBanner <WooHomescreenHeaderBanner
className={ classnames( 'woocommerce-homescreen', { className={ clsx( 'woocommerce-homescreen', {
'woocommerce-homescreen-column': ! twoColumns, 'woocommerce-homescreen-column': ! twoColumns,
} ) } } ) }
/> />
) } ) }
<div <div
className={ classnames( 'woocommerce-homescreen', { className={ clsx( 'woocommerce-homescreen', {
'two-columns': twoColumns, 'two-columns': twoColumns,
} ) } } ) }
> >

4
plugins/woocommerce-admin/client/homescreen/stats-overview/stats-list.js
View File

@ -4,7 +4,7 @@
import { useContext } from '@wordpress/element'; import { useContext } from '@wordpress/element';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { withSelect } from '@wordpress/data'; import { withSelect } from '@wordpress/data';
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
SummaryNumber, SummaryNumber,
SummaryNumberPlaceholder, SummaryNumberPlaceholder,
@ -40,7 +40,7 @@ export const StatsList = ( {
return ( return (
<ul <ul
className={ classnames( 'woocommerce-stats-overview__stats', { className={ clsx( 'woocommerce-stats-overview__stats', {
'is-even': stats.length % 2 === 0, 'is-even': stats.length % 2 === 0,
} ) } } ) }
> >

9
plugins/woocommerce-admin/client/homescreen/wcpay-feature-slot/wcpay-feature-slot.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { useSlot } from '@woocommerce/experimental'; import { useSlot } from '@woocommerce/experimental';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -24,12 +24,7 @@ export const WooHomescreenWCPayFeature = ( {
return null; return null;
} }
return ( return (
<div <div className={ clsx( 'woocommerce-homescreen__header', className ) }>
className={ classnames(
'woocommerce-homescreen__header',
className
) }
>
<WooHomescreenWCPayFeatureItem.Slot /> <WooHomescreenWCPayFeatureItem.Slot />
</div> </div>
); );

4
plugins/woocommerce-admin/client/homescreen/welcome-from-calypso-modal/welcome-from-calypso-modal.js
View File

@ -6,7 +6,7 @@ import { Guide } from '@wordpress/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
import interpolateComponents from '@automattic/interpolate-components'; import interpolateComponents from '@automattic/interpolate-components';
import classNames from 'classnames'; import clsx from 'clsx';
import { Link } from '@woocommerce/components'; import { Link } from '@woocommerce/components';
/** /**
@ -54,7 +54,7 @@ export default function WelcomeFromCalypsoModal( { onClose } ) {
return null; return null;
} }
const guideClassNames = classNames( const guideClassNames = clsx(
'woocommerce__welcome-modal', 'woocommerce__welcome-modal',
'woocommerce__welcome-from-calypso-modal' 'woocommerce__welcome-from-calypso-modal'
); );

4
plugins/woocommerce-admin/client/launch-your-store/hub/index.tsx
View File

@ -3,7 +3,7 @@
*/ */
import { useMachine } from '@xstate5/react'; import { useMachine } from '@xstate5/react';
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -69,7 +69,7 @@ const LaunchStoreController = () => {
return ( return (
<div className={ 'launch-your-store-layout__container' }> <div className={ 'launch-your-store-layout__container' }>
<SidebarContainer <SidebarContainer
className={ classnames( { className={ clsx( {
'is-sidebar-hidden': ! isSidebarVisible, 'is-sidebar-hidden': ! isSidebarVisible,
} ) } } ) }
> >

4
plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/launch-store-success/index.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { Spinner } from '@woocommerce/components'; import { Spinner } from '@woocommerce/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
@ -32,7 +32,7 @@ export const LaunchYourStoreSuccess = ( props: MainContentComponentProps ) => {
return ( return (
<div <div
className={ classnames( className={ clsx(
'launch-store-success-page__container', 'launch-store-success-page__container',
props.className props.className
) } ) }

4
plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/loading.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
*/ */
@ -9,7 +9,7 @@ import type { MainContentComponentProps } from '../xstate';
export const LoadingPage = ( props: MainContentComponentProps ) => { export const LoadingPage = ( props: MainContentComponentProps ) => {
return ( return (
<div <div
className={ classnames( className={ clsx(
'launch-store-loading-page__container', 'launch-store-loading-page__container',
props.className props.className
) } ) }

4
plugins/woocommerce-admin/client/launch-your-store/hub/main-content/pages/site-preview.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useState, useRef, useEffect } from '@wordpress/element'; import { useState, useRef, useEffect } from '@wordpress/element';
import { Spinner } from '@woocommerce/components'; import { Spinner } from '@woocommerce/components';
import { useResizeObserver } from '@wordpress/compose'; import { useResizeObserver } from '@wordpress/compose';
@ -53,7 +53,7 @@ export const SitePreviewPage = ( props: MainContentComponentProps ) => {
return ( return (
<div <div
className={ classnames( className={ clsx(
'launch-store-site-preview-page__container', 'launch-store-site-preview-page__container',
{ 'is-loading': isLoading }, { 'is-loading': isLoading },
props.className props.className

4
plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/launch-store-hub.tsx
View File

@ -3,7 +3,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
createInterpolateElement, createInterpolateElement,
useEffect, useEffect,
@ -88,7 +88,7 @@ export const LaunchYourStoreHubSidebar: React.FC< SidebarComponentProps > = (
return ( return (
<div <div
className={ classnames( className={ clsx(
'launch-store-sidebar__container', 'launch-store-sidebar__container',
props.className props.className
) } ) }

11
plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/components/sidebar-container.tsx
View File

@ -3,7 +3,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { isRTL, __ } from '@wordpress/i18n'; import { isRTL, __ } from '@wordpress/i18n';
import { chevronRight, chevronLeft } from '@wordpress/icons'; import { chevronRight, chevronLeft } from '@wordpress/icons';
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
@ -44,12 +44,9 @@ export const SidebarContainer = ( {
return ( return (
<> <>
<VStack <VStack
className={ classnames( className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
'edit-site-sidebar-navigation-screen__main', 'has-footer': !! footer,
{ } ) }
'has-footer': !! footer,
}
) }
spacing={ 0 } spacing={ 0 }
justify="flex-start" justify="flex-start"
> >

6
plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/tasklist.tsx
View File

@ -7,7 +7,7 @@ import { ONBOARDING_STORE_NAME, TaskType } from '@woocommerce/data';
import { navigateTo, getNewPath } from '@woocommerce/navigation'; import { navigateTo, getNewPath } from '@woocommerce/navigation';
import { resolveSelect } from '@wordpress/data'; import { resolveSelect } from '@wordpress/data';
import { applyFilters } from '@wordpress/hooks'; import { applyFilters } from '@wordpress/hooks';
import classnames from 'classnames'; import clsx from 'clsx';
// @ts-ignore No types for this exist yet. // @ts-ignore No types for this exist yet.
import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item'; import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item';
@ -118,7 +118,7 @@ export const CompletedTaskItem: React.FC< {
classNames?: string; classNames?: string;
} > = ( { task, classNames } ) => ( } > = ( { task, classNames } ) => (
<SidebarNavigationItem <SidebarNavigationItem
className={ classnames( task.id, 'is-complete', classNames ) } className={ clsx( task.id, 'is-complete', classNames ) }
icon={ taskCompleteIcon } icon={ taskCompleteIcon }
disabled={ true } disabled={ true }
> >
@ -132,7 +132,7 @@ export const IncompleteTaskItem: React.FC< {
onClick: () => void; onClick: () => void;
} > = ( { task, classNames, onClick } ) => ( } > = ( { task, classNames, onClick } ) => (
<SidebarNavigationItem <SidebarNavigationItem
className={ classnames( task.id, classNames ) } className={ clsx( task.id, classNames ) }
icon={ taskIcons[ task.id ] } icon={ taskIcons[ task.id ] }
withChevron withChevron
onClick={ onClick } onClick={ onClick }

7
plugins/woocommerce-admin/client/launch-your-store/hub/sidebar/xstate.tsx
View File

@ -11,7 +11,7 @@ import {
spawnChild, spawnChild,
} from 'xstate5'; } from 'xstate5';
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import clsx from 'clsx';
import { getQuery, navigateTo } from '@woocommerce/navigation'; import { getQuery, navigateTo } from '@woocommerce/navigation';
import { OPTIONS_STORE_NAME, TaskListType, TaskType } from '@woocommerce/data'; import { OPTIONS_STORE_NAME, TaskListType, TaskType } from '@woocommerce/data';
import { dispatch } from '@wordpress/data'; import { dispatch } from '@wordpress/data';
@ -410,10 +410,7 @@ export const SidebarContainer = ( {
} ) => { } ) => {
return ( return (
<div <div
className={ classnames( className={ clsx( 'launch-your-store-layout__sidebar', className ) }
'launch-your-store-layout__sidebar',
className
) }
> >
{ children } { children }
</div> </div>

4
plugins/woocommerce-admin/client/launch-your-store/settings/slotfill.js
View File

@ -15,7 +15,7 @@ import {
} from '@wordpress/element'; } from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins'; import { registerPlugin } from '@wordpress/plugins';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classNames from 'classnames'; import clsx from 'clsx';
import { useCopyToClipboard } from '@wordpress/compose'; import { useCopyToClipboard } from '@wordpress/compose';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
import { getSetting } from '@woocommerce/settings'; import { getSetting } from '@woocommerce/settings';
@ -148,7 +148,7 @@ const SiteVisibility = () => {
) } ) }
</p> </p>
<div <div
className={ classNames( className={ clsx(
'site-visibility-settings-slotfill-section-content', 'site-visibility-settings-slotfill-section-content',
{ {
'is-hidden': comingSoon !== 'yes', 'is-hidden': comingSoon !== 'yes',

4
plugins/woocommerce-admin/client/launch-your-store/status/index.tsx
View File

@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
import { Icon, moreVertical, edit, cog } from '@wordpress/icons'; import { Icon, moreVertical, edit, cog } from '@wordpress/icons';
import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components'; import { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
import { getAdminLink, getSetting } from '@woocommerce/settings'; import { getAdminLink, getSetting } from '@woocommerce/settings';
import classnames from 'classnames'; import clsx from 'clsx';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
/** /**
@ -53,7 +53,7 @@ export const LaunchYourStoreStatus = ( {
renderToggle={ ( { isOpen, onToggle } ) => ( renderToggle={ ( { isOpen, onToggle } ) => (
<Button onClick={ onToggle } aria-expanded={ isOpen }> <Button onClick={ onToggle } aria-expanded={ isOpen }>
<div <div
className={ classnames( className={ clsx(
'woocommerce-lys-status-pill', 'woocommerce-lys-status-pill',
{ 'is-live': ! isComingSoon } { 'is-live': ! isComingSoon }
) } ) }

4
plugins/woocommerce-admin/client/layout/footer/footer.tsx
View File

@ -3,7 +3,7 @@
*/ */
import { WC_FOOTER_SLOT_NAME, WooFooterItem } from '@woocommerce/admin-layout'; import { WC_FOOTER_SLOT_NAME, WooFooterItem } from '@woocommerce/admin-layout';
import { useSlot } from '@woocommerce/experimental'; import { useSlot } from '@woocommerce/experimental';
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -21,7 +21,7 @@ export const Footer: React.FC = () => {
} }
return ( return (
<div <div
className={ classNames( 'woocommerce-layout__footer', { className={ clsx( 'woocommerce-layout__footer', {
'at-bottom': atBottom, 'at-bottom': atBottom,
} ) } } ) }
> >

4
plugins/woocommerce-admin/client/layout/store-alerts/index.js
View File

@ -11,7 +11,7 @@ import {
CardHeader, CardHeader,
SelectControl, SelectControl,
} from '@wordpress/components'; } from '@wordpress/components';
import classnames from 'classnames'; import clsx from 'clsx';
import interpolateComponents from '@automattic/interpolate-components'; import interpolateComponents from '@automattic/interpolate-components';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data'; import { withDispatch, withSelect } from '@wordpress/data';
@ -227,7 +227,7 @@ export class StoreAlerts extends Component {
const numberOfAlerts = alerts.length; const numberOfAlerts = alerts.length;
const alert = alerts[ currentIndex ]; const alert = alerts[ currentIndex ];
const type = alert.type; const type = alert.type;
const className = classnames( 'woocommerce-store-alerts', { const className = clsx( 'woocommerce-store-alerts', {
'is-alert-error': type === 'error', 'is-alert-error': type === 'error',
'is-alert-update': type === 'update', 'is-alert-update': type === 'update',
} ); } );

4
plugins/woocommerce-admin/client/layout/transient-notices/index.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { applyFilters } from '@wordpress/hooks'; import { applyFilters } from '@wordpress/hooks';
import classnames from 'classnames'; import clsx from 'clsx';
import { WooFooterItem } from '@woocommerce/admin-layout'; import { WooFooterItem } from '@woocommerce/admin-layout';
import { OPTIONS_STORE_NAME, USER_STORE_NAME } from '@woocommerce/data'; import { OPTIONS_STORE_NAME, USER_STORE_NAME } from '@woocommerce/data';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -82,7 +82,7 @@ export function TransientNotices( props ) {
}; };
const { className } = props; const { className } = props;
const classes = classnames( const classes = clsx(
'woocommerce-transient-notices', 'woocommerce-transient-notices',
'components-notices__snackbar', 'components-notices__snackbar',
className className

13
plugins/woocommerce-admin/client/layout/transient-notices/snackbar/index.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { noop } from 'lodash'; import { noop } from 'lodash';
import classnames from 'classnames'; import clsx from 'clsx';
import { speak } from '@wordpress/a11y'; import { speak } from '@wordpress/a11y';
import { import {
RawHTML, RawHTML,
@ -89,7 +89,7 @@ function Snackbar(
return () => clearTimeout( timeoutHandle ); return () => clearTimeout( timeoutHandle );
}, [ explicitDismiss, onDismiss, onRemove ] ); }, [ explicitDismiss, onDismiss, onRemove ] );
const classes = classnames( className, 'components-snackbar', { const classes = clsx( className, 'components-snackbar', {
'components-snackbar-explicit-dismiss': !! explicitDismiss, 'components-snackbar-explicit-dismiss': !! explicitDismiss,
} ); } );
if ( actions && actions.length > 1 ) { if ( actions && actions.length > 1 ) {
@ -101,12 +101,9 @@ function Snackbar(
actions = [ actions[ 0 ] ]; actions = [ actions[ 0 ] ];
} }
const snackbarContentClassnames = classnames( const snackbarContentClassnames = clsx( 'components-snackbar__content', {
'components-snackbar__content', 'components-snackbar__content-with-icon': !! icon,
{ } );
'components-snackbar__content-with-icon': !! icon,
}
);
if ( __unstableHTML === true ) { if ( __unstableHTML === true ) {
children = <RawHTML>{ children }</RawHTML>; children = <RawHTML>{ children }</RawHTML>;

4
plugins/woocommerce-admin/client/layout/transient-notices/snackbar/list.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { omit, noop } from 'lodash'; import { omit, noop } from 'lodash';
import { useTransition, animated } from '@react-spring/web'; import { useTransition, animated } from '@react-spring/web';
import { useReducedMotion } from '@wordpress/compose'; import { useReducedMotion } from '@wordpress/compose';
@ -47,7 +47,7 @@ function SnackbarList( {
immediate: isReducedMotion, immediate: isReducedMotion,
} ); } );
className = classnames( 'components-snackbar-list', className ); className = clsx( 'components-snackbar-list', className );
const removeNotice = ( notice ) => () => { const removeNotice = ( notice ) => () => {
onRemove( notice.id ); onRemove( notice.id );
// To be removed when we're no longer using core/notices2. // To be removed when we're no longer using core/notices2.

9
plugins/woocommerce-admin/client/marketing/components/CollapsibleCard/CollapsibleCard.tsx
View File

@ -12,7 +12,7 @@ import {
Button, Button,
} from '@wordpress/components'; } from '@wordpress/components';
import { chevronUp, chevronDown } from '@wordpress/icons'; import { chevronUp, chevronDown } from '@wordpress/icons';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -42,12 +42,7 @@ const CollapsibleCard: React.FC< CollapsibleCardProps > = ( {
}; };
return ( return (
<Card <Card className={ clsx( 'woocommerce-collapsible-card', className ) }>
className={ classnames(
'woocommerce-collapsible-card',
className
) }
>
<CardHeader onClick={ handleClick }> <CardHeader onClick={ handleClick }>
<CardHeaderTitle>{ header }</CardHeaderTitle> <CardHeaderTitle>{ header }</CardHeaderTitle>
<Button <Button

4
plugins/woocommerce-admin/client/marketing/components/CreateNewCampaignModal/CreateNewCampaignModal.tsx
View File

@ -12,7 +12,7 @@ import {
FlexItem, FlexItem,
} from '@wordpress/components'; } from '@wordpress/components';
import { chevronUp, chevronDown, external } from '@wordpress/icons'; import { chevronUp, chevronDown, external } from '@wordpress/icons';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -59,7 +59,7 @@ export const CreateNewCampaignModal = ( props: CreateCampaignModalProps ) => {
return ( return (
<Modal <Modal
{ ...restProps } { ...restProps }
className={ classnames( className={ clsx(
className, className,
'woocommerce-marketing-create-campaign-modal' 'woocommerce-marketing-create-campaign-modal'
) } ) }

4
plugins/woocommerce-admin/client/marketing/components/PluginCardBody/PluginCardBody.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -36,7 +36,7 @@ export const PluginCardBody: React.FC< PluginCardBodyProps > = ( {
} ) => { } ) => {
return ( return (
<CardBody <CardBody
className={ classnames( className={ clsx(
'woocommerce_marketing_plugin_card_body', 'woocommerce_marketing_plugin_card_body',
className className
) } ) }

4
plugins/woocommerce-admin/client/marketing/components/product-icon/index.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Component } from '@wordpress/element'; import { Component } from '@wordpress/element';
import { Icon } from '@wordpress/icons'; import { Icon } from '@wordpress/icons';
@ -24,7 +24,7 @@ class ProductIcon extends Component {
return ( return (
<div <div
className={ classnames( className={ clsx(
this.props.className, this.props.className,
'woocommerce-admin-marketing-product-icon' 'woocommerce-admin-marketing-product-icon'
) } ) }

7
plugins/woocommerce-admin/client/marketing/coupons/card/index.js
View File

@ -3,7 +3,7 @@
*/ */
import { Card as WPCard, CardBody, CardHeader } from '@wordpress/components'; import { Card as WPCard, CardBody, CardHeader } from '@wordpress/components';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import classnames from 'classnames'; import clsx from 'clsx';
import { Text } from '@woocommerce/experimental'; import { Text } from '@woocommerce/experimental';
/** /**
@ -16,10 +16,7 @@ const Card = ( props ) => {
return ( return (
<WPCard <WPCard
className={ classnames( className={ clsx( className, 'woocommerce-admin-marketing-card' ) }
className,
'woocommerce-admin-marketing-card'
) }
> >
<CardHeader> <CardHeader>
<div> <div>

6
plugins/woocommerce-admin/client/marketing/coupons/knowledge-base/index.js
View File

@ -3,7 +3,7 @@
*/ */
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classNames from 'classnames'; import clsx from 'clsx';
import { withDispatch, withSelect } from '@wordpress/data'; import { withDispatch, withSelect } from '@wordpress/data';
import { useState } from '@wordpress/element'; import { useState } from '@wordpress/element';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -62,7 +62,7 @@ const KnowledgeBase = ( {
( page - 1 ) * 2, ( page - 1 ) * 2,
( page - 1 ) * 2 + 2 ( page - 1 ) * 2 + 2
); );
const pageClass = classNames( const pageClass = clsx(
'woocommerce-marketing-knowledgebase-card__page', 'woocommerce-marketing-knowledgebase-card__page',
{ {
'page-with-single-post': currentPosts.length === 1, 'page-with-single-post': currentPosts.length === 1,
@ -194,7 +194,7 @@ const KnowledgeBase = ( {
<Card <Card
title={ title } title={ title }
description={ description } description={ description }
className={ classNames( className={ clsx(
'woocommerce-marketing-knowledgebase-card', 'woocommerce-marketing-knowledgebase-card',
categoryClass categoryClass
) } ) }

8
plugins/woocommerce-admin/client/marketing/coupons/recommended-extensions/index.js
View File

@ -3,7 +3,7 @@
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose'; import { compose } from '@wordpress/compose';
import classnames from 'classnames'; import clsx from 'clsx';
import { withDispatch, withSelect } from '@wordpress/data'; import { withDispatch, withSelect } from '@wordpress/data';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -36,14 +36,14 @@ const RecommendedExtensions = ( {
<Card <Card
title={ title } title={ title }
description={ description } description={ description }
className={ classnames( className={ clsx(
'woocommerce-marketing-recommended-extensions-card', 'woocommerce-marketing-recommended-extensions-card',
categoryClass categoryClass
) } ) }
> >
{ isLoading ? ( { isLoading ? (
<div <div
className={ classnames( className={ clsx(
'woocommerce-marketing-recommended-extensions-card__items', 'woocommerce-marketing-recommended-extensions-card__items',
`woocommerce-marketing-recommended-extensions-card__items--count-${ placholdersCount }` `woocommerce-marketing-recommended-extensions-card__items--count-${ placholdersCount }`
) } ) }
@ -54,7 +54,7 @@ const RecommendedExtensions = ( {
</div> </div>
) : ( ) : (
<div <div
className={ classnames( className={ clsx(
'woocommerce-marketing-recommended-extensions-card__items', 'woocommerce-marketing-recommended-extensions-card__items',
`woocommerce-marketing-recommended-extensions-card__items--count-${ extensions.length }` `woocommerce-marketing-recommended-extensions-card__items--count-${ extensions.length }`
) } ) }

4
plugins/woocommerce-admin/client/marketing/coupons/slider/index.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { useRef, useState, useEffect } from '@wordpress/element'; import { useRef, useState, useEffect } from '@wordpress/element';
import classnames from 'classnames'; import clsx from 'clsx';
import { CSSTransition, TransitionGroup } from 'react-transition-group'; import { CSSTransition, TransitionGroup } from 'react-transition-group';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
@ -17,7 +17,7 @@ const Slider = ( { children, animationKey, animate } ) => {
const container = useRef(); const container = useRef();
const containerClasses = classnames( const containerClasses = clsx(
'woocommerce-marketing-slider', 'woocommerce-marketing-slider',
animate && `animate-${ animate }` animate && `animate-${ animate }`
); );

6
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/IssueStatus.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import GridiconNotice from 'gridicons/dist/notice'; import GridiconNotice from 'gridicons/dist/notice';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -23,7 +23,7 @@ export const IssueStatus: React.FC< IssueStatusPropsType > = ( {
if ( registeredChannel.issueType === 'error' ) { if ( registeredChannel.issueType === 'error' ) {
return ( return (
<div <div
className={ classnames( className={ clsx(
issueStatusClassName, issueStatusClassName,
`${ issueStatusClassName }__error` `${ issueStatusClassName }__error`
) } ) }
@ -37,7 +37,7 @@ export const IssueStatus: React.FC< IssueStatusPropsType > = ( {
if ( registeredChannel.issueType === 'warning' ) { if ( registeredChannel.issueType === 'warning' ) {
return ( return (
<div <div
className={ classnames( className={ clsx(
issueStatusClassName, issueStatusClassName,
`${ issueStatusClassName }__warning` `${ issueStatusClassName }__warning`
) } ) }

12
plugins/woocommerce-admin/client/marketing/overview-multichannel/Channels/SyncStatus.tsx
View File

@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle'; import GridiconCheckmarkCircle from 'gridicons/dist/checkmark-circle';
import GridiconSync from 'gridicons/dist/sync'; import GridiconSync from 'gridicons/dist/sync';
import GridiconNotice from 'gridicons/dist/notice'; import GridiconNotice from 'gridicons/dist/notice';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -23,9 +23,7 @@ const className = 'woocommerce-marketing-sync-status';
export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => { export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
if ( status === 'failed' ) { if ( status === 'failed' ) {
return ( return (
<div <div className={ clsx( className, `${ className }__failed` ) }>
className={ classnames( className, `${ className }__failed` ) }
>
<GridiconNotice size={ iconSize } /> <GridiconNotice size={ iconSize } />
{ __( 'Sync failed', 'woocommerce' ) } { __( 'Sync failed', 'woocommerce' ) }
</div> </div>
@ -34,9 +32,7 @@ export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
if ( status === 'syncing' ) { if ( status === 'syncing' ) {
return ( return (
<div <div className={ clsx( className, `${ className }__syncing` ) }>
className={ classnames( className, `${ className }__syncing` ) }
>
<GridiconSync size={ iconSize } /> <GridiconSync size={ iconSize } />
{ __( 'Syncing', 'woocommerce' ) } { __( 'Syncing', 'woocommerce' ) }
</div> </div>
@ -44,7 +40,7 @@ export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
} }
return ( return (
<div className={ classnames( className, `${ className }__synced` ) }> <div className={ clsx( className, `${ className }__synced` ) }>
<GridiconCheckmarkCircle size={ iconSize } /> <GridiconCheckmarkCircle size={ iconSize } />
{ __( 'Synced', 'woocommerce' ) } { __( 'Synced', 'woocommerce' ) }
</div> </div>

4
plugins/woocommerce-admin/client/marketplace/components/category-selector/category-dropdown.tsx
View File

@ -5,7 +5,7 @@ import { Dropdown } from '@wordpress/components';
import { chevronDown, chevronUp, Icon } from '@wordpress/icons'; import { chevronDown, chevronUp, Icon } from '@wordpress/icons';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { navigateTo, getNewPath } from '@woocommerce/navigation'; import { navigateTo, getNewPath } from '@woocommerce/navigation';
import classNames from 'classnames'; import clsx from 'clsx';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
/** /**
@ -47,7 +47,7 @@ function DropdownContent( props: {
key={ category.slug } key={ category.slug }
> >
<button <button
className={ classNames( className={ clsx(
'woocommerce-marketplace__category-dropdown-item-button', 'woocommerce-marketplace__category-dropdown-item-button',
{ {
'woocommerce-marketplace__category-dropdown-item-button--selected': 'woocommerce-marketplace__category-dropdown-item-button--selected':

15
plugins/woocommerce-admin/client/marketplace/components/category-selector/category-link.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classNames from 'classnames'; import clsx from 'clsx';
import { navigateTo, getNewPath } from '@woocommerce/navigation'; import { navigateTo, getNewPath } from '@woocommerce/navigation';
/** /**
@ -26,14 +26,11 @@ export default function CategoryLink( props: Category ): JSX.Element {
const isLoading = props.label === ''; const isLoading = props.label === '';
const classes = classNames( const classes = clsx( 'woocommerce-marketplace__category-item-button', {
'woocommerce-marketplace__category-item-button', 'woocommerce-marketplace__category-item-button--selected':
{ props.selected,
'woocommerce-marketplace__category-item-button--selected': 'is-loading': isLoading,
props.selected, } );
'is-loading': isLoading,
}
);
return ( return (
<button <button

4
plugins/woocommerce-admin/client/marketplace/components/category-selector/category-selector.tsx
View File

@ -4,7 +4,7 @@
import { useState, useEffect } from '@wordpress/element'; import { useState, useEffect } from '@wordpress/element';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useQuery } from '@woocommerce/navigation'; import { useQuery } from '@woocommerce/navigation';
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -149,7 +149,7 @@ export default function CategorySelector(
type={ props.type } type={ props.type }
label={ __( 'More', 'woocommerce' ) } label={ __( 'More', 'woocommerce' ) }
categories={ dropdownItems } categories={ dropdownItems }
buttonClassName={ classNames( buttonClassName={ clsx(
'woocommerce-marketplace__category-item-button', 'woocommerce-marketplace__category-item-button',
{ {
'woocommerce-marketplace__category-item-button--selected': 'woocommerce-marketplace__category-item-button--selected':

4
plugins/woocommerce-admin/client/marketplace/components/likert-scale/likert-scale.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -52,7 +52,7 @@ export default function LikertScale( props: LikertScaleProps ): JSX.Element {
}, },
]; ];
const classes = classNames( 'woocommerce-marketplace__likert-scale', { const classes = clsx( 'woocommerce-marketplace__likert-scale', {
'validation-failed': validationFailed, 'validation-failed': validationFailed,
} ); } );

6
plugins/woocommerce-admin/client/marketplace/components/notice/notice.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classNames from 'classnames'; import clsx from 'clsx';
import { useEffect, useState } from '@wordpress/element'; import { useEffect, useState } from '@wordpress/element';
import { Icon, check, closeSmall, info, percent } from '@wordpress/icons'; // See: https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--docs import { Icon, check, closeSmall, info, percent } from '@wordpress/icons'; // See: https://wordpress.github.io/gutenberg/?path=/docs/icons-icon--docs
@ -64,7 +64,7 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
if ( ! isVisible ) return null; if ( ! isVisible ) return null;
const classes = classNames( const classes = clsx(
'woocommerce-marketplace__notice', 'woocommerce-marketplace__notice',
`woocommerce-marketplace__notice--${ variant }`, `woocommerce-marketplace__notice--${ variant }`,
{ {
@ -74,7 +74,7 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
const iconElement = iconMap[ ( icon || 'info' ) as IconKey ]; const iconElement = iconMap[ ( icon || 'info' ) as IconKey ];
const iconClass = classNames( const iconClass = clsx(
'woocommerce-marketplace__notice-icon', 'woocommerce-marketplace__notice-icon',
`woocommerce-marketplace__notice-icon--${ variant }` `woocommerce-marketplace__notice-icon--${ variant }`
); );

4
plugins/woocommerce-admin/client/marketplace/components/product-card/product-card.tsx
View File

@ -3,7 +3,7 @@
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Card } from '@wordpress/components'; import { Card } from '@wordpress/components';
import classnames from 'classnames'; import clsx from 'clsx';
import { ExtraProperties, queueRecordEvent } from '@woocommerce/tracks'; import { ExtraProperties, queueRecordEvent } from '@woocommerce/tracks';
import { useQuery } from '@woocommerce/navigation'; import { useQuery } from '@woocommerce/navigation';
@ -125,7 +125,7 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
return product.url; return product.url;
}; };
const classNames = classnames( const classNames = clsx(
'woocommerce-marketplace__product-card', 'woocommerce-marketplace__product-card',
`woocommerce-marketplace__product-card--${ type }`, `woocommerce-marketplace__product-card--${ type }`,
{ {

4
plugins/woocommerce-admin/client/marketplace/components/product-list-content/product-list-content.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { Fragment, useEffect, useState } from '@wordpress/element'; import { Fragment, useEffect, useState } from '@wordpress/element';
import classnames from 'classnames'; import clsx from 'clsx';
import { addQueryArgs } from '@wordpress/url'; import { addQueryArgs } from '@wordpress/url';
/** /**
@ -28,7 +28,7 @@ export default function ProductListContent( props: {
} ): JSX.Element { } ): JSX.Element {
const wccomHelperSettings = getAdminSetting( 'wccomHelper', {} ); const wccomHelperSettings = getAdminSetting( 'wccomHelper', {} );
const classes = classnames( const classes = clsx(
'woocommerce-marketplace__product-list-content', 'woocommerce-marketplace__product-list-content',
props.className props.className
); );

11
plugins/woocommerce-admin/client/marketplace/components/product-list-header/product-list-header.tsx
View File

@ -3,7 +3,7 @@
*/ */
import { Link } from '@woocommerce/components'; import { Link } from '@woocommerce/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
/** /**
@ -22,12 +22,9 @@ export default function ProductListHeader(
const { title, groupURL } = props; const { title, groupURL } = props;
const isLoading = title === ''; const isLoading = title === '';
const classNames = classnames( const classNames = clsx( 'woocommerce-marketplace__product-list-header', {
'woocommerce-marketplace__product-list-header', 'is-loading': isLoading,
{ } );
'is-loading': isLoading,
}
);
return ( return (
<div className={ classNames } aria-hidden={ isLoading }> <div className={ classNames } aria-hidden={ isLoading }>

12
plugins/woocommerce-admin/client/marketplace/components/products/products.tsx
View File

@ -9,7 +9,7 @@ import {
} from '@wordpress/element'; } from '@wordpress/element';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation'; import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
import classnames from 'classnames'; import clsx from 'clsx';
import { addQueryArgs } from '@wordpress/url'; import { addQueryArgs } from '@wordpress/url';
import { useSelect } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { ONBOARDING_STORE_NAME } from '@woocommerce/data'; import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
@ -119,15 +119,13 @@ export default function Products( props: ProductsProps ) {
const baseContainerClass = 'woocommerce-marketplace__search-'; const baseContainerClass = 'woocommerce-marketplace__search-';
const baseProductListTitleClass = 'product-list-title--'; const baseProductListTitleClass = 'product-list-title--';
const containerClassName = classnames( const containerClassName = clsx( baseContainerClass + labelForClassName );
baseContainerClass + labelForClassName const productListTitleClassName = clsx(
);
const productListTitleClassName = classnames(
'woocommerce-marketplace__product-list-title', 'woocommerce-marketplace__product-list-title',
baseContainerClass + baseProductListTitleClass + labelForClassName, baseContainerClass + baseProductListTitleClass + labelForClassName,
{ 'is-loading': isLoading } { 'is-loading': isLoading }
); );
const viewAllButonClassName = classnames( const viewAllButonClassName = clsx(
'woocommerce-marketplace__view-all-button', 'woocommerce-marketplace__view-all-button',
baseContainerClass + 'button-' + labelForClassName baseContainerClass + 'button-' + labelForClassName
); );
@ -150,7 +148,7 @@ export default function Products( props: ProductsProps ) {
return <NoResults type={ type } showHeading={ false } />; return <NoResults type={ type } showHeading={ false } />;
} }
const productListClass = classnames( const productListClass = clsx(
showAllButton showAllButton
? 'woocommerce-marketplace__product-list-content--collapsed' ? 'woocommerce-marketplace__product-list-content--collapsed'
: '' : ''

8
plugins/woocommerce-admin/client/marketplace/components/tabs/tabs.tsx
View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { useContext, useEffect, useState } from '@wordpress/element'; import { useContext, useEffect, useState } from '@wordpress/element';
import { Button } from '@wordpress/components'; import { Button } from '@wordpress/components';
import classNames from 'classnames'; import clsx from 'clsx';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation'; import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
/** /**
@ -118,7 +118,7 @@ const renderTabs = (
tabContent.push( tabContent.push(
tabs[ tabKey ]?.href ? ( tabs[ tabKey ]?.href ? (
<a <a
className={ classNames( className={ clsx(
'woocommerce-marketplace__tab-button', 'woocommerce-marketplace__tab-button',
'components-button', 'components-button',
`woocommerce-marketplace__tab-${ tabKey }` `woocommerce-marketplace__tab-${ tabKey }`
@ -130,7 +130,7 @@ const renderTabs = (
</a> </a>
) : ( ) : (
<Button <Button
className={ classNames( className={ clsx(
'woocommerce-marketplace__tab-button', 'woocommerce-marketplace__tab-button',
`woocommerce-marketplace__tab-${ tabKey }`, `woocommerce-marketplace__tab-${ tabKey }`,
{ {
@ -176,7 +176,7 @@ const Tabs = ( props: TabsProps ): JSX.Element => {
}, [ selectedTab, hasBusinessServices ] ); }, [ selectedTab, hasBusinessServices ] );
return ( return (
<nav <nav
className={ classNames( className={ clsx(
'woocommerce-marketplace__tabs', 'woocommerce-marketplace__tabs',
additionalClassNames || [] additionalClassNames || []
) } ) }

4
plugins/woocommerce-admin/client/navigation/components/container/index.js
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { useEffect, useMemo, useState, useRef } from '@wordpress/element'; import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
import classnames from 'classnames'; import clsx from 'clsx';
import { Navigation } from '@woocommerce/experimental'; import { Navigation } from '@woocommerce/experimental';
import { NAVIGATION_STORE_NAME, useUser } from '@woocommerce/data'; import { NAVIGATION_STORE_NAME, useUser } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
@ -77,7 +77,7 @@ const Container = () => {
const isRoot = activeLevel === 'woocommerce'; const isRoot = activeLevel === 'woocommerce';
const classes = classnames( 'woocommerce-navigation', { const classes = clsx( 'woocommerce-navigation', {
'is-root': isRoot, 'is-root': isRoot,
} ); } );

4
plugins/woocommerce-admin/client/navigation/components/header/index.js
View File

@ -8,7 +8,7 @@ import { Icon, wordpress } from '@wordpress/icons';
import { getSetting } from '@woocommerce/settings'; import { getSetting } from '@woocommerce/settings';
import { useSelect } from '@wordpress/data'; import { useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element'; import { useEffect, useState } from '@wordpress/element';
import classnames from 'classnames'; import clsx from 'clsx';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { addHistoryListener } from '@woocommerce/navigation'; import { addHistoryListener } from '@woocommerce/navigation';
@ -103,7 +103,7 @@ const Header = () => {
buttonIcon = null; buttonIcon = null;
} }
const className = classnames( 'woocommerce-navigation-header', { const className = clsx( 'woocommerce-navigation-header', {
'is-scrolled': isScrolled, 'is-scrolled': isScrolled,
} ); } );

4
plugins/woocommerce-admin/client/products/tour/components/guide/index.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useState, useRef, createElement } from '@wordpress/element'; import { useState, useRef, createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Modal, Button } from '@wordpress/components'; import { Modal, Button } from '@wordpress/components';
@ -53,7 +53,7 @@ function Guide( {
return ( return (
<Modal <Modal
className={ classnames( 'components-guide', className ) } className={ clsx( 'components-guide', className ) }
title={ contentLabel } title={ contentLabel }
onRequestClose={ () => { onRequestClose={ () => {
onFinish( currentPage, 'close' ); onFinish( currentPage, 'close' );

4
plugins/woocommerce-admin/client/profile-wizard/steps/business-details/flows/selective-bundle/index.js
View File

@ -25,7 +25,7 @@ import {
} from '@woocommerce/data'; } from '@woocommerce/data';
import { getSetting } from '@woocommerce/settings'; import { getSetting } from '@woocommerce/settings';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
import classnames from 'classnames'; import clsx from 'clsx';
import { CurrencyContext } from '@woocommerce/currency'; import { CurrencyContext } from '@woocommerce/currency';
/** /**
@ -423,7 +423,7 @@ class BusinessDetails extends Component {
const { className, ...props } = getInputProps( name ); const { className, ...props } = getInputProps( name );
return { return {
...props, ...props,
className: classnames( className: clsx(
`woocommerce-profile-wizard__${ name.replace( /\_/g, '-' ) }`, `woocommerce-profile-wizard__${ name.replace( /\_/g, '-' ) }`,
className className
), ),

7
plugins/woocommerce-admin/client/settings-recommendations/dismissable-list.tsx
View File

@ -7,7 +7,7 @@ import { OPTIONS_STORE_NAME } from '@woocommerce/data';
import { EllipsisMenu } from '@woocommerce/components'; import { EllipsisMenu } from '@woocommerce/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { createContext, useContext } from '@wordpress/element'; import { createContext, useContext } from '@wordpress/element';
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -75,10 +75,7 @@ export const DismissableList: React.FC< {
return ( return (
<Card <Card
size="medium" size="medium"
className={ classNames( className={ clsx( 'woocommerce-dismissable-list', className ) }
'woocommerce-dismissable-list',
className
) }
> >
<OptionNameContext.Provider value={ dismissOptionName }> <OptionNameContext.Provider value={ dismissOptionName }>
{ children } { children }

4
plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Item.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { Fragment } from '@wordpress/element'; import { Fragment } from '@wordpress/element';
import { CardBody, CardMedia, CardDivider } from '@wordpress/components'; import { CardBody, CardMedia, CardDivider } from '@wordpress/components';
import { SetupRequired } from '@woocommerce/onboarding'; import { SetupRequired } from '@woocommerce/onboarding';
@ -48,7 +48,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
); );
const showRecommended = isRecommended && needsSetup; const showRecommended = isRecommended && needsSetup;
const classes = classnames( const classes = clsx(
'woocommerce-task-payment', 'woocommerce-task-payment',
'woocommerce-task-card', 'woocommerce-task-card',
needsSetup && 'woocommerce-task-payment-not-configured', needsSetup && 'woocommerce-task-payment-not-configured',

7
plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/List/Placeholder.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { Fragment } from '@wordpress/element'; import { Fragment } from '@wordpress/element';
import { import {
Card, Card,
@ -18,10 +18,7 @@ import { Text } from '@woocommerce/experimental';
import './List.scss'; import './List.scss';
const PlaceholderItem = () => { const PlaceholderItem = () => {
const classes = classnames( const classes = clsx( 'woocommerce-task-payment', 'woocommerce-task-card' );
'woocommerce-task-payment',
'woocommerce-task-card'
);
return ( return (
<Fragment> <Fragment>

4
plugins/woocommerce-admin/client/task-lists/fills/PaymentGatewaySuggestions/components/Setup/Placeholder.js
View File

@ -1,12 +1,12 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { Card, CardBody } from '@wordpress/components'; import { Card, CardBody } from '@wordpress/components';
import { Stepper } from '@woocommerce/components'; import { Stepper } from '@woocommerce/components';
export const Placeholder = () => { export const Placeholder = () => {
const classes = classnames( const classes = clsx(
'is-loading', 'is-loading',
'woocommerce-task-payment-method', 'woocommerce-task-payment-method',
'woocommerce-task-card' 'woocommerce-task-card'

4
plugins/woocommerce-admin/client/task-lists/fills/experimental-shipping-recommendation/components/plugin-banner.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
*/ */
@ -33,7 +33,7 @@ export const PluginBanner = ( {
}: PluginBannerProps ) => { }: PluginBannerProps ) => {
return ( return (
<div <div
className={ classNames( className={ clsx(
'woocommerce-task-shipping-recommendation__plugins-install', 'woocommerce-task-shipping-recommendation__plugins-install',
layout layout
) } ) }

4
plugins/woocommerce-admin/client/task-lists/fills/shipping/index.js
View File

@ -22,7 +22,7 @@ import {
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
import { registerPlugin } from '@wordpress/plugins'; import { registerPlugin } from '@wordpress/plugins';
import { WooOnboardingTask } from '@woocommerce/onboarding'; import { WooOnboardingTask } from '@woocommerce/onboarding';
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -587,7 +587,7 @@ export class Shipping extends Component {
<Button <Button
isTertiary isTertiary
onClick={ onShippingPluginInstalltionSkip } onClick={ onShippingPluginInstalltionSkip }
className={ classNames( className={ clsx(
'woocommerce-task-shipping-recommendations_skip-button', 'woocommerce-task-shipping-recommendations_skip-button',
pluginsToPromote.length === 2 pluginsToPromote.length === 2
? 'dual' ? 'dual'

4
plugins/woocommerce-admin/client/task-lists/fills/shipping/rates.js
View File

@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
import { Flag, Form, TextControlWithAffixes } from '@woocommerce/components'; import { Flag, Form, TextControlWithAffixes } from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
import { Icon, globe } from '@wordpress/icons'; import { Icon, globe } from '@wordpress/icons';
import classnames from 'classnames'; import clsx from 'clsx';
import { CurrencyContext } from '@woocommerce/currency'; import { CurrencyContext } from '@woocommerce/currency';
const ShippingRateIcon = ( { zone } ) => ( const ShippingRateIcon = ( { zone } ) => (
@ -52,7 +52,7 @@ const ShippingRateInput = ( {
renderInputSuffix, renderInputSuffix,
inputProps: { className, ...restInputProps }, inputProps: { className, ...restInputProps },
} ) => { } ) => {
const textControlClassName = classnames( const textControlClassName = clsx(
'muriel-input-text', 'muriel-input-text',
'woocommerce-shipping-rate__control-wrapper', 'woocommerce-shipping-rate__control-wrapper',
className className

4
plugins/woocommerce-admin/client/task-lists/fills/tax/components/partners.tsx
View File

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import { Button, Card, CardBody, CardHeader } from '@wordpress/components'; import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
import { Children } from '@wordpress/element'; import { Children } from '@wordpress/element';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -18,7 +18,7 @@ export const Partners: React.FC< TaxChildProps > = ( {
onManual, onManual,
onDisable, onDisable,
} ) => { } ) => {
const classes = classnames( const classes = clsx(
'woocommerce-task-card', 'woocommerce-task-card',
'woocommerce-tax-partners', 'woocommerce-tax-partners',
`woocommerce-tax-partners__partners-count-${ Children.count( `woocommerce-tax-partners__partners-count-${ Children.count(

4
plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed-header.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useEffect, useState } from '@wordpress/element'; import { useEffect, useState } from '@wordpress/element';
import { EllipsisMenu } from '@woocommerce/components'; import { EllipsisMenu } from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
@ -148,7 +148,7 @@ export const TaskListCompletedHeader: React.FC<
return ( return (
<> <>
<div <div
className={ classnames( className={ clsx(
'woocommerce-task-dashboard__container setup-task-list' 'woocommerce-task-dashboard__container setup-task-list'
) } ) }
> >

4
plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-completed.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { Button, Card, CardHeader } from '@wordpress/components'; import { Button, Card, CardHeader } from '@wordpress/components';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
@ -20,7 +20,7 @@ export const TaskListCompleted = ( {
return ( return (
<> <>
<div <div
className={ classnames( className={ clsx(
'woocommerce-task-dashboard__container setup-task-list' 'woocommerce-task-dashboard__container setup-task-list'
) } ) }
> >

4
plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-item.tsx
View File

@ -8,7 +8,7 @@ import { useCallback } from '@wordpress/element';
import { useDispatch } from '@wordpress/data'; import { useDispatch } from '@wordpress/data';
import { WooOnboardingTaskListItem } from '@woocommerce/onboarding'; import { WooOnboardingTaskListItem } from '@woocommerce/onboarding';
import classnames from 'classnames'; import clsx from 'clsx';
export type TaskListItemProps = { export type TaskListItemProps = {
task: TaskType; task: TaskType;
@ -63,7 +63,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( {
const DefaultTaskItem = useCallback( const DefaultTaskItem = useCallback(
( props: { onClick?: () => void; isClickable?: boolean } ) => { ( props: { onClick?: () => void; isClickable?: boolean } ) => {
const className = classnames( const className = clsx(
'woocommerce-task-list__item index-' + taskIndex, 'woocommerce-task-list__item index-' + taskIndex,
{ {
complete: isComplete, complete: isComplete,

4
plugins/woocommerce-admin/client/task-lists/setup-task-list/components/task-list-placeholder.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -22,7 +22,7 @@ export const TaskListPlaceholder: React.FC< TasksPlaceholderProps > = (
return ( return (
<div <div
className={ classnames( className={ clsx(
'woocommerce-task-dashboard__container setup-task-list' 'woocommerce-task-dashboard__container setup-task-list'
) } ) }
> >

4
plugins/woocommerce-admin/client/task-lists/setup-task-list/setup-task-list.tsx
View File

@ -18,7 +18,7 @@ import {
} from '@woocommerce/data'; } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks'; import { recordEvent } from '@woocommerce/tracks';
import { List, useSlot } from '@woocommerce/experimental'; import { List, useSlot } from '@woocommerce/experimental';
import classnames from 'classnames'; import clsx from 'clsx';
import { useLayoutContext } from '@woocommerce/admin-layout'; import { useLayoutContext } from '@woocommerce/admin-layout';
/** /**
@ -287,7 +287,7 @@ export const SetupTaskList: React.FC< TaskListProps > = ( {
<ProgressHeader taskListId={ id } /> <ProgressHeader taskListId={ id } />
) : null } ) : null }
<div <div
className={ classnames( className={ clsx(
`woocommerce-task-dashboard__container woocommerce-task-list__${ id } setup-task-list` `woocommerce-task-dashboard__container woocommerce-task-list__${ id } setup-task-list`
) } ) }
> >

4
plugins/woocommerce-admin/client/task-lists/setup-task-list/task-list-completion-slot/task-list-completion-slot.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { useSlot } from '@woocommerce/experimental'; import { useSlot } from '@woocommerce/experimental';
import classNames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -27,7 +27,7 @@ export const TaskListCompletionSlot = ( {
} }
return ( return (
<div <div
className={ classNames( className={ clsx(
'woocommerce-tasklist-completion-slot', 'woocommerce-tasklist-completion-slot',
className className
) } ) }

2
plugins/woocommerce-admin/package.json
View File

@ -79,7 +79,7 @@
"@wordpress/warning": "wp-6.0", "@wordpress/warning": "wp-6.0",
"@xstate/react": "3.2.1", "@xstate/react": "3.2.1",
"@xstate5/react": "npm:@xstate/react@4", "@xstate5/react": "npm:@xstate/react@4",
"classnames": "^2.3.2", "clsx": "^2.1.1",
"core-js": "^3.34.0", "core-js": "^3.34.0",
"debug": "^4.3.4", "debug": "^4.3.4",
"dompurify": "^2.4.7", "dompurify": "^2.4.7",

5
plugins/woocommerce-blocks/.eslintrc.js
View File

@ -114,6 +114,11 @@ const restrictedImports = [
message: message:
'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.', 'This Lodash method is not recommended. Please use native functionality instead. If using `memoize`, please use `memize` instead.',
}, },
{
name: 'classnames',
message:
"Please use `clsx` instead. It's a lighter and faster drop-in replacement for `classnames`.",
},
]; ];
module.exports = { module.exports = {

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/average-rating/block.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { useProductDataContext } from '@woocommerce/shared-context'; import { useProductDataContext } from '@woocommerce/shared-context';
import { useStyleProps } from '@woocommerce/base-hooks'; import { useStyleProps } from '@woocommerce/base-hooks';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
@ -17,7 +17,7 @@ export const Block = ( props: ProductAverageRatingProps ): JSX.Element => {
const styleProps = useStyleProps( props ); const styleProps = useStyleProps( props );
const { product } = useProductDataContext(); const { product } = useProductDataContext();
const className = classnames( const className = clsx(
styleProps.className, styleProps.className,
'wc-block-components-product-average-rating', 'wc-block-components-product-average-rating',
{ {

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { __, _n, sprintf } from '@wordpress/i18n'; import { __, _n, sprintf } from '@wordpress/i18n';
import { import {
useStoreEvents, useStoreEvents,
@ -90,7 +90,7 @@ const AddToCartButton = ( {
{ ...buttonProps } { ...buttonProps }
aria-label={ buttonAriaLabel } aria-label={ buttonAriaLabel }
disabled={ addingToCart } disabled={ addingToCart }
className={ classnames( className={ clsx(
className, className,
'wp-block-button__link', 'wp-block-button__link',
'wp-element-button', 'wp-element-button',
@ -114,7 +114,7 @@ const AddToCartButtonPlaceholder = ( {
}: AddToCartButtonPlaceholderAttributes ): JSX.Element => { }: AddToCartButtonPlaceholderAttributes ): JSX.Element => {
return ( return (
<button <button
className={ classnames( className={ clsx(
'wp-block-button__link', 'wp-block-button__link',
'wp-element-button', 'wp-element-button',
'add_to_cart_button', 'add_to_cart_button',
@ -136,7 +136,7 @@ export const Block = ( props: BlockAttributes ): JSX.Element => {
return ( return (
<div <div
className={ classnames( className={ clsx(
className, className,
'wp-block-button', 'wp-block-button',
'wc-block-components-product-button', 'wc-block-components-product-button',

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
Disabled, Disabled,
Button, Button,
@ -101,7 +101,7 @@ const Edit = ( {
<Disabled> <Disabled>
<Block <Block
{ ...{ ...attributes, ...context } } { ...{ ...attributes, ...context } }
className={ classnames( attributes.className, { className={ clsx( attributes.className, {
[ `has-custom-width wp-block-button__width-${ width }` ]: [ `has-custom-width wp-block-button__width-${ width }` ]:
width, width,
} ) } } ) }

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/save.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { useBlockProps } from '@wordpress/block-editor'; import { useBlockProps } from '@wordpress/block-editor';
import classnames from 'classnames'; import clsx from 'clsx';
/** /**
* Internal dependencies * Internal dependencies
@ -24,7 +24,7 @@ const Save = ( { attributes }: Props ): JSX.Element | null => {
return ( return (
<div <div
{ ...useBlockProps.save( { { ...useBlockProps.save( {
className: classnames( 'is-loading', attributes.className, { className: clsx( 'is-loading', attributes.className, {
[ `has-custom-width wp-block-button__width-${ attributes.width }` ]: [ `has-custom-width wp-block-button__width-${ attributes.width }` ]:
attributes.width, attributes.width,
} ), } ),

6
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.tsx
View File

@ -3,7 +3,7 @@
*/ */
import { Fragment } from '@wordpress/element'; import { Fragment } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings'; import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
import { import {
useInnerBlockLayoutContext, useInnerBlockLayoutContext,
@ -115,7 +115,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
if ( ! product.id ) { if ( ! product.id ) {
return ( return (
<div <div
className={ classnames( className={ clsx(
className, className,
'wc-block-components-product-image', 'wc-block-components-product-image',
{ {
@ -153,7 +153,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
return ( return (
<div <div
className={ classnames( className={ clsx(
className, className,
'wc-block-components-product-image', 'wc-block-components-product-image',
{ {

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import ProductPrice from '@woocommerce/base-components/product-price'; import ProductPrice from '@woocommerce/base-components/product-price';
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format'; import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
import { import {
@ -43,7 +43,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
const isDescendentOfAllProductsBlock = const isDescendentOfAllProductsBlock =
parentName === 'woocommerce/all-products'; parentName === 'woocommerce/all-products';
const wrapperClassName = classnames( const wrapperClassName = clsx(
'wc-block-components-product-price', 'wc-block-components-product-price',
className, className,
styleProps.className, styleProps.className,
@ -73,7 +73,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
const pricePreview = '5000'; const pricePreview = '5000';
const isOnSale = prices.price !== prices.regular_price; const isOnSale = prices.price !== prices.regular_price;
const priceClassName = classnames( { const priceClassName = clsx( {
[ `${ parentClassName }__product-price__value` ]: parentClassName, [ `${ parentClassName }__product-price__value` ]: parentClassName,
[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale, [ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
} ); } );
@ -101,7 +101,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
? pricePreview ? pricePreview
: prices.regular_price : prices.regular_price
} }
regularPriceClassName={ classnames( { regularPriceClassName={ clsx( {
[ `${ parentClassName }__product-price__regular` ]: [ `${ parentClassName }__product-price__regular` ]:
parentClassName, parentClassName,
} ) } } ) }

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/product-details/block.tsx
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
interface SingleProductTab { interface SingleProductTab {
@ -18,7 +18,7 @@ const ProductTabTitle = ( {
}: Pick< SingleProductTab, 'id' | 'title' | 'active' > ) => { }: Pick< SingleProductTab, 'id' | 'title' | 'active' > ) => {
return ( return (
<li <li
className={ classnames( `${ id }_tab`, { className={ clsx( `${ id }_tab`, {
active, active,
} ) } } ) }
id={ `tab-title-${ id }` } id={ `tab-title-${ id }` }

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-counter/block.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __, _n, sprintf } from '@wordpress/i18n'; import { __, _n, sprintf } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
useInnerBlockLayoutContext, useInnerBlockLayoutContext,
useProductDataContext, useProductDataContext,
@ -65,7 +65,7 @@ export const Block = (
const { product } = useProductDataContext(); const { product } = useProductDataContext();
const reviews = getRatingCount( product ); const reviews = getRatingCount( product );
const className = classnames( const className = clsx(
styleProps.className, styleProps.className,
'wc-block-components-product-rating-counter', 'wc-block-components-product-rating-counter',
{ {

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating-stars/block.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __, _n, sprintf } from '@wordpress/i18n'; import { __, _n, sprintf } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
useInnerBlockLayoutContext, useInnerBlockLayoutContext,
useProductDataContext, useProductDataContext,
@ -49,7 +49,7 @@ const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
return ( return (
<div <div
className={ classnames( className={ clsx(
'wc-block-components-product-rating-stars__norating-container', 'wc-block-components-product-rating-stars__norating-container',
`${ parentClassName }-product-rating-stars__norating-container` `${ parentClassName }-product-rating-stars__norating-container`
) } ) }
@ -93,7 +93,7 @@ const Rating = ( props: RatingProps ): JSX.Element => {
}; };
return ( return (
<div <div
className={ classnames( className={ clsx(
'wc-block-components-product-rating-stars__stars', 'wc-block-components-product-rating-stars__stars',
`${ parentClassName }__product-rating-stars__stars` `${ parentClassName }__product-rating-stars__stars`
) } ) }
@ -124,7 +124,7 @@ export const Block = ( props: ProductRatingStarsProps ): JSX.Element | null => {
const rating = getAverageRating( product ); const rating = getAverageRating( product );
const reviews = getRatingCount( product ); const reviews = getRatingCount( product );
const className = classnames( const className = clsx(
styleProps.className, styleProps.className,
'wc-block-components-product-rating-stars', 'wc-block-components-product-rating-stars',
{ {

8
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __, _n, sprintf } from '@wordpress/i18n'; import { __, _n, sprintf } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
useInnerBlockLayoutContext, useInnerBlockLayoutContext,
useProductDataContext, useProductDataContext,
@ -49,7 +49,7 @@ const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
return ( return (
<div <div
className={ classnames( className={ clsx(
'wc-block-components-product-rating__norating-container', 'wc-block-components-product-rating__norating-container',
`${ parentClassName }-product-rating__norating-container` `${ parentClassName }-product-rating__norating-container`
) } ) }
@ -91,7 +91,7 @@ const Rating = ( props: RatingProps ): JSX.Element => {
}; };
return ( return (
<div <div
className={ classnames( className={ clsx(
'wc-block-components-product-rating__stars', 'wc-block-components-product-rating__stars',
`${ parentClassName }__product-rating__stars` `${ parentClassName }__product-rating__stars`
) } ) }
@ -146,7 +146,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | undefined => {
const rating = getAverageRating( product ); const rating = getAverageRating( product );
const reviews = getRatingCount( product ); const reviews = getRatingCount( product );
const className = classnames( const className = clsx(
styleProps.className, styleProps.className,
'wc-block-components-product-rating', 'wc-block-components-product-rating',
{ {

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { Label } from '@woocommerce/blocks-components'; import { Label } from '@woocommerce/blocks-components';
import { import {
useInnerBlockLayoutContext, useInnerBlockLayoutContext,
@ -40,7 +40,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
return ( return (
<div <div
className={ classnames( className={ clsx(
'wc-block-components-product-sale-badge', 'wc-block-components-product-sale-badge',
className, className,
alignClass, alignClass,

6
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/save.js
View File

@ -1,7 +1,7 @@
/** /**
* External dependencies * External dependencies
*/ */
import classnames from 'classnames'; import clsx from 'clsx';
const save = ( { attributes } ) => { const save = ( { attributes } ) => {
if ( if (
@ -12,9 +12,7 @@ const save = ( { attributes } ) => {
return null; return null;
} }
return ( return <div className={ clsx( 'is-loading', attributes.className ) } />;
<div className={ classnames( 'is-loading', attributes.className ) } />
);
}; };
export default save; export default save;

6
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __ } from '@wordpress/i18n'; import { __ } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
useInnerBlockLayoutContext, useInnerBlockLayoutContext,
useProductDataContext, useProductDataContext,
@ -31,7 +31,7 @@ const Preview = ( {
style?: React.CSSProperties | undefined; style?: React.CSSProperties | undefined;
} ) => ( } ) => (
<div <div
className={ classnames( className, { className={ clsx( className, {
[ `${ parentClassName }__product-sku` ]: parentClassName, [ `${ parentClassName }__product-sku` ]: parentClassName,
} ) } } ) }
style={ style } style={ style }
@ -67,7 +67,7 @@ const Block = ( props: Props ): JSX.Element | null => {
parentClassName={ parentClassName } parentClassName={ parentClassName }
sku={ sku } sku={ sku }
{ ...( props.isDescendantOfAllProducts && { { ...( props.isDescendantOfAllProducts && {
className: classnames( className: clsx(
className, className,
'wc-block-components-product-sku wp-block-woocommerce-product-sku', 'wc-block-components-product-sku wp-block-woocommerce-product-sku',
styleProps.className styleProps.className

4
plugins/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.tsx
View File

@ -2,7 +2,7 @@
* External dependencies * External dependencies
*/ */
import { __, sprintf } from '@wordpress/i18n'; import { __, sprintf } from '@wordpress/i18n';
import classnames from 'classnames'; import clsx from 'clsx';
import { import {
useInnerBlockLayoutContext, useInnerBlockLayoutContext,
useProductDataContext, useProductDataContext,
@ -74,7 +74,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
return ( return (
<div <div
className={ classnames( className, { className={ clsx( className, {
[ `${ parentClassName }__stock-indicator` ]: parentClassName, [ `${ parentClassName }__stock-indicator` ]: parentClassName,
'wc-block-components-product-stock-indicator--in-stock': 'wc-block-components-product-stock-indicator--in-stock':
inStock, inStock,

Some files were not shown because too many files have changed in this diff Show More