98930749cbba4cdb77063ec9741855742f55945e

Committed 25 Nov 2024 01:32PM CUT coverage: 27.129%. First build

Build # 98930749cbba4cdb77063ec9741855742f55945e

Build Type

Pull #21860

github

Committed by

web-flow

Commit Message

Merge 51428cf2b into c5f6c46ec

Pull Request Pull Request #21860: Dashboard: UX feedback

Run Details

1706 of 7451 branches covered (22.9%)

Branch coverage included in aggregate %.

0 of 14 new or added lines in 3 files covered. (0.0%)

3862 of 13073 relevant lines covered (29.54%)

8.47 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/packages/js/src/dashboard/scores/components/score-content.js

import { SkeletonLoader } from "@yoast/ui-library";
import { ContentStatusDescription } from "./content-status-description";
import { ScoreChart, ScoreChartSkeletonLoader } from "./score-chart";
import { ScoreList, ScoreListSkeletonLoader } from "./score-list";

/**
 * @type {import("../index").Score} Score
 * @type {import("../index").ScoreType} ScoreType
 */

/**
 * @type {{container: string, list: string, chart: string}}
 */
const CLASSNAMES = {
        container: "yst-flex yst-flex-col @md:yst-flex-row yst-gap-12 yst-mt-6",
        list: "yst-grow",
        // Calculation: (line-height 1rem + py 0.375rem * 2) * 4 + (spacing 0.75rem * 2 + border 1px ) * 3 = 11.5rem + 3px.
        chart: "yst-w-[calc(11.5rem+3px)] yst-aspect-square",
};

/**
 * @returns {JSX.Element} The element.
 */
const ScoreContentSkeletonLoader = () => (
        <>
                <SkeletonLoader className="yst-w-full">&nbsp;</SkeletonLoader>
                <div className={ CLASSNAMES.container }>
                        <ScoreListSkeletonLoader className={ CLASSNAMES.list } />
                        <ScoreChartSkeletonLoader className={ CLASSNAMES.chart } />
                </div>
        </>
);

/**
 * @param {Score[]} [scores=[]] The scores.
 * @param {boolean} isLoading Whether the scores are still loading.
 * @param {Object.<ScoreType,string>} descriptions The descriptions.
 * @returns {JSX.Element} The element.
 */
export const ScoreContent = ( { scores = [], isLoading, descriptions } ) => {
        if ( isLoading ) {
                return <ScoreContentSkeletonLoader />;
        }

        return (
                <>
                        <ContentStatusDescription scores={ scores } descriptions={ descriptions } />
                        <div className={ CLASSNAMES.container }>
                                { scores && <ScoreList className={ CLASSNAMES.list } scores={ scores } /> }
                                { scores && <ScoreChart className={ CLASSNAMES.chart } scores={ scores } /> }
                        </div>
                </>
        );
};

1	import { SkeletonLoader } from "@yoast/ui-library";
2	import { ContentStatusDescription } from "./content-status-description";
3	import { ScoreChart, ScoreChartSkeletonLoader } from "./score-chart";
4	import { ScoreList, ScoreListSkeletonLoader } from "./score-list";
5
6	/**
7	* @type {import("../index").Score} Score
8	* @type {import("../index").ScoreType} ScoreType
9	*/
10
11	/**
12	* @type {{container: string, list: string, chart: string}}
13	*/
NEW 14	const CLASSNAMES = {	×
15	container: "yst-flex yst-flex-col @md:yst-flex-row yst-gap-12 yst-mt-6",
16	list: "yst-grow",
17	// Calculation: (line-height 1rem + py 0.375rem * 2) * 4 + (spacing 0.75rem * 2 + border 1px ) * 3 = 11.5rem + 3px.
18	chart: "yst-w-[calc(11.5rem+3px)] yst-aspect-square",
19	};
20
21	/**
22	* @returns {JSX.Element} The element.
23	*/
24	const ScoreContentSkeletonLoader = () => (	×
25	<>	×
26	<SkeletonLoader className="yst-w-full"> </SkeletonLoader>
27	<div className={ CLASSNAMES.container }>
28	<ScoreListSkeletonLoader className={ CLASSNAMES.list } />
29	<ScoreChartSkeletonLoader className={ CLASSNAMES.chart } />
30	</div>
31	</>
32	);
33
34	/**
35	* @param {Score[]} [scores=[]] The scores.
36	* @param {boolean} isLoading Whether the scores are still loading.
37	* @param {Object.<ScoreType,string>} descriptions The descriptions.
38	* @returns {JSX.Element} The element.
39	*/
40	export const ScoreContent = ( { scores = [], isLoading, descriptions } ) => {	×
41	if ( isLoading ) {	×
42	return <ScoreContentSkeletonLoader />;	×
43	}
44
45	return (	×
46	<>
47	<ContentStatusDescription scores={ scores } descriptions={ descriptions } />
48	<div className={ CLASSNAMES.container }>
49	{ scores && <ScoreList className={ CLASSNAMES.list } scores={ scores } /> }	×
50	{ scores && <ScoreChart className={ CLASSNAMES.chart } scores={ scores } /> }	×
51	</div>
52	</>
53	);
54	};

Yoast / wordpress-seo / 98930749cbba4cdb77063ec9741855742f55945e

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous