Merge branch 'release/14.8'

apps/components/ReactifiedComponentsWrapper.js

@@ -21,6 +21,17 @@ function clickerDiClick() {
 	console.log( "You are an exceptional clicker!" );
 }
 
+const buttonRef = React.createRef();
+const buttonStyledLinkRef = React.createRef();
+
+const focusButtonRef = () => {
+	buttonRef.current.focus();
+};
+
+const focusLinkRef = () => {
+	buttonStyledLinkRef.current.focus();
+};
+
 const buttonGrouping = <Fragment>
 	<h3>"primary" variant (default)</h3>
 	<Button onClick={ clickerDiClick } title="Testing whether other props are also passed, like this tooltip">Default button</Button>
@@ -39,6 +50,12 @@ const buttonGrouping = <Fragment>
 	<ButtonStyledLink variant="secondary" href={ "#" }>Secondary link</ButtonStyledLink>
 	<ButtonStyledLink variant="secondary" small={ true } href={ "#" }>Secondary small link</ButtonStyledLink>
 
+	<h3>With Ref!</h3>
+	<Button variant="secondary" buttonRef={ buttonRef } small={ true } onClick={ clickerDiClick }>This Button has a Ref!</Button>
+	<button onClick={ focusButtonRef }>focus test</button>
+	<ButtonStyledLink variant="secondary" buttonRef={ buttonStyledLinkRef } small={ true } href={ "#" }>This ButtonStyledLink has a Ref!</ButtonStyledLink>
+	<button onClick={ focusLinkRef }>focus test</button>
+
 	<h3>"buy" variant (or "upsell")</h3>
 	<Button variant="upsell" onClick={ clickerDiClick }>Buy button</Button>
 	<Button variant="upsell" disabled={ true } onClick={ clickerDiClick }>Buy disabled button</Button>

apps/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoast/example-component-app",
-  "version": "1.0.69",
+  "version": "1.0.70-rc.2",
   "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.8.0",
-    "@yoast/components": "^2.6.0",
-    "@yoast/configuration-wizard": "^2.8.0",
+    "@yoast/analysis-report": "^1.9.0-rc.1",
+    "@yoast/components": "^2.7.0-rc.1",
+    "@yoast/configuration-wizard": "^2.9.0-rc.1",
     "@yoast/helpers": "^0.13.0",
-    "@yoast/search-metadata-previews": "^2.8.0",
+    "@yoast/search-metadata-previews": "^2.9.0-rc.2",
     "@yoast/style-guide": "^0.13.0",
     "babel-polyfill": "^6.23.0",
     "lodash": "4.17.11",
@@ -27,7 +27,7 @@
     "redux-devtools-dock-monitor": "^1.1.3",
     "redux-devtools-log-monitor": "^1.4.0",
     "styled-components": "^4.3.2",
-    "yoastseo": "^1.79.0"
+    "yoastseo": "^1.80.0-rc.1"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.3.4",
@@ -49,7 +49,7 @@
     "webpack": "4.19.1",
     "webpack-cli": "^2.1.3",
     "webpack-dev-server": "3.1.14",
