Introduce CollapsedComponent for minified component (#1673)

* Introduce `CollapsedComponent` for minified component

This is the some groundwork for allowing the preview to be minimized.
`CollapsedComponent` unifies the collapsed UI for the currently
collapsible components (the 3 editors and the console).

Starts to fix: #1340

* Pull Request feedback:

- Pull out BEM block for `CollapsedComponent`
- Unnecessary `key`
- Pass full component name rather than constructing

Author: alexpelan

locales/en/translation.json

@@ -71,6 +71,7 @@
         "css": "CSS",
         "javascript": "JS"
       },
+      "console": "Console",
       "output": "Output",
       "instructions": {
         "cancel": "Cancel",

src/components/CollapsedComponent.jsx

@@ -0,0 +1,49 @@
+import {faChevronUp} from '@fortawesome/free-solid-svg-icons';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import React from 'react';
+import PropTypes from 'prop-types';
+import partial from 'lodash-es/partial';
+import classnames from 'classnames';
+
+export default function CollapsedComponent({
+  component,
+  isRightJustified,
+  onComponentUnhide,
+  projectKey,
+  text,
+}) {
+  return (
+    <div
+      className="collapsed-component"
+      onClick={partial(
+        onComponentUnhide,
+        projectKey,
+        component,
+      )}
+    >
+      <div
+        className={classnames(
+          'label',
+          'collapsed-component__label',
+          {'collapsed-component__label_left': !isRightJustified},
+        )}
+      >
+        {text}
+        {' '}
+        <FontAwesomeIcon icon={faChevronUp} />
+      </div>
+    </div>
+  );
+}
+
+CollapsedComponent.propTypes = {
+  component: PropTypes.string.isRequired,
+  isRightJustified: PropTypes.bool.isRequired,
+  projectKey: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  onComponentUnhide: PropTypes.func.isRequired,
+};
+
+CollapsedComponent.defaultProps = {
+  isRightJustified: true,
+};

src/components/Console.jsx

@@ -2,18 +2,19 @@ import classnames from 'classnames';
 import {
   faBan,
   faChevronDown,
-  faChevronUp,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import partial from 'lodash-es/partial';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import {t} from 'i18next';
 
 import {EditorLocation} from '../records';
 
 import ConsoleEntry from './ConsoleEntry';
 import ConsoleInput from './ConsoleInput';
+import CollapsedComponent from './CollapsedComponent';
 
 export default function Console({
   currentCompiledProjectKey,
@@ -33,6 +34,18 @@ export default function Console({
   onToggleVisible,
   requestedFocusedLine,
 }) {
+  if (!isOpen) {
+    return (
+      <CollapsedComponent
+        component="console"
+        isRightJustified={false}
+        projectKey={currentProjectKey}
+        text={t('workspace.components.console')}
+        onComponentUnhide={onToggleVisible}
+      />
+    );
+  }
+
   const console = (
     <div
       className="console__scroll-container output__item"
@@ -65,8 +78,6 @@ export default function Console({
     </div>
   );
 
-  const chevron = isOpen ? faChevronDown : faChevronUp;
-
   return (
     <div
       className={classnames(
@@ -79,9 +90,9 @@ export default function Console({
         onClick={partial(onToggleVisible, currentProjectKey)}
       >
         <div>
-          Console
+          {t('workspace.components.console')}
           {' '}
-          <FontAwesomeIcon icon={chevron} />
+          <FontAwesomeIcon icon={faChevronDown} />
         </div>
         <div
           onClick={(e) => {
@@ -92,7 +103,7 @@ export default function Console({
           <FontAwesomeIcon icon={faBan} />
         </div>
       </div>
-      {isOpen ? console : null}
+      {console}
     </div>
   );
 }

src/components/EditorsColumn.jsx

@@ -1,21 +1,20 @@
-import {faChevronUp} from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {DraggableCore} from 'react-draggable';
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import prefixAll from 'inline-style-prefixer/static';
-import {t} from 'i18next';
 import classnames from 'classnames';
 import clone from 'lodash-es/clone';
 import isEmpty from 'lodash-es/isEmpty';
 import includes from 'lodash-es/includes';
 import map from 'lodash-es/map';
 import partial from 'lodash-es/partial';
 import partition from 'lodash-es/partition';
+import {t} from 'i18next';
 
 import {EditorLocation} from '../records';
 
+import CollapsedComponent from './CollapsedComponent';
 import EditorContainer from './EditorContainer';
 import Editor from './Editor';
 
@@ -100,21 +99,13 @@ export default function EditorsColumn({
 
   hiddenLanguages.forEach(({language}) => {
     children.push((
-      <div
-        className="editors__collapsed-editor"
+      <CollapsedComponent
+        component={`editor.${language}`}
         key={language}
-        onClick={partial(
-          onComponentUnhide,
-          currentProject.projectKey,
-          `editor.${language}`,
-        )}
-      >
-        <div className="label editors__label editors__label_collapsed">
-          {t(`languages.${language}`)}
-          {' '}
-          <FontAwesomeIcon icon={faChevronUp} />
-        </div>
-      </div>
+        projectKey={currentProject.projectKey}
+        text={t(`languages.${language}`)}
+        onComponentUnhide={onComponentUnhide}
+      />
     ));
   });
 

src/css/application.css

@@ -490,11 +490,6 @@ body {
   flex: 1;
 }
 
-.editors__collapsed-editor {
-  border-top: 4px solid var(--color-light-gray);
-  flex: none;
-}
-
 .editors__label {
   text-align: right;
 }
@@ -508,6 +503,10 @@ body {
   z-index: 1;
 }
 
+.editors__label_left {
+  text-align: left;
+}
+
 .editors__column-divider {
   background-color: var(--color-light-gray);
   width: 0.5vh;
@@ -540,6 +539,21 @@ body {
   pointer-events: none;
 }
 
+/** @define collapsed-component */
+
+.collapsed-component {
+  border-top: 4px solid var(--color-light-gray);
+  flex: none;
+}
+
+.collapsed-component__label {
+  text-align: right;
+}
+
+.collapsed-component__label_left {
+  text-align: left;
+}
+
 /** @define output */
 
 .output {