From bc56ba4443ecd0df14fc16035e0a3672c7b5d500 Mon Sep 17 00:00:00 2001
From: Filipe Varela <keoshi@keoshi.com>
Date: Thu, 13 Dec 2018 20:46:56 +0000
Subject: [PATCH] Settings: add descriptions to settings sections (#10940)

Fixes #10688

#### Changes proposed in this Pull Request:

* Adds descriptions to all settings sections headers explaining the theme of the options below.
* Cleans up dependencies paths on `settings/index.jsx`.

![image](https://user-images.githubusercontent.com/390760/49929419-606e1780-feba-11e8-82e2-8da1b914524a.png)

#### Testing instructions:

* Fire up this PR.
* Go to Jetpack settings.
* Read the descriptions on each section.

#### Proposed changelog entry for your changes:

* Settings: add descriptions to settings sections
---
 _inc/client/discussion/index.jsx |  8 ++++++++
 _inc/client/security/index.jsx   |  8 ++++++++
 _inc/client/settings/index.jsx   | 10 +++++-----
 _inc/client/settings/style.scss  |  9 ++++++++-
 _inc/client/sharing/index.jsx    |  8 ++++++++
 _inc/client/traffic/index.jsx    |  8 ++++++++
 _inc/client/writing/index.jsx    |  8 +++++++-
 7 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/_inc/client/discussion/index.jsx b/_inc/client/discussion/index.jsx
index 9bec60f77b18c..d203c8dc0e432 100644
--- a/_inc/client/discussion/index.jsx
+++ b/_inc/client/discussion/index.jsx
@@ -3,10 +3,12 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule, getModuleOverride } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode, isCurrentUserLinked } from 'state/connection';
@@ -44,6 +46,12 @@ export class Discussion extends React.Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Open your site to comments and invite subscribers to get alerts about your latest work.' ) }
+					className="jp-settings-description"
+				/>
+
 				<Comments
 					{ ...commonProps }
 					isModuleFound={ this.props.isModuleFound }
diff --git a/_inc/client/security/index.jsx b/_inc/client/security/index.jsx
index 5594da15d944c..bcd97ee82c3e1 100644
--- a/_inc/client/security/index.jsx
+++ b/_inc/client/security/index.jsx
@@ -7,10 +7,12 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import get from 'lodash/get';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode } from 'state/connection';
@@ -94,6 +96,12 @@ export class Security extends Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Keep your site safe with state-of-the-art security and receive notifications of technical problems.' ) }
+					className="jp-settings-description"
+				/>
+
 				{ foundBackups && <BackupsScan { ...commonProps } /> }
 				{ foundMonitor && <Monitor { ...commonProps } /> }
 				{ foundAkismet && (
diff --git a/_inc/client/settings/index.jsx b/_inc/client/settings/index.jsx
index dde08ab7b88c6..a7f6896b5920f 100644
--- a/_inc/client/settings/index.jsx
+++ b/_inc/client/settings/index.jsx
@@ -8,12 +8,12 @@ import { translate as __ } from 'i18n-calypso';
  * Internal dependencies
  */
 import Discussion from 'discussion';
-import Security from 'security/index.jsx';
+import Security from 'security';
 import Traffic from 'traffic';
-import Writing from 'writing/index.jsx';
-import Sharing from 'sharing/index.jsx';
-import SearchableModules from 'searchable-modules/index.jsx';
-import Privacy from 'privacy/index.jsx';
+import Writing from 'writing';
+import Sharing from 'sharing';
+import SearchableModules from 'searchable-modules';
+import Privacy from 'privacy';
 
 export default class extends React.Component {
 	static displayName = 'SearchableSettings';
diff --git a/_inc/client/settings/style.scss b/_inc/client/settings/style.scss
index c30ceb6346952..088f14921a0b2 100644
--- a/_inc/client/settings/style.scss
+++ b/_inc/client/settings/style.scss
@@ -16,4 +16,11 @@
 	.dops-search.is-expanded-to-container {
 		height: 46px;
 	}
-}
\ No newline at end of file
+}
+
+.dops-card.jp-settings-description {
+	margin: 24px 0 8px;
+	padding: 0;
+	background: none;
+	box-shadow: none;
+}
diff --git a/_inc/client/sharing/index.jsx b/_inc/client/sharing/index.jsx
index 9d746c355d3c3..a37f3fff3f98e 100644
--- a/_inc/client/sharing/index.jsx
+++ b/_inc/client/sharing/index.jsx
@@ -3,10 +3,12 @@
  */
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode, isCurrentUserLinked, getConnectUrl } from 'state/connection';
@@ -51,6 +53,12 @@ class Sharing extends Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Share your content on social media and increase audience engagement.' ) }
+					className="jp-settings-description"
+				/>
+
 				{
 					foundPublicize && (
 						<Publicize
diff --git a/_inc/client/traffic/index.jsx b/_inc/client/traffic/index.jsx
index d36fac64c58ea..d92ab2a77f146 100644
--- a/_inc/client/traffic/index.jsx
+++ b/_inc/client/traffic/index.jsx
@@ -3,10 +3,12 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
+import { translate as __ } from 'i18n-calypso';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule, getModuleOverride } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { isDevMode, isUnavailableInDevMode } from 'state/connection';
@@ -64,6 +66,12 @@ export class Traffic extends React.Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Maximize your site’s visibility in search engines and view traffic stats in real time.' ) }
+					className="jp-settings-description"
+				/>
+
 				{
 					foundSearch && (
 						<Search
diff --git a/_inc/client/writing/index.jsx b/_inc/client/writing/index.jsx
index 2e0692ef39396..59642b0017c44 100644
--- a/_inc/client/writing/index.jsx
+++ b/_inc/client/writing/index.jsx
@@ -4,11 +4,11 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import { translate as __ } from 'i18n-calypso';
-import Card from 'components/card';
 
 /**
  * Internal dependencies
  */
+import Card from 'components/card';
 import { getModule } from 'state/modules';
 import { getSettings } from 'state/settings';
 import { userCanManageModules } from 'state/initial-state';
@@ -71,6 +71,12 @@ export class Writing extends React.Component {
 		return (
 			<div>
 				<QuerySite />
+
+				<Card
+					title={ __( 'Compose content the way you want to and streamline your publishing experience.' ) }
+					className="jp-settings-description"
+				/>
+
 				{
 					this.props.isModuleFound( 'masterbar' ) && ! this.props.masterbarIsAlwaysActive && (
 						<Masterbar connectUrl={ this.props.connectUrl } { ...commonProps } />