From 54801effde79128a86351cd0304c48d2ea8b6f15 Mon Sep 17 00:00:00 2001
From: Scott Evans <git@scott.ee>
Date: Wed, 8 May 2019 16:06:08 +0100
Subject: [PATCH 1/2] Use support info component for comment feature
 information

---
 _inc/client/discussion/comments.jsx | 166 ++++++++++++----------------
 _inc/client/discussion/style.scss   |  16 +++
 2 files changed, 86 insertions(+), 96 deletions(-)
 create mode 100644 _inc/client/discussion/style.scss

diff --git a/_inc/client/discussion/comments.jsx b/_inc/client/discussion/comments.jsx
index 34d39d16bfcf9..d6929a3a1d3be 100644
--- a/_inc/client/discussion/comments.jsx
+++ b/_inc/client/discussion/comments.jsx
@@ -14,6 +14,9 @@ import { withModuleSettingsFormHelpers } from 'components/module-settings/with-m
 import SettingsCard from 'components/settings-card';
 import SettingsGroup from 'components/settings-group';
 import CompactFormToggle from 'components/form/form-toggle/compact';
+import SupportInfo from 'components/support-info';
+
+import './style.scss';
 
 class CommentsComponent extends React.Component {
 	/**
@@ -135,110 +138,81 @@ class CommentsComponent extends React.Component {
 				{ ( foundGravatar || foundMarkdown || foundCommentLikes ) && (
 					<SettingsGroup>
 						{ foundGravatar && (
-							<FormFieldset>
-								<ModuleToggle
-									slug="gravatar-hovercards"
-									compact
-									activated={ this.props.getOptionValue( 'gravatar-hovercards' ) }
-									toggling={ this.props.isSavingAnyOption( 'gravatar-hovercards' ) }
-									toggleModule={ this.props.toggleModuleNow }
-								>
-									<span className="jp-form-toggle-explanation">
-										{ gravatar.description + ' ' }
-										<a
-											href={ gravatar.learn_more_button }
-											target="_blank"
-											rel="noopener noreferrer"
-										>
-											{ __( 'Learn more' ) }
-										</a>
-										<span className="jp-form-toggle-privacy-info">
-											<a
-												href={ gravatar.learn_more_button + '#privacy' }
-												target="_blank"
-												rel="noopener noreferrer"
-											>
-												{ __( 'Privacy Information' ) }
-											</a>
-										</span>
-									</span>
-								</ModuleToggle>
-							</FormFieldset>
+							<div className="jp-toggle-set">
+								<FormFieldset>
+									<ModuleToggle
+										slug="gravatar-hovercards"
+										compact
+										activated={ this.props.getOptionValue( 'gravatar-hovercards' ) }
+										toggling={ this.props.isSavingAnyOption( 'gravatar-hovercards' ) }
+										toggleModule={ this.props.toggleModuleNow }
+									>
+										<span className="jp-form-toggle-explanation">{ gravatar.description }</span>
+									</ModuleToggle>
+								</FormFieldset>
+								<SupportInfo
+									text={ __( 'Show Gravatar hover cards alongside comments.' ) }
+									link={ gravatar.learn_more_button }
+									privacyLink={ gravatar.learn_more_button + '#privacy' }
+								/>
+							</div>
 						) }
 						{ foundMarkdown && (
-							<FormFieldset>
-								<CompactFormToggle
-									checked={
-										!! this.props.getOptionValue(
-											'wpcom_publish_comments_with_markdown',
-											'markdown'
-										)
-									}
-									disabled={
-										this.props.isSavingAnyOption( [
+							<div className="jp-toggle-set">
+								<FormFieldset>
+									<CompactFormToggle
+										checked={
+											!! this.props.getOptionValue(
+												'wpcom_publish_comments_with_markdown',
+												'markdown'
+											)
+										}
+										disabled={
+											this.props.isSavingAnyOption( [
+												'markdown',
+												'wpcom_publish_comments_with_markdown',
+											] ) || 'inactive' === this.props.getModuleOverride( 'markdown' )
+										}
+										toggling={ this.props.isSavingAnyOption( [
 											'markdown',
 											'wpcom_publish_comments_with_markdown',
-										] ) || 'inactive' === this.props.getModuleOverride( 'markdown' )
-									}
-									toggling={ this.props.isSavingAnyOption( [
-										'markdown',
-										'wpcom_publish_comments_with_markdown',
-									] ) }
-									onChange={ this.handleMarkdownCommentsToggle }
-								>
-									<span className="jp-form-toggle-explanation">
-										{ __( 'Enable Markdown use for comments.' ) + ' ' }
-										<a
-											href={ markdown.learn_more_button }
-											target="_blank"
-											rel="noopener noreferrer"
-										>
-											{ __( 'Learn more' ) }
-										</a>
-										<span className="jp-form-toggle-privacy-info">
-											<a
-												href={ markdown.learn_more_button + '#privacy' }
-												target="_blank"
-												rel="noopener noreferrer"
-											>
-												{ __( 'Privacy Information' ) }
-											</a>
+										] ) }
+										onChange={ this.handleMarkdownCommentsToggle }
+									>
+										<span className="jp-form-toggle-explanation">
+											{ __( 'Enable Markdown use for comments.' ) }
 										</span>
-									</span>
-								</CompactFormToggle>
-							</FormFieldset>
+									</CompactFormToggle>
+								</FormFieldset>
+								<SupportInfo
+									text={ __( 'Allow readers to use markdown in comments.' ) }
+									link={ markdown.learn_more_button }
+									privacyLink={ markdown.learn_more_button + '#privacy' }
+								/>
+							</div>
 						) }
 						{ foundCommentLikes && (
-							<FormFieldset>
-								<ModuleToggle
-									slug="comment-likes"
-									compact
-									disabled={ commentLikesUnavailable }
-									activated={ commentLikesActive }
-									toggling={ this.props.isSavingAnyOption( 'comment-likes' ) }
-									toggleModule={ this.props.toggleModuleNow }
-								>
-									<span className="jp-form-toggle-explanation">
-										{ 'Enable comment likes.' + ' ' }
-										<a
-											href="https://jetpack.com/support/comment-likes/"
-											target="_blank"
-											rel="noopener noreferrer"
-										>
-											{ __( 'Learn more' ) }
-										</a>
-										<span className="jp-form-toggle-privacy-info">
-											<a
-												href="https://jetpack.com/support/comment-likes/#privacy"
-												target="_blank"
-												rel="noopener noreferrer"
-											>
-												{ __( 'Privacy Information' ) }
-											</a>
+							<div className="jp-toggle-set">
+								<FormFieldset>
+									<ModuleToggle
+										slug="comment-likes"
+										compact
+										disabled={ commentLikesUnavailable }
+										activated={ commentLikesActive }
+										toggling={ this.props.isSavingAnyOption( 'comment-likes' ) }
+										toggleModule={ this.props.toggleModuleNow }
+									>
+										<span className="jp-form-toggle-explanation">
+											{ __( 'Enable comment likes.' ) }
 										</span>
-									</span>
-								</ModuleToggle>
-							</FormFieldset>
+									</ModuleToggle>
+								</FormFieldset>
+								<SupportInfo
+									text={ __( 'Allow readers to like individual comments.' ) }
+									link="https://jetpack.com/support/comment-likes/"
+									privacyLink="https://jetpack.com/support/comment-likes/#privacy"
+								/>
+							</div>
 						) }
 					</SettingsGroup>
 				) }
diff --git a/_inc/client/discussion/style.scss b/_inc/client/discussion/style.scss
new file mode 100644
index 0000000000000..e569b90e506a6
--- /dev/null
+++ b/_inc/client/discussion/style.scss
@@ -0,0 +1,16 @@
+@import '../scss/rem';
+@import '../scss/layout';
+
+.jp-form-settings-group .jp-toggle-set {
+	position: relative;
+
+	.jp-support-info {
+		right: rem( -20px );
+		top: rem( 5px );
+
+		@include breakpoint( "<480px" ) {
+			right: rem( -32px );
+			top: rem( 5px );
+		}
+	}
+}

From f4f348cf949cbc4047fb6ae468463fbb249a6dab Mon Sep 17 00:00:00 2001
From: Scott Evans <git@scott.ee>
Date: Thu, 16 May 2019 10:14:53 +0100
Subject: [PATCH 2/2] Update _inc/client/discussion/comments.jsx

s/hover cards/hovercards
---
 _inc/client/discussion/comments.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/_inc/client/discussion/comments.jsx b/_inc/client/discussion/comments.jsx
index d6929a3a1d3be..514cc2ede1e7e 100644
--- a/_inc/client/discussion/comments.jsx
+++ b/_inc/client/discussion/comments.jsx
@@ -151,7 +151,7 @@ class CommentsComponent extends React.Component {
 									</ModuleToggle>
 								</FormFieldset>
 								<SupportInfo
-									text={ __( 'Show Gravatar hover cards alongside comments.' ) }
+									text={ __( 'Show Gravatar hovercards alongside comments.' ) }
 									link={ gravatar.learn_more_button }
 									privacyLink={ gravatar.learn_more_button + '#privacy' }
 								/>