Accordion: refactor

app/soapbox/features/soapbox_config/index.js

@@ -349,7 +349,7 @@ class SoapboxConfig extends ImmutablePureComponent {
             </FieldsGroup>
             <Accordion
               headline={intl.formatMessage(messages.rawJSONLabel)}
-              content={<FieldsGroup>
+              content={(
                 <div className={this.state.jsonValid ? 'code-editor' : 'code-editor code-editor--invalid'}>
                   <SimpleTextarea
                     hint={intl.formatMessage(messages.rawJSONHint)}
@@ -358,7 +358,7 @@ class SoapboxConfig extends ImmutablePureComponent {
                     rows={12}
                   />
                 </div>
-              </FieldsGroup>}
+              )}
             />
           </fieldset>
           <div className='actions'>

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

@@ -1,19 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'soapbox/components/icon_button';
 import classNames from 'classnames';
 
 const messages = defineMessages({
-  collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse accordion' },
-  expand: { id: 'accordion.expand', defaultMessage: 'Expand accordion' },
+  collapse: { id: 'accordion.collapse', defaultMessage: 'Collapse' },
+  expand: { id: 'accordion.expand', defaultMessage: 'Expand' },
 });
 
-
 export default @injectIntl class Accordion extends React.PureComponent {
 
   static propTypes = {
-    headline: PropTypes.string,
+    headline: PropTypes.string.isRequired,
     content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     intl: PropTypes.object.isRequired,
   };
@@ -22,8 +20,9 @@ export default @injectIntl class Accordion extends React.PureComponent {
     expanded: false,
   }
 
-  handleToggleAccordion = () => {
+  handleToggleAccordion = (e) => {
     this.setState({ expanded: !this.state.expanded });
+    e.preventDefault();
   }
 
   render() {
@@ -31,20 +30,16 @@ export default @injectIntl class Accordion extends React.PureComponent {
     const { expanded } = this.state;
 
     return (
-      <div className='accordion'>
-        {headline && <div className='accordion__title'>{headline}
-          <IconButton
-            className='accordion__toggle' size={20}
-            title={expanded ? intl.formatMessage(messages.collapse) : intl.formatMessage(messages.expand)}
-            icon={expanded ? 'angle-down' : 'angle-up'}
-            onClick={this.handleToggleAccordion}
-          />
-        </div>}
-        <div className={classNames(
-          'accordion_content',
-          { 'expanded' : expanded },
-          { 'closed' : !expanded })}
+      <div className={classNames('accordion', { 'accordion--expanded' : expanded })}>
+        <button
+          type='button'
+          className='accordion__title'
+          onClick={this.handleToggleAccordion}
+          title={intl.formatMessage(expanded ? messages.collapse : messages.expand)}
         >
+          {headline}
+        </button>
+        <div className='accordion__content'>
           {content}
         </div>
       </div>

app/styles/application.scss

@@ -71,6 +71,7 @@
 @import 'components/filters';
 @import 'components/mfa_form';
 @import 'components/snackbar';
+@import 'components/accordion';
 
 // Holiday
 @import 'holiday/halloween';

app/styles/basics.scss

@@ -159,50 +159,6 @@ body {
   color: #ffffff;
 }
 
-.explanation-box,
-.accordion {
-  color: var(--primary-text-color);
-  padding: 15px 20px;
-  font-size: 14px;
-  background-color: var(--brand-color--faint);
-  margin: 5px 20px;
-  border-radius: 8px;
-
-  &__title {
-    font-weight: bold;
-    font-size: 16px;
-  }
-
-  &__explanation {
-    margin-top: 1em;
-  }
-
-  a {
-    color: var(--brand-color--hicontrast);
-    text-decoration: underline;
-
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-.accordion {
-  margin: 0;
-
-  .accordion_content {
-    transition-duration: 0.2s;
-
-    &.expanded {
-      display: block;
-    }
-
-    &.closed {
-      display: none;
-    }
-  }
-}
-
 noscript {
   text-align: center;
 

app/styles/components/accordion.scss

@@ -0,0 +1,63 @@
+.explanation-box {
+  margin: 5px 20px;
+}
+
+.explanation-box,
+.accordion {
+  color: var(--primary-text-color);
+  padding: 15px 20px;
+  font-size: 14px;
+  background-color: var(--brand-color--faint);
+  border-radius: 8px;
+  margin: 0;
+
+  &__title {
+    font-weight: bold !important;
+    font-size: 16px !important;
+    background: transparent !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    text-transform: none !important;
+    text-align: left !important;
+    display: flex !important;
+
+    &::after {
+      content: '';
+      display: block;
+      font-family: ForkAwesome;
+      font-size: 20px;
+      padding-left: 10px;
+      margin-left: auto;
+    }
+  }
+
+  &__content {
+    height: 0;
+    overflow: hidden;
+  }
+
+  &--expanded &__title {
+    margin-bottom: 10px !important;
+
+    &::after {
+      content: '';
+    }
+  }
+
+  &--expanded &__content {
+    height: auto;
+  }
+
+  &__explanation {
+    margin-top: 1em;
+  }
+
+  a {
+    color: var(--brand-color--hicontrast);
+    text-decoration: underline;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}

app/styles/forms.scss

@@ -679,14 +679,24 @@ code {
   max-height: 100px;
 }
 
-.code-editor textarea {
-  font-family: monospace;
-  white-space: pre;
-}
+.code-editor {
+  textarea {
+    font-family: monospace;
+    white-space: pre;
+  }
 
-.code-editor--invalid textarea {
-  border-color: $error-red !important;
-  color: $error-red;
+  &--invalid textarea {
+    border-color: $error-red !important;
+    color: $error-red;
+  }
+
+  .input {
+    margin-bottom: 0;
+  }
+
+  .hint {
+    margin-top: 10px;
+  }
 }
 
 .input .row .fa-times-circle {