Merge branch 'release/16.3'

Author: igorschoester

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 {
 		</Alert>;
 	}
 
+	updateStars( event ) {
+		this.setState({
+			input: event.target.value
+		} );
+	}
+
 	/**
 	 * Renders all the Component examples.
 	 *
@@ -171,6 +177,9 @@ export default class ComponentsExample extends React.Component {
 							<p key="2">This spans to multiple lines.</p>,
 						] }
 					/>
+					<h2>Star rating</h2>
+					<i>Accepts a rating from 0-5 and colors the stars yellow accordingly</i>
+					<StarRating rating={ 3.5 } />
 					<h2>Outbound links</h2>
 					<p>
 						<NonYoastLink href="http://www.example.org">example.org</NonYoastLink>

apps/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoast/example-component-app",
-  "version": "1.8.0",
+  "version": "1.9.0-rc.1",
   "description": "This app demonstrates the possibilites of our components",
   "main": "index.js",
   "author": "Yoast",
@@ -12,11 +12,11 @@
   },
   "dependencies": {
     "@wordpress/i18n": "1.2.3",
-    "@yoast/analysis-report": "^1.20.0",
-    "@yoast/components": "^2.18.0",
-    "@yoast/configuration-wizard": "^2.21.0",
+    "@yoast/analysis-report": "^1.21.0-rc.0",
+    "@yoast/components": "^2.19.0-rc.0",
+    "@yoast/configuration-wizard": "^2.22.0-rc.0",
     "@yoast/helpers": "^0.16.0",
-    "@yoast/search-metadata-previews": "^2.23.0",
+    "@yoast/search-metadata-previews": "^2.24.0-rc.1",
     "@yoast/style-guide": "^0.13.0",
     "babel-polyfill": "^6.23.0",
     "lodash": "4.17.11",
@@ -48,7 +48,7 @@
     "webpack": "4.19.1",
     "webpack-cli": "^2.1.3",
     "webpack-dev-server": "3.1.14",
-    "yoast-components": "^5.23.0"
+    "yoast-components": "^5.24.0-rc.1"
   },
   "peerDependencies": {
     "material-ui": "^0.18.6",

apps/content-analysis/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@yoast/content-analysis-app",
-	"version": "0.9.0",
+	"version": "0.10.0-rc.0",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "7.7.4",
 		"@svgr/webpack": "4.3.3",
 		"@wordpress/i18n": "^3.1.1",
-		"@yoast/analysis-report": "^1.20.0",
-		"@yoast/components": "^2.18.0",
+		"@yoast/analysis-report": "^1.21.0-rc.0",
+		"@yoast/components": "^2.19.0-rc.0",
 		"@yoast/style-guide": "^0.13.0",
 		"babel-core": "7.0.0-bridge.0",
 		"babel-eslint": "10.0.3",

packages/analysis-report/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoast/analysis-report",
-  "version": "1.20.0",
+  "version": "1.21.0-rc.0",
   "main": "src/index.js",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   "private": false,
   "dependencies": {
     "@wordpress/i18n": "^1.1.0",
-    "@yoast/components": "^2.18.0",
+    "@yoast/components": "^2.19.0-rc.0",
     "@yoast/helpers": "^0.16.0",
     "@yoast/style-guide": "^0.13.0",
     "lodash": "^4.17.11",

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoast/components",
-  "version": "2.18.0",
+  "version": "2.19.0-rc.0",
   "description": "Yoast Components",
   "main": "src/index.js",
   "private": false,

packages/components/src/field-group/FieldGroup.js

@@ -4,29 +4,32 @@ import PropTypes from "prop-types";
 // Import the required CSS.
 import "./field-group.css";
 import HelpIcon, { helpIconDefaultProps, helpIconProps } from "../help-icon/HelpIcon";
+import NewBadge from "../new-badge/NewBadge";
 
 /**
  * FieldGroup component that can be used to wrap our form elements in.
  *
- * @param {string} htmlFor ID to which HTML element the label belongs.
- * @param {string} label Text displayed as label.
- * @param {string} linkTo Location to which the icon links.
- * @param {string} linkText Screen-reader text that is added to the link.
- * @param {string} description Optional: a description where the input element is used for.
- * @param {array} children Children that are rendered in the FieldGroup.
+ * @param {string} htmlFor          ID to which HTML element the label belongs.
+ * @param {string} label            Text displayed as label.
+ * @param {string} linkTo           Location to which the icon links.
+ * @param {string} linkText         Screen-reader text that is added to the link.
+ * @param {string} description      Optional: A description where the input element is used for.
+ * @param {array}  children         Children that are rendered in the FieldGroup.
  * @param {string} wrapperClassName Optional: A classname for the FieldGroup's outer div. Default is "yoast-field-group".
- * @param {string} titleClassName Optional: A classname for the FieldGroup's title div. Default is "yoast-field-group__title".
+ * @param {string} titleClassName   Optional: A classname for the FieldGroup's title div. Default is "yoast-field-group__title".
+ * @param {bool}   hasNewBadge      Optional: Whether the FieldGroup has a 'New' Badge.
  *
  * @returns {React.Component} A div with a label, icon and optional description that renders all children.
  */
