@elementor/editor-audits 4.3.3 → 4.3.5

package/src/components/audit-statuses-section.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { Box, Divider, Typography } from '@elementor/ui';
-import { __, sprintf } from '@wordpress/i18n';
-
-import { type PageAuditReport } from '../types';
-import {
-	auditStatusColor,
-	auditStatusDisplayCounts,
-	type AuditStatusGroup,
-	auditStatusLabel,
-} from '../utils/audit-status-summary';
-import CountSummaryCircle from './count-summary-circle';
-
-type Props = {
-	report: PageAuditReport;
-	onStatusClick: ( status: AuditStatusGroup ) => void;
-};
-
-const STATUS_ARIA_LABELS: Record< AuditStatusGroup, ( count: number ) => string > = {
-	pass: ( count ) =>
-		sprintf(
-			/* translators: %d: number of passed audits. */
-			__( '%d passed audits, view all', 'elementor' ),
-			count
-		),
-	fail: ( count ) =>
-		sprintf(
-			/* translators: %d: number of failed audit violations. */
-			__( '%d failed audits, view all', 'elementor' ),
-			count
-		),
-	skipped: ( count ) =>
-		sprintf(
-			/* translators: %d: number of skipped audits. */
-			__( '%d skipped audits, view all', 'elementor' ),
-			count
-		),
-};
-
-const STATUS_GROUPS = [ 'fail', 'pass', 'skipped' ] as const;
-
-export default function AuditStatusesSection( { report, onStatusClick }: Props ) {
-	const statusCounts = auditStatusDisplayCounts( report );
-
-	return (
-		<>
-			<Typography variant="subtitle1" fontWeight="bold">
-				{ __( 'Audit statuses', 'elementor' ) }
-			</Typography>
-			<Box sx={ { display: 'flex', justifyContent: 'space-around', gap: 2 } }>
-				{ STATUS_GROUPS.map( ( status ) => (
-					<CountSummaryCircle
-						key={ status }
-						ariaLabel={ STATUS_ARIA_LABELS[ status ]( statusCounts[ status ] ) }
-						color={ auditStatusColor( status ) }
-						count={ statusCounts[ status ] }
-						label={ auditStatusLabel( status ) }
-						onClick={ () => onStatusClick( status ) }
-					/>
-				) ) }
-			</Box>
-			<Divider />
-		</>
-	);
-}

package/src/components/count-summary-circle.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react';
-import { Box, Chip, type ChipProps, type Theme, Typography } from '@elementor/ui';
-
-type Props = {
-	ariaLabel: string;
-	color: ChipProps[ 'color' ];
-	count: number;
-	label: string;
-	onClick: () => void;
-};
-
-const COUNT_SUMMARY_CIRCLE_SIZE = 64;
-const COUNT_SUMMARY_BORDER_WIDTH = 4;
-
-function chipBorderColor( theme: Theme, color: ChipProps[ 'color' ] ): string {
-	if ( color === 'default' || ! color ) {
-		return theme.palette.text.secondary;
-	}
-
-	return theme.palette[ color ].main;
-}
-
-export default function CountSummaryCircle( { ariaLabel, color, count, label, onClick }: Props ) {
-	return (
-		<Box
-			aria-label={ ariaLabel }
-			component="button"
-			onClick={ onClick }
-			type="button"
-			sx={ {
-				alignItems: 'center',
-				background: 'none',
-				border: 'none',
-				cursor: 'pointer',
-				display: 'flex',
-				flex: 1,
-				flexDirection: 'column',
-				gap: 0.5,
-				padding: 0,
-			} }
-		>
-			<Chip
-				color={ color }
-				label={ count }
-				size="small"
-				variant="standard"
-				sx={ ( theme: Theme ) => ( {
-					border: `${ COUNT_SUMMARY_BORDER_WIDTH }px solid ${ chipBorderColor( theme, color ) }`,
-					borderRadius: '50%',
-					height: COUNT_SUMMARY_CIRCLE_SIZE,
-					maxWidth: COUNT_SUMMARY_CIRCLE_SIZE,
-					width: COUNT_SUMMARY_CIRCLE_SIZE,
-					'& .MuiChip-label': {
-						fontSize: theme.typography.body2.fontSize,
-						fontWeight: 700,
-						lineHeight: 1,
-						padding: 0,
-					},
-				} ) }
-			/>
-			<Typography color="text.secondary" sx={ { textAlign: 'center' } } variant="caption">
-				{ label }
-			</Typography>
-		</Box>
-	);
-}

