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

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

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

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { Component } from '@wordpress/element';
import PropTypes from 'prop-types';
import { Text } from '@woocommerce/experimental';
@ -15,7 +15,7 @@ import './style.scss';
class ActivityHeader extends Component {
render() {
const { className, menu, subtitle, title, unreadMessages } = this.props;
const cardClassName = classnames(
const cardClassName = clsx(
{
'woocommerce-layout__inbox-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
*/
import { Suspense, useRef, useCallback } from '@wordpress/element';
import classnames from 'classnames';
import clsx from 'clsx';
import { Spinner } from '@woocommerce/components';
/**
@ -68,7 +68,7 @@ export const Panel = ( {
return null;
}
const classNames = classnames( panelClass, {
const classNames = clsx( panelClass, {
'is-open': isPanelOpen,
'is-switching': isPanelSwitching,
} );

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -16,12 +16,7 @@ type Props = {
export const Heading = ( { className, title, subTitle }: Props ) => {
return (
<div
className={ classNames(
'woocommerce-profiler-heading',
className
) }
>
<div className={ clsx( 'woocommerce-profiler-heading', className ) }>
<h1 className="woocommerce-profiler-heading__title">{ title }</h1>
{ 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,
} from '@woocommerce/components';
import { ChildrenProps } from '@woocommerce/components/build-types/experimental-select-control/types';
import classNames from 'classnames';
import clsx from 'clsx';
type Props = {
selectedOptions: Array< { label: string; value: string } >;
@ -51,12 +51,9 @@ export const renderMenu =
} }
>
<CheckboxControl
className={ classNames(
'core-profiler__checkbox',
{
'is-selected': isSelected,
}
) }
className={ clsx( 'core-profiler__checkbox', {
'is-selected': isSelected,
} ) }
onChange={ () => {} }
checked={ isSelected }
label={ item.label }

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

@ -2,7 +2,7 @@
* External dependencies
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
import { Button } from '@wordpress/components';
/**
* Internal dependencies
@ -33,7 +33,7 @@ export const Navigation = ( {
}: NavigationProps ) => {
return (
<div
className={ classnames(
className={ clsx(
'woocommerce-profiler-navigation-container',
classNames
) }
@ -58,7 +58,7 @@ export const Navigation = ( {
{ typeof onSkip === 'function' && (
<Button
onClick={ onSkip }
className={ classnames(
className={ clsx(
'woocommerce-profiler-navigation-skip-link',
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 { CheckboxControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -43,7 +43,7 @@ export const PluginCard = ( {
) }
{ icon }
<div
className={ classnames(
className={ clsx(
'woocommerce-profiler-plugins-plugin-card-text-header',
{
installed,
@ -58,7 +58,7 @@ export const PluginCard = ( {
</div>
<div
className={ classnames(
className={ clsx(
'woocommerce-profiler-plugins-plugin-card-text',
{ '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 { decodeEntities } from '@wordpress/html-entities';
import { z } from 'zod';
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -395,7 +395,7 @@ export const BusinessInfo = ( {
{
<>
<TextControl
className={ classNames(
className={ clsx(
'woocommerce-profiler-business-info-email-adddress',
{ '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 { SelectControl } from '@woocommerce/components';
import { Icon, chevronDown } from '@wordpress/icons';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -236,7 +236,7 @@ export const UserProfile = ( {
}
/>
<div
className={ classnames(
className={ clsx(
'woocommerce-profiler-page__content woocommerce-profiler-user-profile__content',
{
'is-platform-selector-open': isPlatformDropdownOpen,

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

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

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

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

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

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

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

@ -4,7 +4,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useState, useRef } from '@wordpress/element';
import {
ResizableBox,
@ -202,7 +202,7 @@ function ResizableFrame( {
key="handle"
role="separator"
aria-orientation="vertical"
className={ classnames( 'edit-site-resizable-frame__handle', {
className={ clsx( 'edit-site-resizable-frame__handle', {
'is-resizing': isResizing,
} ) }
variants={ resizeHandleVariants }
@ -302,7 +302,7 @@ function ResizableFrame( {
onResizeStart={ handleResizeStart }
onResize={ handleResize }
onResizeStop={ handleResizeStop }
className={ classnames( 'edit-site-resizable-frame__inner', {
className={ clsx( 'edit-site-resizable-frame__inner', {
'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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useMemo, useContext } from '@wordpress/element';
import { ENTER } from '@wordpress/keycodes';
import { __, sprintf } from '@wordpress/i18n';
@ -144,7 +144,7 @@ export const VariationContainer = ( { variation, children } ) => {
>
<GlobalStylesContext.Provider value={ context }>
<div
className={ classnames(
className={ clsx(
'woocommerce-customize-store_global-styles-variations_item',
{
'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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useContext, useState } from '@wordpress/element';
import {
// @ts-ignore No types for this exist yet.
@ -66,12 +66,9 @@ export const SidebarNavigationScreen = ( {
return (
<>
<VStack
className={ classnames(
'edit-site-sidebar-navigation-screen__main',
{
'has-footer': !! footer,
}
) }
className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
'has-footer': !! footer,
} ) }
spacing={ 0 }
justify="flex-start"
>

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

@ -4,7 +4,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useSelect } from '@wordpress/data';
import {
// @ts-ignore No types for this exist yet.
@ -60,10 +60,7 @@ export const SiteHub = forwardRef(
<motion.div
ref={ ref }
{ ...restProps }
className={ classnames(
'edit-site-site-hub',
restProps.className
) }
className={ clsx( 'edit-site-site-hub', restProps.className ) }
initial={ false }
transition={ {
type: 'tween',
@ -82,7 +79,7 @@ export const SiteHub = forwardRef(
spacing="0"
>
<div
className={ classnames(
className={ clsx(
'edit-site-site-hub__view-mode-toggle-container',
{
'has-transparent-background': isTransparent,
@ -118,7 +115,7 @@ export const SiteHub = forwardRef(
exit={ {
opacity: 0,
} }
className={ classnames(
className={ clsx(
'edit-site-site-hub__site-title',
{ '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
*/
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -35,10 +35,7 @@ export const Choice = ( {
return (
<div
role="radio"
className={ classNames(
'woocommerce-cys-choice-container',
className
) }
className={ clsx( 'woocommerce-cys-choice-container', className ) }
onClick={ changeHandler }
onKeyDown={ ( e ) => {
if ( e.key === 'Enter' ) {

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

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

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

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

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

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

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

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

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

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

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

@ -10,7 +10,7 @@ import {
} from '@wordpress/element';
import { compose } from '@wordpress/compose';
import { withDispatch, withSelect } from '@wordpress/data';
import classnames from 'classnames';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import {
useUserPreferences,
@ -141,13 +141,13 @@ export const Layout = ( {
<>
{ isDashboardShown && (
<WooHomescreenHeaderBanner
className={ classnames( 'woocommerce-homescreen', {
className={ clsx( 'woocommerce-homescreen', {
'woocommerce-homescreen-column': ! twoColumns,
} ) }
/>
) }
<div
className={ classnames( 'woocommerce-homescreen', {
className={ clsx( 'woocommerce-homescreen', {
'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 { __ } from '@wordpress/i18n';
import { withSelect } from '@wordpress/data';
import classnames from 'classnames';
import clsx from 'clsx';
import {
SummaryNumber,
SummaryNumberPlaceholder,
@ -40,7 +40,7 @@ export const StatsList = ( {
return (
<ul
className={ classnames( 'woocommerce-stats-overview__stats', {
className={ clsx( 'woocommerce-stats-overview__stats', {
'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
*/
import { useSlot } from '@woocommerce/experimental';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -24,12 +24,7 @@ export const WooHomescreenWCPayFeature = ( {
return null;
}
return (
<div
className={ classnames(
'woocommerce-homescreen__header',
className
) }
>
<div className={ clsx( 'woocommerce-homescreen__header', className ) }>
<WooHomescreenWCPayFeatureItem.Slot />
</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 { recordEvent } from '@woocommerce/tracks';
import interpolateComponents from '@automattic/interpolate-components';
import classNames from 'classnames';
import clsx from 'clsx';
import { Link } from '@woocommerce/components';
/**
@ -54,7 +54,7 @@ export default function WelcomeFromCalypsoModal( { onClose } ) {
return null;
}
const guideClassNames = classNames(
const guideClassNames = clsx(
'woocommerce__welcome-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 React, { useEffect } from 'react';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -69,7 +69,7 @@ const LaunchStoreController = () => {
return (
<div className={ 'launch-your-store-layout__container' }>
<SidebarContainer
className={ classnames( {
className={ clsx( {
'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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { Spinner } from '@woocommerce/components';
import { __ } from '@wordpress/i18n';
@ -32,7 +32,7 @@ export const LaunchYourStoreSuccess = ( props: MainContentComponentProps ) => {
return (
<div
className={ classnames(
className={ clsx(
'launch-store-success-page__container',
props.className
) }

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
*/
@ -9,7 +9,7 @@ import type { MainContentComponentProps } from '../xstate';
export const LoadingPage = ( props: MainContentComponentProps ) => {
return (
<div
className={ classnames(
className={ clsx(
'launch-store-loading-page__container',
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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useState, useRef, useEffect } from '@wordpress/element';
import { Spinner } from '@woocommerce/components';
import { useResizeObserver } from '@wordpress/compose';
@ -53,7 +53,7 @@ export const SitePreviewPage = ( props: MainContentComponentProps ) => {
return (
<div
className={ classnames(
className={ clsx(
'launch-store-site-preview-page__container',
{ 'is-loading': isLoading },
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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import {
createInterpolateElement,
useEffect,
@ -88,7 +88,7 @@ export const LaunchYourStoreHubSidebar: React.FC< SidebarComponentProps > = (
return (
<div
className={ classnames(
className={ clsx(
'launch-store-sidebar__container',
props.className
) }

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

@ -3,7 +3,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { isRTL, __ } from '@wordpress/i18n';
import { chevronRight, chevronLeft } from '@wordpress/icons';
// @ts-ignore No types for this exist yet.
@ -44,12 +44,9 @@ export const SidebarContainer = ( {
return (
<>
<VStack
className={ classnames(
'edit-site-sidebar-navigation-screen__main',
{
'has-footer': !! footer,
}
) }
className={ clsx( 'edit-site-sidebar-navigation-screen__main', {
'has-footer': !! footer,
} ) }
spacing={ 0 }
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 { resolveSelect } from '@wordpress/data';
import { applyFilters } from '@wordpress/hooks';
import classnames from 'classnames';
import clsx from 'clsx';
// @ts-ignore No types for this exist yet.
import SidebarNavigationItem from '@wordpress/edit-site/build-module/components/sidebar-navigation-item';
@ -118,7 +118,7 @@ export const CompletedTaskItem: React.FC< {
classNames?: string;
} > = ( { task, classNames } ) => (
<SidebarNavigationItem
className={ classnames( task.id, 'is-complete', classNames ) }
className={ clsx( task.id, 'is-complete', classNames ) }
icon={ taskCompleteIcon }
disabled={ true }
>
@ -132,7 +132,7 @@ export const IncompleteTaskItem: React.FC< {
onClick: () => void;
} > = ( { task, classNames, onClick } ) => (
<SidebarNavigationItem
className={ classnames( task.id, classNames ) }
className={ clsx( task.id, classNames ) }
icon={ taskIcons[ task.id ] }
withChevron
onClick={ onClick }

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

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

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

@ -15,7 +15,7 @@ import {
} from '@wordpress/element';
import { registerPlugin } from '@wordpress/plugins';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import clsx from 'clsx';
import { useCopyToClipboard } from '@wordpress/compose';
import { recordEvent } from '@woocommerce/tracks';
import { getSetting } from '@woocommerce/settings';
@ -148,7 +148,7 @@ const SiteVisibility = () => {
) }
</p>
<div
className={ classNames(
className={ clsx(
'site-visibility-settings-slotfill-section-content',
{
'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 { Dropdown, Button, MenuGroup, MenuItem } from '@wordpress/components';
import { getAdminLink, getSetting } from '@woocommerce/settings';
import classnames from 'classnames';
import clsx from 'clsx';
import { recordEvent } from '@woocommerce/tracks';
/**
@ -53,7 +53,7 @@ export const LaunchYourStoreStatus = ( {
renderToggle={ ( { isOpen, onToggle } ) => (
<Button onClick={ onToggle } aria-expanded={ isOpen }>
<div
className={ classnames(
className={ clsx(
'woocommerce-lys-status-pill',
{ '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 { useSlot } from '@woocommerce/experimental';
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -21,7 +21,7 @@ export const Footer: React.FC = () => {
}
return (
<div
className={ classNames( 'woocommerce-layout__footer', {
className={ clsx( 'woocommerce-layout__footer', {
'at-bottom': atBottom,
} ) }
>

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

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

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

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

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

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

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { omit, noop } from 'lodash';
import { useTransition, animated } from '@react-spring/web';
import { useReducedMotion } from '@wordpress/compose';
@ -47,7 +47,7 @@ function SnackbarList( {
immediate: isReducedMotion,
} );
className = classnames( 'components-snackbar-list', className );
className = clsx( 'components-snackbar-list', className );
const removeNotice = ( notice ) => () => {
onRemove( notice.id );
// 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,
} from '@wordpress/components';
import { chevronUp, chevronDown } from '@wordpress/icons';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -42,12 +42,7 @@ const CollapsibleCard: React.FC< CollapsibleCardProps > = ( {
};
return (
<Card
className={ classnames(
'woocommerce-collapsible-card',
className
) }
>
<Card className={ clsx( 'woocommerce-collapsible-card', className ) }>
<CardHeader onClick={ handleClick }>
<CardHeaderTitle>{ header }</CardHeaderTitle>
<Button

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

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

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

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

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import { Component } from '@wordpress/element';
import { Icon } from '@wordpress/icons';
@ -24,7 +24,7 @@ class ProductIcon extends Component {
return (
<div
className={ classnames(
className={ clsx(
this.props.className,
'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 PropTypes from 'prop-types';
import classnames from 'classnames';
import clsx from 'clsx';
import { Text } from '@woocommerce/experimental';
/**
@ -16,10 +16,7 @@ const Card = ( props ) => {
return (
<WPCard
className={ classnames(
className,
'woocommerce-admin-marketing-card'
) }
className={ clsx( className, 'woocommerce-admin-marketing-card' ) }
>
<CardHeader>
<div>

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

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

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

@ -3,7 +3,7 @@
*/
import { __ } from '@wordpress/i18n';
import { compose } from '@wordpress/compose';
import classnames from 'classnames';
import clsx from 'clsx';
import { withDispatch, withSelect } from '@wordpress/data';
import PropTypes from 'prop-types';
@ -36,14 +36,14 @@ const RecommendedExtensions = ( {
<Card
title={ title }
description={ description }
className={ classnames(
className={ clsx(
'woocommerce-marketing-recommended-extensions-card',
categoryClass
) }
>
{ isLoading ? (
<div
className={ classnames(
className={ clsx(
'woocommerce-marketing-recommended-extensions-card__items',
`woocommerce-marketing-recommended-extensions-card__items--count-${ placholdersCount }`
) }
@ -54,7 +54,7 @@ const RecommendedExtensions = ( {
</div>
) : (
<div
className={ classnames(
className={ clsx(
'woocommerce-marketing-recommended-extensions-card__items',
`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
*/
import { useRef, useState, useEffect } from '@wordpress/element';
import classnames from 'classnames';
import clsx from 'clsx';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import PropTypes from 'prop-types';
import { debounce } from 'lodash';
@ -17,7 +17,7 @@ const Slider = ( { children, animationKey, animate } ) => {
const container = useRef();
const containerClasses = classnames(
const containerClasses = clsx(
'woocommerce-marketing-slider',
animate && `animate-${ animate }`
);

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

@ -2,7 +2,7 @@
* External dependencies
*/
import GridiconNotice from 'gridicons/dist/notice';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -23,7 +23,7 @@ export const IssueStatus: React.FC< IssueStatusPropsType > = ( {
if ( registeredChannel.issueType === 'error' ) {
return (
<div
className={ classnames(
className={ clsx(
issueStatusClassName,
`${ issueStatusClassName }__error`
) }
@ -37,7 +37,7 @@ export const IssueStatus: React.FC< IssueStatusPropsType > = ( {
if ( registeredChannel.issueType === 'warning' ) {
return (
<div
className={ classnames(
className={ clsx(
issueStatusClassName,
`${ 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 GridiconSync from 'gridicons/dist/sync';
import GridiconNotice from 'gridicons/dist/notice';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -23,9 +23,7 @@ const className = 'woocommerce-marketing-sync-status';
export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
if ( status === 'failed' ) {
return (
<div
className={ classnames( className, `${ className }__failed` ) }
>
<div className={ clsx( className, `${ className }__failed` ) }>
<GridiconNotice size={ iconSize } />
{ __( 'Sync failed', 'woocommerce' ) }
</div>
@ -34,9 +32,7 @@ export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
if ( status === 'syncing' ) {
return (
<div
className={ classnames( className, `${ className }__syncing` ) }
>
<div className={ clsx( className, `${ className }__syncing` ) }>
<GridiconSync size={ iconSize } />
{ __( 'Syncing', 'woocommerce' ) }
</div>
@ -44,7 +40,7 @@ export const SyncStatus: React.FC< SyncStatusPropsType > = ( { status } ) => {
}
return (
<div className={ classnames( className, `${ className }__synced` ) }>
<div className={ clsx( className, `${ className }__synced` ) }>
<GridiconCheckmarkCircle size={ iconSize } />
{ __( 'Synced', 'woocommerce' ) }
</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 { __ } from '@wordpress/i18n';
import { navigateTo, getNewPath } from '@woocommerce/navigation';
import classNames from 'classnames';
import clsx from 'clsx';
import { recordEvent } from '@woocommerce/tracks';
/**
@ -47,7 +47,7 @@ function DropdownContent( props: {
key={ category.slug }
>
<button
className={ classNames(
className={ clsx(
'woocommerce-marketplace__category-dropdown-item-button',
{
'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
*/
import classNames from 'classnames';
import clsx from 'clsx';
import { navigateTo, getNewPath } from '@woocommerce/navigation';
/**
@ -26,14 +26,11 @@ export default function CategoryLink( props: Category ): JSX.Element {
const isLoading = props.label === '';
const classes = classNames(
'woocommerce-marketplace__category-item-button',
{
'woocommerce-marketplace__category-item-button--selected':
props.selected,
'is-loading': isLoading,
}
);
const classes = clsx( 'woocommerce-marketplace__category-item-button', {
'woocommerce-marketplace__category-item-button--selected':
props.selected,
'is-loading': isLoading,
} );
return (
<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 { __ } from '@wordpress/i18n';
import { useQuery } from '@woocommerce/navigation';
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -149,7 +149,7 @@ export default function CategorySelector(
type={ props.type }
label={ __( 'More', 'woocommerce' ) }
categories={ dropdownItems }
buttonClassName={ classNames(
buttonClassName={ clsx(
'woocommerce-marketplace__category-item-button',
{
'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
*/
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import clsx from 'clsx';
/**
* 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,
} );

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classNames from 'classnames';
import clsx from 'clsx';
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
@ -64,7 +64,7 @@ export default function Notice( props: NoticeProps ): JSX.Element | null {
if ( ! isVisible ) return null;
const classes = classNames(
const classes = clsx(
'woocommerce-marketplace__notice',
`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 iconClass = classNames(
const iconClass = clsx(
'woocommerce-marketplace__notice-icon',
`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 { Card } from '@wordpress/components';
import classnames from 'classnames';
import clsx from 'clsx';
import { ExtraProperties, queueRecordEvent } from '@woocommerce/tracks';
import { useQuery } from '@woocommerce/navigation';
@ -125,7 +125,7 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
return product.url;
};
const classNames = classnames(
const classNames = clsx(
'woocommerce-marketplace__product-card',
`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
*/
import { Fragment, useEffect, useState } from '@wordpress/element';
import classnames from 'classnames';
import clsx from 'clsx';
import { addQueryArgs } from '@wordpress/url';
/**
@ -28,7 +28,7 @@ export default function ProductListContent( props: {
} ): JSX.Element {
const wccomHelperSettings = getAdminSetting( 'wccomHelper', {} );
const classes = classnames(
const classes = clsx(
'woocommerce-marketplace__product-list-content',
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 { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
import { recordEvent } from '@woocommerce/tracks';
/**
@ -22,12 +22,9 @@ export default function ProductListHeader(
const { title, groupURL } = props;
const isLoading = title === '';
const classNames = classnames(
'woocommerce-marketplace__product-list-header',
{
'is-loading': isLoading,
}
);
const classNames = clsx( 'woocommerce-marketplace__product-list-header', {
'is-loading': isLoading,
} );
return (
<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';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
import { Button } from '@wordpress/components';
import classnames from 'classnames';
import clsx from 'clsx';
import { addQueryArgs } from '@wordpress/url';
import { useSelect } from '@wordpress/data';
import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
@ -119,15 +119,13 @@ export default function Products( props: ProductsProps ) {
const baseContainerClass = 'woocommerce-marketplace__search-';
const baseProductListTitleClass = 'product-list-title--';
const containerClassName = classnames(
baseContainerClass + labelForClassName
);
const productListTitleClassName = classnames(
const containerClassName = clsx( baseContainerClass + labelForClassName );
const productListTitleClassName = clsx(
'woocommerce-marketplace__product-list-title',
baseContainerClass + baseProductListTitleClass + labelForClassName,
{ 'is-loading': isLoading }
);
const viewAllButonClassName = classnames(
const viewAllButonClassName = clsx(
'woocommerce-marketplace__view-all-button',
baseContainerClass + 'button-' + labelForClassName
);
@ -150,7 +148,7 @@ export default function Products( props: ProductsProps ) {
return <NoResults type={ type } showHeading={ false } />;
}
const productListClass = classnames(
const productListClass = clsx(
showAllButton
? '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 { useContext, useEffect, useState } from '@wordpress/element';
import { Button } from '@wordpress/components';
import classNames from 'classnames';
import clsx from 'clsx';
import { getNewPath, navigateTo, useQuery } from '@woocommerce/navigation';
/**
@ -118,7 +118,7 @@ const renderTabs = (
tabContent.push(
tabs[ tabKey ]?.href ? (
<a
className={ classNames(
className={ clsx(
'woocommerce-marketplace__tab-button',
'components-button',
`woocommerce-marketplace__tab-${ tabKey }`
@ -130,7 +130,7 @@ const renderTabs = (
</a>
) : (
<Button
className={ classNames(
className={ clsx(
'woocommerce-marketplace__tab-button',
`woocommerce-marketplace__tab-${ tabKey }`,
{
@ -176,7 +176,7 @@ const Tabs = ( props: TabsProps ): JSX.Element => {
}, [ selectedTab, hasBusinessServices ] );
return (
<nav
className={ classNames(
className={ clsx(
'woocommerce-marketplace__tabs',
additionalClassNames || []
) }

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

@ -2,7 +2,7 @@
* External dependencies
*/
import { useEffect, useMemo, useState, useRef } from '@wordpress/element';
import classnames from 'classnames';
import clsx from 'clsx';
import { Navigation } from '@woocommerce/experimental';
import { NAVIGATION_STORE_NAME, useUser } from '@woocommerce/data';
import { recordEvent } from '@woocommerce/tracks';
@ -77,7 +77,7 @@ const Container = () => {
const isRoot = activeLevel === 'woocommerce';
const classes = classnames( 'woocommerce-navigation', {
const classes = clsx( 'woocommerce-navigation', {
'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 { useSelect } from '@wordpress/data';
import { useEffect, useState } from '@wordpress/element';
import classnames from 'classnames';
import clsx from 'clsx';
import { debounce } from 'lodash';
import { addHistoryListener } from '@woocommerce/navigation';
@ -103,7 +103,7 @@ const Header = () => {
buttonIcon = null;
}
const className = classnames( 'woocommerce-navigation-header', {
const className = clsx( 'woocommerce-navigation-header', {
'is-scrolled': isScrolled,
} );

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useState, useRef, createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Modal, Button } from '@wordpress/components';
@ -53,7 +53,7 @@ function Guide( {
return (
<Modal
className={ classnames( 'components-guide', className ) }
className={ clsx( 'components-guide', className ) }
title={ contentLabel }
onRequestClose={ () => {
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';
import { getSetting } from '@woocommerce/settings';
import { recordEvent } from '@woocommerce/tracks';
import classnames from 'classnames';
import clsx from 'clsx';
import { CurrencyContext } from '@woocommerce/currency';
/**
@ -423,7 +423,7 @@ class BusinessDetails extends Component {
const { className, ...props } = getInputProps( name );
return {
...props,
className: classnames(
className: clsx(
`woocommerce-profile-wizard__${ name.replace( /\_/g, '-' ) }`,
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 { __ } from '@wordpress/i18n';
import { createContext, useContext } from '@wordpress/element';
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -75,10 +75,7 @@ export const DismissableList: React.FC< {
return (
<Card
size="medium"
className={ classNames(
'woocommerce-dismissable-list',
className
) }
className={ clsx( 'woocommerce-dismissable-list', className ) }
>
<OptionNameContext.Provider value={ dismissOptionName }>
{ children }

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { Fragment } from '@wordpress/element';
import { CardBody, CardMedia, CardDivider } from '@wordpress/components';
import { SetupRequired } from '@woocommerce/onboarding';
@ -48,7 +48,7 @@ export const Item = ( { isRecommended, markConfigured, paymentGateway } ) => {
);
const showRecommended = isRecommended && needsSetup;
const classes = classnames(
const classes = clsx(
'woocommerce-task-payment',
'woocommerce-task-card',
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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { Fragment } from '@wordpress/element';
import {
Card,
@ -18,10 +18,7 @@ import { Text } from '@woocommerce/experimental';
import './List.scss';
const PlaceholderItem = () => {
const classes = classnames(
'woocommerce-task-payment',
'woocommerce-task-card'
);
const classes = clsx( 'woocommerce-task-payment', 'woocommerce-task-card' );
return (
<Fragment>

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

@ -1,12 +1,12 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { Card, CardBody } from '@wordpress/components';
import { Stepper } from '@woocommerce/components';
export const Placeholder = () => {
const classes = classnames(
const classes = clsx(
'is-loading',
'woocommerce-task-payment-method',
'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
*/
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
*/
@ -33,7 +33,7 @@ export const PluginBanner = ( {
}: PluginBannerProps ) => {
return (
<div
className={ classNames(
className={ clsx(
'woocommerce-task-shipping-recommendation__plugins-install',
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 { registerPlugin } from '@wordpress/plugins';
import { WooOnboardingTask } from '@woocommerce/onboarding';
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -587,7 +587,7 @@ export class Shipping extends Component {
<Button
isTertiary
onClick={ onShippingPluginInstalltionSkip }
className={ classNames(
className={ clsx(
'woocommerce-task-shipping-recommendations_skip-button',
pluginsToPromote.length === 2
? '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 { recordEvent } from '@woocommerce/tracks';
import { Icon, globe } from '@wordpress/icons';
import classnames from 'classnames';
import clsx from 'clsx';
import { CurrencyContext } from '@woocommerce/currency';
const ShippingRateIcon = ( { zone } ) => (
@ -52,7 +52,7 @@ const ShippingRateInput = ( {
renderInputSuffix,
inputProps: { className, ...restInputProps },
} ) => {
const textControlClassName = classnames(
const textControlClassName = clsx(
'muriel-input-text',
'woocommerce-shipping-rate__control-wrapper',
className

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

@ -4,7 +4,7 @@
import { __ } from '@wordpress/i18n';
import { Button, Card, CardBody, CardHeader } from '@wordpress/components';
import { Children } from '@wordpress/element';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -18,7 +18,7 @@ export const Partners: React.FC< TaxChildProps > = ( {
onManual,
onDisable,
} ) => {
const classes = classnames(
const classes = clsx(
'woocommerce-task-card',
'woocommerce-tax-partners',
`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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useEffect, useState } from '@wordpress/element';
import { EllipsisMenu } from '@woocommerce/components';
import { recordEvent } from '@woocommerce/tracks';
@ -148,7 +148,7 @@ export const TaskListCompletedHeader: React.FC<
return (
<>
<div
className={ classnames(
className={ clsx(
'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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { Button, Card, CardHeader } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
@ -20,7 +20,7 @@ export const TaskListCompleted = ( {
return (
<>
<div
className={ classnames(
className={ clsx(
'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 { WooOnboardingTaskListItem } from '@woocommerce/onboarding';
import classnames from 'classnames';
import clsx from 'clsx';
export type TaskListItemProps = {
task: TaskType;
@ -63,7 +63,7 @@ export const TaskListItem: React.FC< TaskListItemProps > = ( {
const DefaultTaskItem = useCallback(
( props: { onClick?: () => void; isClickable?: boolean } ) => {
const className = classnames(
const className = clsx(
'woocommerce-task-list__item index-' + taskIndex,
{
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
*/
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -22,7 +22,7 @@ export const TaskListPlaceholder: React.FC< TasksPlaceholderProps > = (
return (
<div
className={ classnames(
className={ clsx(
'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';
import { recordEvent } from '@woocommerce/tracks';
import { List, useSlot } from '@woocommerce/experimental';
import classnames from 'classnames';
import clsx from 'clsx';
import { useLayoutContext } from '@woocommerce/admin-layout';
/**
@ -287,7 +287,7 @@ export const SetupTaskList: React.FC< TaskListProps > = ( {
<ProgressHeader taskListId={ id } />
) : null }
<div
className={ classnames(
className={ clsx(
`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
*/
import { useSlot } from '@woocommerce/experimental';
import classNames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -27,7 +27,7 @@ export const TaskListCompletionSlot = ( {
}
return (
<div
className={ classNames(
className={ clsx(
'woocommerce-tasklist-completion-slot',
className
) }

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

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

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

@ -114,6 +114,11 @@ const restrictedImports = [
message:
'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 = {

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { useProductDataContext } from '@woocommerce/shared-context';
import { useStyleProps } from '@woocommerce/base-hooks';
import { __ } from '@wordpress/i18n';
@ -17,7 +17,7 @@ export const Block = ( props: ProductAverageRatingProps ): JSX.Element => {
const styleProps = useStyleProps( props );
const { product } = useProductDataContext();
const className = classnames(
const className = clsx(
styleProps.className,
'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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { __, _n, sprintf } from '@wordpress/i18n';
import {
useStoreEvents,
@ -90,7 +90,7 @@ const AddToCartButton = ( {
{ ...buttonProps }
aria-label={ buttonAriaLabel }
disabled={ addingToCart }
className={ classnames(
className={ clsx(
className,
'wp-block-button__link',
'wp-element-button',
@ -114,7 +114,7 @@ const AddToCartButtonPlaceholder = ( {
}: AddToCartButtonPlaceholderAttributes ): JSX.Element => {
return (
<button
className={ classnames(
className={ clsx(
'wp-block-button__link',
'wp-element-button',
'add_to_cart_button',
@ -136,7 +136,7 @@ export const Block = ( props: BlockAttributes ): JSX.Element => {
return (
<div
className={ classnames(
className={ clsx(
className,
'wp-block-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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import {
Disabled,
Button,
@ -101,7 +101,7 @@ const Edit = ( {
<Disabled>
<Block
{ ...{ ...attributes, ...context } }
className={ classnames( attributes.className, {
className={ clsx( attributes.className, {
[ `has-custom-width wp-block-button__width-${ width }` ]:
width,
} ) }

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

@ -2,7 +2,7 @@
* External dependencies
*/
import { useBlockProps } from '@wordpress/block-editor';
import classnames from 'classnames';
import clsx from 'clsx';
/**
* Internal dependencies
@ -24,7 +24,7 @@ const Save = ( { attributes }: Props ): JSX.Element | null => {
return (
<div
{ ...useBlockProps.save( {
className: classnames( 'is-loading', attributes.className, {
className: clsx( 'is-loading', attributes.className, {
[ `has-custom-width wp-block-button__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 { __, sprintf } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
import {
useInnerBlockLayoutContext,
@ -115,7 +115,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
if ( ! product.id ) {
return (
<div
className={ classnames(
className={ clsx(
className,
'wc-block-components-product-image',
{
@ -153,7 +153,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
return (
<div
className={ classnames(
className={ clsx(
className,
'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
*/
import classnames from 'classnames';
import clsx from 'clsx';
import ProductPrice from '@woocommerce/base-components/product-price';
import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
import {
@ -43,7 +43,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
const isDescendentOfAllProductsBlock =
parentName === 'woocommerce/all-products';
const wrapperClassName = classnames(
const wrapperClassName = clsx(
'wc-block-components-product-price',
className,
styleProps.className,
@ -73,7 +73,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
const pricePreview = '5000';
const isOnSale = prices.price !== prices.regular_price;
const priceClassName = classnames( {
const priceClassName = clsx( {
[ `${ parentClassName }__product-price__value` ]: parentClassName,
[ `${ parentClassName }__product-price__value--on-sale` ]: isOnSale,
} );
@ -101,7 +101,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
? pricePreview
: prices.regular_price
}
regularPriceClassName={ classnames( {
regularPriceClassName={ clsx( {
[ `${ parentClassName }__product-price__regular` ]:
parentClassName,
} ) }

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

@ -1,7 +1,7 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import clsx from 'clsx';
import { __ } from '@wordpress/i18n';
interface SingleProductTab {
@ -18,7 +18,7 @@ const ProductTabTitle = ( {
}: Pick< SingleProductTab, 'id' | 'title' | 'active' > ) => {
return (
<li
className={ classnames( `${ id }_tab`, {
className={ clsx( `${ id }_tab`, {
active,
} ) }
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
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
import {
useInnerBlockLayoutContext,
useProductDataContext,
@ -65,7 +65,7 @@ export const Block = (
const { product } = useProductDataContext();
const reviews = getRatingCount( product );
const className = classnames(
const className = clsx(
styleProps.className,
'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
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
import {
useInnerBlockLayoutContext,
useProductDataContext,
@ -49,7 +49,7 @@ const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
return (
<div
className={ classnames(
className={ clsx(
'wc-block-components-product-rating-stars__norating-container',
`${ parentClassName }-product-rating-stars__norating-container`
) }
@ -93,7 +93,7 @@ const Rating = ( props: RatingProps ): JSX.Element => {
};
return (
<div
className={ classnames(
className={ clsx(
'wc-block-components-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 reviews = getRatingCount( product );
const className = classnames(
const className = clsx(
styleProps.className,
'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
*/
import { __, _n, sprintf } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
import {
useInnerBlockLayoutContext,
useProductDataContext,
@ -49,7 +49,7 @@ const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
return (
<div
className={ classnames(
className={ clsx(
'wc-block-components-product-rating__norating-container',
`${ parentClassName }-product-rating__norating-container`
) }
@ -91,7 +91,7 @@ const Rating = ( props: RatingProps ): JSX.Element => {
};
return (
<div
className={ classnames(
className={ clsx(
'wc-block-components-product-rating__stars',
`${ parentClassName }__product-rating__stars`
) }
@ -146,7 +146,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | undefined => {
const rating = getAverageRating( product );
const reviews = getRatingCount( product );
const className = classnames(
const className = clsx(
styleProps.className,
'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
*/
import { __ } from '@wordpress/i18n';
import classnames from 'classnames';
import clsx from 'clsx';
import { Label } from '@woocommerce/blocks-components';
import {
useInnerBlockLayoutContext,
@ -40,7 +40,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
return (
<div
className={ classnames(
className={ clsx(
'wc-block-components-product-sale-badge',
className,
alignClass,

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

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

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

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

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

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

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