Accordion: replace ExplanationBox with Accordion

app/soapbox/features/public_timeline/index.js

@@ -6,18 +6,19 @@ import StatusListContainer from '../ui/containers/status_list_container';
 import Column from '../../components/column';
 import ColumnSettingsContainer from './containers/column_settings_container';
 import HomeColumnHeader from '../../components/home_column_header';
-import ExplanationBox from '../ui/components/explanation_box';
+import Accordion from 'soapbox/features/ui/components/accordion';
 import { expandPublicTimeline } from '../../actions/timelines';
 import { connectPublicStream } from '../../actions/streaming';
 import { Link } from 'react-router-dom';
-import { getSettings } from 'soapbox/actions/settings';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
 
 const messages = defineMessages({
   title: { id: 'column.public', defaultMessage: 'Federated timeline' },
 });
 
 const mapStateToProps = state => {
-  const onlyMedia = getSettings(state).getIn(['public', 'other', 'onlyMedia']);
+  const settings = getSettings(state);
+  const onlyMedia = settings.getIn(['public', 'other', 'onlyMedia']);
 
   const timelineId = 'public';
 
@@ -26,6 +27,7 @@ const mapStateToProps = state => {
     onlyMedia,
     hasUnread: state.getIn(['timelines', `${timelineId}${onlyMedia ? ':media' : ''}`, 'unread']) > 0,
     siteTitle: state.getIn(['instance', 'title']),
+    explanationBoxExpanded: settings.get('explanationBox'),
   };
 };
 
@@ -44,6 +46,7 @@ class CommunityTimeline extends React.PureComponent {
     onlyMedia: PropTypes.bool,
     timelineId: PropTypes.string,
     siteTitle: PropTypes.string,
+    explanationBoxExpanded: PropTypes.bool,
   };
 
   componentDidMount() {
@@ -69,23 +72,48 @@ class CommunityTimeline extends React.PureComponent {
     }
   }
 