package/src/components/pages/all-audits-page.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { Box } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type PageAuditReport } from '../../types';
-import {
-	auditStatusColor,
-	type AuditStatusGroup,
-	auditStatusLabel,
-	partitionAuditResults,
-} from '../../utils/audit-status-summary';
-import StatusSection from '../status-section';
-import SubpageHeader from '../subpage-header';
-import ViolationRow from '../violation-row';
-
-type Props = {
-	initialExpandedStatus?: AuditStatusGroup;
-	onBack: () => void;
-	report: PageAuditReport;
-};
-
-export default function AllAuditsPage( { initialExpandedStatus, onBack, report }: Props ) {
-	const { failed, passed, skipped, totalViolations } = partitionAuditResults( report );
-	const expandFail = ! initialExpandedStatus || initialExpandedStatus === 'fail';
-	const expandPass = initialExpandedStatus === 'pass';
-	const expandSkipped = initialExpandedStatus === 'skipped';
-
-	return (
-		<Box key={ initialExpandedStatus ?? 'default' }>
-			<SubpageHeader title={ __( 'All audits', 'elementor' ) } onBack={ onBack } />
-			<Box sx={ { p: 1 } }>
-				<StatusSection
-					label={ auditStatusLabel( 'fail' ) }
-					count={ totalViolations }
-					color={ auditStatusColor( 'fail' ) }
-					defaultExpanded={ expandFail }
-				>
-					{ failed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } violations={ r.result.violations } />
-					) ) }
-				</StatusSection>
-				<StatusSection
-					label={ auditStatusLabel( 'pass' ) }
-					count={ passed.length }
-					color={ auditStatusColor( 'pass' ) }
-					defaultExpanded={ expandPass }
-				>
-					{ passed.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } />
-					) ) }
-				</StatusSection>
-				<StatusSection
-					label={ auditStatusLabel( 'skipped' ) }
-					count={ skipped.length }
-					color={ auditStatusColor( 'skipped' ) }
-					defaultExpanded={ expandSkipped }
-				>
-					{ skipped.map( ( r ) => (
-						<ViolationRow key={ r.audit.id } audit={ r.audit } skipReason={ r.result.reason } />
-					) ) }
-				</StatusSection>
-			</Box>
-		</Box>
-	);
-}

package/src/components/pages/issues-page.tsx

