From ca22b6b6e311bf4297e2fa5a99de00384baa1f04 Mon Sep 17 00:00:00 2001 From: Daniel Date: Fri, 11 May 2018 14:28:24 +0200 Subject: [PATCH 01/11] Fix the branching issue which caused reversal of code added to the file from the develop branch. --- composites/AlgoliaSearch/SearchResults.js | 30 +- .../Plugin/Shared/components/HelpText.js | 50 + .../tests/__snapshots__/HelpTextTest.js.snap | 29 + .../__snapshots__/SnippetEditorTest.js.snap | 9330 ++++++++++++----- .../components/SnippetPreview.js | 8 + .../__snapshots__/SnippetPreviewTest.js.snap | 3272 +++++- 6 files changed, 9537 insertions(+), 3182 deletions(-) create mode 100644 composites/Plugin/Shared/components/HelpText.js create mode 100644 composites/Plugin/Shared/tests/__snapshots__/HelpTextTest.js.snap diff --git a/composites/AlgoliaSearch/SearchResults.js b/composites/AlgoliaSearch/SearchResults.js index 281ed607..e2d14e23 100644 --- a/composites/AlgoliaSearch/SearchResults.js +++ b/composites/AlgoliaSearch/SearchResults.js @@ -1,28 +1,15 @@ +/* External dependencies */ import React from "react"; import PropTypes from "prop-types"; import { speak as a11ySpeak } from "@wordpress/a11y"; -import { injectIntl, intlShape, defineMessages } from "react-intl"; import styled from "styled-components"; +import { __, sprintf } from "@wordpress/i18n"; +/* Internal dependencies */ import { ZebrafiedListTable } from "../basic/Table/ListTable"; import { Row } from "../basic/Table/Row"; import colors from "../../style-guide/colors.json"; -const messages = defineMessages( { - noResultsText: { - id: "searchResult.noResultsText", - defaultMessage: "No results found.", - }, - foundResultsText: { - id: "searchResult.foundResultsText", - defaultMessage: "Number of results found: { resultsCount }", - }, - searchResultsHeading: { - id: "searchResult.searchResultsHeading", - defaultMessage: "Search results", - }, -} ); - /** * The title of the search result item. */ @@ -124,7 +111,7 @@ class SearchResults extends React.Component { * @returns {ReactElement} The no results found text. */ renderNoResultsFound() { - const noResultsText = this.props.intl.formatMessage( messages.noResultsText ); + const noResultsText = __( "No results found.", "yoast-components" ); a11ySpeak( noResultsText ); @@ -171,16 +158,14 @@ class SearchResults extends React.Component { return this.handleZeroResults(); } - const foundResultsText = this.props.intl.formatMessage( messages.foundResultsText, { - resultsCount: resultsCount, - } ); + const foundResultsText = sprintf( __( "Number of results found: %d", "yoast-components" ), resultsCount ); a11ySpeak( foundResultsText ); return (

- { this.props.intl.formatMessage( messages.searchResultsHeading ) } + { __( "Search results", "yoast-components" ) }

{ this.resultsToSearchItem( this.props.results ) } @@ -192,7 +177,6 @@ class SearchResults extends React.Component { } SearchResults.propTypes = { - intl: intlShape.isRequired, onClick: PropTypes.func.isRequired, searchString: PropTypes.string, results: PropTypes.array, @@ -203,4 +187,4 @@ SearchResults.defaultProps = { results: [], }; -export default injectIntl( SearchResults ); +export default SearchResults; diff --git a/composites/Plugin/Shared/components/HelpText.js b/composites/Plugin/Shared/components/HelpText.js new file mode 100644 index 00000000..0b4b371d --- /dev/null +++ b/composites/Plugin/Shared/components/HelpText.js @@ -0,0 +1,50 @@ +/* External dependencies */ +import React from "react"; +import PropTypes from "prop-types"; +import styled from "styled-components"; + +/* Internal dependencies */ +import colors from "../../../../style-guide/colors"; + +const YoastHelpText = styled.p` + color: ${ colors.$color_grey_text }; + font-size: 0.9em; +`; + +/** + * Returns the HelpText component. + * + * @param {Object} props Component props. + * + * @returns {ReactElement} HelpText component. + */ +export default class HelpText extends React.Component { + /** + * Renders a help text component. + * + * @returns {ReactElement} The rendered help text component. + */ + render() { + const { text } = this.props; + + return ( + + { text } + + ); + } +} + +/** + * React prop type for the help text. + * + * Use this in your components to pass along the text. + */ +export const HelpTextPropType = PropTypes.oneOfType( [ + PropTypes.string, + PropTypes.array, +] ); + +HelpText.propTypes = { + text: HelpTextPropType.isRequired, +}; diff --git a/composites/Plugin/Shared/tests/__snapshots__/HelpTextTest.js.snap b/composites/Plugin/Shared/tests/__snapshots__/HelpTextTest.js.snap new file mode 100644 index 00000000..95cd3e88 --- /dev/null +++ b/composites/Plugin/Shared/tests/__snapshots__/HelpTextTest.js.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`HelpText matches the snapshot by default 1`] = ` +.c0 { + color: #646464; + font-size: 0.9em; +} + +

+ Some help text. +

+`; + +exports[`HelpText matches the snapshot when an array is provided as text 1`] = ` +.c0 { + color: #646464; + font-size: 0.9em; +} + +

+ Text + <a href="https://www.example.com">with a link</a> + in the middle. +

+`; diff --git a/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap b/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap index 29967b5a..200edf3e 100644 --- a/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap +++ b/composites/Plugin/SnippetEditor/tests/__snapshots__/SnippetEditorTest.js.snap @@ -1,7 +1,149 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SnippetEditor accepts a custom data mapping function 1`] = ` +.c11 { + color: #646464; + font-size: 0.9em; +} + +.c7 { + color: #555; + border-color: #ccc; + background: #f7f7f7; + box-shadow: 0 1px 0 rgba( 204,204,204,1 ); +} + +.c2 { + font-size: 0.8rem; +} + +.c3:active { + box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 ); +} + +.c4:hover { + color: #000; +} + +.c5::-moz-focus-inner { + border-width: 0; +} + +.c5:focus { + outline: none; + border-color: #0066cd; + box-shadow: 0 0 3px rgba( 8,74,103,0.8 ); +} + +.c6 { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + vertical-align: middle; + border-width: 1px; + border-style: solid; + margin: 0; + padding: 4px 10px; + border-radius: 3px; + cursor: pointer; + box-sizing: border-box; + font-size: inherit; + font-family: inherit; + font-weight: inherit; + text-align: left; + overflow: visible; + min-height: 32px; +} + +.c6 svg { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} + +.c29 { + font-size: 0.8rem; + height: 33px; + border: 1px solid #dbdbdb; + box-shadow: none; + font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif; + margin: 10px 0 0 4px; + fill: #555; + padding-left: 8px; +} + +.c29 svg { + margin-right: 7px; +} + .c0 { + max-width: 600px; + padding: 1 0 3 1em; + font-weight: normal; + margin: 0px 20px 10px 25px; +} + +.c10 { + max-width: 400px; + display: block; + -webkit-transition: all 0.5s ease; + transition: all 0.5s ease; + overflow: hidden; + max-height: 0; +} + +.c1 { + min-width: 14px; + min-height: 14px; + width: 30px; + height: 30px; + border-radius: 50%; + border: none; + -webkit-clip: rect(1px 1px 1px 1px); + clip: rect(1px 1px 1px 1px); + box-shadow: 0 0 0 0px #5b9dd9; + position: relative; + display: block; + margin: -44px -10px 10px 0px; + background-color: transparent; + float: right; + padding: 2px 0px 2px 6px; +} + +.c1:hover { + color: #0066cd; +} + +.c1:focus { + border: 1px solid #0066cd; + outline: none; + box-shadow: 0 0 3px rgba( 8,74,103,0.8 ); +} + +.c1:focus svg { + fill: #0066cd; + color: #0066cd; +} + +.c8 { + vertical-align: center; + position: relative; +} + +.c8:hover { + fill: #0066cd; +} + +.c12 { border-bottom: 1px hidden #fff; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,.2); @@ -12,12 +154,12 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` font-size: 14px; } -.c2 { +.c14 { cursor: pointer; position: relative; } -.c4 { +.c16 { color: #1e0fbe; -webkit-text-decoration: none; text-decoration: none; @@ -32,13 +174,13 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` text-overflow: ellipsis; } -.c3 { +.c15 { max-width: 600px; vertical-align: top; text-overflow: ellipsis; } -.c5 { +.c17 { display: inline-block; line-height: 1.2em; max-height: 2.4em; @@ -47,7 +189,7 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` font-size: 16px; } -.c6 { +.c18 { display: inline-block; color: #006621; cursor: pointer; @@ -57,13 +199,13 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` font-size: 14px; } -.c7 { +.c19 { overflow: hidden; text-overflow: ellipsis; max-width: 100%; } -.c10 { +.c22 { color: #545454; cursor: pointer; position: relative; @@ -71,108 +213,29 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` font-size: 13px; } -.c9 { +.c21 { max-height: 4em; padding-bottom: 3px; } -.c11 { +.c23 { overflow: hidden; font-size: 14px; line-height: 20px; max-height: calc( 4em + 3px ); } -.c1 { +.c13 { padding: 8px 16px; } -.c8 { +.c20 { border: 0; border-bottom: 1px solid #DFE1E5; margin: 0; } -.c19 { - color: #555; - border-color: #ccc; - background: #f7f7f7; - box-shadow: 0 1px 0 rgba( 204,204,204,1 ); -} - -.c14 { - font-size: 0.8rem; -} - -.c15:active { - box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 ); -} - -.c16:hover { - color: #000; -} - -.c17::-moz-focus-inner { - border-width: 0; -} - -.c17:focus { - outline: none; - border-color: #0066cd; - box-shadow: 0 0 3px rgba( 8,74,103,0.8 ); -} - -.c18 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - vertical-align: middle; - border-width: 1px; - border-style: solid; - margin: 0; - padding: 4px 10px; - border-radius: 3px; - cursor: pointer; - box-sizing: border-box; - font-size: inherit; - font-family: inherit; - font-weight: inherit; - text-align: left; - overflow: visible; - min-height: 32px; -} - -.c18 svg { - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} - -.c23 { - font-size: 0.8rem; - height: 33px; - border: 1px solid #dbdbdb; - box-shadow: none; - font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif; - margin: 10px 0 0 4px; - fill: #555; - padding-left: 8px; -} - -.c23 svg { - margin-right: 7px; -} - -.c13 { +.c25 { border: none; border-bottom: 4px solid transparent; width: 31px; @@ -186,8 +249,8 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` border-radius: 3px 0 0 3px; } -.c13:hover, -.c13:focus { +.c25:hover, +.c25:focus { background-color: #fff; border: none; border-bottom: 4px solid transparent; @@ -196,7 +259,7 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` box-shadow: none; } -.c21 { +.c27 { border: none; border-bottom: 4px solid transparent; width: 31px; @@ -210,8 +273,8 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` border-radius: 0 3px 3px 0; } -.c21:hover, -.c21:focus { +.c27:hover, +.c27:focus { background-color: #fff; border: none; border-bottom: 4px solid transparent; @@ -220,7 +283,7 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` box-shadow: none; } -.c12 { +.c24 { display: inline-block; margin-top: 10px; margin-left: 20px; @@ -230,32 +293,32 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` vertical-align: top; } -.c20 { - width: 22px; - height: 22px; +.c9 { + width: 16px; + height: 16px; -webkit-flex: none; -ms-flex: none; flex: none; } -.c22 { - width: 18px; - height: 18px; +.c26 { + width: 22px; + height: 22px; -webkit-flex: none; -ms-flex: none; flex: none; } -.c24 { - width: 16px; - height: 16px; +.c28 { + width: 18px; + height: 18px; -webkit-flex: none; -ms-flex: none; flex: none; } @media all and ( -ms-high-contrast:none ),( -ms-high-contrast:active ) { - .c18::after { + .c6::after { display: inline-block; content: ""; min-height: 22px; @@ -264,13 +327,63 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = `
+
+
+ +
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Totally different title @@ -317,10 +430,10 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = ` Url preview:
Totally different description @@ -367,17 +480,17 @@ exports[`SnippetEditor accepts a custom data mapping function 1`] = `
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -1104,7 +1481,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1
Test description, %%replacement_variable%% @@ -1224,7 +1601,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 1 >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -2426,7 +3067,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2
Test description, %%replacement_variable%% @@ -2546,7 +3187,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 2 >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -3748,7 +4653,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3
Test description, %%replacement_variable%% @@ -3868,7 +4773,7 @@ exports[`SnippetEditor calls callbacks when the editors are focused or changed 3 >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -5070,7 +6239,7 @@ exports[`SnippetEditor closes when calling close() 1`] = `
Test description, %%replacement_variable%% @@ -5190,7 +6359,7 @@ exports[`SnippetEditor closes when calling close() 1`] = ` >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -6266,7 +7699,7 @@ exports[`SnippetEditor closes when calling close() 2`] = `
Test description, %%replacement_variable%% @@ -6386,7 +7819,7 @@ exports[`SnippetEditor closes when calling close() 2`] = ` >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -7371,7 +9068,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = `
Test description, %%replacement_variable%% @@ -7491,7 +9188,7 @@ exports[`SnippetEditor colored progress bars can handle a score of 6 1`] = ` >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -8725,7 +10686,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] =
Test description, %%replacement_variable%% @@ -8845,7 +10806,7 @@ exports[`SnippetEditor colored progress bars can handle scores of 3 and 9 1`] = >
+
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Test title @@ -9871,10 +11945,10 @@ exports[`SnippetEditor highlights a focused field 1`] = ` Url preview:
Test description, %%replacement_variable%% @@ -9921,17 +11995,17 @@ exports[`SnippetEditor highlights a focused field 1`] = `
+
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Test title @@ -10336,10 +12523,10 @@ exports[`SnippetEditor highlights a hovered field 1`] = ` Url preview:
Test description, %%replacement_variable%% @@ -10386,17 +12573,17 @@ exports[`SnippetEditor highlights a hovered field 1`] = `
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -11062,7 +13513,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call
Test description, %%replacement_variable%% @@ -11190,7 +13641,7 @@ exports[`SnippetEditor highlights the active ReplacementVariableEditor when call >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -12404,7 +15119,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called
Test description, %%replacement_variable%% @@ -12532,7 +15247,7 @@ exports[`SnippetEditor highlights the hovered field when onMouseOver() is called >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -13734,7 +16713,7 @@ exports[`SnippetEditor opens when calling open() 1`] = `
Test description, %%replacement_variable%% @@ -13854,7 +16833,7 @@ exports[`SnippetEditor opens when calling open() 1`] = ` >
+ + + + + + + + +
+ + Learn more about the Snippet Preview. + , + ] + } + > + +

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+ + +
+ +
+ + +
Test title @@ -15067,7 +18310,7 @@ exports[`SnippetEditor passes replacement variables to the title and description
Test description, %%replacement_variable%% @@ -15187,7 +18430,7 @@ exports[`SnippetEditor passes replacement variables to the title and description >
+
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Test title @@ -16177,10 +19533,10 @@ exports[`SnippetEditor passes the date prop 1`] = ` Url preview:
date string - @@ -16233,17 +19589,17 @@ exports[`SnippetEditor passes the date prop 1`] = `
+
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Test title @@ -16714,10 +20183,10 @@ exports[`SnippetEditor renders in desktop mode 1`] = ` Url preview:
+
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Test title @@ -17175,10 +20757,10 @@ exports[`SnippetEditor shows and editor 1`] = ` Url preview:
Test description, %%replacement_variable%% @@ -17225,17 +20807,17 @@ exports[`SnippetEditor shows and editor 1`] = `
+
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Title @@ -140,10 +333,10 @@ exports[`SnippetPreview changes the colors of the description if it was generate Url preview:
+
+
+ +
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Title @@ -327,10 +713,10 @@ exports[`SnippetPreview highlights keywords even if they are transliterated 1`] Url preview:
+
+
+ +
+

+ This is a rendering of what this post might look like in Google's search results. + + Learn more about the Snippet Preview. + +

+
+
+
Title @@ -517,10 +1096,10 @@ exports[`SnippetPreview highlights keywords inside the description and url 1`] = Url preview: