Merge develop into branch

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,24 @@
+<!-- Please use this template when creating an issue. 
+- Please check the boxes after you've created your issue.
+- Please use the latest version of Yoast-components.-->
+
+* [ ] I've read and understood the [contribution guidelines](https://github.com/Yoast/wordpress-seo/blob/trunk/.github/CONTRIBUTING.md).
+* [ ] I've searched for any related issues and avoided creating a duplicate issue.
+
+### Please give us a description of what happened.
+
+
+
+
+### Please describe what you expected to happen and why.
+
+
+
+
+### How can we reproduce this behavior?
+1.
+2.
+3.
+
+### Technical info
+* yoast-components version:

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,17 @@
+## Summary
+
+This PR can be summarized in the following changelog entry:
+
+*
+
+## Relevant technical choices:
+
+*
+
+## Test instructions
+
+This PR can be tested by following these steps:
+
+*
+
+Fixes #

App.js

@@ -1,32 +1,17 @@
-import "babel-polyfill";
-
 import React from "react";
+import { IntlProvider } from "react-intl";
 
-import Wizard from "./composites/OnboardingWizard/OnboardingWizard";
-import Config from "./composites/OnboardingWizard/config/production-config";
 import SearchResultsEditor from "./composites/SearchResultEditor/SearchResultEditor";
 import SnippetPreview from "./composites/Plugin/SnippetPreview/components/SnippetPreview";
 import ContentAnalysis from "./composites/Plugin/ContentAnalysis/components/ContentAnalysis";
-import apiConfig from "./composites/OnboardingWizard/config/api-config";
+import Wizard from "./app/WizardWrapper";
+import DashboardWidget from "./app/DashboardWidgetWrapper";
 import Loader from "./composites/basic/Loader";
+import HelpCenterWrapper from "./app/HelpCenterWrapper";
 
 // Required to make Material UI work with touch screens.
 import injectTapEventPlugin from "react-tap-event-plugin";
 
