78e4a4e2265ef6657493beaec14c47cc3360fced

Committed 29 May 2024 06:11AM UTC coverage: 52.642% (+4.4%) from 48.235%

Build # 78e4a4e2265ef6657493beaec14c47cc3360fced

Build Type

push

github

Committed by

mhkuu

Commit Message

Merge branch 'trunk' of github.com:Yoast/wordpress-seo into feature/fix-assessments

Run Details

7414 of 13491 branches covered (54.96%)

Branch coverage included in aggregate %.

5 of 67 new or added lines in 10 files covered. (7.46%)

2 existing lines in 2 files now uncovered.

28361 of 54468 relevant lines covered (52.07%)

41340.72 hits per line

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

0.0

/packages/replacement-variable-editor/src/ReplacementVariableEditor.js

/* eslint-disable react/jsx-no-bind */
import { applyFilters } from "@wordpress/hooks";
// External dependencies.
import React, { Fragment } from "react";
import PropTypes from "prop-types";
import uniqueId from "lodash/uniqueId";
import { __ } from "@wordpress/i18n";
import { Slot } from "@wordpress/components";

// Yoast dependencies.
import ReplacementVariableEditorStandalone from "./ReplacementVariableEditorStandalone";
import { withCaretStyles } from "@yoast/style-guide";
import {
        ButtonsContainer,
        DescriptionInputContainer,
        FormSection,
        TitleInputContainer,
        TriggerReplacementVariableSuggestionsButton,
} from "./shared";
import {
        replacementVariablesShape,
        recommendedReplacementVariablesShape,
} from "./constants";
import { NewBadge, SimulatedLabel, PremiumBadge } from "@yoast/components";

/**
 * The replacement variable editor.
 */
class ReplacementVariableEditor extends React.Component {
        /**
         * The constructor.
         *
         * @param {Object} props The component props.
         */
        constructor( props ) {
                super( props );

                this.uniqueId = uniqueId( "replacement-variable-editor-field-" );

                switch ( props.type ) {
                        case "description":
                                this.InputContainer = DescriptionInputContainer;
                                break;
                        case "title":
                                this.InputContainer = TitleInputContainer;
                                break;
                        default:
                                this.InputContainer = TitleInputContainer;
                }

                if ( props.withCaret ) {
                        this.InputContainer = withCaretStyles( this.InputContainer );
                }

                this.triggerReplacementVariableSuggestions = this.triggerReplacementVariableSuggestions.bind( this );
        }

        /**
         * Inserts a % into a ReplacementVariableEditor to trigger the replacement variable suggestions.
         *
         * @returns {void}
         */
        triggerReplacementVariableSuggestions() {
                this.ref.triggerReplacementVariableSuggestions();
        }

        /**
         * Renders the components.
         *
         * @returns {ReactElement} The rendered element.
         */
        render() {
                const {
                        label,
                        onChange,
                        content,
                        onFocus,
                        onBlur,
                        isActive,
                        isHovered,
                        onSearchChange,
                        replacementVariables,
                        recommendedReplacementVariables,
                        editorRef,
                        placeholder,
                        fieldId,
                        onMouseEnter,
                        onMouseLeave,
                        hasNewBadge,
                        isDisabled,
                        hasPremiumBadge,
                        type,
                } = this.props;

                const InputContainer = this.InputContainer;

                const buttons = applyFilters( "yoast.replacementVariableEditor.additionalButtons", [], { fieldId, type } );

                return (
                        <FormSection
                                className={ [ "yst-replacevar", isDisabled && "yst-replacevar--disabled" ].filter( Boolean ).join( " " ) }
                                onMouseEnter={ onMouseEnter }
                                onMouseLeave={ onMouseLeave }
                        >
                                <SimulatedLabel
                                        className="yst-replacevar__label"
                                        id={ this.uniqueId }
                                        onClick={ onFocus }
                                >
                                        { label }
                                </SimulatedLabel>

                                { hasPremiumBadge && <PremiumBadge inLabel={ true } /> }
                                { hasNewBadge && <NewBadge inLabel={ true } /> }

                                <ButtonsContainer className="yst-replacevar__buttons">
                                        <Slot name={ `yoast.replacementVariableEditor.additionalButtons.${ fieldId }` } />
                                        { buttons.map( ( button, index ) => (
                                                <Fragment key={ `additional-button-${ index }-${ fieldId }` }>
                                                        { button }
                                                </Fragment>
                                        ) ) }
                                        <Slot key={ `PluginComponent-${ fieldId }` } name={ `PluginComponent-${ fieldId }` } />
                                        <TriggerReplacementVariableSuggestionsButton
                                                className="yst-replacevar__button-insert"
                                                onClick={ this.triggerReplacementVariableSuggestions }
                                                disabled={ isDisabled }
                                        >
                                                { __( "Insert variable", "wordpress-seo" ) }
                                        </TriggerReplacementVariableSuggestionsButton>
                                </ButtonsContainer>

                                <InputContainer
                                        className="yst-replacevar__editor"
                                        onClick={ onFocus }
                                        isActive={ isActive && ! isDisabled }
                                        isHovered={ isHovered }
                                >
                                        <ReplacementVariableEditorStandalone
                                                fieldId={ fieldId }
                                                placeholder={ placeholder }
                                                content={ content }
                                                onChange={ onChange }
                                                onFocus={ onFocus }
                                                onBlur={ onBlur }
                                                onSearchChange={ onSearchChange }
                                                replacementVariables={ replacementVariables }
                                                recommendedReplacementVariables={ recommendedReplacementVariables }
                                                ref={ ref => {
                                                        this.ref = ref;
                                                        editorRef( ref );
                                                } }
                                                ariaLabelledBy={ this.uniqueId }
                                                isDisabled={ isDisabled }
                                        />
                                </InputContainer>
                        </FormSection>
                );
        }
}

