diff --git a/apps/components/ComponentsExample.js b/apps/components/ComponentsExample.js
index 5a450da704..f5947a0a02 100644
--- a/apps/components/ComponentsExample.js
+++ b/apps/components/ComponentsExample.js
@@ -1,6 +1,6 @@
import { __ } from "@wordpress/i18n";
-import { Alert, CourseDetails, FullHeightCard, Warning } from "@yoast/components";
+import { Alert, CourseDetails, FullHeightCard, StarRating, Warning } from "@yoast/components";
import { getCourseFeed, getDirectionalStyle, makeOutboundLink } from "@yoast/helpers";
import React from "react";
import styled from "styled-components";
@@ -138,6 +138,12 @@ export default class ComponentsExample extends React.Component {
;
}
+ updateStars( event ) {
+ this.setState({
+ input: event.target.value
+ } );
+ }
+
/**
* Renders all the Component examples.
*
@@ -171,6 +177,9 @@ export default class ComponentsExample extends React.Component {
This spans to multiple lines.
,
] }
/>
+ Star rating
+ Accepts a rating from 0-5 and colors the stars yellow accordingly
+
Outbound links
example.org
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index aa2a3aa480..7cda53acca 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -13,6 +13,7 @@ export * from "./inputs";
export * from "./insights-card";
export * from "./radiobutton";
export * from "./select";
+export * from "./star-rating";
export * from "./help-icon";
export * from "./tables";
diff --git a/packages/components/src/star-rating/StarRating.js b/packages/components/src/star-rating/StarRating.js
new file mode 100644
index 0000000000..a763b36e66
--- /dev/null
+++ b/packages/components/src/star-rating/StarRating.js
@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Renders StarRating component.
+ *
+ * @param {Object} props The props.
+ *
+ * @returns {React.Component} The StarRating Component displays a number between 0 and 5 as (partly) colored stars.
+ */
+function StarRating( props ) {
+ let rating = props.rating;
+
+ // As we have 5 stars, the rating should be between 0 and 5.
+ if ( rating < 0 ) {
+ rating = 0;
+ }
+
+ if ( rating > 5 ) {
+ rating = 5;
+ }
+
+ const ratingPercentage = rating * 20;
+
+ return (
+
+
+
+
+
+ );
+}
+
+export default StarRating;
+
+StarRating.propTypes = {
+ rating: PropTypes.number.isRequired,
+};
diff --git a/packages/components/src/star-rating/index.js b/packages/components/src/star-rating/index.js
new file mode 100644
index 0000000000..de1e9a1feb
--- /dev/null
+++ b/packages/components/src/star-rating/index.js
@@ -0,0 +1,3 @@
+import "./star-rating.css";
+
+export { default as StarRating } from "./StarRating.js";
diff --git a/packages/components/src/star-rating/star-rating.css b/packages/components/src/star-rating/star-rating.css
new file mode 100644
index 0000000000..a8874624a3
--- /dev/null
+++ b/packages/components/src/star-rating/star-rating.css
@@ -0,0 +1,24 @@
+.yoast-star-rating {
+ width: 65px;
+ height: 12px;
+ display: inline-block;
+}
+
+.yoast-star-rating span {
+ height: 100%;
+ width: 100%;
+ background-size: 13px 12px;
+ background-repeat: repeat-x;
+}
+
+.yoast-star-rating__placeholder {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAmCAQAAAAYCMGrAAAA+klEQVR4AcWV4cbtMBBFF0MIVUopoVSrhDDv/3gf/RFRpzdNOty1HiBO99mzeYWgCMZMKCPGrCgrxiSUhCkDeukxJKCXAUMiehkxw6FZhxEzmp0x4kCzByYISqlYdal0supS6WrVpdLEK0YSamJiJOPY0c/uOG4s6CcXfuKJaJcRzyNCQJsNiF1sRTR1hP11NNJ8RCrONOPRf+r7J+TZgQ5CNfMOYvW/2YxDqzqA/57+gVY9eiakrnyZEGXDsaE3p/4JScwPX3rtnZATDxnPWT7X16XAHaH8HWNrlxJD9TyGti5tCM84zpZe+RxNjeX9tZqLaGoMxN/P/wHP5Vw+8ZxnEQAAAABJRU5ErkJggg==);
+ display: inline-block;
+ overflow: hidden;
+ position: relative;
+}
+
+.yoast-star-rating__fill {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAmBAMAAABALxQTAAAAFVBMVEVMaXH4twP4twP4twP4twP4twP4twP7w8S/AAAAB3RSTlMAFv5uPpvQloUsTQAAAMFJREFUeAGE0TEOgzAMQFEXoDNiYC6/wFxxAsTADDkB5f6HqNRENXUi8TYiRfnY8lNXkjBOkuBWSeAhsYJOYiW9xO4MEqshkTbCSyIH7GLdgFasHHgmwkikZQD6OROZRG4Hxju8o/TNhbNhCqkOxaZDVKdxNnq/EjUS/A2o0PuXpyVeb9bjDWY9QSWXDQfBbtbjtWY9bM4sqfx+5yYt8wNcAFEzrGGkk5668KsFrKewPtQ3aFqh8WOnYZ+lIBQkgykAWk8rlAqcHfQAAAAASUVORK5CYII=);
+ display: block;
+}
diff --git a/packages/search-metadata-previews/src/index.js b/packages/search-metadata-previews/src/index.js
index 93e159e089..f6eab82630 100644
--- a/packages/search-metadata-previews/src/index.js
+++ b/packages/search-metadata-previews/src/index.js
@@ -1,7 +1,7 @@
// Snippet preview exports.
export { default as FixedWidthContainer } from "./snippet-preview/FixedWidthContainer";
export { default as HelpTextWrapper } from "./snippet-preview/HelpTextWrapper";
-export { default as SnippetPreview } from "./snippet-preview/SnippetPreview";
+export * from "./snippet-preview/SnippetPreview";
// Snippet editor exports.
export {
diff --git a/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js b/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
index 37fdca9c44..3e728a17d0 100644
--- a/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
+++ b/packages/search-metadata-previews/src/snippet-editor/SnippetEditor.js
@@ -518,6 +518,7 @@ class SnippetEditor extends React.Component {
faviconSrc,
mobileImageSrc,
idSuffix,
+ shoppingData,
} = this.props;
const {
@@ -556,6 +557,7 @@ class SnippetEditor extends React.Component {
locale={ locale }
faviconSrc={ faviconSrc }
mobileImageSrc={ mobileImageSrc }
+ shoppingData={ shoppingData }
{ ...mappedData }
/>
@@ -601,6 +603,7 @@ SnippetEditor.propTypes = {
faviconSrc: PropTypes.string,
mobileImageSrc: PropTypes.string,
idSuffix: PropTypes.string,
+ shoppingData: PropTypes.object,
};
SnippetEditor.defaultProps = {
@@ -629,6 +632,7 @@ SnippetEditor.defaultProps = {
faviconSrc: "",
mobileImageSrc: "",
idSuffix: "",
+ shoppingData: {},
};
export default SnippetEditor;
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
new file mode 100644
index 0000000000..4db094cf29
--- /dev/null
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataDesktop.js
@@ -0,0 +1,57 @@
+import React, { Fragment } from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { __, sprintf } from "@wordpress/i18n";
+import { round } from "lodash";
+import { StarRating } from "@yoast/components";
+
+const ProductData = styled.span`
+ color: #70757a;
+`;
+
+/**
+ * Renders ProductData component.
+ *
+ * @param {Object} props The props.
+ *
+ * @returns {React.Component} The StarRating Component.
+ */
+function ProductDataDesktop( props ) {
+ const { shoppingData } = props;
+
+ /* Translators: %s expands to the actual rating, e.g. 8/10. */
+ const ratingPart = sprintf( __( "Rating: %s", "yoast-components" ), round( ( shoppingData.rating * 2 ), 1 ) + "/10" );
+
+ /* Translators: %s expands to the review count. */
+ const reviewPart = sprintf( __( "%s reviews", "yoast-components" ), shoppingData.reviewCount );
+
+ return (
+
+ { ( shoppingData.reviewCount > 0 ) &&
+
+
+ { ratingPart } ·
+ { reviewPart } ·
+
+ }
+ { shoppingData.price &&
+
+
+
+ }
+ { shoppingData.availability &&
+ · { shoppingData.availability } }
+
+ );
+}
+
+export default ProductDataDesktop;
+
+ProductDataDesktop.propTypes = {
+ shoppingData: PropTypes.shape( {
+ rating: PropTypes.number,
+ reviewCount: PropTypes.number,
+ availability: PropTypes.string,
+ price: PropTypes.string,
+ } ).isRequired,
+};
diff --git a/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
new file mode 100644
index 0000000000..f1a6e644aa
--- /dev/null
+++ b/packages/search-metadata-previews/src/snippet-preview/ProductDataMobile.js
@@ -0,0 +1,79 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { __ } from "@wordpress/i18n";
+import { round } from "lodash";
+
+import { StarRating } from "@yoast/components";
+
+const ProductData = styled.div`
+ display: flex;
+`;
+
+const ProductDataCell50 = styled.div`
+ flex: 1;
+ max-width: 50%;
+`;
+
+const ProductDataCell25 = styled.div`
+ flex: 1;
+ max-width: 25%;
+`;
+
+const ProductDataInnerLower = styled.div`
+ color: #70757a;
+`;
+
+/**
+ * Renders ProductData component.
+ *
+ * @param {Object} props The props.
+ *
+ * @returns {React.Component} The StarRating Component.
+ */
+function ProductDataMobile( props ) {
+ const { shoppingData } = props;
+
+ return (
+
+ { ( shoppingData.rating > 0 ) &&
+
+ { __( "Rating", "yoast-components" ) }
+
+ { round( ( shoppingData.rating * 2 ), 1 ) }/10
+
+ ({ shoppingData.reviewCount })
+
+
+ }
+ { ( shoppingData.price ) &&
+
+ { __( "Price", "yoast-components" ) }
+
+
+ }
+ { ( shoppingData.availability ) &&
+
+ { __( "Availability", "yoast-components" ) }
+
+ { shoppingData.availability }
+
+
+ }
+
+ );
+}
+
+export default ProductDataMobile;
+
+ProductDataMobile.propTypes = {
+ shoppingData: PropTypes.shape( {
+ rating: PropTypes.number,
+ reviewCount: PropTypes.number,
+ availability: PropTypes.string,
+ price: PropTypes.string,
+ } ).isRequired,
+};
diff --git a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
index 6b83953b1a..9ad2c1de9b 100644
--- a/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
+++ b/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js
@@ -21,6 +21,8 @@ const {
// Internal dependencies.
import FixedWidthContainer from "./FixedWidthContainer";
+import ProductDataDesktop from "./ProductDataDesktop";
+import ProductDataMobile from "./ProductDataMobile";
import { DEFAULT_MODE, MODE_DESKTOP, MODE_MOBILE, MODES } from "./constants";
/*
@@ -722,6 +724,37 @@ export default class SnippetPreview extends PureComponent {
return null;
}
+ /**
+ * Renders the product / shopping data, in mobile or desktop view, based on the mode.
+ *
+ * @returns {ReactElement} The rendered description.
+ */
+ renderProductData() {
+ const { mode, shoppingData } = this.props;
+
+ if ( Object.values( shoppingData ).length === 0 ) {
+ return null;
+ }
+
+ if ( mode === MODE_DESKTOP ) {
+ return (
+
+ );
+ }
+
+ if ( mode === MODE_MOBILE ) {
+ return (
+
+ );
+ }
+
+ return null;
+ }
+
/**
* Renders the snippet preview.
*
@@ -783,12 +816,24 @@ export default class SnippetPreview extends PureComponent {
{ amp }
+
+
+ { __( "Shopping data preview:", "yoast-components" ) }
+
+ { isDesktopMode && this.renderProductData() }
+
- { __( "Meta description preview", "yoast-components" ) + ":" }
+ { __( "Meta description preview:", "yoast-components" ) }
{ this.renderDescription() }
+
+
+ { __( "Shopping data preview:", "yoast-components" ) }
+
+ { ! isDesktopMode && this.renderProductData() }
+
);
@@ -837,6 +882,7 @@ SnippetPreview.propTypes = {
isAmp: PropTypes.bool,
faviconSrc: PropTypes.string,
mobileImageSrc: PropTypes.string,
+ shoppingData: PropTypes.object,
onMouseUp: PropTypes.func.isRequired,
onHover: PropTypes.func,
@@ -856,6 +902,7 @@ SnippetPreview.defaultProps = {
isAmp: false,
faviconSrc: "",
mobileImageSrc: "",
+ shoppingData: {},
onHover: () => {},
onMouseEnter: () => {},
diff --git a/packages/search-metadata-previews/tests/SnippetEditorTest.js b/packages/search-metadata-previews/tests/SnippetEditorTest.js
index aaf38dbb00..1c6c8883b3 100644
--- a/packages/search-metadata-previews/tests/SnippetEditorTest.js
+++ b/packages/search-metadata-previews/tests/SnippetEditorTest.js
@@ -1,8 +1,6 @@
import SnippetEditor from "../src/snippet-editor/SnippetEditor";
import React from "react";
-import renderer from "react-test-renderer";
-import { mount, shallow } from "enzyme";
-import { MODE_DESKTOP } from "../src/snippet-preview/constants";
+import { mount } from "enzyme";
import { focus } from "@yoast/replacement-variable-editor";
const defaultData = {
@@ -18,21 +16,6 @@ const defaultArgs = {
};
-/**
- * Renders a snapshot with changed arguments.
- *
- * @param {Object} changedArgs The changed arguments.
- *
- * @returns {void}
- */
-const renderSnapshotWithArgs = ( changedArgs ) => {
- const args = { ...defaultArgs, ...changedArgs };
- const tree = renderer.create( , { locale: "en" } )
- .toJSON();
-
- expect( tree ).toMatchSnapshot();
-};
-
/**
* Mounts the snippet editor component with changed arguments.
*
@@ -45,85 +28,7 @@ const mountWithArgs = ( changedArgs ) => {
return mount( );
};
-/**
- * Shallow render of the snippet editor component with changed arguments.
- *
- * @param {Object} changedArgs The changed arguments.
- *
- * @returns {ReactElement} The SnippetEditor component.
- */
-const shallowWithArgs = ( changedArgs ) => {
- const args = { ...defaultArgs, ...changedArgs };
- return shallow( );
-};
-
-
describe( "SnippetEditor", () => {
- it( "shows the editor", () => {
- renderSnapshotWithArgs( {} );
- } );
-
- it( "highlights a hovered field", () => {
- renderSnapshotWithArgs( { hoveredField: "title" } );
- } );
-
- it( "highlights a focused field", () => {
- renderSnapshotWithArgs( { activeField: "slug" } );
- } );
-
- it( "renders in desktop mode", () => {
- renderSnapshotWithArgs( { mode: MODE_DESKTOP } );
- } );
-
- it( "passes the date prop", () => {
- renderSnapshotWithArgs( { date: "date string" } );
- } );
-
- it( "renders the snippet editor without a close button when showCloseButton is false", () => {
- renderSnapshotWithArgs( { showCloseButton: false } );
- } );
-
- it( "accepts a custom data mapping function", () => {
- const mapper = jest.fn( () => {
- return {
- title: "Totally different title",
- url: "http://example.org/totally-different-url",
- description: "Totally different description",
- };
- } );
- const defaultMappedData = {
- title: "Test title",
- url: "http://example.org/test-slug",
- description: "Test description, replacement value",
- };
- const context = {
- shortenedBaseUrl: "example.org/",
- };
- const replacementVariables = [
- {
- name: "replacement_variable",
- value: "replacement value",
- description: "replacement value",
- label: "replacement value",
- },
- ];
-
- renderSnapshotWithArgs( { mapEditorDataToPreview: mapper, replacementVariables } );
-
- // The mapper is called both in the constructor, as well as the render function.
- expect( mapper ).toHaveBeenCalledTimes( 2 );
- expect( mapper ).toHaveBeenCalledWith( defaultMappedData, context );
- } );
-
- it( "opens when calling open()", () => {
- const editor = mountWithArgs( {} );
-
- editor.instance().open();
- editor.update();
-
- expect( editor ).toMatchSnapshot();
- } );
-
it( "closes when calling close()", () => {
focus.mockClear();
const editor = mountWithArgs( {} );
@@ -133,36 +38,6 @@ describe( "SnippetEditor", () => {
editor.instance().setFieldFocus( "title" );
expect( focus ).toHaveBeenCalledTimes( 1 );
-
- expect( editor ).toMatchSnapshot();
-
- editor.instance().close();
- editor.update();
-
- expect( editor ).toMatchSnapshot();
- } );
-
- it( "highlights the hovered field when onMouseEnter() is called", () => {
- const editor = mountWithArgs( {} );
-
- editor.instance().open();
- editor.instance().onMouseEnter( "description" );
- editor.update();
-
- expect( editor ).toMatchSnapshot();
- } );
-
- it( "removes the highlight from the hovered field on calling onMouseLeave()", () => {
- const editor = shallowWithArgs( {} );
-
- editor.instance().open();
- editor.instance().onMouseEnter( "description" );
- editor.update();
-
- editor.instance().onMouseLeave( "description" );
- editor.update();
-
- expect( editor ).toMatchSnapshot();
} );
it( "highlights the active ReplacementVariableEditor when calling setFieldFocus", () => {
@@ -176,31 +51,6 @@ describe( "SnippetEditor", () => {
editor.update();
expect( focus ).toHaveBeenCalledTimes( 2 );
- expect( editor ).toMatchSnapshot();
- } );
-
- it( "removes the highlight when calling unsetFieldFocus", () => {
- focus.mockClear();
-
- const editor = mountWithArgs( {} );
-
- editor.instance().open();
- editor.instance().setFieldFocus( "title" );
- editor.update();
-
- editor.instance().unsetFieldFocus();
- editor.update();
-
- expect( editor ).toMatchSnapshot();
- } );
-
- it( "activates a field on onMouseUp() and opens the editor", () => {
- const editor = shallowWithArgs( {} );
-
- editor.instance().onMouseUp( "title" );
- editor.update();
-
- expect( editor ).toMatchSnapshot();
} );
it( "switches modes when changing mode switcher input", () => {
@@ -218,67 +68,6 @@ describe( "SnippetEditor", () => {
expect( onChange ).toBeCalledWith( "mode", "desktop" );
} );
- it( "passes replacement variables to the title and description editor", () => {
- const editor = mountWithArgs( {
- replacementVariables: [
- {
- name: "title",
- value: "Title!!!",
- label: "Title",
- description: "Title",
- },
- {
- name: "excerpt",
- value: "Excerpt!!!",
- label: "Excerpt",
- description: "Excerpt",
- },
- ],
- } );
-
- editor.instance().open();
- editor.update();
-
- expect( editor ).toMatchSnapshot();
- } );
-
- describe( "colored progress bars", () => {
- it( "can handle scores of 3 and 9", () => {
- const editor = mountWithArgs( {
- titleLengthProgress: {
- max: 550,
- actual: 100,
- score: 3,
- },
- descriptionLengthProgress: {
- max: 650,
- actual: 330,
- score: 9,
- },
- } );
-
- editor.instance().open();
- editor.update();
-
- expect( editor ).toMatchSnapshot();
- } );
-
- it( "can handle a score of 6", () => {
- const editor = mountWithArgs( {
- titleLengthProgress: {
- max: 550,
- actual: 361,
- score: 6,
- },
- } );
-
- editor.instance().open();
- editor.update();
-
- expect( editor ).toMatchSnapshot();
- } );
- } );
-
describe( "shallowCompareData", () => {
it( "returns false when there is no new data", () => {
const editor = mountWithArgs( {} );
diff --git a/packages/search-metadata-previews/tests/SnippetPreviewTest.js b/packages/search-metadata-previews/tests/SnippetPreviewTest.js
index e49c73bbfb..1f0910e608 100644
--- a/packages/search-metadata-previews/tests/SnippetPreviewTest.js
+++ b/packages/search-metadata-previews/tests/SnippetPreviewTest.js
@@ -1,6 +1,5 @@
import { mount } from "enzyme";
import React from "react";
-import renderer from "react-test-renderer";
import { MODE_DESKTOP, MODE_MOBILE } from "../src/snippet-preview/constants";
import SnippetPreview from "../src/snippet-preview/SnippetPreview";
@@ -12,21 +11,6 @@ const defaultArgs = {
onMouseUp: jest.fn(),
};
-/**
- * Renders a snippet preview snapshot with changed arguments.
- *
- * @param {Object} changedArgs The changed arguments.
- *
- * @returns {void}
- */
-const renderSnapshotWithArgs = ( changedArgs ) => {
- const args = { ...defaultArgs, ...changedArgs };
- const tree = renderer.create( )
- .toJSON();
-
- expect( tree ).toMatchSnapshot();
-};
-
/**
* Mounts a snippet preview component with changed arguments.
*
@@ -44,83 +28,6 @@ const mountWithArgs = ( props ) => {
};
describe( "SnippetPreview", () => {
- it( "renders a SnippetPreview in the default mode", () => {
- renderSnapshotWithArgs( {
- // eslint-disable-next-line no-undefined
- mode: undefined,
- } );
- } );
-
- it( "renders a SnippetPreview that looks like Google", () => {
- renderSnapshotWithArgs( {} );
- } );
-
- it( "shows the date if a date is passed", () => {
- renderSnapshotWithArgs( { date: "Today" } );
- } );
-
- it( "changes the colors of the description if it was generated", () => {
- renderSnapshotWithArgs( { isDescriptionPlaceholder: true } );
- } );
-
- it( "renders a caret on hover", () => {
- renderSnapshotWithArgs( { hoveredField: "title" } );
- renderSnapshotWithArgs( { hoveredField: "description" } );
- renderSnapshotWithArgs( { hoveredField: "url" } );
- } );
-
- it( "renders a caret on activation", () => {
- renderSnapshotWithArgs( { activeField: "title" } );
- renderSnapshotWithArgs( { activeField: "description" } );
- renderSnapshotWithArgs( { activeField: "url" } );
- } );
-
- describe( "highlights keyphrase in desktop mode", () => {
- it( "highlights keywords inside the description and url", () => {
- renderSnapshotWithArgs( {
- mode: MODE_DESKTOP,
- description: "Something with a keyword",
- url: "https://example.org/this-keyword-url",
- wordsToHighlight: [ "keyword" ],
- } );
- } );
-
- it( "highlights keywords even if they are transliterated", () => {
- renderSnapshotWithArgs( {
- mode: MODE_DESKTOP,
- description: "Something with a transliterated kaayword",
- wordsToHighlight: [ "kåyword" ],
- locale: "da_DK",
- } );
- } );
-
- it( "highlights a keyword in different morphological forms", () => {
- renderSnapshotWithArgs( {
- mode: MODE_DESKTOP,
- description: "She runs every day and every run is longer than the previous. Running makes her happy.",
- wordsToHighlight: [ "run", "runs", "running" ],
- } );
- } );
-
- it( "highlights separate words from the keyphrase", () => {
- renderSnapshotWithArgs( {
- mode: MODE_DESKTOP,
- description: "She runs every day and every run is longer than the previous. Running makes her happy.",
- wordsToHighlight: [ "run", "runs", "running", "every" ],
- } );
- } );
- } );
-
- describe( "mobile mode", () => {
- it( "renders differently than desktop", () => {
- renderSnapshotWithArgs( { mode: MODE_MOBILE } );
- } );
-
- it( "renders an AMP logo when isAmp is true", () => {
- renderSnapshotWithArgs( { mode: MODE_MOBILE, isAmp: true } );
- } );
- } );
-
describe( "breadcrumbs", () => {
it( "properly renders multiple breadcrumbs in mobile view", () => {
const wrapper = mountWithArgs( { mode: MODE_MOBILE, url: "http://www.google.nl/about" } );
diff --git a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap b/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
deleted file mode 100644
index 60ce6b5028..0000000000
--- a/packages/search-metadata-previews/tests/__snapshots__/SnippetEditorTest.js.snap
+++ /dev/null
@@ -1,23783 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SnippetEditor accepts a custom data mapping function 1`] = `
-.c4 {
- border-bottom: 1px hidden #fff;
- border-radius: 8px;
- box-shadow: 0 1px 6px rgba(32,33,36,0.28);
- font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
- max-width: 400px;
- box-sizing: border-box;
- font-size: 14px;
-}
-
-.c11 {
- cursor: pointer;
- position: relative;
-}
-
-.c12 {
- color: #1967d2;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-size: 16px;
- line-height: 20px;
- font-weight: normal;
- margin: 0;
- display: inline-block;
- overflow: hidden;
- max-width: 600px;
- vertical-align: top;
- text-overflow: ellipsis;
- max-width: 600px;
- vertical-align: top;
- text-overflow: ellipsis;
-}
-
-.c13 {
- display: inline-block;
- max-height: 40px;
- padding-top: 1px;
- vertical-align: top;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.c6 {
- display: inline-block;
- cursor: pointer;
- position: relative;
- max-width: 90%;
- white-space: nowrap;
- font-size: 14px;
- vertical-align: top;
-}
-
-.c7 {
- display: inline-block;
- cursor: pointer;
- position: relative;
- max-width: 90%;
- white-space: nowrap;
- font-size: 14px;
- vertical-align: top;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 100%;
- margin-bottom: 12px;
- padding-top: 1px;
- line-height: 20px;
- vertical-align: top;
-}
-
-.c9 {
- font-size: 12px;
- line-height: 20px;
- color: #3c4043;
-}
-
-.c10 {
- color: #3c4043;
-}
-
-.c14 {
- color: #3c4043;
- font-size: 14px;
- line-height: 20px;
- cursor: pointer;
- position: relative;
- max-width: 600px;
-}
-
-.c14:after {
- display: table;
- content: "";
- clear: both;
-}
-
-.c5 {
- padding: 12px 16px;
-}
-
-.c5:first-child {
- margin-bottom: -16px;
-}
-
-.c8 {
- width: 16px;
- height: 16px;
- margin-right: 12px;
- vertical-align: middle;
-}
-
-.c0 {
- border: 0;
- padding: 0;
- margin: 0 0 16px;
-}
-
-.c1 {
- margin: 8px 0;
- padding: 0;
- color: #555;
- font-size: 14px;
- font-weight: 600;
-}
-
-.c3 {
- margin-right: 16px;
- color: inherit;
- font-size: 14px;
- line-height: 1.71428571;
- cursor: pointer;
- display: inline-block;
-}
-
-.c2.c2 {
- margin: 0 8px 0 0;
- cursor: pointer;
-}
-
-.c15 {
- color: #555;
- border-color: #ccc;
- background: #f7f7f7;
- box-shadow: 0 1px 0 rgba( 204,204,204,1 );
- 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;
- -webkit-transition: var(--yoast-transition-default);
- transition: var(--yoast-transition-default);
- 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;
-}
-
-.c15:active {
- color: #000;
- background-color: #f7f7f7;
- box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
- border-width: 0;
-}
-
-.c15:focus {
- outline: none;
- border-color: #0066cd;
- color: #000;
- background-color: #fff;
- box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
- color: #000;
- background-color: #fff;
- border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.c15 svg {
- margin-right: 7px;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
- .c15::after {
- display: inline-block;
- content: "";
- min-height: 22px;
- }
-}
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- › totally-different-url
-
-
-
-
- SEO title preview:
-
-
-
-
- Totally different title
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
- Totally different description
-
-
-
-
-
-
-
-
-
-
- Edit snippet
-
-
-
- Close snippet editor
-
-
-
-`;
-
-exports[`SnippetEditor closes when calling close() 1`] = `
-.c18 {
- -webkit-flex: 1 1 200px;
- -ms-flex: 1 1 200px;
- flex: 1 1 200px;
- min-width: 200px;
- cursor: pointer;
- font-size: 14px;
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
- margin: 4px 0;
- color: #303030;
- font-weight: 500;
-}
-
-.c17 {
- box-sizing: border-box;
- width: 100%;
- height: 8px;
- display: block;
- margin-top: 8px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-color: #f7f7f7;
- border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
- background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
- background-color: #dc3232;
- -webkit-transition: width 250ms;
- transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
- background-color: #dc3232;
-}
-
-.c17::-ms-fill {
- background-color: #dc3232;
- border: 0;
-}
-
-.c21 {
- box-sizing: border-box;
- width: 100%;
- height: 8px;
- display: block;
- margin-top: 8px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-color: #f7f7f7;
- border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
- background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
- background-color: #ee7c1b;
- -webkit-transition: width 250ms;
- transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
- background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
- background-color: #ee7c1b;
- border: 0;
-}
-
-.c16 {
- padding: 0 20px;
-}
-
-.c4 {
- border-bottom: 1px hidden #fff;
- border-radius: 8px;
- box-shadow: 0 1px 6px rgba(32,33,36,0.28);
- font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
- max-width: 400px;
- box-sizing: border-box;
- font-size: 14px;
-}
-
-.c11 {
- cursor: pointer;
- position: relative;
-}
-
-.c12 {
- color: #1967d2;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-size: 16px;
- line-height: 20px;
- font-weight: normal;
- margin: 0;
- display: inline-block;
- overflow: hidden;
- max-width: 600px;
- vertical-align: top;
- text-overflow: ellipsis;
- max-width: 600px;
- vertical-align: top;
- text-overflow: ellipsis;
-}
-
-.c13 {
- display: inline-block;
- max-height: 40px;
- padding-top: 1px;
- vertical-align: top;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.c6 {
- display: inline-block;
- cursor: pointer;
- position: relative;
- max-width: 90%;
- white-space: nowrap;
- font-size: 14px;
- vertical-align: top;
-}
-
-.c7 {
- display: inline-block;
- cursor: pointer;
- position: relative;
- max-width: 90%;
- white-space: nowrap;
- font-size: 14px;
- vertical-align: top;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 100%;
- margin-bottom: 12px;
- padding-top: 1px;
- line-height: 20px;
- vertical-align: top;
-}
-
-.c9 {
- font-size: 12px;
- line-height: 20px;
- color: #3c4043;
-}
-
-.c10 {
- color: #3c4043;
-}
-
-.c14 {
- color: #3c4043;
- font-size: 14px;
- line-height: 20px;
- cursor: pointer;
- position: relative;
- max-width: 600px;
-}
-
-.c14:after {
- display: table;
- content: "";
- clear: both;
-}
-
-.c5 {
- padding: 12px 16px;
-}
-
-.c5:first-child {
- margin-bottom: -16px;
-}
-
-.c8 {
- width: 16px;
- height: 16px;
- margin-right: 12px;
- vertical-align: middle;
-}
-
-.c20 {
- border: none;
- width: 100%;
- height: inherit;
- line-height: inherit;
- font-family: inherit;
- font-size: inherit;
- color: inherit;
-}
-
-.c20:focus {
- outline: 0;
-}
-
-.c19 {
- -webkit-flex: 0 1 100%;
- -ms-flex: 0 1 100%;
- flex: 0 1 100%;
- border: 1px solid #ddd;
- padding: 3px 5px;
- box-sizing: border-box;
- box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
- background-color: #fff;
- color: #32373c;
- outline: 0;
- -webkit-transition: 50ms border-color ease-in-out;
- transition: 50ms border-color ease-in-out;
- position: relative;
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
- font-size: 14px;
- cursor: text;
-}
-
-.c19::before {
- display: block;
- position: absolute;
- top: -1px;
- left: -25px;
- width: 24px;
- height: 24px;
- background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
- background-size: 25px;
- content: "";
-}
-
-.c0 {
- border: 0;
- padding: 0;
- margin: 0 0 16px;
-}
-
-.c1 {
- margin: 8px 0;
- padding: 0;
- color: #555;
- font-size: 14px;
- font-weight: 600;
-}
-
-.c3 {
- margin-right: 16px;
- color: inherit;
- font-size: 14px;
- line-height: 1.71428571;
- cursor: pointer;
- display: inline-block;
-}
-
-.c2.c2 {
- margin: 0 8px 0 0;
- cursor: pointer;
-}
-
-.c15 {
- color: #555;
- border-color: #ccc;
- background: #f7f7f7;
- box-shadow: 0 1px 0 rgba( 204,204,204,1 );
- 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;
- -webkit-transition: var(--yoast-transition-default);
- transition: var(--yoast-transition-default);
- 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;
-}
-
-.c15:active {
- color: #000;
- background-color: #f7f7f7;
- box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
- border-width: 0;
-}
-
-.c15:focus {
- outline: none;
- border-color: #0066cd;
- color: #000;
- background-color: #fff;
- box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
- color: #000;
- background-color: #fff;
- border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.c15 svg {
- margin-right: 7px;
-}
-
-.c22 {
- color: #555;
- border-color: #ccc;
- background: #f7f7f7;
- box-shadow: 0 1px 0 rgba( 204,204,204,1 );
- 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;
- -webkit-transition: var(--yoast-transition-default);
- transition: var(--yoast-transition-default);
- height: 33px;
- border: 1px solid #dbdbdb;
- box-shadow: none;
- font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
- margin-top: 24px;
-}
-
-.c22:active {
- color: #000;
- background-color: #f7f7f7;
- box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
- border-width: 0;
-}
-
-.c22:focus {
- outline: none;
- border-color: #0066cd;
- color: #000;
- background-color: #fff;
- box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
- color: #000;
- background-color: #fff;
- border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
- .c15::after {
- display: inline-block;
- content: "";
- min-height: 22px;
- }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
- .c22::after {
- display: inline-block;
- content: "";
- min-height: 22px;
- }
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- › test-slug
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- › test-slug
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- › test-slug
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
- date string
-
- ⋅
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
- Edit snippet
-
-
-
- Close snippet editor
-
-
-
-`;
-
-exports[`SnippetEditor removes the highlight when calling unsetFieldFocus 1`] = `
-.c18 {
- -webkit-flex: 1 1 200px;
- -ms-flex: 1 1 200px;
- flex: 1 1 200px;
- min-width: 200px;
- cursor: pointer;
- font-size: 14px;
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
- margin: 4px 0;
- color: #303030;
- font-weight: 500;
-}
-
-.c17 {
- box-sizing: border-box;
- width: 100%;
- height: 8px;
- display: block;
- margin-top: 8px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-color: #f7f7f7;
- border: 1px solid #ddd;
-}
-
-.c17::-webkit-progress-bar {
- background-color: #f7f7f7;
-}
-
-.c17::-webkit-progress-value {
- background-color: #dc3232;
- -webkit-transition: width 250ms;
- transition: width 250ms;
-}
-
-.c17::-moz-progress-bar {
- background-color: #dc3232;
-}
-
-.c17::-ms-fill {
- background-color: #dc3232;
- border: 0;
-}
-
-.c21 {
- box-sizing: border-box;
- width: 100%;
- height: 8px;
- display: block;
- margin-top: 8px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-color: #f7f7f7;
- border: 1px solid #ddd;
-}
-
-.c21::-webkit-progress-bar {
- background-color: #f7f7f7;
-}
-
-.c21::-webkit-progress-value {
- background-color: #ee7c1b;
- -webkit-transition: width 250ms;
- transition: width 250ms;
-}
-
-.c21::-moz-progress-bar {
- background-color: #ee7c1b;
-}
-
-.c21::-ms-fill {
- background-color: #ee7c1b;
- border: 0;
-}
-
-.c16 {
- padding: 0 20px;
-}
-
-.c4 {
- border-bottom: 1px hidden #fff;
- border-radius: 8px;
- box-shadow: 0 1px 6px rgba(32,33,36,0.28);
- font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
- max-width: 400px;
- box-sizing: border-box;
- font-size: 14px;
-}
-
-.c11 {
- cursor: pointer;
- position: relative;
-}
-
-.c12 {
- color: #1967d2;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-size: 16px;
- line-height: 20px;
- font-weight: normal;
- margin: 0;
- display: inline-block;
- overflow: hidden;
- max-width: 600px;
- vertical-align: top;
- text-overflow: ellipsis;
- max-width: 600px;
- vertical-align: top;
- text-overflow: ellipsis;
-}
-
-.c13 {
- display: inline-block;
- max-height: 40px;
- padding-top: 1px;
- vertical-align: top;
- overflow: hidden;
- text-overflow: ellipsis;
-}
-
-.c6 {
- display: inline-block;
- cursor: pointer;
- position: relative;
- max-width: 90%;
- white-space: nowrap;
- font-size: 14px;
- vertical-align: top;
-}
-
-.c7 {
- display: inline-block;
- cursor: pointer;
- position: relative;
- max-width: 90%;
- white-space: nowrap;
- font-size: 14px;
- vertical-align: top;
- overflow: hidden;
- text-overflow: ellipsis;
- max-width: 100%;
- margin-bottom: 12px;
- padding-top: 1px;
- line-height: 20px;
- vertical-align: top;
-}
-
-.c9 {
- font-size: 12px;
- line-height: 20px;
- color: #3c4043;
-}
-
-.c10 {
- color: #3c4043;
-}
-
-.c14 {
- color: #3c4043;
- font-size: 14px;
- line-height: 20px;
- cursor: pointer;
- position: relative;
- max-width: 600px;
-}
-
-.c14:after {
- display: table;
- content: "";
- clear: both;
-}
-
-.c5 {
- padding: 12px 16px;
-}
-
-.c5:first-child {
- margin-bottom: -16px;
-}
-
-.c8 {
- width: 16px;
- height: 16px;
- margin-right: 12px;
- vertical-align: middle;
-}
-
-.c20 {
- border: none;
- width: 100%;
- height: inherit;
- line-height: inherit;
- font-family: inherit;
- font-size: inherit;
- color: inherit;
-}
-
-.c20:focus {
- outline: 0;
-}
-
-.c19 {
- -webkit-flex: 0 1 100%;
- -ms-flex: 0 1 100%;
- flex: 0 1 100%;
- border: 1px solid #ddd;
- padding: 3px 5px;
- box-sizing: border-box;
- box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
- background-color: #fff;
- color: #32373c;
- outline: 0;
- -webkit-transition: 50ms border-color ease-in-out;
- transition: 50ms border-color ease-in-out;
- position: relative;
- font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
- font-size: 14px;
- cursor: text;
-}
-
-.c19::before {
- display: block;
- position: absolute;
- top: -1px;
- left: -25px;
- width: 24px;
- height: 24px;
- background-image: url( data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%221792%22%20height%3D%221792%22%20viewBox%3D%220%200%201792%201792%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22transparent%22%20d%3D%22M1152%20896q0%2026-19%2045l-448%20448q-19%2019-45%2019t-45-19-19-45v-896q0-26%2019-45t45-19%2045%2019l448%20448q19%2019%2019%2045z%22%20%2F%3E%3C%2Fsvg%3E );
- background-size: 25px;
- content: "";
-}
-
-.c0 {
- border: 0;
- padding: 0;
- margin: 0 0 16px;
-}
-
-.c1 {
- margin: 8px 0;
- padding: 0;
- color: #555;
- font-size: 14px;
- font-weight: 600;
-}
-
-.c3 {
- margin-right: 16px;
- color: inherit;
- font-size: 14px;
- line-height: 1.71428571;
- cursor: pointer;
- display: inline-block;
-}
-
-.c2.c2 {
- margin: 0 8px 0 0;
- cursor: pointer;
-}
-
-.c15 {
- color: #555;
- border-color: #ccc;
- background: #f7f7f7;
- box-shadow: 0 1px 0 rgba( 204,204,204,1 );
- 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;
- -webkit-transition: var(--yoast-transition-default);
- transition: var(--yoast-transition-default);
- 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;
-}
-
-.c15:active {
- color: #000;
- background-color: #f7f7f7;
- box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c15::-moz-focus-inner {
- border-width: 0;
-}
-
-.c15:focus {
- outline: none;
- border-color: #0066cd;
- color: #000;
- background-color: #fff;
- box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c15:hover {
- color: #000;
- background-color: #fff;
- border-color: var(--yoast-color-border--default);
-}
-
-.c15 svg {
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-.c15 svg {
- margin-right: 7px;
-}
-
-.c22 {
- color: #555;
- border-color: #ccc;
- background: #f7f7f7;
- box-shadow: 0 1px 0 rgba( 204,204,204,1 );
- 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;
- -webkit-transition: var(--yoast-transition-default);
- transition: var(--yoast-transition-default);
- height: 33px;
- border: 1px solid #dbdbdb;
- box-shadow: none;
- font-family: Arial,Roboto-Regular,HelveticaNeue,sans-serif;
- margin-top: 24px;
-}
-
-.c22:active {
- color: #000;
- background-color: #f7f7f7;
- box-shadow: inset 0 2px 5px -3px rgba( 0,0,0,0.5 );
-}
-
-.c22::-moz-focus-inner {
- border-width: 0;
-}
-
-.c22:focus {
- outline: none;
- border-color: #0066cd;
- color: #000;
- background-color: #fff;
- box-shadow: 0 0 3px rgba( 8,74,103,0.8 );
-}
-
-.c22:hover {
- color: #000;
- background-color: #fff;
- border-color: var(--yoast-color-border--default);
-}
-
-.c22 svg {
- -webkit-align-self: center;
- -ms-flex-item-align: center;
- align-self: center;
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
- .c15::after {
- display: inline-block;
- content: "";
- min-height: 22px;
- }
-}
-
-@media all and (-ms-high-contrast:none),(-ms-high-contrast:active) {
- .c22::after {
- display: inline-block;
- content: "";
- min-height: 22px;
- }
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- example.org
-
-
-
- › test-slug
-
-
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
-
-
-
-
-
- Test title
-
-
-
-
-
-
-
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- › test-slug
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- › test-slug
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
- Slug
-
-
-
-
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- › test-slug
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
- Test description, %%replacement_variable%%
-
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- She
-
- runs
-
- every day and every
-
- run
-
- is longer than the previous.
-
- Running
-
- makes her happy.
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Something with a transliterated
-
- kaayword
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- › this-keyword-url
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Something with a
-
- keyword
-
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- She
-
- runs
-
-
- every
-
- day and
-
- every
-
-
- run
-
- is longer than the previous.
-
- Running
-
- makes her happy.
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
- SEO title preview:
-
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Description
-
-
-
-
-
-
-
- Url preview:
-
-
-
-
-
- example.org
-
- ›
-
-
-
-
-
- SEO title preview:
-
-
-
-
-
- Meta description preview:
-
-
-
- Today
-
- -
-
-
- Description
-
-
-
-