Add optional help text to contentanalysis

app/ContentAnalysisWrapper.js

@@ -76,6 +76,10 @@ export default function HelpCenterWrapper() {
  console.log( "Marker button clicked", id, marker );
  } }
  marksButtonStatus={ "enabled" }
+ helpText={ [
+ "Enter the search term you'd like this post to be found with and see how it would rank. ",
+ <a key="1" href="https://yoa.st/" target="_blank" rel="noopener">Learn more about the Content Analysis Tool.</a>,
+ ] }
  />
  );
 }

composites/Plugin/ContentAnalysis/components/ContentAnalysis.js

@@ -1,12 +1,15 @@
+/* External dependencies */
 import React from "react";
 import styled from "styled-components";
-import colors from "../../../../style-guide/colors.json";
 import PropTypes from "prop-types";
-
 import { injectIntl, intlShape, defineMessages, FormattedMessage } from "react-intl";
+
+/* Internal dependencies */
+import colors from "../../../../style-guide/colors.json";
 import { makeOutboundLink } from "../../../../utils/makeOutboundLink";
 import AnalysisResult from "../components/AnalysisResult.js";
 import AnalysisCollapsible from "../components/AnalysisCollapsible.js";
+import HelpText, { HelpTextPropType } from "../../../../composites/Plugin/Shared/components/HelpText";
 
 export const ContentAnalysisContainer = styled.div`
  width: 100%;
@@ -205,21 +208,25 @@ class ContentAnalysis extends React.Component {
  * @returns {ReactElement} The rendered ContentAnalysis component.
  */
  render() {
- let problemsResults = this.props.problemsResults;
- let improvementsResults = this.props.improvementsResults;
- let goodResults = this.props.goodResults;
- let considerationsResults = this.props.considerationsResults;
- let errorsResults = this.props.errorsResults;
- let headingLevel = this.props.headingLevel;
- let errorsFound = errorsResults.length;
- let problemsFound = problemsResults.length;
- let improvementsFound = improvementsResults.length;
- let considerationsFound = considerationsResults.length;
- let goodResultsFound = goodResults.length;
+ const {
+ problemsResults,
+ improvementsResults,
+ goodResults,
+ considerationsResults,
+ errorsResults,
+ headingLevel,
+ helpText,
+ } = this.props;
+ const errorsFound = errorsResults.length;
+ const problemsFound = problemsResults.length;
+ const improvementsFound = improvementsResults.length;
+ const considerationsFound = considerationsResults.length;
+ const goodResultsFound = goodResults.length;
 
  // Analysis collapsibles are only rendered when there is at least one analysis result for that category present.
  return (
  <ContentAnalysisContainer>
+ { helpText && <HelpText text={ helpText } /> }
  { this.renderLanguageNotice() }
  { errorsFound > 0 &&
  <AnalysisCollapsible
@@ -276,6 +283,7 @@ ContentAnalysis.propTypes = {
  marksButtonStatus: PropTypes.string,
  marksButtonClassName: PropTypes.string,
  intl: intlShape.isRequired,
+ helpText: HelpTextPropType,
 };
 
 ContentAnalysis.defaultProps = {