Site Settings: Implemenet advanced settings toggle in AfterTheDeadline

Automattic · Feb 9, 2017 · 202a41a · 202a41a
1 parent 6e46267
commit 202a41a
Showing 1 changed file with 24 additions and 4 deletions.
diff --git a/client/my-sites/site-settings/composing/after-the-deadline.jsx b/client/my-sites/site-settings/composing/after-the-deadline.jsx
@@ -34,10 +34,22 @@ class AfterTheDeadline extends Component {
 		fields: PropTypes.object,
 	};
 
+	state = {
+		advancedOptionsVisible: false,
+	};
+
 	onChangeIgnoredPhrases = ( phrases ) => {
 		this.props.setFieldValue( 'ignored_phrases', phrases.join( ',' ) );
 	};
 
+	onAdvancedOptionsClick = ( event ) => {
+		event.preventDefault();
+
+		this.setState( {
+			advancedOptionsVisible: ! this.state.advancedOptionsVisible,
+		} );
+	};
+
 	renderToggle( name, isDisabled, label ) {
 		const {
 			fields,
@@ -177,10 +189,18 @@ class AfterTheDeadline extends Component {
 					disabled={ isRequestingSettings || isSavingSettings }
 					/>
 
-				{ this.renderProofreadingSection() }
-				{ this.renderAutoLanguageDetectionSection() }
-				{ this.renderEnglishOptionsSection() }
-				{ this.renderIgnoredPhrasesSection() }
+				<a href="#" onClick={ this.onAdvancedOptionsClick }>
+					{ translate( 'Advanced Options' ) }
+				</a>
+
+				{ this.state.advancedOptionsVisible && (
+					<div>
+						{ this.renderProofreadingSection() }
+						{ this.renderAutoLanguageDetectionSection() }
+						{ this.renderEnglishOptionsSection() }
+						{ this.renderIgnoredPhrasesSection() }
+					</div>
+				) }
 			</FormFieldset>
 		);
 	}