ca99786b69a25106723450181d6049c34982ff80

Committed 08 May 2025 09:25AM CUT coverage: 52.549% (-1.9%) from 54.437%

Build # ca99786b69a25106723450181d6049c34982ff80

Build Type

Pull #22170

github

Committed by

web-flow

Commit Message

Merge be48a0f09 into c122b65f1

Pull Request Pull Request #22170: Creates the popover component

Run Details

8040 of 14189 branches covered (56.66%)

Branch coverage included in aggregate %.

29255 of 56783 relevant lines covered (51.52%)

41975.67 hits per line

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

66.67

/packages/js/src/installation-success.js

import domReady from "@wordpress/dom-ready";
import { __, sprintf } from "@wordpress/i18n";
import { createRoot } from "@wordpress/element";
import { CheckIcon } from "@heroicons/react/solid";
import { ArrowNarrowRightIcon } from "@heroicons/react/outline";
import { safeCreateInterpolateElement } from "./helpers/i18n";

/**
 * The installation success page.
 *
 * @returns {WPElement} The installation success page.
 */
export function InstallationSuccessPage() {
        return (
                <div className="yst-root yst-my-auto yst-flex yst-flex-col yst-h-[90vh] yst-justify-center">
                        <h1 className="yst-text-4xl yst-text-gray-900 yst-w-[350px] yst-font-extrabold yst-leading-10 yst-mx-auto yst-mt-6 yst-mb-16 yst-text-center yst-tracking-tight">
                                {
                                        safeCreateInterpolateElement(
                                                sprintf(
                                                        /* translators: %s expands to Yoast SEO. */
                                                        __( "You've successfully installed %s!", "wordpress-seo" ),
                                                        // The space between 'Yoast' and 'SEO' is a non-breaking space (Unicode 160).
                                                        "<span>Yoast SEO</span>" ),
                                                {
                                                        span: <span className="yst-text-primary-500" />,
                                                }
                                        )
                                }
                        </h1>
                        <div className="installation-success-content">
                                <div className="yst-flex yst-flex-col md:yst-flex-row yst-justify-center yst-items-center yst-gap-8">
                                        <div id="installation-success-card-optimized-site" className="yst-shrink-0 yst-bg-white yst-rounded-lg yst-p-6 yst-flex yst-flex-col yst-max-w-sm yst-shadow-md yst-h-4/5 yst-leading-6">
                                                <h2 className="yst-tracking-tight yst-text-gray-900 yst-text-2xl yst-leading-8 yst-font-extrabold">{ __( "Your site is now easier for search engines to find.", "wordpress-seo" ) }</h2>
                                                <p className="yst-text-gray-500 yst-text-base yst-my-4">
                                                        { sprintf(
                                                                /* translators: %s expands to Yoast SEO. */
                                                                __( "%s rolls out the red carpet for the search bots, which helps your site perform better in search engines.",
                                                                        "wordpress-seo" ),
                                                                "Yoast SEO"
                                                        ) }
                                                </p>
                                                <div className="card-button-section" />
                                                <div className="yst-bg-green-100 yst-w-20 yst-h-20 yst-rounded-full yst-mx-auto yst-my-2 yst-flex yst-items-center yst-justify-center">
                                                        <CheckIcon className="yst-w-8 yst-text-green-600" />
                                                </div>
                                        </div>
                                        <div>
                                                <ArrowNarrowRightIcon className="yst-w-8 yst-text-gray-500 rtl:yst-rotate-180" />
                                        </div>
                                        <div id="installation-success-card-configuration" className="yst-shrink-0 yst-shadow-xl yst-bg-primary-500 yst-rounded-lg yst-p-6 yst-flex yst-flex-col yst-max-w-sm yst-h-4/5 yst-leading-6">
                                                <h2 className=" yst-text-white yst-text-2xl yst-leading-8 yst-font-extrabold">
                                                        { sprintf(
                                                                /* translators: %s expands to Yoast SEO. */
                                                                __( "For the best ranking results: configure %s!", "wordpress-seo" ),
                                                                "Yoast SEO"
                                                        ) }
                                                </h2>
                                                <p className="yst-font-medium yst-text-white yst-text-base yst-my-4">
                                                        { sprintf(
                                                                /* translators: %s expands to Yoast SEO. */
                                                                __( "Set the essential %s settings for your site in a few steps.", "wordpress-seo" ),
                                                                "Yoast SEO"
                                                        ) }
                                                </p>
                                                <img
                                                        className="yst-my-6 yst-mx-auto yst-w-[150px] yst-h-[120px]"
                                                        src={ window.wpseoInstallationSuccess.pluginUrl + "/images/indexables_3_left_bubble_optm.svg" }
                                                        alt={ "" }
                                                />
                                                <div className="yst-flex yst-grow-1 yst-mt-auto">
                                                        <a
                                                                id="installation-successful-configuration-link"
                                                                href={ window.wpseoInstallationSuccess.firstTimeConfigurationUrl }
                                                                className="yst-inline-flex yst-items-center yst-w-full yst-justify-center yst-no-underline yst-px-6 yst-py-3 yst-border yst-border-transparent yst-text-base yst-font-medium yst-rounded-md yst-shadow-none yst-text-primary-500 yst-bg-white hover:yst-bg-gray-50 focus:yst-outline-none focus:yst-ring-2 focus:yst-ring-offset-2 focus:yst-ring-white yst-ring-offset-2 yst-ring-offset-primary-500"
                                                                data-hiive-event-name="clicked_start_first_time_configuration"
                                                        >
                                                                { __( "Start first-time configuration!", "wordpress-seo" ) }
                                                                <ArrowNarrowRightIcon className="yst-w-5 yst-h-5 yst-ms-3 yst-me-1 rtl:yst-rotate-180" />
                                                        </a>
                                                </div>
                                        </div>
                                        <a
                                                id="installation-success-skip-link"
                                                className="yst-bottom-12 yst-right-0 yst-mr-5 yst-self-end yst-text-base md:yst-absolute"
                                                href={ window.wpseoInstallationSuccess.dashboardUrl }
                                                data-hiive-event-name="clicked_skip_button | installation successful screen"
                                        >
                                                {
                                                        /* translators: %s expands to ' »'. */
                                                        sprintf( __( "Skip%s", "wordpress-seo" ), " »" )
                                                }
                                        </a>
                                </div>
                        </div>
                </div>
        );
}

