Merge branch 'release/2.11.1'

CHANGELOG.MD

@@ -5,6 +5,10 @@ This changelog is according to [Keep a Changelog](http://keepachangelog.com).
 All notable changes to this project will be documented in this file.
 We follow [Semantic Versioning](http://semver.org/).
 
+## 2.11.1: October 30th, 2017
+
+* Allows `AnalysisResult` text to be HTML. #366
+
 ## 2.11: October 27th, 2017
 
 ### Added

app/ContentAnalysisWrapper.js

@@ -19,7 +19,7 @@ export default function HelpCenterWrapper() {
 
  const goodResults = [
  {
- text: "You're doing great!",
+ text: "You're doing <strong>great!</strong>",
  id: "2",
  rating: "good",
  hasMarks: false,
@@ -43,7 +43,7 @@ export default function HelpCenterWrapper() {
 
  const errorsResults = [
  {
- text: "Error: Analysis not loaded",
+ text: "<span style=\"color: red;\">Error: Analysis not loaded</span>",
  id: "5",
  rating: "feedback",
  hasMarks: false,

composites/Plugin/ContentAnalysis/components/AnalysisResult.js

@@ -39,7 +39,7 @@ export const AnalysisResult = ( props ) => {
  color={ props.bulletColor }
  size="13px"
  />
- <AnalysisResultText>{ props.text }</AnalysisResultText>
+ <AnalysisResultText dangerouslySetInnerHTML={ { __html: props.text } } />
  {
  props.hasMarksButton &&
  <IconButtonToggle

composites/Plugin/ContentAnalysis/tests/AnalysisResultTest.js

@@ -19,3 +19,21 @@ test( "the AnalysisResult component matches the snapshot", () => {
  let tree = component.toJSON();
  expect( tree ).toMatchSnapshot();
 } );
+
+test( "the AnalysisResult component with html in the text matches the snapshot", () => {
+ const component = createComponentWithIntl(
+ <AnalysisResult
+ ariaLabel="SEOResult"
+ bulletColor="blue"
+ buttonId="Result button"
+ pressed={ true }
+ hasMarksButton={ true }
+ onButtonClick={ () => {} }
+ text={ "You're doing <b>great!</b>" }
+ score="good"
+ />
+ );
+
+ let tree = component.toJSON();
+ expect( tree ).toMatchSnapshot();
+} );

composites/Plugin/ContentAnalysis/tests/__snapshots__/AnalysisResultTest.js.snap

@@ -12,9 +12,12 @@ exports[`the AnalysisResult component matches the snapshot 1`] = `
  />
  <p
  className="sc-bxivhb aWDuI"
- >
- You're doing great!
- </p>
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "You're doing great!",
+ }
+ }
+ />
  <button
  aria-label="SEOResult"
  aria-pressed={true}
@@ -31,3 +34,38 @@ exports[`the AnalysisResult component matches the snapshot 1`] = `
  </button>
 </li>
 `;
+
+exports[`the AnalysisResult component with html in the text matches the snapshot 1`] = `
+<li
+ className="sc-bwzfXH kGIHaC"
+>
+ <svg
+ aria-hidden="true"
+ className="sc-htpNat gvyGHY sc-bZQynM jbcHwk"
+ focusable="false"
+ role="img"
+ />
+ <p
+ className="sc-bxivhb aWDuI"
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "You're doing <b>great!</b>",
+ }
+ }
+ />
+ <button
+ aria-label="SEOResult"
+ aria-pressed={true}
+ className="sc-bdVaJa VNVFd"
+ id="Result button"
+ onClick={[Function]}
+ >
+ <svg
+ aria-hidden="true"
+ className="sc-gzVnrw dJVhwI"
+ focusable="false"
+ role="img"
+ />
+ </button>
+</li>
+`;

composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap

@@ -68,9 +68,12 @@ exports[`the ContentAnalysis component with language notice matches the snapshot
  />
  <p
  className="sc-ifAKCX cHWEpb"
- >
- Error: Analysis not loaded
- </p>
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "Error: Analysis not loaded",
+ }
+ }
+ />
  </li>
  </ul>
  </div>
@@ -114,9 +117,12 @@ exports[`the ContentAnalysis component with language notice matches the snapshot
  />
  <p
  className="sc-ifAKCX cHWEpb"
- >
- Your text is bad, and you should feel bad.
- </p>
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "Your text is bad, and you should feel bad.",
+ }
+ }
+ />
  <button
  aria-label="Highlight this result in the text"
  aria-pressed={false}
@@ -259,9 +265,12 @@ exports[`the ContentAnalysis component without language notice matches the snaps
  />
  <p
  className="sc-ifAKCX cHWEpb"
- >
- Error: Analysis not loaded
- </p>
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "Error: Analysis not loaded",
+ }
+ }
+ />
  </li>
  </ul>
  </div>
@@ -305,9 +314,12 @@ exports[`the ContentAnalysis component without language notice matches the snaps
  />
  <p
  className="sc-ifAKCX cHWEpb"
- >
- Your text is bad, and you should feel bad.
- </p>
+ dangerouslySetInnerHTML={
+ Object {
+ "__html": "Your text is bad, and you should feel bad.",
+ }
+ }
+ />
  <button
  aria-label="Highlight this result in the text"
  aria-pressed={false}

package.json

@@ -1,6 +1,6 @@
 {
  "name": "yoast-components",
- "version": "2.11.0",
+ "version": "2.11.1",
  "description": "Yoast Generic Components",
  "homepage": "https://github.com/Yoast/",
  "main": "index.js",