ReplacementVariableEditor.propTypes = {
        editorRef: PropTypes.func,
        content: PropTypes.string.isRequired,
        onChange: PropTypes.func.isRequired,
        onBlur: PropTypes.func,
        onSearchChange: PropTypes.func,
        replacementVariables: replacementVariablesShape,
        recommendedReplacementVariables: recommendedReplacementVariablesShape,
        isActive: PropTypes.bool,
        isHovered: PropTypes.bool,
        withCaret: PropTypes.bool,
        onFocus: PropTypes.func,
        label: PropTypes.string,
        placeholder: PropTypes.string,
        type: PropTypes.oneOf( [ "title", "description" ] ).isRequired,
        fieldId: PropTypes.string,
        onMouseEnter: PropTypes.func,
        onMouseLeave: PropTypes.func,
        hasNewBadge: PropTypes.bool,
        isDisabled: PropTypes.bool,
        hasPremiumBadge: PropTypes.bool,
};

ReplacementVariableEditor.defaultProps = {
        onFocus: () => {},
        onBlur: () => {},
        onSearchChange: null,
        replacementVariables: [],
        recommendedReplacementVariables: [],
        fieldId: "",
        placeholder: "",
        label: "",
        withCaret: false,
        isHovered: false,
        isActive: false,
        editorRef: () => {},
        onMouseEnter: () => {},
        onMouseLeave: () => {},
        hasNewBadge: false,
        isDisabled: false,
        hasPremiumBadge: false,
};

export default ReplacementVariableEditor;