-const FieldGroup = ( { htmlFor, label, linkTo, linkText, description, children, wrapperClassName, titleClassName } ) => {
+const FieldGroup = ( { htmlFor, label, linkTo, linkText, description, children, wrapperClassName, titleClassName, hasNewBadge } ) => {
 	const titleComponent = htmlFor
 		? <label htmlFor={ htmlFor }>{ label }</label>
 		: <b>{ label }</b>;
 	return (
 		<div className={ wrapperClassName }>
 			{ label !== "" && <div className={ titleClassName }>
 				{ titleComponent }
+				{ hasNewBadge && <NewBadge inLabel={ true } /> }
 				{ linkTo !== "" && <HelpIcon
 					linkTo={ linkTo }
 					linkText={ linkText }

packages/components/src/image-select/ImageSelect.js

@@ -37,6 +37,7 @@ function ImageSelect( props ) {
 		>
 			<FieldGroup
 				label={ props.label }
+				hasNewBadge={ props.hasNewBadge }
 			>
 				{ props.hasPreview &&
 					<button className={ imageClassName } onClick={ props.onClick } type="button">
@@ -73,6 +74,7 @@ ImageSelect.propTypes = {
 	replaceImageButtonId: PropTypes.string,
 	removeImageButtonId: PropTypes.string,
 	warnings: PropTypes.arrayOf( PropTypes.string ),
+	hasNewBadge: PropTypes.bool,
 };
 
 ImageSelect.defaultProps = {
@@ -87,4 +89,5 @@ ImageSelect.defaultProps = {
 	replaceImageButtonId: "",
 	removeImageButtonId: "",
 	warnings: [],
+	hasNewBadge: false,
 };

packages/components/src/index.js

@@ -13,8 +13,10 @@ export * from "./inputs";
 export * from "./insights-card";
 export * from "./radiobutton";
 export * from "./select";
+export * from "./star-rating";
 export * from "./help-icon";
 export * from "./tables";
+export * from "./new-badge";
 
 // Referenced index.js explicitly due to case-sensitive path conflicts.
 export * from "./toggle/index.js";

packages/components/src/new-badge/NewBadge.js

@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { __ } from "@wordpress/i18n";
+
+/**
+ * Function for the NewBadge component.
+ *
+ * @param {bool} inLabel Whether the NewBadge is within a Label.
+ *
+ * @returns {React.Component} The NewBadge.
+ */
+const NewBadge = ( { inLabel } ) => (
+	<span className={ inLabel ? "yoast-badge yoast-badge__in-label yoast-new-badge" : "yoast-badge yoast-new-badge" }>
+		{ __( "New", "wordpress-seo" ) }
+	</span>
+);
+
+NewBadge.propTypes = {
+	inLabel: PropTypes.bool,
+};
+
+NewBadge.defaultProps = {
+	inLabel: false,
+};
+
+export default NewBadge;

packages/components/src/new-badge/index.js

@@ -0,0 +1,2 @@
+import "./new-badge.css";
+export { default as NewBadge } from "./NewBadge";