domReady( () => {
        const container = document.getElementById( "wpseo-installation-successful-free" );
        if ( container ) {
                const root = createRoot( container );
                root.render( <InstallationSuccessPage /> );
        }
} );

1	import domReady from "@wordpress/dom-ready";
2	import { __, sprintf } from "@wordpress/i18n";
3	import { createRoot } from "@wordpress/element";
4	import { CheckIcon } from "@heroicons/react/solid";
5	import { ArrowNarrowRightIcon } from "@heroicons/react/outline";
6	import { safeCreateInterpolateElement } from "./helpers/i18n";
7
8	/**
9	* The installation success page.
10	*
11	* @returns {WPElement} The installation success page.
12	*/
13	export function InstallationSuccessPage() {
14	return (	4✔
15	<div className="yst-root yst-my-auto yst-flex yst-flex-col yst-h-[90vh] yst-justify-center">
16	<h1 className="yst-text-4xl yst-text-gray-900 yst-w-[350px] yst-font-extrabold yst-leading-10 yst-mx-auto yst-mt-6 yst-mb-16 yst-text-center yst-tracking-tight">
17	{
18	safeCreateInterpolateElement(
19	sprintf(
20	/* translators: %s expands to Yoast SEO. */
21	__( "You've successfully installed %s!", "wordpress-seo" ),
22	// The space between 'Yoast' and 'SEO' is a non-breaking space (Unicode 160).
23	"<span>Yoast SEO</span>" ),
24	{
25	span: <span className="yst-text-primary-500" />,
26	}
27	)
28	}
29	</h1>
30	<div className="installation-success-content">
31	<div className="yst-flex yst-flex-col md:yst-flex-row yst-justify-center yst-items-center yst-gap-8">
32	<div id="installation-success-card-optimized-site" className="yst-shrink-0 yst-bg-white yst-rounded-lg yst-p-6 yst-flex yst-flex-col yst-max-w-sm yst-shadow-md yst-h-4/5 yst-leading-6">
33	<h2 className="yst-tracking-tight yst-text-gray-900 yst-text-2xl yst-leading-8 yst-font-extrabold">{ __( "Your site is now easier for search engines to find.", "wordpress-seo" ) }</h2>
34	<p className="yst-text-gray-500 yst-text-base yst-my-4">
35	{ sprintf(
36	/* translators: %s expands to Yoast SEO. */
37	__( "%s rolls out the red carpet for the search bots, which helps your site perform better in search engines.",
38	"wordpress-seo" ),
39	"Yoast SEO"
40	) }
41	</p>
42	<div className="card-button-section" />
43	<div className="yst-bg-green-100 yst-w-20 yst-h-20 yst-rounded-full yst-mx-auto yst-my-2 yst-flex yst-items-center yst-justify-center">
44	<CheckIcon className="yst-w-8 yst-text-green-600" />
45	</div>
46	</div>
47	<div>
48	<ArrowNarrowRightIcon className="yst-w-8 yst-text-gray-500 rtl:yst-rotate-180" />
49	</div>
50	<div id="installation-success-card-configuration" className="yst-shrink-0 yst-shadow-xl yst-bg-primary-500 yst-rounded-lg yst-p-6 yst-flex yst-flex-col yst-max-w-sm yst-h-4/5 yst-leading-6">
51	<h2 className=" yst-text-white yst-text-2xl yst-leading-8 yst-font-extrabold">
52	{ sprintf(
53	/* translators: %s expands to Yoast SEO. */
54	__( "For the best ranking results: configure %s!", "wordpress-seo" ),
55	"Yoast SEO"
56	) }
57	</h2>
58	<p className="yst-font-medium yst-text-white yst-text-base yst-my-4">
59	{ sprintf(
60	/* translators: %s expands to Yoast SEO. */
61	__( "Set the essential %s settings for your site in a few steps.", "wordpress-seo" ),
62	"Yoast SEO"
63	) }
64	</p>
65	<img
66	className="yst-my-6 yst-mx-auto yst-w-[150px] yst-h-[120px]"
67	src={ window.wpseoInstallationSuccess.pluginUrl + "/images/indexables_3_left_bubble_optm.svg" }
68	alt={ "" }
69	/>
70	<div className="yst-flex yst-grow-1 yst-mt-auto">
71	<a
72	id="installation-successful-configuration-link"
73	href={ window.wpseoInstallationSuccess.firstTimeConfigurationUrl }
74	className="yst-inline-flex yst-items-center yst-w-full yst-justify-center yst-no-underline yst-px-6 yst-py-3 yst-border yst-border-transparent yst-text-base yst-font-medium yst-rounded-md yst-shadow-none yst-text-primary-500 yst-bg-white hover:yst-bg-gray-50 focus:yst-outline-none focus:yst-ring-2 focus:yst-ring-offset-2 focus:yst-ring-white yst-ring-offset-2 yst-ring-offset-primary-500"
75	data-hiive-event-name="clicked_start_first_time_configuration"
76	>
77	{ __( "Start first-time configuration!", "wordpress-seo" ) }
78	<ArrowNarrowRightIcon className="yst-w-5 yst-h-5 yst-ms-3 yst-me-1 rtl:yst-rotate-180" />
79	</a>
80	</div>
81	</div>
82	<a
83	id="installation-success-skip-link"
84	className="yst-bottom-12 yst-right-0 yst-mr-5 yst-self-end yst-text-base md:yst-absolute"
85	href={ window.wpseoInstallationSuccess.dashboardUrl }
86	data-hiive-event-name="clicked_skip_button \| installation successful screen"
87	>
88	{
89	/* translators: %s expands to ' »'. */
90	sprintf( __( "Skip%s", "wordpress-seo" ), " »" )
91	}
92	</a>
93	</div>
94	</div>
95	</div>
96	);
97	}
98
99	domReady( () => {	2✔
100	const container = document.getElementById( "wpseo-installation-successful-free" );	2✔
101	if ( container ) {	2!
102	const root = createRoot( container );	×
103	root.render( <InstallationSuccessPage /> );	×
104	}
105	} );

Yoast / wordpress-seo / ca99786b69a25106723450181d6049c34982ff80

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