+  toggleExplanationBox = (setting) => {
+    this.props.dispatch(changeSetting(['explanationBox'], setting));
+  }
+
   handleLoadMore = maxId => {
     const { dispatch, onlyMedia } = this.props;
     dispatch(expandPublicTimeline({ maxId, onlyMedia }));
   }
 
   render() {
-    const { intl, hasUnread, onlyMedia, timelineId, siteTitle } = this.props;
+    const { intl, hasUnread, onlyMedia, timelineId, siteTitle, explanationBoxExpanded } = this.props;
 
     return (
       <Column label={intl.formatMessage(messages.title)}>
         <HomeColumnHeader activeItem='fediverse' active={hasUnread} >
           <ColumnSettingsContainer />
         </HomeColumnHeader>
-        <ExplanationBox
-          title={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
-          explanation={<FormattedMessage id='fediverse_tab.explanation_box.explanation' defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.' values={{ site_title: siteTitle, local: <Link to='/timeline/local'><FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: siteTitle }} /></Link> }} />}
-        />
+        <div className='explanation-box'>
+          <Accordion
+            headline={<FormattedMessage id='fediverse_tab.explanation_box.title' defaultMessage='What is the Fediverse?' />}
+            content={(
+              <FormattedMessage
+                id='fediverse_tab.explanation_box.explanation'
+                defaultMessage='{site_title} is part of the Fediverse, a social network made up of thousands of independent social media sites (aka "servers"). The posts you see here are from 3rd-party servers. You have the freedom to engage with them, or to block any server you don&apos;t like. Pay attention to the full username after the second @ symbol to know which server a post is from. To see only {site_title} posts, visit {local}.'
+                values={{
+                  site_title: siteTitle,
+                  local: (
+                    <Link to='/timeline/local'>
+                      <FormattedMessage
+                        id='empty_column.home.local_tab'
+                        defaultMessage='the {site_title} tab'
+                        values={{ site_title: siteTitle }}
+                      />
+                    </Link>
+                  ),
+                }}
+              />
+            )}
+            expanded={explanationBoxExpanded}
+            onToggle={this.toggleExplanationBox}
+          />
+        </div>
         <StatusListContainer
           scrollKey={`${timelineId}_timeline`}
           timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}

app/soapbox/features/soapbox_config/index.js

@@ -9,8 +9,6 @@ import {
   SimpleForm,
   FieldsGroup,
   TextInput,
-  Checkbox,
-  FileChooser,
   SimpleTextarea,
   FileChooserLogo,
   FormPropTypes,
@@ -63,6 +61,7 @@ class SoapboxConfig extends ImmutablePureComponent {
   state = {
     isLoading: false,
     soapbox: this.props.soapbox,
+    jsonEditorExpanded: false,
     rawJSON: JSON.stringify(this.props.soapbox, null, 2),
     jsonValid: true,
   }
@@ -162,6 +161,8 @@ class SoapboxConfig extends ImmutablePureComponent {
     return defaultConfig.mergeDeep(this.state.soapbox);
   }
 
+  toggleJSONEditor = (value) => this.setState({ jsonEditorExpanded: value });
+
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.soapbox !== this.props.soapbox) {
       this.putConfig(this.props.soapbox);
@@ -359,6 +360,8 @@ class SoapboxConfig extends ImmutablePureComponent {
                   />
                 </div>
               )}
+              expanded={this.state.jsonEditorExpanded}
+              onToggle={this.toggleJSONEditor}
             />
           </fieldset>
           <div className='actions'>

app/soapbox/features/ui/components/accordion.js

@@ -13,28 +13,30 @@ export default @injectIntl class Accordion extends React.PureComponent {
   static propTypes = {
     headline: PropTypes.string.isRequired,
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    expanded: PropTypes.bool,
+    onToggle: PropTypes.func,
     intl: PropTypes.object.isRequired,
   };
 
-  state = {
+  static defaultProps = {
     expanded: false,
+    onToggle: () => {},
   }
 
-  handleToggleAccordion = (e) => {
-    this.setState({ expanded: !this.state.expanded });
+  handleToggle = (e) => {
+    this.props.onToggle(!this.props.expanded);
     e.preventDefault();
   }
 
   render() {
-    const { headline, content, intl } = this.props;
-    const { expanded } = this.state;
+    const { headline, content, expanded, intl } = this.props;
 
     return (
       <div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
         <button
           type='button'
           className='accordion__title'
-          onClick={this.handleToggleAccordion}
+          onClick={this.handleToggle}
           title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
         >
           {headline}

app/soapbox/features/ui/components/explanation_box.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
-import { defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'soapbox/components/icon_button';
-import { changeSetting, getSettings } from 'soapbox/actions/settings';
-
-
-const messages = defineMessages({
-  collapse: { id: 'explanation_box.collapse', defaultMessage: 'Collapse explanation box' },
-  expand: { id: 'explanation_box.expand', defaultMessage: 'Expand explanation box' },
-});
-
-const mapStateToProps = state => {
-  return {
-    settings: getSettings(state),
-  };
-};
-
-const mapDispatchToProps = (dispatch) => ({
-  toggleExplanationBox(setting) {
-    dispatch(changeSetting(['explanationBox'], setting));
-  },
-});
-
-export default @connect(mapStateToProps, mapDispatchToProps)
-@injectIntl
-class ExplanationBox extends React.PureComponent {
-
-  static propTypes = {
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    explanation: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    dismissable: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    settings: ImmutablePropTypes.map.isRequired,
-    toggleExplanationBox: PropTypes.func,
-  };
-
-  handleToggleExplanationBox = () => {
-    this.props.toggleExplanationBox(this.props.settings.get('explanationBox') === true ? false : true);
-  }
-
-  render() {
-    const { title, explanation, dismissable, settings, intl } = this.props;
-
-    return (
-      <div className='explanation-box'>
-        {title && <div className='explanation-box__title'>{title}
-          <IconButton
-            className='explanation_box__toggle' size={20}
-            title={settings.get('explanationBox') ? intl.formatMessage(messages.collapse) : intl.formatMessage(messages.expand)}
-            icon={settings.get('explanationBox') ? 'angle-down' : 'angle-up'}
-            onClick={this.handleToggleExplanationBox}
-          />
-        </div>}
-        {settings.get('explanationBox') &&
-          <div className='explanation-box__explanation'>
-            {explanation}
-            {dismissable && <span className='explanation-box__dismiss'>Dismiss</span>}
-          </div>
-        }
-      </div>
-    );
-  }
-
-}

app/styles/components/accordion.scss

@@ -2,7 +2,6 @@
   margin: 5px 20px;
 }
 
-.explanation-box,
 .accordion {
   color: var(--primary-text-color);
   padding: 15px 20px;
@@ -15,11 +14,15 @@
     font-weight: bold !important;
     font-size: 16px !important;
     background: transparent !important;
+    color: var(--primary-text-color) !important;
     padding: 0 !important;
     margin: 0 !important;
     text-transform: none !important;
     text-align: left !important;
     display: flex !important;
+    color: var(--primary-text-color);
+    border: 0;
+    width: 100%;
 
     &::after {
       content: '';
@@ -48,10 +51,6 @@
     height: auto;
   }
 
-  &__explanation {
-    margin-top: 1em;
-  }
-
   a {
     color: var(--brand-color--hicontrast);
     text-decoration: underline;