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-list.js

import { Badge, Button, Label, SkeletonLoader } from "@yoast/ui-library";
import classNames from "classnames";
import { SCORE_META } from "../score-meta";

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

/**
 * @type {{listItem: string, score: string}}
 */
const CLASSNAMES = {
        listItem: "yst-flex yst-items-center yst-py-3 first:yst-pt-0 last:yst-pb-0 yst-border-b last:yst-border-b-0",
        score: "yst-shrink-0 yst-w-3 yst-aspect-square yst-rounded-full",
        label: "yst-ml-3 yst-mr-2",
};

/**
 * @param {string} [className] The class name for the UL.
 * @returns {JSX.Element} The element.
 */
export const ScoreListSkeletonLoader = ( { className } ) => (
        <ul className={ className }>
                { Object.entries( SCORE_META ).map( ( [ name, { label } ] ) => (
                        <li
                                key={ `skeleton-loader--${ name }` }
                                className={ CLASSNAMES.listItem }
                        >
                                <SkeletonLoader className={ CLASSNAMES.score } />
                                <SkeletonLoader className={ CLASSNAMES.label }>{ label }</SkeletonLoader>
                                <SkeletonLoader className="yst-w-7 yst-mr-3">1</SkeletonLoader>
                                <SkeletonLoader className="yst-ml-auto yst-button yst-button--small">View</SkeletonLoader>
                        </li>
                ) ) }
        </ul>
);

/**
 * @param {string} [className] The class name for the UL.
 * @param {Score[]} scores The scores.
 * @returns {JSX.Element} The element.
 */
export const ScoreList = ( { className, scores } ) => (
        <ul className={ className }>
                { scores.map( ( score ) => (
                        <li
                                key={ score.name }
                                className={ CLASSNAMES.listItem }
                        >
                                <span className={ classNames( CLASSNAMES.score, SCORE_META[ score.name ].color ) } />
                                <Label as="span" className={ classNames( CLASSNAMES.label, "yst-leading-4 yst-py-1.5" ) }>{ SCORE_META[ score.name ].label }</Label>
                                <Badge variant="plain" className={ classNames( score.links.view && "yst-mr-3" ) }>{ score.amount }</Badge>
                                { score.links.view && (
                                        <Button as="a" variant="secondary" size="small" href={ score.links.view } className="yst-ml-auto">View</Button>
                                ) }
                        </li>
                ) ) }
        </ul>
);

1	import { Badge, Button, Label, SkeletonLoader } from "@yoast/ui-library";
2	import classNames from "classnames";
3	import { SCORE_META } from "../score-meta";
4
5	/**
6	* @type {import("../index").Score} Score
7	*/
8
9	/**
10	* @type {{listItem: string, score: string}}
11	*/
NEW 12	const CLASSNAMES = {	×
13	listItem: "yst-flex yst-items-center yst-py-3 first:yst-pt-0 last:yst-pb-0 yst-border-b last:yst-border-b-0",
14	score: "yst-shrink-0 yst-w-3 yst-aspect-square yst-rounded-full",
15	label: "yst-ml-3 yst-mr-2",
16	};
17
18	/**
19	* @param {string} [className] The class name for the UL.
20	* @returns {JSX.Element} The element.
21	*/
NEW 22	export const ScoreListSkeletonLoader = ( { className } ) => (	×
NEW 23	<ul className={ className }>	×
24	{ Object.entries( SCORE_META ).map( ( [ name, { label } ] ) => (
NEW 25	<li	×
26	key={ `skeleton-loader--${ name }` }
27	className={ CLASSNAMES.listItem }
28	>
29	<SkeletonLoader className={ CLASSNAMES.score } />
30	<SkeletonLoader className={ CLASSNAMES.label }>{ label }</SkeletonLoader>
31	<SkeletonLoader className="yst-w-7 yst-mr-3">1</SkeletonLoader>
32	<SkeletonLoader className="yst-ml-auto yst-button yst-button--small">View</SkeletonLoader>
33	</li>
34	) ) }
35	</ul>
36	);
37
38	/**
39	* @param {string} [className] The class name for the UL.
40	* @param {Score[]} scores The scores.
41	* @returns {JSX.Element} The element.
42	*/
NEW 43	export const ScoreList = ( { className, scores } ) => (	×
NEW 44	<ul className={ className }>	×
45	{ scores.map( ( score ) => (
46	<li	×
47	key={ score.name }
48	className={ CLASSNAMES.listItem }
49	>
50	<span className={ classNames( CLASSNAMES.score, SCORE_META[ score.name ].color ) } />
51	<Label as="span" className={ classNames( CLASSNAMES.label, "yst-leading-4 yst-py-1.5" ) }>{ SCORE_META[ score.name ].label }</Label>
52	<Badge variant="plain" className={ classNames( score.links.view && "yst-mr-3" ) }>{ score.amount }</Badge>	×
53	{ score.links.view && (	×
54	<Button as="a" variant="secondary" size="small" href={ score.links.view } className="yst-ml-auto">View</Button>
55	) }
56	</li>
57	) ) }
58	</ul>
59	);

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