Merge branch 'release/14.0'

Author: Igor

apps/components/App.js

@@ -18,6 +18,7 @@ import FacebookPreviewExample from "./FacebookPreviewExample";
 import LinkSuggestionsWrapper from "./LinkSuggestionsExample";
 import WordOccurrencesWrapper from "./WordOccurrencesWrapper";
 import MultiStepProgressWrapper from "./MultiStepProgressWrapper";
+import ReactifiedComponentsWrapper from "./ReactifiedComponentsWrapper";
 
 // Setup empty translations to prevent Jed error.
 setLocaleData( { "": {} }, "yoast-components" );
@@ -103,6 +104,11 @@ const components = [
 		name: "Multi step progress",
 		component: <MultiStepProgressWrapper />,
 	},
+	{
+		id: "reactified-components",
+		name: "Reactified components",
+		component: <ReactifiedComponentsWrapper />,
+	},
 ];
 
 const LanguageDirectionContainer = styled.div`

apps/components/ReactifiedComponentsWrapper.js

@@ -0,0 +1,78 @@
+import React from "react";
+import TextInput from "@yoast/components/src/inputs/TextInput";
+import TextArea from "@yoast/components/src/inputs/TextArea";
+import RadioButtonGroup from "@yoast/components/src/radiobutton/RadioButtonGroup";
+
+const ReactifiedComponentsWrapper = () => {
+	return (
+		<div className="yoast">
+			<TextInput
+				label="This is the input label"
+				value="This is the input value"
+				type="text"
+			/>
+			<TextInput
+				label="This input has a description"
+				description="Great description!"
+				type="text"
+				placeholder="The best placeholder ev4h"
+			/>
+			<TextInput
+				label="This is a number input"
+				description="The minimum number is 3 and the maximum is 6 (if you use arrow keys)."
+				type="number"
+				min={ 3 }
+				max={ 6 }
+			/>
+			<TextInput
+				label="This is a email input without description where the help links to google.com"
+				type="email"
+				linkTo="https://www.google.com"
+			/>
+			<TextInput
+				label="This is a password input"
+				type="password"
+				linkTo="https://www.google.com"
+			/>
+			<TextArea
+				label="This is a textarea"
+				placeholder="Ugly placeholder"
+				value="Wow, what happens now??"
+				description="The greatest textarea ever!!1!"
+			/>
+			<RadioButtonGroup
+				onChange={ console.log }
+				options={ [
+					{
+						value: "hey-value",
+						label: "Hey there!",
+					},
+					{
+						value: "hi-value",
+						label: "Hi there!",
+					}
+				] }
+				label="Horizontal radiobutton group"
+				groupName="group1"
+				selected="hi"
+			/>
+			<RadioButtonGroup
+				onChange={ console.log }
+				options={ [
+					{
+						value: "haha-value",
+						label: "Haha, that's funny!",
+					},
+					{
+						value: "hoho-value",
+						label: "Hohoho, I'm santa!",
+					}
+				] }
+				label="Vertical radiobutton group"
+				vertical={ true }
+				groupName="group2"
+			/>
+		</div>
+	);
+};
+export default ReactifiedComponentsWrapper;

apps/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoast/example-component-app",
-  "version": "1.0.62",
+  "version": "1.0.63-rc.0",
   "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.1.0",
-    "@yoast/components": "^1.1.0",
-    "@yoast/configuration-wizard": "^2.1.0",
+    "@yoast/analysis-report": "^1.2.0-rc.0",
+    "@yoast/components": "^2.0.0-rc.0",
+    "@yoast/configuration-wizard": "^2.2.0-rc.0",
     "@yoast/helpers": "^0.11.1",
-    "@yoast/search-metadata-previews": "^2.1.0",
+    "@yoast/search-metadata-previews": "^2.2.0-rc.0",
     "@yoast/style-guide": "^0.11.1",
     "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.72.0"
+    "yoastseo": "^1.73.0-rc.0"
   },
   "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.1.0"
+    "yoast-components": "^5.2.0-rc.0"
   },
   "peerDependencies": {
     "material-ui": "^0.18.6",

apps/components/tests/__snapshots__/appTest.js.snap

@@ -129,6 +129,13 @@ exports[`App renders without problems 1`] = `
     >
       Multi step progress
     </button>
+    <button
+      onClick={[Function]}
+      style={Object {}}
+      type="button"
+    >
+      Reactified components
+    </button>
     <p
       style={
         Object {

apps/content-analysis/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@yoast/content-analysis-app",
-	"version": "0.1.58",
+	"version": "0.1.59-rc.0",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "7.7.4",
 		"@svgr/webpack": "4.3.3",
 		"@wordpress/i18n": "^3.1.1",
-		"@yoast/analysis-report": "^1.1.0",
-		"@yoast/components": "^1.1.0",
+		"@yoast/analysis-report": "^1.2.0-rc.0",
+		"@yoast/components": "^2.0.0-rc.0",
 		"@yoast/style-guide": "^0.11.1",
 		"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.72.0"
+		"yoastseo": "^1.73.0-rc.0"
 	},
 	"scripts": {
 		"start": "node scripts/start.js",

packages/analysis-report/CHANGELOG.MD

@@ -5,6 +5,10 @@ This changelog is according to [Keep a Changelog](http://keepachangelog.com).
 All notable changes to this project will be documented in this file. Releases without a changelog entry contain only minor changes that are irrelevant for users of this library.
 We follow [Semantic Versioning](http://semver.org/).
 
+## 1.2.0 April 23rd, 2020
+### Other
+* Adds a CSS test stub.
+
 ## 0.12.0 January 6th, 2020
 ### Other
 * Drops IE11 support through configuring Babel to use the preset environment with the own list of supported browsers specified.

packages/analysis-report/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoast/analysis-report",
-  "version": "1.1.0",
+  "version": "1.2.0-rc.0",
   "main": "src/index.js",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   "private": false,
   "dependencies": {
     "@wordpress/i18n": "^1.1.0",
-    "@yoast/components": "^1.1.0",
+    "@yoast/components": "^2.0.0-rc.0",
     "@yoast/helpers": "^0.11.1",
     "@yoast/style-guide": "^0.11.1",
     "lodash": "^4.17.11",
@@ -51,7 +51,10 @@
     "transformIgnorePatterns": [
       "/node_modules/(?!yoastseo|lodash-es).+\\.js$"
     ],
-    "setupTestFrameworkScriptFile": "<rootDir>/tools/jest/setupTests.js"
+    "setupTestFrameworkScriptFile": "<rootDir>/tools/jest/setupTests.js",
+    "moduleNameMapper": {
+      "\\.css$": "<rootDir>/tools/jest/CSSStub.js"
+    }
   },
   "publishConfig": {
     "access": "public"

packages/analysis-report/tools/jest/CSSStub.js

@@ -0,0 +1 @@
+module.exports = {};

packages/components/CHANGELOG.MD

@@ -6,6 +6,17 @@ All notable changes to this project will be documented in this file. Releases wi
 
 We follow [Semantic Versioning](http://semver.org/).
 
+## 2.0.0 April 23rd, 2020
+### Added
+* Adds CSS through JavaScript imports for button, checkbox, data-model, field-group, inputs, modal, radiobutton, select and toggle.
+* Adds GenerateId, FieldGroup, TextArea and TextInput components.
+* Adds a CSS test stub.
+
+## 1.0.0 April 14th, 2020
+### Added
+* Adds CSS through JavaScript imports for button, checkbox, data-model, field-group, inputs, modal, radiobutton, select and toggle.
+* Adds GenerateId, FieldGroup, TextArea and TextInput components.
+
 ## 0.14.0 March 30th, 2020
 ### Added
 * Adds CSS and HTML used in the upcoming redesign of the components for borders, colors, icons, buttons, checkbox, data-model, inputs, modal, radio button, select and toggle.

packages/components/README.md

@@ -0,0 +1,6 @@
+## Requirements
+Because we are importing CSS in our JavaScript, your JavaScript bundler needs to be able to interpret CSS.  
+
+Therefore, you will need to use a css-loader in your bundler in order to use this package.
+
+E.g. in Webpack: https://webpack.js.org/loaders/css-loader/