-function cloneDeep( object ) {
-	return JSON.parse( JSON.stringify( object ) );
-}
-
-const WizardWrapper = () => {
-	let config = cloneDeep( Config );
-
-	// @todo: Add customComponents manually, because cloneDeep is clearing the value of it. Should be solved.
-	config.customComponents = Config.customComponents;
-	config.endpoint = apiConfig;
-
-	return <Wizard { ...config } />;
-};
-
 const components = [
 	{
 		id: "search-results-editor",
@@ -41,7 +26,7 @@ const components = [
 	{
 		id: "wizard",
 		name: "Wizard",
-		component: <WizardWrapper />,
+		component: <Wizard />,
 	},
 	{
 		id: "loader",
@@ -53,7 +38,17 @@ const components = [
 		name: "Content analysis",
 		component: <ContentAnalysis />,
 	},
-]
+	{
+		id: "dashboard-widget",
+		name: "Dashboard Widget",
+		component: <DashboardWidget />,
+	},
+	{
+		id: "help-center",
+		name: "Help center",
+		component: <HelpCenterWrapper />,
+	},
+];
 
 class App extends React.Component {
 
@@ -63,7 +58,7 @@ class App extends React.Component {
 		injectTapEventPlugin();
 
 		this.state = {
-			activeComponent: "content-analysis",
+			activeComponent: "help-center",
 		};
 	}
 
@@ -101,22 +96,28 @@ class App extends React.Component {
 
 	getMenu() {
 		return (
-			<nav style={ { margin: "0 0 2rem 0", textAlign: "center" } }>
+			<nav style={ { textAlign: "center" } }>
 				{
 					components.map( config => {
 						return this.renderButton( config.id, config.name );
 					} )
 				}
+				<p style={ { fontSize: "0.8em", margin: "5px 0" } }>
+					For redux devtools press <strong>Ctrl + H</strong>,
+					to change position press <strong>Ctrl + Q</strong>.
+				</p>
 			</nav>
 		);
 	}
 
 	render() {
 		return (
-			<div>
-				{ this.getMenu() }
-				{ this.getContent() }
-			</div>
+			<IntlProvider locale="en">
+				<div>
+					{ this.getMenu() }
+					{ this.getContent() }
+				</div>
+			</IntlProvider>
 		);
 	}
 }

CHANGELOG.MD

@@ -5,6 +5,93 @@ This changelog is according to [Keep a Changelog](http://keepachangelog.com).
 All notable changes to this project will be documented in this file.
 We follow [Semantic Versioning](http://semver.org/).
 
+## 2.10.1: October 4th, 2017
+
+### Added
+
+#### Other
+* Improved the `HelpCenterButton` and the `HelpCenterContainer` styling. #337
+
+### Other
+* Added class names to the `HelpCenterContainer` and `HelpCenterButton`. #337
+
+## 2.10.0: October 3rd, 2017
+
+### Added
+
+#### Components
+* `Table` component. #219
+* `SearchResultDetail` component. #243
+* `SearchResults` component. #243
+* `YoastLinkButton` component. #284
+* `VideoTutorial` component. #291
+* `YouTubeVideo` component. #291
+* `YoastTabs` component. #303
+* `AllyNotice` component. #306
+* `HelpCenter` component. #310
+* `HelpCenterButton` component. #318
+
+#### Other
+* Added translatable label to `SearchBar` component. #243 
+* Added `makeOutboundLink` util function. #308
+* Added a prop to the `AlgoliaSearcher` component that can be used to enable live search. #323
+* Added a search button and placeholder text to the `SearchBar` component. #323
+
+### Other
+* Improved styling and accessibility of the `SearchBar` component. #243
+* Styling improvements for the Onboarding Wizard. #290
+* Fixed two prop warnings that appeared when switching pages in the Onboarding wizard. #293 and #295
+* Improved YoastButton hover and active style. #332
+
+## 2.9.3: September 26th, 2017
+
+### Other
+* Fixed the loading of AMP articles in the Algolia article iFrame. 
+
+
+## 2.9.2: September 25th, 2017
+
+### Other
+* Added trailing slash to knowledge base URL in help center
+
+## 2.9.1: September 19th, 2017
+
+### Added
+
+#### Other
+* Added dashboard widget to development environment.
+* Added class names to `WordpressFeed` and `SeoAssessment` components, and also to their children.
+
+## 2.9.0: September 11th, 2017
+
+### Added
+
+#### Components
+* `Icon` component (using `svg-react-loader`, see `README.md`). #218 
+* `Button`(#173), `IconButton`(##232), `LinkButton`(#262), `YoastButton`(#257) components.
+* `InputField` component (using `DraftJS` ). #204 
+* `ListTable`, `Row` and `Cell` component. #219 
+* `ProgressBar`component. #172 
+* `IFrame` and `ArticleContent` components. #242 
+* `StackedProgressBar` component. #270
+* `SeoScoreAssessment(s)` components. #272
+* `WordpressFeed` component. #273 
+* `SeoAssessment` component. #281 
+
+##### Other
+* Added `getFeed` RSS reader utility function. #267 
+* Added `ContentAnalysis` reducer and actions. #224
+* Added `striptags` utility library. #276 
+* Added various documentation. #239 
+
+### Other
+* Improved development environment. (#238, #174 )
+
+#### Onboarding wizard
+* Added max width for content in Onboarding wizard (#250), and `fullWidth` property for full screen support (#269).
+* Changed Onboarding wizard header. #256  
+* Added paragraph for additional information to Onboard wizard `Choice component`. #254
+
 ## 2.8.0: August 8th, 2017
 
 ### Added

app/AppWrapper.js

@@ -0,0 +1,27 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Provider } from "react-redux";
+import { AppContainer } from "react-hot-loader";
+
+import DevTools from "./utils/DevTools";
+import configureStore from "./configureStore";
+
+const store = configureStore();
+
+const AppWrapper = ( { children } ) => (
+	<AppContainer>
+		<Provider store={ store }>
+			<div>
+				{ children }
+				<DevTools />
+			</div>
+		</Provider>
+	</AppContainer>
+);
+
+AppWrapper.propTypes = {
+	children: PropTypes.node.isRequired,
+};
+
+export default AppWrapper;
+

app/DashboardWidgetWrapper.js

@@ -0,0 +1,71 @@
+import React from "react";
+import styled from "styled-components";
+
+import SeoAssessment from "../composites/Plugin/DashboardWidget/components/SeoAssessment";
+import WordpressFeed from "../composites/Plugin/DashboardWidget/components/WordpressFeed";
+
+export const DashboardWidgetContainer = styled.div`
+   min-height: 700px;
+   background-color: white;
+`;
+
+export const DashboardContainer = styled.div`
+	padding: 8px;
+	border: 1px solid black;
+	width: 400px;
+`;
+
+/**
+ * Returns the ContentAnalysis component.
+ *
+ * @returns {ReactElement} The ContentAnalysis component.
+ */
+export default function DashboardWidget() {
+	const seoAssessmentItems = [
+		{
+			value: 33,
+			color: "#F00",
+			html: "Posts with a <b>bad</b> score",
+		},
+		{
+			value: 20,
+			color: "#FF0",
+			html: "Posts with a <b>decent</b> score",
+		},
+		{
+			value: 47,
+			color: "#0F0",
+			html: "Posts with a <b>good</b> score",
+		},
+	];
+
+	const feed = {
+		link: "https://www.yoast.com",
+		title: "Feed title",
+		items: [
+			{
+				title: "Wordpress SEO",
+				link: "https://www.yoast.com/1",
+				description: "Some arbitrary description any blog post could have",
+			},
+			{
+				title: "Wordpress SEO",
+				link: "https://www.yoast.com/2",
+				description: "Some arbitrary description any blog post could have",
+			},
+		],
+	};
+
+	return (
+		<DashboardWidgetContainer>
+			<DashboardContainer>
+				<SeoAssessment
+					seoAssessmentText="Your SEO score is decent overall, but can be improved! Get to work!"
+					seoAssessmentItems={ seoAssessmentItems }/>
+				<WordpressFeed
+					feed={ feed }
+					footerHtml="View our blog on yoast.com!"/>
+			</DashboardContainer>
+		</DashboardWidgetContainer>
+	);
+}