From a451f437adcf249b3f8cca3008eb49bc8bd9a0a4 Mon Sep 17 00:00:00 2001 From: Igor Date: Mon, 30 Apr 2018 10:35:42 +0200 Subject: [PATCH 1/7] Add shared HelpText component. --- .../Plugin/Shared/components/HelpText.js | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 composites/Plugin/Shared/components/HelpText.js diff --git a/composites/Plugin/Shared/components/HelpText.js b/composites/Plugin/Shared/components/HelpText.js new file mode 100644 index 00000000..6484c7fc --- /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, +}; From bed7453887de191e03c98e6d7e9510829a5444f7 Mon Sep 17 00:00:00 2001 From: Igor Date: Mon, 30 Apr 2018 10:36:06 +0200 Subject: [PATCH 2/7] Use HelpText in the ContentAnalysis. --- app/ContentAnalysisWrapper.js | 4 +++ .../components/ContentAnalysis.js | 34 ++++++++++++------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/app/ContentAnalysisWrapper.js b/app/ContentAnalysisWrapper.js index 91cb6dba..3b17fd20 100644 --- a/app/ContentAnalysisWrapper.js +++ b/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. ", + Learn more about the Content Analysis Tool., + ] } /> ); } diff --git a/composites/Plugin/ContentAnalysis/components/ContentAnalysis.js b/composites/Plugin/ContentAnalysis/components/ContentAnalysis.js index 76b1c001..5b4f6b61 100644 --- a/composites/Plugin/ContentAnalysis/components/ContentAnalysis.js +++ b/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 ( + { helpText && } { this.renderLanguageNotice() } { errorsFound > 0 && Date: Mon, 30 Apr 2018 10:46:06 +0200 Subject: [PATCH 3/7] Add tests. --- .../Plugin/Shared/tests/HelpTextTest.js | 28 ++++++++++++++++++ .../tests/__snapshots__/HelpTextTest.js.snap | 29 +++++++++++++++++++ 2 files changed, 57 insertions(+) create mode 100644 composites/Plugin/Shared/tests/HelpTextTest.js create mode 100644 composites/Plugin/Shared/tests/__snapshots__/HelpTextTest.js.snap diff --git a/composites/Plugin/Shared/tests/HelpTextTest.js b/composites/Plugin/Shared/tests/HelpTextTest.js new file mode 100644 index 00000000..bc28a023 --- /dev/null +++ b/composites/Plugin/Shared/tests/HelpTextTest.js @@ -0,0 +1,28 @@ +/* describe it */ + +/* External dependencies */ +import React from "react"; +import renderer from "react-test-renderer"; + +/* Internal dependencies */ +import HelpText from "../components/HelpText"; + +describe( "HelpText", () => { + it( "matches the snapshot by default", () => { + const component = renderer.create( + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "matches the snapshot when an array is provided as text", () => { + const component = renderer.create( + with a link", " in the middle." ] } /> + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); +} ); 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. +

