Analysis Report: Refactor defaultProps to be defaultArguments

packages/analysis-report/package.json

@@ -16,7 +16,7 @@
     "build:js": "babel src --out-dir build",
     "clean": "rm -rf build",
     "test": "jest",
-    "lint": "eslint . --max-warnings=8"
+    "lint": "eslint . --max-warnings=4"
   },
   "author": "Team Yoast",
   "license": "GPL-3.0",

packages/analysis-report/src/AnalysisList.js

@@ -1,14 +1,9 @@
-/* External dependencies */
 import { __, sprintf } from "@wordpress/i18n";
+import { colors } from "@yoast/style-guide";
+import noop from "lodash/noop";
+import PropTypes from "prop-types";
 import React from "react";
 import styled from "styled-components";
-import PropTypes from "prop-types";
-import noop from "lodash/noop";
-
-/* Yoast dependencies. */
-import { colors } from "@yoast/style-guide";
-
-/* Internal dependencies */
 import AnalysisResult from "./AnalysisResult";
 
 /**
@@ -45,32 +40,47 @@ export function renderRatingToColor( rating ) {
 /**
  * Renders a list of results based on the array of results.
  *
- * @param {Object}          props                               Component props.
- * @param {MappedResult[]}  props.results                       The results from YoastSEO.js
- * @param {string}          props.marksButtonActivatedResult    The currently activated result.
- * @param {string}          props.marksButtonStatus             The overall status of the mark buttons.
- * @param {string}          props.marksButtonClassName          A class name to set on the mark buttons.
- * @param {string}          props.editButtonClassName           A class name to set on the edit buttons.
- * @param {Function}        [props.markButtonFactory]           Injectable factory to create custom mark buttons.
- * @param {Function}        props.onMarksButtonClick            Function that is called when the user
- *                                                              clicks one of the mark buttons.
- * @param {Function}        props.onEditButtonClick             Function that is called when the user
- *                                                              clicks one of the edit buttons.
- * @param {bool}            props.isPremium                     Whether the Premium plugin is active or not.
+ * @param {MappedResult[]} results The results from YoastSEO.js.
+ * @param {string} [marksButtonActivatedResult] The currently activated result.
+ * @param {string} [marksButtonStatus] The overall status of the mark buttons.
+ * @param {string} [marksButtonClassName] A class name to set on the mark buttons.
+ * @param {string} [editButtonClassName] A class name to set on the edit buttons.
+ * @param {?Function} [markButtonFactory] Injectable factory to create custom mark buttons.
+ * @param {Function} [onMarksButtonClick] Function that is called when the user clicks one of the mark buttons.
+ * @param {Function} [onEditButtonClick] Function that is called when the user clicks one of the edit buttons.
+ * @param {boolean} [isPremium] Whether the Premium plugin is active or not.
+ * @param {Function} [onResultChange] Function that is called when the user changes the result.
+ * @param {boolean} [shouldUpsellHighlighting] Whether the highlighting upsell should be shown.
+ * @param {Function} [renderHighlightingUpsell] Function to render the highlighting upsell.
+ * @param {Function} [renderAIOptimizeButton] Function to render the AI optimize button.
  *
  * @returns {JSX.Element} The rendered list.
  */