@@ -1,65 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import { Box, Link, Typography } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { ALL_CATEGORIES, CATEGORY_LABELS } from '../../constants';
-import { type AuditCategory, type PageAuditReport } from '../../types';
-import { type AuditStatusGroup, getPopulatedCategories } from '../../utils/audit-status-summary';
-import { countSeverities, type SeverityCounts } from '../../utils/severity-counts';
-import AuditStatusesSection from '../audit-statuses-section';
-import IssuesCategoryRow from '../issues-category-row';
-import SeverityFilterChips, { type SeverityFilter } from '../severity-filter-chips';
-
-type Props = {
-	report: PageAuditReport;
-	onCategoryClick: ( category: AuditCategory ) => void;
-	onAllAuditsClick: () => void;
-	onStatusClick: ( status: AuditStatusGroup ) => void;
-};
-
-function filterCounts( counts: SeverityCounts, filter: SeverityFilter ): SeverityCounts {
-	if ( filter === 'all' ) {
-		return counts;
-	}
-
-	return { error: 0, warning: 0, info: 0, [ filter ]: counts[ filter ] };
-}
-
-export default function IssuesPage( { report, onCategoryClick, onAllAuditsClick, onStatusClick }: Props ) {
-	const [ filter, setFilter ] = useState< SeverityFilter >( 'all' );
-	const populatedCategories = getPopulatedCategories( report.categories, ALL_CATEGORIES );
-
-	const categoryRows = populatedCategories
-		.map( ( category ) => ( { category, counts: filterCounts( countSeverities( report, category ), filter ) } ) )
-		.filter( ( { counts } ) => Object.values( counts ).some( ( count ) => count > 0 ) );
-
-	return (
-		<Box sx={ { display: 'flex', flexDirection: 'column', gap: 4, p: 2 } }>
-			<AuditStatusesSection report={ report } onStatusClick={ onStatusClick } />
-			<Link
-				component="button"
-				underline="none"
-				color="inherit"
-				onClick={ onAllAuditsClick }
-				sx={ { textAlign: 'start' } }
-			>
-				<Typography variant="subtitle1" component="h2">
-					{ __( 'All issues', 'elementor' ) }
-				</Typography>
-			</Link>
-			<SeverityFilterChips selected={ filter } onChange={ setFilter } />
-			<Box sx={ { display: 'flex', flexDirection: 'column', gap: 1 } }>
-				{ categoryRows.map( ( { category, counts } ) => (
-					<IssuesCategoryRow
-						key={ category }
-						category={ category }
-						label={ CATEGORY_LABELS[ category ] }
-						counts={ counts }
-						onClick={ () => onCategoryClick( category ) }
-					/>
-				) ) }
-			</Box>
-		</Box>
-	);
-}

package/src/components/score-bar.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { ChevronRightIcon } from '@elementor/icons';
-import { Box, LinearProgress, Rotate, Typography, useTheme } from '@elementor/ui';
-
-import { onKeyboardClick } from '../utils/keyboard-click';
-import { getScoreTier } from '../utils/score-thresholds';
-
-type Props = {
-	label: string;
-	score: number;
-	onClick?: () => void;
-};
-
-export default function ScoreBar( { label, score, onClick }: Props ) {
-	const isRtl = 'rtl' === useTheme().direction;
-
-	return (
-		<Box
-			role={ onClick ? 'button' : undefined }
-			tabIndex={ onClick ? 0 : undefined }
-			onClick={ onClick }
-			onKeyDown={ onClick ? onKeyboardClick( onClick ) : undefined }
-			sx={ {
-				display: 'flex',
-				alignItems: 'center',
-				gap: 1,
-				cursor: onClick ? 'pointer' : 'default',
-				outline: 'none',
-				'&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', borderRadius: 1 },
-				py: 0.5,
-			} }
-		>
-			<Typography variant="body2" sx={ { minWidth: 96 } }>
-				{ label }
-			</Typography>
-			<LinearProgress
-				variant="determinate"
-				value={ score }
-				color={ getScoreTier( score ).color }
-				sx={ { flex: 1, height: 6, borderRadius: 4, bgcolor: 'action.disabledBackground' } }
-			/>
-			<Typography
-				variant="body2"
-				color="text.primary"
-				sx={ { minWidth: 24, textAlign: 'right', fontWeight: 900 } }
-			>
-				{ score }
-			</Typography>
-			{ onClick && (
-				<Rotate in={ isRtl }>
-					<ChevronRightIcon fontSize="small" color="action" />
-				</Rotate>
-			) }
-		</Box>
-	);
-}

package/src/components/score-circle.tsx

@@ -1,60 +0,0 @@
-import * as React from 'react';
-import { Box, CircularProgress, Typography } from '@elementor/ui';
-
-import { getScoreTier, type ScoreColor } from '../utils/score-thresholds';
-
-type Props = {
-	color?: ScoreColor;
-	score: number;
-};
-
-const SCORE_CIRCLE_SIZE = 88;
-const SCORE_CIRCLE_THICKNESS = 3;
-
-export default function ScoreCircle( { color, score }: Props ) {
-	const progressColor = color ?? getScoreTier( score ).color;
-
-	return (
-		<Box
-			role="progressbar"
-			aria-valuenow={ score }
-			aria-valuemin={ 0 }
-			aria-valuemax={ 100 }
-			sx={ { position: 'relative', display: 'inline-flex' } }
-		>
-			<CircularProgress
-				variant="determinate"
-				value={ 100 }
-				size={ SCORE_CIRCLE_SIZE }
-				thickness={ SCORE_CIRCLE_THICKNESS }
-				sx={ { color: 'action.disabledBackground' } }
-			/>
-			<CircularProgress
-				variant="determinate"
-				value={ score }
-				size={ SCORE_CIRCLE_SIZE }
-				thickness={ SCORE_CIRCLE_THICKNESS }
-				color={ progressColor }
-				sx={ { position: 'absolute', left: 0 } }
-			/>
-			<Box
-				sx={ {
-					position: 'absolute',
-					inset: 0,
-					display: 'flex',
-					alignItems: 'center',
-					justifyContent: 'center',
-				} }
-			>
-				<Typography
-					variant="h4"
-					component="span"
-					color="text.primary"
-					sx={ { fontWeight: 700, lineHeight: 1 } }
-				>
-					{ score }
-				</Typography>
-			</Box>
-		</Box>
-	);
-}

package/src/components/severity-filter-chips.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import { Box, Chip } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-
-import { type AuditSeverity } from '../types';
-import { ALL_SEVERITIES, severityPluralLabel } from '../utils/severity-counts';
-import SeverityIcon from './severity-icons';
-
-export type SeverityFilter = 'all' | AuditSeverity;
-
-type Props = {
-	selected: SeverityFilter;
-	onChange: ( filter: SeverityFilter ) => void;
-};
-
-export default function SeverityFilterChips( { selected, onChange }: Props ) {
-	return (
-		<Box sx={ { display: 'flex', alignItems: 'center', gap: 1 } }>
-			<FilterChip
-				label={ __( 'All', 'elementor' ) }
-				isSelected={ selected === 'all' }
-				onClick={ () => onChange( 'all' ) }
-			/>
-			{ ALL_SEVERITIES.map( ( severity ) => (
-				<FilterChip
-					key={ severity }
-					label={ severityPluralLabel( severity ) }
-					icon={ <SeverityIcon severity={ severity } /> }
-					isSelected={ selected === severity }
-					onClick={ () => onChange( severity ) }
-				/>
-			) ) }
-		</Box>
-	);
-}
-
-type FilterChipProps = {
-	label: string;
-	icon?: React.ReactElement;
-	isSelected: boolean;
-	onClick: () => void;
-};
-
-function FilterChip( { label, icon, isSelected, onClick }: FilterChipProps ) {
-	return (
-		<Chip
-			label={ label }
-			icon={ icon }
-			size="small"
-			variant="filled"
-			color="default"
-			onClick={ onClick }
-			aria-pressed={ isSelected }
-			sx={ { bgcolor: isSelected ? 'action.selected' : 'transparent' } }
-		/>
-	);
-}

package/src/utils/score-thresholds.ts

@@ -1,23 +0,0 @@
-import { __ } from '@wordpress/i18n';
-
-export const GOOD_THRESHOLD = 90;
-export const OK_THRESHOLD = 50;
-
-export type ScoreColor = 'success' | 'warning' | 'error';
-
-export type ScoreTier = {
-	color: ScoreColor;
-	label: string;
-};
-
-export function getScoreTier( score: number ): ScoreTier {
-	if ( score >= GOOD_THRESHOLD ) {
-		return { color: 'success', label: __( 'Good', 'elementor' ) };
-	}
-
-	if ( score >= OK_THRESHOLD ) {
-		return { color: 'warning', label: __( 'Needs work', 'elementor' ) };
-	}
-
-	return { color: 'error', label: __( 'At risk', 'elementor' ) };
-}