+`; From bc5a0eeed79c42a9c6c1a21735229c373dfc3051 Mon Sep 17 00:00:00 2001 From: Igor Date: Mon, 30 Apr 2018 10:48:59 +0200 Subject: [PATCH 4/7] Remove global ident for eslint. --- composites/Plugin/Shared/tests/HelpTextTest.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/composites/Plugin/Shared/tests/HelpTextTest.js b/composites/Plugin/Shared/tests/HelpTextTest.js index bc28a023..1d4117d1 100644 --- a/composites/Plugin/Shared/tests/HelpTextTest.js +++ b/composites/Plugin/Shared/tests/HelpTextTest.js @@ -1,5 +1,3 @@ -/* describe it */ - /* External dependencies */ import React from "react"; import renderer from "react-test-renderer"; From c301a0b673006ecea4a8fcf5c91dee810b77c1b5 Mon Sep 17 00:00:00 2001 From: Igor Date: Mon, 30 Apr 2018 11:46:47 +0200 Subject: [PATCH 5/7] Add test to ContentAnalysis. --- .../tests/ContentAnalysisTest.js | 394 ++++++----- .../__snapshots__/ContentAnalysisTest.js.snap | 666 +++++++++++++++++- 2 files changed, 864 insertions(+), 196 deletions(-) diff --git a/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js b/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js index 4fb61cef..2cfb7699 100644 --- a/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js +++ b/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js @@ -53,199 +53,223 @@ const considerationsResults = [ }, ]; -test( "the ContentAnalysis component without language notice matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); +describe( "ContentAnalysis", () => { + it( "the ContentAnalysis component without language notice matches the snapshot", () => { + const component = createComponentWithIntl( + + ); -test( "the ContentAnalysis component without problems matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); -test( "the ContentAnalysis component without problems and improvements matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + it( "the ContentAnalysis component without problems matches the snapshot", () => { + const component = createComponentWithIntl( + + ); -test( "the ContentAnalysis component without problems, improvements and considerations matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); -test( "the ContentAnalysis component without problems and considerations, but with improvements and good matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + it( "the ContentAnalysis component without problems and improvements matches the snapshot", () => { + const component = createComponentWithIntl( + + ); -test( "the ContentAnalysis component with specified header level matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); -test( "the ContentAnalysis component with language notice matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + it( "the ContentAnalysis component without problems, improvements and considerations matches the snapshot", () => { + const component = createComponentWithIntl( + + ); -test( "the ContentAnalysis component with language notice for someone who can change the language matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); -test( "the ContentAnalysis component with language notice for someone who cannot change the language matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + it( "the ContentAnalysis component without problems and considerations, but with improvements and good matches the snapshot", () => { + const component = createComponentWithIntl( + + ); -test( "the ContentAnalysis component with disabled buttons matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); -} ); + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "the ContentAnalysis component with specified header level matches the snapshot", () => { + const component = createComponentWithIntl( + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "the ContentAnalysis component with language notice matches the snapshot", () => { + const component = createComponentWithIntl( + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "the ContentAnalysis component with language notice for someone who can change the language matches the snapshot", () => { + const component = createComponentWithIntl( + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "the ContentAnalysis component with language notice for someone who cannot change the language matches the snapshot", () => { + const component = createComponentWithIntl( + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "the ContentAnalysis component with disabled buttons matches the snapshot", () => { + const component = createComponentWithIntl( + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "the ContentAnalysis component with hidden buttons matches the snapshot", () => { + const component = createComponentWithIntl( + + ); + + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); + + it( "the ContentAnalysis component with HelpText matches the snapshot", () => { + const component = createComponentWithIntl( + with a link, + " and some more text.", + ] } + /> + ); -test( "the ContentAnalysis component with hidden buttons matches the snapshot", () => { - const component = createComponentWithIntl( - - ); - - let tree = component.toJSON(); - expect( tree ).toMatchSnapshot(); + let tree = component.toJSON(); + expect( tree ).toMatchSnapshot(); + } ); } ); diff --git a/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap b/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap index 528d4c75..8d43427b 100644 --- a/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap +++ b/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap @@ -1,6 +1,650 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`the ContentAnalysis component with disabled buttons matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component with HelpText matches the snapshot 1`] = ` +.c18 { + box-sizing: border-box; + min-width: 32px; + display: inline-block; + border: 1px solid #ccc; + background-color: #f7f7f7; + box-shadow: 0 1px 0 rgba( 204,204,204,0.7 ); + border-radius: 3px; + cursor: pointer; + padding: 0; + height: 24px; +} + +.c18:hover { + border-color: #fff; +} + +.c18:disabled { + background-color: #f7f7f7; + box-shadow: none; + border: none; + cursor: default; +} + +.c14 { + min-height: 24px; + padding: 0 4px 0 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +.c15 { + margin-top: 3px; + position: relative; + left: -1px; +} + +.c17 { + margin: 0 8px 0 11px; + -webkit-flex: 1 1 auto; + -ms-flex: 1 1 auto; + flex: 1 1 auto; +} + +.c10 { + color: #555; + border-color: #ccc; + background: #f7f7f7; + box-shadow: 0 1px 0 rgba( 204,204,204,1 ); +} + +.c5 { + font-size: 0.8rem; +} + +.c6:active { + box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 ); +} + +.c7:hover { + color: #000; +} + +.c8::-moz-focus-inner { + border-width: 0; +} + +.c8:focus { + outline: none; + border-color: #0066cd; + box-shadow: 0 0 3px rgba( 8,74,103,0.8 ); +} + +.c9 { + 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; +} + +.c9 svg { + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; +} + +.c2 { + background-color: #fff; +} + +.c12 { + white-space: nowrap; + text-overflow: ellipsis; + overflow-x: hidden; + -ms-flex-positive: 1; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + font-size: 1.03em; + font-weight: 600; +} + +.c3 { + margin: 0; + font-weight: normal; +} + +.c4 { + width: 100%; + background-color: #fff; + padding: 0; + border-color: transparent; + border-radius: 0; + outline: none; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + box-shadow: none; + color: #0066cd; +} + +.c4:hover { + border-color: transparent; + color: #0066cd; +} + +.c4:active { + box-shadow: none; + background-color: #fff; + color: #0066cd; +} + +.c4 svg { + margin: 0 8px 0 -5px; + padding-bottom: 2px; + width: 20px; + height: 20px; +} + +.c4 span { + margin: 8px 0; + word-wrap: break-word; + font-size: 1.25em; + line-height: 1.25; + font-weight: inherit; +} + +.c13 { + margin: 0; + list-style: none; + padding: 0 16px 0 0; +} + +.c1 { + color: #646464; + font-size: 0.9em; +} + +.c0 { + width: 100%; + background-color: white; + max-width: 800px; + margin: 0 auto; +} + +.c11 { + width: 16px; + height: 16px; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} + +.c16 { + width: 13px; + height: 13px; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} + +.c19 { + width: 18px; + height: 18px; + -webkit-flex: none; + -ms-flex: none; + flex: none; +} + +@media all and ( -ms-high-contrast:none ),( -ms-high-contrast:active ) { + .c9::after { + display: inline-block; + content: ""; + min-height: 22px; + } +} + +
+

+ This is a text to help you + + with a link + + and some more text. +

+
+

+ +

+
    +
  • + + + +

    +

    • +
+
+
+

+ +

+
    +
  • + + + +

    + +

    • +
+
+
+

+ +

+
    +
  • + + + +

    +

    • +
+
+
+

+ +

+
    +
  • + + + +

    +

    • +
+
+
+

+ +

+
    +
  • + + + +

    +

    • +
  • + + + +

    + +

    • +
+
+
+`; + +exports[`ContentAnalysis the ContentAnalysis component with disabled buttons matches the snapshot 1`] = ` .c18 { box-sizing: border-box; min-width: 32px; @@ -645,7 +1289,7 @@ exports[`the ContentAnalysis component with disabled buttons matches the snapsho `; -exports[`the ContentAnalysis component with hidden buttons matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component with hidden buttons matches the snapshot 1`] = ` .c14 { min-height: 24px; padding: 0 4px 0 0; @@ -1210,7 +1854,7 @@ exports[`the ContentAnalysis component with hidden buttons matches the snapshot `; -exports[`the ContentAnalysis component with language notice for someone who can change the language matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component with language notice for someone who can change the language matches the snapshot 1`] = ` .c3 { border: 0; -webkit-clip: rect(1px,1px,1px,1px); @@ -1891,7 +2535,7 @@ exports[`the ContentAnalysis component with language notice for someone who can `; -exports[`the ContentAnalysis component with language notice for someone who cannot change the language matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component with language notice for someone who cannot change the language matches the snapshot 1`] = ` .c3 { border: 0; -webkit-clip: rect(1px,1px,1px,1px); @@ -2572,7 +3216,7 @@ exports[`the ContentAnalysis component with language notice for someone who cann `; -exports[`the ContentAnalysis component with language notice matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component with language notice matches the snapshot 1`] = ` .c18 { box-sizing: border-box; min-width: 32px; @@ -3217,7 +3861,7 @@ exports[`the ContentAnalysis component with language notice matches the snapshot `; -exports[`the ContentAnalysis component with specified header level matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component with specified header level matches the snapshot 1`] = ` .c17 { box-sizing: border-box; min-width: 32px; @@ -3845,7 +4489,7 @@ exports[`the ContentAnalysis component with specified header level matches the s `; -exports[`the ContentAnalysis component without language notice matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component without language notice matches the snapshot 1`] = ` .c17 { box-sizing: border-box; min-width: 32px; @@ -4473,7 +5117,7 @@ exports[`the ContentAnalysis component without language notice matches the snaps `; -exports[`the ContentAnalysis component without problems and considerations, but with improvements and good matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component without problems and considerations, but with improvements and good matches the snapshot 1`] = ` .c17 { box-sizing: border-box; min-width: 32px; @@ -4947,7 +5591,7 @@ exports[`the ContentAnalysis component without problems and considerations, but `; -exports[`the ContentAnalysis component without problems and improvements matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component without problems and improvements matches the snapshot 1`] = ` .c17 { box-sizing: border-box; min-width: 32px; @@ -5421,7 +6065,7 @@ exports[`the ContentAnalysis component without problems and improvements matches `; -exports[`the ContentAnalysis component without problems matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component without problems matches the snapshot 1`] = ` .c17 { box-sizing: border-box; min-width: 32px; @@ -5960,7 +6604,7 @@ exports[`the ContentAnalysis component without problems matches the snapshot 1`] `; -exports[`the ContentAnalysis component without problems, improvements and considerations matches the snapshot 1`] = ` +exports[`ContentAnalysis the ContentAnalysis component without problems, improvements and considerations matches the snapshot 1`] = ` .c17 { box-sizing: border-box; min-width: 32px; From 01fea24a6a440ab7a487171c82db2cc26d669fea Mon Sep 17 00:00:00 2001 From: Igor Date: Mon, 30 Apr 2018 14:28:27 +0200 Subject: [PATCH 6/7] Fix style as per CR. --- .../Plugin/ContentAnalysis/components/ContentAnalysis.js | 2 +- composites/Plugin/Shared/components/HelpText.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/composites/Plugin/ContentAnalysis/components/ContentAnalysis.js b/composites/Plugin/ContentAnalysis/components/ContentAnalysis.js index 5b4f6b61..2936f00a 100644 --- a/composites/Plugin/ContentAnalysis/components/ContentAnalysis.js +++ b/composites/Plugin/ContentAnalysis/components/ContentAnalysis.js @@ -226,7 +226,7 @@ class ContentAnalysis extends React.Component { // Analysis collapsibles are only rendered when there is at least one analysis result for that category present. return ( - { helpText && } + { helpText && } { this.renderLanguageNotice() } { errorsFound > 0 && - {text} + { text } ); } From c69fff5d63e1df6ddb2cd65a8d83b3c481e79207 Mon Sep 17 00:00:00 2001 From: Igor Date: Mon, 30 Apr 2018 14:28:37 +0200 Subject: [PATCH 7/7] Fix test as per CR. --- .../tests/ContentAnalysisTest.js | 2 +- .../__snapshots__/ContentAnalysisTest.js.snap | 196 +++++++----------- 2 files changed, 81 insertions(+), 117 deletions(-) diff --git a/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js b/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js index 2cfb7699..a3c6dc2b 100644 --- a/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js +++ b/composites/Plugin/ContentAnalysis/tests/ContentAnalysisTest.js @@ -205,7 +205,7 @@ describe( "ContentAnalysis", () => { changeLanguageLink={ "#" } language="English" showLanguageNotice={ true } - canChangeLanguage={ true } + canChangeLanguage={ false } /> ); diff --git a/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap b/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap index 8d43427b..5e96d239 100644 --- a/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap +++ b/composites/Plugin/ContentAnalysis/tests/__snapshots__/ContentAnalysisTest.js.snap @@ -2536,25 +2536,7 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for `; exports[`ContentAnalysis the ContentAnalysis component with language notice for someone who cannot change the language matches the snapshot 1`] = ` -.c3 { - border: 0; - -webkit-clip: rect(1px,1px,1px,1px); - clip: rect(1px,1px,1px,1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px; - word-wrap: normal !important; - -webkit-transform: translateY(1em); - -ms-transform: translateY(1em); - transform: translateY(1em); -} - -.c20 { +.c18 { box-sizing: border-box; min-width: 32px; display: inline-block; @@ -2567,18 +2549,18 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for height: 24px; } -.c20:hover { +.c18:hover { border-color: #fff; } -.c20:disabled { +.c18:disabled { background-color: #f7f7f7; box-shadow: none; border: none; cursor: default; } -.c16 { +.c14 { min-height: 24px; padding: 0 4px 0 0; display: -webkit-box; @@ -2591,49 +2573,49 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for align-items: flex-start; } -.c17 { +.c15 { margin-top: 3px; position: relative; left: -1px; } -.c19 { +.c17 { margin: 0 8px 0 11px; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } -.c12 { +.c10 { color: #555; border-color: #ccc; background: #f7f7f7; box-shadow: 0 1px 0 rgba( 204,204,204,1 ); } -.c7 { +.c5 { font-size: 0.8rem; } -.c8:active { +.c6:active { box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 ); } -.c9:hover { +.c7:hover { color: #000; } -.c10::-moz-focus-inner { +.c8::-moz-focus-inner { border-width: 0; } -.c10:focus { +.c8:focus { outline: none; border-color: #0066cd; box-shadow: 0 0 3px rgba( 8,74,103,0.8 ); } -.c11 { +.c9 { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; @@ -2662,17 +2644,17 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for min-height: 32px; } -.c11 svg { +.c9 svg { -webkit-align-self: center; -ms-flex-item-align: center; align-self: center; } -.c4 { +.c2 { background-color: #fff; } -.c14 { +.c12 { white-space: nowrap; text-overflow: ellipsis; overflow-x: hidden; @@ -2685,12 +2667,12 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for font-weight: 600; } -.c5 { +.c3 { margin: 0; font-weight: normal; } -.c6 { +.c4 { width: 100%; background-color: #fff; padding: 0; @@ -2705,25 +2687,25 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for color: #0066cd; } -.c6:hover { +.c4:hover { border-color: transparent; color: #0066cd; } -.c6:active { +.c4:active { box-shadow: none; background-color: #fff; color: #0066cd; } -.c6 svg { +.c4 svg { margin: 0 8px 0 -5px; padding-bottom: 2px; width: 20px; height: 20px; } -.c6 span { +.c4 span { margin: 8px 0; word-wrap: break-word; font-size: 1.25em; @@ -2731,7 +2713,7 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for font-weight: inherit; } -.c15 { +.c13 { margin: 0; list-style: none; padding: 0 16px 0 0; @@ -2750,12 +2732,7 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for margin-left: 24px; } -.c2 { - color: #0066cd; - margin-left: 4px; -} - -.c13 { +.c11 { width: 16px; height: 16px; -webkit-flex: none; @@ -2763,7 +2740,7 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for flex: none; } -.c18 { +.c16 { width: 13px; height: 13px; -webkit-flex: none; @@ -2771,7 +2748,7 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for flex: none; } -.c21 { +.c19 { width: 18px; height: 18px; -webkit-flex: none; @@ -2780,7 +2757,7 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for } @media all and ( -ms-high-contrast:none ),( -ms-high-contrast:active ) { - .c11::after { + .c9::after { display: inline-block; content: ""; min-height: 22px; @@ -2798,37 +2775,24 @@ exports[`ContentAnalysis the ContentAnalysis component with language notice for English - . + . If this is not correct, contact your site administrator. - - Change language - - (Opens in a new browser tab) - -