1	/* eslint-disable react/jsx-no-bind */
2	import { applyFilters } from "@wordpress/hooks";
3	// External dependencies.
4	import React, { Fragment } from "react";
5	import PropTypes from "prop-types";
6	import uniqueId from "lodash/uniqueId";
7	import { __ } from "@wordpress/i18n";
8	import { Slot } from "@wordpress/components";
9
10	// Yoast dependencies.
11	import ReplacementVariableEditorStandalone from "./ReplacementVariableEditorStandalone";
12	import { withCaretStyles } from "@yoast/style-guide";
13	import {
14	ButtonsContainer,
15	DescriptionInputContainer,
16	FormSection,
17	TitleInputContainer,
18	TriggerReplacementVariableSuggestionsButton,
19	} from "./shared";
20	import {
21	replacementVariablesShape,
22	recommendedReplacementVariablesShape,
23	} from "./constants";
24	import { NewBadge, SimulatedLabel, PremiumBadge } from "@yoast/components";
25
26	/**
27	* The replacement variable editor.
28	*/
29	class ReplacementVariableEditor extends React.Component {
30	/**
31	* The constructor.
32	*
33	* @param {Object} props The component props.
34	*/
35	constructor( props ) {
36	super( props );	×
37
38	this.uniqueId = uniqueId( "replacement-variable-editor-field-" );	×
39
40	switch ( props.type ) {	×
41	case "description":
42	this.InputContainer = DescriptionInputContainer;	×
43	break;	×
44	case "title":
45	this.InputContainer = TitleInputContainer;	×
46	break;	×
47	default:
48	this.InputContainer = TitleInputContainer;	×
49	}
50
51	if ( props.withCaret ) {	×
52	this.InputContainer = withCaretStyles( this.InputContainer );	×
53	}
54
55	this.triggerReplacementVariableSuggestions = this.triggerReplacementVariableSuggestions.bind( this );	×
56	}
57
58	/**
59	* Inserts a % into a ReplacementVariableEditor to trigger the replacement variable suggestions.
60	*
61	* @returns {void}
62	*/
63	triggerReplacementVariableSuggestions() {
64	this.ref.triggerReplacementVariableSuggestions();	×
65	}
66
67	/**
68	* Renders the components.
69	*
70	* @returns {ReactElement} The rendered element.
71	*/
72	render() {
73	const {
74	label,
75	onChange,
76	content,
77	onFocus,
78	onBlur,
79	isActive,
80	isHovered,
81	onSearchChange,
82	replacementVariables,
83	recommendedReplacementVariables,
84	editorRef,
85	placeholder,
86	fieldId,
87	onMouseEnter,
88	onMouseLeave,
89	hasNewBadge,
90	isDisabled,
91	hasPremiumBadge,
92	type,
93	} = this.props;	×
94
95	const InputContainer = this.InputContainer;	×
96
97	const buttons = applyFilters( "yoast.replacementVariableEditor.additionalButtons", [], { fieldId, type } );	×
98
UNCOV 99	return (	×
100	<FormSection
101	className={ [ "yst-replacevar", isDisabled && "yst-replacevar--disabled" ].filter( Boolean ).join( " " ) }	×
102	onMouseEnter={ onMouseEnter }
103	onMouseLeave={ onMouseLeave }
104	>
105	<SimulatedLabel
106	className="yst-replacevar__label"
107	id={ this.uniqueId }
108	onClick={ onFocus }
109	>
110	{ label }
111	</SimulatedLabel>
112
113	{ hasPremiumBadge && <PremiumBadge inLabel={ true } /> }	×
114	{ hasNewBadge && <NewBadge inLabel={ true } /> }	×
115
116	<ButtonsContainer className="yst-replacevar__buttons">
117	<Slot name={ `yoast.replacementVariableEditor.additionalButtons.${ fieldId }` } />
118	{ buttons.map( ( button, index ) => (
119	<Fragment key={ `additional-button-${ index }-${ fieldId }` }>	×
120	{ button }
121	</Fragment>
122	) ) }
123	<Slot key={ `PluginComponent-${ fieldId }` } name={ `PluginComponent-${ fieldId }` } />
124	<TriggerReplacementVariableSuggestionsButton
125	className="yst-replacevar__button-insert"
126	onClick={ this.triggerReplacementVariableSuggestions }
127	disabled={ isDisabled }
128	>
129	{ __( "Insert variable", "wordpress-seo" ) }
130	</TriggerReplacementVariableSuggestionsButton>
131	</ButtonsContainer>
132
133	<InputContainer
134	className="yst-replacevar__editor"
135	onClick={ onFocus }
136	isActive={ isActive && ! isDisabled }	×
137	isHovered={ isHovered }
138	>
139	<ReplacementVariableEditorStandalone
140	fieldId={ fieldId }
141	placeholder={ placeholder }
142	content={ content }
143	onChange={ onChange }
144	onFocus={ onFocus }
145	onBlur={ onBlur }
146	onSearchChange={ onSearchChange }
147	replacementVariables={ replacementVariables }
148	recommendedReplacementVariables={ recommendedReplacementVariables }
149	ref={ ref => {
150	this.ref = ref;	×
151	editorRef( ref );	×
152	} }
153	ariaLabelledBy={ this.uniqueId }
154	isDisabled={ isDisabled }
155	/>
156	</InputContainer>
157	</FormSection>
158	);
159	}
160	}
161
162	ReplacementVariableEditor.propTypes = {	×
163	editorRef: PropTypes.func,
164	content: PropTypes.string.isRequired,
165	onChange: PropTypes.func.isRequired,
166	onBlur: PropTypes.func,
167	onSearchChange: PropTypes.func,
168	replacementVariables: replacementVariablesShape,
169	recommendedReplacementVariables: recommendedReplacementVariablesShape,
170	isActive: PropTypes.bool,
171	isHovered: PropTypes.bool,
172	withCaret: PropTypes.bool,
173	onFocus: PropTypes.func,
174	label: PropTypes.string,
175	placeholder: PropTypes.string,
176	type: PropTypes.oneOf( [ "title", "description" ] ).isRequired,
177	fieldId: PropTypes.string,
178	onMouseEnter: PropTypes.func,
179	onMouseLeave: PropTypes.func,
180	hasNewBadge: PropTypes.bool,
181	isDisabled: PropTypes.bool,
182	hasPremiumBadge: PropTypes.bool,
183	};
184
185	ReplacementVariableEditor.defaultProps = {	×
186	onFocus: () => {},
187	onBlur: () => {},
188	onSearchChange: null,
189	replacementVariables: [],
190	recommendedReplacementVariables: [],
191	fieldId: "",
192	placeholder: "",
193	label: "",
194	withCaret: false,
195	isHovered: false,
196	isActive: false,
197	editorRef: () => {},
198	onMouseEnter: () => {},
199	onMouseLeave: () => {},
200	hasNewBadge: false,
201	isDisabled: false,
202	hasPremiumBadge: false,
203	};
204
205	export default ReplacementVariableEditor;

Yoast / wordpress-seo / 78e4a4e2265ef6657493beaec14c47cc3360fced

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