-    "yoast-components": "^5.8.0"
+    "yoast-components": "^5.9.0-rc.2"
   },
   "peerDependencies": {
     "material-ui": "^0.18.6",

apps/content-analysis/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@yoast/content-analysis-app",
-	"version": "0.1.65",
+	"version": "0.1.66-rc.2",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "7.7.4",
 		"@svgr/webpack": "4.3.3",
 		"@wordpress/i18n": "^3.1.1",
-		"@yoast/analysis-report": "^1.8.0",
-		"@yoast/components": "^2.6.0",
+		"@yoast/analysis-report": "^1.9.0-rc.1",
+		"@yoast/components": "^2.7.0-rc.1",
 		"@yoast/style-guide": "^0.13.0",
 		"babel-core": "7.0.0-bridge.0",
 		"babel-eslint": "10.0.3",
@@ -70,7 +70,7 @@
 		"webpack-manifest-plugin": "2.2.0",
 		"workbox-webpack-plugin": "4.3.1",
 		"worker-loader": "^2.0.0",
-		"yoastseo": "^1.79.0"
+		"yoastseo": "^1.80.0-rc.1"
 	},
 	"scripts": {
 		"start": "node scripts/start.js",

packages/analysis-report/package.json

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

packages/components/CHANGELOG.MD

@@ -4,6 +4,17 @@ All notable changes to this project will be documented in this file. Releases wi
 
 We follow [Semantic Versioning](http://semver.org/).
 
+## 2.7.0 August 17th, 2020
+### Enhancements
+* Adds a new active schema tab icon.
+* Adds an optional buttonRef prop to the Button and ButtonStyledLink, which will be set as a ref on the html button and anchor element, respectively.
+* Makes the FieldGroup component available by exporting it. The FieldGroup is a reusable wrapper with a title/label, an optional HelpIcon and an optional Description.
+* Opens the 'ultimate guide to keyword research' link from the WordOccurrenceInsights component in a new tab.
+* Adds an optional `onOptionFocus` prop to the Select component. When an input event is fired, `onOptionFocus` is called with the select's name, and the current value.
+
+### Other
+* Makes the Select name property optional.
+
 ## 2.6.0 August 3rd, 2020
 ### Enhancements
 * Adds the means to put a button inline with a select2 element.

packages/components/package.json

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

packages/components/src/WordOccurrenceInsights.js

@@ -30,8 +30,8 @@ const getKeywordResearchArticleLink = () => {
 	return interpolateComponents( {
 		mixedString: keywordsResearchLinkTranslation,
 		components: {
-			// eslint-disable-next-line jsx-a11y/anchor-has-content
-			a: <a href="https://yoa.st/keyword-research-metabox" />,
+			// eslint-disable-next-line jsx-a11y/anchor-has-content, react/jsx-no-target-blank
+			a: <a href="https://yoa.st/keyword-research-metabox" target="_blank" />,
 		},
 	} );
 };

packages/components/src/button/Button.js

@@ -75,6 +75,7 @@ export const Button = ( props ) => {
 		variant,
 		small,
 		type,
+		buttonRef,
 		...restProps
 	} = props;
 
@@ -83,6 +84,7 @@ export const Button = ( props ) => {
 	const iconAfter = variantIcons && variantIcons.iconAfter;
 
 	return <button
+		ref={ buttonRef }
 		className={ className || getClassName( variant, small ) }
 		type={ type }
 		{ ...restProps }
@@ -97,6 +99,7 @@ Button.propTypes = {
 	onClick: PropTypes.func,
 	type: PropTypes.string,
 	className: PropTypes.string,
+	buttonRef: PropTypes.object,
 	small: PropTypes.bool,
 	variant: PropTypes.oneOf( Object.keys( variantToClassName ) ),
 	children: PropTypes.oneOfType(
@@ -114,6 +117,7 @@ Button.defaultProps = {
 	small: false,
 	children: null,
 	onClick: null,
+	buttonRef: null,
 };
 
 /**
@@ -134,6 +138,7 @@ export const ButtonStyledLink = ( props ) => {
 		className,
 		variant,
 		small,
+		buttonRef,
 		...restProps
 	} = props;
 
@@ -143,6 +148,7 @@ export const ButtonStyledLink = ( props ) => {
 
 	return <a
 		className={ className || getClassName( variant, small ) }
+		ref={ buttonRef }
 		{ ...restProps }
 	>
 		{ ! ! iconBefore && <span className={ iconBefore } /> }
@@ -156,6 +162,7 @@ ButtonStyledLink.propTypes = {
 	variant: PropTypes.oneOf( Object.keys( variantToClassName ) ),
 	small: PropTypes.bool,
 	className: PropTypes.string,
+	buttonRef: PropTypes.object,
 	children: PropTypes.oneOfType(
 		[
 			PropTypes.node,
@@ -169,4 +176,5 @@ ButtonStyledLink.defaultProps = {
 	variant: "primary",
 	small: false,
 	children: null,
+	buttonRef: null,
 };

packages/components/src/checkbox/CheckboxGroup.js

@@ -149,8 +149,8 @@ class CheckboxGroup extends React.Component {
 
 		return (
 			<FieldGroup
-				htmlFor={ componentId }
 				{ ...fieldGroupProps }
+				htmlFor={ componentId }
 			>
 				<div onChange={ this.onChangeHandler }>
 					{ vertical

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

@@ -20,16 +20,19 @@ import HelpIcon, { helpIconDefaultProps, helpIconProps } from "../help-icon/Help
  * @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 titleComponent = htmlFor
+		? <label htmlFor={ htmlFor }>{ label }</label>
+		: <b>{ label }</b>;
 	return (
 		<div className={ wrapperClassName }>
 			<div className={ titleClassName }>
-				<label htmlFor={ htmlFor }>{ label }</label>
+				{ titleComponent }
 				{ linkTo !== "" && <HelpIcon
 					linkTo={ linkTo }
 					linkText={ linkText }
 				/> }
 			</div>
-			{ description !== ""  && <p className="description" id="yoast_unique_description_id">{ description }</p> }
+			{ description !== ""  && <p className="field-group-description" id="yoast_unique_description_id">{ description }</p> }
 			{ children }
 		</div>
 	);
@@ -44,6 +47,7 @@ export const FieldGroupProps = {
 	children: PropTypes.oneOfType( [ PropTypes.node, PropTypes.arrayOf( PropTypes.node ) ] ),
 	wrapperClassName: PropTypes.string,
 	titleClassName: PropTypes.string,
+	htmlFor: PropTypes.string,
 	...helpIconProps,
 };
 
@@ -55,13 +59,11 @@ export const FieldGroupDefaultProps = {
 	children: [],
 	wrapperClassName: "yoast-field-group",
 	titleClassName: "yoast-field-group__title",
+	htmlFor: "",
 	...helpIconDefaultProps,
 };
 
-FieldGroup.propTypes = {
-	htmlFor: PropTypes.string.isRequired,
-	...FieldGroupProps,
-};
+FieldGroup.propTypes = FieldGroupProps;
 
 FieldGroup.defaultProps = FieldGroupDefaultProps;
 

packages/components/src/field-group/field-group.css

@@ -15,6 +15,6 @@
     padding: 0;
 }
 
-.yoast-field-group .description {
+.yoast-field-group .field-group-description {
     margin: 0;
 }

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

@@ -1 +1,3 @@
 import "./field-group.css";
+
+export { default as FieldGroup } from "./FieldGroup.js";

packages/components/src/inputs/TextArea.js

@@ -16,8 +16,8 @@ import { getId } from "../GenerateId";
 const TextArea = ( props ) => {
 	const id = getId( props.id );
 	const fieldGroupProps = {
-		htmlFor: id,
 		...props,
+		htmlFor: id,
 	};
 	return (
 		<FieldGroup { ...fieldGroupProps }>

packages/components/src/select/Select.js

@@ -13,13 +13,14 @@ import "./select.css";
 const selectOption = PropTypes.shape( { name: PropTypes.string, value: PropTypes.string } );
 const selectProps = {
 	id: PropTypes.string.isRequired,
-	name: PropTypes.string.isRequired,
+	name: PropTypes.string,
 	options: PropTypes.arrayOf( selectOption ).isRequired,
 	selected: PropTypes.oneOfType( [ PropTypes.arrayOf( PropTypes.string ), PropTypes.string ] ),
 	onChange: PropTypes.func,
 	...FieldGroupProps,
 };
 const selectDefaultProps = {
+	name: "",
 	selected: [],
 	onChange: () => {},
 	...FieldGroupDefaultProps,
@@ -107,8 +108,8 @@ class MultiSelect extends React.Component {
 
 		return (
 			<FieldGroup
-				htmlFor={ id }
 				{ ...fieldGroupProps }
+				htmlFor={ id }
 			>
 				<select
 					multiple="multiple"
@@ -158,6 +159,7 @@ export class Select extends React.Component {
 	constructor( props ) {
 		super( props );
 		this.onBlurHandler = this.onBlurHandler.bind( this );
+		this.onInputHandler = this.onInputHandler.bind( this );
 	}
 
 	/**
@@ -174,6 +176,19 @@ export class Select extends React.Component {
 		this.props.onChange( event.target.value );
 	}
 
+	/**
+	 * Passes the target's name and input value to the onOptionFocus function if it exists.
+	 *
+	 * NOTE: Please do not pass functions to props.onOptionFocus that would induce a context change in the DOM (navigation, focus changes).
+	 *       This is an a11y concern, because it disorients keyboard and screenreader users.
+	 *
+	 * @param {Event} event The event triggered by an Input.
+	 *
+	 * @returns {void}
+	 */
+	onInputHandler( event ) {
+		this.props.onOptionFocus( event.target.name, event.target.value );
+	}
 	/**
 	 * Render function for component.
 	 *
@@ -185,6 +200,7 @@ export class Select extends React.Component {
 			selected,
 			options,
 			name,
+			onOptionFocus,
 			...fieldGroupProps
 		} = this.props;
 
@@ -193,14 +209,15 @@ export class Select extends React.Component {
 
 		return (
 			<FieldGroup
-				htmlFor={ id }
 				{ ...fieldGroupProps }
+				htmlFor={ id }
 			>
 				<select
 					id={ id }
 					name={ name }
 					defaultValue={ selection }
 					onBlur={ this.onBlurHandler }
+					onInput={ onOptionFocus ? this.onInputHandler : null }
 				>
 					{ options.map( Option ) }
 				</select>
@@ -209,5 +226,11 @@ export class Select extends React.Component {
 	}
 }
 
-Select.propTypes = selectProps;
-Select.defaultProps = selectDefaultProps;
+Select.propTypes = {
+	...selectProps,
+	onOptionFocus: PropTypes.func,
+};
+Select.defaultProps = {
+	...selectDefaultProps,
+	onOptionFocus: null,
+};