Features selection during install

assets/css/dashboard.css

@@ -1,3 +1,5 @@
+@import "@10up/component-tooltip";
+
 :root {
 	--statusOk: #6aa000;
 	--statusWarning: #e3e600;
@@ -477,27 +479,62 @@ h2.ep-list-features {
 
 .intro-container {
 	display: flex;
+	flex-direction: column;
 	justify-content: center;
-	padding-left: 10%;
-	padding-right: 10%;
+	position: relative;
 	text-align: center;
-}
 
-.intro-box {
-	width: 33%;
+	@media (--tablet-min) {
+		flex-direction: row;
+	}
+
+	@media (--wide-min) {
+		margin-left: 10%;
+		margin-right: 10%;
+	}
+
+	& h2 {
+		color: #626262;
+		height: 8%;
+	}
+
+	& p {
+		margin-left: auto;
+		margin-right: auto;
+		max-width: 300px;
+	}
 }
 
-.intro-container a {
-	font-weight: 700;
+.ep-feature-list {
+	display: inline-block;
+	margin: 0;
+	text-align: left;
+	vertical-align: top;
+
+	& li {
+		align-items: center;
+		display: flex;
+		margin: 4px 3px;
+	}
+
+	& [role="tooltip"].a11y-tip__help--top {
+		font-size: inherit;
+	}
 }
 
-.intro-container h2 {
-	color: #626262;
-	height: 8%;
+.ep-feature-info {
+	text-decoration: none;
+
+	& .dashicons {
+		font-size: 14px;
+		position: relative;
+		top: 2px;
+	}
 }
 
-.intro-container p {
-	max-width: 300px;
+.intro-box {
+	flex-grow: 2;
+	margin-bottom: 2em;
 }
 
 .intro-container-success {
@@ -538,78 +575,68 @@ h2.ep-list-features {
 }
 
 .ep-copy-text {
-	padding: 0 15% 0 15%;
-}
-
-@media (--tablet-max) {
 
-	.intro-box {
-		width: auto;
+	@media (--tablet-min) {
+		padding: 0 9% 0 9%;
 	}
 
-	.ep-copy-text {
-		padding: 0 9% 0 9%;
+	& a {
+		font-weight: 700;
 	}
 }
 
 .ep-circle {
+	background: #fff;
 	border-radius: 50%;
-	color: #fff;
+	color: #626262;
 	display: inline-block;
 	font-size: 16px;
 	font-weight: 400;
 	height: 6em;
 	line-height: 2.8em;
 	margin: 0 1em;
-	position: relative;
 	text-align: center;
 	width: 6em;
-}
-
-.ep-circle p {
-	border: 0;
-	font-size: 50px;
-	font-weight: 700;
-	line-height: 0.5em;
-	margin: 0;
-}
 
-.red-ep-circle {
-	background-color: #d73c38;
-	color: #fff;
+	& p {
+		border: 0;
+		font-size: 50px;
+		font-weight: 700;
+		line-height: 0.5em;
+		margin: 0;
+	}
 }
 
-.ep-middle-circle::after {
-	background: #d4d4d4;
-	content: "";
-	height: 0.2em;
-	left: -14em;
-	position: absolute;
-	top: 2.9em;
-	width: 34em;
-	z-index: -1;
-}
+.ep-circle--first {
 
-@media (--wide-max) {
+	@media (--tablet-min) {
 
-	.ep-middle-circle::after {
-		left: -8em;
-		width: 21.9em;
+		&::after {
+			background: #d4d4d4;
+			content: "";
+			height: 0.2em;
+			left: 50%;
+			position: absolute;
+			top: 2.9em;
+			transform: translateX(-50%);
+			width: 75%;
+			z-index: -1;
+		}
 	}
 }
 
+.ep-circle--active {
+	background-color: #d73c38;
+	color: #fff;
+}
+
 @media (--tablet-min) {
 
 	.wrap h1 {
 		line-height: 1.75;
 	}
 }
 
-.white-ep-circle {
-	background: #fff;
-	color: #626262;
-}
-
 .wrap.intro {
 	margin-bottom: 30px;
 	margin-top: 30px;
@@ -629,12 +656,13 @@ h2.ep-list-features {
 
 .setup-message {
 	clear: both;
-	padding: 2em 0;
 	text-align: center;
 }
 
-.setup-message .setup-button {
+.setup-button {
+	-webkit-appearance: none;
 	background-color: #e63e3b;
+	border: none;
 	border-radius: 10px;
 	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
 	color: #fff;
@@ -644,7 +672,7 @@ h2.ep-list-features {
 	text-decoration: none;
 }
 
-.setup-message .setup-button:hover {
+.setup-button:hover {
 	background-color: #b93431;
 	color: #ffe8ed;
 }

assets/js/dashboard.js

@@ -1,3 +1,8 @@
+/**
+ * Internal dependencies.
+ */
+import Tooltip from '@10up/component-tooltip';
+
 /**
  * WordPress dependencies.
  */
@@ -118,6 +123,14 @@ const onClick = (event) => {
  */
 const featuresEl = document.querySelector('.ep-features');
 
-featuresEl.addEventListener('change', onToggle);
-featuresEl.addEventListener('submit', onSubmit);
-featuresEl.addEventListener('click', onClick);
+if (featuresEl) {
+	featuresEl.addEventListener('change', onToggle);
+	featuresEl.addEventListener('submit', onSubmit);
+	featuresEl.addEventListener('click', onClick);
+}
+
+/**
+ * Tooltips.
+ */
+// eslint-disable-next-line no-new
+new Tooltip('.a11y-tip');

includes/classes/Feature.php

@@ -36,6 +36,22 @@ abstract class Feature {
 	 */
 	public $title;
 
+	/**
+	 * Feature summary
+	 *
+	 * @var string
+	 * @since  4.0.0
+	 */
+	public $summary;
+
+	/**
+	 * URL to feature documentation.
+	 *
+	 * @var string
+	 * @since  4.0.0
+	 */
+	public $docs_url;
+
 	/**
 	 * Optional feature default settings
 	 *
@@ -68,6 +84,14 @@ abstract class Feature {
 	 */
 	public $group_order;
 
+	/**
+	 * True if activation of this feature should be available during
+	 * installation.
+	 *
+	 * @since 4.0.0
+	 * @var boolean
+	 */
+	public $available_during_installation = false;
 
 	/**
 	 * Run on every page load for feature to set itself up
@@ -77,11 +101,15 @@ abstract class Feature {
 	abstract public function setup();
 
 	/**
-	 * Implement to output feature box summary
+	 * Output feature box summary
 	 *
-	 * @since  3.0
+	 * @since 2.1
 	 */
-	abstract public function output_feature_box_summary();
+	public function output_feature_box_summary() {
+		if ( $this->summary ) {
+			echo '<p>' . esc_html( $this->summary ) . '</p>';
+		}
+	}
 
 	/**
 	 * Implement to output feature box long text

includes/classes/Feature/Autosuggest/Autosuggest.php

@@ -42,6 +42,10 @@ public function __construct() {
 
 		$this->title = esc_html__( 'Autosuggest', 'elasticpress' );
 
+		$this->summary = __( 'Suggest relevant content as text is entered into the search field.', 'elasticpress' );
+
+		$this->docs_url = __( 'https://elasticpress.zendesk.com/hc/en-us/articles/360050447492-Configuring-ElasticPress-via-the-Plugin-Dashboard#autosuggest', 'elasticpress' );
+
 		$this->requires_install_reindex = true;
 
 		$this->default_settings = [
@@ -50,18 +54,9 @@ public function __construct() {
 			'trigger_ga_event'     => '0',
 		];
 
-		parent::__construct();
-	}
+		$this->available_during_installation = true;
 
-	/**
-	 * Output feature box summary
-	 *
-	 * @since 2.4
-	 */
-	public function output_feature_box_summary() {
-		?>
-		<p><?php esc_html_e( 'Suggest relevant content as text is entered into the search field.', 'elasticpress' ); ?></p>
-		<?php
+		parent::__construct();
 	}
 
 	/**

includes/classes/Feature/Comments/Comments.php

@@ -25,8 +25,14 @@ class Comments extends Feature {
 	 * @since 3.6.0
 	 */
 	public function __construct() {
-		$this->slug                     = 'comments';
-		$this->title                    = esc_html__( 'Comments', 'elasticpress' );
+		$this->slug = 'comments';
+
+		$this->title = esc_html__( 'Comments', 'elasticpress' );
+
+		$this->summary = __( 'Improve comment search relevancy and query performance.', 'elasticpress' );
+
+		$this->docs_url = __( 'https://elasticpress.zendesk.com/hc/en-us/articles/360050447492-Configuring-ElasticPress-via-the-Plugin-Dashboard#comments', 'elasticpress' );
+
 		$this->requires_install_reindex = true;
 
 		parent::__construct();
@@ -75,17 +81,6 @@ public function search_setup() {
 		add_filter( 'ep_elasticpress_enabled', [ $this, 'integrate_search_queries' ], 10, 2 );
 	}
 
-	/**
-	 * Output feature box summary
-	 *
-	 * @since 3.6.0
-	 */
-	public function output_feature_box_summary() {
-		?>
-		<p><?php esc_html_e( 'Improve comment search relevancy and query performance.', 'elasticpress' ); ?></p>
-		<?php
-	}
-
 	/**
 	 * Output feature box long text
 	 *

includes/classes/Feature/Documents/Documents.php

@@ -27,6 +27,10 @@ public function __construct() {
 
 		$this->title = esc_html__( 'Documents', 'elasticpress' );
 
+		$this->summary = __( 'Indexes text inside of popular file types, and adds those files types to search results.', 'elasticpress' );
+
+		$this->docs_url = __( 'https://elasticpress.zendesk.com/hc/en-us/articles/360050447492-Configuring-ElasticPress-via-the-Plugin-Dashboard#documents', 'elasticpress' );
+
 		$this->requires_install_reindex = false;
 
 		parent::__construct();
@@ -345,17 +349,6 @@ public function requirements_status() {
 		return $status;
 	}
 
-	/**
-	 * Output feature box summary
-	 *
-	 * @since  2.3
-	 */
-	public function output_feature_box_summary() {
-		?>
-		<p><?php esc_html_e( 'Indexes text inside of popular file types, and adds those files types to search results.', 'elasticpress' ); ?></p>
-		<?php
-	}
-
 	/**
 	 * Output feature box long
 	 *