Adds "Optimize with AI" buttons next to SEO assessments

packages/analysis-report/src/AnalysisList.js

@@ -93,6 +93,7 @@ export default function AnalysisList( props ) {
 				bulletColor={ color }
 				hasMarksButton={ result.hasMarks }
 				hasEditButton={ result.hasJumps }
+				hasAIFixes={ result.hasAIFixes }
 				ariaLabelMarks={ ariaLabelMarks }
 				ariaLabelEdit={ ariaLabelEdit }
 				pressed={ isMarkButtonPressed }
@@ -109,6 +110,7 @@ export default function AnalysisList( props ) {
 				onResultChange={ props.onResultChange }
 				markButtonFactory={ props.markButtonFactory }
 				shouldUpsellHighlighting={ props.shouldUpsellHighlighting }
+				renderAIFixesButton={ props.renderAIFixesButton }
 				renderHighlightingUpsell={ props.renderHighlightingUpsell }
 			/>;
 		} ) }
@@ -128,6 +130,7 @@ AnalysisList.propTypes = {
 	onResultChange: PropTypes.func,
 	shouldUpsellHighlighting: PropTypes.bool,
 	renderHighlightingUpsell: PropTypes.func,
+	renderAIFixesButton: PropTypes.func,
 };
 
 AnalysisList.defaultProps = {
@@ -141,4 +144,5 @@ AnalysisList.defaultProps = {
 	onResultChange: noop,
 	shouldUpsellHighlighting: false,
 	renderHighlightingUpsell: noop,
+	renderAIFixesButton: noop,
 };

packages/analysis-report/src/AnalysisResult.js

@@ -3,17 +3,25 @@ import React, { useCallback, useEffect, useState } from "react";
 import PropTypes from "prop-types";
 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;
 
 const ALLOWED_TAGS = [ "a", "b", "strong", "em", "i" ];
 
+const ResultButtonsContainer = styled.div`
+	display: grid;
+	grid-template-rows: 1fr;
+	max-width: 32px;
+	// This gap value is half the gap value between assessment result list items, which is 12px.
+	gap: 6px;
+`;
+
 const AnalysisResultBase = styled.li`
 	// This is the height of the IconButtonToggle.
 	min-height: 24px;
+	margin-bottom: 12px;
 	padding: 0;
 	display: flex;
 	align-items: flex-start;
@@ -125,18 +133,21 @@ const AnalysisResult = ( { markButtonFactory, ...props } ) => {
 				{ props.hasBetaBadgeLabel && <BetaBadge /> }
 				<span dangerouslySetInnerHTML={ { __html: stripTagsFromHtmlString( props.text, ALLOWED_TAGS ) } } />
 			</AnalysisResultText>
-			{ marksButton }
-			{ props.renderHighlightingUpsell( isOpen, closeModal ) }
-			{
-				props.hasEditButton && props.isPremium &&
-				<IconCTAEditButton
-					className={ props.editButtonClassName }
-					onClick={ props.onButtonClickEdit }
-					id={ props.buttonIdEdit }
-					icon="edit"
-					ariaLabel={ props.ariaLabelEdit }
-				/>
-			}
+			<ResultButtonsContainer>
+				{ marksButton }
+				{ props.renderHighlightingUpsell( isOpen, closeModal ) }
+				{
+					props.hasEditButton && props.isPremium &&
+					<IconCTAEditButton
+						className={ props.editButtonClassName }
+						onClick={ props.onButtonClickEdit }
+						id={ props.buttonIdEdit }
+						icon="edit"
+						ariaLabel={ props.ariaLabelEdit }
+					/>
+				}
+				{ props.renderAIFixesButton( props.hasAIFixes, props.id ) }
+			</ResultButtonsContainer>
 		</AnalysisResultBase>
 	);
 };
@@ -147,6 +158,8 @@ 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,
 	pressed: PropTypes.bool.isRequired,
@@ -168,6 +181,7 @@ AnalysisResult.propTypes = {
 	] ),
 	shouldUpsellHighlighting: PropTypes.bool,
 	renderHighlightingUpsell: PropTypes.func,
+	renderAIFixesButton: PropTypes.func,
 };
 
 AnalysisResult.defaultProps = {
@@ -177,6 +191,7 @@ AnalysisResult.defaultProps = {
 	editButtonClassName: "",
 	hasBetaBadgeLabel: false,
 	hasEditButton: false,
+	hasAIFixes: false,
 	buttonIdEdit: "",
 	ariaLabelEdit: "",
 	onButtonClickEdit: noop,
@@ -186,6 +201,7 @@ AnalysisResult.defaultProps = {
 	marker: noop,
 	shouldUpsellHighlighting: false,
 	renderHighlightingUpsell: noop,
+	renderAIFixesButton: noop,
 };
 
 export default AnalysisResult;

packages/analysis-report/src/ContentAnalysis.js

@@ -20,13 +20,10 @@ const ContentAnalysisContainer = styled.div`
 const StyledCollapsible = styled( Collapsible )`
 	margin-bottom: 8px;
 
-	button:first-child svg {
-		margin: -2px 8px 0 -2px; // Compensate icon size set to 18px.
-	}
-
 	${ StyledIconsButton } {
 		padding: 8px 0;
-		color: ${ colors.$color_blue }
+		color: ${ colors.$color_blue };
+		margin: -2px 8px 0 -2px; // Compensate icon size set to 18px.
 	}
 `;
 
@@ -37,7 +34,7 @@ const StyledCollapsible = styled( Collapsible )`
  */
 class ContentAnalysis extends React.Component {
 	/**
-	 * Renders a Collapsible component with a liset of Analysis results.
+	 * Renders a Collapsible component with a list of Analysis results.
 	 *
 	 * @param {string} title        The title of the collapsible section.
 	 * @param {number} headingLevel Heading level: 1 for h1, 2 for h2, etc.
@@ -65,6 +62,7 @@ class ContentAnalysis extends React.Component {
 					markButtonFactory={ this.props.markButtonFactory }
 					onMarksButtonClick={ this.props.onMarkButtonClick }
 					onEditButtonClick={ this.props.onEditButtonClick }
+					renderAIFixesButton={ this.props.renderAIFixesButton }
 					isPremium={ this.props.isPremium }
 					onResultChange={ this.props.onResultChange }
 					shouldUpsellHighlighting={ this.props.shouldUpsellHighlighting }
@@ -156,6 +154,7 @@ ContentAnalysis.propTypes = {
 	onResultChange: PropTypes.func,
 	shouldUpsellHighlighting: PropTypes.bool,
 	renderHighlightingUpsell: PropTypes.func,
+	renderAIFixesButton: PropTypes.func,
 };
 
 ContentAnalysis.defaultProps = {
@@ -178,6 +177,7 @@ ContentAnalysis.defaultProps = {
 	onResultChange: () => {},
 	shouldUpsellHighlighting: false,
 	renderHighlightingUpsell: () => {},
+	renderAIFixesButton: () => {},
 };
 
 export default ContentAnalysis;