-export default function AnalysisList( props ) {
+export default function AnalysisList( {
+	results,
+	marksButtonActivatedResult = "",
+	marksButtonStatus = "enabled",
+	marksButtonClassName = "",
+	editButtonClassName = "",
+	markButtonFactory = null,
+	onMarksButtonClick = noop,
+	onEditButtonClick = noop,
+	isPremium = false,
+	onResultChange = noop,
+	shouldUpsellHighlighting = false,
+	renderHighlightingUpsell = noop,
+	renderAIOptimizeButton = noop,
+} ) {
 	return <AnalysisListBase role="list">
-		{ props.results.map( ( result ) => {
+		{ results.map( ( result ) => {
 			const color = renderRatingToColor( result.rating );
-			const isMarkButtonPressed = result.markerId === props.marksButtonActivatedResult;
+			const isMarkButtonPressed = result.markerId === marksButtonActivatedResult;
 
 			const markButtonId = result.id + "Mark";
 			const editButtonId = result.id + "Edit";
 
 			let ariaLabelMarks = "";
-			if ( props.marksButtonStatus === "disabled" ) {
+			if ( marksButtonStatus === "disabled" ) {
 				ariaLabelMarks = __( "Highlighting is currently disabled", "wordpress-seo" );
 			} else if ( isMarkButtonPressed ) {
 				ariaLabelMarks = __( "Remove highlight from the text", "wordpress-seo" );
@@ -81,8 +91,7 @@ export default function AnalysisList( props ) {
 			const editFieldName = result.editFieldName;
 			const ariaLabelEdit = editFieldName === "" ? ""
 				: sprintf(
-					/* Translators: %1$s refers to the name of the field that should be edited (keyphrase, meta description,
-					   slug or SEO title). */
+					/* Translators: %1$s refers to the name of the field that should be edited (keyphrase, meta description, slug or SEO title). */
 					__( "Edit your %1$s", "wordpress-seo" ), editFieldName );
 
 			return <AnalysisResult
@@ -100,18 +109,18 @@ export default function AnalysisList( props ) {
 				suppressedText={ result.rating === "upsell" }
 				buttonIdMarks={ markButtonId }
 				buttonIdEdit={ editButtonId }
-				onButtonClickMarks={ () => props.onMarksButtonClick( result.id, result.marker ) }
-				onButtonClickEdit={ () => props.onEditButtonClick( result.id ) }
-				marksButtonClassName={ props.marksButtonClassName }
-				editButtonClassName={ props.editButtonClassName }
-				marksButtonStatus={ props.marksButtonStatus }
+				onButtonClickMarks={ () => onMarksButtonClick( result.id, result.marker ) }
+				onButtonClickEdit={ () => onEditButtonClick( result.id ) }
+				marksButtonClassName={ marksButtonClassName }
+				editButtonClassName={ editButtonClassName }
+				marksButtonStatus={ marksButtonStatus }
 				hasBetaBadgeLabel={ result.hasBetaBadge }
-				isPremium={ props.isPremium }
-				onResultChange={ props.onResultChange }
-				markButtonFactory={ props.markButtonFactory }
-				shouldUpsellHighlighting={ props.shouldUpsellHighlighting }
-				renderAIOptimizeButton={ props.renderAIOptimizeButton }
-				renderHighlightingUpsell={ props.renderHighlightingUpsell }
+				isPremium={ isPremium }
+				onResultChange={ onResultChange }
+				markButtonFactory={ markButtonFactory }
+				shouldUpsellHighlighting={ shouldUpsellHighlighting }
+				renderAIOptimizeButton={ renderAIOptimizeButton }
+				renderHighlightingUpsell={ renderHighlightingUpsell }
 			/>;
 		} ) }
 	</AnalysisListBase>;
@@ -132,17 +141,3 @@ AnalysisList.propTypes = {
 	renderHighlightingUpsell: PropTypes.func,
 	renderAIOptimizeButton: PropTypes.func,
 };
-
-AnalysisList.defaultProps = {
-	marksButtonActivatedResult: "",
-	marksButtonStatus: "enabled",
-	marksButtonClassName: "",
-	editButtonClassName: "",
-	onMarksButtonClick: noop,
-	onEditButtonClick: noop,
-	isPremium: false,
-	onResultChange: noop,
-	shouldUpsellHighlighting: false,
-	renderHighlightingUpsell: noop,
-	renderAIOptimizeButton: noop,
-};

packages/analysis-report/src/AnalysisResult.js

@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useState } from "react";
+import { BetaBadge, IconButtonToggle, IconCTAEditButton, SvgIcon } from "@yoast/components";
+import { strings } from "@yoast/helpers";
+import { noop } from "lodash";
 import PropTypes from "prop-types";
+import React, { useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
-import { noop } from "lodash";
-import { SvgIcon, IconButtonToggle, IconCTAEditButton, BetaBadge } from "@yoast/components";
-import { strings } from "@yoast/helpers";
 
 const { stripTagsFromHtmlString } = strings;
 
@@ -41,13 +41,12 @@ const AnalysisResultText = styled.p`
 /**
  * Determines whether the mark buttons should be hidden.
  *
- * @param {Object} props The component's props.
- * @param {String} props.marksButtonStatus The status for the mark buttons.
- * @param {boolean} props.hasMarksButton Whether a mark button exists.
+ * @param {boolean} hasMarksButton Whether a mark button exists.
+ * @param {string} marksButtonStatus The status for the mark buttons.
  * @returns {boolean} True if mark buttons should be hidden.
  */
-const areMarkButtonsHidden = function( props ) {
-	return ( ! props.hasMarksButton ) || props.marksButtonStatus === "hidden";
+const areMarkButtonsHidden = function( hasMarksButton, marksButtonStatus ) {
+	return ! hasMarksButton || marksButtonStatus === "hidden";
 };
 
 /**
@@ -84,38 +83,61 @@ const createMarkButton = ( {
 /**
  * Returns an AnalysisResult component.
  *
- * @param {object} props Component props.
- * @param {Function} [markButtonFactory] Injectable factory to create mark button.
+ * @param {string} text The text to be displayed in the result.
+ * @param {boolean} [suppressedText=false] Whether the text should be suppressed.
+ * @param {string} bulletColor The color of the bullet icon.
+ * @param {boolean} hasMarksButton Whether the result has a marks button.
+ * @param {boolean} [hasEditButton=false] Whether the result has an edit button.
+ * @param {boolean} [hasAIFixes=false] Whether the result has AI fixes.
+ * @param {string} buttonIdMarks The id of the marks button.
+ * @param {string} [buttonIdEdit=""] The id of the edit button.
+ * @param {boolean} pressed Whether the marks button is pressed.
+ * @param {string} ariaLabelMarks The aria-label for the marks button.
+ * @param {string} [ariaLabelEdit=""] The aria-label for the edit button.
+ * @param {Function} onButtonClickMarks The function to call when the marks button is clicked.
+ * @param {Function} [onButtonClickEdit=noop] The function to call when the edit button is clicked.
+ * @param {string} [marksButtonStatus="enabled"] The status of the marks button.
+ * @param {string} [marksButtonClassName=""] The class name for the marks button.
+ * @param {Function} [markButtonFactory=null] Injectable factory to create mark button.
+ * @param {string} [editButtonClassName=""] The class name for the edit button.
+ * @param {boolean} [hasBetaBadgeLabel=false] Whether the result has a beta badge label.
+ * @param {boolean} [isPremium=false] Whether the user has a premium subscription.
+ * @param {Function} [onResultChange=noop] The function to call when the result changes.
+ * @param {string} [id=""] The id of the result.
+ * @param {Function|array} [marker=noop] The function or array to mark the result.
+ * @param {boolean} [shouldUpsellHighlighting=false] Whether to show the upsell for highlighting.
+ * @param {Function} [renderHighlightingUpsell=noop] The function to render the highlighting upsell.
+ * @param {Function} [renderAIOptimizeButton=noop] The function to render the AI optimize button.
  *
  * @returns {ReactElement} The rendered AnalysisResult component.
  */
-const AnalysisResult = ( { markButtonFactory, ...props } ) => {
-	const {
-		ariaLabelMarks,
-		ariaLabelEdit,
-		bulletColor,
-		buttonIdMarks,
-		buttonIdEdit,
-		editButtonClassName,
-		hasAIFixes,
-		hasBetaBadgeLabel,
-		hasEditButton,
-		hasMarksButton,
-		id,
-		isPremium,
-		marker,
-		marksButtonStatus,
-		marksButtonClassName,
-		onButtonClickMarks,
-		onButtonClickEdit,
-		onResultChange,
-		pressed,
-		renderHighlightingUpsell,
-		renderAIOptimizeButton,
-		shouldUpsellHighlighting,
-		suppressedText,
-		text,
-	} = props;
+const AnalysisResult = ( {
+	ariaLabelMarks,
+	ariaLabelEdit = "",
+	bulletColor,
+	buttonIdMarks,
+	buttonIdEdit = "",
+	editButtonClassName = "",
+	hasAIFixes = false,
+	hasBetaBadgeLabel = false,
+	hasEditButton = false,
+	hasMarksButton,
+	id = "",
+	isPremium = false,
+	marker = noop,
+	markButtonFactory = null,
+	marksButtonStatus = "enabled",
+	marksButtonClassName = "",
+	onButtonClickMarks,
+	onButtonClickEdit = noop,
+	onResultChange = noop,
+	pressed,
+	renderHighlightingUpsell = noop,
+	renderAIOptimizeButton = noop,
+	shouldUpsellHighlighting = false,
+	suppressedText = false,
+	text,
+} ) => {
 	const [ isOpen, setIsOpen ] = useState( false );
 
 	const closeModal = useCallback( () => setIsOpen( false ), [] );
@@ -124,7 +146,7 @@ const AnalysisResult = ( { markButtonFactory, ...props } ) => {
 	markButtonFactory = markButtonFactory || createMarkButton;
 
 	let marksButton = null;
-	if ( ! areMarkButtonsHidden( props ) ) {
+	if ( ! areMarkButtonsHidden( hasMarksButton, marksButtonStatus ) ) {
 		marksButton = markButtonFactory(
 			{
 				onClick: shouldUpsellHighlighting ? openModal : onButtonClickMarks,
@@ -183,7 +205,6 @@ AnalysisResult.propTypes = {
 	bulletColor: PropTypes.string.isRequired,
 	hasMarksButton: PropTypes.bool.isRequired,
 	hasEditButton: PropTypes.bool,
-	hasAIButton: PropTypes.bool,
 	hasAIFixes: PropTypes.bool,
 	buttonIdMarks: PropTypes.string.isRequired,
 	buttonIdEdit: PropTypes.string,
@@ -209,24 +230,4 @@ AnalysisResult.propTypes = {
 	renderAIOptimizeButton: PropTypes.func,
 };
 
-AnalysisResult.defaultProps = {
-	suppressedText: false,
-	marksButtonStatus: "enabled",
-	marksButtonClassName: "",
-	editButtonClassName: "",
-	hasBetaBadgeLabel: false,
-	hasEditButton: false,
-	hasAIFixes: false,
-	buttonIdEdit: "",
-	ariaLabelEdit: "",
-	onButtonClickEdit: noop,
-	isPremium: false,
-	onResultChange: noop,
-	id: "",
-	marker: noop,
-	shouldUpsellHighlighting: false,
-	renderHighlightingUpsell: noop,
-	renderAIOptimizeButton: noop,
-};
-
 export default AnalysisResult;

packages/analysis-report/src/SiteSEOReport.js

@@ -1,9 +1,8 @@
-import React from "react";
+import { ScoreAssessments as SiteSEOReportAssessments, StackedProgressBar } from "@yoast/components";
 import PropTypes from "prop-types";
+import React from "react";
 import styled from "styled-components";
 
-import { ScoreAssessments as SiteSEOReportAssessments, StackedProgressBar } from "@yoast/components";
-
 /**
  * SeoAssessment container.
  */
@@ -20,28 +19,36 @@ const SiteSEOReportText = styled.p`
 /**
  * The Dashboard Seo Assessment component.
  *
- * @param {object} props The component props.
+ * @param {string} [className="seo-assessment"] The class name to use.
+ * @param {string} [seoAssessmentText="SEO Assessment"] The text to show.
+ * @param {{html: string, value: number, color: string}[]|null} [seoAssessmentItems=null] The items to show in the assessment.
+ * @param {string} [barHeight="24px"] The height of the progress bar.
  *
  * @returns {ReactElement} The react component.
  */
-const SiteSEOReport = ( props ) => {
+const SiteSEOReport = ( {
+	className = "seo-assessment",
+	seoAssessmentText = "SEO Assessment",
+	seoAssessmentItems = null,
+	barHeight = "24px",
+} ) => {
 	return (
 		<SiteSEOReportContainer
-			className={ props.className }
+			className={ className }
 		>
 			<SiteSEOReportText
-				className={ `${ props.className }__text` }
+				className={ `${ className }__text` }
 			>
-				{ props.seoAssessmentText }
+				{ seoAssessmentText }
 			</SiteSEOReportText>
 			<StackedProgressBar
 				className="progress"
-				items={ props.seoAssessmentItems }
-				barHeight={ props.barHeight }
+				items={ seoAssessmentItems }
+				barHeight={ barHeight }
 			/>
 			<SiteSEOReportAssessments
 				className="assessments"
-				items={ props.seoAssessmentItems }
+				items={ seoAssessmentItems }
 			/>
 		</SiteSEOReportContainer>
 	);
@@ -60,11 +67,4 @@ SiteSEOReport.propTypes = {
 	barHeight: PropTypes.string,
 };
 
-SiteSEOReport.defaultProps = {
-	className: "seo-assessment",
-	seoAssessmentText: "SEO Assessment",
-	seoAssessmentItems: null,
-	barHeight: "24px",
-};
-
 export default SiteSEOReport;