diff --git a/.gitattributes b/.gitattributes index be6edb2..69ec662 100644 --- a/.gitattributes +++ b/.gitattributes @@ -4,7 +4,6 @@ node_modules export-ignore # Files to exclude from the mirror repo /changelog/** production-exclude -/.eslintrc.cjs production-exclude /jest.config.cjs production-exclude **/stories/** production-exclude **/test/** production-exclude diff --git a/CHANGELOG.md b/CHANGELOG.md index 4b3b156..664badf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,215 @@ ### This is a list detailing changes for the Jetpack RNA Components package releases. +## [0.65.1] - 2024-12-23 +### Changed +- Internal updates. + +## [0.65.0] - 2024-12-16 +### Changed +- Fixes ThreatsDataViews defaultLayouts. [#40598] +- Updated package dependencies. [#40564] [#40598] + +### Fixed +- Fix ToggleControl's help text indent to align with label text. [#40510] + +## [0.64.1] - 2024-12-09 +### Removed +- Remove bulk action support from the ThreatsDataViews component. [#40483] + +### Fixed +- Fixed threat type values and labels. [#40467] + +## [0.64.0] - 2024-12-04 +### Changed +- Changed text domain from 'jetpack' to 'jetpack-components'. [#40368] +- Minor enhancements to the ThreatsDataViews component [#40398] +- Updated package dependencies. [#40363] + +## [0.63.0] - 2024-11-26 +### Changed +- Updates ThreatModal flow [#40214] + +## [0.62.0] - 2024-11-25 +### Added +- Add Stats icon [#40236] +- Adds ThreatModal component and stories [#40197] + +### Changed +- Updated package dependencies. [#40288] + +## [0.61.0] - 2024-11-18 +### Added +- Gridicon Component: Add support for help-outline icon. [#39867] + +## [0.60.0] - 2024-11-14 +### Added +- Adds tooltips for each ThreatFixerButton state [#40111] + +### Fixed +- Fixes the loading placeholder that didn't disappear when the price loads. [#40157] + +## [0.59.0] - 2024-11-11 +### Added +- Add ThreatsDataViews component [#39754] +- Components: add ref for container component [#39850] +- IconTooltip: add support for showing tooltip on hover. [#39916] + +### Changed +- Add ToggleGroupControl to ThreatsDataViews for easily toggling between Active and Historical threats [#39901] +- Updated package dependencies. [#39999] [#40000] [#40060] + +## [0.58.1] - 2024-11-04 +### Added +- Enable test coverage. [#39961] + +### Fixed +- Fix tooltip behavior. [#39879] + +## [0.58.0] - 2024-10-15 +### Added +- Add DiffViewer component [#39672] +- Add ThreatSeverityBadge component [#39758] + +## [0.57.0] - 2024-10-14 +### Added +- Add JetpackProtectLogo component. [#39703] +- Add MarkedLines component. [#39674] + +## [0.56.3] - 2024-10-10 +### Changed +- Components - getRedirectUrl: use file extension on import for linter to find definitions +- Updated package dependencies. + +## [0.56.2] - 2024-10-07 +### Changed +- Updated package dependencies. [#39594] + +## [0.56.1] - 2024-10-02 +### Changed +- Updated package dependencies. [#39610] + +## [0.56.0] - 2024-09-25 +### Added +- Added StatCard component export [#35739] + +## [0.55.17] - 2024-09-18 +### Changed +- Internal updates. + +## [0.55.16] - 2024-09-16 +### Changed +- Updated package dependencies. [#39332] + +## [0.55.15] - 2024-09-10 +### Changed +- Updated package dependencies. [#39302] + +## [0.55.14] - 2024-09-09 +### Changed +- Updated package dependencies. [#39278] + +## [0.55.13] - 2024-09-05 +### Changed +- Internal updates. + +## [0.55.12] - 2024-09-05 +### Changed +- Updated package dependencies. [#39176] + +### Fixed +- ToggleControl: Update styles for WordPress/gutenberg#63490. [#39176] + +## [0.55.11] - 2024-08-29 +### Changed +- Updated package dependencies. [#39111] + +## [0.55.10] - 2024-08-23 +### Changed +- Internal updates. + +## [0.55.9] - 2024-08-21 +### Fixed +- Revert recent SVG image optimizations. [#38981] + +## [0.55.8] - 2024-08-19 +### Changed +- Updated package dependencies. [#38893] + +### Fixed +- Lossless image optimization for images (should improve performance with no visible changes). [#38750] + +## [0.55.7] - 2024-08-15 +### Changed +- Updated package dependencies. [#38665] + +## [0.55.6] - 2024-08-09 +### Removed +- Tests: Removed react-test-renderer. [#38755] + +## [0.55.5] - 2024-08-05 +### Fixed +- Fixed TS types for Notice components by marking optional props as such [#38686] + +## [0.55.4] - 2024-08-01 +### Added +- Update Welcome Banner and set async site-only connection [#38534] + +## [0.55.3] - 2024-07-30 +### Changed +- React: Changing global JSX namespace to React.JSX [#38585] + +## [0.55.2] - 2024-07-26 +### Added +- Export button props type to be used elsewhere [#38549] + +## [0.55.1] - 2024-07-25 +### Added +- Added `className` prop to `Alert` component [#38450] + +### Changed +- React compatibility: Ensuring createRoot is not called more than once. [#38495] + +## [0.55.0] - 2024-07-22 +### Removed +- Remove compatibility with WordPress 6.4. [#38386] + +## [0.54.4] - 2024-07-18 +### Changed +- Internal updates. + +## [0.54.3] - 2024-07-03 +### Changed +- Updated package dependencies. [#38132] + +## [0.54.2] - 2024-06-25 +### Added +- Added social preview for Threads [#38003] + +## [0.54.1] - 2024-06-24 +### Fixed +- Updated threads icon color [#37977] + +## [0.54.0] - 2024-06-21 +### Added +- Added Chip component [#37916] + +## [0.53.10] - 2024-06-12 +### Changed +- Updated package dependencies. [#37796] + +## [0.53.9] - 2024-06-11 +### Changed +- Updated package dependencies. [#37779] + +## [0.53.8] - 2024-06-10 +### Changed +- Change codebase to use clsx instead of classnames. [#37708] + +## [0.53.7] - 2024-06-05 +### Changed +- Updated package dependencies. [#37669] + ## [0.53.6] - 2024-05-30 ### Changed - Connection: Update connection ToS messaging slightly [#37536] @@ -19,9 +228,7 @@ - Social | Wired up confirmation UI with connect button [#37295] ### Changed -- Updated package dependencies. [#37379] -- Updated package dependencies. [#37380] -- Updated package dependencies. [#37382] +- Updated package dependencies. [#37379] [#37380] [#37382] ## [0.53.2] - 2024-05-13 ### Added @@ -246,8 +453,7 @@ ## [0.42.1] - 2023-09-04 ### Changed -- Updated package dependencies. [#32803] -- Updated package dependencies. [#32804] +- Updated package dependencies. [#32803] [#32804] ## [0.42.0] - 2023-09-01 ### Added @@ -297,8 +503,7 @@ ## [0.40.1] - 2023-07-05 ### Changed - Adjust component pricing slider border and box-shadow styling. [#31593] -- Updated package dependencies. [#31659] -- Updated package dependencies. [#31661] +- Updated package dependencies. [#31659] [#31661] - Update storybook mdx to use `@storybook/blocks` directly rather than `@storybook/addon-docs`. [#31607] ### Fixed @@ -576,8 +781,7 @@ - Fix ProductPrice layout for long prices [#26595] - IconTooltip: Use click instead of mouseover for summoning [#26457] - Refactor props for structure consistency with JetpackLogo component. [#26510] -- Updated package dependencies. [#26568] -- Updated package dependencies. [#26583] +- Updated package dependencies. [#26568] [#26583] ### Fixed - Components: fix the positio of TOS component of the PricingTable cmp [#26509] @@ -1051,6 +1255,49 @@ ### Changed - Update node version requirement to 14.16.1 +[0.65.1]: https://github.com/Automattic/jetpack-components/compare/0.65.0...0.65.1 +[0.65.0]: https://github.com/Automattic/jetpack-components/compare/0.64.1...0.65.0 +[0.64.1]: https://github.com/Automattic/jetpack-components/compare/0.64.0...0.64.1 +[0.64.0]: https://github.com/Automattic/jetpack-components/compare/0.63.0...0.64.0 +[0.63.0]: https://github.com/Automattic/jetpack-components/compare/0.62.0...0.63.0 +[0.62.0]: https://github.com/Automattic/jetpack-components/compare/0.61.0...0.62.0 +[0.61.0]: https://github.com/Automattic/jetpack-components/compare/0.60.0...0.61.0 +[0.60.0]: https://github.com/Automattic/jetpack-components/compare/0.59.0...0.60.0 +[0.59.0]: https://github.com/Automattic/jetpack-components/compare/0.58.1...0.59.0 +[0.58.1]: https://github.com/Automattic/jetpack-components/compare/0.58.0...0.58.1 +[0.58.0]: https://github.com/Automattic/jetpack-components/compare/0.57.0...0.58.0 +[0.57.0]: https://github.com/Automattic/jetpack-components/compare/0.56.3...0.57.0 +[0.56.3]: https://github.com/Automattic/jetpack-components/compare/0.56.2...0.56.3 +[0.56.2]: https://github.com/Automattic/jetpack-components/compare/0.56.1...0.56.2 +[0.56.1]: https://github.com/Automattic/jetpack-components/compare/0.56.0...0.56.1 +[0.56.0]: https://github.com/Automattic/jetpack-components/compare/0.55.17...0.56.0 +[0.55.17]: https://github.com/Automattic/jetpack-components/compare/0.55.16...0.55.17 +[0.55.16]: https://github.com/Automattic/jetpack-components/compare/0.55.15...0.55.16 +[0.55.15]: https://github.com/Automattic/jetpack-components/compare/0.55.14...0.55.15 +[0.55.14]: https://github.com/Automattic/jetpack-components/compare/0.55.13...0.55.14 +[0.55.13]: https://github.com/Automattic/jetpack-components/compare/0.55.12...0.55.13 +[0.55.12]: https://github.com/Automattic/jetpack-components/compare/0.55.11...0.55.12 +[0.55.11]: https://github.com/Automattic/jetpack-components/compare/0.55.10...0.55.11 +[0.55.10]: https://github.com/Automattic/jetpack-components/compare/0.55.9...0.55.10 +[0.55.9]: https://github.com/Automattic/jetpack-components/compare/0.55.8...0.55.9 +[0.55.8]: https://github.com/Automattic/jetpack-components/compare/0.55.7...0.55.8 +[0.55.7]: https://github.com/Automattic/jetpack-components/compare/0.55.6...0.55.7 +[0.55.6]: https://github.com/Automattic/jetpack-components/compare/0.55.5...0.55.6 +[0.55.5]: https://github.com/Automattic/jetpack-components/compare/0.55.4...0.55.5 +[0.55.4]: https://github.com/Automattic/jetpack-components/compare/0.55.3...0.55.4 +[0.55.3]: https://github.com/Automattic/jetpack-components/compare/0.55.2...0.55.3 +[0.55.2]: https://github.com/Automattic/jetpack-components/compare/0.55.1...0.55.2 +[0.55.1]: https://github.com/Automattic/jetpack-components/compare/0.55.0...0.55.1 +[0.55.0]: https://github.com/Automattic/jetpack-components/compare/0.54.4...0.55.0 +[0.54.4]: https://github.com/Automattic/jetpack-components/compare/0.54.3...0.54.4 +[0.54.3]: https://github.com/Automattic/jetpack-components/compare/0.54.2...0.54.3 +[0.54.2]: https://github.com/Automattic/jetpack-components/compare/0.54.1...0.54.2 +[0.54.1]: https://github.com/Automattic/jetpack-components/compare/0.54.0...0.54.1 +[0.54.0]: https://github.com/Automattic/jetpack-components/compare/0.53.10...0.54.0 +[0.53.10]: https://github.com/Automattic/jetpack-components/compare/0.53.9...0.53.10 +[0.53.9]: https://github.com/Automattic/jetpack-components/compare/0.53.8...0.53.9 +[0.53.8]: https://github.com/Automattic/jetpack-components/compare/0.53.7...0.53.8 +[0.53.7]: https://github.com/Automattic/jetpack-components/compare/0.53.6...0.53.7 [0.53.6]: https://github.com/Automattic/jetpack-components/compare/0.53.5...0.53.6 [0.53.5]: https://github.com/Automattic/jetpack-components/compare/0.53.4...0.53.5 [0.53.4]: https://github.com/Automattic/jetpack-components/compare/0.53.3...0.53.4 diff --git a/components/action-button/index.jsx b/components/action-button/index.jsx index 3b03ea8..801b63a 100644 --- a/components/action-button/index.jsx +++ b/components/action-button/index.jsx @@ -3,7 +3,7 @@ */ import { Spinner } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import classNames from 'classnames'; +import clsx from 'clsx'; import PropTypes from 'prop-types'; /** * Internal dependencies @@ -20,7 +20,7 @@ import styles from './style.module.scss'; * It is useful to async actions when the user has to wait the result of a request or process. * * @param {object} props - The properties. - * @returns {React.Component} The `ActionButton` component. + * @return {React.Component} The `ActionButton` component. */ const ActionButton = props => { const { @@ -30,7 +30,9 @@ const ActionButton = props => { loadingText, isDisabled, displayError = false, - errorMessage = __( 'An error occurred. Please try again.', 'jetpack' ), + errorMessage = __( 'An error occurred. Please try again.', 'jetpack-components' ), + variant = 'primary', + isExternalLink = false, customClass, } = props; @@ -40,10 +42,11 @@ const ActionButton = props => { <> { ) }
{ ( isForcedToShow || isVisible ) && ( diff --git a/components/icon-tooltip/types.ts b/components/icon-tooltip/types.ts index 4e62cbd..f546d96 100644 --- a/components/icon-tooltip/types.ts +++ b/components/icon-tooltip/types.ts @@ -69,6 +69,11 @@ export type IconTooltipProps = { */ forceShow?: boolean; + /** + * Enables the Popover to show on hover. + */ + hoverShow?: boolean; + /** * Uses a wider content area when enabled. */ diff --git a/components/icons/index.tsx b/components/icons/index.tsx index bed624c..892e03d 100644 --- a/components/icons/index.tsx +++ b/components/icons/index.tsx @@ -1,5 +1,5 @@ import { Path, SVG, G, Polygon } from '@wordpress/components'; -import classNames from 'classnames'; +import clsx from 'clsx'; import SocialLogo from 'social-logos'; import styles from './style.module.scss'; import { BaseIconProps } from './types'; @@ -9,7 +9,7 @@ import type React from 'react'; * Icon Wrapper component. * * @param {BaseIconProps} props - Component props. - * @returns {React.ReactNode} Icon Wrapper component. + * @return {React.ReactNode} Icon Wrapper component. */ const IconWrapper: React.FC< BaseIconProps > = ( { className, @@ -20,7 +20,7 @@ const IconWrapper: React.FC< BaseIconProps > = ( { children, } ) => { const iconProps = { - className: classNames( styles.iconWrapper, className ), + className: clsx( styles.iconWrapper, className ), width: size, height: size, viewBox, @@ -234,6 +234,18 @@ export const AiIcon: React.FC< BaseIconProps > = ( { ); }; +export const StatsIcon: React.FC< BaseIconProps > = ( { opacity = 1, size, color } ) => { + return ( + + + + ); +}; + const jetpackIcons = { 'anti-spam': AntiSpamIcon, backup: BackupIcon, @@ -249,6 +261,7 @@ const jetpackIcons = { jetpack: JetpackIcon, share: ShareIcon, ai: AiIcon, + stats: StatsIcon, }; const iconsMap = { @@ -264,8 +277,8 @@ export type IconSlug = keyof IconsMap; /** * Return icon component by slug. * - * @param {string} slug - Icon slug. - * @returns {React.ComponentType} Icon component. + * @param {string} slug - Icon slug. + * @return {React.ComponentType} Icon component. */ export function getIconBySlug< Slug extends IconSlug >( slug: Slug ): IconsMap[ Slug ] { if ( ! iconsMap[ slug ] ) { @@ -282,7 +295,7 @@ export const SocialServiceIcon: React.FC< { } > = ( { serviceName, className, iconSize } ) => { return ( diff --git a/components/icons/style.module.scss b/components/icons/style.module.scss index d2d9c17..1e87788 100644 --- a/components/icons/style.module.scss +++ b/components/icons/style.module.scss @@ -16,7 +16,10 @@ } &.facebook { fill: var( --color-facebook ); - border-radius: 50% !important; + // Add some specificity to override the border-radius on Jetpack settings page + &:global(.social-logo) { + border-radius: 50%; + } } &.instagram { fill: var( --color-instagram ); @@ -38,7 +41,10 @@ } &.nextdoor { fill: var( --color-nextdoor ); - border-radius: 50%; + // Add some specificity to override the border-radius on Jetpack settings page + &:global(.social-logo) { + border-radius: 50%; + } } &.instagram { fill: var( --color-instagram ); @@ -46,5 +52,11 @@ &.whatsapp { fill: var( --color-whatsapp ); } + &.threads { + fill: var( --color-threads ); + &:global(.social-logo) { + border-radius: 40%; + } + } } diff --git a/components/indeterminate-progress-bar/index.tsx b/components/indeterminate-progress-bar/index.tsx index d94d85f..c6d666b 100644 --- a/components/indeterminate-progress-bar/index.tsx +++ b/components/indeterminate-progress-bar/index.tsx @@ -2,7 +2,7 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import classnames from 'classnames'; +import clsx from 'clsx'; /** * Internal dependencies */ @@ -14,13 +14,13 @@ import type React from 'react'; * Indeterminate Progress Bar component * * @param {IndeterminateProgressBarProps} props - Component props. - * @returns {React.ReactNode} - IndeterminateProgressBar react component. + * @return {React.ReactNode} - IndeterminateProgressBar react component. */ const IndeterminateProgressBar: React.FC< IndeterminateProgressBarProps > = ( { className } ) => { return (
); }; diff --git a/components/jetpack-footer/index.tsx b/components/jetpack-footer/index.tsx index dcb32b8..9fe15ad 100644 --- a/components/jetpack-footer/index.tsx +++ b/components/jetpack-footer/index.tsx @@ -1,7 +1,7 @@ import { useSelect } from '@wordpress/data'; import { __, _x } from '@wordpress/i18n'; import { Icon, external } from '@wordpress/icons'; -import classnames from 'classnames'; +import clsx from 'clsx'; import React from 'react'; import { getRedirectUrl } from '../..'; import { STORE_ID as CONNECTION_STORE_ID } from '../../../../js-packages/connection/state/store'; @@ -22,7 +22,7 @@ const ExternalIcon: React.FC = () => ( { /* translators: accessibility text */ - __( '(opens in a new tab)', 'jetpack' ) + __( '(opens in a new tab)', 'jetpack-components' ) } @@ -32,10 +32,10 @@ const ExternalIcon: React.FC = () => ( * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right. * * @param {JetpackFooterProps} props - Component properties. - * @returns {React.ReactNode} JetpackFooter component. + * @return {React.ReactNode} JetpackFooter component. */ const JetpackFooter: React.FC< JetpackFooterProps > = ( { - moduleName = __( 'Jetpack', 'jetpack' ), + moduleName = __( 'Jetpack', 'jetpack-components' ), className, moduleNameHref = 'https://jetpack.com', menu, @@ -48,20 +48,17 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( { const [ isMd ] = useBreakpointMatch( 'md', '<=' ); const [ isLg ] = useBreakpointMatch( 'lg', '>' ); - const { isActive, connectedPlugins } = useSelect( - select => { - const connectionStatus = select( CONNECTION_STORE_ID ) as { - getConnectedPlugins: () => { slug: string }[]; - getConnectionStatus: () => { isActive: boolean }; - }; + const { isActive, connectedPlugins } = useSelect( select => { + const connectionStatus = select( CONNECTION_STORE_ID ) as { + getConnectedPlugins: () => { slug: string }[]; + getConnectionStatus: () => { isActive: boolean }; + }; - return { - connectedPlugins: connectionStatus?.getConnectedPlugins(), - ...connectionStatus.getConnectionStatus(), - }; - }, - [ CONNECTION_STORE_ID ] - ); + return { + connectedPlugins: connectionStatus?.getConnectedPlugins(), + ...connectionStatus.getConnectionStatus(), + }; + }, [] ); const siteAdminUrl = getSiteAdminUrl(); const areAdminLinksEnabled = siteAdminUrl && @@ -72,8 +69,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( { let items: JetpackFooterMenuItem[] = [ { - label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack' ), - title: __( 'About Jetpack', 'jetpack' ), + label: _x( 'About', 'Link to learn more about Jetpack.', 'jetpack-components' ), + title: __( 'About Jetpack', 'jetpack-components' ), href: areAdminLinksEnabled ? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href : getRedirectUrl( 'jetpack-about' ), @@ -81,8 +78,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( { onClick: onAboutClick, }, { - label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack' ), - title: __( "Automattic's Privacy Policy", 'jetpack' ), + label: _x( 'Privacy', 'Shorthand for Privacy Policy.', 'jetpack-components' ), + title: __( "Automattic's Privacy Policy", 'jetpack-components' ), href: areAdminLinksEnabled ? new URL( 'admin.php?page=jetpack#/privacy', siteAdminUrl ).href : getRedirectUrl( 'a8c-privacy' ), @@ -90,8 +87,8 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( { onClick: onPrivacyClick, }, { - label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack' ), - title: __( 'WordPress.com Terms of Service', 'jetpack' ), + label: _x( 'Terms', 'Shorthand for Terms of Service.', 'jetpack-components' ), + title: __( 'WordPress.com Terms of Service', 'jetpack-components' ), href: getRedirectUrl( 'wpcom-tos' ), target: '_blank', onClick: onTermsClick, @@ -111,7 +108,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( { return (
= ( { }, className ) } - aria-label={ __( 'Jetpack', 'jetpack' ) } + aria-label={ __( 'Jetpack', 'jetpack-components' ) } { ...otherProps } >
    @@ -143,7 +140,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( { target={ item.target } onClick={ item.onClick } onKeyDown={ item.onKeyDown } - className={ classnames( 'jp-dashboard-footer__menu-item', { + className={ clsx( 'jp-dashboard-footer__menu-item', { 'is-external': isExternalLink, } ) } role={ item.role } @@ -163,7 +160,7 @@ const JetpackFooter: React.FC< JetpackFooterProps > = ( { ? new URL( 'admin.php?page=jetpack_about', siteAdminUrl ).href : getRedirectUrl( 'a8c-about' ) } - aria-label={ __( 'An Automattic Airline', 'jetpack' ) } + aria-label={ __( 'An Automattic Airline', 'jetpack-components' ) } >
- + - - + + { itemsToRender.map( ( { label, count } ) => { return ( diff --git a/components/stat-card/index.tsx b/components/stat-card/index.tsx index 0a1017f..b6854dc 100644 --- a/components/stat-card/index.tsx +++ b/components/stat-card/index.tsx @@ -2,7 +2,7 @@ * External dependencies */ import { Tooltip } from '@wordpress/components'; -import classnames from 'classnames'; +import clsx from 'clsx'; /** * Internal dependencies */ @@ -16,7 +16,7 @@ import type React from 'react'; * StatCard component * * @param {StatCardProps} props - Component props. - * @returns {React.ReactNode} - StatCard react component. + * @return {React.ReactNode} - StatCard react component. */ const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCardProps ) => { const formattedValue = numberFormat( value ); @@ -26,19 +26,18 @@ const StatCard = ( { className, icon, label, value, variant = 'square' }: StatCa } ); return ( -
-
{ icon }
-
+
+
{ icon }
+
{ label } { variant === 'square' ? ( - // @todo Switch to `placement` once WordPress 6.4 is the minimum. - - + + { compactValue } ) : ( - + { formattedValue } ) } diff --git a/components/stat-card/types.ts b/components/stat-card/types.ts index ee95d46..4b0fd69 100644 --- a/components/stat-card/types.ts +++ b/components/stat-card/types.ts @@ -7,7 +7,7 @@ export type StatCardProps = { /** * The stat card icon. */ - icon: JSX.Element; + icon: React.JSX.Element; /** * The stat label. diff --git a/components/status/index.tsx b/components/status/index.tsx index 9196b48..868db79 100644 --- a/components/status/index.tsx +++ b/components/status/index.tsx @@ -1,5 +1,5 @@ import { __ } from '@wordpress/i18n'; -import classNames from 'classnames'; +import clsx from 'clsx'; import Text from '../text'; import styles from './style.module.scss'; @@ -9,19 +9,19 @@ interface StatusProps { className?: string; } -const Status = ( { className, label, status = 'inactive' }: StatusProps ): JSX.Element => { +const Status = ( { className, label, status = 'inactive' }: StatusProps ): React.JSX.Element => { const defaultLabels: Record< string, string > = { - active: __( 'Active', 'jetpack' ), - error: __( 'Error', 'jetpack' ), - action: __( 'Action needed', 'jetpack' ), - inactive: __( 'Inactive', 'jetpack' ), - initializing: __( 'Setting up', 'jetpack' ), + active: __( 'Active', 'jetpack-components' ), + error: __( 'Error', 'jetpack-components' ), + action: __( 'Action needed', 'jetpack-components' ), + inactive: __( 'Inactive', 'jetpack-components' ), + initializing: __( 'Setting up', 'jetpack-components' ), }; return ( = ( { className, multipleButtons, agreeButtonLabel, + ...textProps } ) => ( - + { multipleButtons ? ( ) : ( @@ -27,7 +28,7 @@ const MultipleButtonsText = ( { multipleButtonsLabels } ) => { /* translators: %1$s is button label 1 and %2$s is button label 2 */ __( 'By clicking %1$s or %2$s, you agree to our Terms of Service and to sync your site‘s data with us.', - 'jetpack' + 'jetpack-components' ), multipleButtonsLabels[ 0 ], multipleButtonsLabels[ 1 ] @@ -43,7 +44,7 @@ const MultipleButtonsText = ( { multipleButtonsLabels } ) => { return createInterpolateElement( __( 'By clicking the buttons above, you agree to our Terms of Service and to sync your site‘s data with us.', - 'jetpack' + 'jetpack-components' ), { tosLink: , @@ -58,7 +59,7 @@ const SingleButtonText = ( { agreeButtonLabel } ) => /* translators: %s is a button label */ __( 'By clicking %s, you agree to our Terms of Service and to sync your site‘s data with us.', - 'jetpack' + 'jetpack-components' ), agreeButtonLabel ), diff --git a/components/terms-of-service/types.ts b/components/terms-of-service/types.ts index 89bd0c3..e8bb3f0 100644 --- a/components/terms-of-service/types.ts +++ b/components/terms-of-service/types.ts @@ -1,3 +1,5 @@ +import { TextProps } from '../text/types'; + type MultipleButtonsProps = { /** * Indicates whether there are multiple buttons present that would imply agreement if clicked. @@ -22,9 +24,24 @@ type SingleButtonProps = { agreeButtonLabel: string; }; -export type TermsOfServiceProps = { - /** - * Represents additional CSS classes to be added to the component's root. - */ - className?: string; -} & ( MultipleButtonsProps | SingleButtonProps ); +export type TermsOfServiceProps = Pick< + TextProps, + | 'variant' + | 'm' + | 'mt' + | 'mr' + | 'mb' + | 'ml' + | 'mx' + | 'my' + | 'p' + | 'pt' + | 'pr' + | 'pb' + | 'pl' + | 'px' + | 'py' + | 'className' + | 'component' +> & + ( MultipleButtonsProps | SingleButtonProps ); diff --git a/components/testimonials/testimonial.tsx b/components/testimonials/testimonial.tsx index 66bc761..5096e4c 100644 --- a/components/testimonials/testimonial.tsx +++ b/components/testimonials/testimonial.tsx @@ -1,11 +1,11 @@ -import classNames from 'classnames'; +import clsx from 'clsx'; import type { TestimonialType } from './types'; import './style.scss'; const Testimonial: TestimonialType = ( { quote, author, profession, img, hidden } ) => { return ( -
{ tableCaption || __( 'Summary of the records', 'jetpack' ) }{ tableCaption || __( 'Summary of the records', 'jetpack-components' ) }
{ recordTypeLabel || __( 'Record type', 'jetpack' ) }{ recordCountLabel || __( 'Record count', 'jetpack' ) }{ recordTypeLabel || __( 'Record type', 'jetpack-components' ) }{ recordCountLabel || __( 'Record count', 'jetpack-components' ) }